سواد دیجیتال
جاواسکریپت: ۶- کاندیشن ۱
شرط – 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
- تبدیل به عدد: همه آپریتورها
- تبدیل به استرینگ: آپریتور + اگر یک از آپرندهایش استرینگ باشد.
- تبدیل به بولین: آپریتور بولین
- null == undefined
- 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) را در خود نگاه دارد. و همزمان با اجرای برنامه، میتواند مقدار آن تغییر کند.
مراحل استفاده از متغیر
- تعریف یا Declare: تعیین نام متغیر و اختصاص فضا در حافظه
- مقداردهی یا Assignment: نوشتن مقدار در آن
- دسترسی یا 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):
جاواسکریپت توضیحات را نادیده میگیرد ولی برای فهمیدن روند اجرای برنامه بسیار ضروری است. توضیحات به دو روش می تواند در متن جاواسکریپت نوشته شود.
- حساس به نوع حرف (Case Sensitive):
// Single line Comments
/*
Multi-line
Comments
*/
-
- سِمی کُلُن (Semicolon):
سمی کلن نشان دهنده پایان دستور است.
بنابراین چند دستور میتواند در یک خط پشت سر هم بیاید.
و یا یک دستور در چند خط زیر هم نوشته شود.
- سِمی کُلُن (Semicolon):
Multiple Statements; On One Line;
One Statement
On Multiple Lines;
-
- نقطه (Dot):
بین نام آبجکت و پراپرتی، متد یا ایونت همیشه نقطه گذاشته میشود.
- نقطه (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;