در جلسه قبلی آموزش HTML با متا تگ آشنا شدیم. در این بخش قصد داریم نحوه کار با تگ script در html را یاد بگیریم.
تگ <script> برای اضافه یا اشاره کردن به جاواسکریپت, داخل یک سند HTML برای افزودن قابلیت تعامل یا تغییر رفتار صفحه وب استفاده می شود.
اسکریپت نویسی سمت کاربر (client-side)
اسکریپت نویسی سمت کاربر اشاره به نوعی از برنامه کامپیوتری دارد که در سمت مرورگر وب کاربر اجرا می شود. جاوااسکریپت (Javascript) معروف ترین زبان اسکریپت نویسی سمت کلاینت بر روی وب است.
استفاده های معمول از جاوااسکریپت شامل اعتبارسنجی فرم, ساخت یک پیام پاپ-آپ, گالری تصاویر, اسلایدر, تغییر داینامیک محتوا, ایجکس و غیره.. است.
افزودن یک اسکریپت به سند HTML
المان <script> برای تعریف یک اسکریپت سمت کاربر استفاده می شود.
اسکریپت در مثال زیر, متن Hello World را در خروجی HTML با استفاده از تگ script در html ایجاد می کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Embedded JavaScript Example</title> </head> <body> <script type="text/javascript"> document.write("Hello World!"); </script> </body> </html> |
نکته: بطور ایده آل, اسکریپت ها باید در پایین صفحه بعد از همه المان ها قرار بگیرید, چراکه اسکریپت ها امکان دانلود موازی (همزمان) را بلاک می کنند. پس این کار باعث افزایش سرعت لود صفحات وب می شود.
فراخوانی یک اسکریپت بیرونی
شما می توانید اسکریپت خود را در یک فایل جداگانه قرار داده و سپس با استفاده از ویژگی src در تگ script در html داخل صفحه وب خود لود کنید.
این کار بسیار مفید است اگر قصد دارید که یک اسکریپت یکسان را در اختیار داکیومنت های مختلف یا همان صفحات متفاوت قرار بدید.
بنابراین این کار از تکرار دوباره همان عملیات جلوگیری می کند و توسعه و نگهداری سایت را بسیار آسان تر می کند
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>External JavaScript Example</title> </head> <body> <script type="text/javascript" src="hello.js"></script> </body> </html> |
تگ noscript در html
المان <noscript> برای قرار دادن یک متن جایگزین برای کاربرانی که اسکریپت در مرورگر آنها غیرفعال است یا مرورگری دارند که اسکریپت سمت کلاینت را پشتیبانی نمی کنید (در این روزها , این مورد آخری تقریبا احتمالش صفر است.)
تگ <noscript> می تواند تمام المان های HTML که می توانید در تگ body داشته باشید, را شامل شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>No-script Example</title> </head> <body> <script type="text/javascript"> document.write("Hello World!"); </script> <noscript> <p>Sorry, your browser does not support JavaScript!</p> </noscript> </body> </html> |
نکته: محتوای داخل المان noscript فقط زمانی که اسکریپت ها در مرورگر کاربر غیرفعال یا پشتیبانی نشوند, نمایش داده خواهد شد.
برای یادگیری جاوااسکریپت می توانید کتاب آموزش javascript را به رایگان دانلود و مطالعه کنید.
امیدوارم در این بخش آموزش HTML , از تگ script در html نهایت استفاده را برده باشید.
در بخش بعدی در مورد استفاده از Entity ها در HTML یاد می گیریم.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
