บทที่ 18 Scripts
JavaScript เป็นภาษาที่เป็น Script ที่อยู่ในเว็บไซต์ (ใช่ร่วมกับ HTML) เพื่อให้เว็บไซต์ของเราดูมีการเคลื่อนไหว สามารถตอบสนองผู้ใช้งานได้มากขึ้น โดยการใส่ Javascript ลงในโค๊ด HTML นั้นทำได้โดยใช้ แท็ก <script> โดยจะแทรกอยู้ในแท็ก <head> และ แท็ก <body>
ประโยชน์ของ javaScript
เราจะใช้ JavaScript เมื่อต้องการทำให้ เวบเพจแสดงผลแบบเคลื่อนไหวได้ มีชีวิตชีวา ไม่แข็งทื่อ หรือใช้ในการสั่งให้ บราวเซอร์ทำงานตามที่เราต้องการ โดยงานนั้น อาจเกินความสามารถ ของภาษา HTML แต่ไม่ใช่งานที่ต้องติดต่อกับ Server นั่นเพราะ JavaScript เป็นภาษาที่ใช้ในการเขียนโปรแกรมทางฝั่ง client โดยมีบราวเซอร์เป็นตัวแปลภาษานั่นเอง ตัวอย่างของงาน ที่จะต้องใช้ภาษา JavaScript เช่น
- สร้างเมนูที่สามารถตอบสนองต่อการเอา mouse ไปชี้ได้
- สร้างเครื่องคิดเลข ปฏิทิน เกม ในเวบเพจ
- เปิด, ปิด, เคลื่อนย้ายตำแหน่งของ window
- ทำตัวอักษรวิ่งแบบต่างๆ
- ตรวจสอบความถูกต้องของแบบฟอร์มที่ผู้ใช้กรอก ก่อนส่งข้อมูลไปยัง Server
- และอื่นๆ อีกมากมายที่ไม่ต้องติดต่อกับ Server
ตัวอย่าง
<html>
<body>
<script>
document.write("Hello students!")
</script>
</body>
</html>ผลลัพธ์คือ
Tag ที่เกี่ยวข้อง
1. แท็ก noscript ใช้ในการรองรับกรณีที่ผู้ใช้งานไม่อนุญาตให้รันสคริปส์ หรือ เว็บเบราว์เซอร์ไม่รองรับสคริปส์ เราสามารถใส่เนื้อหาในแท็ก noscript ได้เหมือนกับแท็ก body ซึ่งจะสามารถแสดงได้เหมือนไฟล์เอกสาร html ปกติ โดยเนื้อหาภายในแท็ก noscript จะแสดงก็ต่อเมื่อเว็บเบราว์เซอร์ไม่รองรับสคริปส์หรือไม่อนุญาตให้รันสคริปส์เท่านั้น
ตัวอย่าง
<html>
<body>
<script type="text/javascript">
document.write("สวัสดีนักเรียน")
</script>
<noscript>เว็บเบราว์เซอร์ของคุณไม่รองรับ JavaScript!</noscript>
</body>
</html>ผลลัพธ์คือ
2. ปุ่ม สำหรับลิงค์ไปหน้าอื่น
ตัวอย่าง
<html>
<body>
<p id="demo">
ภาษา HTML
</p>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="ภาษา HTML คือภาษาที่ใช้ในการเขียนเว็บ";
}
</script>
<button type="button" onclick="myFunction()">รายละเอียดเพิ่มเติม</button>
<script >
window.confirm("Are you sure you want to quit?")
</script>
</body>
</html>ผลลัพธ์คือ
3. เพิ่มเติมสไตล์ เช่น การสร้างปุ่ม สำหรับคลิกเลือกสีตัวอักษรที่ผู้ใช้งานต้องการให้แสดง
ตัวอย่าง
<html>
<body>
<p id="demo">
ไม่ชอบสีดำอยากเปลี่ยนเป็นแดง
</p>
<script>
function myFunction()
{
document.getElementById("demo").style.color="#ff0000";
}
</script>
<button type="button" onclick="myFunction()">คลิกตรงนี้</button>
</body>
</html> ผลลัพธ์คือ
4. กล่องข้อความ (Message Box) เป็นส่วนที่ไว้สำหรับโต้ตอบกับผู้ใช้ แบ่งเป็น 3 แบบ คือ
4.1 การเตือน (Alert) ใช้สำหรับการขึ้นขอความเตือน ให้ผู้ใช้ระมัดระวัง หรือบอกกล่าวไปยังผู้ใช้ให้ทราบ พิจารณาคำสั่งต่อไปนี้
ตัวอย่าง
<html>
<body>
<script >
window.alert("You can?t access to server!")
</script>
</body>
</html>ผลลัพธ์คือ
***ข้อความที่เขียนส่งให้เมธอด alert() เมื่อนำไปแสดงออกยัง ไดอะล็อกบ็อกซ์ จะปรากฏเป็นบรรทัดเดียว ถ้าข้อความยาวมาก ไดอะล็อกบ็อกซ์ ที่ปรากฏ จะยาว ตามด้วย หากผู้อ่านต้องการข้อความแยกกันหลายบรรทัด ให้ใช้ \n แทรกระหว่างข้อความ
ตัวอย่าง
<html>
body>
<script language="JavaScript">
alert("\n Hello JavaScript World \n Enjoy with JavaScript now \n\n Click OK to continue");
</script>
</body>
</html>ผลลัพธ์คือ
4.2 การยินยัน (Confirm) เพื่อให้ผู้ใช้ยืนยันในกรณีที่ผู้ใช้อาจเผอเรอคลิกปุ่มโดยไม่ได้ตั้งใจ เช่น ผู้ใช้กดปุ่มเพื่อลบข้อมูล หรือการออกจากโปรแกรม
ตัวอย่าง
<html>
<body>
<script >
window.confirm("Are you sure you want to quit?")
</script>
</body>
</html>ผลลัพธ์คือ
4.3 ตรวจสอบข้อมูล (Prompt) เพื่อให้ผู้ใช้ป้อนข้อมูลก่อนเข้าไปยังระบบหรือเข้าหน้าเว็บ
ตัวอย่าง
<html>
<body>
<script >
window.prompt("please enter user name")
</script>
</body>
</html>ผลลัพธ์คือ
นอกจากนี้ยังมีตัวแปรที่เกิดจากการใช้ prompt ตัวอย่างเช่น
<html>
<body>
<script>
var y=window.prompt("please enter your name")
window.alert("Hello ! " +y)
</script>
</body>
</html> ***ตัวแปร y จะเก็บค่าที่ได้จากการป้อนของผู้ใช้ แล้วมาแสดงใน Message Box การเตือน ซึ่งมีข้อความ Hello !
ผลลัพธ์คือ
เมื่อผู้ใช้ป้อนชื่อแล้วกดปุ่ม OK จะเกิด Message Box ตามรูป 
