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

[سیده آمین ارمان]

جاوا اسکریپت نیز همانند هر زبان دیگری، دارای قوانین و دستورات خاص خود است. پیش از آن که بتوانید برنامه نویسی به زبان جاوا اسکریپت را آغاز کنید، می بایست با برخی قوانین این زبان آشنا شوید که در این آموزش قصد داریم مهم ترین آن ها را مورد بررسی قرار دهیم.

- جاوا اسکریپت اصطلاحا Case-sensitive بوده یعنی به بزرگی و کوچکی حروف حساس است. در این سری از آموزش ها، این موضوع را به دفعات تکرار خواهیم کرد چراکه یکی از رایج ترین مشکلات کسانی که می خواهند جاوا اسکریپت را فرا بگیرند، عدم توجه به این قانون است. برای جاوا اسکریپت، دو کلمه ی «Hello» و «hello» کاملاً مجزا و متفاوت هستند.

- جاوا اسکریپت برای «فضاهای سفید» ارزشی قائل نیست. فضاهای سفید شامل اسپِیس ها، تب ها و حتی خطوط خالی می شود؛ به طور کلی هر کاراکتری که یک نشانه گر گرافیکی بر روی مانیتور نداشته باشد، برای جاوا اسکریپت بی اهمیت است. زمانی که با جاوا اسکریپت کار می کنید، مهم نیست که در درون کد خود از یک اسپیس، دو اسپیس، یک تب و یا حتی یک خط خالی اضافه (در اغلب موارد) استفاده کنید چرا که مفسر زبان جاوا اسکریپت این فضاهای سفید را نادیده می گیرد. تنها مورد استثنای این قانون زمانی است که شما می خواهید متنی را در جاوا اسکریپت «Print» کنید. در این مورد، تمامی فضایی که شما در کد خود قرار دهید، در نتیجه ی نهایی نیز نشان داده خواهد شد. بهترین راهکار در رابـ ـطه با فضاهای سفید آن است که تنها به اندازه ای از اسپیس ها و فاصله ها استفاده کنید که کد شما تمیز و خوانا باشد. همچنین، فراموش نکنید که در نحوه ی استفاده از فاصله های خود یکسان عمل کنید تا در آینده دچار سردرگمی نشوید.

- حواستان به Keyword ها یا «کلمات رزرو شده» باشد. برخی کلمه ها برای زبان جاوا اسکریپت دارای معنای خاصی هستند. لیست این کلمات را در فصل سوم برای شما خواهیم آورد اما فعلاً بدانید که کلماتی مانند function ،while ،break و with در جاوا اسکریپت دارای معنای خاص بوده و نمی توان از آن ها برای نام متغیرها استفاده کرد.

- جاوا اسکریپت علاقه ی خاصی به Semicolon (سمیکالن) یا نقطه ویرگول دارد. برنامه ای که با زبان جاوا اسکریپت می نویسیم، از «دستورات» مختلفی تشکیل شده است. می توان گفت که این دستورات، همان «جمله ها» در زبان فارسی هستند. همان طورکه جمله ها، بلوک های سازنده ی پاراگراف ها هستند، دستورات نیز بلوک های ساختاری زبان جاوا اسکریپت هستند. همواره در پایان یک دستور جاوا اسکریپت، یک سمیکالن قرار می گیرد.

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

- آن را مستقیماً به شکل یک Attribute (اتریبیوت) یا «مشخصه»، در داخل تگ های HTML قرار دهید.
- آن را در درون تگ های <script> بگذارید.
- آن را در یک فایل جداگانه قرار داده و سپس در فایل HTML، آن را فراخوانی کنید.

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

فراخوانی جاوا اسکریپت به عنوان Attribute در اچ تی ام ال
Attribute (اتریبیوت) یا «مشخصه» به ویژگی های هر یک از تگ های اچ تی ام ال گفته می شود که می تواند مشخصات و یا دستورات خاصی را به آن تگ نسبت دهد. در اینجا می خواهیم جاوا اسکریپت را همچون یک مشخصه ی خاص، به یکی از تگ های درون اچ تی ام ال نسبت دهیم.

اچ تی ام ال دارای اتریبیوت های خاص متعددی است که برای اجرای کدهای جاوا اسکریپت طراحی شده اند. این اتریبیوت ها زمانی که اتفاقی در صفحه ی وب رخ می دهد و یا آن که یوزر کاری می کند، فعال می شوند. در اینجا مثالی از یک اتریبیوت خاص اچ تی ام ال آورده ایم که به Event (ایونت) یا «رویداد» کلیک موس واکنش نشان می دهد:

<button id="bigButton" onclick="alert('Hello World!');">Click Here</button>
در این نمونه، زمانی که کاربر بر روی دکمه ی ایجاد شده توسط تگ HTML بالا کلیک می کند، یک پنجره ی popup ظاهر شده و کلمات "!Hello World" را نمایش می دهد. زبان اچ تی ام ال بیش از 70 اتریبیوت متفاوت برای ایونت ها دارا است که آن هایی که بیش از بقیه کاربردی هستند را در جدول زیر آورده ایم:

توضیح اتریبیوت
پس از پایان لود شدن صفحه، اسکریپت را اجرا می کند. onload
زمانی که کاربر روی تگی فوکوس کرده باشد، اسکریپت را اجرا می کند (مانند زمانی که بر روی یک تکست باکس کلیک می کنیم.) onfocus
زمانی که کاربر دیگر روی تگ فوکوس ندارد. اسکریپت را اجرا می کند (مانند زمانی که داخل یک input چیزی می نویسیم سپس برای کاری دیگر، در جای دیگری کلیک می کنیم و دیگر روی آن input فوکوس نداریم.) onblur
زمانی که مقدار یک المنت تغییر کند، اسکریپت را اجرا می کند. onchange
زمانی که یک متن انتخاب می شود، اسکریپت را اجرا می کند. onselect
زمانی که یک فُرم ارسال می شود، اسکپریت را اجرا می کند. onsubmit
زمانی که کاربر در حال فشردن یک کلید کیبورد باشد، اسکریپت را اجرا می کند. onkeydown
زمانی که کاربر یک کلید کیبورد را فشار دهد، اسکریپت را اجرا می کند. onkeypress
زمانی که کاربر یک کلید کیبورد را رها می کند، اسکریپت را اجرا می کند. onkeyup
زمانی که کاربر بر روی یک المنت کلیک می کند، اسکریپت را اجرا می کند. onclick
زمانی که یک المنت در حال Drag (دِرَگ) یا کشیده شدن توسط موس باشد، اسکریپت را اجرا می کند. ondrag
زمانی که یک المنت دِرَگ شده، رها می شود، اسکریپت را اجرا می کند. ondrop
زمانی که نشانه گر موس کاربر بر روی یک المنت قرار می گیرد، اسکریپت را اجرا می کند. onmouseover
هشدار
با آن که استفاده از این اتریبیوت ها بسیار آسان است، اما این روش به عنوان یک روش نامناسب و نه چندان ایده آل، توسط برنامه نویسان جاوا اسکریپت تلقی می شود. در این سری از آموزش های جاوا اسکرپیت در سکان آکادمی، تنها بدین دلیل از آن ها نام بـرده شده که یادگیری آن ها ساده بوده و به طور گسترده از آن ها استفاده می شود. با این حال، فعلاً بهتر است بدانید که روش بهتری نیز برای کنترل ایونت ها با کمک جاوا اسکریپت وجود دارد که آن را در فصل یازدهم فرا خواهیم گرفت.
فراخوانی جاوا اسکریپت در درون تگ script
المنت یا تگ <script> این امکان را به شما می دهد که از کدهای جاوا اسکریپت در داخل فایل HTML استفاده کنید. معمولاً تگ های script در درون بخش head اچ تی ام ال قرار می گیرند و در حقیقت، این جایگذاری به نوعی یک قانون برای اجرای کدهای جاوا اسکریپت بود اما امروزه تگ های script می توانند هم در درون بلوک head و هم در درون body صفحات اچ تی ام ال قرار بگیرند. ساختار المنت script بسیار ساده است:

<script>
(insert your JavaScript codes here)
</script>
نمونه ای از این نوع فراخوانی جاوا اسکریپت را در آموزش قبلی مشاهده کردیم. حال در اینجا مثالی دیگر از فراخوانی جاوا اسکریپت با استفاده از تگ های script را مرور می کنیم اما این بار، تگ های script را در انتهای بلوک body قرار می دهیم:

<!DOCTYPE HTML>
<html>
<head>
<title>Hello, HTML!</title>
</head>
<body>
<h1>Let's Count to 10 with JavaScript!</h1>
<p id="theCount"></p>
<script>
var count = 0;
while (count < 10) {
count++;
document.getElementById("theCount").innerHTML+= count + "<br>";
}
</script>
</body>
</html>
اگر در سابلایم یک فایل جدید درست کرده، کد بالا را در آن قرار دهید و سپس آن را در یک مرورگر اجرا کنید، خواهید دید که این مثال نیز دقیقاً همان کاری را انجام خواهد داد که مثال قبلی انجام می داد، حتی با وجود این که جای تگ های script تغییر پیدا کرده اند.

جایگذاری Script و زمان اجرای جاوا اسکریپت
مرورگرها معمولاً به همان ترتیب که شما یک متن را می خوانید، یعنی از بالا به پایین، محتویات یک صفحه ی وب را لود می کنند. بعضی وقت ها شما می خواهید که تمام کدهای صفحه لود شده و سپس اسکریپت موردنظرتان لود شود. در مثال آموزش پیشین، با استفاده از اتریبیوت onload در یکی از المنت های body این کار را انجام دادیم. یکی دیگر از روش های مرسوم برای ایجاد تأخیر در اجرای اسکریپت آن است که صرفاً کد خود را در انتهای فایل قرار دهید، یعنی دقیقاً همانند مثال بالا.

محدودیت های جاوا اسکریپت در درون تگ های script
با آن که این روش در مقایسه با به کارگیری اتریبیوت ایونت ها بسیار قابل قبول تر و رایج تر است، اما قرار دادن کدهای جاوا اسکریپت در داخل script نیز محدودیت هایی به همراه دارد. بزرگترین محدودیتی که این روش برای ما به وجود می آورد، آن است که کدهای فراخوانی شده بدین روش را تنها می توان درون همان صفحه ای که المنت script قرار گرفته، استفاده کرد. به بیانی دیگر، اگر کدهای جاوا اسکریپت را در درون تگ <script> بگذاریم، می بایست این تگ را دقیقاً در تمامی صفحات دیگر نیز کپی/پیست کنیم. حال اگر یک وب سایت دارای صدها صفحه ی مختلف باشد، می توان تصور کرد که ایجاد تغییرات و یا دیباگ کردن این کدها چه کابوسی خواهد بود!

پس چه زمان از <script> استفاده کنیم؟
البته این روش، کاربردهای مخصوص به خود را نیز دارد. برخی اوقات تکه کدهای کوچکی وجود دارند که نیاز است تا به تکه کدهایی دیگر دسترسی پیدا کنند و این کدها به ندرت (یا ترجیحاً هرگز) آپدیت نمی شوند. در این شرایط اگر از المنت script برای فراخوانی جاوا اسکریپت استفاده کنیم، نه تنها مشکلی پیش نخواهد آمد بلکه سرعت لود شدن صفحه نیز افزایش خواهد یافت چرا که وب سرور، ریکوئست های کمتری را به سرور ارسال خواهد کرد.

وب اپلیکیشن های تک صفحه ای، همان طور که از نامشان پیداست، تنها دارای یک صفحه هستند و بهترین روش فراخوانی جاوا اسکریپت در این موارد، استفاده از المنت script خواهد بود چرا که همواره تنها یک مکان برای ایجاد و یا تغییر کدها وجود خواهد داشت.

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

فراخوانی جاوا اسکریپت از طریق فایل های اکسترنال
سومین و رایج ترین راه برای فراخوانی کدهای جاوا اسکریپت در HTML، استفاده از اتریبیوت «src» در المنت script است.

یک المنت script که دارای اتریبیوت src باشد، دقیقاً همانند یک تگ script با محتویات جاوا اسکریپت عمل می کند، تنها با این تفاوت که اگر از اتریبیوت src استفاده کنیم، کدهای جاوا اسکریپت از طریق یک فایل جداگانه و خارج از HTML فراخوانی خواهند شد. در پایین، نمونه ای از یک المنت script به همراه اتریبیوت src را آورده ایم:

<script src="myScript.js"></script>
در این مورد، ما یک فایل جداگانه به نام «myScript.js» داخل همان فولدری که فایل HTML قرار دارد، خواهیم داشت. مزیت استفاده از فایل جداگانه برای فراخوانی کدهای جاوا اسکریپت آن است که:

- فایل HTML ما تمیزتر و خواناتر خواهد بود.
- زندگی را برای ما ساده تر خواهد کرد! چراکه به هنگام رفع یک مشکل و یا ایحاد تغییرات، تنها یک فایل را تغییر خواهیم داد.

ساخت یک فایل js
ساخت یک فایل جداگانه جاوا اسکریپت، پروسه ای مشابه با ساخت یک فایل HTML و یا هر فایل دیگری دارد. برای انتقال کدهای جاوا اسکریپت مثال قبلی (MyFristProgram.html) به یک فایل جداگانه، می بایست مراحل زیر را انجام دهیم:

- در سابلایم، تب File و سپس New File را انتخاب می کنیم.
تمامی محتوای درون تگ های آغازین و پایانی script را از فایل MyFirstProgram.html کپی کرده و در درون فایل جدیدی که ساخته ایم، پِیست می کنیم (توجه داشته باشید که فایل های جداگانه ی جاوا اسکریپت دیگر نیازی به تگ های script ندارند و تنها شامل خود کد جاوا اسکریپت می شوند.)
- فایل جدید را با نام "countToTen.js" در همان فولدری که MyFirstProgram.html را ذخیره کردیم، Save می کنیم.
- به المنت script در درون فایل MyFirstProgram.html، اتریبیوت src را اضافه می کنیم:

<script src="countToTen.js"></script>
بدین ترتیب فایل MyFirstProgram.html ما در نهایت بدین شکل خواهد شد:

<!DOCTYPE HTML>
<html>
<head>
<title>Hello, HTML!</title>
<script src="countToTen.js"></script>
</head>
<body onload="countToTen();">
<h1>Let's Count to 10 with JavaScript!</h1>
<p id="theCount"></p>
</body>
</html>
فایل جاوا اسکریپت countToTen.js نیز مانند زیر خواهد بود:

function countToTen() {
var count = 0;
while (count < 10) {
count++;
document.getElementById("theCount").innerHTML += count + "<br />";
}
}
پس از آن که هر دو فایل را ذخیره کردید، فایل های شما در سایدبار سابلایم، همانند شکل زیر، نمایش داده خواهند شد:



مدیریت فایل های js
گاهی اوقات، حجم فایل جداگانه ی ایجاد شده برای کدهای جاوا اسکریپت بسیار زیاد می شود. در این زمان ها بهتر است تا آن را به فایل های کوچکتر با عملکرد مشخص تقسیم کنیم. برای نمونه، یک فایل می تواند مربوط به فانکشن های ورود کاربران باشد و دیگری مربوط به عملکردهای اصلی وبلاگ. با این حال، برای برنامه های کوچک معمولاً داشتن یک فایل جداگانه کفایت می کند و بسیاری از برنامه نویسان نیز از نام های ساده و رایج برای آن استفاده می کنند؛ مثلاً نام هایی مانند "app.js"، "main.js" یا "scripts.js".

نیازی نیست که همیشه فایل های جاوا اسکریپت را در همان فولدری که فایل HTML قرار دارد، ذخیره کنیم. در حقیقت، ما پیشنهاد می کنیم که یک فولدر جداگانه مخصوص فایل های js ایجاد کرده و تمامی کدهای جاوا اسکریپت را در آن فولدر نگهداری کنید. اکثر برنامه نویسان دنیا، این فولدر را "js" می نامند. با دنبال کردن مراحل زیر می توانیم یک فولدر js در درون پروژه ی خود ایجاد کرده و فایل countToTen.js را به درون آن انتقال دهیم:

- در سایدبار ادیتور سابلایم، بر روی نام پروژه کلیک راست می کنیم و گزینه ی New Folder را انتخاب می کنیم.
- در کادری که در پایین صفحه ظاهر شده است، نام فولدر جدید را وارد می کنیم.
- این فولدر را "js" بنامید و سپس کلید Enter را فشار دهید تا این فولدر نیز در کنار باقی فایل ها در سایدبار ایجاد شود.
- فایل countToTen.js را باز کرده و از تب File، گزینه ی Save As را انتخاب می کنیم.
- این فایل را در درون فولدر js ذخیره می کنیم.
- سپس بر روی ورژن قبلی فایل countToTen.js که بیرون از فولدر js قرار دارد، کلیک راست می کنیم و گزینه ی Delete File را انتخاب می کنیم.
- حال در درون فایل MyFirstProgram.html، المنت script را آپدیت می کنیم تا جایگاه جدید فایل js را بیابد:

<script src="js/countToTen.js"></script>
اکنون اگر همه چیز به درستی پیش رفته باشد، با اجرا کردن فایل MyFirstProgram.html در مرورگر خود، هیچگونه تغییری در نتیجه ی نهایی مشاهده نخواهید کرد و کدهای جاوا اسکرپیت به درستی اجرا خواهند شد.