برچسب: طراحی وب

جاواسکریپت: ۹- ایونت

جاواسکریپت نیز مانند بسیاری از زبان‌های دیگر می‌تواند به هنگام اجرا، از موس، کیبرد یا … اطلاعاتی را دریافت کند و بر اساس آن بی درنگ (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 نیز دارد.

HTML

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

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

HTML

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

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

HTML

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

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

HTML

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

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

HTML

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

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 شود.

زمان خواندن: ۵ دقیقه

جاواسکریپت: ۸- فانکشن

فانکشن – Functions

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

به کارگیری فانکشن، در هر زبانی دو مرحله دارد:
۱- تعریف – Define
۲- فراخوانی – Call

تعریف فانکشن

در جاواسکریپت، فانکشن به دو روش تعریف می‌شود:

Statement

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


// Define
function showMessage() {
    msg = 'Hello world!';
    alert(msg);
}

// Call
showMessage();        // Hello world!
Expression

در این روش یک فانکشن، بی‌نام، تعریف می‌شود. اگرچه می‌توان آن را در یک متغیر یا ثابت گذاشت. سپس با نام آن متغیر یا ثابت، فانکشن را فراخواند.


// Define
const showMessage = function() {
    msg = 'Hello world!';
    alert(msg);
};

// Call 
showMessage();        // Hello world!

داد و ستد دیتا

الف – ورود دیتا:

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

  • پارامتر – Parameter: متغیرهایی هستند که همراه با تعریف فانکشن، تعریف می‌شوند و از طریق آن اطلاعات به فانکشن داده می‌شود. (هنگام تعریف)
  • آرگومان – Argument: مقادیری هستند که هنگام فراخوانی فانکشن، درون پارامترها گذاشته می‌شوند. و پردازش روی آنها انجام می‌گیرد. (هنگام فراخوانی)

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

Statement

// Define
function showMessage(name) {    // Parameter: name
    msg = 'Hello ' + name;
    alert(msg);
}

// Call
showMessage('bulbul');          // Argument: 'Hello bulbul'
Expression

// Define
const showMessage = function(name) {  // Parameter: name
    msg = 'Hello ' + name;
    alert(msg);
};

// Call 
showMessage('bulbul');                // Argument: 'Hello bulbul'

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

Statement

// Define
function showMessage(name = 'world!') {
    msg = 'Hello ' + name;
    alert(msg);
}

// Call
showMessage();                // Hello World!
showMessage('bulbul');        // Hello bulbul
Expression

// Define
const showMessage = function(name = 'world!') {
    msg = 'Hello ' + name;
    alert(msg);
};

// Call
showMessage();                // Hello World!
showMessage('bulbul');        // Hello bulbul

ب – خروج دیتا

فانکشن می‌تواند با دستور return یک مقدار را برگرداند.

Statement

// Define
function sum(a, b) {
    return a + b;
}

// Call
let a = sum(2, 3);

alert(a);    // 5
Expression

// Define
const sum = function(a, b) {
    return a + b;
};

// Call
let a = sum(2, 3);

alert(a);    // 5

در دستور return از آپریتور ترنری نیز می‌توانید استفاده کنید.

Statement

// Define
function min(a, b) {
    return a < b ? a : b;
}

// Call
let a = min(2, 3);

alert(a);    // 2
Expression

// Define
const min = function(a, b) {
    return a < b ? a : b;
};

// Call
let a = min(2, 3);

alert(a);    // 2

تفاوت‌های دو روش تعریف

الف – فراخوانی پیش از تعریف – Hoisting

یکی از تفاوت‌های این دو روش تعریف فانکشن، فراخوانی پیش از تعریف یا Hoisting است. در جاواسکریپت پیشاپیش همه فایل خوانده می‌شود و سپس خط به خط اجرا می‌گردد. بنابراین شما می‌توانید فانکشنی را فراخوانی کنید؛ که پایین‌تر تعریف شده‌است. به این ویژگی Hoisting یعنی بالا بردن می‌گویند. روشن است که این ویژگی در فانکشن اکسپرشن کار نمی‌کند.

Statement

// Call
let a = sum(2, 3);    // a = 5



// Define
function sum(a, b) {
    return a + b;
}
Expression

// Call
let a = sum(2, 3);    // Error



// Define
const sum = function(a, b) {
    return a + b;
};

ب – اسکوپ

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

Statement

let time = 10;

// conditionally declare a function
if (time < 12) {

    function welcome() { alert("Good morning"); }

} else {

    function welcome() { alert("Good afternoon"); }

}

// ...use it later
welcome(); // Error: welcome is not defined
Expression

let time = 10;
let welcome;

// conditionally declare a function
if (time < 12) {

    welcome = function() { alert("Good morning"); };

} else {

    welcome = function() { alert("Good afternoon"); };

}

// ...use it later
welcome(); // Good morning

مثال بالا را با آپریتور ترنری نیز می‌توانید بنویسید.

Expression

let time = 10;

// Define
const welcome = (time < 12) ?
    function() { alert('Good morning'); } :
    function() { alert("Good afternoon"); };

// Call 
welcome();        // Good morning

توصیه‌ها

کارهایی که نرم افزار انجام می‌دهد را به اجزاء کوچک تقسیم کنید، سپس برای هر کدام یک فانکشن جداگانه بسازید.

هر فانکشن، تنها یک کار

هیچیک از فانکشن‌ها بیش از یک کار را انجام ندهد.

فانکشن، جایگزین کامنت

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

فانکشن برای دیباگ

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

نامگذاری فانکشن

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

  • getAge( ) – return the age.
  • calcSum( ) – calculate a sum.
  • createForm( ) – creates a form.
  • showMessage( ) – show a message.
  • isLogin( ) – checks the user is logged in.
  • hasRole( ) – checks the user permission.

مثال

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

HTML

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

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

const isEven = function(n) {
    return (n % 2) ? false : true;
};

btn.onclick = function() {
    let n = inBox.value;
    outBox.innerHTML = isEven(n);
};

تمرین ۱

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

اَرو فانکشن – Arrow Function

اَرو فانکشن کوتاه شده فانکشن اکسپرشن است.

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

Expression

// Define
const sum = function(a, b) {
    let c = a + b;
    return c;
};

// Call 
let n = sum(2, 3);        // n = 5
Arrow

// Define
const sum = (a, b) => {
    let c = a + b;
    return c;
};

// Call 
let n = sum(2, 3);        // n = 5

اگر بدنه فانکشن تنها یک خط داشته باشد، به کرلی برکت {} نیازی نیست.

Expression

// Define
const showMessage = function() { alert('Hello, World!'); };

// Call 
showMessage();        // Hello, World!
Arrow

// Define
const showMessage = () => alert('Hello, World!');

// Call 
showMessage();        // Hello, World!

اگر بدنه فانکشن تنها یک دستور return باشد، نیازی به نوشتن آن نیست.

Expression

// Define
const sum = function(a, b) { return a + b; };

// Call 
let n = sum(2, 3);        // n = 5
Arrow

// Define
const sum = (a, b) => a + b;

// Call 
let n = sum(2, 3);        // n = 5

اگر فانکشن تنها یک پارامتر داشته باشد، به پرانتز نیازی نیست.

Expression

// Define
const half = function(a) { return a / 2 };

// Call 
let n = half(10);        // n = 5
Arrow

// Define
const half = a => a / 2;

// Call 
let n = half(10);        // n = 5
Immediately Invoked Function Expressions (IIFE)

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


// Define & Call immediately

( function(msg) { alert(msg); } ('Hello, World!') );

// Or

( function(msg) { alert(msg); } ) ('Hello, World!');

تمرین ۲

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

تایمر

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

setTimeout(function, delay, arg1, …)

یک فانکشن را پس از زمان خاصی (به میلی ثانیه)، اجرا می‌کند.
در مثال‌های زیر پس از ۱۰۰۰ میلی ثانیه، فانکشن اجرا می‌شود.


// Functions without arguments
setTimeout(welcome, 1000);

// Functions with arguments
setTimeout(alret, 1000, 'Hello');

// Anonymous Functions without arguments
setTimeout(function() { ... }, 1000);

// Anonymous Functions with arguments
setTimeout(function(2, 5) { ... }, 1000);

clearTimeout(Timeout)

تایمر را از کار می‌اندازد؛ و پس از آن فانکشن اجرا نمی‌شود


// Set Timeout
const myFunc = setTimeout(...);

// Stop Timeout
clearTimeout(myFunc);

مثال

در این مثال اگر روی OK کلیک کنید؛ یک ثانیه بعد، یک عدد رندم بین ۰ تا ۱۰۰ را نمایش می‌دهد. و اگر قبل از اجرای فانکشن، روی Cancel کلیک کنید؛ تایمر کار نخواهد کرد.

HTML

<button id="ok-btn"">OK</button">
<button id="cancel-btn"">Cancel</button">
<h1 id="out-box""></h1">
JS

const okBtn = document.getElementById("ok-btn");
const cancelBtn = document.getElementById("cancel-btn");
const outBox = document.getElementById("out-box");

const myFunc = function() {
    n =  Math.trunc(Math.random()*1000);
    outBox.innerHTML = n;
}

let myTimer;

okBtn.onclick = function(){
    myTimer = setTimeout(myFunc, 1000);
}

cancelBtn.onclick = function(){
    clearTimeout(myTimer);
};

setInterval(function, delay, arg1, …)

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


// Functions without arguments
setInterval(welcome, 1000);

// Functions with arguments
setInterval(alret, 1000, 'Hello');

// Anonymous Functions without arguments
setInterval(function() { ... }, 1000);

// Anonymous Functions with arguments
setInterval(function(2, 5) { ... }, 1000);

clearInterval(Interval)

تایمر را از کار می‌ندازد؛ و پس از آن فانکشن اجرا نمی‌شود


// Set Interval
const myFunc = setInterval(...);

// Stop Interval
clearInterval(myFunc);

مثال

در این مثال اگر روی OK کلیک کنید؛ هر یک ثانیه یک بار، یک عدد رندم بین ۰ تا ۱۰۰ را نمایش می‌دهد. و هرگاه روی Cancel کلیک کنید؛ تایمر از کار خواهد افتاد.

HTML

<button id="ok-btn"">OK</button">
<button id="cancel-btn"">Cancel</button">
<h1 id="out-box""></h1">
JS

const okBtn = document.getElementById("ok-btn");
const cancelBtn = document.getElementById("cancel-btn");
const outBox = document.getElementById("out-box");

const myFunc = function() {
    n =  Math.trunc(Math.random()*1000);
    outBox.innerHTML = n;
}

let myTimer;

okBtn.onclick = function(){
    myTimer = setInterval(myFunc, 1000);
}

cancelBtn.onclick = function(){
    clearInterval(myTimer);
};

تمرین ۳

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

زمان خواندن: ۹ دقیقه

جاواسکریپت: ۷- کاندیشن ۲

شرط – Conditions

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

  • ?
  • if
  • Switch

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

سوئیچ – Switch

Switch جایگزین چند if می‌شود.


if (exp === val1) {

    ...

} else if (exp === val2) {

    ...

} else if (exp === val3) {

    ...

}

...

} else {
    ...
}



switch (exp) {
    case val1: // if (exp === val1)
        ...
        break;
    
    case val2: // if (exp === val2)
        ...
        break;

    case val3: // if (exp === val3)
        ...
        break;

    ...
    
    default: // else
        ...
    }

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

مثال

HTML

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

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

btn.onclick = function() {
    let grade = inBox.value;
    let msg; 
    switch (grade) {
        case 'A':
            msg = "Excellent";
            break;
        case 'B':
            msg = "Good";
            break;
        case 'C':
            msg = "Fair";
            break;
        case 'D':
            msg = "Poor";
            break;
        case 'E':
        case 'F':
            msg = "Failed";
            break;
        default:
            msg = "Unknown grade";
    }
    outBox.innerHTML = msg;
}

مثال

HTML

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

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

btn.onclick = function() {
    let point = inBox.value;
    let msg; 
    switch (true) {
        case point > 100 || point < 0:
            msg = "Out of range";
            break;
        case point >= 90:
            msg = "Excellent";
            break;
        case point >= 80:
            msg = "Good";
            break;
        case point >= 70:
            msg = "Fair";
            break;
        case point >= 60:
            msg = "Poor";
            break;
        case point >= 0:
            msg = "Failed";
            break;
        default:
            msg = "Not a number";
    }
    outBox.innerHTML = msg;
}

تمرین ۱

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

تمرین ۲

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

String

آبجکت String با مقادیر استرینگ کار می‌کند.

String.length

تعداد کاراکترهای استرینگ را برمی‌گرداند


s = "Nikparvar High School";

l = s.length;        // l = 21
//-------------------------------------
n = 20;

l = n.length;        // l = undefined
//-------------------------------------
b = true;

l = b.length;        // l = undefined

String.trim( )

فضای خالی دو طرف استرینگ را حذف می‌کند.

  • افقی: space, tab
  • عمودی: LF, CR

String.trim( )


s = "      Nikparvar";

t = s.trim();        // t = "Nikparvar"
//-------------------------------------
s = "Nikparvar      ";

t = s.trim();        // t = "Nikparvar"
//-------------------------------------
s = "   Nikparvar   ";

t = s.trim();        // t = "Nikparvar"
//-------------------------------------
s = `
Nikparvar
High
School`;

t = s.trim();        // t = `Nikparvar
                     //      High
                     //      School`

String.substr(start, length)

بخشی از استرینگ را برمی‌گرداند.

  • شمارش کاراکترها از عدد صفر آغاز می‌شود.
  • اعداد منفی از انتها شمرده می‌شود.

s = "Nikparvar High School";

t = s.substr(0,3);         // t = "Nik"

t = s.substr(-4,3);        // t = "hoo"

t = s.substr(25,1);        // t = ""

t = s.substr(5,-1);        // t = ""

String.search(str)

جای str را در میان استرینگ مشخص می‌کند.


s = "Nikparvar";

p = s.search("Nik");         // p = 0

p = s.search("nik");         // p = -1

p = s.search("a");           // p = 4

String.replace(str1,str2)

str1 را با str2 جایگزین می‌کند.


s = "Nikparvar";

new = s.replace("Nik", "nik");         // new = "nikparvar"

new = s.replace("a", "_");             // new = "Nikp_rvar"

new = s.replace("M", "_");             // new = "Nikparvar"

تمرین ۳

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

زمان خواندن: ۴ دقیقه

جاواسکریپت: ۶- کاندیشن ۱

شرط – 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

مثال

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

HTML

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

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 وجود دارد که از دو لایه تشکیل شده است. لایهٔ زیر، نقره‌ای و لایهٔ رو، زرد است. با کلیک کردن روی کلید، یک بار در میان، لایهٔ رو (که زرد رنگ است)، پنهان یا پیدا می‌شود.

HTML

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

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

مثال

HTML

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

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

مثال

HTML

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

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

مثال

HTML

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

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

HTML

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

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) می‌دهد.

HTML

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

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

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

Math.trunc(x)

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

HTML

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

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 را برمی‌گرداند.

HTML

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

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 را برمی‌گرداند.

HTML

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

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 را برمی‌گرداند.

HTML

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

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 را می‌توانید تغییر دهید.
  • هرگاه روی دکمه‌ها کلیک شد، حاصل عمل روی خانه اول را در خانه دوم بنویسد.

زمان خواندن: ۷ دقیقه