JavaScript的引入方式
1. 直接在`script`标签内部书写代码
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
console.log('hello, world');
</script>
</head>
<body>
</body>
</html>
```
2. 通过`script`标签的`src`属性,引入外部的JavaScript文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
```
*为了提升用户体验,减少浏览器加载时间,所以将.js文件引入在</body>之前*
## 数据类型
在JavaScript中一种有5种原始类型
- 数值类型(`number`)
- 字符串类型(`string`)
- 布尔值类型(`boolean`)
- null
- undefined
## 在js中声明变量
var a(变量名);
a = 10;
1.数据类型变量
```
var a;
a = 10;
```
2.字符串类型变量
```
var a;
a = 'hello';
```
3.布尔值类型变量
```
var a;
a = true;
```
*其中\有转译的含义能够转译为字符串
\n为换行*
## 变量的命名规则
命名规则:
- 第一个字符可以是任意Unicode大小写字母,以及美元符号($)和下划线( _ )。
- 第二个字符及后面的字符,还可以用数字。
- 不能使用保留字作为变量名
#### 合法的命名规则
`arg0`
`_tmp`
`$elem`
#### 不合法的命名规则
`1a`
`23`
`***`
`a+b`
`-d`
`var`
`return`
## 操作符
ECMA-262描述了一组用于操作数据值的操作符,包括算术操作符(如加号和减号)、位操作符、关系操作符和相等操作符。
#### 一元操作符
1.递增和递减操作符(`++` `--`)
*example*
```
var a =10;
++a; 先将操作数算出来后的值作为返回值
a++; 把操作数加1之前的值作为返回值
```
2.一元加和减操作符
###### 对非数值应用一元加操作符时,该操作符会把这个数值强制转换成数值类型;一元减则为去相反数
*example*
```
var a ='10';
var b = +a;
console.log(a); 输出结果为文本类型的10
console.log(b); 输出结果为数字类型的10
```
#### 二元操作符
###### 算术操作符
`+` `-` `*` `/` `%`
*都会将其它数据类型转换为数字类型运算*
#### 逻辑操作符
不同类型的值转换成布尔值
##### 对象 => `true`
##### 空字符串 => `false`
##### 非空字符串 => `true`
##### 数值0 => `false`
##### 任意非0数值(包括`Infinity`) => `true`
##### `null` => `false`
##### `NaN` => `false`
##### `undefined` => `false`
1. 逻辑非(`!`)
###### 逻辑非运算符有一个叹号(`!`)表示,可以用于JS中任何值。无论这个值是什么数据类型,该操作符都会返回一个布尔值。
###### 算法:求操作数的布尔值,返回这个布尔值相反的情况
2. 逻辑与(`&&`)
###### 逻辑与有两个和号(`&&`)表示,有两个操作数,可以操作JS中的任意两个值。当两个数据值都是布尔值的时候,该操作符会返回布尔值。如果有一个数值不是布尔值,那么则不一定会返回布尔值。
###### 算法:求第一个操作数的布尔值,如果这个布尔值为true,那么最终的返回值就是第二个操作数,否则最终返回值是第一个操作数
3. 逻辑或(`||`)
###### 逻辑或操作符有两个竖线符号(`||`),有两个操作数,可以操作JS中的任意两个值。
###### 算法:求第一个操作数的布尔值,如果这个布尔值为true,那么最终返回值就是第一个操作值,否则最终回到第二个操作值。
4. 短路操作
###### 在`与`操作符(`&&`)和`或`操作符(`||`)中,如果第一个操作数就已经能确定最终返回的结果,那么就不会去计算第二个操作数了
## 关系操作符
小于(`<`)、大于(`>`)、小于等于(`<=`)、大于等于(`>=`)这几个关系操作符用于对两个值进行比较,比较的规则与我们在上数学课上所学的一样。这几个操作符都会返回一个布尔值。
## 相等操作符
相等操作符(`==`)、不相等操作符(`!=`)、全等操作符(`===`)、不全等操作符(`!==`)
#### 返回值为布尔值,优先使用全等及不全等
#### 相等和不相等 => 先转换类型再比较
#### 全等和不全等 => 仅比较而不转换类型
## 赋值操作符
简单的赋值操作符由等于号(`=`)表示,起作用就是把右侧的值赋给左侧的变量。
## 条件操作符(三目运算符)
`boolean_expression ? true_value : false_value`
#### 只有一个返回值
###### 算法:如果第一个布尔值为true,则到第二个返回值,否则到第三个返回值
## 条件语句
JavaScript提供`if`结构和`switch`结构,完成条件判断。
### 1. `if` 结构
语法:
```
if(表达式1){
表达式2;
}
表达式3;
```
**说明**: 程序判断表达式1,成立执行表达式2,不成立执行表达式3
### 2. if...else... 语句
语法:
```
if(表达式1) {
表达式2;
} else {
表达式3;
}
表达式4;
```
**说明**: 程序判断表达式1,成立执行表达式2,不成立执行表达式3,再执行表达式4
### 3. if...else if...
语法:
```
if(表达式1) {
表达式2;
} else if(表达式3) {
表达式4;
} else if(表达式5) {
表达式6;
} else {
表达式7;
}
表达式8;
```
### 4. 嵌套使用
```javascript
if(表达式1) { //区块1
if(表达式2) { //区块2
表达式3;
}
表达式4;
}
表达式5;
```
**说明:**
1. 程序判断表达式1,不成立执行表达式5,成立进入区块1;
2. 进入区块1,判断表达式2,成立执行表达式3,否则执行表达式4;
### 5. switch结构
```javascript
var a = 1;
switch(a) {
case 1 :
console.log(1);
break;
case 2 :
console.log(2);
break;
case 3 :
console.log(3);
break;
default :
console.log("default");
}
```
**说明**: `break:`跳出控制语句;`default:`当所有`case`都不匹配时执行`default`;
浙公网安备 33010602011771号