|
تاریخ انتشار:۱۳:۱۱ ۱۳۹۸/۱۱/۸
آموزش html - جلسه بیست و یکم
آشنایی با 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 >
منبع:learnsource
|
|
|