菜鳥工程師肉豬: JavaScript 使用prompt()對話視窗

2019/7/19

JavaScript 使用prompt()對話視窗

JavaScript在瀏覽器可使用Window.prompt()來顯示對話視窗(dialog box)。

如果還未寫過JavaScript程式，建議先參考JavaScript 撰寫你的第一支Hello World程式

prompt()與alert()類似，但多了一個輸入欄位可讓使用者填入資料，而使用者填入的資料會回傳至程式中。

請參考在Visual Studio Code建立第一個HTML文件建立一份welcome.html，然後在<script>...</script>加入以下JavaScript程式碼。

var nickname = prompt("請輸入暱稱", "路人甲");
alert("你的暱稱是" + nickname);

第一行宣告一個var變數nickname，然後執行prompt()，接著網頁會跳出對話框讓使用者輸入資料。使用者輸入的資料會回傳給nickname變數，然後程式第二行在用alert()顯示。

welcome.html加入上面的JavaScript後如下。

`welcome.html`

<!DOCTYPE html>
<html>
<head>

<script>

  var nickname = prompt("請輸入暱稱", "路人甲"); // <-- 談出對話框。對話框標題為'請輸入暱稱'，預設值為'路人甲'
  alert("你的暱稱是" + nickname); // <-- 顯示輸入結果

</script>

</head>
<body>

  <h1>您好，歡迎光臨</h1>

</body>
</html>

prompt(message, default)接收兩個參數(arguments)。
第一個參數message為對話框的提示文字，用來提示使用者對話框的欄位要輸入什麼及輸入規則等。
第二個參數default為對話框輸入欄位的預設值。

完成以上修改後存檔，在VS Code按快速建Alt + B直接在瀏覽器開啟，顯示效果如下。