آموزش HTML - جاوااسکریپت

جاوااسکریپت به شما امکان می‌دهد صفحات HTML پویا و تعاملی ایجاد کنید. جاوااسکریپت (JavaScript) یک زبان برنامه‌نویسی سطح بالا و فناوری اصلی در توسعه وب است.

اسکریپت (Script) بخش کوچکی از یک برنامه است که می‌تواند به وب‌سایت‌های ما قابلیت تعامل اضافه کند. برای مثال، یک اسکریپت می‌تواند پیام هشداری را در یک کادر بازشو نمایش دهد یا بر اساس شرایط خاصی، مانند کلیک کردن کاربر روی یک دکمه، یک منوی کشویی ارائه کند. این اسکریپت را می‌توان با استفاده از جاوااسکریپت یا وی‌بی‌اسکریپت نوشت. امروزه بیشتر توسعه‌دهندگان وب فقط از جاوااسکریپت (JavaScript) و چارچوب‌های مرتبط با آن استفاده می‌کنند؛ وی‌بی‌اسکریپت (VBScript) حتی در مرورگرهای اصلی نیز پشتیبانی نمی‌شود.

افزودن جاوااسکریپت به HTML

روش‌های مختلفی برای افزودن اسکریپت‌ها (جاوااسکریپت) به سند HTML وجود دارد. می‌توانیم کد جاوااسکریپت را در فایلی جداگانه نگه داریم و سپس هر جا که لازم بود آن را وارد کنیم؛ همچنین می‌توانیم قابلیت موردنظر را مستقیماً در خود سند HTML تعریف کنیم.

می‌توانید با استفاده از تگ <script> جاوااسکریپت را به یک سند HTML اضافه کنید. روش‌های مختلف افزودن جاوااسکریپت به یک صفحه HTML عبارت‌اند از:

• جاوااسکریپت درون‌خطی (Inline JavaScript)
• جاوااسکریپت داخلی (Internal JavaScript)
• جاوااسکریپت خارجی (External JavaScript)

بیایید هر یک از این روش‌ها را به‌ترتیب و همراه با مثال‌های مناسب بررسی کنیم.

نوشتن جاوااسکریپت درون‌خطی

می‌توانید کد جاوااسکریپت را مستقیماً در ویژگی‌های مختلف یک عنصر HTML، مانند onclick، onload یا ویژگی‌های دیگر، اضافه کنید.

مثال

در مثال زیر، اسکریپتی می‌نویسیم که با کلیک روی دکمه، عبارت "Hi there!" را نمایش می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>Example of Inline JavaScript</title>
</head>

<body>
  <button onclick="alert('Hi there!')">Click Me</button>
</body>

</html>

نوشتن جاوااسکریپت داخلی

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

مثال

در مثال زیر، کد جاوااسکریپت داخلی را در صفحه HTML می‌نویسیم؛ این کد با کلیک روی دکمه، عبارت "Hello, World" را نمایش می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>JavaScript Internal Script</title>
   <base href="http://www.tutorialspoint.com/" />
   <script type="text/JavaScript"> function Hello(){
      alert("Hello, World");
   }
   </script>
</head>
<body>
   <input type="button" onclick="Hello();" name="ok" value="Click Me" />
</body>
</html>

افزودن جاوااسکریپت خارجی

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

برای وارد کردن (افزودن) یک فایل جاوااسکریپت خارجی، از تگ <script> استفاده می‌شود و مسیر فایل را در ویژگی src قرار می‌دهیم. همچنین باید ویژگی type را با مقدار "text/javascript" تعریف کنید.

مثال

فرض کنید تابع کوچکی را با استفاده از جاوااسکریپت در فایل script.js تعریف کرده‌ایم که کد آن به شکل زیر است:

function Hello() {
   alert("Hello, World");
}

اکنون بیایید از فایل جاوااسکریپت خارجی بالا در سند HTML زیر استفاده کنیم:

<!DOCTYPE html>
<html>
<head>
   <title>JavaScript External Script</title>
   <script src="/html/script.js" type="text/JavaScript" />
   </script>
</head>
<body>
   <input type="button" onclick="Hello();" name="ok" value="Click Me" />
</body>undefined
</html>

مدیریت‌کننده‌های رویداد

مدیریت‌کننده‌های رویداد (Event handlers) در واقع توابعی هستند که تعریف می‌شوند و می‌توان آن‌ها را در واکنش به هر رویداد ماوس یا صفحه‌کلید فراخوانی کرد. می‌توانیم هر نوع منطق کاری را در مدیریت‌کننده رویداد تعریف کنیم؛ این منطق می‌تواند از یک خط کد تا هزاران خط کد متغیر باشد.

مثال

مثال زیر نحوه نوشتن یک مدیریت‌کننده رویداد را توضیح می‌دهد. قصد داریم تابع ساده‌ای به نام EventHandler() را در بخش سرآیند سند بنویسیم. هنگامی که کاربر نشانگر ماوس را روی یک پاراگراف قرار دهد، این تابع را فراخوانی خواهیم کرد:

<!DOCTYPE html>
<html>
<head>
   <title>Event Handlers Example</title>
   <base href="http://www.tutorialspoint.com/" />
   <script type="text/JavaScript"> function EventHandler(){
      alert("I'm event handler!!");
   }
   </script>
</head>
<body>
   <p onmouseover="EventHandler();">Bring your mouse here to see an alert</p>
</body>
</html>

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

پنهان کردن اسکریپت‌ها از مرورگرهای قدیمی‌تر

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

مثال

در مثال زیر، نشان می‌دهیم که چگونه می‌توانید اسکریپت‌ها (جاوااسکریپت و وی‌بی‌اسکریپت) را از دید مرورگرهای قدیمی‌تر پنهان کنید:

مثال جاوااسکریپت:

<script type="text/JavaScript">
   <!--
   document.write("Hello JavaScript!");
   //-->
</script>

مثال وی‌بی‌اسکریپت:

<script type="text/vbscript">
   <!--
   document.write("Hello VBScript!")
   '-->
</script>

عنصر <noscript>

برای کاربرانی که مرورگرهایشان از اسکریپت‌ها پشتیبانی نمی‌کند یا اسکریپت‌ها را در مرورگر خود غیرفعال کرده‌اند، می‌توانیم با استفاده از تگ <noscript> محتوای جایگزین را در صفحه وب قرار دهیم؛ همان‌طور که در مثال زیر نشان داده شده است.

مثال

در مثال زیر، نحوه استفاده از تگ <noscript> برای جاوااسکریپت و وی‌بی‌اسکریپت را نشان می‌دهیم:

مثال جاوااسکریپت:

<script type="text/JavaScript">
   <!--
   document.write("Hello JavaScript!");
   //-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>

مثال وی‌بی‌اسکریپت:

<script type="text/vbscript">
   <!--
   document.write("Hello VBScript!")
   '-->
</script>
<noscript>Your browser does not support VBScript!</noscript>

زبان اسکریپت‌نویسی پیش‌فرض

ممکن است در شرایطی لازم باشد چندین فایل اسکریپت را وارد کنیم و در نهایت از چندین تگ <script> استفاده کنیم. می‌توانیم یک زبان اسکریپت‌نویسی پیش‌فرض برای همه تگ‌های اسکریپت به‌صورت یکجا مشخص کنیم. این کار باعث می‌شود هر بار که در صفحه از تگ اسکریپت استفاده می‌کنیم، نیازی به تعیین مجدد زبان نداشته باشیم.

مثال

مثال زیر نحوه استفاده از زبان اسکریپت‌نویسی پیش‌فرض را در یک صفحه HTML نشان می‌دهد:

<meta http-equiv="Content-Script-Type" content="text/JavaScript" />

توجه داشته باشید که همچنان می‌توانید با مشخص کردن یک زبان در تگ <script>، تنظیم پیش‌فرض را تغییر دهید.

تگ‌های اسکریپت در HTML

دو تگ زیر، تگ‌های مرتبط با اسکریپت هستند که در سند HTML استفاده می‌شوند: