9-3 補充 Alert, prompt, confirm

Original: https://course.andys.pro/Javascript-Intro/09-3-supplement-alert-prompt-confirm/

講義

1. 警告視窗：alert()

這是最基本的對話框，用來顯示訊息給使用者，使用者只能點選「確定」關閉視窗。

• 範例：alert("Hello World");

2. 確認視窗：confirm()

用來詢問使用者「是/否」或「確定/取消」。

• 回傳值：
  • 點擊「確定」：回傳 true。
  • 點擊「取消」：回傳 false。
• 應用場景：刪除資料前的再次確認、登出確認等。
• 範例：

  var isSure = confirm("你確定要執行嗎？");
  if (isSure) {
      console.log("使用者按下確定");
  } else {
      console.log("使用者不想執行");
  }

3. 輸入視窗：prompt()

提供一個文字方塊讓使用者輸入資訊。

• 回傳值：
  • 使用者輸入的內容（字串）。
  • 點擊「取消」或直接關閉：回傳 null。
• 範例：

  var nickname = prompt("請輸入您的暱稱");
  if (nickname) {
      alert("嗨，" + nickname + "！");
  } else {
      alert("您沒有輸入暱稱。");
  }

4. 小技巧：邏輯判斷

• 可以使用 !! (雙驚嘆號) 將 prompt 回傳的值快速轉為布林值來判斷是否有輸入。
• 結合 三元運算子 可以縮短程式碼長度： nickname ? alert("嗨 " + nickname) : alert("沒輸入暱稱");

影片逐字稿 (AI 生成)

這邊來補充一下公版獎Email提到的Alert、Prompt跟Confirm然後我們這邊有這個連結 我們先進去看但Alert是警告視窗那我們這邊呢 我們可以開Inspect在旁邊 我們可以直接來測這些孔好 首先我們到Console 裡面它這邊說Alert 我可以Alert直接一個訊息比如說Alert然後裡面放一個字串 這個字串叫做Hello然後這時候呢 它就會彈跳視窗跑出來叫做Hello再來如果說 這邊有就是這邊呢 有一個東西叫做Confirm那Confirm其實跟Alert 蠻類似的都是裡面放一個字串然後當你用Confirm的時候呢它會問你Yes or No你確定嗎 那使用者是不是可以說OK或是Cancel當我OK的時候 它回傳一個True的值可是如果我Cancel的時候 它會給我一個False的值那 欸 它丟一個球回來就是丟一個回傳值回來True跟False那我要怎麼把它接住我怎麼把它接住我把它接住就類似像傳值的方法一樣我可以說Vire然後 呃 呃 呃 呃 比如說像YouSure等於或是 我們叫做ConfirmValue然後我把剛剛這個Confirm直接丟進去這時候這段Call 它做了好幾件事情第一個是 它宣告了一個ConfirmValue的一個變數再來 它去執行Confirm這個程式然後執行完了以後 它把它的回傳值塞給它塞到這個變數裡面存起來它總共做了三件事情跑跑這時候 它已經先宣告完了宣告完了以後 執行Confirm它開始問使用者 你確定嗎OK那你覺得 我比如說 OK這時候我們的ConfirmValue會是TrueOK那如果 我把剛才這段Call 我按Cancel這時候我的ConfirmValue會是False那因為我可以把使用者的OK和Cancel或是在中文如果你的瀏覽器中文的話就是確定和取消這兩個按鈕的True和False所以我後面可以來做邏輯的判斷那我們邏輯的判斷呢ifconfirm那這邊呢if裡面如果是True的話它就會執行就是我們不用做那個我們就直接這樣它如果是True的話我們說什麼我們可以用Alert我們AlertOK然後我們Else裡面我們我們Else裡面我們去Alert它說你可以直接寫Cancel或是有的網站會比較就是想要確定不要嗎好那當我們跑這個程式的時候你確定嗎然後你按OK的時候它就會Alert對不對因為它是True嘛然後它就會跑下面程式ifTrue對不對因為confirmValue現在是True然後它AlertOK好那我如果再跑一次這個程式然後呢我如果按Cancel的時候它就會說確定不要嗎好那這個Example用在這邊它是一個JavaScript嘛那我們結合剛剛補充的東西我們再建一個CodePan然後我們可以把它做到我們可以把它做成一個很簡單很簡單的網頁這個網頁呢有什麼功能有什麼功能這網頁有一個Button然後上面叫做按我然後上面有一個按Click等於Clickme這個Function這時候我在這邊建一個Function叫做Clickme然後這時候我們可以怎麼做我們可以把剛剛那整串邏輯放進來好我們把它存起來那結合剛剛那兩個姿勢一個是我HTML可以跟我的JS聯動就是我可以有一個Button然後我加一個UnclickClickme的情況下它是我點這個按鈕它就會去幫我執行這個Function當我執行這個Function的時候它是不是就會首先它有一個Confirm跳出來然後把這個宣告一個Confirm Value然後去執行Confirm然後你如果OK的話就是True然後它就會Alert OK如果它是False的話它就會跑到Else裡面說確定不要嗎好按一下欸它沒有跑有啊在這裡不好意思沒看到確定嗎OK它就會跳出Alert OK那如果再按一次它就會說你確定嗎Cancel確定不要嗎OK好這就是一個非常呃看起來簡單的一個呃HTML跟JS合在一起可是以現在來講可能還是對大家來講可能還是有點小困難好然後把這個Call我繼續放在這邊這邊好我們繼續來看我們剛剛學的Alert跟Confirm這兩個東西再來我們要學了Prompt那Prompt就是Confirm是會讓使用者就是確定和取消所以我得到True和False那我可不可以讓使用者給我更多的東西比如說我想要他輸入他的名字或是輸入各式各樣的彈跳視窗裡面可以輸入表單之類的就是可以輸入訊息好啦那我這邊我就直接把他的Call拿來用首先呢他會說欸 輸入你的暱稱然後他用Prompt這個Function去執行然後跑了以後呢他就會跳出一個視窗然後在這邊呢就是這個訊息在這裡然後你就比如說像我現在考好我暱稱TXS好的那我輸入給他以後呢這時候NickName是不是就會得到我回傳的值這時候NickName就是TXS然後他在AlertHello把我剛剛那個TXS加在一起變成這樣OKOK那我如果再執行一次然後按Cancel這時候我Cancel的時候他得到的值是什麼他其實他回傳給他是一個Nur然後這邊呢Hello再去加Nur會把它變成是一個Hello空白Nur的自傳那這邊就是需要寫一點邏輯的判斷判斷對不對那這個邏輯判斷如果說大家還沒有忘記的話那就是驚嘆號驚嘆號A可以去做判斷邏輯那個那這時候這邊會大家會覺得有點可怕不過我還是寫給大家看好NickName我這樣子的話大家記得問號對不對罵號那如果我今天回傳的值是有暱稱的有值的是不是就會驚嘆號驚嘆號以後就會是什麼就會是true這時候我就可以跑這個 function那如果是false的話記得這裡冒號我就alert然後這邊解說whatno nickname好這個時候我這樣去跑的時候出入你的暱稱欸等一下欸我是不是跑嗯這樣看一下這邊欸我剛也跑起來好這邊我入入輸入這樣子然後按ok他就會hello好那如果我這樣跑起來我沒有給他我cancelknickname這就是最前面那個驚嘆號驚嘆號那個example的延伸那就是如果大家覺得這很複雜的話那我還是可以解析給大家看就比如說像是這樣子那我這邊只做一件事情只做什麼事情呢我去console.log然後我驚嘆號驚嘆號 nickname好今天我輸入一個 nickname就是隨便輸那我按ok的情況下我console.log有個 nickname出來是不是true代表我有輸一個值我只要我輸值他都會給我true可是我只要console我只要cancel的時候我cancel他的時候是不是我得到是一個nure然後他就會給我一個false所以在這邊就是這個驚嘆號驚嘆號是去轉換就是一個邏輯判斷那當這個問號是什麼true他就會執行這一行false他就會執行後面這一行所以你這樣你就可以做一個非常快速一行的簡單的邏輯判斷可是你如果用if else的話你必須要寫if什麼比如說驚嘆號驚嘆號 nickname然後你要這樣子然後你要把你的alert放進來然後你要再寫else然後你要這樣然後你要把你的alert再放進來如果你驚嘆號驚嘆號這個東西你覺得就是很難理解的話那你也可以就是 nickname 不等於不等於那我這樣寫OK好我們這邊休息一下然後讓大家消化一下不行不能說那麼唔好好好OK

影片逐字稿largev2

這邊來補充一下公版講Email提到的Alert、Prompt跟Confirm我們這邊有這個連結我們先進去看Alert是警告視窗我們這邊可以開Inspect在旁邊我們可以直接來測這些口首先我們到Console裡面這邊說Alert我可以Alert直接一個訊息比如說我Alert然後裡面放一個這個字串叫做Hello然後這時候呢他就會彈跳視窗跑出來叫做Hello再來如果說這邊有就是這邊有一個東西叫做Confirm那Confirm其實跟Alert蠻類似的都是裡面放一個字串然後當你用Confirm的時候他會問你Yes or No你確定嗎?那使用者是不是可以說OK或是Cancel當我OK的時候他回傳一個True的值可是如果我Cancel的時候他會給我一個False的值那他丟一個球回來就是丟一個回傳值回來True跟False那我要怎麼把他接住我怎麼把他接住我把他接住就類似像傳值的方法一樣我可以說Val然後比如說像You sure?等於或是或是我們叫做ConPerValue然後我把剛剛這個Confirm直接丟進去這時候這段Code他做了好幾件事情第一個是他宣告了一個ConfirmValue的一個變數再來他去執行Confirm這個程式然後執行完了以後他把他的回傳值塞給他塞到這個變數裡面存起來他總共做了三件事情好好跑這時候他已經先宣告完了宣告完了以後執行Confirm他開始問使用者你確定嗎比如說OK這時候我們的Confirm Value會是TrueOK那如果我把剛剛這段Code我按Cancel這時候我的Confirm Value會是False那因為我可以把使用者的OK和Cancel或是如果你的瀏覽器是中文的話就是確定和取消這兩個按鈕的True和False所以我後面可以來做邏輯的判斷邏輯的判斷呢Confirm那這邊呢If裡面如果是True的話他就會執行就是我們不用做那個我們就直接這樣子他如果是True的話我們說什麼我們可以用AlertOK然後我們Else裡面我們Else裡面我們去Alert他說你可以直接寫Cancel或是有的網站會比較就是想要你確定不要嗎那當我們跑這個程式的時候你確定嗎然後你要OK的時候他就會Alert對不對因為他是True嘛然後他就會跑下面程式If True對不對因為Confirm Value現在是True然後他Alert OK好那我如果再跑一次這個程式然後呢我如果按Cancel的時候他就會說確定不要嗎好那這個Example我用在這邊他是一個JavaScript嘛那我們結合剛剛補充的東西我們再建一個Codepen然後我們可以把它做到我們可以把它做成一個很簡單很簡單的網頁這個網頁呢有什麼功能這網頁有個Button然後上面有個叫做按我然後我們上面有一個Click等於Click Me這個Function這時候我在這邊建一個Function叫做Click Me然後這時候我們可以怎麼做我們可以把剛剛那一整串邏輯放進來好我們把它存起來那結合剛剛那兩個姿勢一個是我的HTML可以跟我的JS連動就是我可以有一個Button然後加一個Unclick Click Me的情況下他是我點這個按鈕他就會去幫我執行這個Function當我執行這個Function的時候他是不是就會首先他有個Confirm跳出來然後把這個宣告一個Confirm Value然後去執行Confirm然後你如果OK的話就是True然後他就會Alert OK如果他是False的話他就會跑到Else裡面說確定不要嗎好按一下他沒有跑喔有阿在這裡不好意思沒看到確定嗎OK他就會跳出Alert OK那如果再按一次他就說你確定嗎Cancel確定不要嗎OK好這就是一個非常看起來簡單的一個HTML跟JS合在一起可是以現在來講對大家來講可能還是有點小困難好好然後把這個扣好先我繼續放在這邊好我們繼續來看我們剛學了Alert跟Confirm這兩個東西再來我們要學Prompt那Prompt就是Confirm是會讓使用者就是確定和取消所以我得到True和False那我可不可以讓使用者給我更多的東西比如說我想要他輸入他的名字或是輸入各式各樣的彈跳視窗裡面可以輸入表單之類的就是可以輸入訊息好那我這邊我就直接把他的code拿來用首先呢他會說輸入你的暱稱然後他用Prompt這個function去執行然後跑了以後呢他就會跳出一個視窗然後在這邊呢就是這個訊息在這裡然後你就比如說像我現在跑好我暱稱TXS好的那我輸入給他以後呢這時候暱稱是不是就會得到我回傳的值這時候暱稱就是TXS然後他在AlertHello把我剛剛那個TXS加在一起變成這樣OK那我如果再執行一次然後按Cancel這時候我Cancel的時候他得到的值是什麼他其實他回傳給他是一個Null然後這邊呢Hello再去加Null會把它變成是一個Hello空白Null的字串那這邊就是需要寫一點邏輯的判斷對不對那這個邏輯判斷如果說大家還沒有忘記的話那就是可以去做判斷邏輯那這時候這邊大家會覺得有點可怕不過我還是寫給大家看Nickname我這樣子的話大家還記得問號對不對那如果我今天回傳的值是有暱稱的有值的是不是就會驚嘆號驚嘆號以後就會是什麼那這時候我就可以跑這個防選那如果是False的話記得這裡冒號我就Alert然後這邊寫說FalseNullNickname然後這時候我這樣去跑的時候輸入你的暱稱等一下喔有是否讓我看一下這邊這邊我如果輸入這樣子然後按OK他就會哈囉那如果我這樣跑起來我沒有給他我CancelNull nickname這就是最前面那個驚嘆號驚嘆號example的延伸那就是如果大家覺得這裡很複雜的話那我還是可以解析給大家看就比如說像是這樣子那我這邊只做一件事情只做什麼事情呢我去Console.log然後我驚嘆號驚嘆號Nickname好今天我輸入一個Nickname就是隨便輸然後我按OK的情況下我Console.log的Nickname出來是不是True代表我有輸一個值我只要有輸值他都會給我True可是我只要Cancel的時候我Cancel他的時候是不是我得到的是一個Null然後他就會給我一個False所以在這邊就是這個驚嘆號驚嘆號是去轉換就是一個邏輯判斷那當這個問號是什麼False他就要執行後面這一行所以你這樣你就可以做一個非常快速一行的簡單的邏輯判斷可是你如果用Else的話你必須要寫一副驚嘆號驚嘆號Nickname然後你要這樣子然後你要把你的Alert放進來然後你要再寫Else然後你要這樣然後要把你的Alert再放進來如果你驚嘆號驚嘆號這個東西你覺得就是很難理解的話那你也可以就是Nickname不等於Null這樣寫OK好我們這邊休息一下讓大家消化一下