[JavaScript] 手把手一起入門(一) – 簡介
好不容易惡補完了前面的 HTML,我們終於準備好要開始撰寫接下來的第一支 JavaScript 程式了 ,Ya~(灑花)
(反正剩下的只要路上補給一下就好)
接下來,我們要在 body 中加入 script 元素,用來裝我們的第一個 JavaScript 喔!請輸入以下的程式碼
<script>alert("HelloWorld")</script>
呼叫 JavaScript 內建函式庫中的 alert 讓瀏覽器跳出提示訊息。
完成之後大概像這樣:
試著重新整理你的畫面,你就會看見這行指令的效果
沒有意外的話,應該會看到與上圖相同的畫面
若是先前就有相關基礎的人可能會吐槽小獅,直接使用 script 標籤而不加入 type 屬性 是錯誤的,應該要像下面這樣也才是正確的
<script type="text/javascript"> alert("HelloWorld") </script>沒錯,完全正確,在 XHTML 標準之中,這樣的寫法完全不允許,但在較為寬鬆的 HTML5 標準之中,這是建議寫法喔!因為基本上會嵌入到 HTML 之中的 Script 語言也就只有 JavaScript 這一種而已。
若大家仔細觀察的話應該會發現你在按下 確定 按鈕之前,載入中的圈圈會一直轉個不停,這是因為 JavaScript 也有循序執行的特性,意思是在執行完成之前都不會繼續執行下一行,而 alert 必須等到使用者按下確定之後才算完成,所以瀏覽器因為還沒看見 </html> 結束標籤而認為載入尚未完成。
也就是說,我們可以這樣玩
<!DOCTYPE html> <html> <head> <title>HelloWorld</title> <meta charset="utf-8"> </head> <body> <script>alert("請按確認以繼續")</script> <h1>關於我們</h1> <p>我們是一群熱愛寫作的BoB,由 bob 領軍,目標是提供各位讀者多樣化的教學內容,敬請期待!</p> </body> </html>
這樣一來,除非瀏覽者按下確定鍵,否則就無法看到接下來的元素
按下之後才會顯示網頁內容
那麼這次就先到這邊,請大家務必自己用鍵盤打,不要用複製的喔!
要是這麼做的話,練習會不夠的!
同場加映:亂碼??編碼??
又到了小劇場的時間了呢!不管你有沒有遇到亂碼的問題,都建議來學一下喔!
若是較早接觸網路的玩家們應該很常遇到亂碼的問題,因為以前並不會很普遍的在網頁裡面留下註解告訴瀏覽器,哪個編碼才是正確的,瀏覽器便需使用自動判斷機制或預設編碼,結果往往就是亂碼;我們今天的示範網頁也有同樣的問題,所以就算我們在存檔時使用了台灣常見的 Big-5 或 UTF-8 還是有可能出錯。
好消息是,只要加上 meta 標籤 並指定 charset 屬性 就能解決問題
<meta charset="utf-8">
特別的地方是,因為 meta(Metadata / Information)沒有內容,只有屬性,所以並不需要關閉(</>),也就是俗稱的自動關閉標籤。
太神拉!!
暑假沒事就要學新東西!!
也感謝你的觀看喔!