閱讀(1.2k) 書簽贊(0) 我要糾錯

Javascript 交互：alert、prompt 和 confirm

2023-02-17 10:37 更新

由于我們將使用瀏覽器作為我們的演示環(huán)境，讓我們看幾個與用戶交互的函數(shù)：?alert?，?prompt ?和?confirm?。

alert

這個我們前面已經(jīng)看到過了。它會顯示一條信息，并等待用戶按下 “OK”。

例如：

alert("Hello");

彈出的這個帶有信息的小窗口被稱為 模態(tài)窗。“modal” 意味著用戶不能與頁面的其他部分（例如點擊其他按鈕等）進行交互，直到他們處理完窗口。在上面示例這種情況下 —— 直到用戶點擊“確定”按鈕。

prompt

prompt 函數(shù)接收兩個參數(shù)：

result = prompt(title, [default]);

瀏覽器會顯示一個帶有文本消息的模態(tài)窗口，還有 input 框和確定/取消按鈕。

?title?

顯示給用戶的文本

?default?

可選的第二個參數(shù)，指定 input 框的初始值。

語法中的方括號 ?[...]?

上述語法中 default 周圍的方括號表示該參數(shù)是可選的，不是必需的。

訪問者可以在提示輸入欄中輸入一些內(nèi)容，然后按“確定”鍵。然后我們在 result 中獲取該文本?；蛘咚麄兛梢园慈∠I或按 ?Esc? 鍵取消輸入，然后我們得到 null 作為 result。

prompt 將返回用戶在 input 框內(nèi)輸入的文本，如果用戶取消了輸入，則返回 null。

舉個例子：

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

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

IE 瀏覽器會提供默認(rèn)值

第二個參數(shù)是可選的。但是如果我們不提供的話，Internet Explorer 會把 "undefined" 插入到 prompt。

我們可以在 Internet Explorer 中運行下面這行代碼來看看效果：
let test = prompt("Test");
所以，為了 prompt 在 IE 中有好的效果，我們建議始終提供第二個參數(shù)：
let test = prompt("Test", ''); // <-- 用于 IE 瀏覽器

confirm

語法：

result = confirm(question);

confirm 函數(shù)顯示一個帶有 question 以及確定和取消兩個按鈕的模態(tài)窗口。

點擊確定返回 true，點擊取消返回 false。

例如：

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

alert( isBoss ); // 如果“確定”按鈕被按下，則顯示 true

總結(jié)

我們學(xué)習(xí)了與用戶交互的 3 個瀏覽器的特定函數(shù)：

?alert?

顯示信息。

?prompt?

顯示信息要求用戶輸入文本。點擊確定返回文本，點擊取消或按下 ?Esc? 鍵返回 null。

?confirm?

顯示信息等待用戶點擊確定或取消。點擊確定返回 true，點擊取消或按下 ?Esc? 鍵返回 false。

這些方法都是模態(tài)的：它們暫停腳本的執(zhí)行，并且不允許用戶與該頁面的其余部分進行交互，直到窗口被解除。

上述所有方法共有兩個限制：

模態(tài)窗口的確切位置由瀏覽器決定。通常在頁面中心。
窗口的確切外觀也取決于瀏覽器。我們不能修改它。

這就是簡單的代價。還有其他一些方式可以顯示更漂亮的窗口，并與用戶進行更豐富的交互，但如果“花里胡哨”不是非常重要，那使用本節(jié)講的這些方法也挺好。

任務(wù)

創(chuàng)建一個簡單的頁面

重要程度: 4

創(chuàng)建一個要求用戶輸入 name，并通過瀏覽器窗口對鍵入的內(nèi)容進行輸出的 web 頁面。

解決方案

JavaScript 代碼：

let name = prompt("What is your name?", "");
alert(name);

整個頁面的代碼：

<!DOCTYPE html>
<html>
<body>

  <script>
    'use strict';

    let name = prompt("What is your name?", "");
    alert(name);
  </script>

</body>
</html>

以上內(nèi)容是否對您有幫助：

← Javascript 數(shù)據(jù)類型

Javascript 類型轉(zhuǎn)換 →

寫筆記

我要補充

Javascript 交互：alert、prompt 和 confirm