JavaScript基礎

作用

• 表單驗證，減輕服務端的壓力
• 動態改變頁面內容
• 添加頁面動畫效果
• ajax網絡請求

組成

• ECMAScript 語法規則部分
• DOM 文檔對象模型
• BOM 瀏覽器對象模型

語法標準

• 語法
• 變量和數據類型
• 運算符
• 邏輯控制語句
• 關鍵字、保留字
• 對象

基本結構

  <button onclick="alert('HelloWorld')"></button>
  <script type="text/javascript">
    // javascript
  </script>
  <script src="index.js"></script>

變量

變量是程序中數據的臨時存放場所

let width;
const height = 10;
width = 5;

變量名可以由字母、數字、_、$組成，不能以數字開頭

註釋

// 單行註釋
// 單行註釋

/*
多行註釋
多行註釋
*/

數據類型

• Undefined 未定義類型 擁有唯一值“undefined”的類型
• Null 空類型 擁有唯一值“null”的類型。
• Boolean 布爾類型 由原始值 true 和 false 組成的類型。
• Number 數字類型 所有可能的數字值的集合，包括特殊的“Not-a-Number”(NaN) 值，正無窮，負無窮。
• String 字符串類型 所有可能的字符串值的集合。
• Object 對象類型 屬性的集合

// 使用typeof判斷數據類型
const a = 'a';
typeof a; // "string"
const b = true;
typeof b; // "boolean"

• Symbol 符號類型 獨一無二的值

數據類型轉換

'123' + 123 // "123123"(123->'123')
true + 123 // 124(true->1)

運算符

算數運算

• + - * / 四則運算
• % 取餘
• ++ -- 自增、自減運算
• | & ~ && || ! 邏輯運算
• << >> <<< >>>位移運算
• ** 指數運算

賦值運算

= += -= *= /= %=

邏輯運算

• && 邏輯與
• || 邏輯或
• ! 邏輯非

關係運算

• == 等於
• === 嚴格等於
• !=不等於
• !==嚴格不等於
• >= <= > <比較大小

三目運算符

a?b:c若a則b，否則c

編寫習慣

變量命名

//小駝峯法命名普通變量
let myName;
let name;
//大駝峯法命名類
let MyClass;
//大寫命名常量
const STATIC_VALUE = 1;