4.1 วัตถุเบราว์เซอร์
อย่างที่คุณทราบแล้วว่าภาษา JavaScript ทำงานภายในเบราว์เซอร์ ดังนั้นจึงจำเป็นต้องโต้ตอบกับเบราว์เซอร์เดียวกันนี้ ในการทำเช่นนี้ เบราว์เซอร์มีวัตถุและฟังก์ชันหลายอย่างที่พร้อมใช้งานจาก JavaScript
อันแรกคือan object window
ซึ่งอธิบายถึงหน้าต่างเบราว์เซอร์ ผมเคยอธิบายเมื่อเบราว์เซอร์ไม่มีแท็บ ตอนนี้วัตถุหน้าต่างจะอธิบายแท็บเบราว์เซอร์ปัจจุบันที่โหลดหน้าพร้อมสคริปต์
ประการที่สอง นี่คือan object document
เอกสารที่รับผิดชอบสำหรับเอกสารที่แสดงในแท็บ นี่อาจทำให้สับสนเล็กน้อย เพื่อความง่าย สมมติว่าเอกสารคือสิ่งที่แสดงต่อผู้ใช้ และหน้าต่างคือสิ่งที่แสดงในเอกสารนี้
ประการที่สาม นี่คือan object console
สิ่งที่รับผิดชอบสำหรับการส่งออกไปยังคอนโซลของเบราว์เซอร์ ใช่ เบราว์เซอร์ยังมีคอนโซล ซึ่งส่วนใหญ่ใช้สำหรับการดีบักสคริปต์และแสดงข้อความแสดงข้อผิดพลาด คุณสามารถเปิดได้โดยกดปุ่ม F12 ในเบราว์เซอร์ของคุณ
Object window
เป็นวัตถุระดับบนสุดสำหรับวัตถุหน้าทั้งหมด และแม้ว่าคุณจะสามารถเขียนชื่อวัตถุdocument
ใน สคริปต์ของคุณได้ โดยตรงconsole
แต่อันที่จริงแล้ว ชื่อwindow.document
และwindow.console
4.2 ไดอะล็อกใน JavaScript
วิธีการแจ้งเตือน ()
นอกจากนี้ยังan object window
มีฟังก์ชันหลายอย่างที่สคริปต์ของเพจสามารถมองเห็นได้ ที่ใช้กันมากที่สุดคือalert()
. ช่วยให้คุณแสดงกล่องโต้ตอบพร้อมข้อความถึงผู้ใช้ สคริปต์จะถูกระงับจนกว่าผู้ใช้จะคลิกตกลง
ตัวอย่าง:
alert("JavaScript is the best!");
พรอมต์ () วิธีการ
นอกจากนี้ยังมีฟังก์ชั่นที่คุณสามารถขอให้ผู้ใช้ป้อนค่าบางอย่าง - นี่prompt()
คือ
ตัวอย่าง:
var age = prompt("Enter Year of Birth");
วิธีการยืนยัน ()
คุณสามารถแสดงกล่องโต้ตอบที่มีสองปุ่มOk
- Cancel
ถามผู้ใช้เกี่ยวกับการดำเนินการบางอย่าง
ตัวอย่าง:
var isOK = confirm("Are you ready");
4.3 onload() เหตุการณ์
และอีกหนึ่งช่วงเวลาที่มีประโยชน์และน่าสนใจ หน้าต่างเบราว์เซอร์มีเหตุการณ์ที่เริ่มทำงานเมื่อเอกสารโหลดเต็ม คุณสามารถระบุโค้ดที่จะดำเนินการหลังจากโหลดและแสดงเอกสารแล้ว
สามารถทำได้สามวิธี
ขั้นแรก คุณสามารถฝังโค้ด JavaScript ลงในหน้า HTML ได้โดยตรงเป็นค่าแอตทริบิวต์:
<body onload="alert('document loaded');">
<img src="big-image.png">
</body>
ประการที่สอง คุณสามารถฝังโค้ด JavaScript ได้ง่ายๆ ในหน้า HTML:
<head>
<script>
function load()
{
alert('document loaded');
}
window.onload = load;
</script>
</head>
<body>
<img src="big-image.png">
</body>
ประการที่สาม เราสามารถเขียนให้สั้นลงอีกเล็กน้อยโดยการประกาศฟังก์ชันนิรนาม:
<head>
<script>
window.onload = function () {
alert('document loaded');
}
</script>
</head>
<body>
<img src="big-image.png">
</body>
4.4 onclick() เหตุการณ์
และสุดท้าย เหตุการณ์ (เหตุการณ์) ที่สำคัญอีกประการหนึ่งevent OnClick
คือ ซึ่งเกิดขึ้นกับองค์ประกอบใด ๆ ที่ผู้ใช้คลิก เช่นเดียวกับevent OnLoad
ที่สามารถตั้งค่าได้หลายวิธีดังนั้นเราจะให้วิธีที่ง่ายที่สุดเท่านั้น:
<body>
<img src="big-image.png" onclick="alert('user clicked on the image');">
</body>