Javascript 交互：alert、prompt 和 confirm

2023-02-17 10:37 更新

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

alert

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

例如：

alert("Hello");

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

prompt

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

result = prompt(title, [default]);

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

?title?

顯示給用戶的文本

?default?

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

語(yǔ)法中的方括號(hào) ?[...]?

上述語(yǔ)法中 default 周?chē)姆嚼ㄌ?hào)表示該參數(shù)是可選的，不是必需的。

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

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

舉個(gè)例子： 

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

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

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

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

我們可以在 Internet Explorer 中運(yùn)行下面這行代碼來(lái)看看效果： 

let test = prompt("Test");

所以，為了 prompt 在 IE 中有好的效果，我們建議始終提供第二個(gè)參數(shù)： 

let test = prompt("Test", ''); // <-- 用于 IE 瀏覽器

confirm

語(yǔ)法： 

result = confirm(question);

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

點(diǎn)擊確定返回 true，點(diǎn)擊取消返回 false。

例如： 

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

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

總結(jié)

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

?alert?

顯示信息。

?prompt?

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

?confirm?

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

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

上述所有方法共有兩個(gè)限制：

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

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

任務(wù)

創(chuàng)建一個(gè)簡(jiǎn)單的頁(yè)面

重要程度: 4

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

解決方案

JavaScript 代碼：

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

整個(gè)頁(yè)面的代碼： 

<!DOCTYPE html>
<html>
<body>

  <script>
    'use strict';

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

</body>
</html>


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)