一、簡介

JavaScript是目前世界上流行的一種編程語言，這門語言主要用於HTML、WEB。

JavaScript是一種腳本語言、一種輕量級的語言、可以插入HTML頁面的編程代碼、由瀏覽器執行

二、引入方式

1、在script標簽行內寫代碼

<script>
  // 在這裏寫你的JS代碼
</script>

2、引入額外的JS代碼

<script src="myscript.js"></script>

三、JavaScript語句

JavaScript語句就是向瀏覽器發出的命令。語句的作用就是告訴瀏覽器該做什麽。

在JavaScript語句當中會經常使用分號，分號的主要作用：

分號用於分隔 JavaScript 語句。

通常我們在每條可執行的語句結尾添加分號。

使用分號的另一用處是在一行中編寫多條語句。

提示：您也可能看到不帶有分號的案例。

在 JavaScript 中，用分號來結束語句是可選的。

對大小寫敏感：

JavaScript 對大小寫是敏感的。

當編寫 JavaScript 語句時，請留意是否關閉大小寫切換鍵。

函數 getElementById 與 getElementbyID 是不同的。

同樣，變量 myVariable 與 MyVariable 也是不同的

在JavaScript語句當中會忽略多余的空格

**JavaScript 是腳本語言。瀏覽器會在讀取代碼時，逐行地執行腳本代碼。而對於傳統編程來說，會在執行前對所有代碼進行編譯。

四、JavaScript語言規範

作為程序員的都知道“註釋是代碼之母”，所以說一段好的代碼，一個好的項目肯定要有註釋，註釋它的主要目的就是為了提高代碼的可讀性

// 這是單行註釋

/*
這是
多行註釋
*/

五、變量

變量是存儲信息的容器

聲明變量

1、JavaScript的變量名可以使用_，數字，字母，$組成，不能以數字開頭。

2、聲明變量使用 var 變量名; 的格式來進行聲明

註意：

變量名是區分大小寫的。

推薦使用駝峰式命名規則。

保留字不能用做變量名。

補充：

ES6新增了let命令，用於聲明變量。其用法類似於var，但是所聲明的變量只在let命令所在的代碼塊內有效。

例如：for循環的計數器就很適合使用let命令。

for (let i=0;i<arr.length;i++){...}

ES6新增const用來聲明常量。一旦聲明，其值就不能改變。

const PI = 3.1415;
PI // 3.1415

PI = 3
// TypeError: "PI" is read-only

abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile

JavaScript 變量均為對象。當你聲明一個變量時，就創建了一個新的對象。

六、數據類型

字符串、數值、布爾、對象、Null、Undefined

JavaScript擁有動態類型，這意味著相同的變量可以用作相同的類型

var x;  // 此時x是undefined
var x = 1;  // 此時x是數字
var x = "Alex"  // 此時x是字符串 

1、字符串（string）

字符串是存儲字符的變量，字符串可以是引號中的任意文本，可以使用單引號和雙引號

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 得到Helloworld

常用方法：

拼接字符串一般用+號

string.slice(start, stop)和string.substring(start, stop)：

兩者的相同點：
如果start等於end，返回空字符串
如果stop參數省略，則取到字符串末
如果某個參數超過string的長度，這個參數會被替換為string的長度

substirng()的特點：
如果 start > stop ，start和stop將被交換
如果參數是負數或者不是數字，將會被0替換

silce()的特點：
如果 start > stop 不會交換兩者
如果start小於0，則切割從字符串末尾往前數的第abs(start)個的字符開始(包括該位置的字符)
如果stop小於0，則切割在從字符串末尾往前數的第abs(stop)個字符結束(不包含該位置字符)

ES6中引入了模板字符串。模板字符串（template string）是增強版的字符串，用反引號（`）標識。它可以當做普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。

// 普通字符串
`這是普通字符串！`
// 多行文本
`這是多行的
文本`
// 字符串中嵌入變量
var name = "q1mi", time = "today";
`Hello ${name}, how are you ${time}?`

註意：

如果模板字符串中需要使用反引號，則在其前面要用反斜杠轉義。

JSHint啟用ES6語法支持:/* jshint esversion: 6 */

2、數值（number）

在JavaScript當中只有一種數字類型，不區分整型和浮點型。

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

還有一種NaN，表示不是一個數字（Not a Number）。

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN屬性是代表非數字值的特殊值。該屬性用於指示某個值不是數字。
parseFloat("123.456")  // 返回123.456

3、布爾（Boolean）

布爾只有兩個屬性：true和false

在JavaScript中區分python中，都是使用小寫的

var a = true;
var b = false;

""(空字符串)、0、null、undefined、NaN都是false。

4、對象（object）

JavaScript 中的所有事物都是對象：字符串、數值、數組、函數...此外，JavaScript 允許自定義對象。

JavaScript 提供多個內建對象，比如 String、Date、Array 等等。

對象只是帶有屬性和方法的特殊數據類型。

數組

數組對象的作用是：使用單獨的變量名來存儲一系列的值。類似於Python中的列表。

var a = [123, "ABC"];
console.log(a[1]);  // 輸出"ABC"

常用方法：

5、Null和Undefined

1、null表示值是空，一般在需要指定或清空一個變量時才會使用，如 name=null;

2、undefined表示當聲明一個變量但未初始化時，該變量的默認值是undefined。還有就是函數無明確的返回值時，返回的也是undefined

null表示變量的值是空，undefined則表示只聲明了變量，但還沒有賦值。

ES6新引入了一種新的原始數據類型（Symbol），表示獨一無二的值。它是JavaScript語言的第7種數據類型。

6、類型查詢

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"

typeof是一個一元運算符（就像++，--，！，- 等一元運算符），不是一個函數，也不是一個語句。

對變量或值調用 typeof 運算符將返回下列值之一：

1、undefined - 如果變量是 Undefined 類型的

2、boolean - 如果變量是 Boolean 類型的

3、number - 如果變量是 Number 類型的

4、string - 如果變量是 String 類型的

5、object - 如果變量是一種引用類型或 Null 類型的

七、運算符

1、算數運算符

+ - * / % ++ --

2、比較運算符

1.>  2.>=  3.<  4.<=  5.!=  6.==  7.===  8.!==

3、邏輯運算符

1.&&  
2.|| 
3.!

4、賦值運算符

1.= 
2.+= 
3.-= 
4.*= 
5./=

八、流程控制

1、條件語句

用於基於不同的條件來執行不同的動作

在 JavaScript 中，我們可使用以下條件語句：

• if 語句 - 只有當指定條件為 true 時，使用該語句來執行代碼
• if...else 語句 - 當條件為 true 時執行代碼，當條件為 false 時執行其他代碼
• if...else if....else 語句 - 使用該語句來選擇多個代碼塊之一來執行
• switch 語句 - 使用該語句來選擇多個代碼塊之一來執行

if語句：只有當指定條件為 true 時，該語句才會執行代碼

if...else語句：在條件為 true 時執行代碼，在條件為 false 時執行其他代碼。

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

if...else if...else 語句：使用 if....else if...else 語句來選擇多個代碼塊之一來執行

語法：

if (條件 1)
  {
  當條件 1 為 true 時執行的代碼
  }
else if (條件 2)
  {
  當條件 2 為 true 時執行的代碼
  }
else
  {
  當條件 1 和 條件 2 都不為 true 時執行的代碼
  }

switch 語句：使用 switch 語句來選擇要執行的多個代碼塊之一。

語法：

switch(n)
{
case 1:
  執行代碼塊 1
  break;
case 2:
  執行代碼塊 2
  break;
default:
  n 與 case 1 和 case 2 不同時執行的代碼
}

首先設置表達式 n（通常是一個變量）。隨後表達式的值會與結構中的每個 case 的值做比較。如果存在匹配，則與該 case 關聯的代碼塊會被執行。使用 break 來阻止代碼自動地向下一個 case 運行。

switch中的case子句通常都會加break語句，否則程序會繼續執行後續case中的語句。

2、循環語句

不同類型的循環

JavaScript 支持不同類型的循環：

• for - 循環代碼塊一定的次數
• for/in - 循環遍歷對象的屬性
• while - 當指定的條件為 true 時循環指定的代碼塊
• do/while - 同樣當指定的條件為 true 時循環指定的代碼塊

for循環

語法：

for (語句 1; 語句 2; 語句 3)
  {
  被執行的代碼塊
  }

語句 1 在循環（代碼塊）開始前執行

語句 2 定義運行循環（代碼塊）的條件

語句 3 在循環（代碼塊）已被執行之後執行

for (var i=0;i<10;i++) {
  console.log(i);
}

while循環：While 循環會在指定條件為真時循環執行代碼塊。

語法：

while (條件)
  {
  需要執行的代碼
  }

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

3、三元運算

var a = 1;
var b = 2;
var c = a > b ? a : b

九、函數

函數是由事件驅動的或者當它被調用時執行的可重復使用的代碼塊。

1、函數定義

JavaScript中的函數和Python中的非常類似，只是定義方式有點區別。

// 普通函數定義
function f1() {
  console.log("Hello world!");
}

// 帶參數的函數
function f2(a, b) {
  console.log(arguments);  // 內置的arguments對象
  console.log(arguments.length);
  console.log(a, b);
}

// 帶返回值的函數
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 調用函數

// 匿名函數方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 立即執行函數
(function(a, b){
  return a + b;
})(1, 2);

補充：

ES6中允許使用“箭頭”（=>）定義函數。

var f = v => v;
// 等同於
var f = function(v){
  return v;
}

如果箭頭函數不需要參數或需要多個參數，就是用圓括號代表參數部分：

var f = () => 5;
// 等同於
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
// 等同於
var sum = function(num1, num2){
  return num1 + num2;
}

函數中的arguments參數

function add(a,b){
  console.log(a+b);
  console.log(arguments.length)
}

add(1,2)
輸出：
3
2

註意：

函數只能返回一個值，如果要返回多個值，只能將其放在數組或對象中返回。

函數的全局變量和局部變量

局部變量：

在JavaScript函數內部聲明的變量（使用 var）是局部變量，所以只能在函數內部訪問它（該變量的作用域是函數內部）。只要函數運行完畢，本地變量就會被刪除。

全局變量：

在函數外聲明的變量是全局變量，網頁上的所有腳本和函數都能訪問它。

變量生存周期：

JavaScript變量的生命期從它們被聲明的時間開始。

局部變量會在函數運行以後被刪除。

全局變量會在頁面關閉後被刪除。

作用域：

首先在函數內部查找變量，找不到則到外層函數查找，逐步找到最外層

1、

2、

3、閉包

JavaScript（一）