JavaScript 代碼與瀏覽器的交互

4.1 瀏覽器對象

如您所知，JavaScript 語言在瀏覽器內部運行，因此它需要以某種方式與同一瀏覽器進行交互。為此，瀏覽器有幾個可從 JavaScript 獲得的對象和函數。

第一個是an object window，它描述了瀏覽器窗口。或者更確切地說，我曾經描述過瀏覽器何時沒有標籤。現在 window 對象描述了當前瀏覽器選項卡，其中加載了包含腳本的頁面。

其次，這是an object document負責在選項卡中顯示文檔的那個。這可能有點令人困惑。為簡單起見，假設 document 是顯示給用戶的內容，而 window 是顯示該文檔的內容。

第三，這是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>

其次，您可以在 HTML 頁面中簡單地嵌入 JavaScript 代碼：

<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）是event OnClick。這發生在用戶點擊的任何元素上。就像event OnLoad它可以通過不同的方式設置一樣，所以我們只給出最簡單的一種：

<body>
  <img src="big-image.png" onclick="alert('user clicked on the image');">
</body>