Displays interactive web page with a button

HTML

<!DOCTYPE html>
<!-- 
<!DOCTYPE html> 告訴瀏覽器：這是一份 HTML5 文件
不用背，只要知道這一行是網頁的開頭「宣告」
-->

<html>
<!-- <html> 是整個網頁的開始標籤 -->

<head>
  <!-- <head> 區塊：放「給瀏覽器看的資訊」，不會直接顯示在網頁上 -->
  
  <meta charset="UTF-8">
  <!-- 設定網頁的文字編碼，UTF-8 讓中文顯示正常 -->

  <title>第一堂課程式互動</title>
  <!-- <title> 會顯示在瀏覽器分頁上 -->
</head>

<body>
  <!-- <body> 區塊：放「給使用者看的內容」 -->

  <!-- 這是一個標題文字，用來展示文字內容 -->
  <h1 id="msg">Hello World!</h1>
  <!-- 
  <h1> 表示「大標題」文字
  id="msg" 是給這個文字取一個名字，方便 JavaScript 來找到它
  -->

  <!-- 這是一個按鈕，按下去會觸發 JavaScript 程式 -->
  <button onclick="changeMessage()">點我改變文字</button>
  <!-- 
  <button> 是一顆按鈕
  onclick="changeMessage()" 表示「當使用者點擊時，執行 changeMessage 這個程式」
  -->

  <!-- 下面開始寫 JavaScript 程式 -->
  <script>
    // 這裡是 JavaScript 區塊，專門寫程式用
    // 我們定義一個叫做 changeMessage 的「函式」
    // 當按鈕被點擊時，就會執行這個程式

    function changeMessage() {
      // 透過 document.getElementById("msg")
      // 可以找到 id="msg" 的那個 <h1> 標題
      // 然後把裡面的文字改掉

      document.getElementById("msg").innerText = "你剛剛寫了一個程式！";
    }
  </script>

</body>
</html>
<!-- </html> 結束整個網頁 -->