1. مقدمه
   • تاریخچه
   • جاواسکریپت چه کارهایی می‌تواند انجام دهد؟
   • برنامه یا اسکریپت
   • شیءگرا
   • مدل آبجکت در بروزر
   • رویدادگرا
   • چگونه جاواسکریپت بنویسیم؟
2. سینتکس (Syntax)
   • قواعد دستور زبان – Syntax
   • آغاز کار در جاواسکریپت
   • آبجکت window
   • آبجکت console
   • آبجکت document
3. فرم (Forms)
   • form
   • button
   • input
   • label
4. دیتا (Data)
   • نگهداری دیتا
     • متغیر
     • ثابت
   • انواع دیتا – Data Types
     • ساده (Primitive)
       • عدد (Numbers)
       • رشته (Strings)
       • منطقی (Boolean)
     • مرکب (Composite)
       • شیء (Objects)
       • آرایه (Arrays)
       • تابع (Functions)
     • بی‌ارزش (Trivial)
       • تهی (null)
       • نامعین (undefined)
   • تبدیل دیتا
5. اکسپرشن (Expressions)
   • آپریتورهای استرینگ
   • آپریتورهای حساب
   • آپریتورهای بولین
   • آپریتورهای مقایسه‌ای
   • الویت آپریتورها
   • آبجکت Number
6. کاندیشن۱ (Conditions)
   • تِرنِری – Ternary (?)
   • شرط if
   • اسکوپ – Scope
   • آبجکت Math
7. کاندیشن۲ (Conditions)
   • سوئیچ – Switch
   • آبجکت String
8. فانکشن (Functions)
   • نوع ۱
   • نوع ۲
9. ایونت (Events)
   • روش ۱
   • روش ۲
   • روش ۳
   • ایونت‌های ماوس
10. لوپ (Loops)
    • حلقه do
    • حلقه while
    • حلقه for
    • break
    • continue
11. آرایه (Arrays)
    • تعریف
    • فانکشن
12. سلکت

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

برای سرچ در صفحه و سلکت بخشی از آن چندین متد وجود دارد.

• getElementById
• getElementsByName
• getElementsByTagName
• getElementsByClassName
• querySelector
• querySelectorAll

یافتن المنت با id

متد getElementById پرکاربردترین متد جاواسکریپت است. در فایل HTML هر المنت می‌تواند id داشته باشد. و همیشه id باید در هر فایل یکتا باشند. به زبان دیگر در یک فایل HTML دو المنت نمی‌توانند یک id مشترک داشته باشند. بنابر این هر getElementById تنها یک المنت را می‌گیرد.

<h1 id="hi">Hello World!</h1>

const hi = document.getElementById('hi');

یافتن المنت‌ها با اتریبیوت name

متد getElementsByName بر اساس اتریبیوت name در المنت‌های HTML عمل می‌کند. در فایل HTML هر المنت می‌تواند یک name داشته باشد. ولی name لازم نیست، یکتا باشند. یعنی در یک فایل HTML دو یا چند المنت می‌توانند یک name یکسان داشته باشند. و getElementsByName یک آرایه از المنت‌ها را می‌گیرد.

به حرف s در Elements توجه کنید. که همه المنت‌ها، با آن name را شامل می‌شود. این آرایه از اندیس صفر برای اولین المنت شروع می‌شود و به تعداد المنت‌های با آن name ادامه پیدا می‌کند.

<input type="text" name="firstname">

const fname = document.getElementsByName('firstname')[0];

یافتن المنت‌ها با تگ HTML

متد getElementsByTagName بر اساس Tag المنت‌های HTML جستجو می‌کند. در فایل HTML هر المنت یک Tag دارد. و getElementsByTagName یک آرایه از المنت‌ها را می‌گیرد.

به حرف s در Elements توجه کنید. که همه المنت‌ها، درون آن Tag را شامل می‌شود. این آرایه از اندیس صفر برای اولین المنت شروع می‌شود و به تعداد المنت‌های با آن Tag ادامه پیدا می‌کند.

<h1>Hello World!</h1>

const hi = document.getElementsByTagName('h3')[0];

یافتن المنت‌ها با کلاس

متد getElementsByClass بر اساس Class المنت‌های HTML جستجو می‌کند. در فایل HTML هر المنت می‌تواند یک Class داشته باشد. و getElementsByClass یک آرایه از المنت‌ها را می‌گیرد.

به حرف s در Elements توجه کنید. که همه المنت‌ها، که دارای آن Class هستند، را شامل می‌شود. این آرایه از اندیس صفر برای اولین المنت شروع می‌شود و به تعداد المنت‌های با آن class ادامه پیدا می‌کند.

<h1 class="title">Hello World!</h1>

const hi = document.getElementsByClass('title')[0];

یافتن المنت با سلکتور CSS

متد querySelector بر اساس سلکتور CSS المنت‌ها در HTML جستجو می‌کند. و querySelector اولین المنت که با شرایط سلکتور هماهنگ باشد را می‌گیرد.

<h1 class="title">Hello World!</h1>

const hi = document.querySelector('h1.title');

یافتن المنت‌ها با سلکتور CSS

متد querySelectorAll بر اساس سلکتور CSS المنت‌ها در HTML جستجو می‌کند. و querySelectorAll یک آرایه از المنت‌هایی که با شرایط سلکتور هماهنگ باشد را می‌گیرد.

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

<h1 class="title">Hello World!</h1>

const hi = document.querySelectorAll('h1.title')[0];

آرایه (Array) چندین متغیر با یک نام است. هر یک از متغیرهای درون آرایه با یک شماره که به آن ایندکس (Index) می‌گوییم؛ از یکدیگر متمایز می‌شوند. هر یک از متغیرهای درون آرایه را اِلمنت‌، می‌نامند.

قواعد نام گذاری آرایه

• قواعد نامگذاری آرایه همانند متغیر است.
• ایندکس درون […] بِرَکِت Square Bracket نوشته می‌شود.
• ایندکس همیشه از عدد صفر آغاز می‌شود.

مراحل استفاده از آرایه

• Declare: تعیین نام آرایه و اختصاص فضا در حافظه
• Assignment: نوشتن مقدار در آن
• Access: خواندن مقدار از آن

روش‌های استفاده از آرایه

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Access
alert(color[0]);    // red
alert(color[1]);    // gold
alert(color[2]);    // olive
alert(color[3]);    // beige
alert(color[4]);    // khaki

// Declare
let color = [];

// Assignment
color[0] = "red";
color[1] = "gold";
color[2] = "olive";
color[3] = "beige";
color[4] = "khaki";

// Access
alert(color[0]);    // red
alert(color[1]);    // gold
alert(color[2]);    // olive
alert(color[3]);    // beige
alert(color[4]);    // khaki

---

تغییر مقدار یک المنت

شما همیشه می‌توانید مقدار درون هر یک از المنت‌های آرایه را تغییر دهید.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Access
alert(color[2]);    // olive

// Change
color[2] = "lime";

// Access
alert(color[2]);    // lime

---

افزودن یک المنت

شما همیشه می‌توانید یک المنت، به انتهای آرایه بیفزایید.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige"];

// Access
alert(color[4]);    // undefined 

// Add Element
color[4] = "khaki";

// Access
alert(color[4]);    // khaki

---

arr.length

تعداد المنت‌های آرایه را ارائه می‌کند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
color[5] = "lime";

// Count
alert(color.length);    // 6

---

حفره تعریف نشده

افزودن المنت می‌تواند در بین آرایه حفره تعریف نشده (undefined holes) ایجاد کند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
color[7] = "lime";

// Count
alert(color.length);    // 8

---

arr.push(elm1, elm2, …)

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

این فانکشن تعداد جدید المنت‌های آرایه را برمی‌گرداند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
let n = color.push("lime");

// Access
alert(n);    // 6
alert(color) // red, gold, olive, beige, khaki, lime

---

arr.pop( )

آخرین المنت آرایه را حذف می‌کند و مقدار آن را برمی‌گرداند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
let c = color.pop();

// Access
alert(c);    // khaki
alert(color) // red, gold, olive, beige

---

arr.shift( )

اولین المنت آرایه را حذف می‌کند و مقدار آن را برمی‌گرداند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
let c = color.shift();

// Access
alert(c);    // red
alert(color) // gold, olive, beige, khaki

---

arr.unshift(elm1, elm2, …)

یک یا چند المنت به ابتدای آرایه می‌افزاید. و تعداد جدید المنت‌های آرایه را برمی‌گرداند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki"];

// Count
alert(color.length);    // 5

// Add element
let n = color.unshift("lime");

// Access
alert(n);    // 6
alert(color) // lime, red, gold, olive, beige, khaki

---

arr.splice(start, delCount, elm1, elm2, …)

یک یا چند المنت در میان آرایه حذف یا اضافه می‌کند. المنت‌های حذف شده را برمی‌گرداند.

// Declare & Assignment
let color1 = ["red", "gold", "olive", "beige", "khaki", "lime"];

// Splice
let color2 = color1.splice(3);

// Access
alert(color1);    // red, gold, olive
alert(color2);    // beige, khaki, lime

// Declare & Assignment
let color1 = ["red", "gold", "olive", "beige", "khaki", "lime"];

// Splice
let color2 = color1.splice(3,2);

// Access
alert(color1);    // red, gold, olive, lime
alert(color2);    // beige, khaki

// Declare & Assignment
let color1 = ["red", "gold", "olive", "beige", "khaki", "lime"];

// Splice
let color2 = color1.splice(3,2, "pink", "blue", "tan");

// Access
alert(color1);    // red, gold, olive, pink, blue, tan, lime
alert(color2);    // beige, khaki

// Declare & Assignment
let color1 = ["red", "gold", "olive", "beige", "khaki", "lime"];

// Splice
let color2 = color1.splice(3, 0, "pink", "tan");

// Access
alert(color1);  // red, gold, olive, pink, tan, beige, khaki, lime
alert(color2);  // []

---

arr.concat(arrX, arrY, …)

دو یا چند آرایه را به هم پیوند می‌دهد و یک آرایه برمی‌گرداند.

// Declare & Assignment
let color = [];
let color1 = ["red", "gold", "olive"];
let color2 = ["beige", "khaki", "lime"];

color = color1.concat(color2);

// Access
alert(color1);    // red, gold, olive
alert(color2);    // beige, khaki, lime
alert(color);    // red, gold, olive, beige, khaki, lime

---

arr.sort( )

المنت‌های یک آرایه را به ترتیب الفبا، مرتب می‌کند. و المنت‌های تعریف نشده را حذف می‌کند.

// Declare & Assignment
let color = ["red", "gold", "olive", "beige", "khaki", "lime"];

color.sort();

// Report
alert(color);  // beige, gold, khaki, lime, olive, red

---

arr.sort(function(a, b) {…})

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

• اگر function(a, b) < 0 بود؛ a قبل از b
• اگر function(a, b) = 0 بود؛ جای a و b تغییر نمی‌کند.
• اگر function(a, b) > 0 بود؛ a بعد از b

اگر بخواهید یک مجموعه از اعداد را از کوچک به بزرگ sort کنید می‌توانید از فانکشن زیر استفاده نمایید.

const compare = function(a, b) {

  if (a < b) { return -1; }

  if (a > b) { return 1;  }

  // a = b
  return 0;
}

// Short form
const compare = function(a, b) {
  return a - b;
}

// Arrow form
const compare = (a, b) => a - b;

این فانکشن را می توانید مستقیما در sort تعریف کنید.

// Declare & Assignment
let num = [4, 2, 5, 1, 3];

num.sort((a, b) => a - b);

// Report
alert(num);  // 1, 2, 3, 4, 5

---

arr.filter(function(value, index) {…})

با المنت‌هایی که تست را پاس کنند، یک آرایه جدید می سازد.

• متد filter یک فانکشن را به عنوان پارامتر می‌گیرد.
• این فانکشن دو پارامتر می‌تواند داشته باشد. اولی مقدار المنت و دومی ایندکس آن.
• باید این فانکشن مقدار true یا false را برگرداند.

مثال زیر المنت‌های فرد را حذف می‌کند.

// Declare & Assignment
let num = [4, 2, 5, 1, 3];

let result = num.filter(val => val % 2 == 0);

// Report
alert(result);  // 4, 2

---

arr.map(function(value, index) {…})

یک فانکشن را روی همه المنت‌های آرایه اجرا می‌کند و آرایهٔ جدید می‌سازد.

• متد map یک فانکشن را به عنوان پارامتر می‌گیرد.
• این فانکشن دو پارامتر می‌تواند داشته باشد. اولی مقدار المنت و دومی ایندکس آن.
• مقدار بازگشتی این فانکشن در آرایه جدید قرار می‌گیرد.

مثال زیر مقدار هر المنت‌ را دو برابر می‌کند.

// Declare & Assignment
let num = [4, 2, 5, 1, 3];

let result = num.map(val => val * 2);

// Report
alert(result);  // 8, 4, 10, 2, 6

تمرین ۱

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• تنها فایل script.js را می‌توانید تغییر دهید.
• ابتدا تعدادی عدد را بگیرد سپس میانه آنها را محاسبه و گزارش کند. (تعداد اعداد از پیش معلوم نیست.)

حلقه تکرار – Iterative Loop

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

جاواسکریپت نیز مانند بسیاری از زبان‌های دیگر می‌تواند به هنگام اجرا، از موس، کیبرد یا … اطلاعاتی را دریافت کند و بر اساس آن بی درنگ (Real-time) عملیاتی را انجام دهد.

واژه ایونت (Event) به معنای رویداد است. هرگاه بر روی یک آبجکت چیزی رخ دهد، مثلا با موس روی آن کلیک شود، یا دکمه‌ای از کیبرد زده شود؛ آن آبجکت، یک سیگنال می‌فرستد. و به وسیله آن نشان می‌دهد، که چه چیزی روی داده است. در جاواسکریپت به آن سیگنال، ایونت گفته می‌شود. صدها نوع ایونت وجود دارد که شما می‌توانید از آنها در پروژه خود استفاده کنید. ایونت‌های ماوس، کیبرد، تاچ، شبکه … که در اینجا نمی‌توان به همه آنها پرداخت.

چند نمونه از ایونت‌های پرکاربرد موس:

• click – کلیک چپ
• dblclick – دابل کلیک
• contextmenu – کلیک راست
• mousedown / mouseup – هنگامی که دکمه ماوس فشرده / رها می‌شود.
• mouseenter / mouseleave – هنگامی که نشانگر ماوس بر روی آبجکت وارد / خارج می‌شود.
• mousemove – هنگامی که نشانگر ماوس جابجا می‌شود.

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

• مختصات مکان کلیک
• زمان دقیق کلیک
• کلیدهای همراه (Shift یا Ctrl یا Alt) کلیک
• …

واژه هَندِل (Handle) به معنای گوش به زنگ بودن و واکنش مناسب نشان دادن است. گاهی رسیدگی کردن یا مدیریت کردن نیز ترجمه می‌شود. در برنامه نویسی، به فانکشنی که هنگام رخ دادن یک ایونت اجرا می‌شود، Event Handler می‌گویند.

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

• HTML Attribute
• Element Property
• Element Method

هر کدام از این روش‌ها کاربرد ویژه‌ای دارد. و در جای خودش باید به کار گرفته شود.

---

HTML Attribute

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

<tag onclick="myFunc()">...</tag>        

const myFunc = function() {
    ...
};

تنها برای نوشتن کدهای کوتاه، مانند نمونه زیر، مناسب است.

<tag onclick="alert('Click!')">...</tag>        

---

Element Property

در همه آبجکت‌ها، به ازای هر ایونت، یک پراپرتی (برای هندل کردن آن ایونت) وجود دارد.

myElem.onclick = function() { ... };

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

myElem.onclick = myFunc1;
myElem.onclick = myFunc2;    // replaces myFunc1

---

Element Method

در این روش از متد addEventListener استفاده می‌شود.

myElem.addEventListener("click", myFunc);

این راه از راه‌های قبلی کمی پیچیده‌تر است. اما در عوض توانایی‌های بیشتری دارد. برای نمونه:

با یک ایونت چند فانکشن می‌تواند اجرا شود.

myElem.addEventListener("click", myFunc1);
myElem.addEventListener("click", myFunc2);

در بین برنامه با کمک متد removeEventListener می‌توان آن را از کار انداخت.

myElem.addEventListener("click", myFunc);
...
myElem.removeEventListener("click", myFunc);

---

ایونت: نخستین آرگومان

در همه روش‌ها فانکشن می‌تواند ایونت را به عنوان نخستین آرگومان دریافت کند. و از این راه در درون فانکشن شما به پراپرتی‌های ایونت دسترسی دارید.

myElem.onclick = function(e) { ... };

// Or

myElem.addEventListener("click", function(e) { ... });

---

ایونت‌ها

Events Reference

ایونت‌های ماوس

پراپرتی‌های ایونت ماوس

• مکان
  • screenX, screenY: نسبت به مانیتور
  • pageX, pageY: نسبت به صفحه
  • clientX, clientY: نسبت به بروزر
  • offsetX, offsetY: نسبت به المنت
  • movementX, movementY: نسبت به جای قبلی
• دکمه ماوس
  • چپ: button = 0
  • میانی: button = 1
  • راست: button = 3
• کیبرد
  • shiftKey: true | false
  • ctrlKey: true | false
  • altKey: true | false
  • metaKey: true | false

مثال click

<section id="in-box"></section>
<section id="out-box"></section>

const inBox = document.getElementById("in-box");
const outBox = document.getElementById("out-box");

inBox.addEventListener('click', function(e) {
    let msg = "<p><b>click</b><hr>"
    msg += "screenX=" + e.screenX + "/screenY=" + e.screenY + "<br>";
    msg += "pageX  =" + e.pageX   + "/pageY  =" + e.pageY   + "<br>";
    msg += "clientX=" + e.clientX + "/clientY=" + e.clientY + "<br>";
    msg += "offsetX=" + e.offsetX + "/offsetY=" + e.offsetY + "<br>";
    msg += "<br>";
    msg += "altKey   = " + e.altKey   + "<br>";
    msg += "ctrlKey  = " + e.ctrlKey  + "<br>";
    msg += "shiftKey = " + e.shiftKey + "<br>";
    msg += "metaKey  = " + e.metaKey  + "<br>";
    msg += "<br>";
    msg += "button = " + e.button + "</p>";
    outBox.innerHTML = msg;
});

مثال mousedown / mouseup

<section id="in-box"></section>
<section id="out-box"></section>
                

const inBox = document.getElementById("in-box");
const outBox = document.getElementById("out-box");
let msg = "";

const log = function(e) {
    msg += "<p><b>" + e.type + "</b>";
    msg += " button = " + e.button + "</p>";
    outBox.innerHTML = msg;
};

inBox.addEventListener('click', log);
inBox.addEventListener('dblclick', log);
inBox.addEventListener('contextmenu', log);
inBox.addEventListener('mousedown', log);
inBox.addEventListener('mouseup', log);

مثال mouseenter / mouseleave

<section id="in-box"><div></div></section>
<section id="out-box"></section>

const inBox = document.getElementById("in-box");
const outBox = document.getElementById("out-box");
let msg = "";

const log = function(e) {
    msg += "<p>" + e.type + "</p>";
    outBox.innerHTML = msg;
};

inBox.addEventListener('mouseenter', log);
inBox.addEventListener('mouseleave', log);

مثال mousemove

<section id="in-box"></section>
<section id="out-box"></section>

const inBox = document.getElementById("in-box");
const outBox = document.getElementById("out-box");

const log = e => {
    let msg = "<p><b>mousemove</b><hr>";
    msg += "offsetX = " + e.offsetX + "<br>";
    msg += "offsetY = " + e.offsetY + "</p>";

    outBox.innerHTML = msg;
};

inBox.addEventListener('mousemove', log);

تمرین ۱

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• تنها فایل script.js را می‌توانید تغییر دهید.
• در صفحه هر جا mousedown کردید، توپ به آنجا منتقل شود.

اختیاری: در تمرین بالا، هنگامیکه mousedown است به دنبال ماوس حرکت کند تا mouseup شود.