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

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

شاید در سال 1995 که آقای Brendan Eich برای اولین بار این زبان را با عنوان Mocha با همکاری شرکت Netscape ایجاد کرد و با مشکلات فراوانی روبرو شد، انتظار نداشت که روزگاری این زبان یکی از زبان‌های محبوب و پرطرفدار حوزه‌ی وب شود. در همان سال‌ها بعد از ایجاد تغییراتی نام آن هم به LiveScript تغییر کرد. جالب است بدانیم که زبان برنامه‌نویسی جاوا هیچ تشابه و وجه اشتراکی با زبان جاوا اسکریپت ندارد و بدو ورود جاوا اسکریپت مصادف شد با زمانی که شرکت Sun قصد داشت زبان برنامه نویسی جاوا را تحت وب ارتقاء دهد.

اما چون زبان جاوا خیلی پیچیده و دشوار بود، نتوانستند آن را تحت وب دربیاورند، از این رو این دو شرکت، یعنی Sun و Netscape توافق کردند تا نام این زبان برنامه‌نویسی جدید تحت وب را به جاوا اسکریپت تغییر دهند تا خواسته‌های هر دو طرف برآورده شود. یعنی هم تحت وب باشد و هم شناخته شود، چراکه با وجود تلاش‌های زیاد زبان LiveScript سال‌ها نتوانست خود را به جامعه برنامه‌نویسی بشناساند. امروزه زبان برنامه‌نویسی جاوا اسکریپت جایگاه خاص و بازار ویژه‌ای در بین برنامه‌نویسان وب دارد و تکنولوژی‌های فراوانی مرتبط با آن وجود دارد. از مهم‌ترین آن‌ها این است که با استفاده از زبان برنامه‌نویسی جاوا می‌توان هرگونه انیمیشن و تحرک به عناصر صفحه اضافه کرد، برخلاف Html و Css که فاقد این قابلیت هستند. همین امر سبب روی آوردن اکثر برنامه‌نویسان به آموزش جاوا اسکریپت شده است. برخی از موارد استفاده جاوا اسکریپت عبارت‌اند از:

  • هوش مصنوعی
  • اپلیکیشن‌های موبایل اندروید
  • IOS
  • اپلیکیشن‌های دسکتاپ

جاوا اسکریپت (JavaScript) چیست؟

جاوا اسکریپت (JavaScript) چیست؟

اگر بخواهیم یک تعریف کلی از جاوا اسکریپت داشته باشیم باید بگوییم: جاوا اسکریپت علاوه بر اینکه یک زبان برنامه‌نویسی چند پلتفرمی، کامپایل شده سبک و مفسری است، به‌عنوان یک زبان برنامه‌نویسی صفحات وب هم شناخته می‌شود که برای توسعه صفحات وب به‌کار می‌رود. همچنین بسیاری از محیط‌های غیر مرورگر نیز آن را به‌کار می‌بندند. جاوا اسکریپت می‌تواند برای توسعه‌های سمت کلاینت و سرور استفاده شود و برخلاف Html و Css که زبان نشانه‌گذاری وب هستند، هم به لحاظ دستوری و هم به لحاظ زبانی یک زبان برنامه‌نویسی وب است. در نتیجه یادگیری آن پیچیده‌تر و گسترده‌تر از دو مورد فوق است.

یادگیری جاوا اسکریپت آسان است

کمی پیش اشاره کردیم که یادگیری جاوا اسکریپت کمی پیچیده است! اما این ادعا در مقابل یادگیری HTML و CSS صدق می‌کند. از قضا یادگیری جاوا اسکریپت بسیار آسان است و همچنین دارای فریم‌ورک‌های بسیار قدرتمند و کتابخانه‌های کاملی است که آموزش و یادگیری آن‌ها باعث ایجاد مهارت‌های شگفت‌انگیز و پیشرفت چشمگیر شما در حیطه وب و اپلیکیشن‌های موبایل خواهد بود که منجر به رونق کسب‌وکار و افزایش باورنکردنی درآمد شما می‌شود. کتابخانه JS (JavaScript) شامل یک کتابخانه استاندارد از اشیاء، مانند آرایه، تاریخ، و ریاضی، و مجموعه‌ای از عناصر اصلی زبان مانند عملگرها، ساختارهای کنترلی و دستورات می‌باشد.

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

شروع برنامه نویسی با جاوا اسکریپت

در این قسمت از آموزش جاوا اسکریپت قصد داریم گام‌به‌گام به جلو حرکت کرده و جاوا اسکریپت بیاموزیم. در ابتدای کار نیازی به نصب هیچ برنامه‌ای نیست و با همان Notepad ویندوز کارمان راه می‌افتد. در مرحله اول یک فولدر ایجاد می‌کنیم. برنامه Notepad را باز کرده و در یک صفحه جدید کدهای html زیر را کپی می‌کنیم، سپس آن را با پسوند html. ذخیره می‌کنیم. (مثلاً: Elay.html) می‌بینیم که شکل آیکن آن تغییر کرده و به شکل مرورگر ویندوزمان درآمد.

 

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Elay</title>

</head>

<body>

<p>Test for Elay</p>

</body>

</html>

 

با کلیک روی آن و اجرای آن خروجی مقابل ظاهر می‌شود: "Test for Elay". حالا یک فایل دیگر با پسوند CSS در همان فولدر ایجاد می‌کنیم تا به تنظیمات ظاهری بپردازیم. کد‌های زیر را در آن قرار می‌دهیم:

body {

background-color: lightblue;

}

 

p {

color: blue;

margin-left: 20px;

}

همانطوریکه در شکل زیر مشاهده می‌کنید حالا در فولدر Elay دو پوشه زیر موجود هستند.

شروع برنامه نویسی با جاوا اسکریپت

برای اینکه این دو فایل را به هم پیوند بدهیم بطوریکه فایل Elay بتواند به فایل CSS دسترسی داشته باشد در بخش head آن کد زیر را اضافه می‌کنیم.

 

<link rel="Elaysheet" href="Elay.css">

جاوا اسکریپت را می توان به دو روش به فایل HTML خود اضافه کرد:

JS داخلی: ما می توانیم جاوا اسکریپت را مستقیماً با نوشتن کد داخل تگ <script> به فایل HTML خود اضافه کنیم. تگ <script> را می‌توان باتوجه به نیاز داخل تگ <head> یا <body> قرار داد.
JS خارجی: می‌توانیم کد جاوا اسکریپت را در فایل دیگری که دارای extension.js است بنویسیم و سپس این فایل را در داخل تگ <head> فایل HTML که می‌خواهیم این کد را در آن اضافه کنیم پیوند دهیم.

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

در این بخش از آموزش جاوا اسکریپت خواهیم دید که انواع مختلفی از داده‌ها در زبان جاوا اسکریپت وجود دارند و یک متغیر در جاوا اسکریپت می‌تواند هر نوع داده‌ای را به خود بگیرد. یعنی مثلاً اول مقدارش یک رشته باشد و بعد یک مقدار عددی داشته باشد. به عبارتی داده‌ها از نوع پویا (Dynamically typed) هستند و متغیرها در گرفتن نوع داده محدود نیستند. در کل 6 نوع داده در زبان جاوا اسکریپت وجود دارند که عبارت‌اند از:

نوع عددی (number)

اعداد به دو صورت صحیح و اعشاری به‌کار برده می‌شوند. علاوه بر این اعداد، (منفی بی‌نهایت) Infinity_، (مثبت بی‌نهایت) Infinity و (تعریف نشده و خطای محاسباتی) NaN که جزء اعدا خاص به شمار می‌روند، از نوع عدد هستند. نکته قابل توجه این است که در زبان جاوا اسکریپت عملیات ریاضی امن هستند. یعنی ما می‌توانیم هر عملیاتی را اعم از تقسیم بر صفر، استفاده از رشته‌ها به جای اعداد و ... را انجام دهیم بدون اینکه برنامه ما متوقف شود و فقط نتیجه عملیات NaN خواهد بود.

نوع رشته (string)

در زبان برنامه‌نویسی جاوا اسکریپت برخلاف سایر زبان‌ها نوع داده کاراکتر (char) وجود ندارد. در جاوا اسکریپت یک رشته می‌تواند شامل یک کاراکتر و یا تعدادی از آنها باشد. رشته‌ها در زبان جاوا اسکریپت باید مابین کوتیشن‌ها قرار بگیرند که سه نوع هم کوتیشن داریم:

  1. دابل کوتیشن : "Salam"
  2. سینگل کوتیشن: 'Salam'
  3. بک تیک ها: `Salam`

نوع منطقی (boolean)

در این قسمت از آموزش جاوا اسکریپت به نوع داده منطقی می‌پردازیم. نوع داده بولین شامل دو مقدار true و false است که true به معنای بله و صحیح و false به معنای خیر و ناصحیح است. از این دو مورد برای ذخیره مقادیر بله و خیر و به‌عنوان نتیجه مقایسه‌ها نیز استفاده می‌شود.

مقدار null

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

مقدار undefined

اگر متغیری را تعریف کنیم و به آن مقدار اولیه ندهیم، آن‌گاه مقدار آن برابر با undefined خواهد بود.

نوع های object

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

نوع symbol

نوع Symbol برای ساخت یک شناسه منحصر به فرد برای اشیا (object) مورد استفاده قرار می‌گیرد.

عملگر typeof

در بخش آخر معرفی انواع داده در آموزش جاوا اسکریپت به عملگر typeof اشاره می‌کنیم. عملگر typeof برای چک کردن نوع متغیرها استفاده می‌شود و نوع آرگومان خود را برمی‌گرداند . به دو شکل می‌توان از عملگر typeof استفاده کرد :

  • به‌شکل یک عملگر: typeof x
  • به‌شکل یک تابع: (x)typeof

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

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

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

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

<script type = "text/javascript">

<!--

var money;

var name;

var book, pen;

var name2 = "Ali";

money2 = 2000.50;

//-->

</script>

 

در آموزش جاوا اسکریپت برای نام‌گذاری متغیرها قواعدی وجود دارد که برخی از آن‌ها به شرح زیر می‌باشند:

  • نام متغیر باید از حروف کوچک یا بزرگ انگلیسی ( a-z یا A-Z ) و یا ترکیبی از آن‌ها باشد.
  • نام متغیر می‌تواند با علامت _ ( زیر خط یا Underscore ) آغاز شود.
  • نام متغیر میتواند شامل اعداد ( ۰ تا ۹ ) باشد، ولی اعداد نباید در ابتدای نام متغیر آورده شوند.
  • نام متغیر می‌تواند با علامت $ آغاز شود.
  • نام متغیر نمی‌تواند از کلمات کلیدی یا کلمات رزرو شده خود جاوا اسکریپت باشد.
  • نام متغیر به حروف کوچک و بزرگ حساس است.

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

به قسمت دستورات شرطی در آموزش جاوا اسکریپت رسیدیم. این دستورات عبارتند از:

دستور شرطی if

همانطوریکه مشاهده می‌کنید در کد زیر وقتی به قسمت شرط می‌رسیم، بعد از بررسی درستی شرط، اگر شرط درست باشد کدهایی که برای آن تعریف شده‌اند اجرا می‌شوند و در خروجی ما عبارت “مقدار num1 10 می باشد” نمایش داده می‌شود وگرنه از بلاک if خارج می‌شود .

<script>

var num1 = 10;

if( num1==10 ){

document.write("مقدار num1 10 می باشد");

}

</script>

دستور شرطی if else

از دستور if else زمانی استفاده می‌شود که شرط اولمان برقرار نباشد و بخواهیم شرایط و دستورات دیگری را بررسی و اجرا کنیم.

<html>

<body>

<script type="text/javascript">

var age = 15; if( age > 18 ){

document.write("<b> او مجاز است.</b>");

}

else{

document.write("<b>او مجاز نیست.</b>");

}

</script>

</body>

</html>

دستور شرطی if else if

از دستور شرطی if else if برای تعریف چند عبارت شرطی استفاده می‌شود.

if (time < 10) {

document.write("آبی");

}

else if (time < 20) {

document.write("قرمز");

}

else {

document.write("زرد");

}

دستور switch

این دستور مثل دستور else…if می‌باشد با این تفاوت که وقتی همه شرط‌های ما به یک مقدار بستگی داشته باشد بهتر است از ساختار switch استفاده شود.

switch (new Date().getDay()) {

case 0: day = "Sunday"; break;

case 1: day = "Monday"; break;

case 2: day = "Tuesday"; break;

case 3: day = "Wednesday"; break;

case 4: day = "Thursday"; break;

case 5: day = "Friday"; break;

case 6: day = "Saturday";

}

دستورات تکرار و حلقه در آموزش جاوا اسکریپت

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

حلقه for

حلقه for کد را به تعداد دفعات ذکر شده اجرا می‌کند.

for (i = 0; i < 5; i++) {

text += "The number is " + i + "<br>";

}

for/in

حلقه for/in کد را بر اساس پروپرتی‌های یک شیء تکرار می‌کند.

var person = {

fname:"John", lname:"Doe", age:25

};

var text = "";

var x;

for (x in person) {

text += person[x];

}

while

حلقه while کد را تا زمان برقرار بودن شرط اجرا می‌کند.

var x=10;

while(x>=1) {

document.write("Item_"+x+"<br>"); x--;

}

do/while

همانند حلقه while است با این تفاوت که شرط را در انتهای حلقه بررسی می‌کند.

var i=10;

do{

document.write("Item_"+i+"<br>"); i--;

}

while (i>=1);

یادگیری جاوا اسکریپت

آرایه ها (Array) در آموزش جاوا اسکریپت

آرایه‌های جاوا اسکریپت برای ذخیره چندین مقدار در یک متغیر استفاده می‌شوند. مثال زیر نحوه تعریف یک آرایه در جاوا اسکریپت را نشان می دهد:

<script>

var color = new Array("red", "blue", "black", "yellow");

var Result = color[0]; document.write(Result);

</script>

توابع در آموزش جاوا اسکریپت

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

<script>

var a = 5;

var b = 5;

var c = 7;

var d = 7;

document.write(a + b);

document.write("<br>");

document.write(c + d);

</script>

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

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

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

‌سیاره‌ی آی‌تی