JavaScript ทำให้หน้าเพจ HTML มีไดนามิกและการตอบสนองกับผู้ใช้งานได้มากขึ้น

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

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

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

</body>
</html>

ลองดูสิ ❱

My First JavaScript

Tag HTML <script>

Element <script> ประกอบด้วยคำสั่งสคริปต์ หรือชี้ไปยังไฟล์สคริปต์ภายนอกผ่าน Attribute src

การใช้งานทั่วไปสำหรับ JavaScript คือการจัดการรูปภาพ การตรวจสอบแบบฟอร์ม และการเปลี่ยนแปลงแบบไดนามิกของเนื้อหา

การเลือกองค์ประกอบ HTML ส่วนใหญ่ JavaScript ใช้ document.getElementById()

ตัวอย่าง JavaScript นี้เขียนว่า “Hello JavaScript!” เป็นองค์ประกอบ HTML ที่มี id=”demo”:

ตัวอย่าง

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

ลองดูสิ ❱

Use JavaScript to Change Text

This example writes “Hello JavaScript!” into an HTML element with id=”demo”:

ความสามารถของ JavaScript

มาดูตัวอย่างกันว่า JavaScript สามารถทำอะไรได้บ้าง

ตัวอย่าง

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>

ลองดูสิ ❱

My First JavaScript

JavaScript can change the content of an HTML element:

This is a demonstration.

ตัวอย่าง

JavaScript สามารถเปลี่ยน Style ได้:

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

ลองดูสิ ❱

My First JavaScript

JavaScript can change the style of an HTML element.

ตัวอย่าง

JavaScript สามารถเปลี่ยน Attribute :

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

ลองดูสิ ❱

My First JavaScript

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

แท็ก HTML <noscript>

Tag HTML <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>

ลองดูสิ ❱

A browser without support for JavaScript will show the text written inside the noscript element.

Script Tags

Tag	คำอธิบาย
<script>	กำหนด Script ฝั่ง Client
<noscript>	กำหนดเนื้อหาที่จะแสดงต่อผู้ใช้ที่ปิดใช้งาน Script ในเบราว์เซอร์ของตนหรือมีเบราว์เซอร์ที่ไม่สนับสนุน Script

❮ บทเรียนก่อนหน้า

บทเรียนถัดไป ❯