1.4 第一個 JavaScript

Previous1.3 開發工具簡介 Next2. 網站技術簡介

Last updated 4 years ago

1.4 第一個 JavaScript

練習：第一個 JavaScript

第一步：建立資料夾及檔案

請先在自己的電腦桌面或其它您自己習慣的位置，建立一個 javascript 資料夾，然後使用編輯器(老師是使用編輯器)開啟該資料夾，如下圖：

然後在 javascript 資料夾裡，建立一個 practice 資料夾。然後在 practice 資料夾裡，建立一個 index.html 檔案。

第二步：index.html 內容

編輯 index.html，原始碼如下，可直接複製貼上，原始碼需整齊：

<!DOCTYPE html>
<html lang="zh-Hant">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <p>這是段落</p>

    <!-- 寫在 body 結束標籤之前 -->
    <script>
      // 變數宣告及賦值(assign)
      var a = 1;
      var b = 2;
      var c = a + b;

      // 在瀏覽器中的 console 印出
      console.log("a 值是 " + a);
      console.log("b 值是 " + b);
      console.log("c 值是 a + b，結果變成 " + c);
      console.log("");

      // for 迴圈
      for(var i = 0; i < 3; i++){
        console.log("執行第 " + (i + 1) + " 次迴圈。");
        c++; // c++ 等同於 c = c + 1
        console.log("因為 c++ ，所以 c 的值變成 " + c);

        if(c >= 6){
          console.log("c 有大於等於 6");
        }else{
          console.log("c 沒有大於等於 6");
        }

        console.log("");
      }

      console.log("程式結束。");
    </script>
  </body>
</html>

第三步：開啟 console

將 index.html 用瀏覽器開啟，並開啟開發者工具中的 console(Mac: cmd + option + i 或 Windows: F12)，畫面如下：

原始碼與畫面結果的部份，試著解讀看看。

Previous1.3 開發工具簡介 Next2. 網站技術簡介

Last updated 4 years ago