معمولا برای ایجاد صفحات وب تعاملی، کدهای جاوااسکریپت داخل صفحات وب اجرا میشوند. برای این منظور می‌توانید کدهای جاوااسکریپت موردنظر را به طور مستقیم داخل صفحه HTML درج کنید یا صرفا به یک فایل جاوااسکریپت خارجی ارجاع دهید. در این مقاله با جزئیات روش های اضافه کردن کدهای جاوااسکریپت به صفحات HTML آشنا می‌شوید.
نحوه اضافه کردن جاوااسکریپت به صفحه HTML با کمک المان <script>
در HTML از المان و تگ <script> برای افزودن کدهای جاوااسکریپت به صفحه‌های وب استفاده می‌شود. بسته به اینکه می‌خواهید کد جاوااسکریپت را به طور مستقیم داخل سند اچ‌تی‌ام‌ال خود قرار دهید یا با ارجاع به یک جاوااسکریپت خارجی، کد را به صفحه وب اضافه کنید شیوه استفاده از المان <script> متفاوت خواهد بود.
ارجاع به جاوااسکریپت خارجی در HTML
کدهای جاوااسکریپت خارجی (یا External JavaScript) در قالب یک فایل مجزا با پسوند .js ذخیره میشوند. برای ارجاع به یک فایل .js در صفحه HTML و اجرای محتویات آن کافیست از یک المان <script> استفاده کنید که مقدار خصوصیت src در آن به نشانی فایل .js موردنظر اشاره می‌کند.
مثال زیر نمونه‌ای از یک سند HTML ساده را نمایش می‌دهد که در آن از المان <script> برای ارجاع به یک فایل جاوااسکریپت خارجی با نام script.js استفاده شده است.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>آموزش جاوااسکریپت</title>
<script src="script.js"></script>
</head>
<body>
<h1>Hello, World! Program</h1>
<button onclick="displayHelloWorld()">Say Hello</button>
</body>
</html>کد جاوااسکریپت خارجی (در اینجا محتویات فایل script.js) می‌تواند چیزی مشابه با نمونه زیر باشد. فراموش نکنید در این مثال، فایل script.js داخل همان دایرکتوری قرار می‌گیرد که سند HTML فوق در آن قرار دارد (بیشتر بخوانید: مسیر فایل ها در HTML). با توجه به مقدار خصوصیت onclick برای المان <button> و کد موجود در فایل script.js، پس از کلیک روی دکمه Say Hello پیام Hello, World! در قالب یک جعبه هشدار در پنجره مرورگر نمایش داده می‌شود.
function displayHelloWorld() {
alert("Hello, world!");
}همانطور که در مثال فوق مشاهده می‌کنید در فایل‌های جاوااسکریپت خارجی، صرفا کد JS (بدون تگ <script>) درج می‌شود.
مزایا و کاربردهای جاوااسکریپت خارجی
ارجاع به جاوااسکریپت خارجی متداول‌ترین و مناسب‌ترین روش برای افزودن JS به HTML محسوب می‌شود. استفاده از این روش، امکان افزودن یک اسکریپت به چندین سند یا صفحه HTML را فراهم می‌کند. به علاوه جاوااسکریپت‌های خارجی، ضمن جداسازی فایل اسکریپت از محتوای سند، نگه داری و ویرایش کدهای جاوااسکریپت را به سادگی امکان‌پذیر می‌کنند چرا که در این حالت لازم است تغییرات موردنیاز تنها روی فایل یا فایل‌های JS مربوطه انجام گیرد. به این ترتیب بدون نیاز به دستکاری صفحات HTML، تغییرات کدهای JS روی تمام یا مجموعه‌ای از صفحات یک سایت اعمال می‌شود. افزون بر این جداسازی محتوا از اسکریپت، مطالعه و درک کدهای جاوااسکریپت یا محتوای صفحات و همچنین تغییر محتوای صفحات را آسان‌تر می‌کند.
در این روش می‌توانید برای یک صفحه وب از چند فایل جاوااسکریپت مجزا استفاده کنید. کافیست برای هر جاوااسکریپت خارجی، یک المان <script> به سند خود اضافه کنید که به فایل JS موردنظر اشاره می‌کند.
درج کد JavaScript داخل صفحه HTML – جاوااسکریپت داخلی
شما می‌توانید در صفحات HTML به جای ارجاع به جاوااسکریپت خارجی، کد جاوااسکریپت خود را بین تگ شروع <script> و تگ پایان </script> درج کنید. از آنجایی که این کدها داخل سند HTML قرار می‌گیرند با عنوان جاوااسکریپت داخلی (یا Internal JavaScript) نیز شناخته میشوند.
مثال زیر نمونه‌ای از نحوه درج کد جاوااسکریپت در بخش <head> یک سند HTML را نمایش می‌دهد. (این مثال، شیوه درج کد جاوااسکریپت مورد استفاده در مثال قبل را به صورت اینترنال نشان می‌دهد):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>آموزش جاوااسکریپت</title>
<script>
function displayHelloWorld() {
alert("Hello, world!");
}
</script>
</head>
<body>
<h1>Hello, World! Program</h1>
<button onclick="displayHelloWorld()">Say Hello</button>
</body>
</html>کاربردها و جزئیات جاوااسکریپت داخلی
استفاده از این شیوه، امکان افزودن کدهای جاوااسکریپت به یک سند یا صفحه را بدون نیاز به یک فایل اضافی فراهم می‌کند. بنابراین اگر کدهای موردنظر طولانی نیستند و تنها برای یک صفحه کاربرد دارند می‌توانید آن‌ها را در قالب یک جاوااسکریپت داخلی به سند اضافه کنید. اما در صورتی که لازم است کدهای موردنظر در چند صفحه اچ‌تی‌ام‌ال یا کل صفحات یک سایت اجرا شوند در روش اینترنال مجبور می‌شوید آن‌ها را به صورت جداگانه به هر صفحه اضافه کنید. این موضوع علاوه بر افزایش حجم فایل‌های HTML (ناشی از تکرار کد در هر فایل)، باعث می‌شود تغییر و ویرایش کدهای جاوااسکریپت نیز دشوارتر شود. چرا که در صورت نیاز، هر تغییر لازم است روی تمام سندها انجام شود. در نتیجه برای چنین حالتی استفاده از جاوااسکریپت خارجی بهترین گزینه خواهد بود.
چند نکته تکمیلی
نکته اول: شما می‌توانید کد جاوااسکریپت داخلی و خارجی را در بخش <head> یا <body> سند HTML درج کنید.
نکته دوم: شما می‌توانید هر تعداد اسکریپتی که می‌خواهید را با کمک المان های <script> متعدد به صفحه اضافه کنید. این موضوع چه برای JavaScript های داخلی و چه برای JavaScript های خارجی صادق است.
نکته سوم: ممکن است گاهی اوقات (برای مثال در کتاب‌های راهنمای قدیمی JavaScript) در تگ شروع <script> با مقدار “text/javascript” برای خصوصیت type روبرو شوید. نمونه این حالت را در مثال زیر مشاهده می‌کنید. لازم به ذکر است امروزه در مورد کدهای جاوااسکریپت، نیازی به درج خصوصیت type با مقدار فوق برای المان های <script> وجود ندارد.
<script type="text/javascript">
function displayHelloWorld() {
alert("Hello, world!");
}
</script>
نکته چهارم: درج المان <script> برای ارجاع به JavaScript خارجی در هر نقطه‌ای از سند HTML مشابه آنست که کد جاوااسکریپت را دقیقا در همان نقطه درج کنید.
بازگشت به فهرست مجموعه آموزشی JavaScript
بازگشت به فهرست مجموعه آموزشی HTML
