استفاده از جاوا اسکریپت (JavaScript) در زبان نشانه گذاری HTML

زمان مطالعه

5 دقیقه

تعداد بازدید

390

تعداد پرسش ها

افزودن به لیست علاقه مندی ها

برچسب ها :

اشتراک گذاری این مطلب

دسته بندی مطالب

استفاده از جاوا اسکریپت (JavaScript) در زبان نشانه گذاری HTML

زمان مطالعه

5 دقیقه

تعداد بازدید

390

تعداد پرسش ها

افزودن به لیست علاقه مندی ها

برچسب ها :

اشتراک گذاری این مطلب

تا این جای مقالات آموزش زبان نشانه گذاری HTML، مطالب زیادی را یاد گرفتیم اما برای ساخت یک وبسایت حرفه ای به جز HTML به موارد دیگری مانند CSS و جاوا اسکریپت (JavaScript) نیز نیاز داریم تا یک وبسایت پویا و تعاملی ایجاد کنیم.

مباحث CSS و جاوا اسکریپت (JavaScript) را در دسته هایی با همین نام ها به شما آموزش داده ایم، در این مقاله به بررسی طریقه استفاده از زبان برنامه نویسی جاوا اسکریپت (JavaScript) به صورت کوتاه و مختصر می پردازیم.

زبان برنامه نویسی جاوا اسکریپت (JavaScript) باعث می شود که وبسایت ها پویاتر و تعاملی تر باشند.

زبان برنامه نویسی جاوااسکریپت (JavaScript)

مثال: در زیر یک سند HTML داریم که در آن از زبان برنامه نویسی جاوا اسکریپت (JavaScript) استفاده شده است که با کلیک بر روی دکمه (Click Me to Display Date and Time) تاریخ و زمان سیستم را در خروجی نشان می دهد.

<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<button type=”button” onclick=”document.getElementById(‘demo’).innerHTML = Date()”>Click Me to Display Date and Time</button>
<p id=”demo”></p>
</body>
</html>

تصویر قبل از کلیک بر روی دکمه:

زبان برنامه نویسی جاوااسکریپت (JavaScript)

تصویر بعد از کلیک بر روی دکمه:

زبان برنامه نویسی جاوااسکریپت (JavaScript)

تگ script در زبان نشانه گذاری HTML

این تگ برای نوشتن کدهای جاوا اسکریپت (JavaScript) استفاده می شود.

تگ script می تواند شامل کدهای زبان برنامه نویسی جاوا اسکریپت (JavaScript) باشد یا از طریق ویژگی src به یک فایل جاوا اسکریپتی اشاره کند.

کاربردهای متداول جاوا اسکریپت (JavaScript) عبارتند از :

دستکاری تصاویر
اعتبار سنجی فرم ها
پویا سازی محتوا

برای انتخاب عنصر HTML در زبان برنامه نویسی جاوا اسکریپت (JavaScript)، بیشتر از متد ()document.getElementById استفاده می شود.

مثال: در این مثال با استفاده از زبان برنامه نویسی جاوا اسکریپت (JavaScript)، با دسترسی به id عنصر p توسط متد ()getElementById، متن Hello World را در خروجی چاپ کرده است.

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

تگ script در زبان نشانه گذاری HTML

نکته: شما می توانید در دسته بندی جاوا اسکریپت (JavaScript) سایت جاب تیم، اطلاعات بیشتری در مورد زبان برنامه نویسی جاوااسکریپت (JavaScript) به دست آورید.

طعم جاوا اسکریپت (JavaScript)

در زیر مثال هایی از کارهایی که زبان برنامه نویسی جاوا اسکریپت (JavaScript) می تواند انجام دهد، برای شما آورده ایم.

جاوا اسکریپت (JavaScript)، قادر به تغییر محتوای عناصر HTML است.

مثال: در زیر با کلیک بر روی دکمه موجود، محتوای عنصر p تغییر می کند.

document.getElementById("demo").innerHTML = "Hello JavaScript!";

قبل از کلیک بر روی دکمه:

تغییر محتوای عناصر HTML با جاوااسکریپت

بعد از کلیک بر روی دکمه:

تغییر محتوای عناصر HTML با جاوااسکریپت

جاوا اسکریپت (JavaScript)، قادر به تغییر style عناصر HTML است.

مثال: در زیر با کلیک بر روی دکمه موجود، style عنصر p تغییر می کند.

document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";

قبل از کلیک بر روی دکمه:

تغییر style عناصر HTML با جاوااسکریپت

بعد از کلیک بر روی دکمه:

تغییر style عناصر HTML با جاوااسکریپت

جاوا اسکریپت (JavaScript)، قادر به تغییر ویژگی های عناصر HTML است.

مثال: در مثال زیر با کلیک بر روی دکمه های Light on و Light off وضعیت ویژگی های لامپ موجود در صفحه تغییر پیدا می کند.

document.getElementById("image").src = "picture.gif";

قبل از کلیک بر روی دکمه:

تغییر ویژگی های عناصر HTML با جاوااسکریپت

بعد از کلیک بر روی دکمه:

تغییر ویژگی های عناصر HTML با جاوااسکریپت

تگ noscript در زبان نشانه گذاری HTML

تگ noscript در زبان نشانه گذاری HTML، یک محتوای جایگزین تعریف می کند، تا برای کاربرانی که script را در مرورگرشان غیرفعال کرده اند و یا مرورگری دارند که script ها را پشتیبانی نمی کند، آن محتوای جایگزین را نمایش دهد.

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>

تگ noscript در زبان نشانه گذاری HTML

تگ های زبان نشانه گذاری HTML

تگ های زبان نشانه گذاری HTML
تگ	توضیحات
Script	تعریف کد های جاوا اسکریپت درون HTML
Noscript	تعریف محتوای جایگزین برای مرورگرهایی که اسکریپت را پشتیبانی نمی کنند.

خب به پایان یکی دیگر از مباحث مهم و حیاتی زبان نشانه گذاری HTML رسیدیم و یادگرفتیم که چگونه از کدهای جاوا اسکریپت (JavaScript) درون HTML استفاده کنیم.

در مقاله بعدی به مبحث مهم مسیردهی فایل در زبان نشانه گذاری HTML می پردازیم.

تگ iframe در زبان نشانه گذاری HTML

مسیردهی فایل ها در زبان نشانه گذاری HTML