今天给大家介绍最好用的脚本语言--JavaScript

JavaScript

1、编程

让计算机代为解决某个问题，使用某种程序设计语言编写代码，最终得到正确结果的过程。

2、机器语言

机器语言是用二进制代码表示的计算机能直接识别和执行的一种机器指令系统指令的集合。它是计算机的设计者通过计算机的硬件结构赋予计算机的操作功能。

3、编程语言

通过类似人类的语言进行控制计算机，让计算为我们做事情的语言。

编程语言是一系列指令，有固定的格式和语法

1. 汇编语言

和机器语言类似，能够直接对硬件操作，容易识别和记忆

1. 高级语言

是一种面向对象或者是过程的语言，比较接近自然语言和数学公式。

## 4、HTML/CSS/JS的关系

HTML决定网页结构和内容

CSS决定网页的模样

JavaScript实现业务逻辑和页面控制（功能）

## 5、浏览器执行JS

浏览器分成两部分：渲染引擎和JS引擎

渲染引擎：用于解析HTML与CSS，俗称内核

JS引擎：JS解释器，读取网页中的JavaScript代码

\

浏览器本身不会执行JS代码，通过内置的JS引擎来执行JS代码。JS引擎会逐行解释每一句代码（转换为机器语言），然后由计算机执行。

## 6、JS的组成

ECMAScript：JavaScript语法，由所有浏览器厂商共同遵守

ECMA（欧洲计算机制造商协会）

DOM：页面文档对象，提供给JS很多操作页面中元素的属性和方法

BOM：浏览器对象模型，提供很多操作浏览器属性和方法，比如获取分辨率、弹出框

## 7、js的书写位置

- 行内

直接写在元素的内部

```

<!-- 行内 -->

   <button onclick="alert('点击了按钮')">点击</button>

```

- 内部

```

   <!-- 使用script标签 -->

   <script>

       alert("打开了页面")

   </script>

```

- 外部

```

   <!-- 使用script标签的src属性，导入外部的js文件 -->

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

```

## 8、JS的注释

单行注释 // ctrl+/

多行注释 /**/ shift+alt+a

## 9、JS的输入输出语句

```

       alert("输出了内容") // 浏览器弹出提示框

       console.log("打印一些内容") // 控制台打印输出信息，给程序员测试（改BUG）用的

       console.log(1,2,3,4,5,6); // 使用逗号隔开可以输出多个内容，这些内容之间有空格隔开

       var username = prompt("请输入用户名")

       console.log("欢迎您！",username);

```

## 10、变量

### 什么是变量

存储数据的容器，我们可以通过变量获取数据或者修改数据

### 变量的使用

```

// 声明变量

       // var 是js的关键字，用来声明变量

       var username;

       // 赋值

       username = "张三";

       // 使用 = 将数据存放到username变量中

       // 使用这个变量

       console.log(username);

```

### 变量更新

```

       // 通过重新赋值来修改变量的值

       username = "李四"

       console.log(username);

```

### 多个变量的声明

```

       // 声明多个变量

       // 可以直接写在一起，使用,隔开

       // 还可以在声明的时候直接赋值

       var name = "王五",

           age, sex;

       age = 20;

       sex = "男"

       console.log(name, age, sex);

```

### 声明变量的特殊情况

- 声明不赋值

```

       // 声明不赋值

       var date;

       console.log(date); // undefined 未定义

```

- 不声明直接赋值

```

// 不声明直接赋值

str = "你好"

console.log(str); // 你好 不要这么做

```

- 不声明不赋值

```

// 不声明不赋值

console.log(aaa); // 报错

```

## 11、变量命名规范

```

/*

变量名可以包含字母、数字、下划线和$符号

不能以数字开头

区分大小写

保留字、关键字不能作为变量名称 var if case

见名知意

*/

```

## 12、数据类型

```

// 对数据进行分类，不同的数据类型会占用不同的空间

// 在js中，数据类型不是固定，是根据 = 右边的值 动态改变的

var num = 10;

console.log(num);

// typeof 关键字 可以用来检测数据类型

console.log(typeof(num));

num = "你好"

console.log(num);

console.log(typeof(num));

```

## 13、数据类型的分类

- 基本数据类型

number、string、boolean、null、undefined

- 复杂数据类型（引用数据类型）

Object、Array

Number：数字型

包含整型（整数）和浮点型 （小数）

```

var num = "你好";

console.log(num - 1); // NaN NOT A Number 不是一个数字

// isNaN() 用来判断是否不是数字，是数组返回false 不是数字返回true

// 用来判断是否能转换成数字

console.log(isNaN('123'));

```

Boolean：布尔值

true和false 等价 1 和 0

```

// 真 true 假 false

var b1 = true;

var b2 = false;

console.log(b1,b2); // true false

console.log(b1+1,b2+1); // 2 1

```

Undefined

声明变量没有赋值的时候就是 undefined

```

var a;

console.log(a);

console.log(a + 1); // NaN

console.log(a + '123'); // undefined123

```

Null：空值

```

var c = null;

console.log(c);

```

String：字符串

- 使用"" 或者 ''

```

var str = '123';

console.log(str);

console.log(typeof(str));

```

- 转义字符

```

' 单引号

" 双引号

\ 反斜杠

\n 换行

\r 回车

\t tab(制表符)

\b 退格符

\f 换页符

var str2 = "张三说："早上好""

console.log(str2);

```

- length属性

```

// 可以获取字符串长度

var str3 = "123456"

console.log(str3.length);

```

- 字符串的拼接

```

var name = "张三",

age = 20,

sex = "男";

// 可以把多个字符串或者变量拼接在一起

// 使用+拼接

var str4 = "姓名：" + name + " 年龄：" + age + " 性别：" + sex

console.log(str4);

```

## 14、数据类型转换

把一种数据类型转换成另一种数据类型

转换成字符串型

- toString() 转换成字符串

```

var data = true;

var str = data.toString()

console.log(data);

console.log(typeof (data));

console.log(str);

console.log(typeof (str));

```

- String() 强制转换

```

var str2 = String(data)

console.log(str2);

console.log(typeof(str2));

```

- 隐式转换

```

// 当运算符两边的数据类型不一致的时候，计算机无法计算，所以会先把数据类型转换成一样的然后再计算

// 这种不由我们程序员自己操作的数据转换叫做隐式转换

var data2 = 123;

var str3 = data2 + '3';

console.log(str3); // 1233

// 任何数字类型 + 字符串都会变成字符串

```

转换成数字型

- parseInt() 转换成整数

```

console.log(parseInt("123")); // 123

console.log(parseInt("123.123")); //123

console.log(parseInt("123a")); // 123

console.log(parseInt("ss")); // NaN

console.log(parseInt(true)); // NaN

```

- parseFloat() 转换浮点数

```

console.log(parseFloat("123")); // 123

console.log(parseFloat("123.123")); //123.123

console.log(parseFloat("123a")); // 123

console.log(parseFloat("ss")); // NaN

console.log(parseFloat(true)); // NaN

```

- Number() 必须是能够完全转换成数字的

```

console.log(Number("123")); // 123

console.log(Number("123.123")); //123.123

console.log(Number("123a")); // NaN

console.log(Number("ss")); // NaN

console.log(Number(true)); // 1

```

- 隐式转换

```

// 字符串 + 任意类型都是字符串

var data = "123";

console.log(data+2); // 1232

console.log(data-2); // 121

console.log(data*2); // 246

console.log(data/2); // 61.5

console.log(data%2); // 1

```

转换布尔型

```

// 代表空、否定的值都会被算作 false，比如 null NaN 0 undefined，其余的 都是 true

// 隐式转换 > < >= <= == !== ===（关系运算符）

var b1 = 1>2;

console.log(b1);

```

## 15、运算符

也称作操作符，用于实现赋值、比较、算术运算等功能。

### 算术运算符 + - * / %

```

var data = 10;

console.log(data + 2);

console.log(data - 2);

console.log(data * 2);

console.log(data / 2);

console.log(data % 2);

```

### 递增递减运算符

```

// 可以放在变量前面（前置运算符），也可以放在变量后面（后置运算符）

// 只能搭配变量使用

// 前置

var data = 10;

++data;

console.log(data);

// 后置

var data = 10;

data++;

console.log(data);

// 区别

// 前置：先计算后返回

// 后置：先返回后计算

// data++;

var a = data++;

// 先返回 所以 a先等于10 然后data+1

var b = ++data2;

// 先计算 data2+1 b = data2

console.log(a, b); // 10 11

```

### 比较运算符

```

// 对数据进行比较，返回的结果是布尔值

// > 大于 < 小于 >= 大于等于 <= 小于等于 != 不等于

// == 等于 === 全等

var data = 10;

var data2 = "10";

console.log(data == data2); // true 指的是值等于

console.log(data === data2); // false 指的是全等（值和数据类型一致）

```

### 逻辑运算符

```

// && 逻辑与，全真为真

// || 逻辑或，全假为假

// ! 逻辑非

// true && false 返回 false

console.log(10 > 2 && 5 < 3);

// true || false 返回 true

console.log(10 > 2 || 5 < 3);

console.log(!true); // 取反

// 短路运算

// 使用值或者表达式参与运算

// 逻辑与的短路运算 表达式1 && 表达式2

// 如果表达式1的值为true则返回表达式2，否则返回表达式1

console.log(1 + 1 && 2 + 2);

console.log(1 - 1 && 2 + 2);

// 逻辑或的短路运算 表达式1 || 表达式2

// 如果表达式1的值为true则返回表达式1，否则返回表达式2

console.log(1 + 1 || 2 + 2);

```

### 赋值运算符

```

// = 直接赋值

var a = 3;

console.log(a);

a += 2; // a = a+2

console.log(a);

a -= 2; // a = a-2

console.log(a);

a /= 2; // a = a/2

console.log(a);

a *= 2; // a = a*2

console.log(a);

a %= 2; // a = a%2

console.log(a);

```

### 运算符优先级

```

// 小括号 ()

// 一元运算符 ++ -- !

// 算术运算符 先 * / 后 + -

// 关系运算符 > >= < <=

// 比较运算符 == != ===

// 逻辑运算符 先&&后||

```

## 16、流程控制

在程序的执行过程中，每条代码的执行顺序是会影响到最终结果，所以很多时候，我们会根据一个具体情况控制代码的执行顺序。

### 顺序结构

最简单，最基本的一种代码执行顺序，就是从上往下依次执行。

### 分支结构

根据不同的条件，执行不同的代码，得到不同的结果

- 单分支语句

```

if(条件表达式){

// 要执行的代码

}

// 如果条件表达式为真，就会执行大括号里面的代码

```

- 双分支语句

```

if(条件表达式){

// 代码1

}else{

// 代码2

}

// 如果条件表达式为真，就会执行代码1，否则执行代码2

```

- 多分支语句

```

if(条件表达式1){

// 代码1

}else if(条件表达式2){

// 代码2

}....

else{

// 代码3

}

// 如果条件表达式1为真，就会执行代码1，如果为假才会去判断条件表达式2，如果条件表达式2为真，执行代码，后面一次执行，如果全部都不为真，会执行else中的代码3

```

- 三元表达式

```

// 条件表达式?表达式1:表达式2;

// 如果条件表达式为真，返回表达式1的值，否则返回表达式2的值

sex === 0?console.log("男"):console.log("女");

sex === 0?sexName = "男":sexName = "女";

sexName = sex === 0 ? "男" : "女"

console.log(sexName);

```

- switch(多分支语句，作为等值判断)

```

switch(表达式){

case value1:

// 语句1

break;

case value2:

// 语句1

break;

...

default:

// 语句3;

break;

}

// 表达是的值会和case后的value比较，如果全等则执行内部代码，从上往下逐一匹配，全部都不匹配，会执行default中的代码

// 匹配是全等 ===

// 如果没有break，执行完里面的代码会执行下一个case

// switch 和 if和区别

// 固定值判断 用switch比较方便，性能更好

// 区间判断用if

```

### 循环结构

重复执行同样的操作

- for循环

```

for(初始化变量;条件表达式;操作表达式){

// 循环体

}

// 初始化变量：循环开始的初始数据

// 条件表达式：每次循环体执行之前都要进行一次判断，使用条件表达式判断

// 操作表达式：每次循环体执行完后执行的代码

for (var i = 1; i <= 10; i++) {

console.log(i);

}

// 执行过程

// 1、var i = 1; 执行一次

// 2、做条件表达式的判断，如果条件表达式为真则执行3，如果条件表达式为假直接结束循环

// 3、执行循环体

// 4、执行操作表达式

// 5、重复执行2-5

// break: 直接结束循环

// continue: 结束本次循环，进入下一次循环

```

- 双重for循环

```

for(初始化变量1;条件表达式1;操作表达式1){

// 循环体1

for(初始化变量2;条件表达式2;操作表达式2){

// 循环体2

}

}

// 外层每循环一次，内层会执行所有循环

```

- while循环

```

while(条件表达式){

// 循环体

}

// 当条件表达式为true会执行循环体，否则结束循环

var i = 1;

while (i <= 10) {

console.log(i);

i++;

}

```

- do...while循环

```

do{

// 循环体

}while(条件表达式)

// 会先执行一次代码再判断条件

```

## 17、数组

数组指的是一组数据的集合，数组中的每个数据都被称为元素，这些元素可以是任意类型的；

### 创建数组

- ```

var arr = [1,2,3,4,true,"哈哈哈",[1,2,3]];

```

- ```

var arr = new Array(1,2,3)

```

### 访问数组元素

索引（下标）：用来访问数组元素的序号（数组的下标从0开始）

语法：数组名[索引]

超出数组长度会返回undefined

### 遍历数组元素

把数组的元素从头到尾访问一次

```

for (var i = 0; i < 7; i++) {

console.log(i);

console.log(arr[i]);

}

```

### 数组长度

上面这种写法，数组长度被写死了，如果数组长度变化，还要去代码改循环次数

数组名.length

```

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

console.log(arr[i]);

}

```

### 数组新增元素

```

arr[索引] = 值;

// 创建一个1-20的数组

for (var i = 0; i < 20; i++) {

arr2[i] = i + 1

}

```

### 翻转数组

```

var arr = [10, 20, 30, 40, 50]

var newArr = []

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

console.log(arr.length - i - 1);

newArr[i] = arr[arr.length - i - 1];

}

console.log(newArr);

```

### 冒泡排序

```

var arr = [54, 21, 8, 4, 32, 68, 15, 68, 6]

// 从小到大排列

// 比较相邻的两个元素，如果前一个比后一个大则交换位置

// 一次循环之后，最大值到了最后面

// 因为最后一个值是最大的，就不要比较了

for (var i = 0; i < arr.length - 1; i++) {

for (var j = 0; j < arr.length - 1 - i; j++) {

if (arr[j] > arr[j + 1]) {

var temp = arr[j];

arr[j] = arr[j + 1];

arr[j + 1] = temp;

}

}

}

console.log(arr);

```