互動：警示、提示、確認

由於我們將使用瀏覽器作為我們的示範環境，讓我們來看幾個與使用者互動的函式：alert、prompt 和 confirm。

alert

這個函式我們已經看過了。它會顯示一則訊息，並等待使用者按下「確定」。

例如

alert("Hello");

顯示訊息的小視窗稱為模態視窗。「模態」一詞表示訪客無法與頁面的其他部分互動、按下其他按鈕等，直到他們處理完視窗。在這個情況下，就是直到他們按下「確定」。

prompt

函式 prompt 接受兩個參數

result = prompt(title, [default]);

它會顯示一個模態視窗，其中包含文字訊息、訪客的輸入欄位，以及確定/取消按鈕。

標題

要顯示給訪客的文字。

預設值

一個可選的第二個參數，輸入欄位的初始值。

訪客可以在提示輸入欄位中輸入一些東西並按確定。然後我們在 result 中取得該文字。或者他們可以按取消或按 Esc 鍵取消輸入，然後我們會取得 null 作為 result。

呼叫 prompt 會傳回輸入欄位的文字或如果輸入已取消則傳回 null。

例如

let age = prompt('How old are you?', 100);

alert(`You are ${age} years old!`); // You are 100 years old!

let test = prompt("Test");

let test = prompt("Test", ''); // <-- for IE

confirm

語法

result = confirm(question);

函式 confirm 會顯示一個模式視窗，其中包含一個 question 和兩個按鈕：確定和取消。

如果按了確定，結果會是 true，否則為 false。

例如

let isBoss = confirm("Are you the boss?");

alert( isBoss ); // true if OK is pressed

摘要

我們介紹了 3 個瀏覽器特定的函式來與訪客互動

alert

顯示訊息。

prompt

顯示訊息並要求使用者輸入文字。它會傳回文字或如果按了取消按鈕或 Esc，則傳回 null。

confirm

顯示訊息並等待使用者按「確定」或「取消」。它會傳回確定為 true，取消/Esc 為 false。

所有這些方法都是模式化的：它們會暫停腳本執行，並且不允許訪客與頁面的其餘部分互動，直到視窗被關閉。

以上所有方法都有兩個共同的限制

1. 模式視窗的確切位置由瀏覽器決定。通常，它在中央。
2. 視窗的確切外觀也取決於瀏覽器。我們無法修改它。

這就是簡潔的代價。還有其他方法可以顯示更漂亮的視窗和與訪客進行更豐富的互動，但如果「花裡胡哨」不太重要，這些方法就能很好地運作。