فصل ۲-۱: دستورالعمل‌های مقدماتی جاوا اسکریپت (JavaScript)

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

توجه: برای یادگیری زبان جاوا اسکریپت ابتدا شما باید زبان‌های HTML و CSS را به صورت کامل فرا گرفته باشید. در نتیجه در این مجموعه‌ی آموزشی به توضیح کدهای HTML و CSS نمی پردازیم.

جملات (Statements)

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

به عنوان مثال به کدهای زیر توجه کنید:

var today= new Date{);
var hourNow = today.getHours{) ;
var greeting;
if (hourNow > 18) {
greeting= 'Good evening';
else if (hourNow > 12) {
greeting= 'Good afternoon';
else if (hourNow > O) {
greeting 'Good morning';
else {
greeting 'Welcome';
document.write(greeting) ;

همانطور که در مثال فوق مشاهده می‌کنید هر یک از خطوط ۱ تا ۳ به عنوان یک جمله یا Statement شناخته می‌شوند. به علامت‌هایی که بعد از هر عبارت آمده‌اند ( علامت { }‌ ) یک بلوک کد یا دسته‌ی کد گفته می‌شود و به عبارتهایی که به صورت دستورهای if و else if به همراه شروط داخل آنها ایجاد شده است دستورهای شرطی نامیده می‌شود.

‌توجه: جاوا اسکریپت مانند سایر زبان‌ها به بزرگ و کوچک بودن حروف بسیار حساس است. یعنی عبارت hourNow با عبارت HourNow متفاوت است.

هر جمله در یک خط جدید شروع می‌شود:

هر جمله یا Statements با استفاده از یک Semicolon یا ; از جمله بعدی جدا می‌شود و برای مرتب شدن و خوانا تر بودن کدها هر جمله را در یک خط جدید ایجاد می‌کنیم. همچنین این نحوه نوشتاری به مفسر جاوا اسکریپت اشاره می‌کند که پس از اجرای هر دستور و جمله وارد دستور بعدی شو و آن را اجرا کن.

توضیح دادن هر کد یا از کار انداختن آنها

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

/* Th i s script displays a greeting to the user based upon the current time.
It is an example from JavaScript &jQuery book */

var today= new Date();  //  Create a new date Object
var hour Now = today.getHours();  // Find the current hour
var greeting;

//Display the appropriate greeti ng based on the current time
if(hourNow > 18){
 greeting = 'Good evening';
}

همچنان توجه داشته باشید که از علامت // برای کامنت گذاشتن یا از کار انداختن یک خط استفاده می‌شود و از علامت /* */ برای از کار انداختن یک دسته کد و توضیحات چند خطی استفاده می‌شود.

متغییر چیست؟

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

برای مثال فرض کنید می‌خواهید محیط یک دیوار را محاسبه کنید. بنابراین باید طول دیوار را در عرض آن ضرب کنید و محیط را بدست آورید یا به عبارتی دیگر:

width * height = area

بنابراین سه متغییر به نام‌های width و height و در نهایت area نیاز دارید تا اطلاعات را درون خود ذخیره کرده و در سایر بخش‌های نرم‌افزار و کد مورد استفاده قرار دهد. بنابراین برای دستیابی به محیط این دیوار ۴ فرآیند اجرا می‌شود:

1. ذخیره مقدار در متغییر width
2. ذخیره‌ی مقدار در متغییر height
3. ضرب دو مقدار width و height با استفاده از عملگر * (ضرب)
4. ذخیره مقدار بدست آمده در متغییر area

یک متغییر چگونه تعریف می‌شود؟

قبل از استفاده از یک متغییر همواره باید آن را تعریف کنیم.  برای تعریف کردن هر متغییر در زبان جاوا اسکریپت از عبارت var استفاده می‌شود. به عنوان مثال دستور زیر یک متغییر به نام quantity تعریف می‌کند:

var guantity;

عبارت var در برنامه‌نویسی به عنوان یک کلمه‌ی کلیدی یا Keyword شناخته می‌شود. در صورتیکه نام متغییر شما بیش از یک کلمه داشت بهتر است آن را به صورت camelCase تعریف کنید. مثلا عبارت firstName یک متغییر دو بخشی می‌باشد که به فرمت camelCase تعریف شده است.

انتساب یک مقدار به متغییر

برای انتساب یک مقدار یا به عبارت دیگر ذخیره‌سازی یک مقدار درون یک متغییر از علامت = استفاده می‌شود. مثلا عبارت quantity=3 مقدار عدد ۳ که از نوع عددی یا Numeric است را درون متغییر quantity ذخیره می‌کند.

‎انواع داده

در فصل گذشته به توضیح انواع داده پرداختیم ولی اینجا اشاره‌ای مختصر خواهیم داشت:

نوع داده‌ی Numeric یا عددی:

انواع داده‌ی عددی شامل اعداد از ۰ تا ۹۹۹۹۹... و اعداد اعشاری مثل ۰.۷۵ می‌باشد.

نوع داده‌ی String یا رشته‌ای:

انواع کاراکترها و حروف در این دسته داده قرار می‌گیرند.

انواع داده Boolean یا باینری:

این نوع داده به دو حالت true و false مورد استفاده قرار می‌گیرد.

همچنین انواع داده‌ دیگری به نام‌های Array یا آرایه، اشیاء یا Object، داده‌های تعریف نشده یا null و undefined وجود دارند که در فصل گذشته به توضیح آنها پرداختیم ولی برای تکمیل شدن مبحث در این فصل نیز اشاره ای به آنها می‌کنیم.

اولین برنامه‌ی جاوا اسکریپت خودت رو بنویس

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

بنابراین برای شروع کار ابتدا یک ادیتور قدرتمند یا به اصلاح IDE را روی سیستم خود نصب کنید. ادیتورهایی که ما به شما پیشنهاد می‌کنیم عبارتند از PHPStorm یا ++Notepad و ... .

سپس ادیتور را باز کرده و از منوی file و گزینه new یک فایل فایل با پسوند js. در فولدر مورد نظر خود ایجاد نمایید.

من نام این فایل را roxo.js می‌گذارم.

سپس کدهای مثال زیر را درون آن ریخته و فایل را ذخیره کنید. در نتیجه داریم:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hamedan Hotel</title>

</head>
<body>

<form id="mainForm">
 <input id="inputForm" type="text">
</form>
<div id="sendMessageId"></div>

</body>
<script type="text/javascript">

 var price;
 var quantity;
 var total;
 price = 5;
 quantity = 14;
 total = price * quantity;

 console.log(total);

</script>
</html>

سپس فایل ذخیره شده را با استفاده از یک مرورگر باز کنید ( در صورت امکان از مرورگر کروم استفاده شود). سپس با فشردن دکمه‌ی F12 در مرورگر خود یک صفحه مشاهده خواهید کرد که در زیر صفحه اصلی شما ایجاد می‌شود. با ورود به زبانه‌ی Console متوجه خواهید شد که مقدار عددی ۷۰ که حاصلضرب دو عدد ۱۴ و ۵ است برای شما به تصویر کشیده می‌شود. این مکان یکی از بهترین گزینه‌ها برای دستیابی به نتایج نهایی نرم‌افزار و برنامه شماست.

دستور ()console.log

همانطور که مشاهده کردید در مثال فوق از دستور Console.log استفاده شد. این دستور  جهت نمایش پردازش نهایی در مرورگر مورد استفاده قرار می‌گیرد. این دستور به فرمت زیر قابل استفاده است:

var price;
var quantity;
var total;
price = 5;
quantity = 14;
total = price * quantity;

console.log(total);

در مثال فوق همانطور که مشاهده می‌کنید مقادیر موردنظر در متغییرهای مشخصی ذخیره شده اند سپس با استفاده از یک عملگر مناسب (ضرب) نتیجه را در متغییر total ذخیره کرده‌ایم. در نهایت این متغییر را که شامل مقدار محاسبه شده است به عنوان آرگومان به دستور console.log ارسال می‌کنیم.

اگر این سوال برای شما پیش آمده است که console.log چه نوع داده است و چگونه ایجاد شده است، باید به شما اطلاع دهیم که لطفا صبور باشید تا شمارا با مفاهیم اشیاء و شیءگرایی آشنا کنیم.

همچنین می‌توان بجای استفاده از نوع داده‌ی عددی، نوع داده‌ی رشته‌ای را بکار برد:

var message;
message = 'See our upcoming range';

console.log(message);

در این حالت خروجی شما در بخش Console‌ مرورگرتان برابر عبارت See our upcoming range خواهد بود.

اختصار نویسی

درنظر دارید که برای سریع‌تر شدن کار شما و زیبایی بهتر مجموعه‌ی کدها همواره باید دستورها را تا جاییکه ممکن است به اختصار بنویسیم. مثلا می‌توان علاوه بر تعریف یک متغییر، مقداری را در آن ذخیره‌سازی کنیم:

var price = 5;
var quantity = 14;
var total = price * quantity;

تغییر مقادیر یک متغییر

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

var firstName;

firstName = 'ali';
firstName = 'roxo';

console.log(firstName);

در این مثال ابتدا عبارت ali درون متغییر firstName ذخیره می‌شود. سپس مقدار roxo به جای عبارت ali جایگزین شده و متغییر اخرین مقداری که می‌پذیرد برابر roxo خواهد بود. بنابراین آنچه در خروجی نمایش داده می‌شود برابر roxo است.

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

1. نام هر متغییر می‌تواند با یک حرف یا علامت $ یا یک آندرلاین ـ شروع شود. اما هرگز نم‍ی‌توان نام متغییر را با یک عدد شروع کرد.
2. نام یک متغییر می‌تواند شامل حروف، اعداد و علامت $ یا آندرلاین باشد. اما هرگز نمی‌توان از علامت‌ dash که به صورت - است، بینابین نام یک متغییر استفاده کرد.
3. از کلمات کلیدی رزرو شده مانند true یا false یا var و ... برای تعریف نام متغییرها استفاده کرد.
4. همه‌ی متغییرها به بزرگ و کوچک بودن حروف حساس هستند بنابراین score با Score متفاوت است.
5. همواره نام‌های مناسبی را برای ذخیره‌سازی مقادیر استفاده کنید. به عنوان مثال برای ذخیره‌سازی مقادیر نام کاربری از متغییر username و برای ذخیره‌ی سن از نام age بهره ببرید.
6. در صورتیکه نام متغییر شما از دو قسمت تشکیل می‌شود. اولین قسمت را با حروف کوچک شروع کرده و حرف اول بخش دوم را با حروف بزرگ. به این ساختار camelCase گفته می‌شود. مثلا firstName یا lastName.

بسیار عالی تا به اینجای کار شما با مفاهیم تعریف متغییر، دستور console.log و انواع داده‌ی عددی، رشته‌ای و باینری آشنا شدید. در بخش بعدی به توضیح آرایه‌‌ها و Expression ها و سایر مباحث باقی‌مانده از فصل ۲ خواهیم پرداخت.

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

فصل ۱: جاوا اسکریپت (JavaScript) چیست؟

فصل ۲

• بخش ۲-۱: دستورالعمل‌های مقدماتی جاوا اسکریپت
• بخش ۲-۲: متغییرها و آرایه‌ها در جاوا اسکریپت