آموزش مفاهیم پایه در جاوا اسکریپت – مفاهیم ساده‌ای که نباید دست کم بگیرید

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

در یک طرف زبان برنامه نویسی html و زبان برنامه نویسی css برای ظاهر سایت شما طراحی شده‌ان؛ ولی در طرف دیگه این جادوی جاوا اسکریپته که صفحات وب شما را زنده می‌کنه. امروزه این زبان به مرورگر وب محدود نمیشه و می‌تونید از اون برای برنامه نویسی سمت سرور یا همون بک اند هم استفاده کنید. طراحی اپلیکیشن را هم به دو مورد قبلی اضافه کنید تا ببینید با آچار فرانسه‌ای مثل جاوا اسکریپت چه کارها که نمیشه کرد.

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

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

خب بنظرتون آموزش مفاهیم پایه در جاوا اسکریپت چرا اینقدر اهمیت داره؟ طبق نظرسنجی Stack Overflow Developer Survey 2019  جاوا اسکریپت محبوب‌ترین زبان دنیاست و به طور گسترده برای 95 درصد سایت‌ها به کار میره. راه اندازی یک سایت با این زبان نیاز به دانش خوبی از از جاوا اسکریپت داره.

در هر زبان برنامه نویسی ، مفاهیمی وجود دارند که پایه و اساس یک زبان را می سازد یادگیری مفاهیم پایه در جاوا اسکریپت و دونستن نحوه‌ی به کار با اون‌ها باید اولویت اول شما در مسیر یادگیری جاوا اسکریپت باشه. دلیلش هم اینه که این زبان کتابخانه‌ها و فریمورک‌های زیادی داره مثلا react.js یا vue.js که اگه مفاهیم پایه‌ جاوا اسکریپت را بلد نباشید، کار با اونا هم براتون راحت نیست.

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

var Vs let Vs const در جاوا اسکریپت

اولین مفهوم از مفاهیم اولیه جاوا اسکریپت که بررسی می کنیم، کلمات var Vs let Vs const برای تعریف متغیر استفاده می شوند که یکسری تفاوت ها باهمدیگه دارن

1.قبل از هرچیز این نکته رو در نظر داشته باشین که تمامی قوانین برای let و const یکسان بوده و تنها تفاوت این دو ثابت بودن یا نبودنشون هست، یعنی متغیر هایی که با let تعریف میشن قابلیت این رو دارن که دوباره مقداردهی بشن و مقدار داخل متغیر آپدیت بشه، اما متغیرهایی که با const تعریف میشن این قابلیت رو ندارن و اگر مقدارشونو تغییر بدیم با ارور مواجه خواهیم شد ، به کد زیر توجه کنین:

const myConstVariable = 10;
myConstVariable = 5;

با اجرای این کد با TypeError مواجه خواهیم شد!

همونطور که گفتیم مقدار های متغیر های const (ثابت) به هیچ وجه قابل تغییر نیستند متغیر هایی که با var تعریف میشون قابلیت اینو دارن که دوباره تعریف بشن ولی ولی متغیر های let این قابلیت رو ندارن(تو scope خودشون فقط یک بار میتونن تعریف بشن)

به کد زیر توجه کنین:

var myVarVariable = 10;
var myVarVariable = 5;    //  با هیچ خطایی مواجه نمیشویم

let myLetVariable = 10;
let myLetVariable = 5;    //  با SyntaxError مواجه خواهیم شد

2. متغیر های var از Hoisting در جاوا اسکریپت پیروی میکنند ولی متغیر های const از Hoisting پیروی نمیکنن حالا Hoisting چیه؟ ببینین، شما میتونین یک متغیر رو قبل از این که تعریف بشه مقداردهی کنین و ازش استفاده کنین و سپس تعریفش کنین 😉 یه این موضوع در جاوا اسکریپت Hoisting گفته میشه که متغیر های var از این قانون پیروی میکنن ، به کدهای زیر توجه کنین:

    myVarVariable = 10;
    console.log(myVarVariable)  // OutPut = 10
    var myVarVariable;

    myLetVariable = 10;
    console.log(myLetVariable)  // OutPut = ReferenceError
    let myLetVariable;

3. نکته بعدی از مفاهیم اولیه در جاوا اسکریپت این مورد اینه که متغیرهای var محدود به Scope نیستند و سراسری تعریف میشن اما اگر متغیری رو با let تعریف بکنین فقط و فقط در scope (محدوده) خودشون قابل دسترسی هستن و تو scope های دیگر نمیتونیم بهشون دسترسی داشته باشیم به کد زیر دقت کنین:

    {
       var myVarVariable = 10;
       console.log(myVarVariable)  // OutPut = 10       
    }
   

    {
      console.log(myVarVariable)  // OutPut = 10
    }

همونطور که میبینین متغیر myVarVariable تو scope خارج از خودش هم قابل دسترسی هست

    {
       let myLetVariable = 10;
       console.log(myLetVariable)  // OutPut = 10       
    }
   

    {
      console.log(myLetVariable)  // OutPut = ReferenceError
    }

همون طور که میبینین متغیر myLetVariable در scope دوم قابل دسترسی نیست مبحث var، let و const به اندازه ای گسترده هست که برای خودش میتونه یه مقاله کامل باشه! اینجا همینقدر بهش اشاره کردیم و کافیه بنظرم(اگه سوالی در این زمینه داشتین حتما تو کامنت ها بپرسید)

دستورات شرطی در جاوا اسکریپت

دستورات شرطی از مفاهیم پایه در جاوا اسکریپت می باشد، برای چک کردن یک شرط در زبان برنامه نویسی جاوا اسکریپت هستن خیلی وقتا پیش میاد که شما بخواین یک عملی در صورت درست بودن یک کاری انجام بشه به عنوان مثال شما میخواین اگه کاربر لاگین شده باشه براش قیمت محصولات رو هم نشون بدین و اگر لاگین نشده باشه بجای قیمت محصولات متن “ابتدا باید وارد حساب کاربریتون بشید” رو نمایش بدین،

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

    var userLogin = true;
    if(userLogin == true) {
      alert("شما به پنل کاربریتون لاگین شدین")

فرض کنین متغیر userLogin لاگین بودن یا نبودن کاربر رو نشون میده داخل if بررسی کردیم که اگر مقدار این متغیر true باشه به کاربر پیغام “شما لاگین شدین” رو بده میتونین برای هر شرط، شرط مخالف هم در نظر بگیرین، به این منظور که اگر شرطی برقرار بود یک عملکردی انجام بشه، در غیر این صورت یک کار دیگر انجام بشه، این کار رو با else پیاده سازی میکنیم:

  <script>
    var userLogin = true;
    if(userLogin == true) {
      alert("شما به پنل کاربریتون لاگین شدین")
    } else {
      alert("ابتدا به پنل کاربریتون وارد بشین")
    }

تو این بخش ابتدا بخش if اجرا میشه، اگر شرط بخش if صحیح باشه کدهای بخش if اجرا میشن در غیر این صورت کدهای آکلاد بخش else اجرا میشن (مفهوم if هم به نظرم همینقدر کافیه برای درک اولیه، اگه سوالی داشتین حتما حتما تو کامنت ها بپرسین)

دستور switch case در جاوا اسکریپت

این دستور هم برای شرط ها استفاده میشه، فقط یکم با سینتکس متفاوت تر از if شما یک مقدار به switch میدین و اون مقدار رو تو case های مختلف چک میکنین و در صورت صحیح بودن هر case کدهای مربوط به آکلاد اون case اجرا میشود بریم کدشو ببینیم:

    var userType = "admin";
    switch(userType) {
      case "user": {
        alert("شما کاربر نوع user هستین")
        break;
      } 
      case "admin": {
        alert("شما کاربر نوع admin هستین")
        break;
      } 
      default: {
        alert("شما در سایت ثبت نام نکردین")
      }
    }

اینجا متغیر userType به switch داده میشه و به ترتیب تو case اول چک میشه که مقدار userType برابر با “user” هست یا نه!  اگه این شرط صحیح باشه کدهای داخل آکلاد این case اجرا میشن و در صورت صحیح نبودن شرط، case بعدی بررسی میشود و به همین ترتیب case ها بررسی شده و اگر هیچکدوم از case ها صحیح نباشن بخش default اجرا میشه(بخش default حکم همون else در if هارو داره)

شاید براتون سوال باشه ماجرای اون break ها چیه! بعد از کدهای هر case یه break نوشتیم، کلمه break تو لغت به معنی شکستن هست و اینجا منظور از break اینه که اگر وارد یک case شد و کدهاشو اجرا کرد، وارد بقیه case ها نشه و switch رو بشکنه بیاد بیرون یعنی فقط یک case اجرا میشه، اونم اولین case

حلقه های تکرار در جاوا اسکریپت

از دیگر مفاهیم پایه ای در جاوا اسکریپت ، حلقه ها هستند. گاها براتون پیش میاد که بخواین یک عملکردی رو به تعداد زیادی انجام بدین، مثلا میخواین یک پیغامی رو به تعداد 100 بار به کاربر نمایش بدین، خب اگه هر پیغام 1 خط باشه در مجموع میشه 100 خط و این یعنی فاجعه! فقط برای همین نمایش پیغام 100 خط از سورس شما اِشغال شد، خب مسلما این کار بهینه ای نیست و حجم سورس کد مارو به شدت بالا میبره

برای جلوگیری از این کار، از حلقه های تکرار استفاده میکنیم، چندین حلقه در زبان برنامه نویسی جاوا اسکریپت وجود دارد مثل for, while, do while و … حلقه هایی مثل for in, for of, foreach و … نیز وجود دارد که مباحث متوسط و پیشرقته جاوا اسکریپت محسوب شده و در این مقاله نمیگنجند

حلقه تکرار for در جاوا اسکریپت

حلقه تکرار for یکی از مباحث پایه و مقدمات جاوا اسکریپت هست، با این حلقه تکرار میتونیم از زیاد شدن حجم کدهامون جلوگیری بکنیم حلقه for به شکل زیر نوشته میشه:

for (begin; condition; step) {
  // ... loop body ...
}

همون طور که مشاهده میکنین سینتکس حلقه for به این شکل هست که مقداری بعنوان مبدا به حلقه میدین (به عنوان مثال عدد 1)، و یک مقدار به عنوان مقصد میدین که این مقصد همون شرط حلقه محسوب میشه(به عنوان مثال مقدار 10) و در نهایت یک دستور به عنوان گام حرکت حلقه مینویسین و سپس کدهایی که میخواین تو هر مرحله اجرا بشن داخل آکلاد های حلقه مینویسین بریم کد زیر رو بررسی کنیم:

for (var i = 0; i < 3; i++) { // shows 0, then 1, then 2
  alert(i);
}

اولین مقدار داخل پرانتز مبدا حلقه محسوب میشه که برابر با 0 هست، بعد از مبدا، مقصد حلقه یا همان شرط حلقه رو تعریف میکنیم که همون کوچک تر از 3 هست، بعد از مقصد حلقه گام آن را تعیین میکنیم که همان ++i هست، الان حلقه ما از 0 شروع میکنه و ابتدا شرط رو چک میکنه اگر شرط حلقه برقرار باشه کدهای داخل آکلاد را اجرا کرده و گام حلقه رو اجرا میکند،

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

حلقه while در جاوا اسکریپت

یکی دیگر از مفاهم پایه در java script حلقه ها می باشد.

while (condition) {
  // code
}

همونطور که مشاهده میکنین ابتدا کلمه کلیدی while نوشته شده و سپس شرط حلقه رو داخل پرانتز مینویسیم و تا زمانی که شرط برقرار باشه کدهای داخل آکلاد اجرا میشن بریم یه کدی رو بررسی کنیم:

var i = 0;
while (i < 3) { // shows 0, then 1, then 2
  alert( i );
  i++;
}

یک متغیر با عنوان i تعریف کردیم و شرط حلقه while رو به این صورت نوشتیم که i کمتر از 3 باشد، یعنی تا زمانی که متغیر i کمتر از 3 باشد کدهای داخل آکلاد اجرا میشوند، الان مقدار متغیر i برابر با 0 هست و شرطمون همیشه برقرار هست و یک حلقه بی نهایت تشکیل دادیم!(اجرای همچین حلقه هایی باعث هنگ کردن مرورگر شده و به سیستم شما آسیب میزند، حتی برای تست هم اجراشون نکنین;))

پس باید یه جایی این شرط رو false بکنیم، داخل کدهای مربوط به while متغیر i رو در هر بار اجرا ++ میکنیم(یک واحد بهش اضافه میکنیم) ابتدا i برابر با 0 بوده و شرط برقرار هست، کدهای داخل آکلاد اجرا میشه و متغیر i برابر با 1 میشه و دوباره شرط چک میشه و چون 1 از 3 کمتر است و شرط برقرار هست کدهای حلقه دوباره اجرا میشوند و مقدار متغیر i برابر با 2 میشود و ….

همین ترتیب کدهای داخل آکلاد تکرار میشوند تا متغیر i به 3 رسیده و شرط حلقه while صحیح نباشد این دو حلقه از حلقه های مهم در جاوا اسکریپت هستند که دوستان مبتدی حتما باید آنها را یاد بگیرند، بالاتر اشاره کردم که به جز این دو مورد حلقه های دیگری نیز در جاوا اسکریپ وجود دارند که طی مقالات بعدی اونارو هم بررسی میکنیم.

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

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

تا مقاله ای دیگر شما رو به خدا میسپرم