مجموعه آموزشی پی استور - https://programstore.ir

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

نگارش شده توسط: امین جلیل زاده رزین در تاریخ: | دسته بندی: جاوا اسکریپت

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

فهرست مطالب مخفی [1]
جاوا اسکریپت چیست؟
مقدمات لازم برای شروع کار برنامه نویسی جاوا اسکریپت
نوشتن اولین برنامه در جاوا اسکریپت
متغیر ها در جاوا اسکریپت
انواع داده ها در جاوا اسکریپت
دستورات شرطی در جاوا اسکریپت
آرایه در جاوا اسکریپت
شیء در جاوا اسکریپت
دستورات حلقه و تکرار در جاوا اسکرپت
تابع در جاوا اسکریپت
سخن آخر در مورد آموزش جاوا اسکریپت رایگان و کاربردی

جاوا اسکریپت چیست؟

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

جاوا اسکریپت چیست؟

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

حال اگر از هر زبان برنامه نویسی استفاده کنیم در نهایت کدهای آن به HTML تبدیل خواهد شد تا برای انسان قابل درک باشد.

زبان برنامه نویسی جاوا اسکریپت یک زبان Dynamic و مبتنی بر شی گرایی است و در زمینه طراحی وب، جایگاه ویژه ای در بین زبان های برنامه نویسی دارد. این زبان برنامه نویسی همیشه در کنار HTML و CSS به عنوان یک ابزار مکمل برنامه نویسی وب به کار برده می شود. جاوا اسکریپت یک زبان اسکریپتی است یعنی مرحله کامپایل و اجرا آن ها جدا نیست و کامپایل آن‌ها در زمان اجرا انجام می‌شود. وظیفه تفسیر برنامه‌های جاوا اسکریپت بر عهده مرورگر است.

مقدمات لازم برای شروع کار برنامه نویسی جاوا اسکریپت

برای شروع کار فعلاً نیازی به برنامه یا نصب و … نداریم و فقط با یک editor ساده مانند Nodepad ویندوز هم می توانیم کدهای خودمان را بنویسیم. خوب در ابتدا یک فولدر ایجاد کنید و در آن یک فایل متنی با نام مثلاً home و پسوند html. ایجاد کنید و درون آن کدهای Html زیر را قرار دهید. البته برای ادیت یا جایگذاری کد ها می توانید از ادیتور ساده ++Notepad استفاده کنید. در این مقاله از سری آموزش جاوا اسکریپت رایگان ما نیز از ادیتور ++Notepad استفاده کرده ایم.

<!DOCTYPE html>
<html>
 <head>
  <title>JavaScript Programstore</title>
 </head>
 <body>
  <p>Test for Programstore</p>
 </body>

</html>

اجازه دهید تا یک فایل CSS نیز به پروژه اضافه کنیم تا کمی به صفحه خودمان زینت دهیم. پس یک فایل دیگر با نام style.css ایجاد کنید و محتویات آن را مانند کد های زیر قرار دهید:

body {
  background-color: lightblue;
}

p {
  color: red;
  margin-left: 20px;
}

حالا پیوند خود را در کد HTML برای دسترسی به فایل CSS را با اضافه کردن کد زیر در قسمت head انجام دهید.

<link rel="stylesheet" href="style.css">

کدنویسی با HTML - CSS - JS

اگر با نحوه کدنویسی با HTML و CSS آشنایی ندارید می توانید مجموعه آموزش طراحی سایت با HTML و CSS مجموعه آموزشی فرادرس را تهیه و مطالعه کنید. در HTML کدهای جاوا اسکریپت بین تگ‌های <script> و </script> درج می‌شوند. به عنوان نمونه کد زیر را در نظر بگیرید:

<!DOCTYPE html>
<html>
 <head>
  <title>JavaScript Programstore</title>
  <link rel="stylesheet" href="style.css">

 </head>
 <body>
   <p id="demo"></p>

  <script>
    document.getElementById("demo").innerHTML = "My First JavaScript";
  </script>
 </body>
</html>

در مثال بالا همانطور که مشاهده می کنید در داخل تگ p چیزی نوشته نشده و فقط id مربوط به تگ p برابر با demo می باشد. در بین تگ های script کدی نوشتیم که با استفاده از document.getElementById و مشخص کردن demo به آن گفته شده در html عبارت My First JavaScript درج شود. پس ارتباط بین HTML و JavaScript بدین صورت با یک مثال نشان داده شد.

هدف ما در آموزش جاوا اسکریپت رایگان و کاربردی استفاده از یک فایل مجزای JavaScript است که تمامی تعریف ها در داخل آن فایل انجام گیرد و از طریق HTML فراخوانی شوند. پس برای این کار کافیست یک فایل با نام myScript.js در کنار دو فایل دیگر ایجاد کنید و محتویات آن را بصورت کد زیر قرار دهید.

function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}

حالا فایل html را نیز بصورت زیر تغییر دهید:

<!DOCTYPE html>
<html>
 <head>
  <title>JavaScript Programstore</title>
  <link rel="stylesheet" href="style.css">

 </head>
 <body>
  <p id="demo">A Paragraph.</p>

   <button type="button" onclick="myFunction()">Try it</button>

  <script src="myScript.js"></script>

</body>
</html>

خوب قبل از دیدن نتایج حتماً مشاهده می کنید که با استفاده از خاصیت src تگ script نام فایل جاوا اسکریپت “myScript.js” خودمان را به صفحه HTML لینک کرده ایم و یک تگ button تعریف کرده ایم و در خاصیت onclick آن تابع ()myFunction را فراخوانی کرده ایم. زمانی که تابع ()myFunction از طریق فایل myScript.js (فایلی که ()myFunction در آن تعریف شده است ) فراخوانی می شود شناسه مربوط به demo را در هر جای HTML که وجود داشته باشد تغییر خواهد داد.

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

تا این قسمت از آموزش با طرز نوشتن کدها و اینکه کدهای جاوا اسکریپت را در کجا بنویسیم؟ آشنا شدیم. وقت آن رسیده تا یک برنامه ساده جمع دو عدد را در جاوا اسکریپت کدنویسی کنیم. برای نوشتن این برنامه به نام تابع ها یا شناسه ها دست نمی زنیم ولی بعداً باید برای هر تابع یا شناسه یک نام بامصا بدهید ولی در اینجا چون مطالب آموزشی هست لازم به تغییر نیست. در فایل myScript.js کدهای زیر را جایگزین کنید:

function myFunction() {
     var x=10;
     var y=5;
     var z=x+y;
  document.getElementById("demo").innerHTML = z;
}

خوب اگر دقت کنید سه متغیر با کلمه کلیدی var تعریف کرده ایم و در خروجی شناسه demo حاصل جمع را قرار داده ایم. حال با همان فایل HTML خروجی بگیرید و Try it را بزنید عدد 15 را خواهید دید. به همین راحتی بدون نیاز به هیچ ابزاری و فقط با ابزار های موجود در سیستم عامل خود توانستیم اولین برنامه جاوا اسکریپت خود را بنویسیم. شاید در ذهن شما سوال باشد که انقدر کار برای نوشتن جمع دو عدد !!! عزیزان بهتر است بدانید در زبان های HTML و CSS توانایی انجام محاسبات و برنامه نویسی به شکل عامه وجود ندارد.

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

بطور کلی 3 روش برای اعلان یا تعریف متغیر در جاوا اسکریپت وجود دارد که عبارت است از:

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

با استفاده از کلمه کلیدی var می توان یک متغیر را اعلان یا تعریف کرد. البته اعلان یک متغیر در جاوا اسکریپت با زبان های برنامه نویسی مرسوم همچون جاوا و ++C کمی متفاوت است. مثلاً می توان با استفاده از var متغیری با یک نوع رشته ای ساخت و در ادامه برنامه از همان متغیر برای اعداد صحیح هم استفاده کرد. بطور کلی در برنامه نویسی، متغیرها محفظه یا ظرف‌هایی برای ذخیره داده ها (مقادیر) هستند. در مثال زیر، x، y، و z متغیرهایی هستند که با کلمه کلیدی var اعلان شده اند:

var x = 5;
var y = 6;
var z = x + y;

همچنین می توانید متغیرهای زیادی را در یک عبارت اعلان یا تعریف کنید که از یک نوع نباشند. عبارت را با var شروع کنید و متغیرها را با کاما جدا کنید:

var person = "John Doe", carName = "Volvo", price = 200;

دربرنامه نویسی، متغیرها اغلب بدون مقدار اعلان می شوند. متغیری که بدون مقدار اعلان شده باشد، مقدار آن تعریف نشده یا undefined خواهد بود. در مثال زیر متغیر carName دارای مقدار تعریف نشده یا undefined خواهد بود:

var carName;

به یاد داشته باشید که متغیر های جاوا اسکریپت باید با:

شروع شوند. از آنجایی که جاوا اسکریپت علامت دلار $ را به عنوان یک حرف در نظر می گیرد، شناسه های حاوی $ برای نام متغیرها، معتبر هستند:

var $$$ = "Hello World";
var $ = 2;
var $myMoney = 5;

کلمه کلیدی let و Const در ES6 (2015) یا نسخه 6 جاوا اسکریپت [4] معرفی شدند. دستور let مشابه دستور var است اما در متغیرهای تعریف شده با let را نمی توان مجدداً اعلان کرد و باید قبل از استفاده اعلان شوند و نسبت به بلوک استفاده شده حساس هستند. برای اطلاعات بیشتر در مورد JavaScript ES6 می توانید روی لینک زیر کلیک کنید.

انواع داده ها در جاوا اسکریپت

متغیرها در جاوا اسکریپت می توانند انواع مختلفی از داده ها و مقادیر را در خود نگه دارند مانند اعداد Number، رشته ها String، اشیاء Object:

let length = 16;                               // Number
let lastName = "Johnson";                      // String
let x = {firstName:"John", lastName:"Doe"};    // Object

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

var x = 16 + "Volvo";

خوب در کد بالا یک نوع داده رشته ای با مقدار “Volvo” به یک نوع عددی یعنی 16 اضافه شده است. سوال این است آیا این نوع کدنویسی درست است و آیا در برنامه خطا ایجاد می‌کند؟ بهتر است بدانید خطایی در برنامه ایجاد نخواهد شد و در این مورد جاوا اسکریپت اولویت را با string می داند یعنی عدد 16 را نیز به عنوان یک رشته در نظر خواهد گرفت. یعنی با مثال بالا به صورت زیر برخورد می کند:

var x = "16" + "Volvo";

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

let x;           // Now x is undefined
x = 5;           // Now x is a Number
x = "John";      // Now x is a String

در مثال بالا در ابتدا x بصورت بدون مقدار تعریف شده در خط بعدی همان x یا یک عدد صحیح مقداردهی شده و در نهایت x با مقدار رشته‌ای John مقدار‌دهی شده است. پس در مثال بالا به وضوح مشخص شده مقدار x بصورت داینامیک می تواند تغییر نوع کند.

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

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

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

نحو یا syntax دستور if بصورت زیر است:

if (condition) {
  //  block of code to be executed if the condition is true
}

به عنوان نمونه کد زیر را در نظر داشته باشید:

if (hour < 17) {
  greeting = "Hello";
}

اگر در شرط خود else داشته باشید می‌توانید مانند مثال زیر عمل کنید:

if (hour < 17) {
  greeting = "Hello";
} else {
  greeting = "How are you?";
}

و اگر نیاز باشد در else از شرط دیگری نیز استفاده کنید، می توانید از if else استفاده کنید:

if (time < 12) {
  greeting = "Hello";
} else if (time < 25) {
  greeting = "How are you?";
} else {
  greeting = "Hi";
}

در صورت داشتن شرط های زیاد می توانید از دستور switch استفاده کنید:

switch (day) {
  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";
}

برای اعمال شرط های مرکب هم در جاوا اسکریپ از && و || استفاده می کنند.

if (hour < 10 && hour >20) {
  greeting = "Hi";
}

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

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

let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";

برای ذخیره کردن این مقادیر می توان از یک آرایه استفاده کرد یعنی به جای استفاده از چند متغیر برای ذخیره کردن همه آنها را بصورت برداری در یک متغیر ذخیره می کنیم:

const cars = ["Saab", "Volvo", "BMW"];

برای استفاده از هر عنصر آرایه نیز با توجه به اندیس آرایه، می توان از آن استفاده کرد. اندیس آرایه‌ها در جاوا اسکریپت از 0 شروع می‌شود.

const cars = ["Saab", "Volvo", "BMW"];
let x = cars[0];    // x = "Saab"

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

بگذارید با یک مثال شروع کنیم. در دنیای واقعی، ماشین Car یک شیء یا object است. یک ماشین دارای ویژگی هایی مانند نام، وزن، رنگ و غیره است. تمامی خودروها دارای خواص یکسانی هستند، اما ارزش یا مقادیر خصوصیت‌ها یا ویژگی‌ها در خودروهای مختلف متفاوت است. قبلاً یاد گرفتیم که متغیرهای جاوا اسکریپت محفظه هایی برای مقادیر داده هستند. این کد یک مقدار ساده (Fiat) را به متغیری به نام خودرو اختصاص می دهد:

let car = "Fiat";

می توان گفت اشیاء نیز متغیر هستند ولی برخلاف متغیرها می توانند مقادیر مختلفی را در خود جای بدهند. در کد زیر مقادیری همچون (Fiat, 500, white) را به متغیری به نام car اختصاص داده‌ایم:

const car = {type:"Fiat", model:"500", color:"white"};

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

مقادیر به صورت جفت name:value نوشته می شوند (نام و مقدار با دو نقطه از هم جدا می شوند). حال براحتی می توان به ویژگی های تعریف شده در شیء car دسترسی پیدا کرد:

const car = {type:"Fiat", model:"500", color:"white"};

let x=car.type;

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

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

برای هر کدام از این نوع مثال هایی را در ادامه خواهیم آورد. ابتدا از دستور for شروع می کنیم:

const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];

let text = "";
for (let i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

اگر cars یک متغیر آرایه ای از رشته ها باشد خیلی راحت با استفاده از دستور for می توان در یک حلقه عناصر آن را به text الحاق کرد.

دستور for/in در جاوا اسکریپت، یک عبارت را  از طریق خصوصیات یک شیء تکرار می‌کند. به مثال زیر توجه کنید:

const person = {fname:"John", lname:"Doe", age:25};

let text = "";
for (let x in person) {
  text += person[x];
}

در اینجا هر objectی که برای person در نظر گرفته شده به عنوان یک دور در تکرار در متغیر x قرار خواهد گرفت و در نهایت برای شما عبارت John Doe 25 چاپ خواهد شد.

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

const cars = ["BMW", "Volvo", "Mini"];

let text = "";
for (let x of cars) {
  text += x;
}

و خروجی زیر را در نهایت به شما خواهد داد:

BMW
Volvo
Mini

دستورات while و do while نیز مفهومی مانند حلقه For دارند فقط مقدارهی اولیه و بروزرسانی در خارج از پرانتز () نوشته می‌شوند. فرق اساسی while و do while در جاوا اسکریپت نیز به مانند دیگر زبان های برنامه نویسی در حداقل یک بار اجرا شدن دستورات در داخل do while است.

while (i < 10) {
  text += "The number is " + i;
  i++;
}
do {
  text += "The number is " + i;
  i++;
}
while (i < 10);

تابع در جاوا اسکریپت

تابع در جاوا اسکریپت نیز به مانند دیگر زبان‌های برنامه‌نویسی قطعه کدی است که برای انجام عملی طراحی شده است. یک تابع جاوا اسکریپت زمانی اجرا می شود که “چیزی” آن را فراخوانی یا call می کند. نحو یا syntax تعریف یک تابع در جاوا اسکریپت به صورت زیر است:

function name(parameter1, parameter2, parameter3) {
  // code to be executed
}

یک تابع جاوا اسکریپت با کلمه کلیدی function، به دنبال یک نام و به دنبال آن پرانتز () تعریف می شود. نام توابع می تواند شامل حروف، اعداد، زیرخط و علامت دلار باشد (همان قوانین متغیرها). پرانتز ممکن است شامل نام پارامترهایی باشد که با کاما از هم جدا شده اند (پارامتر1، پارامتر2، …) و کدی که باید توسط تابع اجرا شود ، در داخل {} قرار می گیرد. به عنوان مثال:

function myFunction(p1, p2) {
  return p1 * p2;   // The function returns the product of p1 and p2
}

پارامترهای تابع در داخل پرانتز (p1,p2) در تعریف تابع ذکر شده است.  آرگومان های تابع مقادیری هستند که تابع هنگام فراخوانی دریافت می کند مثلاً در هنگام فراخوانی عدد 10 و 20 به عنوان آرگومان ارسال می شوند. در داخل تابع، آرگومان ها (پارامترها) به عنوان متغیرهای محلی رفتار می کنند و پس از عملیات انجام شده مقدار آن برگشت داده می شود.

let x = myFunction(4, 3);   // Function is called, return value will end up in x

function myFunction(a, b) {
  return a * b;             // Function returns the product of a and b
}

در مثال بالا قرار است مقدار x برابر با نتیجه فراخوانی تابع myFunction باشد همانطور که مشاهده می کنید آرگومان های این تابع برابر با 4 و 3 است پس در خط بعدی این اعداد در تابع به جای a و b مقدار دهی می شوند و در نهایت نتیجه 12 را return یا برگشت می دهند که در نهایت همان مقدار 12 در x جایگذاری می شود.

حالا شاید این سوال پیش بیاید که چرا از توابع استفاده کنیم؟

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

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

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

در پست مربوط به آموزش جاوا اسکریپت رایگان و کاربردی، شما را با طرز برنامه نویسی جاوا اسکریپت و نحوه استفاده آن در برنامه نویسی تحت وب آشنا کردیم. این آموزش برای شروع و راه اندازی برنامه های ساده بسیار مفید و کاربردی خواهد بود و دید کلی شما را به برنامه نویسی به وسیله جاوا اسکریپت باز خواهد کرد. اگر تصمیم به یادگیری کامل این زبان دارید پیشنهاد می کنیم از آموزش های پیشرفته ای که در سایت های معتبری همچون فرادرس [9] بصورت فیلم آموزشی وجود دارد حتماً استفاده کنید. در سایت پی استور سعی خواهیم کرد آموزش های بهتری را بخش به بخش و مفصل تر، از زبان برنامه نویسی جاوا اسکریپت [10] را برای شما عزیزان آماده کنیم. در پایان منتظر نظرات و پیشنهادات شما عزیزان هستیم. موفق و پیروز باشید.