Skip to content

Latest commit

 

History

History
110 lines (67 loc) · 3.05 KB

File metadata and controls

110 lines (67 loc) · 3.05 KB

互動: alert, prompt, confirm

此部分的教程涵蓋 "原本" 的 JavaScript,不需對環境做特別調整。

但因為我們將使用瀏覽器做為演示環境,所以我們應該至少知道一些跟使用者互動的函式。在本章,我們將會對 alertpromptconfirm 瀏覽器函式更為熟悉。

alert

語法:

alert(message);

會顯示一段訊息並中斷腳本執行直到使用者按下 "OK"。

例如:

alert("Hello");

該顯示訊息的迷你窗口稱之為 模態視窗 (modal window)。"模態 (modal)" 這個字代表使用者不能與頁面其他部分互動或按其他按鈕等,直到他們處理了這個視窗為止,在此處為 -- 直到它們按下 "OK"。

prompt

函式 prompt 接收兩個參數:

result = prompt(title, [default]);

會顯示一個帶有文字訊息的模態視窗,並有給訪問者輸入的欄位和 OK/Cancel 的按鈕。

title : 顯示予使用者的文字。

default : 可選的第二個參數,為輸入欄位的初始值。

訪問者可在 prompt 輸入欄位寫些東西然後按下 OK。或者可藉由按下 Cancel 或 key:Esc 按鍵取消輸入。

呼叫 prompt 後會回傳輸入欄位的文字,或輸入被取消時則回傳 null

舉個例:

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

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

````warn header="在 IE:總是給個 default" 第二個參數是可選的,但如果我們沒給,Internet Explorer 會把 `"undefined"` 這個文字插入到 prompt 內。

在 Internet Explorer 執行此程式碼來看看:

let test = prompt("Test");

所以為了讓 IE 內的 prompt 看起來沒問題,我們建議總是提供第二個引數:

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

## confirm

語法為:

```js
result = confirm(question);
```

函式 `confirm` 顯示一個模態視窗,包含一個 `問題` 與兩個按鈕:OK 和 Cancel。 

若按下 OK 回傳結果是 `true` 否則為 `false`。

例如:

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

alert( isBoss ); // 若按下 OK 則為 true
```

## 總結

我們介紹三種瀏覽器相關的函式用來和訪問者互動:

`alert`
: 顯示訊息。

`prompt`
: 顯示訊息並要求使用者輸入文字並回傳該文字,若按下 Cancel 按鈕或 `key:Esc` 鍵時,則回傳 `null`。

`confirm`
: 顯示訊息並等待使用者按下 "OK" 或 "Cancel",OK 時回傳 `true`,Cancel/`key:Esc` 時回傳 `false`。

這些方法都是模態:它們暫停腳本執行並讓訪問者無法和頁面其餘部分互動,直到視窗被關掉為止。

以上這些方法都有兩個限制:

1. 模態視窗確切的位置是由瀏覽器決定的,通常會是在中間。
2. 視窗確切的外觀也是由瀏覽器決定的,我們無法修改。

這就是簡單的代價,有其它顯示更好視窗和與使用者互動更為豐富的方法,但若不需要太多 "花俏華麗" 的介面,這些方法已經夠用了。