یادگیری مفاهیم پایه جاوا اسکریپت

JavaScript (به اختصار “JS”) یک زبان برنامه نویسی کاملاً پویا است که می تواند تعامل را به یک وب سایت اضافه کند. این زبان توسط Brendan Eich (بنیان گذار پروژه موزیلا، بنیاد موزیلا و شرکت موزیلا) اختراع شد. یادگیری مفاهیم پایه جاوا اسکریپت همه کاره و مبتدی پسند است. با تجربه بیشتر، قادر خواهید بود بازی، گرافیک 2 بعدی و 3 بعدی متحرک، برنامه های جامع مبتنی بر پایگاه داده و موارد دیگر بسازید!

یک مثال Hello World!

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

1- به سایت آزمایشی خود بروید و پوشه جدیدی به نام اسکریپت ها ایجاد کنید. در پوشه اسکریپت ها، یک فایل جدید به نام main.js ایجاد کنید و آن را ذخیره کنید.

2- در فایل index.html خود، این کد را در یک خط جدید، درست قبل از برچسب بسته شدن وارد کنید:

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

3- این کار همان کاری است که برای لینک دهی در CSS انجام می دادیم. این جاوا اسکریپت را روی صفحه اعمال می کند، بنابراین می تواند بر روی HTML تأثیر بگذارد (همراه با CSS و هر چیز دیگری در صفحه).

4- این کد را به پوشه main.js اضافه کنید:

const myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';

مطمئن شوید که فایل های HTML و JavaScript ذخیره شده اند. سپس index.html را در مرورگر خود بارگیری کنید. شما باید چیزی شبیه به این را ببینید:

چه اتفاقی افتاد؟

متن عنوان شما با استفاده از جاوا اسکریپت به Hello world تغییر کرد! این کار را با استفاده از تابعی به نام querySelector () انجام دادید تا مرجعی به عنوان خود بدهید و سپس آن را در متغیری به نام myHeading ذخیره کنید. این همان کاری است که ما با استفاده از selector های CSS انجام دادیم.

وقتی می خواهید کاری برای یک عنصر انجام دهید، ابتدا باید آن را انتخاب کنید. به دنبال آن، کد مقدار متغیر myHeading را با ویژگی textContent (که محتوای عنوان را نشان می دهد) به Hello world تنظیم کرد.

مفاهیم پایه و ویژگی های اصلی جاوا اسکریپت

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

متغیر ها

متغیر ها ظروفی هستند که مقادیر را در خود ذخیره می کنند. شما با تعریف یک متغیر با var یا کلمه کلیدی let شروع می کنید و سپس نامی را که به متغیر می دهید مشخص می کنید:

let myVariable;

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

myVariable = 'Bob';

همچنین ، می توانید هر دو این عملیات را در یک خط انجام دهید:

let myVariable = 'Bob';

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

myVariable;

پس از اختصاص مقدار به یک متغیر، می توانید بعداً آن را در کد تغییر دهید:

let myVariable = 'Bob';
myVariable = 'Steve';

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

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

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

کامنت ها

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

/*
Everything in between is a comment.
*/
یا به این صورت
// This is a comment

عملگر ها

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

عملگر	تعریف	نماد	مثال
جمع	دو عدد را با هم جمع می کند یا دو رشته را با هم ترکیب می کند.	+	;6 + 9 ;’Hello ‘ + ‘world!
تفریق، ضرب، تقسیم	این ها همان کاری را انجام می دهند که انتظار دارید در ریاضیات پایه انجام دهند.	-, *, /	;9 – 3 ;8 * 2 ;9 / 3
اختصاص دادن	همانطور که قبلاً مشاهده کردید: این عملگر یک مقدار را به یک متغیر اختصاص می دهد.	=	let myVariable = 'Bob';
تساوی	این عملگر آزمایشی را برای بررسی برابر بودن دو مقدار انجام می دهد. این یک نتیجه درست / نادرست (Boolean) بر می گرداند.	===	let myVariable = ;3 myVariable === 4;
not یا عدم تساوی	این مقدار منطقی مخالف آنچه قبل از آن است را برمی گرداند. این عملگر یک متغیر درست را به نادرست و غیره تبدیل می کند. وقتی در کنار عملگر Equality استفاده می شود، عملگر عدم تساوی آزمایش می کند که آیا دو مقدار برابر هستند یا خیر.	!, !==	let myVariable = 3; myVariable ;!== 3

شرط ها

شرط ها ساختار های کدی هستند که برای آزمایش درست بودن یا نبودن عبارت استفاده می شوند. شکل بسیار متداول شرطی بودن عبارت if … else است. مثلا:

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

عبارت درون if(…) یک تست است. با استفاده از عملگر تساوی (همانطور که در بالا توضیح داده شد) متغیر iceCream را با رشته شکلات مقایسه می کند تا ببیند این دو برابر هستند اگر این مقایسه درست شود، اولین بلوک کد اجرا می شود. اگر مقایسه درست نباشد، بلوک دوم کد، بعد از عبارت else، به جای آن اجرا می شود.

توابع

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

let myVariable = document.querySelector('h1');
یا
alert('hello!');

این توابع document.querySelector و alert در مرورگر تعبیه شده اند. اگر چیزی را مشاهده کنید که به نظر می رسد یک نام متغیر است، اما پرانتز را با خود به دنبال دارد، احتمالاً یک تابع است. توابع غالباً استدلال می کنند: بیت داده هایی که برای انجام وظیفه خود نیاز دارند. آرگومان ها درون پرانتز قرار می گیرند و اگر بیش از یک آرگومان وجود داشته باشد با کاما از هم جدا می شوند.

به عنوان مثال تابع alert () یک جعبه پاپ آپ را در داخل پنجره مرورگر نشان می دهد، اما ما باید یک رشته را به عنوان آرگومان به آن بدهیم تا به تابع بگوییم چه پیامی را نمایش دهد.

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

function multiply(num1,num2) {
  let 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!');
}

روش های زیادی برای اتصال یک کنترل کننده رویداد به یک عنصر وجود دارد. در اینجا عنصر را انتخاب می کنیم، ویژگی کنترل کننده onclick آن را برابر با یک تابع ناشناس (یعنی بدون نام) قرار می دهیم که حاوی کدی است که می خواهیم رویداد کلیک اجرا شود. توجه داشته باشید که:

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

برابر است با:

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

سوپر شارژ کردن وب سایت نمونه

با اتمام یادگیری مفاهیم پایه جاوا اسکریپت (در بالا)، بیایید برخی از ویژگی های جدید را به سایت نمونه خود اضافه کنیم. قبل از ادامه محتویات فعلی پرونده main.js خود را حذف کنید. پرونده خالی را ذخیره کنید. اگر این کار را نکنید کد موجود با کد جدیدی که می خواهید اضافه کنید تداخل ایجاد می کند.

افزودن تغییر دهنده تصویر

در این بخش شما می آموزید که چگونه از جاوا اسکریپت و DOM API برای جایگزینی نمایش یکی از دو تصویر استفاده کنید. این تغییر هنگامی رخ می دهد که کاربر روی تصویر نمایش داده شده کلیک می کند.

1- تصویری را که می خواهید در سایت نمونه خود قرار دهید انتخاب کنید. در حالت ایده آل اندازه تصویر همان تصویری است که قبلاً اضافه کرده اید یا تا حد امکان نزدیک به آن خواهد بود.

2- این تصویر را در پوشه تصاویر خود ذخیره کنید.

3- نام firefox2.png را تغییر دهید.

4- جاوا اسکریپت زیر را به پوشه main.js خود اضافه کنید.

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

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

5- همه پوشه ها را ذخیره کرده و index.html را در مرورگر بارگیری کنید. حالا وقتی روی تصویر کلیک می کنید، باید به تصویر دیگری تغییر پیدا کند.

این چیزی است که اتفاق افتاد. شما یک ارجاع به عنصر خود را در متغیر myImage ذخیره کرده اید. بعد ویژگی کنترل کننده رویداد onclick این متغیر را برابر با تابعی بدون نام کردید (یک تابع “ناشناس”). بنابراین هر بار که روی این عنصر کلیک می شود:

1. کد مقدار ویژگی src تصویر را بازیابی می کند.
2. کد از شرطی برای بررسی اینکه بررسی کند مقدار src برابر با مسیر تصویر اصلی است استفاده می کند:
   1. در صورت درست بودن، کد مقدار src را به مسیر تصویر دوم تغییر می دهد و تصویر دیگر را مجبور می کند در داخل عنصر img بارگیری شود.
   2. اگر اینگونه نباشد (یعنی حتماً قبلاً تغییر کرده باشد) مقدار src به مسیر اصلی تصویر، به حالت اصلی برمی گردد.

افزودن پیام خوش آمد گویی سفارشی

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

1- در index.html خط زیر را دقیقاً قبل از عنصر <script> اضافه کنید:

<button>Change user</button>

در main.js کد زیر را دقیقاً همانطور که نوشته شده است، در پایین فایل قرار دهید. با مراجعه به دکمه جدید و عنوان، هر متغیری را در داخل خود ذخیره می کند:

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

برای تنظیم پیام تبریک سفارشی، عملکرد زیر را اضافه کنید. این هنوز هیچ کاری نمی کند، اما به زودی تغییر خواهد کرد.

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

تابع setUserName () حاوی یک تابع prompt () است که کادر محاوره ای مشابه alert () را نمایش می دهد. این تابع prompt () بیشتر از alert () عمل می کند، از کاربر می خواهد داده را وارد کند و پس از کلیک کاربر بر روی متغیر، آن را ذخیره می کند.

در این حالت ما از کاربر می خواهیم نامی را وارد کند. بعد کد با API localStorage فراخوانی می شود که به ما امکان می دهد داده ها را در مرورگر ذخیره کرده و بعداً بازیابی کنیم. ما از تابع () setItem localStorage برای ایجاد و ذخیره مورد داده ای به نام ‘name’ استفاده می کنیم، مقدار آن را بر روی متغیر myName تنظیم می کنیم که شامل ورودی کاربر برای نام است. در آخر متن عنوان، به علاوه نام تازه ذخیره شده کاربر را به یک رشته اضافه می کنیم.

بلوک if … else را اضافه کنید (در زیر). ما می توانیم این کد مقدار دهی اولیه را فراخوانی کنیم، زیرا برنامه را هنگام بارگیری اولیه ساختار دهی می کند.

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

خط اول از این بلوک برای بررسی وجود داده های نام از عملگر عدم تساوی (NOT منطقی) استفاده می کند. در غیر این صورت، تابع setUserName () برای ایجاد آن اجرا می شود. اگر این مورد وجود داشته باشد (یعنی کاربر در هنگام بازدید قبلی یک نام کاربری تنظیم کند)، ما نام ذخیره شده را با استفاده از ()getItem بازیابی می کنیم و متن عنوان را به عنوان نام کاربر مانند رشته داخل ()setUserName تنظیم می کنیم)

این کنترل کننده رویداد onclick (زیر) را روی دکمه قرار دهید. با کلیک بر روی setUserName () اجرا می شود. با این کار کاربر می تواند با فشار دادن دکمه نام دیگری وارد کند.

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

نام کاربری null است؟

وقتی این مثال را اجرا کردید و جعبه محاوره ای را دریافت کرد که از شما می خواهد نام کاربری خود را وارد کنید، دکمه لغو را فشار دهید. در آخر باید عنوان خود را بنویسید که Mozilla، پوچ است. این اتفاق می افتد زیرا وقتی درخواست را لغو می کنید مقدار به صورت null تنظیم می شود. Null یک مقدار خاص در JavaScript است که به نبود یک مقدار اشاره دارد.

برای جلوگیری از این مشکلات، می توانید بررسی کنید که کاربر نام خالی وارد نکرده است. عملکرد setUserName () خود را به این صورت به روز کنید:

function setUserName() {
  let myName = prompt('Please enter your name.');
  if(!myName) {
    setUserName();
  } else {
    localStorage.setItem('name', myName);
    myHeading.textContent = 'Mozilla is cool, ' + myName;
  }
}

در زبان انسانی این بدان معنی است: اگر myName هیچ ارزشی ندارد، از همان ابتدا setUserName () را دوباره اجرا کنید. اگر مقداری دارد (اگر عبارت فوق صحیح نیست)، مقدار را در localStorage ذخیره کنید و آن را به عنوان متن عنوان قرار دهید.

نتیجه

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

در این مقاله ما فقط جاوا اسکریپت را توضیح دادیم. در صورتی که علاقه داشته باشید می توانید به مقالات وردپرس یا HTML و HTML و CSS چیست؟ مراجعه کنید.

منبع: developer.mozilla.org