JS前置知识

什么是JS语言

javascript是一种运行在***客户端*** 的***脚本语言***

客户端：即接受服务的一端，与服务端相对应，在前端开发中，通常客户端指的就是浏览器。

脚本语言：也叫解释型语言，特点是***执行一行，解释一行，如果发现报错，代码就停止执行*** 。

javascript的三个组成部分：ECMAScript、BOM、DOM

ECMAScript：定义了javascript的语法规范。

BOM：一套操作浏览器功能的API。

DOM：一套操作页面元素的API。

script标签

书写Javascript代码有两种方式，第一种是直接在script标签中书写，第二种是将代码写在js文件中，通过script进行引入。

直接在script中书写javascript代码：

<script>alert("今天天气真好呀");
</script>
复制代码

通过script标签引入一个JS文件，需要指定src属性

<script src="test.js"></script>
复制代码

tips：如果script标签指定了src属性，说明是想要引入一个js文件，这个时候不能继续在script标签中写JS代码，即便写了，也不会执行。

script标签的书写位置，建议写在标签的前面。

输入输出语句

在实际开发，基本不能使用3、4、5,因为用户体验不好。

console.log 控制台输出日志
document.write 往页面中写入内容
alert 弹框警告
confirm 确认框
prompt 输入框

注释

不被程序执行的代码。用于程序员标记代码，在后期的修改，以及他人的学习时有所帮助，在JS中，分为单行注释和多行注释

// 这是单行注释，只能注释一行,所有的代码均使用单行注释
/*这是多行注释，不能嵌套，多行注释只用来写文档说明
*/
复制代码

注释的作用：

1. 模块划分，方便代码查找和维护
2. 用于解释复杂代码的逻辑，方便维护和后期开发。
复制代码

变量

变量，可以变化的量，变量是在计算机中存储数据的一个标识符。可以把变量看成存储数据的容器。

变量与字面量：

字面量：10、20、“abc”、true这种从字面上就能看出来类型和值的量叫做字面量。

变量：可以变化的量。

变量的声明与赋值

1.变量可以同时声明并赋值。
2.先声明后赋值
3.不声明，直接赋值
4.既不声明，也不赋值
5.同时声明多个变量
复制代码

变量的命名规则与规范

命名规则（必须遵守）：
1.由字母、数字、下划线、$符号组成，开头不能是数字。
2.不能使用关键字和保留字
3.区分大小写
命名规范（建议遵守）：
1. 命名要有意义
2. 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。
复制代码

变量练习

//交换两个变量的值（掌握）
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>var a = 12;var b = 13;//  var tmp = a;//  a = b;//  b = tmp;//使用加法完成交换//  a += b;   // 12 + 13//  b = a - b;   // 12 + 13 - 13  --> b = 12//  a -= b;   // 12 + 13 - 12  --> 13//使用数组完成交换1//  a = [a,b];  //[12,13]//  b = a[0];   //b = [12,13][0] -->b = 12//  a = a[1];   //a = [12,13][1] -->a = 13//使用数组完成交换2a = [b,b=a][0];console.log("a = " + a + ",b = " + b);//a = 13   b = 12
</script>
</body>
</html>复制代码

tips:javascript是一种弱类型语言，不管声明什么类型的变量，都是用var，并且变量的类型是可以变化的。

var age = 90;
age = "张三";
复制代码

数据类型

基本数据类型包括了：number、string、boolean、undefined、null

如何查看数据类型

使用typeof关键字查看数据类型

typeof name;
typeof(name);
复制代码

Number类型

进制

1. 十进制，我们平时使用的就是十进制，进行运算时，八进制和十六进制的值最终都会转换成十进制。
2. 八进制，0开头的数值，数值序列：0-7
3. 十六进制，0x开头的数值，数值序列：0-9A-F进制了解即可，基本都是使用十进制，稍微了解一下进制之间的转换。
复制代码

浮点数

科学计数法：

var num = 5e+3;
var num1 = 5e-2;
//如何表示0.003和20000？
复制代码

浮点数的精度问题：

0.1 + 0.2 = ? // 0.30000000000000004
0.07 * 100 = ? //7.000000000000001
复制代码

浮点数在运算的时候会出现精度丢失的问题，因此在做比较运算的时候，尽量不要用小数进行比较。

数值范围

javascript不能表示世界上所有的数，因此在javascript中，数值大小是有一定限制的。

Number.MIN_VALUE  :5e-324
Number.MAX_VALUE  :1.7976931348623157e+308
Infinity   :正无穷
-Infinity  ：负无穷
复制代码

数值判断

1. NaN:表示一个非数值，当无法运算或者运算错误的时候，会得到一个NaN，NaN是number类型，表示一个非数值。
2. NaN不等于NaN
3. isNaN用来判断是否是一个数字，当返回true的时候，表示不是一个数字，返回false表示是一个数字。
复制代码

String类型

字面量

字符串的字面量：“abc” 、 ‘abc’ 字符串可以是双引号，也可以是单引号引起来。

字符串长度

length属性用来获取字符串的长度

var str = "abckjdlkfjd";
str.length;//字符串的长度
复制代码

字符串拼接

拼接字符串使用+号

//思考：
console.log(11 + 11);
console.log("hello" + " world");
console.log("100" + "100");
console.log("11" + 11);
复制代码

两边只要有一个是字符串，那么+就是字符串拼接功能
两边如果都是数字，那么就是算术功能。

boolean类型

boolean类型只有两个字面量，true和false，区分大小写。

所有类型的值都可以转化成true或者false

NaN、""、undefined、null、false、0  这6个值可以转换成false，其余的都是true。
复制代码

undefined类型与null类型

undefined表示一个声明了没有赋值的变量
null表示一个空的对象。undefined派生自null。
undefined == null  ：true
undefined === null ：false
复制代码

类型转换

如何使用谷歌浏览器，快速的查看数据类型？

字符串的颜色是黑色的，数值类型是蓝色的，布尔类型也是蓝色的，undefined和null是灰色的，这个在调试过程中时非常有用的。

转换成字符串类型

toString()
String()
/+ ""

转换成数值类型

Number()
parseInt
parseFloat
+num, -0等运算

转换成布尔类型

Boolean
!!

运算符

一元运算符

思考：
var a = 1; var b = ++a + ++a; console.log(b);
var a = 1; var b = a++ + ++a; console.log(b);
var a = 1; var b = a++ + a++; console.log(b);
var a = 1; var b = ++a + a++; console.log(b);
复制代码

逻辑运算符

&&:只要有一个值为假，结果就是假。找假值
||:只要有一个值为真，结果就是真。找真值
!:取反## 运算符的优先级复制代码

() 优先级最高
一元运算符 ++ -- !
算数运算符先* / % 后 + -
关系运算符 > >= < <=
相等运算符 == != === !==
逻辑运算符先&& 后||

选择语句

if..else

//语法
if(condition) {statement1
} else if (condition) { statement2
} else {statement3
}
复制代码

switch..case

//语法
switch (expression) {case value: statementbreak; // break 关键字会导致代码执行流跳出 switch 语句case value: statementbreak;default: statement
}复制代码

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>var day = prompt('请输入一个数字');var result = day % 7;switch(result){case 0:alert("今天星期天");break;case 1:alert("今天星期一");break;case 2:alert("今天星期二");break;case 3:alert("今天星期三");break;case 4:alert("今天星期四");break;case 5:alert("今天星期五");break;case 6:alert("今天星期六");break;default:alert("请输入合法的数字");break;}
</script>
</body>
</html>
复制代码

三元运算符

表达式1 ? 表达式2 : 表达式3
var sex = sex == 1 ? '男':'女';
复制代码

实例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>var num2 = Math.round(Math.random() * 100);console.log(num2);var num1 = prompt("请输入一个0~100的数字");//  if (num1 >= num2) {
//    alert("你赢了");
//  }else {
//    alert("你输了");
//  }//判断条件  ?  条件成立时执行的代码  ：  条件不成立时执行的代码num1 > num2 ? alert("你赢了") : alert("你输了");
</script>
</body>
</html>
复制代码

循环语句

while循环

while(expression) {statement
}
复制代码