100% کامل شده تا

جاوااسکریپت در اچ‌تی‌ام‌ال (HTML JavaScript)

از موتو کد، دانشنامهٔ برنامه‌نویسی


جاوااسکریپت، صفحات HTML را پویاتر و تعاملی‌تر می‌کند.[۱]


Responsive demo.svg

تگ <script> در HTML

تگ <script> برای تعریف اسکریپت (جاوااسکریپت) سمت کاربر (client-side) استفاده می‌شود.

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

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

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

این مثال جاوااسکریپت متن “Hello Javascript!” را داخل یک عنصر HTML با id="demo" می‌نویسد:

مثال

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

مثال

<!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>

Responsive demo.svg


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


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

در اینجا چند نمونه از آنچه جاوااسکریپت می‌تواند انجام دهد آورده شده‌است:

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

مثال

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

مثال

<!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>

Responsive demo.svg


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

مثال

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

مثال

<!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>

Responsive demo.svg


جاوااسکریپت می‌تواند ویژگی‌های HTML را تغییر دهد:

مثال

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

مثال

<!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>

Responsive demo.svg





تگ <noscript> در HTML

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

مثال

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

مثال

<!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>

Responsive demo.svg



تگ‌های اسکریپت در HTML


منابع آموزشی




به‌روزرسانی شده: ۳۶ روز پیش