مقدمات جاوااسکریپت

• « Previous
• Next »

جاوااسکریپت یک زبان برنامه نویسی کاملا داینامیک است که زمانیکه به اسناد HTML اعمال میشود، تعامل پویا با وبسایت را ممکن میکند. جاوااسکریپت توسط برندان ایخ یکی از موسسین پروژه موزیلا، بنیاد موزیلا و شرکت موزیلا، ساخته شد.

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

جاوااسکریپت ذاتا خیلی فشرده اما در عین حال انعطاف پذیر است و توسعه دهندگان با استفاده از همین خصوصیت انعطاف پذیری جاوااسکریپت ابزارهای بسیاری را نوشته اند که برروی هسته زبان جاوااسکریپت قرار می گیرند و به کمک آنها می توان با تلاش کم به قابلیت های بیشتر دست یافت. این قابلیت ها شامل موارد زیر می گردد:

واسط‌ های برنامه نویسی کاربردی  (APIs) — APIs ،  در داخل مرورگر تعبیه شده اند تا کارهایی مانند ایجاد پویایه HTML  و تنظیم استایل های CSS ، یا گرفتن و دستکاری یک استریم ویدئو از وب کم کاربر، یا ایجاد گرافیک های سه بعدی و نمونه های صوتی را فراهم کنند.

• API های مختلف به توسعه دهندگان اجازه میدهند که کارایی های مختلف را به نرم افزار هایشان با اضافه کردن قابلیت سایت های دیگر مانند توییتر یا فیسبوک بیفزاییند.
• فریمورک های مختلف و کتابخانه ها را می توانید به html تان اضافه کنید تا به شما اجازه ساخت سریع سایت و اپلیکیشنتان را بدهد.

قسمت بالا واقعا هیجان انگیز به نظر میرسد و باید هم اینطور باشد -جاوا اسکریپت یکی از مهیجترین تکنولوژی های شبکه اینترنت است وقتی شما شروع به پیدا کردن مهارت در آن میکنید وب سایت شما وارد یک بعد جدید از قدرت و خلاقیت میگردد.

اما راحت بودن با جاوا اسکریپت از راحت بودن با HTML  و CSS مقداری سخت تر است. شاید شما مجبور باشید که با قدم های استوار از کارهای کوچک شروع کنید. برای شروع، ما به شما نشان میدهیم چطور کدهای جاوا اسکریپت ساده و ابتدایی به صفحه تان اضافه کنید. ساختن مثال "hello world!"(the standard in basic programming examples.)

1. ابتدا, به صفحه وب آزمایشی خود بروید و یک فایل جدید با نام main.js بسازید و آن را در فولدر scripts خود ذخیره کنید.
2. سپس به فایل index.htm رفته و عناصر زیر را در یک خط جدید و پیش از  </body> بنویسید.

<script src="scripts/main.js"></script>

3. این دقیقا همان کاری است که با عنصر <link> برای وارد کردن CSS میکنیم.— با این کار دستوزات جاوااسکریپت را به سند HTML خود اضافه می کنید بنابراین روی HTML,CSS و سایر عناصر صفحه تاثیر خواهد گذاشت.

4. اکنون کد زیر را به فایل main.js اضافه کنید: 

var myHeading = document.querySelector('h1');
myHeading.innerHTML = 'Hello world!';

5. حالا مطمئن شوید فایل های HTML و Javadcript ذخیره شده اند. سپس index.html را در مرورگر باز کنید. باید چیزی مشابه تصویر زیر مشاهده کنید. 7

خوب همانطور که امتحان کردید شما با کمک جاوااسکریپت متن موجود در سرتیتر (تگ H1) را به متن "Hello World"   تغییر دادید.  این عمل را با صدا زدن تابع querySelector() بمنظور ارجاع دادن به سرتیتر H1 و ذخیره آن در متغییر myHeading  انجام داده اید. این عمل بسیار به شبیه کاری است که ما selectors در CSS انجام می دهیم. زمانی که می خواهید روی یک تگ یا المان عملی را انجام دهید احتیاج است اول آن را انتخاب کنید.

بعد از آن متن یا محتوا مورد نظر را  به متغییر myHeading   که توسط تابع innerHTML تعریف شده است ٫ به ویژگی محتوای متن  تگ H1  محتوای "Hello World" مقدار دهی می شود.

برویم سراغ اصول و ویژگی پایه ای و اصلی زبان برنامه نویسی جاوااسکریپت,  بررسی ویژگی های عمومی در تمام زبان های برنامه نویسی بويژه این ویژگی ها در زبان جاوا اسکریپت باعث درک بهتر از روش کار کرد آن خواهد شد. اگر شما اصول پایه  را بدانید می توانید برنامه نویسی را  شروع کنید

Variables نگهدارنده هایی هستند که شما میتوانید مقادیر را درون آن ها نگهداری کنید. با تعریف یک متغیر با استفاده از کلمه کلیدی var شروع کنید، سپس با یک نام دلخواه کار را ادامه دهید:

var myVariable;

پس از تعریف یک متغیر شما می توانید به آن یک مقدار بدهید:

myVariable = 'Bob';

شما میتوانید مقداررا تنها با فراخوانی نام متغیر بدست آورید:

myVariable;

شما میتوانید اگر بخواهید هر دوی این عملیات ها را روی یک خط انجام دهید:

var myVariable = 'Bob';

پس از دادن یک مقدار به متغیر شما میتوانید آن را تغییر دهید:

var myVariable = 'Bob';
myVariable = 'Steve';

دقت کنید که متغیرها انواع مختلفی از داده ها را  میتوانند داشته باشند:

متغییر	توضیح	مثال
String	متغییر رشته ای برای نگهداری مقدار متن استفاده می شود. حتمی برای مقدار دهی به متغییر متنی باید  متن یا محتوا در کوتیشن قرار دهید.	var myVariable = 'Bob';
Number	متغییر عددی . برای مقدار دهی به  متغییر عددی احتیاج به استفاده از کوتیشن نیست.	var myVariable = 10;
Boolean	متغییر درست یا غلط . کلمات true/false بعنوان کلیداصلی در JS تعریف شده اند و در زمان مقدار دهی نیاز به استفاده از کوتیشن ندارند	var myVariable = true;
Array	این ساختار(آرایه) اجازه می دهد چندین مقدار را با یک نام ذخیره کنید.	var myVariable = [1,'Bob','Steve',10]; هر عضو از متغییر(آرایه) مانند زیر می توان صدا زد: myVariable[0], myVariable[1], ... .
Object	اساسا در جاوا اسکریپت همه چیز یک آبجکت است و شما می توانید آن را دریک متغییر ذخیره کنید. این نکته را در ذهن داشته باشید تا در آینده با آن بیشتر آشنا خواهید شد. n.	var myVariable = document.querySelector('h1'); مثال های بالای در این مقاله.

اگر شما تازه برنامه نویسی را شروع کرده باشید حتمی از خودتان می پرسید چرا به متغییرها نیاز داریم ؟ خوب٫ ما به متغییرها نیاز داریم تا همه کارهای جالب را انجام بدیم.  اگر نتوانیم مقدار را تغییر دهیم پس نمی توانیم هیچ چیز داینامیک یا  پویایی را بسازیم مانند یک پیام تبریک خصوصی یا نمایش یک عکس از مجموعه گالری عکس ها . در هر عمل پویایی نیاز به متغییر داریم.

در کد جاوااسکریپت مانند سی اس اس می توانید نظر (یادداشت) بگذارید :

/*
Everything in between is a comment.
*/

اگر نظر یا یادداشت شما فقط یک خط است می توانید از ساختار دو اسلش مانند مثال زیر استفاده کنید:

// This is a comment

operator نماد یک عمل  ریاضی است که نتیجه را بر اساس دو مقدار (یا متغییر) تولید می کند. در جدول زیر بعضی از عملیات های ساده لیست شده اسند که می توانید در کنسول مرورگر آنها را امتحان کنید.

عمل	توضیح	نماد(ها)	مثال
بعلاوه / جمع	زمان جمع دو مقدار عددی و یا برای بعلاوه ( پیوست دادن) دو رشته استفاده می شود.	+	6 + 9; "Hello " + "world!";
تفریق, ضرب, تقسیم	عمل های پایه ریاضی را انجام می دهند و فقط روی مقدار عدد قابل استفاده هستند.	-, *, /	9 - 3; 8 * 2; // multiply in JS is an asterisk 9 / 3;
مقدار دهی	در مثال می بینید با کمک مساوی مقدار به متغییر داده شده است.	=	var myVariable = 'Bob';
عمل تطابق	در یک آزمایش خواهید دید وقتی دو مقدار باهم برابر نباشند مقدار بازگشت داده شده از عمل مقایسه مقدار صحیح یا غلط (true/false) خواهد بود.	===	var myVariable = 3; myVariable === 4;
عدم تساوی / نه منطقی	(true )عدم تساوی یا نه منطقی (نات منطقی) زمانی مقدار صحیح برمی گردادند که دو طرف تساوی باهم مساوی نباشند. اگر دو طرف تساویی مساوی باشند مقدار غلط (false)  بر می گرداند	!, !==	The basic expression is true, but the comparison returns false because we've negated it: var myVariable = 3; !myVariable === 3; Here we are testing "is myVariable NOT equal to 3". This returns false, because it IS equal to 3. var myVariable = 3; myVariable !== 3;

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

شرط ها در ساختار کد به شما اجازه می دهند در صورت صحیح یا غلط بودن یک عبارت مقدار یا فرمانی اجرا شود و اجرای  ٫ بستگی به خروجی شرط دارد .  رایج ترین  ساختار شرطی :  if ... else  است بصورت نمونه :

var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');
} else {
  alert('Awwww, but chocolate is my favorite...');
}

عبارت درون  if ( ... ) یک شرط است  - این شرط  می گوید  اگر مقدار متغیر iceCream  برابر با مقدار رشته یی chocolate  بود پس نتیجه شرط true (صحیح) است در نتیجه تکه کد درون  {} اجرا می شود و اگر شرط برقرار نبود یا به عبارتی غلط بود از تکه کد اول می گذرد و تکه کد بعد از else  اجرا خواهد شد. 

Functions یک روش برای بسته بندی دستورات است که می خواهید برای چند بار از آن استفاده کنید ٫ فارغ از اینکه چه زمان می خواهید از این مجموعه دستورات استفاده کنید با صدا زدن نام تابعی که این دستورات در درون آن قرار دارند می توانید آنها را بارها بدون تکرار اجرا کنید.  شما نمونه ای از توابع را در مثال های قبل دیدید. بصورت نمونه:

1. var myVariable = document.querySelector('h1');

2. alert('hello!');

توابع بالا در درون بروزر وجود دارند و هر زمان بخواهید می توانید آنها را صدا بزنید.

اگر شما چیزی شبیه نام متغییر دیدید که جلوی آن پرانتز های باز و بسته () وجود دارد آن چیز حتمی تابع است.  توابع معمولا پارامترهایی (arguments ) را به عنوان ورودی می گیرند و این اطلاعات را لازم دارند تا بتواند کار خود را انجام دهند. پارامترهای ورودی در در بین علامت های پرانتز قرار می گیرند و در صورتی که بیشتر از یک پارامتر ورودی وجود داشته باشد با علامت کاما از یک دیگر جدا می شوند.

برای نمونه تابع alert() باعث می شود که  باکس پاپ آپ در پنجره مرورگر نمایش داده شود ولی  برای نمایش دادن باکس پاپ آپ نیاز هست مقداری به عنوان پارمتر ورودی توسط تابع دریافت ٫ تا عمل انجام گردد.

خبر خوب این است شما هم می توانید توابع خود را بسازید. در مثال بعدی ما یک تابع ساده با دو پارامتر ورودی نوشته ایم که در درون تابع عمل ضرب را بر روی دو متغییر ورودی انجام و نتیجه را به عنوان خروجی بر می گرداند :

function multiply(num1,num2) {
  var result = num1 * num2;
  return result;
}

بهتر است برای یاد گیری تابع بالا را در کنسول مرورگر اجرا کنید و بعد از آن کدهای زیر را برای دیدن نتیجه خروجی تابع در کنسول در ادامه وارد کنید :

multiply(4,7);
multiply(20,20);
multiply(0.5,3);

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

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

روش های زیادی وجود دارد که برای المان یا تگ یک رویداد تعریف کرد. در کد زیری ما المان (تگ) HTML را توسط یک رویداد با نام onclick بدون تعریف یک نام  به بصورت مستقیم تابعی بدون نام به آن نسبت داده ایم ٫ محتوا تابع همان کدهای خواهند بود که زمان عمل کلیک می خواهیم اجرا شوند.

به این کد توجه کنید:

document.querySelector('html').onclick = function() {};

نتیجه اجرای کد بالا با پایین یکی است:

var myHTML = document.querySelector('html');
myHTML.onclick = function() {};

این بهینه تر است!

تا الان با مقدمات جاوااسکریپت آشنا شدیم٫ زمان آن رسیده به سراغ  مثال های جالب برویم تا دید مناسبی به شما بدهد که چه چیزهای را می توانید  بعد از یادگیری زبان جاوااسکریپت پیاده سازی کنید.

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

1.  اول از همه عکس مورد علاقه خود را که می خواهید در سایت شما نمایش داده شود پیدا کنید فقط در نظر بگیرید با عکس اول هم اندازه باشد یا در حد امکان سایز آن نزدیک به تصویر قبلی باشد .
2. تصویر را در فولدر images  ذخیره کنید.
3. فایل main.js  باز کنید و کد زیر را وارد کنید (اگر کد سلام دنیا شما در فایل وجود دارد آن را پاک کنید):

var myImage = document.querySelector('img');

myImage.onclick = function() {
    var mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/firefox-icon.png') {
      myImage.setAttribute ('src','images/firefox2.png');
    } else {
      myImage.setAttribute ('src','images/firefox-icon.png');
    }
}

تمام تغییرات را در فایل ها باز را ذخیره کنید و فایل index.html را توسط مرورگر اجرا کنید. حالا زمانی که روی تصویر کلیک می کنید باید تصویر بعدی را به شما نمایش دهد.

کاری که در کد بالا کردیم ٫ المان image  را در متغییر myImage بعنوان منبع ذخیره کردیم . در مرحله بعد توسط رویداد onclick به ویژگی مربوط به گرفتن محل یک تابع نوشتم که بعد از هر کلیک اتفاقات زیر برای المان تصویر پیش می آید:

1. مقدار ویژگی src را در درون متغییر ریختیم.
2. مقدار درون متغییر را با شرط مقایسه کردیم و اگر مقدار برابر با src بود کد درون شرط اجرا می شود .
3.  اگر شرط صحیح بود مقدار ویژگی  src  به تصویر دوم تغییر داده می شود و تصویر در درون المان <image>  نمایش در می آید.
4. اگر شرط صحیح نبود  یعنی تصویر به تازگی تغییر کرده است و مقدار ويژگی src  به محل ذخیره سازی تصویر اول(اصلی) می بایست تغییر نشانی دهد .

در ادامه تعدادی کد اضافه خواهیم کرد که باعث می شود عنوان سایت بعد از دیدن(مرور) سایت توسط کاربر به یک پیام خوش آمدید تغییر کند. این پیام زمانی که کاربر برای بار دوم به سایت مراجعه می کند به او نمایش داده خواهد شد همچنین این اختیار را به کاربر می دهیم تا هر زمان مجددا به صحفه مراجعه کرد پیام خوش آمدگوئی خود را ببنید

1.  در فایل index.html را بعد از المان (تگ)   <script> وارد کنید 

2. <button>Change user</button>

3. در فایل main.js در پایین ترین بخش فایل دقیقا تک کد زیر را وارد کنید .در کد زیر یک رونوشت مانند از المان های button  (دکمه) و heading (عنوان)  در متغییر ها ریخته شده .

4. var myButton = document.querySelector('button');
   var myHeading = document.querySelector('h1');

5. تابع زیر را در فایل اضافه کنید . در حال حاضر کاری انجام نمی دهد اما بعدا خواهید دید

6. function setUserName() {
     var myName = prompt('Please enter your name.');
     localStorage.setItem('name', myName);
     myHeading.innerHTML = 'Mozilla is cool, ' + myName;
   }

   تابع prompt() یک جعبه دریافت متن نمایش می دهد مانند  alert() با این تفاوت  در prompt() از کاربر اطلاعاتی را به عنوان ورودی می گیرد و در ادامه در متغییری بعد از زدن دکمه اوکی ذخیره می کند. ما در اینجا از کاربر خواسته ایم نام خود را وارد کند و در ادامه با کمک API  و صدا زدن تابع localStorage اطلاعات وارد شده (نام) را در حافظه داخلی مرورگر ذخیره می کنیم . ما  از حافظه محلی (حافظه محلی مرورگر)  بوسیله تابع setItem()  و اختصاص دادن اسم 'name'  به اطلاعاتی که در درون متغیر myName  می باشدرا  ذخیره کردیم و این اطلاعات ذخیره شده همان نامی است که توسط کاربر وارد شده است.
7. کد if ... else را اضافه کنید بهتر ایست این قسمت از کد را بخش مقدار دهی اولیه نام گذاری کنیم زیرا در اینجا مشخص می شود چه زمان باید چه اتفاقی پیش آید

8. if(!localStorage.getItem('name')) {
     setUserName();
   } else {
     var storedName = localStorage.getItem('name');
     myHeading.innerHTML = 'Mozilla is cool, ' + storedName;
   }

   کد درون شرط نه منطقی زمانی اجرا می شود که اطلاعاتی برای  name در ذخیره سازی محلی وجود نداشته باشد و در نتیجه تابع setUserName() فراخوانی می شود( نامی که کاربر در بازدید قبلی داده است ست می شود) این نام از طریق استفاده از تابع getItem()  و مقدار دریافت مقدار  بازگشتی از تابع  و دادن این مقدار برای تنظیم (ست کردن) بوسیله innerHTML صورت می گیرد.
9. در پایان رویداد onclick  که برای دکمه تعیین شده است تابع setUserName() فراخوانی می کند . این عمل به کاربر اجازه می دهد هر زمان که بخواهد با کلیک روی این دکمه بتواند هر نام جدیدی که می خواهد وارد کند

10. myButton.onclick = function() {
      setUserName();
    }
    

حالا اگر برای اولین بار از صحفه وبسایت دیدار(ویزیت) کنید ٫ از شما می خواهد نام خود را برای دریافت پیام شخصی وارد کنید و شما می توانید هر زمان که تمایل داشته باشید با کلیک کردن روی دکمه درون صحفه این نام را تغییر دهید . این ویژگی به کمک ذخیره سازی محلی در درون مرورگر انجام می شود و بعد از بستن صفحه و مجددا باز کردن آن پیام به شما نمایش داده خواهد شد.

اگر تمام دستورالعمل های مقاله را دنبال کرده باشید باید چیزی مشابه صفحه زیر مشاهده کنید  ( شما می توانید خروجی کار ما را از اینجا مشاهده ببینید )

اگر به مشکلی بر خوردید می توانید کار خود را با نسخه نهایی مثال ما که کد آن روی گیت‌هاب موجود است مقایسه کنید.

در این مقاله فقط مثال ساده ای از عملکرد جاوا اسکریپت آورده شد اگر از این آموزش لذت بردید و می خواهید بصورت دقیق تر و حرفه ای تر به یاد گیری ادامه دهید به راهنمای جاوا‌اسکریپت ما مراجعه کنید.

• « Previous
• Next »