JavaScript 瀏覽器交互：alert、prompt 和 confirm

時間 2019-11-06

標籤 javascript 瀏覽器交互 alert prompt confirm 欄目 JavaScript 简体版

原文原文鏈接

交互：alert、prompt 和 confirm

本教程的這部份內容主要使用原生 JavaScript，你無需針對特定環境進行調整。javascript

但咱們仍然會使用瀏覽器做爲演示環境。因此咱們至少應該知道一些用戶界面函數。在這一節，咱們一塊兒來熟悉一下瀏覽器中 alert、prompt 和 confirm 函數的用法。html

alert

語法：java

alert(message);
複製代碼

運行這行代碼，瀏覽器會彈出一個信息彈窗並暫停腳本，直到用戶點擊了「肯定」。react

舉個例子：web

alert("Hello");
複製代碼

彈出的這個帶有信息的小窗口被稱爲 模態窗。"modal" 意味着用戶不能與頁面的其餘部分（例如點擊其餘按鈕等）進行交互，直到他們處理完窗口。在上面示例這種狀況下 —— 直到用戶點擊「肯定」按鈕。瀏覽器

prompt

prompt 函數接收兩個參數：微信

result = prompt(title, [default]);
複製代碼

瀏覽器會顯示一個帶有文本消息的模態窗口，還有 input 框和肯定/取消按鈕。函數

title：顯示給用戶的文本學習

default：可選的第二個參數，指定 input 框的初始值。spa

用戶能夠在 prompt 對話框的 input 框內輸入一些內容，而後點擊肯定。或者他們能夠經過按「取消」按鈕或按下鍵盤的 key:Esc 鍵，以取消輸入。

prompt 將返回用戶在 input 框內輸入的文本，若是用戶取消了輸入，則返回 null。

舉個例子：

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

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

IE 瀏覽器會提供默認值

第二個參數是可選的。可是若是咱們不提供的話，Internet Explorer 會把 "undefined" 插入到 prompt。

咱們能夠在 Internet Explorer 中運行下面這行代碼來看看效果：
let test = prompt("Test");
複製代碼
因此，爲了 prompt 在 IE 中有好的效果，咱們建議始終提供第二個參數：
let test = prompt("Test", ''); // <-- for IE
複製代碼

confirm

語法：

result = confirm(question);
複製代碼

confirm 函數顯示一個帶有 question 以及肯定和取消兩個按鈕的模態窗口。

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

例如：

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

alert( isBoss ); // 若是「肯定」按鈕被按下，則顯示 true
複製代碼

總結

咱們學習了與用戶交互的 3 個瀏覽器的特定函數：

alert：顯示信息。

prompt：顯示信息要求用戶輸入文本。點擊肯定返回文本，點擊取消或按下 key:Esc 鍵返回 null。

confirm：顯示信息等待用戶點擊肯定或取消。點擊肯定返回 true，點擊取消或按下 key:Esc 鍵返回 false。

這些方法都是模態的：它們暫停腳本的執行，而且不容許用戶與該頁面的其他部分進行交互，直到窗口被解除。

上述全部方法共有兩個限制：

模態窗口的確切位置由瀏覽器決定。一般在頁面中心。
窗口的確切外觀也取決於瀏覽器。咱們不能修改它。

這就是簡單的代價。還有其餘一些方法能夠顯示更漂亮的窗口，並與用戶進行更豐富的交互，但若是「花裏胡哨」不是很是重要，那使用本節講的這些方法也挺好。

做業題

先本身作題目再看答案。

建立一個簡單的頁面

重要程度：⭐️⭐️⭐️⭐️

建立一個要求用戶輸入 name，並經過瀏覽器窗口對鍵入的內容進行輸出的 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>
複製代碼

現代 JavaScript 教程：開源的現代 JavaScript 從入門到進階的優質教程。React 官方文檔推薦，與 MDN 並列的 JavaScript 學習教程。

在線免費閱讀：zh.javascript.info

掃描下方二維碼，關注微信公衆號「技術漫談」，訂閱更多精彩內容。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。