3 - JavaScript 的概念和语法

3 - JavaScript 的概念和语法

---

一、什么是 JavaScript

• JavaScript 是 Web 的编程语言。

• JavaScript 可以更新和更改 HTML 和 CSS。

• JavaScript 可以计算、操作和验证数据。

---

二、HTML 如何调用 JavaScript

在 HTML 中，使用<script>字段调用 JS 代码

<script>
    // JS code
</script>

1. 外部 JavaScript

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

调用外部的 JavaScript 文件，文件后缀名必须为.js才可以被正确识别

针对<script>标签加载外部JavaScript文件，有两种加载模式，分别是async和defer

1.1 异步加载（async）

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

使用async属性来要求页面加载的时候不会等待js文件加载完成再继续加载，而会采用异步的形式，保证加载js不会阻塞页面

1.2 顺序加载（defer）

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

与async不同，defer会在html加载时按照顺序依次加载js文件并等待

1.3 小结

• 如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 async。
• 如果脚本需要等待页面解析，且依赖于其它脚本，调用这些脚本时应使用 defer，将关联的脚本按所需顺序置于 HTML 中。

2. 内联 JavaScript

<button onclick="createParagraph()">点击</button>
<script>
    function createParagraph() {
        const para = document.createElement('p');
		para.textContent = '你点击了这个按钮！';
		document.body.appendChild(para);
    }
</script>

针对<button>标签，可以使用onclick属性来直接调用内嵌的JavaScript代码。

但是并不推荐这样做，这样做需要针对每个button对象单独指定onclick属性，可以使用下面的代码来选定所有button对象

<button>botton-1</button>
<button>botton-2</button>
<script>
    // 创建 createParagraph 函数
    function createParagraph() {
        const para = document.createElement('p');
		para.textContent = '你点击了这个按钮！';
		document.body.appendChild(para);
    }
    
    // 调用所有 button 对象
    const buttons = document.querySelectorAll('button');
	
    // 创建 for 循环，为每一个 button 对象添加 click 动作
	for(let i = 0; i < buttons.length ; i++) {
        buttons[i].addEventListener('click', createParagraph);
    }
</script>

---

三、JavaScript 基础语法

1. 注释

1.1 多行注释

/*
多行注释内容
多行注释内容
多行注释内容
*/

使用/**/来确定一段多行注释

1.2 单行注释

// 单行注释1
// 单行注释2

使用//来确定一行注释

2. 代码块

function funcName(funcVar1, funcVar2) {
    // 函数内容
}

if (a > 2) {
    // if 语句内容
}

使用{}来圈定一个代码块

3. 变量（var / let）

3.1 声明变量

var varName;
let verName;

var：定义一个变量，（旧版本语法，应尽量避免使用）

let：定义一个变量，作用于当前代码块（局部变量）

3.2 初始化变量

varName = "var_value";

在声明变量之后可以初始化变量的值

let varName = "var_value";

可以在声明变量时直接初始化变量值

3.3 变量的类型

在 JavaScript 中，变量具有以下几种类型：<number>、<string>、<boolean>、<array>和<object>

3.3.1 number - 数字

JavaScript 中变量的属性没有int和float的界定，仅有 number.

let num_1 = 3;
let num_2 = 3.141;

这两个变量的属性都是number

3.3.2 string - 字符串

let str_1 = "This is a string";

3.3.3 boolean - 布尔

let bool_1 = true;
let bool_2 = false;

3.3.4 array - 数组

let myNameArray = ['Chris', 'Bob', 'Jim'];
let myNumberArray = [10, 15, 40];

使用[]来表示数组

myNameArray[0];
myNumberArray[2];

选定数组的某一项，从 0 开始

3.3.5 object - 对象

let dog = { name: "spot", breed : "Dalmation" };

定义一个变量dog，包含两个键值对

dog.name;
dog.breed;
dog["name"];
dog["breed"];

可以使用dog.name或``dog[“name”]来调用name`的值

3.4 动态类型

在 JavaScript 中，改变一个已定义类型的变量并不会引起错误，将会直接被转换

let myNumber = "500";   // typeof string
myNumber = 500;     // typeof number

声明一个变量是string然后可以直接转换成number

4. 运算符

4.1 算数运算符

代码块	名称	作用	示例
+	加法	两数相加	6 + 9 = 15
-	减法	左数减去右数	20 - 15 = 5
*	乘法	两数相乘	3 * 7 = 21
/	除法	右数除以左数	10 / 5 = 5
%	求余（取模）	左边的数分成同右边数字相同的若干整数部分后，返回剩下的余数	8 % 3 = 2
**	幂	取底数的指数次方，即指数所指定的底数相乘	5 ** 5 = 3125

4.1.1 算数运算符的优先级

10 + 50 / 8 + 2;

JavaScript 中的计算顺序与正常的相同，乘法和除法被优先完成，然后从左到右完成加减法，括号同理

(10 + 50) / (8 + 2);

4.2 自增和自减运算符

自增（++）和自减（--）运算符用来将一个变量的值加或减 1，一般被用在循环之中。

4.2.1 自增运算符（++）

let num1 = 4;
num1++;

num1++将使num1的值加 1，这将会体现在下一次调用num1的时候，其值将会是 5。

4.2.2 自减运算符（--）

let num1 = 4;
num1--;

num1--将使num1的值减 1，这将会体现在下一次调用num1的时候，其值将会是 3。

4.2.3 调用位置

可以通过将自增或自减运算符放置在变量前，以使当前变量在调用前加或减 1。

let num1 = 4;
--num1;

--num1将使得这次调用时num1的值即为 3。

4.3 赋值运算符

运算符	名称	作用	示例	等价于
+=	加法赋值	右边的数值加上左边的变量	x = 3; x += 4;	x = 3; x = x + 4;
-=	减法赋值	左边的变量减去右边的数值	x = 6; x -= 3;	x = 6; x = x - 3;
*=	乘法赋值	左边的变量乘以右边的数值	x = 2; x *= 3;	x = 2; x = x * 3;
/=	除法赋值	左边的变量除以右边的数值	x = 10; x /= 5;	x = 10; x = x / 5;

4.3 比较运算符

运算符	名称	作用	示例
===	严格等于	测试左右值是否相同	5 === 2 + 4
!==	严格不等于	测试左右值是否不相同	5 !== 2 + 3
<	小于	测试左值是否小于右值。	10 < 6
>	大于	测试左值是否大于右值	10 > 20
<=	小于或等于	测试左值是否小于或等于右值。	3 <= 2
>=	大于或等于	测试左值是否大于或等于正确值。	5 >= 4

==和!=也可以用来比较相等与否，但是==和!=不会校验变量的类型，仅校验值

let A = 50;
let B = "50";
A == B;	//true
A === B;	//false

因此，一般建议使用===和!==来进行详细校验以防止产生错误。

4.4 逻辑运算符

逻辑运算符被用来测定多个变量或值之间的逻辑，常被用于[条件语句](# 7. 条件语句（if / switch）)中判定多个条件

运算符	说明	示例
&&	逻辑与，其并列的所有表达式均为true时，整个表达式为true	(x < 10 && y > 1)
`		`
!	逻辑非，对一个[布尔值](# 3.3.3 boolean - 布尔)求反，!true则为false	!(x == y)

与 python 的对比

JavaScript	Python	说明
&&	and	逻辑与
`		`
!	not	逻辑非

let a = 15;
let b = 20;

if (a === 15 && b >= 20) {
    // do sth
} else {
    // do sth
}

4.5 条件运算符

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符

// 语法: variablename=(condition)?value1:value2 
let age = 15;
let voteable = (age < 18) ? "年龄太小" : "年龄已达到";

此时voteable的值是年龄太小，如果age >= 18则为年龄已达到

5. 字符串

5.1 声明字符串

字符串应当用双引号（""）或单引号（''）圈定，任选其一即可。其内部可以包含另一种引号，如str3所示。

let str1 = "This is string 1.";
let str2 = 'This is string 2.';
let str3 = "His name is 'harbord'.";

5.1 拼接字符串

可以通过加号（+）来拼接多个字符串

let one = "Hello, ";
let two = "how are you?";
let joined = one + two + " I'm fine, " + "thanks.";
joined;	//"Hello, how are you? I'm fine, thanks."

5.2 字符串的长度

可以通过string.length方法获取字符串的长度

let browserType = "mozilla";
browserType.length;	//7

5.3 检索特定字符

可以使用string[<num>]的方式查找特定字符（即可以直接将字符串当作数组处理）

browserType[0];	//第一个字符
browserType[broserType.length - 1]; //最后一个字符

5.4 查找子字符串

使用indexOf属性来检索子字符串

browserType.indexOf('zilla'); //2

在broserType中查找子字符串zilla，返回值为2，即从第二个字符开始（起始计数为 0）

browserType.indexOf('canilla');	//-1

查找子字符串canilla，返回值为-1，表示找不到这个子字符串

可以利用该原理，判断字符串内是否存在特定子字符串

if (browserType.indexOf('mozilla') !== -1) {
    //do sth
}

5.5 提取特定位置字符串

使用slice属性来提取字符串

browserType.slice(0, 3);	//moz

提取0到3位置的字符。取值范围包含第一个参数0，不包含第二个参数3

browserType.slice(3);	//illa

当不提供第二个参数时，将会取之后所有的内容，即(3, browserType.length)

6. 数组

6.1 定义数组

使用中括号（[]）来定义一个数组，每个数组均有 N 个元素组成

let list1 = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
let list2 = [0, true, "ABC", [0, "142"], 127];

数组接受任意的值作为其元素。并且允许多层数组相嵌套

6.2 查找特定元素

同字符串一样（或者说字符串可以作为数组处理），可以通过object[<num>]的方式来选定特定元素

list1[1];	//'milk'

其余例如slice、indexOf、length等用法同字符串处详解

6.3 字符串和数组间转换

6.3.1 split

可以使用split方法来切分字符串，并将之转换为数组

let myData = "Manchester,London,Liverpool,Birmingham,Leeds,Carlisle";
let myArray = myData.split(',');
myArray;	// ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle']

.split()方法将使用其属性值对字符串进行切分，并转换为数组

6.3.2 join

可以使用join方法来将数组转换为字符串

let myArray = ["Manchester", "London", "Liverpool", "Birmingham", "Leeds", "Carlisle"];
let myData = myArray.join(',');
myData;	// "Manchester,London,Liverpool,Birmingham,Leeds,Carlisle"

join方法将使用指定的关键字来拼接数组到字符串，此处可以使用不同的关键字

let myData = myArray.join('.');
myData;	// "Manchester.London.Liverpool.Birmingham.Leeds.Carlisle"

6.3.3 toString

可以使用toString方法来转换数组到字符串

let myArray = ["Manchester", "London", "Liverpool", "Birmingham", "Leeds", "Carlisle"];
let myData = myArray.toString();
myData;	// "Manchester,London,Liverpool,Birmingham,Leeds,Carlisle"

toString方法无需额外指定关键字，将会默认使用,

6.4 添加或删除元素

6.4.1 push - 末尾添加

let myArray = ["A", "B", "C"];
myArray.push("D", "E");
myArray;	// ["A", "B", "C", "D", "E"]

6.4.2 pop - 末尾删除

let myArray = ["A", "B", "C"];
myArray.pop();
myArray;	// ["A", "B"]

6.4.3 unshift - 开头添加

let myArray = ["A", "B", "C"];
myArray.unshift("D", "E");
myArray;	// ["D", "E", "A", "B", "C"]

6.4.4 shift - 开头删除

let myArray = ["A", "B", "C"];
myArray.shift();
myArray;	// ["B", "C"]

7. 条件语句（if / switch）

7.1 if else语句

if (condition1) {
    //condition1 === 'true', do sth
} else if (condition2) {
    //condition2 === 'true', do sth
} else {
    //sth
}

if (condition1)：如果满足condition === 'true'，则执行该代码块

else if (condition2)：如果不满足condition === 'true'，且满足condition2 === 'true'，则执行该代码块

else：如果不满足以上两个条件，则执行该代码块

7.2 switch语句

if ... else if ... else语句通常被用来匹配仅有几个选择的情况

当有大量选项，且条件较为简单时，通常建议采用switch语句

switch (n) {
    case (1):
        //执行代码块 1
        break;
    case (2):
        //执行代码块 2
        break;
    default:
        //与 case 1 和 case 2 不同时执行的代码
}

switch (n) {}：创建一个switch语句，条件是n

case (1) :：如果条件1与条件n匹配，则执行该代码块

break;：阻止代码继续详细下运行，并跳出switch语句

default:：如果所有case语句的条件均无法匹配，则执行该代码块

8. 循环（for / while）

8.1 JavaScript 的几种循环

• for循环：循环代码块n次
• for .. in ..循环：循环遍历对象的属性
• while循环：条件为'true'的时候循环指定代码块
• do .. while ..循环：先运行一遍代码块，条件为'true'时循环运行

8.1.1 for循环

for循环用来遍历代码块n次

语法：

for (var i = 0; 1 < 100; i++) {
    //do sth
}

for () {}：定义一个for循环

var i = 0：初始化器（计数变量），通常是一个数字，被递增以计算循环次数

i < 100：退出条件，定义循环何时停止

i++：最终条件：每一次循环后执行一遍，通常用于与增加或递减计数变量，使其接近退出条件

• 如果计数变量未被迭代，即无法达到最终条件，循环将会永不停止

示例：

var cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
var info = 'My cats are called ';
var para = document.querySelector('p');

for (var i = 0; i < cats.length; i++) {
  info += cats[i] + ', ';
}

para.textContent = info;	// My cats are called Bill, Jeff, Pete, Biggles, Jasmin,

8.1.2 for in循环

for in循环用来遍历一个对象的属性

let person = {name : "Bill", age : 15};
for (let x in person) {
    console.log(x)	//name
    console.log(person[x])	//Bill
}

8.1.3 while循环

while循环会在条件为'true'的情况下循环执行代码块

while (condition) {
    //do sth
}

8.1.4 do while循环

do while循环是while循环的变体，在判断条件之前会先执行一次代码块，如果条件为'true'则循环执行

let condition = 1;
do {
    console.log(condition);
    condition++;
} while (condition <= 10);

8.2 跳出循环（break）

在循环完成之前可以使用break语句强制跳出循环，这将会直接结束整个循环

let index = 1;
while ('true') {
    index++;
    console.log(index)
    if (index >= 10) {
        break;
    }
}

if (index >= 10) { break; }：当满足index>=10时，触发break语句，结束循环

8.3 跳出迭代（continue）

continue语句类似于break语句，但是其区别在于break语句会结束整个循环，而continue语句仅会结束当前迭代。即跳过当前迭代内所有未执行的代码，直接进入下一个迭代

let index = 1;
while ('true') {
    index++;
    if (index === 5) {
        continue;
    } else if (index === 10) {
        break;
    } else {
        console.log(index);
    }
    
}
// 2 3 4 6 7 8 9

当index === 5时，会跳过当前迭代内剩余代码

当index === 10时，触发break语句，结束循环