آموزش ساختار دستوری ES6 Syntax

آموزش ساختار دستوری ES6 Syntax:

در این درس به آموزش ساختار کد نویسی یا Syntax زبان ECMAScript (اکما اسکریپت ES6) می پردازیم. ساختار دستوری یا Syntax مجموعه ای از قوانین است که نحوه نوشتن، ترتیب قرارگیری عمگرها و ساختارهای عملی برنامه را مشخص می کند.
هر زبان برنامه نویسی ساختار دستوری یا Syntax مخصوص خود را دارد. Syntax در زبان های برنامه نویسی که در آن فایل برنامه حاوی سورس کد دستورات است و همچنین به زبان های نشانه گذاری (markup languages) که در آن سند برنامه داده ها را توصیف می کند، اعمال می شود.
برنامه های جاوا اسکریپت معمولا شامل موارد زیر هستند:

ثوابت (literals): یک مقدار ثابت (literal) را می توان برای تعیین مقدار دقیق یک موجودیت در سورس کد به کار برد. به طور عمده، از ثوابت (literals) برای مقداردهی اولیه متغیرها استفاده می شود. در کد مثال عملی زیر می توانید مشاهده کنید که مثلا عدد 1 تعیین کننده یک ثابت عددی (integer literal) و مقدار “Hello” تعیین کننده یک ثابت متنی رشته ای (String literal) می باشد:

int x = 1;  
string str = "hello"
                    

متغیرها (Variables): یک متغیر (Variable) فضای ذخیره سازی معینی در حافظه است که دارای آدرس مخصوص به خود می باشد. درواقع متغیر، نام بلوکی از حافظه است که مقدار داده ها را برای برنامه ذخیره می کند. نام گذاری متغیرها در زبان های برنامه نویسی توابع قوانینی هستند که بایستی آن ها را رعایت کنید.
کلمات رزرو شده کلیدی (keywords): در برنامه نویسی کامپیوتر، یک کلمه کلیدی یا رزو شده (keyword)، دارای معنی و کاربرد خاصی در سورس کد برنامه است. از این نوع کلمات برای نام گذاری متغیرها (Variable)، نام تابع ها (Function) و یا عنوان (Label) ها درون کد، استفاده کرد.
عملگرها (Operators): عملگرها (Operators) نمادهایی هستند که عملیات های ریاضی یا منطقی و مقایسه ای را بر روی عملوندها، انجام می دهند. به عنوان مثال برخی از عملکردهای رایج عبارتند از عملگرهای ریاضی مثل * یا +، عملگرهای منطقی (logical operators) مثل && یا AND و ... .
توضیحات (Comments): توضیحات (Comments)، یادداشت های قابل خواندن برنامه نویسی هستند که حاوی اطلاعات اضافی یا علامت های نشانه گذاری در سورس کد برنامه های کامپیوتری هستند. توضیحات (Comments) به سورس کدها اضافه می شوند تا بخش های مختلف برنامه را برای سایر برنامه نویسان و افراد قابل فهمیدن شوند. توضیحات خوانایی کدها را افزایش داده و توسط کامپایلرها و مفسران نادیده گرفتته می شوند.

جاوا اسکریپت دارای 2 نوع توضیحات یا Comments است:

• توضیحات چند خطی (Multi Line Comments): از این توضیحات برای نوشتن Comments های چند خطی استفاده شده و ساختار استفاده از آنها به صورت زیر است:
  

  /* It is an
  example of multi-line comment*/.
                  

• توضیحات یک خطی (Single line Comments): از این نوع توضیحات برای نوشتن Commentsهای یک خط استفاده شده و روش استفاده آن به صورت زیر است:
  

  // It is a single-line comment.
                      

شناسه ها (identifications): شناسه یا identifier نام ی است که به المنت های اصلی برنامه مثل متغیرها (Variable)، تابع (Function) و ... داده می شود. نام گذاری شناسه ها تابع کلیه ی قوانین هستند که مهم ترین آنها عبارتند از:

• شناسه ها (identifiers) نمی توانند حاوی کاراکترهای خاص به جز زیر خط (_) و علامت $ باشند.
• نام شناسه نمی تواند از مجموعه کلمات کلیدی و رزرو شده برنامه (Keyword) باشد؛ مثلا if، or و ... .
• از اعداد در نام شناسه ها می توانید استفاده کنید اما نام identifier نمی تواند با یک عدد شروع شود.
• نام شناسه ها به حروف بزرگ و کوچک حساس بوده (Case Sensitive) و نمی تواند شامل فاصله خالی باشد.

برای مثال در لیست زیر، نمونه هایی از نام های مجاز و غیر مجاز برای شناسه ها را ارائه کرده ایم:

• نام گذاری غیر مجاز (Invalid): Name@، user name، user-name یا 14name.
• نام گذاری صحیح (Valid): username، user_name، name14 یا name$.

آموزش استفاده از خط شکست (Line Break) و فضای خالی (white space) در جاوا اسکریپت:

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

جاوا اسکریپت و روش کدنویسی Camel Case:

طبق عرف کدنویسی در جاوااسکریپت، بهتر است نام متغیرها و شناسه ها با یک حرف کوچک شروع شده و چنانچه کلمه دارای 2 یا چندین بخش است، ابتدای بخش های بعدی با حروف بزرگ باشد، برای مثال نام های userName، firstName، cityName و ... مناسب هستند.

جاوا اسکریپت حساس به حروف بزرگ و کوچک است:

کدها و شناسه ها (identifiers) در جاوااسکریپت حساس به حروف بزرگ و کوچک هستند (Case Sensitive). ای بدان معناست که کاربرد حروف بزرگ و کوچک در کدها، باعث تغییر ماهیت و معنای آنها می شود.
برای مثال متغیرهای username و userName، دو متغیر متفاوت در جاوا اسکریپت هستند:

var username, userName;  
username = "Anil";  
userName = "Sunil";  
            

استفاده از نقطه ویرگول (؛) در جاوا اسکریپت اختیاری است:

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

console.log("hello world") 
 
console.log("Welcome to javaTpoint.com"); console.log("You are learning the ES6 tutorial");  
            

آموزش فرآیند اجرای دستورات در جاوا اسکریپت:

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

var msg =  "Hello World"       //این خط یک متغیر تعریف می کند

console.log(msg);       //این خط مقدار متغیر را در خروجی چاپ می کند. console به پنجره کد نویسی در ویندوز اشاره دارد و متد log() برای نمایش  مقدار در خروجی به کار می رود.
            

• خط اول: این خط یک متغیر متنی (Variable) را تعریف و مقداردهی کرده است.
• خط دوم: این خط مقدار متغیر را در خروجی نمایش می دهد. عبارت console در کد به پنجره خروجی کد برنامه اشاره داشته و تابع ()log برای نمایش متن بر روی صفحه استفاده می شود.

فایل نوشته شده را با پسوند js. و با نام Example.js ذخیره کنید. سپس بر روی نام فایل که در زیر گزینه working Files در پنجره Explore برنامه ویژوال استودیو کد قرار دارد، کلیک راست کرده و آیتم open in terminal را انتخاب نمایید.
کد زیر را در کنسول خط فرمان برنامه تایپ کرده تا فایل مورد نظر اجرا شود:

node Example.js  
            

پس از اجرای موفقیت آمیز دستور فوق، برنامه خروجی زیر را در صفحه نشان می دهد:

Hello World  
            

آموزش کدنویسی سخت گیرانه در جاوا اسکریپت Strict Mode:

روش کدنویسی سخت گیرانه (Strict Mode) برای اولین بار در ECMAScript 5 (نسخه 5 چهارچوب کاری اکما اسکریپت) معرفی شد. از این روش می توانید در کدنویسی تمامی برنامه های خود استفاده کنید. این روش به شما کمک می کند تا کدی تمیز و حرفه ای بنویسید، برای مثال به شما اجازه استفاده از متغیرهای اعلام نشده (undeclared variables) را نمی دهد.
برخی از مزایای کدنویسی به روش Strict Mode در لیست زیر بیان شده اند.
چند تا تغییر عمده وجود دارد که روش کد نویسی سخت گیرانه Strict Mode در ساختار دستوری جاوا اسکریپت ایجاد می کند:

• حالت سخت گیرانه کدنویسی شما را در استفاده از برخی ساختارهای دستوری یا Syntax ای که ممکن است در نسخه های بعدی اکما اسکریپت تعریف شوند، منع می کند.
• حالت Strict Mode برخی از خطاهای نامحسوس و غیر قابل تشخیص در کدهای جاوا اسکریپت را از بین برده و مکانیزمی فراهم می کند تا راحت تر این خطاها را شناسایی کنید.
• حالت Strict Mode خطاهایی که بهینه سازی کدها و بالابردن سرعت اجرا را برای موتور جاوا اسکریپت سخت می کند را اصلاح می کند. بنابراین استفاده از روش کدنویسی سخت گیرانه باعث می شود در اکثر مواقع کدها نسبت به حالت معمولی، سریع تر اجرا شوند.

آموزش اعلان استفاده از حالت Strict Mode در جاوا اسکریپت:

می توانید لزوم استفاده از حالت Strict Mode در کدنویسی جاوا اسکریپت را به دو روش اعلان کنید:

• اعلان روش سخت گیرانه با اضافه کردن عبارت “use strict” در ابتدای یک تابع. در این صورت روش Strict Mode فقط بر روی آن تابع اجرا می شود.
• اعلان روش سخت گیرانه با اضافه کردن عبارت “use strict” در ابتدای فایل اسکریپت جاوا اسکریپت. در این حالت روش Strict Mode بر روی کلیه دستورات آن اسکریپت اعمال می شود.

مثال عملی : در مثال عملی زیر با به کار بردن عبارت “use strict” در ابتدای فایل برنامه، به برنامه لزوم استفاده از روش Strict Mode برای اجرای کلیه کدهای آن را اعلام کرده ایم" :

"use strict";  
example();  
function example() {  
  x= 89;   //  تعریف نشده است x باعث بروز خطا می شود زیرا متغیر 

}  
            

در صورت اجرای کد تابع فوق، خطایی رخ می دهد زیرا از متغیر x استفاده کرده ایم که قبلا آن را تعریف (declare) نکرده ایم.

- اعلان روش سخت گیرانه درون بدنه یک تابع : در این حالت عبارت “use strict” را درون بدنه تابع قرار داده و فقط کدهای درون تابع ملزوم به استفاده از روش سختگیرانه هستند و به کدهای بیرون آن کاری ندارد.

مثال عملی : در کد مثال زیر، لزوم استفاده از حالت Strict Mode را با به کار بردن “use strict” درون کد تابع، برای کدهای داخل بدنه تابع اجباری کرده ایم و کد خط اول مثال باعث بروز خطا نمی شود (خارج از تابع است):

y = 89;       // باعث بروز خطا نمی شود 
example();  
function example() {  
  "use strict";  
  x = 89;   // باعث بروز خطا می شود
}   
            

آموزش کاربرد روش Hoisting و ES6:

در روش Hoisting (که روش پیش فرض کدنویسی است)، کلیه اعلانات (declarations) برنامه در بالای دستورات قرار گرفته و بر روی تمام حوزه (Scope) فایل اثر می گذارد. این اعلانات به تمامی متغیرها و تابع های برنامه اعمال می شود. این روش به جاوا اسکریپت اجازه می دهد از یک موجودیت (Component) قبل از اعلان آن استفاده کند. روش Hoisting را نمی توانید در اسکریپت هایی که از حالت سختگیرانه Strict Mode استفاده می کنند، به کار ببرید.