آموزش مفاهیم پایه جاوا اسکریپت | بررسی مفاهیم جاوا اسکریپت از صفر

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

متغیر‌ها

متغیر‌ها ظروفی هستند که مقادیر را در خود ذخیره می‌کنند. شما با تعریف یک متغیر با var یا کلمه کلیدی let شروع می‌کنید و سپس نامی را که به متغیر می‌دهید مشخص می‌کنید:

let myVariable؛

پس از تعریف یک متغیر، می‌توانید به آن مقداری بدهید:

myVariable = 'Bob'؛

همچنین، می‌توانید هر دو این عملیات را در یک خط انجام دهید:

let myVariable = 'Bob'؛

شما با فراخوانی نام متغیر مقدار آن را بازیابی می‌کنید:

myVariable؛

پس از اختصاص مقدار به یک متغیر، می‌توانید بعداً آن را در کد تغییر دهید:

let myVariable = 'Bob'؛

myVariable = 'Steve'؛

قوانینی که برای نامگذاری متغیر‌ها باید رعایت کنید

در ادامه آموزش مفاهیم پایه جاوا اسکریپت نکات مهمی را درباره متغیر‌ها ذکر می‌کنیم.

نامی که انتخاب می‌کنید نمی‌تواند هم نام با کلمات کلیدی رزرو شده در زبان جاوا اسکریپت مثل let، if، else، و … باشد. نیازی به حفظ کردن کلمات کلیدی رزرو شده نیست چون هربار که شما اشتبا‌ها ازین کلمات در نامگذاری‌هایتان استفاده کنید خطای مربوط به شما اعلام خواهد شد. این خطا با قرار دادن خط قرمز زیر نام متغیر برایتان نشان داده خواهد شد.

نامی که انتخاب می‌کنید بهتر است حتما معنا دار باشد. برخی‌ها برای نامگذاری متغیر‌ها از کلماتی مثل a، b، a1، x و … استفاده می‌کنند. همانطور که می‌بینید ازین نام‌ها پیدا نیست که چه مقداری در آن متغیر‌ها ذخیره شده است. بنابراین اکیدا توصیه می‌شود که از کلمات معنادار و توصیفی (Descriptive) برای نامگذاری‌ها استفاده کنید.

نام‌هاییکه انتخاب می‌کنید نمی‌توانند با عدد شروع شوند. مثلا نمی‌توانیم متغیری رو 1name نامگذاری کنیم.

نام‌هاییکه انتخاب می‌کنید نمی‌توانند شامل کاراکتر‌های فاصله (Space) و خط تیره (Hyphen) باشند. پس اگر نامیکه انتخاب می‌کنید از چند کلمه تشکیل شده است بایستی آن‌ها را به هم بچسبانید. مثلا فرض کنید می‌خواهیم متغیری برای ذخیره نام خانوادگی تعریف کنیم:

1let lastName = 'Taghani'؛

برای نوشتن نام متغیر در این مثال از قرارداد Camel Notation استفاده شده است. طبق این قرارداد (Convention) بایستی حرف اول نخستین کلمه با حرف کوچک انگلیسی و حرف اول مابقی کلمات با حرف بزرگ انگلیسی نوشته شود.

نام متغیر‌ها حساس به حروف کوچک و بزرگ (Case Sensitive) هستند. لذا متغیر‌های زیر با هم فرق دارند و در حقیقت دو متغیر مجزا از هم خواهند بود:

1let lastName = 'Taghani'؛

1let LastName = 'Taghani'؛

انواع داده

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

number

let someNumber = 2984؛ someNumber = 29.84؛

برای انواع عددی از گیومه استفاده نمی‌کنیم. امکان تعریف اعداد صحیح و اعشاری وجود دارد و عملگر‌های ابتدای روی این اعداد کار می‌کنند. یک نوع عدد خاص به صورت infinity نیز وجود دارد. برای تولید آن کافی است یک را بر صفر تقسیم کنید (1/0). این عدد در واقع بزرگ‌ترین عدد است و بی‌ن‌هایت نامیده می‌شود.

اگر مقداری به صورت NaN دریافت کردید، معنی‌اش این است که یک خطای محاسباتی دارید. همچنین به این معنی است که تلاش کرده‌اید عملیات ریاضیاتی را روی چیزی اجرا کنید که معنی ندارد، مثلاً یک رشته متنی را بر یک عدد تقسیم کنید.

BigInt

بزرگ‌ترین عددی که در جاوا اسکریپت می‌توانیم داشته باشیم، عددی با طول 16 رقم است. در اغلب موارد اپلیکیشن‌های ما از اعداد با طول کمتر از 16 رقم استفاده می‌کنند. با این حال گاه ممکن است در کاربرد‌هایی مانند رمزنگاری به اعداد بسیار بزرگ نیاز داشته باشیم. یک مقدار BigInt با افزودن n به انتهای عدد ساخته می‌شود:

const someMassiveNumber = 1234567890123456789012345678901234567890n؛

String

String یا رشته یک متغیر متنی است که بر اساس قرارگیری درون گیومه مشخص می‌شود. 3 نوع گیومه به شرح زیر وجود دارند:

گیومه تکی (‘)

گیومه جفتی (“)

بک‌تیک (`)

گیومه‌های تکی و جفتی در جاوا اسکریپت تفاوتی ندارند. بک‌تیک بیشتر برای بسط کارکرد یک رشته جهت جاسازی متغیر‌ها با استفاده از ساختار {} $ استفاده می‌شوند.

Boolean

متغیر‌های بولی دو مقدار True یا False را نگهداری می‌کنند. به طور معمول برای نمایش نتیجه نوعی مقایسه مورد استفاده قرار می‌گیرد.

Null

Null به معنی تهی یا هیچ است. شبیه این مقدار را در زبان‌های دیگر برنامه‌نویسی ندیده‌ایم.

Undefined

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

Object

هر نوع داده دیگری به جز این انواع داده «ابتدایی» (Primitive) نامیده می‌شود، زیرا ساده هستند. اما اشیا یا objects امکان داشتن بیش از یک آیتم را در اختیار ما قرار می‌دهند.

گزاره‌ های شرطی

دیگر قسمت آموزش مفاهیم پایه جاوا اسکریپت مربوط به گذاره­های شرطی است. گزاره مشهور if ستون فقرات یک پروژه ابتدایی جاوا اسکریپت را تشکیل می‌دهد. ایده کار ساده است. «اگر» چیزی شرط مورد نظر را داشته باشد، کد اجرا می‌شود. به مثال زیر توجه کنید:

if (true) alert('woot! ')؛

این گزاره شرطی همواره یک مقدار بولی به عنوان نتیجه بازگشت می‌دهد. بنابراین می‌توانید محاسبات ریاضی، بررسی و هر چیزی دیگری را تا زمانی که یک مقدار بولی است داشته باشید.

علاوه بر گزاره if، گزاره‌های else if و esle نیز وجود دارند. Else if یک گزاره if را بسط می‌دهد. Esle صرفاً در مواردی که همه گزاره‌های دیگر برقرار نباشند، اجرا می‌شود. در مثال زیر این حالت بررسی شده است:

if(false){ //this code won't run because it returned false }else if(false){ //this also won't run }else if(false){ //still nope }else { //final catch all }

توابع:

تابع‌ها، بلوک‌های سازنده اپلیکیشن‌ها، کتابخانه‌ها، فریمورک‌ها و هر برنامه جاوا اسکریپت هستند. برخی تابع‌های داخلی از قبیل ()alert و ()prompt در زبان جاوا اسکریپت وجود دارند که قبلاً بررسی کردیم. علاوه بر این‌ها شما می‌توانید تابع‌هایی برای خودتان بنویسید:

function functionNameHere(){ //your code here }

سپس به صورت زیر می‌توانید تابع‌تان را فراخوانی کنید:

functionNameHere()؛

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

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

1

2

3

<span style="font-size: 12pt؛ ">for (begin؛ condition؛ step) {

// ... loop body ...

}</span>

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

1

2

3

<span style="font-size: 12pt؛ ">for (var i = 0؛ i < 3؛ i++) { // shows 0، then 1، then 2

alert(i)؛

}</span>

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

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

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

یکی دیگر از مفاهم پایه در java script حلقه‌ها می‌باشد که در ادامه آموزش مفاهیم پایه جاوا اسکریپت آن را بررسی می­کنیم

1

2

3

<span style="font-size: 12pt؛ ">while (condition) {

// code

}</span>

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

1

2

3

4

5

<span style="font-size: 12pt؛ ">var i = 0؛

while (i < 3) { // shows 0، then 1، then 2

alert( i )؛

i++؛

}</span>

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

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

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

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

منبع:

https://sabzlearn.ir/javascript-concepts/#hlqh_tkrar_for_dr_jawa_askrypt