آموزش استفاده از جاوااسکریپت در HTML

جاوااسکریپت در HTML

در این پست قصد آموزش نحوه استفاده از جاوااسکریپت در HTML را داریم.

جاوا اسکریپت مخفف JS ( JavaScript ) می باشد و بهمراه HTML و CSS سه هسته اصلی برای طراحی صفحات وب را تشکیل میدهند.

از جاوااسکریپت در html برای دادن رفتارهایی به صفحه وب و ایجاد قابلیت پاسخ دادن به درخواست کاربر، استفاده می شود.

بطور مثال با استفاده از زبان جاوااسکریپت یا JS میتوانیم تگ هارا درون یک صفحه ایجاد ، ویرایش و یا حذف کنیم، بفرض مثال میخواهیم با کلیک

بروی یک دکمه یک لینک ایجاد شود یا یک تگ IMG ایجاد شود، با جاوااسکریپت به راحتی اینکار قابل انجام میباشد.

جاوا اسکریپت صفحات HTML را پویاتر و تعاملی تر می کند.

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

<!DOCTYPE html>
<html>
<body>

<h1>اولین جاوا اسکریپت من</h1>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
کلیک کنید</button>

<p id="demo"></p>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h1>اولین جاوا اسکریپت من</h1>

<button type="button"

onclick="document.getElementById('demo').innerHTML = Date()">

کلیک کنید</button>

</body>

</html>

نتیجه:

در این صفحه، هنگامی که روی دکمه کلیک می شود، یک کد جاوا اسکریپت اجرا می شود که وظیفه آن دریافت عنصر با شناسه 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 می نویسد:

<!DOCTYPE html>
<html>
<body>

<h2>Use JavaScript to Change Text</h2>
<p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>

<p id="demo"></p>

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

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h2>Use JavaScript to Change Text</h2>

<p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>

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

</script>

</body>

</html>

نتیجه:

همانطور که مشاهده می کنید، هنگامی که صفحه html در مرورگر اجرا می شود، کدهای درون تگ script اجرا شده و نتیجه به شکل زیر خواهد بود:

مثال هایی از جاوااسکریپت

در جاوااسکریپت می توان همانند css به style های عناصر html دسترسی یافته و آنها را تغییر داد.

مثال: جاوا اسکریپت می تواند محتوا را تغییر دهد:

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p>JavaScript can change the content of an HTML element:</p>

<button type="button" onclick="myFunction()">Click Me!</button>

<p id="demo">This is a demonstration.</p>

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

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h1>My First JavaScript</h1>

<p>JavaScript can change the content of an HTML element:</p>

<button type="button" onclick="myFunction()">Click Me!</button>

<p id="demo">This is a demonstration.</p>

function myFunction() {

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

}

</script>

</body>

</html>

نتیجه:

در این مثال، پس از کلیک روی دکمه، تابع ()myFunction اجرا می شود. وظیفه این تابع این است که با استفاده از javascript عنصری را که آیدی demo دارد دریافت کرده و متن درون آن را به “hello javascript” تغییر دهد. در زیر نتیجه این کد را مشاهده می کنید:

مثال2:جاوا اسکریپت می تواند استایل ها را تغییر دهد:

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<script>
function myFunction() {
  document.getElementById("demo").style.fontSize = "25px"; 
  document.getElementById("demo").style.color = "red";
  document.getElementById("demo").style.backgroundColor = "yellow";        
}
</script>

<button type="button" onclick="myFunction()">Click Me!</button>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h1>My First JavaScript</h1>

<p id="demo">JavaScript can change the style of an HTML element.</p>

function myFunction() {

document.getElementById("demo").style.fontSize = "25px";

document.getElementById("demo").style.color = "red";

document.getElementById("demo").style.backgroundColor = "yellow";

}

</script>

<button type="button" onclick="myFunction()">Click Me!</button>

</body>

</html>

نتیجه:

در این مثال، با کلیک بر روی دکمه، تابع ()myFunction در جاوا اسکریپت اجرا می شود. وظیفه این کد جاوا اسکریپت این است که عنصر با آیدی demo دریافت شود و استایل هایی به آن افزوده شود. مثلا در این کد، fontSize=25px ، color=red و backgroundColor=yellow قرار داده شده است و نتیجه آن را می توانید در کد زیر مشاهده کنید:

مثال 3:جاوا اسکریپت می تواند ویژگی ها را تغییر دهد:

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>
<p>Here, a JavaScript changes the value of the src (source) attribute of an image.</p>

<script>
function light(sw) {
  var pic;
  if (sw == 0) {
    pic = "pic_bulboff.gif"
  } else {
    pic = "pic_bulbon.gif"
  }
  document.getElementById('myImage').src = pic;
}
</script>

<img id="myImage" src="pic_bulboff.gif" width="100" height="180">

<p>
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>
</p>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h1>My First JavaScript</h1>

<p>Here, a JavaScript changes the value of the src (source) attribute of an image.</p>

function light(sw) {

var pic;

if (sw == 0) {

pic = "pic_bulboff.gif"

} else {

pic = "pic_bulbon.gif"

}

document.getElementById('myImage').src = pic;

}

</script>

<p>

<button type="button" onclick="light(1)">Light On</button>

<button type="button" onclick="light(0)">Light Off</button>

</p>

</body>

</html>

نتیجه:

در این مثال با استفاده از جاوا اسکریپت، عکس موجود در صفحه تغییر می کند. به این صورت که در کد جاوا اسکریپت تابع Light تعریف و در بدنه این تابع گفته شده است که اگر ورودی تابع مساوی با صفر بود، مقدار متغییر pic مساوی با pic_bulboff.git شود. پس از آن عنصر با آیدی myImage دریافت شده و ویژگی src آن مساوی با مقدار pic شود. حال اگر مقدار ورودی به این تابع مساوی با هر عددی جز 0 بود، مقدار pic مساوی با pic_bulbon.git قرار داده شود. حال اگر روی دکمه Light on کلیک شود، تابع با مقدار یک و اگر روی دکمه Light Off کلیک شود تابع با مقدار 0 فراخوانی می شود. نتیجه این کد را می توانید در زیر مشاهده کنید:

تگ < noscript > در HTML

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

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

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

<noscript>Sorry, your browser does not support JavaScript!</noscript>

<p>A browser without support for JavaScript will show the text written inside the noscript element.</p>
 
</body>
</html>

<!DOCTYPE html>

<html>

<body>

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

</script>

<p>A browser without support for JavaScript will show the text written inside the noscript element.</p>

</body>

</html>

نتیجه:

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

جاوااسکریپت در HTML

نحوه استفاده از جاوااسکریپت در HTML

مثال هایی از جاوااسکریپت

تگ < noscript > در HTML

مطالب مرتبط

رمزگذاری در HTML-آموزش Charset در HTML به زبان ساده

آموزش رفع مشکل کندی سرعت پیشخوان وردپرس بصورت جامع

آموزش کار با نمادها (Symbols) در HTML

آموزش موجودیت ها یا Entities در Html بصورت جامع