آشنایی با JavaScript در صفحات HTML

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


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

<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
     Click me to display Date and Time.</button>

<p id="demo"></p>
خودتان امتحان کنید

تگ <script> در HTML

تگ <script> برای تعریف اسکریپت های سمت کاربر استفاده میشود (JavaScript)

تگ <script> یا حاوی عبارت های اسکریپت است یا از طریق صفت src به یک فایل اسکریپت خارجی اشاره دارد.

دستکاری در تصویر، اعتبار سنجی فرم ها و تغییرات پویا در محتوا از جمله استفاده های رایج از JavaScript  است.

برای انتخاب یک عنصر HTML جاوا اسکریپت اغلب از متد (document.getElementById(id استفاده میکند.

نمونه مثال زیر عبارت  "!Hello JavaScript" را داخل عنصری با شناسه "demo" قرار میدهد :

<script>
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
خودتان امتحان کنید

نکته : در دوره ی آموزشی JavaScript به طور کامل با این زبان سمت کاربر آشنا خواهید شد.


چند مثال از JavaScript 

مثال های زیر نمونه ای از کار هایی که JavaScript میتواند انجام دهد را نشان میدهد.

JavaScript میتواند محتوای HTML را تغییر دهد :

document.getElementById("demo").innerHTML = "Hello JavaScript!";
خودتان امتحان کنید

JavaScript میتواند استایل ها در HTML را تغییر دهد :

document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
خودتان امتحان کنید

JavaScript میتواند صفات در HTML را تغییر دهد :

document.getElementById("image").src = "picture.gif";
خودتان امتحان کنید

تگ <noscript> در HTML

تگ <noscript> برای کاربرانی که قابلیت script مرورگر خود را غیر فعال کرده اند و یا مرورگر آنها از اسکریپت های سمت کاربر پشتیبانی نمیکند، محتوایی را نشان میدهد :

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

<noscript>Sorry, your browser does not support JavaScript!</noscript>
خودتان امتحان کنید

 

منتشر شده در ۱۳ خرداد ۱۳۹۶ حمید رضا ملکی ۹۶۹ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده