شرط – Conditions

در جاواسکریپت شرط را به سه گونه می‌توان نوشت.

• ?
• if
• Switch

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

تِرنِری – Ternary (?)

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

condition ? valueTrue : valueFalse

let x = 5;

let a = (x > 0) ? 10 : 20;        // a = 10

let b = (x < 0) ? 10 : 20;        // b = 20

مثال

در مثال زیر یک عدد را می‌گیرد و مشخص می‌کند مثبت است یا منفی.

<input type="text" id="in-box">
<button id="btn">OK</button>        
<h1 id="out-box"></h1>    

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

btn.onclick = function() {

    let numVal = inBox.value;

    let numType = (numVal < 0) ? "negative" : "positive";

    outBox.innerHTML = numType;
}

مثال

در مثال زیر یک تصویر SVG وجود دارد که از دو لایه تشکیل شده است. لایهٔ زیر، نقره‌ای و لایهٔ رو، زرد است. با کلیک کردن روی کلید، یک بار در میان، لایهٔ رو (که زرد رنگ است)، پنهان یا پیدا می‌شود.

<g id="on"> ... </g>
...
<div id="power">Power</div>

const on = document.getElementById("on");
const power = document.getElementById("power");

power.onclick = function() {

    let light = on.style.display;

    light = (light == "none") ? "block" : "none";

    on.style.display = light;

}

---

---

if else

if (Condition) { … }

let x = 5;
let a;

if (x < 0) {
    a = 1;        // if true
}

// a = undefined

if (x > 0) {
    a = 1;       // if true
}

// a = 1

مثال

<input type="text" id="in-box">
<button id="btn">OK</button>
<h1 id="out-box"></h1>

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

btn.onclick = function() {

    let numVal = inBox.value;

    if (numVal < 0) {

        outBox.innerHTML = "Negative";

    }
}

if (Condition) { … } else { … }

let x = 5;
let a;

if (x > 0) {
    a = 1;        // if true
} else {
    a = -1;       // if false
}

// a = 1

if (x < 0) {
    a = 1;         // if true
} else {
    a = -1;        // if false
}

// a = -1

مثال

<input type="text" id="in-box">
<button id="btn">OK</button>        
<h1 id="out-box"></h1>    

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

btn.onclick = function() {

    let numVal = inBox.value;

    if (numVal < 0) {

        outBox.innerHTML = "Negative";

    } else {

        outBox.innerHTML = "Positive";

    }
}

if (Condition1) { … } else if (Condition2) { … } else { … }

let x = 5;
let a;

if (x > 0) {
    a = 1;         // if condition1 is true
} else if (x < 0) {
    a = -1;        // if condition2 is true
} else {
    a = 0;         // if all is false
}

// a = 1

مثال

<input type="text" id="in-box">
<button id="btn">OK</button>        
<h1 id="out-box"></h1>    

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

btn.onclick = function() {

    let numVal = inBox.value;

    if (numVal < 0) {

        outBox.innerHTML = "Negative";

    } else  if (numVal > 0) {

        outBox.innerHTML = "Positive";

    } else {

        outBox.innerHTML = "Zero";

    }
}

---

---

تمرین ۱

• • این فایل را دانلود کنید.
  • آن را در فولدر js1 باز کنید.
  • تنها فایل script.js را می‌توانید تغییر دهید.
  • نام و  پسورد را بگیرد و در صورت نادرست بودن هرکدام زیر خودش پیام مناسب ظاهر شود.

---

اسکوپ – Scope

• اسکوپ به معنای محدوده است. (تلسکوپ و مایکروسکوپ، ترکیبی از همین کلمه است.)
• اسکوپ، به بخشی از کد می‌گویند که بین دو علامت {…} قرار گرفته است. (نام این علامت کِرلی بِرَکِت – Curly Bracket است.)
• در جاواسکریپت توجه به اسکوپ، بسیار مهم است. چون اگر یک متغیر، در اسکوپی تعریف شده باشد، بیرون آن کار نمی‌کند.

گلوبال – Global

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

let fruit = "apple";
alert(fruit);          // apple

if (true) {
    alert(fruit);      // apple
}

لوکال – Local

اگر متغیر درون یک اسکوپ تعریف شده باشد، تنها درون همان اسکوپ قابل استفاده است. و به آن، لوکال یا محلی می گویند.

if (true) {
    let fruit = "apple";
    alert(fruit);      // apple
}

alert(fruit);          // undefined

متغیرهای همنام در اسکوپ‌های متفاوت همانند دو متغیر جداگانه کار می‌کنند.

let fruit = "apple";
alert(fruit);          // apple

if (true) {
    let fruit = "orange";
    alert(fruit);      // orange
}

alert(fruit);          // apple

مقدار هر متغیر بیرونی در داخل اسکوپ، در دسترس است و می‌توان آن را تغییر داد.

let fruit = "apple";
alert(fruit);          // apple

if (true) {
    fruit = "orange";
    alert(fruit);      // orange
}

alert(fruit);          // orange

---

---

Math

آبجکت Math با مقادیر عددی کار می‌کند.

Math.PI = 3.141592653589793

<input type="text" id="in-box">
<button id="btn">OK</button>        
<h1 id="out-box"></h1>    

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

btn.onclick = function() {

    let d = inBox.value;

    let c = d * Math.PI;

    outBox.innerHTML = c;
}

Math.random( )

یک عدد رَندوم یا تصادفی بین صفر و یک [0,1) می‌دهد.

<button id="btn">OK</button>        
<h1 id="out-box"></h1>    

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

btn.onclick = function() {
    
    let r = Math.random();
    
    outBox.innerHTML = r;
}

Math.trunc(x)

بخش صحیح عدد را برمی‌گرداند.

<input type="text" id="in-box">
<button id="btn">OK</button>        
<h1 id="out-box"></h1>    

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

btn.onclick = function() {
    let num = inBox.value;

    let i = Math.trunc(num);

    outBox.innerHTML = i;
}

 

Math.floor(x)

نزدیکترین عدد صحیح کوچکتر یا مساوی x را برمی‌گرداند.

<input type="text" id="in-box">
<button id="btn">OK</button>        
<h1 id="out-box"></h1>    

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

btn.onclick = function() {
    let num = inBox.value;

    let i = Math.floor(num);

    outBox.innerHTML = i;
}

Math.ceil( )

نزدیکترین عدد صحیح بزرگتر یا مساوی x را برمی‌گرداند.

<input type="text" id="in-box">
<button id="btn">OK</button>        
<h1 id="out-box"></h1>    

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

btn.onclick = function() {
    let num = inBox.value;

    let i = Math.ceil(num);

    outBox.innerHTML = i;
}

Math.round(x)

نزدیکترین عدد صحیح به x را برمی‌گرداند.

<input type="text" id="in-box">
<button id="btn">OK</button>        
<h1 id="out-box"></h1>    

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

btn.onclick = function() {
    let num = inBox.value;

    let i = Math.round(num);

    outBox.innerHTML = i;
}

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

x	-1	-0.9	-0.5	-0.1	0	0.1	0.5	0.9	1
trunc(x)	-1	0	0	0	0	0	0	0	1
floor(x)	-1	-1	-1	-1	0	0	0	0	1
ceil(x)	-1	0	0	0	0	1	1	1	1
round(x)	-1	-1	0	0	0	0	1	1	1

---

---

تمرین ۲

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• تنها فایل script.js را می‌توانید تغییر دهید.
• هنگامیکه روی یکی از تصاویر زیر کلیک می کنید نام آن زیر User نوشته می شود.
• کامپیوتر به صورت رندوم یکی را انتخاب می کند و نام آن را زیر Computer می نویسد.
• و در پایان برنده یا بازنده شدن کاربر در وسط صفحه نوشته می‌شود.

اِکسپرِشن – Expression

تصویر زیر را ببینید و با چند اصطلاح آشنا شوید.

• اِکسپرِشن (Expression): قطعه‌ای از کد که عملیاتی یا محاسباتی را انجام می دهد تا یک مقدار را بدست آورد.
• آپِرِیتور (Operator): یا عملگر مثل جمع یا ضرب عملی است که روی مقادیر انجام می‌گیرد و نتیجه‌ای به دست می‌آید.
• آپِرَند (Operand): یا عملوند مقادیر اولیه‌ای هستند که عملیات روی آنها انجام می‌شود.

آپریتورهای استرینگ

پیوستن

a = "my" + "String"; // myString    Concatenate

مقادیر با نوع متفاوت را به استرینگ تبدیل می‌کند.

a = "5" + 2;            // "52"

a = 2 + "5";            // "25"

a = "5" + 2 + 1;        // "521"

a = 2 + 1 + "5";        // "35"

a = true + "5";         // "true5"

a = false + "5";        // "false5"

a = null + "5";         // "null5"

a = undefined + "5";    // "undefined5"

a = Infinity + "5";     // "Infinity5"

a = NaN + "5";          // "NaN5"

---

---

تمرین ۱

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• تنها فایل script.js را می‌توانید تغییر دهید.
• هرگاه روی دکمه + کلیک شد، مقدار دو خانه اول و دوم را پشت هم در خانه سوم بنویسد.

---

آپریتورهای حساب

ساده

a = 1 + 2;    // 3    Addition

a = 5 - 2;    // 3    Subtraction

a = 2 * 3;    // 6    Multiplication

a = 6 / 2;    // 3    Division

a = 5 % 3;    // 2    Modulus

a = 2 ** 3;   // 8   Exponentiation    

مقادیر با نوع متفاوت را به عدد تبدیل می‌کند.

a = +"1" + +"2";      // 3

a = "5" - "3";        // 2

a = "2" * "3";        // 6

a = "6" / "2";        // 3

a = "5" % "3";        // 2

a = "2" ** "3";       // 8

a = true + true;      // 2

a = 3 - true;         // 2

a = false * 5;        // 0

a = 5 ** false;       // 1

a = 2 + null;         // 2

a = 2 + undefined;    // NaN

---

---

تمرین ۲

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

---

تک آپرند

a = 2;    ++a;    // a = 3;    a = a + 1;    Pre-Increment 

a = 2;    a++;    // a = 3;    a = a + 1;    Post-Increment 

a = 2;    --a;    // a = 1;    a = a - 1;    Pre-Decrement

a = 2;    a--;    // a = 1;    a = a - 1;    Post-Decrement

//=========================================================

a = 2;    b = 5 + ++a;    // a = 3; b = 8;    b = 5 + (a + 1);

a = 2;    b = 5 + a++;    // a = 3; b = 7;    b = 5 + a;

a = 2;    b = 5 + --a;    // a = 1; b = 6;    b = 5 + (a - 1);

a = 2;    b = 5 + a--;    // a = 1; b = 7;    b = 5 + a;

محاسبه درجا

a = 6;    a += 2;          // a = 8;             a = a + 2;

a = 6;    a -= 2;          // a = 4;             a = a - 2;

a = 6;    a *= 2;          // a = 12;            a = a * 2;

a = 6;    a /= 2;          // a = 3;             a = a / 2;

a = 5;    a %= 2;          // a = 1;             a = a % 2;

a = 2;    a **= 3;         // a = 8;             a = a ** 3;
//---------------------------------------------------------------
a = "my"; a += "String"    // a = "myString";    a = a + "String";

آپریتورهای بولیَن

ساده

// And ----------------------------------
a = true && true;           // a = true;

a = true && false;          // a = false;

a = false && true;          // a = false;

a = false && false;         // a = false;
// Or -----------------------------------
a = true || true;           // a = true;

a = true || false;          // a = true;

a = false || true;          // a = true;

a = false || false;         // a = false;
// Not ----------------------------------
a = ! true;                 // a = false;

a = ! false;                // a = true;

مقادیر با نوع متفاوت را به بولین تبدیل می‌کند.

// And -----------------------------------
a = true && 5;                // a = 5;
a = true && "Str";            // a = "Str";

a = false && 5;               // a = false;
a = false && "Str";           // a = false;
// Or ------------------------------------
a = true || 5;                // a = true;
a = true || "Str";            // a = true;

a = false || 5;               // a = 5;
a = false || "Str";           // a = "Str";
// Not -----------------------------------
a = ! 0;                      // a = true;
a = ! 5;                      // a = false; Any non-zero number

a = ! "";                     // a = true;
a = ! " ";                    // a = false; Any non-zero string

a = ! null;                   // a = true;
a = ! undefined;              // a = true;
a = ! NaN;                    // a = true;

---

---

تمرین ۳

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

---

آپریتورهای مقایسه‌

مقایسه عددها

r = 2 == 2;    // r = true;    Equal to

r = 2 != 2;    // r = false;   Not Equal

r = 2 < 3;     // r = true;    Less than

r = 2 > 2;     // r = false;   Greater than

r = 2 <= 2;    // r = true;    Less than or Equal to

r = 2 >= 3;    // r = false;   Greater than or Equal to

مقایسه استرینگ‌ها

r = "B" == "B";    // r = true;     Equal to

r = "B" != "B";    // r = false;    Not Equal

r = "B" < "C";     // r = true;     Less than

r = "B" > "B";     // r = false;    Greater than

r = "B" <= "B";    // r = true;     Less than or Equal to 

r = "B" >= "C";    // r = false;    Greater than or Equal to

مقایسه بولین

r = true == true;     // r = true;     Equal to

r = true != true;     // r = false;    Not Equal

r = false < true;     // r = true;     Less than

r = false > true;     // r = false;    Greater than

r = false <= false;   // r = true;     Less than or Equal to

r = false >= true;    // r = false;    Greater than or Equal to

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

r = "002" == 2;     // r = true;      "002" -> 2

r = "2" != 2;       // r = false;     "2" -> 2

r = "2" < 3;        // r = true;      "2" -> 2

r = "2" > 2;        // r = false;     "2" -> 2

r = "02" <= 2;      // r = true;      "02" -> 2

r = "2" >= 3;       // r = false;     "2" -> 2

r = "" == 0;        // r = true;      "" -> 0

r = false == "";    // r = true;      false -> 0, "" -> 0

r = false == "0";   // r = true;      false -> 0, "0" -> 0

r = true == "1";    // r = true;      true -> 1, "1" -> 1

---

---

تمرین ۴

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

---

مقایسه null

// null equal to

r = null == null;         // r = true;

r = null == undefined;    // r = true;

// null not-equal to

r = null != 0;            // r = true;

r = null != "";           // r = true;

r = null != false;        // r = true;

// null vs 0, "", false

r = null == 0;            // r = false;

r = null < 0;             // r = false;

r = null > 0;             // r = false;

r = null <= 0;            // r = true;

r = null >= 0;            // r = true;

r = null != 0;            // r = true;

مقایسه undefined

// undefined equal to
r = undefined == null;            // r = true;

r = undefined == undefined;       // r = true;

// undefined not-equal to

r = undefined != 0;               // r = true;

r = undefined != "";              // r = true;

r = undefined != false;           // r = true;

// undefined vs 0, "", false

r = undefined == 0;               // r = false;

r = undefined < 0;                // r = false;

r = undefined > 0;                // r = false;

r = undefined <= 0;               // r = false;

r = undefined >= 0;               // r = false;

r = undefined != 0;               // r = true;

مقایسه NaN

// NaN not-equal to anything.

r = NaN != 0;            // r = true;

r = NaN != "";           // r = true;

r = NaN != false;        // r = true;

r = NaN != null;         // r = true;

r = NaN != undefined;    // r = true;

r = NaN != NaN;          // r = true;

// x is whatever

r = NaN == x;            // r = false;

r = NaN < x; // r = false; r = NaN > x;             // r = false;

r = NaN <= x; // r = false; r = NaN >= x;            // r = false;

r = NaN != x;            // r = true;

مقایسه نوع و مقدار

r = "2" == 2;            // r = true;         Value

r = "2" === 2;           // r = false;        Value & type
//-------------------------------------------------------
r = "2" != 2;            // r = false;        Value

r = "2" !== 2;           // r = true;         Value & Type
//-------------------------------------------------------
r = true !== 1;          // r = true;         Value & Type

r = false !== 0;         // r = true;         Value & Type
//-------------------------------------------------------
r = null !== undefined;  // r = true;         Value & Type 

TL;DR

1. تبدیل به عدد: همه آپریتورها
2. تبدیل به استرینگ: آپریتور + اگر یک از آپرندهایش استرینگ باشد.
3. تبدیل به بولین: آپریتور بولین
4. null == undefined
5. NaN با هیچ چیزی مساوی نیست.

الویت آپریتورها

 1        ( )
 2        ++ --
 3        **
 4        * / %
 5        + -
 6        < > <= >=
 7        == != === !==
 8        &&
 9        ||
10        = += -= *= /= %=

---

Number

آبجکت Number با مقادیر عددی کار می‌کند.

Number.isNaN(x)

این متد مشخص می‌کند، x معادل NaN است یا نه.

// Numbers
Number.isNaN(NaN);            // true 
Number.isNaN(5);              // false
Number.isNaN(Infinity);       // false

// Strings
Number.isNaN("5");            // false
Number.isNaN("Infinity");     // false
Number.isNaN("NaN");          // false
Number.isNaN("");             // false
Number.isNaN(" ");            // false
Number.isNaN("12n");          // false
Number.isNaN("true");         // false

// Boolean
Number.isNaN(true);           // false
Number.isNaN(false);          // false

// Null
Number.isNaN(null);           // false

// undefined
Number.isNaN(undefined);      // false

Number.isFinite(x)

این متد مشخص می‌کند، x عدد محدود است یا نه.

// Numbers
Number.isFinite(5);              // true 
Number.isFinite(0);              // true 
Number.isFinite(5.2);            // true 
Number.isFinite(-5.2);           // true 
Number.isFinite(Infinity);       // false
Number.isFinite(NaN);            // false

// Strings
Number.isFinite("5");            // false
Number.isFinite("");             // false
Number.isFinite(" ");            // false
Number.isFinite("true");         // false

// Boolean
Number.isFinite(true);           // false
Number.isFinite(false);          // false

// Null
Number.isFinite(null);           // false

// undefined
Number.isFinite(undefined);      // false

Number.isInteger(x)

این متد مشخص می‌کند، x عدد صحیح است یا نه.

// Numbers
Number.isInteger(5);              // true 
Number.isInteger(0);              // true 
Number.isInteger(-5);             // true 
Number.isInteger(5.2);            // false
Number.isInteger(Infinity);       // false
Number.isInteger(NaN);            // false

// Strings
Number.isInteger("5");            // false
Number.isInteger("");             // false
Number.isInteger(" ");            // false
Number.isInteger("true");         // false

// Boolean
Number.isInteger(true);           // false
Number.isInteger(false);          // false

// Null
Number.isInteger(null);           // false

// undefined
Number.isInteger(undefined);      // false

---

---

تمرین ۵

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

دیتا – Data

دیتا: هر گونه اطلاعاتی که از هر راهی به دست آمده باشد؛ چه عملیاتی روی آن انجام گرفته باشد یا نه و چه دسته بندی شده باشد یا نه.

به دو روش دیتا را می‌توان در حافظه کامپیوتر نگهداری کرد.

• متغیر یا Variable: هنگام اجرای برنامه مقدار آن تغییر می‌کند.
• ثابت یا Constant: هنگام اجرای برنامه مقدار آن ثابت است.

متغیر – Variable

متغیر (Variable) جایی در حافظه است که دارای یک نام می‌باشد و می‌تواند یک مقدار (Value) را در خود نگاه دارد. و همزمان با اجرای برنامه، می‌تواند مقدار آن تغییر کند.

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

1. تعریف یا Declare: تعیین نام متغیر و اختصاص فضا در حافظه
2. مقداردهی یا Assignment: نوشتن مقدار در آن
3. دسترسی یا Access: خواندن مقدار از آن

هنگام اجرای برنامه، مراحل دوم و سوم می‌تواند بارها و بارها تکرار شود.

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

let msg; // Declare

msg = "Hello World!"; // Assignment

alert(msg); // Access

let msg = "Hello World!"; // Declare & Assignment

alert(msg); // Access

let msg = 5 + 2; // msg = 7;  // Declare & Assignment

alert(msg); // Access 

چند متغیر

// Multiple var
let msg = "Hello", wrd = "World!"; // Declare & Assignment

alert(msg); // Hello    // Access
alert(wrd); // World!   // Access

// Multiple var
let msg = wrd = "Hello World!";  // Declare & Assignment

alert(msg); // "Hello World!"    // Access
alert(wrd); // "Hello World!"    // Access

تغییر مقدار متغیر

let msg = "Hello"; // Declare & Assignment

msg = "World"; // Change

alert(msg);   // Access

let msg = "Hello", wrd = "World"; // Declare & Assignment

msg = wrd;    // Change

alert(msg);   // Access

---

---

قواعد نامگذاری متغیر

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

• نام متغیر تنها می‌تواند شامل حروف، ارقام، $ و _ باشد.
• نام متغیر نباید با عدد شروع شود.

مواردی که بهتر است رعایت شود:

• نام‌های چند کلمه‌ای camelCase نوشته شود.
• نام متغیر، با معنا باشد. (نمونه نامناسب: lorem)
• نام متغیر، توصیفی از محتوا باشد. (نمونه نامناسب: data)
• از نام‌های کوتاه بپرهیزید. (نمونه نامناسب: x)
• برای هر کاری، یک متغیر جداگانه تعریف کنید و از متغیر قبلی استفاده نکنید.

نمونه‌هایی از نام‌های معتبر و نامعتبر

Valid	Invalid
usrName	usr-name
usr_name	usr name
user5	5user
_user	#user
$	@
age	let

مثال

در مثال زیر دو المنت HTML (آبجکت) وجود دارد.

<button id="btn">Click Here</button>
<p id="out-box"></p>    

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

// Declare & Assignment
let btn = document.getElementById("btn");
let outBox = document.getElementById("out-box");

// Access
btn.onclick = function() {
    outBox.innerHTML = "Hello, World!";
}

---

---

تمرین ۱

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• فایل script.js را طوری کامل کنید که مقدار وارد شده زیر آن نمایش داده شود.
• برای هر المنت HTML یک متغیر تعریف کنید.

---

ثابت – Constant

ثابت (Constant) همانند متغیر است با این تفاوت که پس از مقدار دهی اولیه دیگر قابل تغییر نیست و مقدار آن تا پایان اجرای برنامه ثابت باقی می‌ماند.

const COLOR_ORANGE = "#FF7F00"; // Declare & Assignment

alert(COLOR_ORANGE); // Access

COLOR_ORANGE = "007F00"; // Error: invalid assignment

قواعد نامگذاری ثابت

قواعد نامگذاری ثابت همانند متغیر است.

مواردی که بهتر است رعایت شود:

• از حروف بزرگ استفاده شود. (UPPER_CASE)
• نام‌های چند کلمه‌ای SNAKE_CASE نوشته شود.

مثال

در مثال زیر دو المنت HTML (آبجکت) وجود دارد.

<button id="btn">Click Here</button>
<p id="out-box"></p>    

ابتدا هر یک از آن دو را در یک ثابت قرار می دهیم. سپس می‌توانیم در طول برنامه، بارها و بارها از آنها استفاده بکنیم.

// Declare & Assignment
const BTN = document.getElementById("btn");
const OUT_BOX = document.getElementById("out-box");

// Access
BTN.onclick = function() {
    OUT_BOX.innerHTML = "Hello, World!";
}

---

---

تمرین ۲

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• فایل script.js را طوری کامل کنید که مقدار وارد شده زیر آن نمایش داده شود.
• برای هر المنت HTML یک ثابت تعریف کنید.

---

انواع دیتا – Data Types

در جاواسکریپت دیتا را به چند نوع تقسیم می‌کنند.

• ساده (Primitive)
  • عدد (Numbers)
  • استرینگ (Strings)
  • بولین (Boolean)
• مرکب (Composite)
  • آبجکت (Objects)
  • آرایه (Arrays)
  • فانکشن (Functions)
• بی‌ارزش (Trivial)
  • تهی (null)
  • نامعین (undefined)

استرینگ (String)

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

همیشه استرینگ باید بین دو علامت کوت (quote) قرار گیرد.

• استرینگ ساده (Simple):
  • سینگل کوت (Single quotes): ‘Hello’
  • دابل کوت (Double quotes): “Hello”
• استرینگ پیشرفته (Extended):
  • بک تیک (Backticks): `Hello`

در استرینگ پیشرفته شما می توانید یک متغیر یا یک عبارت محاسباتی را قرار دهید. برای این کار باید آن متغیر یا عبارت را در بین {…}$ قرار دهید.

let usrName = "bulbul";

// embed a variable
alert (`Hello ${usrName}!`); // Hello bulbul!

// embed an expression
alert (`The result is ${1 + 2}.`); // the result is 3.

عدد (Number)

مقادیر عددی در جاواسکریپت چند نوع می‌تواند باشد.

• عدد صحیح (Integer): مثل 7
• عدد حقیقی (float): مثل 1.618
• بی‌نهایت (Infinity): n / 0
• مبهم (NaN): 0 / 0 , ∞ - ∞ , ∞ / ∞ , ∞ * 0 , ∞ % n , 1∞

بولین (Boolean)

مقادیر بولین دو نوع است.

• درست (true): 1
• نادرست (false): 0

تهی (null)

محتوای متغیر پس از پاک کردن مقدار درون آن

نامعین (undefined)

محتوای متغیر قبل از نوشتن مقدار درون آن

آبجکت (Objects)

المنت‌های HTML

آرایه (Arrays)

تعدادی دیتا هم نوع که با ترتیب خاصی قرار گرفته‌اند.

فانکشن (Functions)

---

typeof

تابع typeof نوع دیتا را برمی‌گرداند.

//   typeof(x);   Or   typeof x;
//======================================
t = typeof(1);            // t = 'number'

t = typeof(NaN);          // t = 'number'

t = typeof(Infinity);     // t = 'number'

t = typeof('foo');        // t = 'string'

t = typeof(true);         // t = 'boolean'

t = typeof(null);         // t = 'object'

t = typeof(window);       // t = 'object'

t = typeof(alert);        // t = 'function'

t = typeof(undefined);    // t = 'undefined'

---

---

تمرین ۳

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• فایل script.js را طوری کامل کنید که نوع مقدار وارد شده زیر آن نمایش داده شود.
• برای هر المنت HTML یک متغیر تعریف کنید.

---

تبدیل نوع

برای تبدیل دیتا از یک نوع به نوع دیگر، فانکشن‌های بسیاری وجود دارد.

Number(x)

یک دیتای غیر عددی را به عدد تبدیل می‌کند. x+ نیز همین کار را می‌کند.

n = Number('12.5');      // n = 12.5

n = Number('  12.5  ');  // n = 12.5

n = Number(' ');         // n = 0

n = Number('');          // n = 0

n = Number('Infinity');  // n = Infinity

n = Number('12.5px');    // n = NaN

n = Number('a12');       // n = NaN

n = Number('true');      // n = NaN

n = Number(true);        // n = 1

n = Number(false);       // n = 0

n = Number(null);        // n = 0

n = Number(undefined);   // n = NaN

n = Number(undeclared);  // Error

parseFloat(string)

یک استرینگ را تجزیه (Parse) می‌کند. و در صورت امکان یک عدد حقیقی برمی‌گرداند.

n = parseFloat('12.5');      // n = 12.5

n = parseFloat('  12.5  ');  // n = 12.5

n = parseFloat(' ');         // n = NaN

n = parseFloat('');          // n = NaN

n = parseFloat('Infinity');  // n = NaN

n = parseFloat('12.5px');    // n = 12.5

n = parseFloat('a12');       // n = NaN

n = parseFloat('true');      // n = NaN

n = parseFloat(true);        // n = NaN

n = parseFloat(false);       // n = NaN

n = parseFloat(null);        // n = NaN

n = parseFloat(undefined);   // n = NaN

n = parseFloat(undeclared);  // Error

parseInt(string)

یک استرینگ را تجزیه (Parse) می‌کند. و در صورت امکان یک عدد صحیح برمی‌گرداند.

n = parseInt('12.5');      // n = 12

n = parseInt('  12.5  ');  // n = 12

n = parseInt(' ');         // n = NaN

n = parseInt('');          // n = NaN

n = parseInt('Infinity');  // n = NaN

n = parseInt('12.5px');    // n = 12

n = parseInt('a12');       // n = NaN

n = parseInt('true');      // n = NaN

n = parseInt(true);        // n = NaN

n = parseInt(false);       // n = NaN

n = parseInt(null);        // n = NaN

n = parseInt(undefined);   // n = NaN

n = parseInt(undeclared);  // Error

String(x)

یک دیتا را به استرینگ تبدیل می‌کند. `{x}$` نیز همین کار را می‌کند.

s = String(110);         // s = '110'

s = String(0);           // s = '0'

s = String(Infinity);    // s = 'Infinity'

s = String(NaN);         // s = 'NaN'

s = String(true);        // s = 'true'

s = String(false);       // s = 'false'

s = String(null);        // s = 'null'

s = String(undefined);   // s = 'undefined'

s = String(undeclared);  // Error

number.toFixed(x)

یک مقدار عددی را گرد می‌کند و سپس آن را به استرینگ تبدیل می‌کند.

let n = 2.3456;

s = n.toFixed();                // s = "2"
s = n.toFixed(0);               // s = "2"
s = n.toFixed(1);               // s = "2.3"
s = n.toFixed(2);               // s = "2.35"
s = n.toFixed(3);               // s = "2.346"
s = n.toFixed(7);               // s = "2.3456000"

s = 2.45.toFixed(1);            // s = "2.5"
s = 2.55.toFixed(1);            // s = "2.5"

s = -2.45.toFixed(1);           // s = -2.5
s = (-2.45).toFixed(1);         // s = "-2.5"

نکته: به علت تبدیل اعداد به باینری گاهی نتایج غیر منتظره پیش می‌آید. مثل

0.1 + 0.2 -> 0.30000000000000004
0.1 + 0.2 ≠ 0.3

با کمک toFixed از بروز این خطاها جلوگیری کنید.

Boolean(x)

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

r = Boolean(0);          // r = false

r = Boolean(5);          // r = true    Any non-zero number

r = Boolean(Infinity);   // r = true

r = Boolean(NaN);        // r = false

r = Boolean('');         // r = false

r = Boolean('bulbul');   // r = true    Any non-zero string

r = Boolean('0');        // r = true

r = Boolean(' ');        // r = true

r = Boolean('null');     // r = true

r = Boolean(null);       // r = false

r = Boolean(undefined);  // r = false

r = Boolean(undeclared); // Error

---

---

تمرین ۴

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• فایل script.js را طوری کامل کنید که نوع مقدار وارد شده را به استرینگ، عدد و بولین تغییر دهد.
• برای هر المنت HTML یک متغیر تعریف کنید.

تمرین ۵

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• فایل script.js را طوری کامل کنید که مقدار عرض و طول المنت را بدون واحد px نمایش دهد.
• برای هر المنت HTML یک متغیر تعریف کنید.

فرم – Forms

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

<form>...</form>

<fieldset>...</fieldset>
<legend>...</legend>

<button>...</button>
<input ... />
<label>...</label>
<textarea>...</textarea>

---

---

<button>…</button>

المنت باتن (button) یک دکمه در صفحه ایجاد می‌کند، که می‌توان روی آن کلیک کرد تا کاری انجام شود.

در مثال زیر یک پیام روی صفحه ظاهر می‌شود و سپس محتوای المنت h1 تغییر می‌کند.

<h1 id="demo"></h1>    
<button id="btn">Click Here</button>

document.getElementById("btn").onclick = function() {
    alert("Hi");
    document.getElementById("demo").innerHTML = "Hello, World!";
}

---

---

<input … >

المنت input چیزی را از کاربر دریافت می‌کند. آن چیز می‌تواند متن، عدد یا … باشد. به کمک Attribute های آن می‌توانید نما و عملکرد آن را تعیین کنید.

• type: نوع ورودی
• value: مقدار اولیه
• checked: علامت دار
• name: نام المنت
• placeholder: راهنمای کاربر

انواع input

<input type=”text” />

<input type=”text” placeholder=”Name”/>

<input type=”text” value=”Mahdi Ahmadi”/>

<h1 id="demo"></h1>    
<input type="text" id="name-id">
<button id="btn">OK</button>

document.getElementById("btn").onclick = function() {

    document.getElementById("demo").innerHTML =
    document.getElementById("name-id").value;

}

---

---

تمرین ۱

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• فایل script.js را کامل کنید. مقدار وارد شده زیر آن نمایش داده شود.

---

<input type=”password” />

<h1 id="demo"></h1>    
<input type="password" id="pass-id">
<button id="btn">OK</button>

document.getElementById("btn").onclick = function() {

    document.getElementById("demo").innerHTML =
    document.getElementById("pass-id").value;

}

---

---

تمرین ۲

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• فایل script.js را کامل کنید. مقدار وارد شده زیر آن نمایش داده شود.

---

<input type=”number” />

<input type=”number” min=”0″ max=”50″ step=”5″ >

<h1 id="demo"></h1>
<input type="number" id="num-id">
<button id="btn">OK</button>

document.getElementById("btn").onclick = function() {

    document.getElementById("demo").innerHTML =
    document.getElementById("num-id").value;

}

---

---

تمرین ۳

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• فایل script.js را کامل کنید. مقدار وارد شده زیر آن نمایش داده شود.

---

<input type=”range” />

<h1 id="demo"></h1>
<input type="range" id="rng-id">
<button id="btn">OK</button>

document.getElementById("btn").onclick = function() {

    document.getElementById("demo").innerHTML = 
    document.getElementById("rng-id").value;

}

---

---

تمرین ۴

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• فایل script.js را کامل کنید. مقدار وارد شده زیر آن نمایش داده شود.

---

<input type=”checkbox” />

<input type=”checkbox” checked />

<h1 id="demo"></h1>
<input type="checkbox" id="chkbx-id">
<button id="btn">OK</button>

document.getElementById("btn").onclick = function() {

    document.getElementById("demo").innerHTML =
    document.getElementById("chkbx-id").checked;

}

---

---

تمرین ۵

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• فایل script.js را کامل کنید. مقدار وارد شده زیر آن نمایش داده شود.

---

<input type=”checkbox” checked />

<h1 id="demo"></h1>
<input type="checkbox" id="chkbx-id">
<button id="btn">OK</button>

document.getElementById("btn").onclick = function() {

    document.getElementById("demo").innerHTML =
    document.getElementById("chkbx-id").checked;

}

---

<label for=”id”>…</label/>

<!-- inaccessible -->
<input id="g1" type="checkbox">Cricket


<!-- implicit label -->
<label><input id="g2" type="checkbox">Hockey</label>


<!-- explicit label -->
<input id="g3" type="checkbox"><label for="g3">Rugby</label>

تمرین ۶

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• فایل script.js را کامل کنید. مقدار وارد شده زیر آن نمایش داده شود.

---

<input type=”radio” />

<h1 id="demo"></h1>
<input type="radio" id="rdo-id">
<button id="btn">OK</button>

document.getElementById("btn").onclick = function() {

    document.getElementById("demo").innerHTML =
    document.getElementById("rdo-id").checked;

}

---

<input type=”radio” name=”group” />

<!-- Group 1 -->
<input type="radio" name="grp1" value="Cricket">
<input type="radio" name="grp1" value="Hockey">
<input type="radio" name="grp1" value="Rugby">

<!------------------------------------>

<!-- Group 2 -->
<input type="radio" name="grp2" value="Red">
<input type="radio" name="grp2" value="Blue">
<input type="radio" name="grp2" value="Green">

---

<fieldset>…</fieldset>

یک خط دور مجموعه‌ی المنت‌های داخل آن کشیده می شود.

<legend>…</legend>

یک عنوان برای آن مجموعه نمایش داده می‌شود.

<fieldset>
    <legend>Choose a game:</legend>
    <p>
        <input type="radio" name="grp1" id="game1" value="Cricket">
        <label for="game1">Cricket</label>
    </p>
    <p>
        <input type="radio" name="grp1" id="game2" value="Hockey">
        <label for="game2">Hockey</label>
    </p>
    <p>
        <input type="radio" name="grp1" id="game3" value="Rugby">
        <label for="game3">Rugby</label>
    </p>
</fieldset>
...

---

---

دستور زبان – Syntax

• • حساس به نوع حرف (Case Sensitive):
    جاواسکریپت به کوچکی یا بزرگی حروف اهمیت می‌دهد و آنها را دو کاراکتر متفاوت در نظر می گیرد. (A ≠ a)
  • بی تفاوت نسبت به فاصله‌ها:
    جاواسکریپت فاصله‌ها را نادیده می‌گیرد. فاصله‌ها، سر خط رفتن و تورفتگی‌ها همه برای خوانایی برنامه رعایت می شود.
  • توضیحات (Comments):
    جاواسکریپت توضیحات را نادیده می‌گیرد ولی برای فهمیدن روند اجرای برنامه بسیار ضروری است. توضیحات به دو روش می تواند در متن جاواسکریپت نوشته شود.

// Single line Comments

/*
Multi-line
Comments
*/

• • سِمی کُلُن (Semicolon):
    سمی کلن نشان دهنده پایان دستور است.
    بنابراین چند دستور می‌تواند در یک خط پشت سر هم بیاید.
    و یا یک دستور در چند خط زیر هم نوشته شود.

Multiple Statements; On One Line;

One Statement 
On Multiple Lines;

• • نقطه (Dot):
    بین نام آبجکت و پراپرتی، متد یا ایونت همیشه نقطه گذاشته می‌شود.

Object.property
Object.method
Object.event

---

---

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

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

window

آبجکت window، آبجکت گلوبال (global) یا سراسری نامیده می‌شود. به این معنا که پراپرتی و متدهای آن همه جا در دسترس است. و نیازی به نوشتن آن نیست.

window.alert

متد alert یک پیام را در یک پنجره نمایش می‌دهد.

// Displaying a text message
window.alert("Hello World!");

// is the same as
alert("Hello World!");

// Displaying a Number 
alert(20); // Outputs: 20

دستورات بالا را در کنسول آزمایش کنید.

---

---

تمرین ۱

• در فولدر js1 یک فولدر به نام 1-02 بسازید.
• یک فایل به نام index.html در آن ایجاد کنید.
• یک جاواسکریپت اینترنال در آن بنویسید که پیام زیر را نمایش دهد:
  I’m ‘Name‘, Can I help you?
• بجای Name نام خود را بنویسید.

console

آبجکت console بیشتر برای اشکال زدایی (debugging) است. و خطاها آنجا نمایش داده می‌شود.

console.log

متد console.log یک پیام را در کنسول نمایش می‌دهد.

// Displaying a text
console.log("Hello World!");

// Displaying a Number 
console.log(20); // Outputs: 20

دستورات بالا را در کنسول آزمایش کنید.

---

---

تمرین ۲

• در فولدر js1 یک فولدر به نام 2-02 بسازید.
• یک فایل به نام index.html در آن ایجاد کنید.
• یک جاواسکریپت اینترنال در آن بنویسید که پیام زیر را در کنسول نمایش دهد:
  Completed Successfully.

document

آبجکت document محتوای داخل window است.

document.write

متد document.write یک رشته متنی را در داخل بروزر نمایش می‌دهد.

// Displaying a html
document.write("<h1>Hello World!</h1>");

// Displaying a text
document.write("Your number is: ");

// Displaying a Number 
document.write(20); // Outputs: 20

دستورات بالا را در کنسول آزمایش کنید.

document.getElementById

متد document.getElementById یک المنت با id خاصی را می‌گیرد.

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

// Gets the element with the 'greet' id:
document.getElementById("greet");

دستورات بالا را در کنسول آزمایش کنید.

آناتومی المنت HTML

element.innerHTML

متد element.innerHTML محتوای یک المنت را برمی‌گرداند یا تغییر می‌دهد.

<h1 id="greet"></h1>
<div id="msg"></div>
<p id="no"></p>

// Displaying a text
document.getElementById("greet").innerHTML = "Hello World!";

// Displaying a html
document.getElementById("msg").innerHTML = "Your number is:";

// Displaying a Number 
document.getElementById("no").innerHTML = 20;

دستورات بالا را در کنسول آزمایش کنید.

---

---

تمرین ۳

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• یک جاواسکریپت اینترنال در آن بنویسید که نامتان را در تگ h1 نمایش دهد.

element.setAttribute

متد element.setAttribute یک اتریبیوت به المنت اضافه می‌کند.

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

document.getElementById("hi").setAttribute("style", "color: red");

دستورات بالا را در کنسول آزمایش کنید.

---

---

تمرین ۴

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• یک جاواسکریپت اینترنال در آن بنویسید که تصویر را در تگ img تغییر دهد.

element.style.property

متد element.style.property یک inline css به المنت اضافه می‌کند. پراپرتی css باید اینجا به شکل camelCase نوشته شود.

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

document.getElementById("hi").style.color = "red";

دستورات بالا را در کنسول آزمایش کنید.

element.onclick

ایونت element.onclick یک مجموعه ای از دستورات را هنگام کلیک روی المنت اجرا می‌کند. به این مجموعه دستورات فانکشن (function) می‌گویند.
فانکشن: یک مجموعه‌ای از دستورات که کار خاصی را انجام می‌دهند.  در جاواسکریپت فانکشن، به روش‌های گوناگونی نوشته می‌شود. که در آینده با انواع آن آشنا خواهید شد. در اینجا ساده‌ترین شکل آن را می بینید:

function() {…}

دستورات مورد نظر را درون {…} کِرلی بِرَکِت Curly Bracket بنویسید.

روی تصویر زیر کلیک کنید.

<img src="photo.jpg" id="pic"/>

document.getElementById("pic").onclick = function(){ alert("Hi"); }

دستورات بالا را در کنسول آزمایش کنید.

---

---

تمرین ۵

• این فایل را دانلود کنید.
• آن را در فولدر js1 باز کنید.
• یک جاواسکریپت اینترنال در آن بنویسید که در صورت کلیک روی دکمه تصویر ظاهر شود.

راهنمایی:

display: block;