網頁

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直接在瀏覽器開啟,顯示效果如下。



第一次彈出的視窗如下,可以看到第一個參數為對話框的提示訊息,第二個參數為輸入欄未預設的填入資料。



第二次彈出alert視窗時,顯示文字即為對話框的輸入欄位的的內容。




沒有留言:

張貼留言