ترجمه آموزش های جاوااسکریپت پیشرفته از سایت web monkey-level :intermediate

farik

Well-Known Member
خوب دوستان بنا به قولی که داده بودم تصمیم گرفتم یک قسمت آموزش بزارم توی انجمن کلاینت ساید...:rose:
خوب با یک جستجوی کوتاه توی اینترنت حس کردم که مطالبی از سایت webmonkey شاید بتونه برای دوستان مفید باشه ..برای همین تصمیم گرفتم که انشالله هر وقت فرصت شد از این به بعد یک مطلب از مطالب advance رو ترجمه و اینجا قرار بدم..امیدوارم به در دوستان بخوره.لازم میدونم بگم که مطالبی که خواهم نوشت ترجمه دقیق نیست بلکه در برخی قسمت ها تنها برداشت خودم رو مینویسم و اضافات و کاستی های خواهد داشت.به هر حال منبع اصلی متن در پایین هر نوشته خواهد آمد.:paint:

موردی اولی که در این آموزش ازش صحبت میشه عبارات شرطیه...فکر میکنم همه با ساختار کلی if در این زبان اسکریپتی آشنا باشند.میدونیم که این ساختار موارد بسیاری برای تنها یک مقدار دهی استفاده میشه و درون بلاگ شرط فقط یک مقدار دهی انجام میشه،مثلا:
[JSS]if (monkey_behavior == "good")

{

var toy = "videogames";

} else {

var toy = "rocks";



}
[/JSS]اما خوب به جای نوشتن این چند خط در جاوا راه حلی جایگزین شده که راحت تر بتونیم این عبارت ها رو تخصیص بدیم.اگر دقت کنید در هر دو بلاک یم متغیر تغییر مقدار داده شده و میخواستیم کلا به یک متغیر یک مثدار بدهیم با توجه به بابری عبارت monkey_behaviour...به جای اینکار و برای خلاصه سازی از "عملگر شرطی" یا conditional operator استفاده میشه.این عملگر نحوه استفاده ازش به روت زیر میشه:
[JSS]var toy = (monkey_behavior=="good") ? "videogames" :"rocks"; [/JSS]
این دو کد هر د از نظر کاربرد کاملا یکسانند و برای ما تفاوتی در عمل ندارند.اگر شرط داخل پرانتزبرقرار باشد عبارت بعد از "؟" به متغیر تخصیص میابد وگرنه عبارت بعد از “:” به متغیر تخصیص میابد که درست همون کاریه که بالاتر انجام میدادیم.این عملگر بسیار مفید.به طور مثال به فطعه کد زیر دقت کنید:
[JSS]var password = "open sesame";

var answer = prompt("what's the password? ","");

alert((answer == password) ? "welcome!" :"buzz off");[/JSS]
در این قطعه کد ایتدا یک رمز مشخص کردیم،چنانچه که کاربر پاسخی که داد همان رمز ما بود،عبارت “welcome” برایش به صورت alert نمایش داده میشود و در غیر اینصورت “buzz off”...حال فرض کنین که میخواستیم کد رو به صورت عادی بنویسیم:
[JSS]var password = "open sesame";

var answer = prompt("what's the password? ","");

if (answer == password)

{

alert("welcome");

} else {

alert("buzz off");

}
[/JSS]

میبنین که در بهترین حالت هم کلی کد بیشتر نوشتیم.
+دوستان جا داره اینجا یک نکته رو یادآوری کنم که اگه بعد از دستورات شرطی فقط از یک دستور استفاده میکنین میتونین از گذاشتن {} خودداری کنین..این کار شاید در خود جاوااسکریپت خیلی جالب به نظر نیاد ولی با توجه به ساختار زنجیره ای در فریم ورک ها خیلی به کمک شما میاد.
کلمه کلیدی VAR:
خوب نمیدونم اوایل که شما هم شروع کردین به یادگیری این زبان کسی به شما گفت که زبانش خیلی مسخرست حتی نمیخواد نوع متغیرها رو تعریف کنی یا نه....چون هنوزم که هنوزه برای کسایی که با زبانهایی مثل جاوا کارکردن سخته که بتونن بدون تبدیل و تعریف کار کنن...خوب این حرف که متغیر ها نیاز به تعریف ندارن تا حدی درست نیست..اگرچه که امروزه غالب مرورگها از این امر پشتیبانی میکنند ولی هنوز هم مرورگرهای MSIE مخصوصا روی مکینتاش با این قضیه خیلی خوب کنر نیومدن..
اما خوب دلیل اصلی گفتن این کلمه کلیدی اینجا این نیست که بعضی مرورگها ممکنه درست کار نکنن...دلیل اصلی چیزی هست که اصطلاحا در OOP بهش میگن encapsulation خوب ...این کلمه همونطور که شاید از اسمش هم حدس زده باشید به این معنیه که ما میایم و همه کاری کاری باید انجام بدیم رو توی یک تابع یا شی انجام میدیم و فقط خود کسی که تابع یا کلاس رو نوشته مهمه بدونه که چه اتفاقاتی داخلش افتاده...این قضیه در نوشتن توابع نقش خیلی مهمه رو ایفا میکنه...آخه هدف اصلی تابع امکان استفاده مجدد از تکه کد ها بوده..
خوب بزارین با یک مثال قضیه رو بازترش کنیم.فرض کنین که شما داده های هواشناسی رو از یک سایت خارجی گرفتین...حالا اونها بر حسب فارنهایت هست و شما میخواین تبدیلش کنین به سانتیگراد..خوب احتمالا کدی مشابه زیر لازم دارین:
[JSS]function fahrenToCelsius(faren)

{

temp = (faren - 32) * 5/9;

return temp;

}

function convertTemp()

{

temp = prompt("what temperature fahrenheit? ","50");

celsius = fahrenToCelsius(temp);

alert(temp + " degrees Fahrenheit is " +

celsius + " degrees Celsius.");

}
[/JSS]خوب تابع convertTemp دما رو از کاربر میگیره و تابع fahrenToCelsius اون رو به سانتیگراد تبدیل میکنه و مججدا با فرمت خاصی اونها رو برای کاربر alert میکنه...خوب مثلا فرض کنین که شما زدین 50..خروجی باید چیزی باشه به شکل:
“50 degrees Fahrenheit is 10 degrees Celsius.”
تا اینجای کار هیچ مشکلی نیست..اما بیاین ببینیم که آیا این کد درست کار میکنه یا نه:
کد:
http://www.wired.com/wired/webmonkey/stuff/advanced_js_tutorial_files/tempconvert_bad.html
خوب چرا درست کار نمیکرد؟...یعنی خروجی به جاش به ما این پیغام رو داد:
“10 degrees Fahrenheit is 10 degrees Celsius.”
خوب یک بار دیگه به کد یک نگاه بندازین...چیز عجیبی نمیبنین؟...درسته ما از اسم temp دو بار استفاده کردیم..ولی مگه این ها توی دو تا بلاگ مجزا نیستن؟...خوب باید بگم که نه ..
بیاین با هم نگاهی به روند برنامه بندازین...برای اینکار من ترجیح میدم که با چند تا alert ساده برنامه رو رفع اشکال کنم...:
[JSS]function fahrenToCelsius(faren)

{

temp = (faren - 32) * 5/9;

return temp;

}

function convertTemp()

{

temp = prompt("what temperature fahrenheit? ","50");
alert(‘temp before calling function:’+temp);

celsius = fahrenToCelsius(temp);
alert(‘temp after calling function:’+temp);

alert(temp + " degrees Fahrenheit is " +

celsius + " degrees Celsius.");

}[/JSS]
خوب نتیجه رو میتونین توی یک صفحه html ساده امتحان کنین..بعد از صدا زدن تابع مقدار temp عوض شده...
+دوستان این عبارت ها رو ساده نگیرین..در یکی از همین تازه ترین پروژه ها با استفاده از جی وکوئری در چند بلاک تو در تو مقدار دهی کرده بودم که یکی رویداد onclick بود که داخل اون یک شی انیمیشن میشد..خوب توی این دو تا بلاک متغیر this به کلی دو مفهوم مختلف میداد و به دو شی متفاوت اشاره میکرد که من رو یکم اذیت کرد.
اما راه حل چیست؟خوب ما با دو راه حل مواجهیم..یکی اینکه بیایم و اسم متغیر تابع بالایی رو عوض کنیم..اما یک لحظه صبر کنین..امدیم و ما این تابع رو در یک بخش از صفحه ای میخواستیم به کار ببریم که temp بارها استفاده شده و این تابع هم خیلی پیچیده تر بود...واقعا فکر میکنین که اشکل یابی به این اسونی میبود؟...نه این راه حل مناسبی نیست..اگرچه شاید خود من هم گاهی از این استفاده کنم ولی راه حل استاندارد راه حل دوم است
راه حل دوم تعریف temp در تابع بالا به کمک var است.در این حالت کد ما به شکل زیر در می آید:[JSS]
function fahrenToCelsius(faren)

{

var temp = (faren - 32) * 5 / 9;

return temp;

}



function convertTemp()

{

var temp = prompt("what temperature Fahrenheit? ","50");

var celsius = badFahrenToCelsius(temp);

alert(temp + " degrees Fahrenheit is " +

celsius + " degrees Celsius.");

}[/JSS]
اینبار اگر بخوایم مقادیر متغیر ها رو دنبال کنیم به صورت زیر یک جدول خواهیم داشت.تا پیش از وارد شدن به تابع تبدیل:
faren = 50

کد:
[LEFT](inside convertTemp) temp = 50
[/LEFT]
ولی پس از وارد شدن به اصطلاح در برخورد با var temp مقدار تابع قبلی mask شده و در انتهای خروج از تابع پیش از خارج شدن داریم:
کد:
(inside fahrenToCelsius) temp = 10
[/LEFT]
و سپس پس از خروج در هنگام alert دادن داریم:
کد:
(inside convertTemp) temp = 50



(inside convertTemp) celsius = 10
کد بالا نتیجتا نتیجه مطلوب ما یعنی پیغام دادن به صورت:
“50 degrees Fahrenheit is 10 degrees Celsius.”
را به ما میدهد..
امیدوارم از آموزش استفاده کافی رو برده باشید.دوستانی که تمایل دارن نویسنده در این قسمت تمرین های مخصوص خودش رو گذاشته که البته مثل اینکه از سطح یک روی یک اسکریپ کاری میکردن که مشکلی نیست بازم چون اسکریپت رو اونجا گذاشته نمونش رو..
http://www.wired.com/wired/webmonkey/stuff/advanced_js_tutorial_files/AJST_homework1.html
سوالی بود در خدمتم..:wink:
موفق باشید..
منبع آموزش:
http://www.webmonkey.com/2010/02/advanced_javascript_tutorial_-_lesson_1/
 

جدیدترین ارسال ها

بالا