A new begining
AHHP presents

باز شدن خودکار لینکهای خارجی در پنجره جدید توسط JavaScript
02 تير 1389 ساعت 11:00

تابع JavaScript برای کنترل لینکهای External

یکی از تمایلات وبلاگنویسها اینه که لینکهای خارجی، در یک تب یا پنجره جدید باز بشه. شاید این تمایل برای تو هم مثل من یکم دیر بوجود اومده باشه و پیدا کردن و اصلاح لینکها ممکن نباشه.
خوب علم پیشرفت کرده. من این کد کوچیک رو واسه همین وبلاگ نوشتم. شاید به درد تو هم بخوره:

var hostname = window.location.hostname;
var anchors = document.getElementsByTagName("a");
for(var i=0; i<anchors.length; i++) {
	if(	anchors[i].href
		&& anchors[i].href.indexOf(hostname) == -1
		&& !anchors[i].target
	) {
		anchors[i].target = "_blank";
	}
}

از اونجایی که کار نصفه و نیمه جواب نمیده و چون این وبلاگ بخش MooTools و jQuery هم داره. این کد رو با این دو فریم ورک هم می نویسم محض نمونه و مثال از این فریم ورکها:
انتخابگر هر دوشون مثل هم هست و به شکل زیره:

var hostname = window.location.hostname;
var selector = 'a[href]:not([href*='+hostname+']):not([target]';

• MooTools:

  $$(selector).set('target', '_blank');

• jQuery:

  $(selector).attr('target', '_blank');

من اینجا یکم محدودیت عرضی دارم که طول خطوط کدها طولانی نشه وگرنه این کدها رو میشه تو یک خط اجرا کرد بجای اینکه هر تیکه اش رو تو یه متغیر بریزیم.

برچسب ها: javascript,solution

•  
•  
•  
•  
•  
•  
•  

همکاری jQTouch ، Raphaël ، Ext JS و تولد Sencha
01 تير 1389 ساعت 12:56

تحولات جدید Ext JS

Ext JS هفته پیش اعلام کرد که اسم شرکتش رو از Ext JS به Sencha که نام یک نوع چای سبز ژاپنی هست، تغییر داده. این کار بخاطر پیوستن آقای David Kaneda و Dmitry Baranovskiy به این شرکت برای پروژه های بزرگتر اعلام شده.

Ext JS در واقع اسم پروژه و نام شرکت سازنده اش بوده ولی بخاطر اینکه با این دو برنامه نویس ترکیب شده، نام Ext JS رو مخصوص فریم ورکش قرار داده و نام Sencha رو روی شرکتش گذاشته. انگیزه اشون از این کار رو هم آینده نگری توصیف کردند که و گفتند که وب در حال پیش رفتن به سمت نمایه های گرافیکی بیشتر و استفاده تحت دستگاههای قابل حمل مثل موبایل هست و اگر روی این موارد تمرکز کنیم، برای آینده حرف تازه ای برای زدن خواهیم داشت.
دیروز من این خبر رو توی سایت extjs.com خوندم که گفته بود داریم جمع می کنیم میریم sencha.com و امروز extjs.com دیگه مستقیما به sencha.com منتقل میشه.

Ext JS
Ext JS یک فریم ورک خیلی قوی و کامل تحت جاوااسکریپت برای ساختن UI یا اینترفیس هست. Ext JS هر چیزی که از ذهن من و شما رد بشه رو داره و این قابلیتها رو با ساختار واقعا فوق العاده ای فراهم کرده. وقتی شروع به استفاده یا یادگیری اش کنی میفهمی که سیستمی با این وسعت و حجم، چه ارتباط جالبی بینش برقراره. اینکه چندان اسمش شنیده نمیشه بخاطر چند تا نکته است. اول اینکه گستردگی و حجم امکانات این فریم ورک خیلی بالاست و یادگیری اش واقعا زمانبره. دوم اینکه این فریم ورک مخصوص طراحی بخشهای خاص ساخته شده نه مثل jQuery برای سایتهای عادی. برای همین موضوع حجم کدهاش خیلی بالاست. برای صفحه ای که از این فریم ورک استفاده کرده، تقریبا باید یک مگابایت فایل جاواسکریپت و سی اس اس لود کنیم. سومین دلیل هم اینه که استفاده از Ext JS مفت مفت هم نیست. برای استفاده های تجاری و مشابهش باید لایسنسشون رو خریداری کنیم ولی برای استفاده های عادی، رایگانه. وارد لینک زیر شو، دموهاش رو ببین و لذت ببر.
آدرس: /www.Sencha.com/products/js

Dmitry Baranovskiy:
سازنده یک فریم ورک جاوااسکریپت واقعا خفن به نام Raphaël هست که با محوریت فعالیتهای گرافیکی ایجاد شده. کتابخانه Raphaël با Canvas و SVG و جاوااسکریپت جادو می کنه! باور نمی کنی که چه چیزهایی ازش برمیاد. حتما دموهای سایتش رو چک کن. مثلا توی چند تا خط، یک چارت خیلی شیک میسازیم که قابلیتهای خیلی زیادی داره. (اگه نبینی از دستت میره).
آدرس: www.Raphaeljs.com

David Kaneda:
ایشون هم نویسنده jQTouch هستند. jQTouch یک پلاگین jQuery هست که باهاش UI برای موبایل ساخته میشه. استایلها و افکتهاش درست شکل iPhone هستند. یعنی اگر بخوایم سایتی مخصوص موبایل یا iPad و مشابهش طراحی کنیم که اینترفیسش شبیه iPhone کار کنه، jQTouch به درد میخوره.
آدرس: www.jQTouch.com

خلاصه اینکه سه تا غول جاوااسکریپت کنار هم جمع شدند تا کارهای خارق العاده بکنند. اولین نمونه اشون هم محصولی به نام Sencha Touch هست با عنوان اولین فریم ورک اپلیکیشن های موبایل تحت HTML5.

 

منبع: Sencha blog: Ext JS + jQTouch + Raphaël = Sencha

برچسب ها: ext js,framework,javascript,خبر

•  
•  
•  
•  
•  
•  
•  

روش بکارگیری Timestamp در PHP و MySQL و JavaScript
30 خرداد 1389 ساعت 01:44

کنترل و بدست گیری مقادیر زمان بین زبانهای برنامه نویسی

یکی از روشهای خیلی خوب بدست گیری زمان در برنامه نویسی، استفاده از زمان به شکل Timestamp تعریف شده در Unix است.

Timestamp ثانیه های طی شده از 00:00 1970/01/01 تا الانه. همونجوری که واضحه، زمان به این شکل، یک عدد صحیح خواهد بود و مهمترین خاصیتش سهولت نگهداری و مقایسه است.

زمان در PHP بر پایه Timestamp تعریف شده ولی در MySQL و JavaScript چنین نیست و معمولا برای هماهنگی این سه زبان، مجبوریم کدهای اضافی داشته باشیم درحالیکه هر سه این زبانها، امکاناتی برای کار با Timestamp بر پایه Unix دارند.

در زیر یک مثال در هر کدوم از این زبانها قرار گرفته:
• PHP:

  $timestamp = time();
  $date = date('Y F d', $timestamp);

• MySQL:

  timestamp = UNIX_TIMESTAMP()
  date = FROM_UNIXTIME(UNIX_TIMESTAMP(), '%Y %D %M %h:%i:%s %x')

• JavaScript:

  var timestamp = parseInt(new Date().getTime()/1000);
  var date = new Date(new Date().getTime()).getDay();

برچسب ها: javascript,mysql,php,solution

•  
•  
•  
•  
•  
•  
•  

ادغام MooTools و Dojo
17 فروردین 1389 ساعت 12:36

تولد moojo

طبق آخرین پست وبلاگ MooTools در این تاریخ، گفته شده که فریم ورک MooTools و Dojo قراره با هم ادغام بشند و تبدیل به فریم ورک جدید به نام MooJo بشند.

این کار بخاطر امکانات خوب فریم ورک Dojo و قابلیتهای ارث بری خوب در MooTools انجام میشه و قراره فریم ورک جدید، خصوصیات خوب هر دو رو داشته باشه.
گفته شده که MooTools همیشه رایگان بوده و فریم ورک جدید هم رایگان خواهد بود ولی برای دسترسی به بخش آموزشها باید یک کمک مالی زوری در حد 25 دلار انجام بشه. شیوه برطرف کردن مشکلات و باگها تغییر کرده. تیم MooTools تا حالا بصورت رایگان فریم ورک رو پشتیبانی میکردند ولی برای سیستم جدید، شیوه رفع اشکال و گزارش باگ تغییر کرده. برای رفع یک باگ یا باید تعداد خیلی زیادی کاربر اون باگ رو تایید کنند یا باید یه پول زیادی پرداخت کنیم تا به عنوان یه پروژه بررسی بشه.

MooTools توابع و افکتهای خوبی داره و Dojo ابزارهای زیاد. قراره فریم ورک جدید شامل افکتهای MooTools و ابزارهای Dojo باشه. بخش More در MooTools با Widgetهای Dojo عوض میشه تا در زمان تیم توسعه دهنده صرفه جویی بیشتری صورت بگیره. هسته فعلی هر دو فریم ورک دیگه قابل استفاده نخواهد بود و برای اینکه بخواییم اسکریپتهامون رو با فریم ورک جدید هماهنگ کنیم، باید یک حمایت مالی زوری داشته باشیم. اگر پیشنهاد یا نظری در این باره داشته باشیم، می تونیم آزادانه با MooTools تماس بگیریم که اون هنوز شامل سیستم حمایت مالی زوری نشده.

این دروغ آوریل MooTools بود! به گفته نویسنده پست: ما Dojo رو دوست داریم ولی نه اینقدر زیاد!

برچسب ها: framework,javascript,mootools

•  
•  
•  
•  
•  
•  
•  

Delegation با اسب سفید
16 اسفند 1388 ساعت 11:53

توابع Delegation در فریم ورکهای MooTools و jQuery

همونطور که مستحضریم، جاوااسکریپت امکان تعیین Event رو به هر Element از صفحه میده که مثلا اگر فلان Element کلیک شد این اتفاقا بیافته و اگر یکی دیگه mouseover شد اون یکی اتفاقا بیفته و غیره. تعیین این Eventها از طریق Frameworkها مثل MooTools و jQuery عجیب آدم رو یاد هلو میندازه. مخصوصا که امکان تعریف Evnet های اختصاصی رو هم میدن مثل OnLoveBoplo، OnVisitBoplo و غیره.

این فریم ورکها، امکانی برای اجرای کد در زمان تکمیل DOM رو دارند که در MooTools رویداد domReady و در jQuery متد ()ready. که به ما امکان قرار دادن کدها رو در <head> صفحه میدن و خیلی کاربرد دارند. مثل کدهای زیر که وقتی هر لینکی کلیک شد، یه alert ناقابل نمایش میده:

// MooTools
window.addEvent('domready', function(){
	$$('a').addEvent('click', function() {
		alert("You've clicked " + this.href + "!");
	});
});

// jQuery
$(document).ready(function(){
	$('a').click(function() {
		alert("You've clicked " + $(this).attr('href') + "!");
	});
});

همونطور که گفتم این کد در زمان تکمیل DOM یکبار انجام میشه و Eventها رو تنظیم می کنه. همه چی آرومه و من خیلی خوشحالم تا اینکه یه جایی یک لینک توسط جاوااسکریپت ساخته میشه یا توسط Ajax به صفحه اضافه میشه و کاملا منطقی خواهد بود که چون موقع اجرای کدهای بالا اون لینک وجود نداشته، Eventاش هم Set نشده و کدهاش هم اجرا نخواهد شد. برای حل این مشکل سه راه وجود داره ....
برای اینکه بفهمی Delegation چیه، چرا خوبه و چطور عمل می کنه، ادامه مطلب رو بخون....

برچسب ها: javascript,jquery,mootools,solution

•  
•  
•  
•  
•  
•  
•  

LazyLoad، یک تنبل دوست داشتنی
13 اسفند 1388 ساعت 11:17

پلاگین و ترفند جالب جاواسکریپت

یه زمانی جاوااسکریپت منفورترین قابلیت تحت وب بود ولی بعد از پیدایش MooTools و jQuery و Prototype و غیره، به یه بخش مهم سایتهای حرفه ای تبدیل شده. از اون مهمتر اینکه باعث تحریک ذهنهای خلاق و طراحهای خوش ذوق شده. Lazy Load یکی از این خلاقیتهاست. Lazy Load یه روش جالب برای لود تصاویر در صفحه های بلنده. مثلا سایت SmashingMagazine عزیز پست داره با این عنوان: "80 قالب زیبا برای وردپرس" این یعنی این مقاله قراره 80 تا عکس داشته باشه و از اونجاییکه این سایت یک سایت حسابیه و مخاطبینش هم سرعت اینترنت حسابی دارند (البته غیر من)، با خیال راحت کلی عکس با کیفیت میریزه تو صفحه. اما با وجود سرعت بالا هم لود همزمان این تعداد عکس ناجوره.
اینجاست که تکنیک Lazy Load مثل هوخشتره میاد و راهکار ارائه میده. این تکنیک به این صورته که هیچ عکسی لود نمیشه مگر اینکه توی منطقه قابل دید مانیتور یا Viewport کاربر باشه. این یعنی وقتی صفحه لود میشه، عکسها لود نمیشن و وقتی اسکرول می کنیم روی یک عکس، همون موقع شروع به بالا اومدن می کنه! انگار داریم همون عکسی که میبینیم رو باز می کنیم! اینجوری من با خیال راحت مقاله گنده SmashingMagazine عزیز که LazyLoad نصب کرده رو باز می کنم با این نظر که تا موقعی که پایین صفحه نرم اون عکس پایینی ها لود نمیشن و سرعتم کند نمیشه.

هم jQuery و هم MooTools این پلاگین رو دارند که پلاگین MooTools اش رو آقای David Walsh خیلی عزیز نوشته.

• MooTools LazyLoad Plugin
• jQuery LazyLoad Plugin

یه نکته دیگه اینکه این دو تا پلاگین با اینکه یه کار می کنند ولی یه تفاوت کوچیک دارند و اون اینه پلاگین jQuery وقتی لود تصویر رو شروع می کنه که عکس در Viewport قرار بگیره یا توی کادر مرورگر قابل رویت باشه ولی پلاگین MooTools یکم قبل از رسیدن اسکرول صفحه به محل تصویر عملیات لود رو شروع می کنه که به نظر من بهتره.

شنگول باشید

برچسب ها: framework,javascript,jquery,mootools

•  
•  
•  
•  
•  
•  
•  

CSS و سردرد ناشی از مرورگرهای مختلف
05 آبان 1388 ساعت 01:55

ابزارهای طراحی بصورت Cross-Browser

وقتی میخوای CSS بنویسی حتما می دونی که کدهات توی مرورگرهای مختلف که هر روز دارند بیشتر می شن، متفاوت رندر میشه. مخصوصا اینترنت اکسپلورر که به زبون خودش حرف می زنه! واسه اینکه CSS به اصطلاح Cross-Browser داشته باشیم یعنی توی همه مرورگرها، خروجی ثابتی داشته باشه، دو راه وجود داره:

این دو راه توی ادامه پست توضیح داده شده.

برچسب ها: css,javascript,مرورگر

•  
•  
•  
•  
•  
•  
•  

مقایسه jQuery و MooTools
31 تير 1388 ساعت 09:56

بررسی فنی تفاوت این دو فریم ورک

برای استفاده از جاوااسکریپت توی سایت، معمولا jQuery و MooTools گزینه های قابل تأمل تری هستند و اغلــــب ایــن ســــوال پیـــش میــاد که کــــدوم رو باید انتخــــاب کرد؟ چــند روز پیـــش به ســـایـــت jQuery vs MooTools.com برخوردم. یکی از توسعه دهندگان MooTools، یه مقاله بلند بالا، در همین باره در این سایت قرار داده. من هم از اونجاییکه چند وقت بود تو فکر نوشتن همچین مطلبی بودم، تصمیم گرفتم که این مقاله رو ترجمه کنم. این کار رو انجام دادم و صفحه فارسی رو برای نویسنده اش ارسال کردم و اون هم تو سایت قرار داد. به آدرس زیر:

« jQuery vs MooTools .com / index_fa.html »

خیلی سعی کردم که ترجمه حتی الامکان کامل و رسا باشه و هرکسی با هر سطح فنی، بتونه ازش استفاده کنه. در کل مقاله برای کسانی که چیزی از جاوااسکریپت نمی دونن هم تا حدی مفیده.

اگر حوصله خوندن اون مقاله رو نداری یا میخوای نظرات خیلی خیلی خیلی مفید من رو هم در این باره بدونی، ادامه مطلب رو بخون ....

برچسب ها: framework,javascript,jquery,mootools

•  
•  
•  
•  
•  
•  
•  

بیایم AJAX یاد بگیریم.....
10 اردیبهشت 1388 ساعت 12:55

آموزش مختصری برای AJAX

AJAX چی هست اصلا؟ آژاکـــــــس یا ای-جکــــس مخفف Asynchronous JavaScript And XML به معنی جاوااسکریپت و XML غیرهمزمان هست. به معنیش فکر نکن که چیزی دستگیرت نمیشه! 
آژاکس تکنیکی برای دریافت اطلاعات از سرور بدون بازخوانی یا Refresh صفحه است. اصولش هم به این صورته که جاوااسکریپت به سرور درخواست(Request) ارسال می کنه و نتیجه یا پاسخ(Response) سرور رو دریافت می کنه بدون این که صفحه جاری بازخوانی بشه.

توضیح بیشتر به این صورت هست که ...... ادامه آموزش

برچسب ها: ajax,javascript

•  
•  
•  
•  
•  
•  
•