آموزش جاوا اسکریپت Java Script قسمت چهارم

1396/3/26 علیرضا حاتمی نیا 4177

چون خودم از مباحث صرفا تئوری خوشم نمیاد، قصد دارم در این جلسه به کدنویسی با جاوااسکریپت بپردازیم. اما همچنان این تئوری ها و مفاهیم رو به صورت تدریجی، لا به لای کدها خدمتتون ارائه میکنم. چون در ابتدای کار هم میزان این مفاهیم زیاده، با یک مثال ساده شروع میکنم.

در این مثال، می خواهم یک stopwatch ایجاد کنم. برای اینکار یک صفحه html جدید ایجاد کرده و تگهای زیر را در قسمت body این صفحه قرار می دهیم.

<div id="demo">0</div>

<input type="button" value="start" />

<input type="button" value="stop" />

من یک المنت div با شناسه demo دارم که تعداد ثانیه های سپری شده رو نمایش خواهد داد، و یک دکمه start و یک دکمه stop رو هم به صفحه ام اضافه کردم.

یک فایل js با نام script.js در پوشه Scripts ایجاد کردم که ارجاع به آن را در قسمت head صفحه html قرار می دهم.

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

خب، حالا همه کدهای js را درون این فایل می نویسیم.

اولین چیزی که من ترجیح میدهم همیشه در هر کدهای js ام قرار بدهم عبارت 'use strict' است. 'use strict'; مشخص می کند که کد جاوا اسکریپت باید در strict mode (حالت سختگیرانه) اجرا شود. با قرار دادن این عبارت، ملزم به رعایت کردن یک سری قوانین می شویم که عدم رعایت آنها، بعضا باعث به وجود آمدن سوء عملکردهایی درون کد ما می شود. محدوده عملکرد این عبارت به این صورت است که هنگامی که شما آن را درون یک تابع قرار می دهید، محدوده عملکرد آن را به کدهای درون همان تابع محدود کرده اید و هنگامی که در بدنه اصلی فایل قرار می دهیم، شامل تمام کدهای درون آن فایل می شود.

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

- استفاده از متغیر بدون معرفی آن

- حذف یک متغیر، تابع یا آرگومان

- تعریف یک property بیش از یک بار

- تکرار یک پارامتر در ورودی یک تابع

- و ....

"use strict";
x = 3.14; // This will cause an error (if x has not been declared)
//*******************************
"use strict";
x = 3.14;
delete x; // This will cause an error
//***************************
"use strict";
var x = {p1:10, p1:20}; // This will cause an error
//***************************

"use strict";
function x(p1, p1) {}; // This will cause an error

خب، حالا من احتیاج به یک تایمر دارم که مقدار درون demo رو هر ثانیه یکی به جلو ببره. برای اینکار در جاوا اسکریپت دو تابع داریم.

 تابع اول بعد از گذشتن یک زمان مشخص، عملیاتی رو اجرا میکنه و در همین جا کار خاتمه پیدا میکنه. یعنی من بهش میگم مثلا سه ثانیه بعد یکبار پیغام hello رو نمایش بده.

setTimeout(function(){ alert("Hello"); }, 3000);

تابع دوم، عملیاتی رو به کرات با یک فاصله زمانی مشخص تکرار میکنه. یعنی مثلا من بهش میگم که هر سه ثانیه یکبار پیغام hello رو نمایش بده.

setInterval(function(){ alert("Hello"); }, 3000);

در اینجا من برای هدف خودم، به تابع دوم نیاز دارم، چون نمیخوام عملیاتی که میخوام رو فقط یکبار انجام بدم.

یک متغیر برای نگهداشتن ثانیه های سپری شده میگیرم با نام s و در ابتدای کار به آن مقدار صفر میدم. تابع setInterval رو فراخوانی میکنم و در هر یک ثانیه یکبار، به s یکی اضافه میکنم و متن درون demo رو برابر s قرار میدم.

'use strict';
var s = 0;
setInterval(function () { document.getElementById("demo").innerText = ++s; }, 1000);

 

ما برای اضافه کردن عدد 1 به یک متغیر، سه راه داریم:

 

var s = 2;

s = s + 1;

alert(s);

//**************

alert(s++); // alert(2)

//*************

alert(++s); // alert(3)

 

تفاوت این سه در این است که عبارات دوم و سوم رو میشه به صورت درون خطی اجرا کرد اما عبارت اول رو باید به صورت یک خط مجزا نوشت. تفاوت عبارت دوم و سوم هم در این است که در عبارت دوم ابتدا مقدار s نمایش داده میشه و بعد یکی به آن اضافه میشه؛ اما در عبارت سوم اول یکی به s اضافه میشه و بعد مقدار آن نمایش داده میشه.

سلکتورهای المنت در یک سند html:

لیستی از سلکتورهای المنت عبارتند از:

- getElementById: یک المنت با یک شناسه مشخص شده را به ما میدهد

- getElementsByClassName: آرایه ای از المنتها با یک کلاس مشخص شده را به ما میدهد

- getElementsByName: آرایه ای از المنتها با یک نام مشخص شده را به ما میدهد

- getElementsByTagName: آرایه ای از المنتها با یک کلاس مشخص شده را به ما میدهد

 

- querySelector: ورودی این تابع، عبارتی مانند سلکتورهای css است (و نه css3 به صورت کامل). اگر خروجی عبارت مورد نظر بیش از یک المنت باشه، تنها المنت اول رو بر میگردونه.

- querySelectorAll: این هم کاملا مانند مورد قبل است و تفاوتش با قبلی در این است که آرایه ای از المنتها برمیگردونه، ولو اینکه این آرایه شامل یک المنت باشه و یا یک آرایه خالی باشه.

 

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

document.querySelector("p");
document.querySelector(".example");
document.querySelector("p.example");
document.querySelector("#demo");
document.querySelector("div > p");
document.querySelector("a[target]");
document.querySelector("a[target=’_blank’]");
document.querySelector("h2, h3");

پس من کدهام رو به این صورت هم میتونم بنویسم:

'use strict';
var s = 0;
setInterval(function () { document.querySelector("#demo").innerText = ++s; }, 1000);

خب، حالا من میخوام دکمه start ام رو راه اندازی کنم، باید یه جوری به این دکمه بگم که وقتی که کلیک شدی، این تایمر به راه بیفته. من از event استفاده میکنم.

میتونم عبارت آخر کدم رو به رویداد onclick دکمه منتقل کنم

<input type="button" value="start" onclick="setInterval(function () { document.querySelector('#demo').innerText = ++s; }, 1000);" />
'use strict';
var s = 0;

هر المنت توی سند html دارای یک سری رویداد است، مثل onclick, onblur, onfocus, onmouseover, onmouseout, ....

راه دیگه اینه که یک تابع بنویسیم و تابع رو توی رویداد onclick فراخوانی کنیم.

روش تعریف تابع به این صورته:

function myFunction(param1, param2) {
 // body of function
}

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

'use strict';
var s = 0;
function showTime() {
 setInterval(function () { document.querySelector("#demo").innerText = ++s; }, 1000);
}
<input type="button" value="start" onclick="showTime()" />

ما دو گروه المنت در html داریم، یه گروه از المنتها از دو تگ تشکیل میشن که میشه بین این دو تگ متن یا عناصر html دیگه قرار داد، گروه دوم عناصری هستند که تنها از یک تگ تشکیل میشن یعنی تگ پایانی ندارند، این دسته اصولا در انتهای تگ خود </ دارند که نشان دهنده پایان تگ است.

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

دانلود PDF قسمت چهارم آموزش جاوااسکریپ

کلمات کلیدی

علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت