ما دو زبان اسکریپتی خیلی محبوب داریم که در HTML مورد استفاده قرار میگیرن، جاوا اسکریپت (Javascript) و وی بی اسکریپت (VBscript). این زبان ها به ما کمک میکنن تا صفحات HTML رو داینامیک یا پویا کنیم و همچنین تعامل بهتری با کاربر برقرار کنیم. اما باز جاوا اسکریپت محبوبتر از وی بی اسکریپت هستش و ما هم بیشترروی جاوا اسکریپت زوم میکنیم.
برای مثال از Ajax استفاده میکنیم تا کاربر مجبور به بارگذاری مجدد کل صفحه نباشه (داینامیک کردن صفحه) یا در زمان های خاص بجای اینکه برای نمایش پیامی کاربر رو به صفحه دیگه ای بفرستیم با استفاده از جاوا اسکریپت پیامی رو نمایش بدیم، منو های زیبا بسازیم و خیلی کارهای دیگه از اگر بخوام فقط بعضی هاشو نام ببرم کل صفحه پر میشه.
در این درس ما فقط نحوه استفاده از جاوا اسکریپت رو در HTML آموزش میدیم نه جاوا اسکریپت رو! توجه داشته باشید که جاوا اسکریپت با HTML اصلا قابل مقایسه نیست و برای یاد گیری این زبان باید وقت خیلی بیشتری بذارید اما میتونید از کدهای آماده ای که برنامه نویسان از قبل نوشتن استفاده کنید و در اینصورت باید حداقل دانش پایه ای از این زبان رو داشته باشید تا بتونید در صورت نیاز کمی تغییرش بدید و در صفحه بکار ببرید.
نحوه درج جاوا اسکریپت در صفحه
برای درج جاوا اسکریپت در HTML باید از تگ <Script> استفاده کنید از این تگ برای تعریف زبان سمت کلاینت استفاده میشه.
این المنت دو مشخصه مهم داره:
- Type – انتخاب نوع زبانی که میخواهیم بنویسیم.
- src – برای مشخص کردن مسیر فایل اسکریپت (در صورت نیاز).
برای اینکه زبان رو مشخص کنیم باید از مشخصه type استفاده کنیم( مثل text/ecmascript ، text/javascript) اما اگر type رو مشخص نکنید بصورت پیشفرض زبان جاوا اسکریپت انتخاب میشه.
ما میتونیم کد مورد نظرمون (جاوا اسکریپت ، وی بی اسکریپت یا…) رو تو یه فایلی ذخیره کرده و توسط مشخصه src مکانش رو مشخص کنیم( روش External) یا کدمون رو داخل همین المنت بنویسیم(روش Inline) که هر کدم مزیت خودشونو دارن مثلا وقتی کدمون زیاده بهتره که در فایل جداگانه قرار بدیم و بعد آدرس فایل رو مشخص کنیم اما پیشنهاد من اینه که سعی کنید از روش External استفاده کنید.
مثال ها
مثال اول – Inline
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>irDevs.com</title>
</head>
<body>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>");
</script>
</body>
</html>
خروجی:
Hello World!
مثال دوم – Inline
یه مثال دیگه از همین روش. بصورت زنده نتیجه رو مشاهده کنید.
تعجب نکنید! شما میتونید تو رویدادهای المنتها هم کدهای جاوا اسکریپت اجرا کنید.
درکد بالا گفتیم وقتی که روی دکمه کلیک شد (رویداد onclick) تابع Change_Color رو اجرا کن و تو این تابع کدهای مربوطه رو نوشتیم. عمدا این مثال رو آوردم تا با این روش هم آشنا بشید 😉 .
مثال سوم – External
این روش خیلی نیازی به توضیح نداره و کاملا روشنه، بجای اینکه کد تو داخل المنت بنویسید ، داخل فایلی ذخیره کنید و ادرسش رو با استفاده از مشخصه Src تعیین کنید.
محتویات فایل bg.js:
function change_Color(color){
document.body.style.background = color;
document.getElementsByTagName("button")[0].innerHTML="Background Color Changed!";
}
کد HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>irDevs.com</title>
<script type="text/javascript" src="bg.js"></script>
</head>
<body>
<button onclick="change_Color('blue')" >Change back color</button>
</body>
</html>
نتیجه اجرای این کد دقیقا مثل مثال بالا هستش.