اسکریپت یک قطعه کوچک از برنامه است که می‌تواند تعاملی را به وب‌سایت شما اضافه کند. به عنوان مثال، یک اسکریپت می‌تواند یک پنجره هشدار (Alert Box) را ایجاد کند یا یک منوی کشویی را ارائه دهد. این اسکریپت می‌تواند با استفاده از زبان‌های جاوااسکریپت یا وی‌بی‌اسکریپت (VBScript) نوشته شود.
شما می‌توانید انواع مختلفی از توابع کوچک، به نام کننده‌های رویداد (Event Handlers) را با استفاده از هر یک از زبان‌های اسکریپت نویسی بنویسید و سپس می‌توانید این توابع را با استفاده از ویژگی‌های HTML فراخوانی کنید.
در حال حاضر، تنها جاوااسکریپت و چارچوب‌های مرتبط با آن توسط اکثر توسعه‌دهندگان وب استفاده می‌شوند و وی‌بی‌اسکریپت حتی توسط برخی از مرورگرهای اصلی پشتیبانی نمی‌شود.
شما می‌توانید کد جاوااسکریپت را در یک فایل جداگانه نگهداری کنید و سپس آن را در هر جایی که نیاز است اضافه کنید، یا می‌توانید قابلیت‌های مورد نیاز را در داخل سند HTML خود تعریف کنید. بیایید هر دو حالت را به ترتیب با مثال‌های مناسب ببینیم.
جاوا اسکریپت خارجی (External JavaScript)
اگر قصد دارید یک قابلیت را تعریف کنید که در اسناد HTML مختلف استفاده خواهد شد، بهتر است آن قابلیت را در یک فایل جاوااسکریپت جداگانه نگهداری کرده و سپس آن فایل را در اسناد HTML خود قرار دهید. یک فایل جاوااسکریپت دارای پسوند .js خواهد بود و با استفاده از تگ <script> در فایل‌های HTML قرار داده می‌شود.
مثال تصور کنید که ما یک تابع کوچک با استفاده از جاوااسکریپت در فایل 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>
</html>در این مثال، تابع Hello() که در فایل جاوااسکریپت خارجی تعریف شده است، را با کلیک بر روی دکمه فراخوانی می‌کنیم.
اسکریپت داخلی (Internal Script)
اسکریپت داخلی، روشی است که می‌توانید کدهای اسکریپت خود را مستقیماً در سند HTML خود بنویسید. معمولاً کدهای اسکریپت را در قسمت هدر سند قرار می‌دهیم از طریق تگ <script>، اما در واقعیت هیچ محدودیت خاصی وجود ندارد و می‌توانید کد منبع خود را در هر قسمتی از سند قرار دهید، با شرط اینکه درون تگ <script> باشد.
مثال
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Internal Script</title>
<base href = "https://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>در این مثال، کد اسکریپت داخلی داخل تگ <script> در هدر سند قرار دارد. این کد یک تابع ساده به نام “Hello” تعریف می‌کند که یک پنجره هشدار با پیام “Hello, World” را نمایش می‌دهد. سپس از آن تابع در یک دکمه با متن “Click Me” استفاده شده است که با کلیک بر روی آن، پیام نمایش داده می‌شود.
دستگیره‌های رویدادی (Event Handlers)
دستگیره‌های رویدادی (Event Handlers) به معنای توابعی هستند که به رویدادهای موس یا کیبورد مرتبط می‌شوند. می‌توانید منطق کسب و کار خود را در داخل دستگیره‌های رویدادی تعریف کنید که ممکن است از یک خط تا هزاران خط کد متغیر باشد.
مثال زیر نحوه نوشتن یک دستگیره رویدادی را نشان می‌دهد. ما یک تابع ساده به نام “EventHandler” را در هدر سند تعریف می‌کنیم. این تابع را زمانی صدا می‌زنیم که هر کاربر ماوس را روی یک پاراگراف می‌آورد.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Event Handlers Example</title>
<base href = "https://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>در این مثال، یک تابع با نام “EventHandler” که یک پنجره هشدار با متن “I’m event handler!!” نمایش می‌دهد، در داخل تگ <script> در هدر سند تعریف شده است. سپس از این تابع برای رویداد mouseover یک پاراگراف استفاده شده است. وقتی کاربر موس را روی پاراگراف می‌آورد، پنجره هشدار نمایش داده می‌شود.
مخفی کردن اسکریپت‌ها از مرورگرهای قدیمیتر (Hide Scripts from Older Browsers)
برای مخفی کردن اسکریپت‌ها از مرورگرهای قدیمیتر، می‌توانید از تگ‌های HTML کامنت استفاده کنید. اگرچه اکثر مرورگرها امروزی JavaScript را پشتیبانی می‌کنند، اما برخی از مرورگرهای قدیمیتر این کار را نمی‌کنند. اگر یک مرورگر JavaScript را پشتیبانی نکند، به جای اجرای اسکریپت شما، کد را به کاربر نمایش می‌دهد. برای جلوگیری از این اتفاق، می‌توانید به راحتی کامنت‌های HTML را دور از اسکریپت قرار دهید، همانطور که در زیر نشان داده شده است.
مثال JavaScript:
<script type = "text/JavaScript">
<!--
document.write("Hello JavaScript!");
//-->
</script>مثال VBScript:
<script type = "text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
</script>در این مثال‌ها، اسکریپت‌ها با استفاده از تگ‌های کامنت HTML (<!-- و //--> برای JavaScript و <!-- و '--> برای VBScript) مخفی شده‌اند. این تگ‌های کامنت می‌گویند به مرورگر که باید محتوای داخل آن‌ها را نادیده بگیرد.
تگ noscript
تگ <noscript> برای ارائه اطلاعات جایگزین به کاربرانی استفاده می‌شود که مرورگرهایشان اسکریپت را پشتیبانی نمی‌کنند یا اینکه اسکریپت را در مرورگر خود غیرفعال کرده‌اند. این تگ اطلاعاتی را که درون آن قرار می‌دهید، فقط به کاربرانی نمایش می‌دهد که مرورگر آن‌ها اجازه اجرای اسکریپت را ندارد یا این که اسکریپت در آن غیرفعال شده است.
مثال JavaScript:
<script type = "text/JavaScript">
<!--
document.write("Hello JavaScript!");
//-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>مثال VBScript:
<script type = "text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
</script>
<noscript>Your browser does not support VBScript!</noscript>در این مثال‌ها، ابتدا یک اسکریپت به زبان JavaScript و یا VBScript قرار داده شده است. سپس، تگ <noscript> دارای متن “مرورگر شما اسکریپت را پشتیبانی نمی‌کند” است که به کاربرانی که مرورگر آن‌ها اسکریپت را پشتیبانی نمی‌کند یا آن را غیرفعال کرده‌اند، نمایش داده می‌شود.
زبان اسکریپت پیش‌فرض (Default Scripting Language)
ممکن است در برنامه‌های شما به شرایطی برخورد کنید که بخواهید چندین فایل اسکریپت را در صفحه خود قرار دهید و در نتیجه از چندین تگ <script> استفاده کنید. شما می‌توانید یک زبان اسکریپت پیش‌فرض برای همه تگ‌های اسکریپت خود مشخص کنید. این کار از شما جلوگیری می‌کند که هر بار که از یک تگ <script> استفاده می‌کنید، زبان را مشخص کنید. در زیر یک مثال آورده شده است:
<meta http-equiv = "Content-Script-Type" content = "text/JavaScript" />توجه کنید که شما همچنان می‌توانید با مشخص کردن زبان در داخل تگ <script>، زبان پیش‌فرض را لغو کنید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام