در این صفحه، هنگامی که روی دکمه کلیک می شود، یک کد جاوا اسکریپت اجرا می شود که وظیفه آن دریافت عنصر با شناسه demo و تغییر متن درون آن است. این کد، متن درون عنصر را مساوی با تاریخ امروز قرار می دهد.
نحوه استفاده از جاوااسکریپت در HTML
تگ <script> در HTML
در زبان HTML برای ایجاد و استفاده از جاوااسکریپت باید از تگ <script> استفاده کرد، چه در قسمت Head یا Body فرقی نمی کند و باید از تگ Script استفاده کرد.
تگ <script> برای ایجاد یک اسکریپت سمت سرویس گیرنده استفاده می شود.
تگ <script> یا خود حاوی کدهای اسکریپتی می باشد، یا به یک فایل اسکریپت خارجی از طریق ویژگی src اشاره می کند.
تگ <script> در HTML به منظور تعریف کردن یک (client-side script (JavaScript می باشد. عنصر <script> یا شامل دستورهای اسکریپت بوده و یا از طریق ویژگی src به یک فایل اسکریپت خارجی اشاره دارد. استفاده های متداول از جاوا اسکریپت شامل ویرایش تصویر، اعتبار سنجی فرم و تغییرات داینامیک محتوای صفحه HTML است.
برای انتخاب کردن یک عنصر HTML، در جاوا اسکریپت باید اغلب از متد ()document.getElementById استفاده شود.
مثال استفاده از جاوااسکریپت در HTML:
در این مثال جاوااسکریپت، عنصر با “id=demo” را دریافت کرده و متن “!Hello JavaScript” را داخل یک عنصر HTML می نویسد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<body>
<h2>UseJavaScript toChange Text</h2>
<p>Thisexample writes"Hello JavaScript!"into an HTML element with id="demo":</p>
در این مثال، پس از کلیک روی دکمه، تابع ()myFunction اجرا می شود. وظیفه این تابع این است که با استفاده از javascript عنصری را که آیدی demo دارد دریافت کرده و متن درون آن را به “hello javascript” تغییر دهد. در زیر نتیجه این کد را مشاهده می کنید:
مثال2:جاوا اسکریپت می تواند استایل ها را تغییر دهد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<pid="demo">JavaScript can change the style of an HTML element.</p>
در این مثال، با کلیک بر روی دکمه، تابع ()myFunction در جاوا اسکریپت اجرا می شود. وظیفه این کد جاوا اسکریپت این است که عنصر با آیدی demo دریافت شود و استایل هایی به آن افزوده شود. مثلا در این کد، fontSize=25px ، color=red و backgroundColor=yellow قرار داده شده است و نتیجه آن را می توانید در کد زیر مشاهده کنید:
مثال 3:جاوا اسکریپت می تواند ویژگی ها را تغییر دهد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p>Here,aJavaScript changes the value of the src(source)attribute of an image.</p>
در این مثال با استفاده از جاوا اسکریپت، عکس موجود در صفحه تغییر می کند. به این صورت که در کد جاوا اسکریپت تابع Light تعریف و در بدنه این تابع گفته شده است که اگر ورودی تابع مساوی با صفر بود، مقدار متغییر pic مساوی با pic_bulboff.git شود. پس از آن عنصر با آیدی myImage دریافت شده و ویژگی src آن مساوی با مقدار pic شود. حال اگر مقدار ورودی به این تابع مساوی با هر عددی جز 0 بود، مقدار pic مساوی با pic_bulbon.git قرار داده شود. حال اگر روی دکمه Light on کلیک شود، تابع با مقدار یک و اگر روی دکمه Light Off کلیک شود تابع با مقدار 0 فراخوانی می شود. نتیجه این کد را می توانید در زیر مشاهده کنید:
تگ < noscript > در HTML
تگ < noscript > در HTML یک محتوای جایگزین را برای نمایش داده شدن به کاربرانی که اسکریپت را در مرورگر خود غیر فعال کردند و یا یک مرورگری دارند که از اسکریپت ها پشتیبانی نمی کند تعریف می کند:
<noscript>Sorry,your browser does notsupport JavaScript!</noscript>
<p>Abrowser without support forJavaScript will show the text written inside the noscript element.</p>
</body>
</html>
نتیجه:
در این حالت اگر کاربری script را در مرورگر خود غیرفعال کرده باشد، به جای اجرا شدن کد جاوا اسکریپت مذکور، مقدار تعریف شده در تگ noscript نمایش داده می شود.