آموزش جاوا اسکریپت es6 – راهنمای جامع راه اندازی و برنامه نویسی با JavaScript ES6
در این پست از مجموعه آموزش های پی استور با آموزش جاوا اسکریپت es6 در کنار شما فراگیران عزیز خواهیم بود. جاوا اسکریپت ES6 که با نام های ECMAScript 2015 یا ECMAScript 6 نیز شناخته می شود نسخه جدیدتری از زبان برنامه نویسی جاوا اسکریپت است که در سال 2015 معرفی شد. بهتر است بدانید ECMAScript استانداردی است که زبان برنامه نویسی جاوا اسکریپت از آن استفاده می کند. ECMAScript مشخصات نحوه کار زبان برنامه نویسی جاوا اسکریپت را ارائه می دهد. در این آموزش راهنمای جامعی از راه اندازی و شروع کار با جاوا اسکریپت es6 را ارائه خواهیم کرد تا بتوانید به سرعت با es6 شروع به برنامه نویسی کنید.
جاوا اسکریپت es6 چیست؟
اکما اسکریپت ECMAScript یک استاندارد برای زبان برنامه نویسی JavaScript است. نسخه 6 یا همان ES6 از این استاندارد، نسخه پایدار ECMAScript است که در آن دستورات ساده، منطقی و قابل فهم تر شده اند. اما موضوع مهمی که در جاوا اسکریپت es6 وجود دارد این است که تمامی ویژگی ها یا feature ها توسط همه مرورگرها تفسیر و پشنتیبانی نمی شود. برای همین برای کدنویسی و برنامه نویسی با جاوا اسکریپت es6 نیاز به یک سری ابزار خواهیم داشت تا کد ES6 را به نسخه ES5 تبدیل کند و در نهایت کدها، قابل تفسیر در داخل مرورگرها شوند.
در آموزش جاوا اسکریپت es6 ما با IDE محبوب و جدید VScode کار خواهیم کرد اگر در رابطه با این IDE اطلاعاتی ندارید می توانید آموزش VScode فرادرس را مطالعه فرمایید. در VScode امکان دانلود وابستگی های لازم برای اجرای جاوا اسکریپت es6 بصورت اتوماتیک وجود دارد پس کار خودمان را با این IDE شروع می کنیم.
ابزارهای مورد نیاز برای برنامه نویسی جاوا اسکریپت es6
برای آموزش جاوا اسکریپت es6 نیاز به چند ابزار داریم تا کار برنامه نویسی با ES6 را شروع کنیم. برای شروع کار احتیاج به Nodejs داریم.
Nodejs یک پلتفرم Runtime است برای اینکه بتوانیم نرم افزارهای کاربردی را به کمک جاوا اسکریپت بر روی پلتفرم های مختلف توسعه بدهیم. برای دانلود این پلتفرم کافیست به سایت Nodejs.org بروید و نسخه مناسب خود را دانلود کنید. طبق شکل زیر نسخه مناسب را انتخاب می کنیم.
مراحل نصب ساده می باشد فقط اجازه دهید در حین مراحل نصب عملیات دانلود پکیج های مختلف از طریق کنسول یا پاورشل ویندوز انجام شود و از اتصال به اینترنت خود هم مطمئن باشید. پس از اینکه مرحله نصب Nodejs تمام شد احتیاج به یک کامپایلر داریم نام این کامپایلر babel است. babel کامپایلری است که کار تبدیل کد ES6 را به کد ES5 انجام می دهد.
برای نصب کامپایلر babel بر روی nodejs کار خاصی یا دانلود دستی انجام نمی دهیم فقط کافیست IDE خودمان (VScode) را باز کنیم و وابستگی های لازم را روی آن ایجاد کنیم.
راه اندازی جاوا اسکریپت es6 بر روی VScode
در این بخش از آموزش جاوا اسکریپت es6 می خواهیم ملزومات و نیازمندیهای لازم برای کدنویسی جاوا اسکریپت es6 در VScode را مطرح کنیم. VScode را باز کنید و Open Folder را بزنید طبق نمونه زیر مثلاً در دسکتاپ یک فولدر با نام ES6 ایجاد کنید:
همانطور که مشاهده می کنید فعلاً چیزی در explorer ویژوال استادیو کد و فولدر ما وجود ندارد وقت آن رسیده تا وابستگی های لازم برای کدنویسی JavaScript ES6 را ایجاد کنیم. در واقع ما باید NodeJS و کامپایلر Babel را به پروژه خودمان اضافه کنیم. برای این کار به طبق تصویر از گزینه Terminal یک ترمینال جدید ایجاد کنید.
حالا می توانید طبق تصویر زیر دستوراتی را که در ادامه گفته خواهد شد را تایپ کنید:
در این آموزش یک تابع add بسیار ساده sum.js ایجاد می کنیم و آن را در تابع اصلی index.js فرخوانی خواهیم کرد. دستور npm init را در ترمینال تایپ کنید تا بسته package.json برای پروژه ایجاد شود. در این مرحله لازم نیست برای تعیین نام یا ورژن و … چیزی وارد کنید اینتر را بزنید و در نهایت در آخر yes بنویسید.
حالا نوبت به نصب کامپایلر Babel رسیده. برای این کار دستور زیر را در ترمینال وارد کنید و صبر کنید تا مرحله دانلود و نصب Babel بر روی پروژه پایان پذیرد.
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
اجازه دهید در مورد بسته های زیر توضیحاتی را ارائه کنیم:
- babel/core: هسته اصلی کامپایلر Babel می باشد که لازم است نصب شود.
- babel/cli: یک CLI داخلی است که می تواند برای کامپایل پروژه ها از خط فرمان استفاده شود.
- :babel-node یک CLI است که دقیقاً مشابه CLI Node.js عمل می کند و مزیت اضافه آن، کامپایل با پیش تنظیمات و افزونه های Babel قبل از اجرای آن است.
- babel/preset-env: یک برنامه از پیش تنظیم شده هوشمند است که به شما امکان می دهد از آخرین ورژن جاوا اسکریپت بدون نیاز به مدیریت بسته ها از آن استفاده کنید.
حالا اگر سری به Explorer و فولدر خود بزنید خواهید دید فایل های زیر به پروژه شما اضافه شده اند.
حالا nodemon را نیز به عنوان وابستگی توسعه برای پروژه نصب کنید. برای این کار کد زیر را در ترمینال وارد کنید.
npm i --save-dev nodemon
پس از اتمام این مراحل فایل package.json وابستگی های لازم را بطور کامل خواهد داشت. حال وقت آن رسیده تا دو فایل sum.js و index.js را به پروژه خودمان اضافه کنیم. برای این کار طبق تصویر در پنجره Explorer راست کلیک کرده و New file را بزنید و این دو فایل را ایجاد کنید.
محتویات فایل sum.js را بصورت زیر قرار دهید:
//sum.js function add(a, b) { return a + b; } export default add; // ES6 export
که همانطور که مشاهده می کنید یک تابع ساده add دو عدد است. محتویات فایل index.js را نیز بصورت زیر قرار دهید:
//index.js import add from "./sum"; //ES6 import console.log(add(5, 4)); //This should print 9 in the console
حالا در پنجره explorer یک فایل بدون نام و فقط با پسوند babelrc. ایجاد کنید و محتویات آن را به شکل زیر قرار دهید:
{ "presets": [ "@babel/preset-env" ] }
برای اجرای کد ها با استفاده از babel باید یک اسکریپت start را در فایل package.json اضافه کنیم برای این منظور در فایل package.json قسمت scripts این کدها جایگزین شوند:
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "nodemon --exec node_modules/.bin/babel-node index.js" }
حالا دستور زیر را در خط فرمان یا همان ترمینال اجرا کنید:
npm start
مشاهده خواهید کرد که عدد 9 در ترمینال ظاهر شده است. البته برای اجرا نیازی به تایپ دستور نیست می توانید از Run یا F5 هم استفاده کنید. خود VScode پیشنهاداتی را برای نشان دادن خروجی به شما خواهد داد که می توانید آن ها را به پروژه اضافه کنید. فقط در این آموزش نشان دادن نحوه اجرا است پس نتایج را ما در ترمینال مشاهده می کنیم.
ویژگی ها جدید در جاوا اسکریپت ES6
در این بخش از آموزش جاوا اسکریپت es6 نوبت به بررسی ویژگی های جدید ES6 می رسد. قبل از هر چیز شما باید به زبان برنامه نویسی جاوا اسکریپت مسلط باشید اگر در این مورد اطلاعات کمی دارید می توانید مجموعه آموزش جاوا اسکریپت را مشاهده نمایید.
یادتان باشد هر کدی که در این بخش ها نوشته می شود را براحتی می توانید مثلاً در Sum.js قرار دهید و از index.js آن را فراخوانی کنید و نتیجه را مشاهده کنید. پس نیازی به جزء به جزء ذکر کردن و نحوه اجرای کد نیست.
دستور let در جاوا اسکریپت
جاوا اسکریپت let برای اعلان متغیرها استفاده می شود. در جاوا اسکریپت، متغیرها را با استفاده از کلمه کلیدی var اعلان می کردیم. تفاوت اصلی بین let و var، در محدوده بلوکی مورد استفاده است. یعنی متغیرهایی که با استفاده از let تعریف می شوند دارای محدوده بلوکی هستند. این بدان معناست که آنها فقط در یک بلوک خاص قابل دسترسی هستند. به عنوان مثال:
// variable declared using let let name = 'Sara'; { // can be accessed only inside let name = 'Peter'; console.log(name); // Peter } console.log(name); // Sara
دستور const در جاوا اسکریپت
دستور const برای اعلان ثابت در جاوا اسکریپت استفاده می شود. به عنوان مثال:
// name declared with const cannot be changed const name = 'Sara';
پس از اعلان، نمی توانید مقدار متغیر const را تغییر دهید.
توابع Arrow در جاوا اسکریپت
در نسخه ES6 جاوا اسکریپت می توانید از توابع Arrow یا جهت دار برای ایجاد عبارات تابع استفاده کنید. به عنوان مثال این تابع:
// function expression let x = function(x, y) { return x * y; }
می تواند به صورت زیر نوشته شود:
// function expression using arrow function let x = (x, y) => x * y;
کلاس ها در جاوا اسکریپت
کلاس JavaScript برای ایجاد یک شی استفاده می شود. کلاس class شبیه یک تابع سازنده است. مثلا:
class Person { constructor(name) { this.name = name; } }
کلمه کلیدی class برای ایجاد کلاس استفاده می شود. ویژگی ها در یک تابع سازنده اختصاص داده می شوند. به مثال زیر توجه کنید:
class Person { constructor(name) { this.name = name; } } const person1 = new Person('John'); console.log(person1.name); // John
مقادیر پارامترهای پیش فرض در جاوا اسکریپت
در نسخه ES6 می توانید مقادیر پیش فرض را در پارامترهای تابع ارسال کنید. مثال زیر را می توانید در نظر بگیرید:
function sum(x, y = 5) { // take sum // the value of y is 5 if not passed console.log(x + y); } sum(5); // 10 sum(5, 15); // 20
در مثال بالا، اگر پارامتری را برای y ارسال نکنید، به طور پیش فرض مقدار 5 برای y در نظر گرفته خواهد شد.
الگوی لیترال ها در جاوا اسکرپیت
در es6 الگویی که برای گنجاندن یا قرار دادن متغیرها در داخل یک رشته وجود دارد آسان تر شده است. به عنوان مثال:
const first_name = "Jack"; const last_name = "Sparrow"; console.log('Hello ' + first_name + ' ' + last_name);
این عمل را می توان با استفاده از الگوی es6 برای لیترال ها به صورت زیر نوشت:
const first_name = "Jack"; const last_name = "Sparrow"; console.log(`Hello ${first_name} ${last_name}`);
تخریب یا Destructuring در جاوا اسکریپت
ساختار یا syntax مدل تخریب در es6 تخصیص مقادیر به یک متغیر جدید را آسانتر میکند. به عنوان نمونه کد زیر را در نظر بگیرید:
// before you would do something like this const person = { name: 'Sara', age: 25, gender: 'female' } let name = person.name; let age = person.age; let gender = person.gender; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
با استفاده از نحو ES6 Destructuring، کد فوق را می توان به صورت زیر نوشت:
const person = { name: 'Sara', age: 25, gender: 'female' } let { name, age, gender } = person; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
import و export کردن در جاوا اسکریپت
یک کار جالب در نسخه es6 جاوا اسکرپت import و export کردن است یعنی می توانید یک تابع یا برنامه را export کنید و با import آن در برنامه دیگری استفاده کنید. این کار به ساخت اجزای قابل استفاده مجدد کمک می کند. به عنوان مثال، اگر دو فایل جاوا اسکریپت به نام contact.js و home.js دارید براحتی می توانید در فایل contact.js از تابع contact که نوشته شده export بگیرید و استفاده کنید:
// export export default function contact(name, age) { console.log(`The name is ${name}. And age is ${age}.`); }
سپس وقتی می خواهید از تابع ()contact در یک فایل دیگر استفاده کنید، می توانید به سادگی تابع را وارد کنید. به عنوان مثال، در فایل home.js:
import contact from './contact.js'; contact('Sara', 25); // The name is Sara. And age is 25
Promise در جاوا اسکریپت
Promise ها برای انجام کارهای ناهمزمان استفاده می شود. مثلا:
// returns a promise let countValue = new Promise(function (resolve, reject) { reject('Promise rejected'); }); // executes when promise is resolved successfully countValue.then( function successValue(result) { console.log(result); // Promise resolved }, )
ریست کردن پارامترها و عملگر گسترش
می توانید از پارامتر rest برای نشان دادن تعداد نامحدودی از آرگومان ها به عنوان یک آرایه استفاده کنید. مثلا:
function show(a, b, ...args) { console.log(a); // one console.log(b); // two console.log(args); // ["three", "four", "five", "six"] } show('one', 'two', 'three', 'four', 'five', 'six')
آرگومان های باقی مانده را با استفاده از یک ساختار نشان داد. به مثال زیر توجه کنید:
let arr1 = ['one', 'two']; let arr2 = [...arr1, 'three', 'four', 'five']; console.log(arr2); // ["one", "two", "three", "four", "five"]
هم پارامتر rest و هم عملگر spread از یک نحو استفاده می کنند. با این حال، عملگر گسترش با آرایه ها (مقادیر قابل تکرار) استفاده می شود.
سخن آخر در مورد آموزش جاوا اسکریپت es6
در این پست در رابطه با آموزش جاوا اسکریپت es6 صحبت کردیم و راهنمای جامعی برای راه اندازی و برنامه نویسی با جاوا اسکریپت es6 را معرفی کردیم. es6 نسخه پایدار و بروزی از جاوا اسکریپت است پس آموزش این نسخه برای کار برنامه نویسی با جاوا اسکریپت در کاربردهای مختلف لازم و ضروری است. اگر مطالب آموزشی را با جزئیات بیشتری دوست دارید یاد بگیرید و یا علاقه مند به آموزش از طریق فیلم آموزشی هستید پیسنهاد می کنیم آموزش JavaScript ES6 مجموعه فرادرس را تهیه و مطالعه کنید. در پایان امیدواریم از مطالب فوق استفاده های لازم را کرده باشید. در مجموعه پی استور همیشه منتظر نظرات و پیشنهادات شما عزیزان هستیم. پیروز و موفق باشید.
پاورپوینت جاوا اسکریپت ES6
جاوا اسکریپت ES6 یا اکما اسکریپت (ECMAScript) یک استاندارد جدید است که برای هرچه بهتر شدن جاوا اسکریپت ارائه شده است. این استاندارد در طی سالهای مختلف نسخههای مختلفی را ارائه داده است. این پاورپوینت آماده در 28 اسلاید در قالب ppt. یا pptx. با قابلیت ویرایش برای ارائه درسی آماده دانلود میباشد. جهت دانلود این پاورپوینت بر روی لینک زیر کلیک کنید.
درباره امین جلیل زاده رزین
پایه گذار و موسس وب سایت آموزشی پی استور، مدرس دانشگاه فنی و حرفه ای، برنامه نویس و تحلیل گر سیستم، پژوهشگر در حوزه الگوریتم های ابتکاری، فرا ابتکاری، یادگیری ماشین، شبکه و پایگاه داده. ایشان در زبان های برنامه نویسی متعدد، نظیر ++C، سی شارپ، PHP ،Java، متلب MATLAB و Python تسلط و سابقه تدریس فعال دارند.
جاوا اسکریپت رو کامل توضیح دادین ممنون