4.1 วัตถุเบราว์เซอร์

อย่างที่คุณทราบแล้วว่าภาษา JavaScript ทำงานภายในเบราว์เซอร์ ดังนั้นจึงจำเป็นต้องโต้ตอบกับเบราว์เซอร์เดียวกันนี้ ในการทำเช่นนี้ เบราว์เซอร์มีวัตถุและฟังก์ชันหลายอย่างที่พร้อมใช้งานจาก JavaScript

อันแรกคือan object windowซึ่งอธิบายถึงหน้าต่างเบราว์เซอร์ ผมเคยอธิบายเมื่อเบราว์เซอร์ไม่มีแท็บ ตอนนี้วัตถุหน้าต่างจะอธิบายแท็บเบราว์เซอร์ปัจจุบันที่โหลดหน้าพร้อมสคริปต์

ประการที่สอง นี่คือan object documentเอกสารที่รับผิดชอบสำหรับเอกสารที่แสดงในแท็บ นี่อาจทำให้สับสนเล็กน้อย เพื่อความง่าย สมมติว่าเอกสารคือสิ่งที่แสดงต่อผู้ใช้ และหน้าต่างคือสิ่งที่แสดงในเอกสารนี้

Java university

ประการที่สาม นี่คือ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>