01JavaScript

新晋软工小白發表於2024-08-23
JavaScript

JavaScript 基礎 - 第1天

瞭解變數、資料型別、運算子等基礎概念，能夠實現資料型別的轉換，結合四則運算體會如何程式設計。

  • 體會現實世界中的事物與計算機的關係

  • 理解什麼是資料並知道資料的分類

  • 理解變數儲存資料的“容器”

  • 掌握常見運算子的使用，瞭解優先順序關係

  • 知道 JavaScript 資料型別隱式轉換的特徵

介紹

掌握 JavaScript 的引入方式，初步認識 JavaScript 的作用

引入方式

JavaScript 程式不能獨立執行，它需要被嵌入 HTML 中，然後瀏覽器才能執行 JavaScript 程式碼。透過 script 標籤將 JavaScript 程式碼引入到 HTML 中，有兩種方式：

內部方式

透過 script 標籤包裹 JavaScript 程式碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基礎 - 引入方式</title>
</head>
<body>
  <!-- 內聯形式：透過 script 標籤包裹 JavaScript 程式碼 -->
  <script>
    alert('嗨，歡迎來傳智播學習前端技術！')
  </script>
</body>
</html>

外部形式

一般將 JavaScript 程式碼寫在獨立的以 .js 結尾的檔案中，然後透過 script 標籤的 src 屬性引入


// demo.js
document.write('嗨，歡迎來傳智播學習前端技術！')

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基礎 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：透過 script 的 src 屬性引入獨立的 .js 檔案 -->
  <script src="demo.js"></script>
</body>
</html>

如果 script 標籤使用 src 屬性引入了某 .js 檔案，那麼 標籤的程式碼會被忽略！！！如下程式碼所示：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基礎 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：透過 script 的 src 屬性引入獨立的 .js 檔案 -->
  <script src="demo.js">
    // 此處的程式碼會被忽略掉！！！！
    alert(666);  
  </script>
</body>
</html>

註釋和結束符

透過註釋可以遮蔽程式碼被執行或者新增備註資訊，JavaScript 支援兩種形式註釋語法：

單行註釋

使用 // 註釋單行程式碼


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基礎 - 註釋</title>
</head>
<body>
  
  <script>
    // 這種是單行註釋的語法
    // 一次只能註釋一行
    // 可以重複註釋
    document.write('嗨，歡迎來傳智播學習前端技術！');
  </script>
</body>
</html>

多行註釋

使用 /* */ 註釋多行程式碼


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基礎 - 註釋</title>
</head>
<body>
  
  <script>
    /* 這種的是多行註釋的語法 */
    /*
        更常見的多行註釋是這種寫法
        在些可以任意換行
        多少行都可以
      */
    document.write('嗨，歡迎來傳智播學習前端技術！')
  </script>
</body>
</html>

注：編輯器中單行註釋的快捷鍵為 ctrl + /

結束符

在 JavaScript 中 ; 代表一段程式碼的結束，多數情況下可以省略 ; 使用回車（enter）替代。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基礎 - 結束符</title>
</head>
<body>
  
  <script> 
    alert(1);
    alert(2);
    alert(1)
    alert(2)
  </script>
</body>
</html>

實際開發中有許多人主張書寫 JavaScript 程式碼時省略結束符 ;

輸入和輸出

輸出和輸入也可理解為人和計算機的互動，使用者透過鍵盤、滑鼠等向計算機輸入資訊，計算機處理後再展示結果給使用者，這便是一次輸入和輸出的過程。

舉例說明：如按鍵盤上的方向鍵，向上/下鍵可以滾動頁面，按向上/下鍵這個動作叫作輸入，頁面發生了滾動了這便叫輸出。

輸出

JavaScript 可以接收使用者的輸入，然後再將輸入的結果輸出：

alert()、document.wirte()

以數字為例，向 alert() 或 document.write()輸入任意數字，他都會以彈窗形式展示（輸出）給使用者。

輸入

向 prompt() 輸入任意內容會以彈窗形式出現在瀏覽器中，一般提示使用者輸入一些內容。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基礎 - 輸入輸出</title>
</head>
<body>
  
  <script> 
    // 1. 輸入的任意數字，都會以彈窗形式展示
    document.write('要輸出的內容')
    alert('要輸出的內容');
​
    // 2. 以彈窗形式提示使用者輸入姓名，注意這裡的文字使用英文的引號
    prompt('請輸入您的姓名:')
  </script>
</body>
</html>

變數

理解變數是計算機儲存資料的“容器”，掌握變數的宣告方式

變數是計算機中用來儲存資料的“容器”，它可以讓計算機變得有記憶，通俗的理解變數就是使用【某個符號】來代表【某個具體的數值】（資料）


<script>
  // x 符號代表了 5 這個數值
  x = 5
  // y 符號代表了 6 這個數值
  y = 6
    
  //舉例： 在 JavaScript 中使用變數可以將某個資料（數值）記錄下來！
​
  // 將使用者輸入的內容儲存在 num 這個變數（容器）中
  num = prompt('請輸入一數字!')
​
  // 透過 num 變數（容器）將使用者輸入的內容輸出出來
  alert(num)
  document.write(num)
</script>

宣告

宣告(定義)變數有兩部分構成：宣告關鍵字、變數名（標識）


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基礎 - 宣告和賦值</title>
</head>
<body>
  
  <script> 
    // let 變數名
    // 宣告(定義)變數有兩部分構成：宣告關鍵字、變數名（標識）
    // let 即關鍵字，所謂關鍵字是系統提供的專門用來宣告（定義）變數的詞語
    // age 即變數的名稱，也叫識別符號
    let age
  </script>
</body>
</html>

關鍵字是 JavaScript 中內建的一些英文詞彙（單詞或縮寫），它們代表某些特定的含義，如 let 的含義是宣告變數的，看到 let 後就可想到這行程式碼的意思是在宣告變數，如 let age;

let 和 var 都是 JavaScript 中的宣告變數的關鍵字，推薦使用 let 宣告變數！！！

賦值

宣告（定義）變數相當於創造了一個空的“容器”，透過賦值向這個容器中新增資料。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基礎 - 宣告和賦值</title>
</head>
<body>
  
  <script> 
    // 宣告(定義)變數有兩部分構成：宣告關鍵字、變數名（標識）
    // let 即關鍵字，所謂關鍵字是系統提供的專門用來宣告（定義）變數的詞語
    // age 即變數的名稱，也叫識別符號
    let age
    // 賦值，將 18 這個資料存入了 age 這個“容器”中
    age = 18
    // 這樣 age 的值就成了 18
    document.write(age)
    
    // 也可以宣告和賦值同時進行
    let str = 'hello world!'
    alert(str);
  </script>
</body>
</html>

關鍵字

JavaScript 使用專門的關鍵字 let 和 var 來宣告（定義）變數，在使用時需要注意一些細節：

以下是使用 let 時的注意事項：

  1. 允許宣告和賦值同時進行

  2. 不允許重複宣告

  3. 允許同時宣告多個變數並賦值

  4. JavaScript 中內建的一些關鍵字不能被當做變數名

以下是使用 var 時的注意事項：

  1. 允許宣告和賦值同時進行

  2. 允許重複宣告

  3. 允許同時宣告多個變數並賦值

大部分情況使用 let 和 var 區別不大，但是 let 相較 var 更嚴謹，因此推薦使用 let，後期會更進一步介紹二者間的區別。

變數名命名規則

關於變數的名稱（識別符號）有一系列的規則需要遵守：

  1. 只能是字母、數字、下劃線、$，且不能能數字開頭

  2. 字母區分大小寫，如 Age 和 age 是不同的變數

  3. JavaScript 內部已佔用於單詞（關鍵字或保留字）不允許使用

  4. 儘量保證變數具有一定的語義，見字知義

注：所謂關鍵字是指 JavaScript 內部使用的詞語，如 let 和var，保留字是指 JavaScript 內部目前沒有使用的詞語，但是將來可能會使用詞語。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基礎 - 變數名命名規則</title>
</head>
<body>
  
  <script> 
    let age = 18 // 正確
    let age1 = 18 // 正確
    let _age = 18 // 正確
​
    // let 1age = 18; // 錯誤，不可以數字開頭
    let $age = 18 // 正確
    let Age = 24 // 正確，它與小寫的 age 是不同的變數
    // let let = 18; // 錯誤，let 是關鍵字
    let int = 123 // 不推薦，int 是保留字
  </script>
</body>
</html>

常量

概念：使用 const 宣告的變數稱為“常量”。

使用場景：當某個變數永遠不會改變的時候，就可以使用 const 來宣告，而不是let。

命名規範：和變數一致


const PI = 3.14

注意： 常量不允許重新賦值,宣告的時候必須賦值（初始化）

資料型別

計算機世界中的萬事成物都是資料。

計算機程式可以處理大量的資料，為了方便資料的管理，將資料分成了不同的型別：

注：透過 typeof 關鍵字檢測資料型別


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基礎 - 資料型別</title>
</head>
<body>
  
  <script> 
    // 檢測 1 是什麼型別資料，結果為 number
    document.write(typeof 1)
  </script>
</body>
</html>

數值型別

即我們數學中學習到的數字，可以是整數、小數、正數、負數


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基礎 - 資料型別</title>
</head>
<body>
  
  <script> 
    let score = 100 // 正整數
    let price = 12.345 // 小數
    let temperature = -40 // 負數
​
    document.write(typeof score) // 結果為 number
    document.write(typeof price) // 結果為 number
    document.write(typeof temperature) // 結果為 number
  </script>
</body>
</html>

JavaScript 中的數值型別與數學中的數字是一樣的，分為正數、負數、小數等。

字串型別

透過單引號（ ''） 、雙引號（ ""）或反引號包裹的資料都叫字串，單引號和雙引號沒有本質上的區別，推薦使用單引號。

注意事項：

  1. 無論單引號或是雙引號必須成對使用

  2. 單引號/雙引號可以互相巢狀，但是不以自已巢狀自已

  3. 必要時可以使用轉義符 \，輸出單引號或雙引號


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基礎 - 資料型別</title>
</head>
<body>
  
  <script> 
    let user_name = '小明' // 使用單引號
    let gender = "男" // 使用雙引號
    let str = '123' // 看上去是數字，但是用引號包裹了就成了字串了
    let str1 = '' // 這種情況叫空字串
        
    documeent.write(typeof user_name) // 結果為 string
    documeent.write(typeof gender) // 結果為 string
    documeent.write(typeof str) // 結果為 string
  </script>
</body>
</html>

布林型別

表示肯定或否定時在計算機中對應的是布林型別資料，它有兩個固定的值 true 和 false，表示肯定的資料用 true，表示否定的資料用 false。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基礎 - 資料型別</title>
</head>
<body>
  
  <script> 
    //  pink老師帥不帥？回答 是 或 否
    let isCool = true // 是的，摔死了！
    isCool = false // 不，套馬杆的漢子！
​
    document.write(typeof isCool) // 結果為 boolean
  </script>
</body>
</html>

undefined

未定義是比較特殊的型別，只有一個值 undefined，只宣告變數，不賦值的情況下，變數的預設值為 undefined，一般很少【直接】為某個變數賦值為 undefined。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基礎 - 資料型別</title>
</head>
<body>
  
  <script> 
    // 只宣告瞭變數，並末賦值
    let tmp;
    document.write(typeof tmp) // 結果為 undefined
  </script>
</body>
</html>

注：JavaScript 中變數的值決定了變數的資料型別。

型別轉換

理解弱型別語言的特徵，掌握顯式型別轉換的方法

在 JavaScript 中資料被分成了不同的型別，如數值、字串、布林值、undefined，在實際程式設計的過程中，不同資料型別之間存在著轉換的關係。

隱式轉換

某些運算子被執行時，系統內部自動將資料型別進行轉換，這種轉換稱為隱式轉換。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基礎 - 隱式轉換</title>
</head>
<body>
  <script> 
    let num = 13 // 數值
    let num2 = '2' // 字串
​
    // 結果為 132
    // 原因是將數值 num 轉換成了字串，相當於 '13'
    // 然後 + 將兩個字串拼接到了一起
    console.log(num + num2)
​
    // 結果為 11
    // 原因是將字串 num2 轉換成了數值，相當於 2
    // 然後數值 13 減去 數值 2
    console.log(num - num2)
​
    let a = prompt('請輸入一個數字')
    let b = prompt('請再輸入一個數字')
​
    alert(a + b);
  </script>
</body>
</html>

注：資料型別的隱式轉換是 JavaScript 的特徵，後續學習中還會遇到，目前先需要理解什麼是隱式轉換。

補充介紹模板字串的拼接的使用

顯式轉換

編寫程式時過度依靠系統內部的隱式轉換是不嚴禁的，因為隱式轉換規律並不清晰，大多是靠經驗總結的規律。為了避免因隱式轉換帶來的問題，通常根邏輯需要對資料進行顯示轉換。

Number

透過 Number 顯示轉換成數值型別，當轉換失敗時結果為 NaN（Not a Number）即不是一個數字。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基礎 - 隱式轉換</title>
</head>
<body>
  <script>
    let t = '12'
    let f = 8
​
    // 顯式將字串 12 轉換成數值 12
    t = Number(t)
​
    // 檢測轉換後的型別
    // console.log(typeof t);
    console.log(t + f) // 結果為 20
​
    // 並不是所有的值都可以被轉成數值型別
    let str = 'hello'
    // 將 hello 轉成數值是不現實的，當無法轉換成
    // 數值時，得到的結果為 NaN （Not a Number）
    console.log(Number(str))
  </script>
</body>
</html>

相關文章