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

سلام همراهان همیشگی سبزلرن

، این بار هم با مقاله

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

در خدمتتون هستیم. همونطور که میدونین

جاوا اسکریپت

یکی از زبان های قدرتمند و محبوب برای فرانت اند وب سایت هست.

جاوا اسکریپت همه جا هست. میلیو‌ن‌ها وب سایت روی زبان برنامه نویسی جاوا اسکریپت ساخته شدن و هنوز زبان بهتری برای جایگزین شدن جاوا اسکریپت در فرانت اند وجود ندارد. در یک طرف زبان برنامه نویسی 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 پیاده سازی میکنیم: