一、JavaScript 介绍
1、概念
JS 是一门 客户端 脚本语言
（1）客户端：运行在客户端浏览器，每一个浏览器都有 JS 解析引擎
（2）脚本语言：不需要编译，直接解析执行
2、功能
可以来增强用户和 HTML 页面的交互过程，让页面有一些动态的效果
3、浏览器执行 JS
（1）渲染引擎（内核）：解析 Html、Css，比如：Chrome 浏览器的 blink、老版本的 webkit
（2）JS 引擎（JS 解释器）：读取运行网页中的 JS 代码，比如：Chrome 浏览器的 V8
4、JS 的组成
ECMAScript：JavaScript 语法
DOM：页面文档对象模型
BOM：浏览器对象模型
二、JavaScript 使用位置
1、行内 JS
<input type="button" value="唐伯虎" onclick="alert('秋香')" />
① 可以写在 HTML 标签的事件属性（以 on 开头）中
② HTML 推荐使用双引号，JS 推荐使用单引号
2、内嵌 JS
定义 <script> 标签，标签体内容就是 JS 代码
<script>
alert('我是内嵌式 JS')
</script>
3、外部 JS
定义 <script> 标签，通过 src 属性引入外部文件
<script src="./My.js"></script>
注意：
① <script> 可以定义在 HTML 页面的任何地方，但是定义的位置会影响执行顺序。
② <script> 可以定义多个
三、JavaScript 注释
（1）单行注释：//
（2）多行注释：/* */
四、JavaScript 输入输出语句
<script>
//1.浏览器弹出输入框
prompt('请输入年龄')
//2.浏览器弹出警示框
alert('未满十八岁不能查看')
//3.控制台打印信息
console.log('我是控制台打印语句')
</script>
五、JavaScript 变量
变量是内存中存放数据的空间，给这个空间起的名字叫做变量名
1、声明变量
var age;
var 是 JS 关键字，用来声明变量；声明变量后，计算机会自动分配空间（var 是 variable 缩写）
2、赋值
age = 18;
3、初始化
var myname = 'pink'
注意：
① 如果一行只有一条语句，则结尾分号可以省略（不建议）
② 变量可以不声明，直接赋值使用（不建议）
六、JavaScript 数据类型分类
不同数据占用的内存空间不同，为了充分利用内存空间分成了不同的数据类型
JS 的数据类型是根据等号变量值的数据类型来判断的
var a = 18; //这是一个数字型
var b = '张三'; //这是一个字符串
JS 是动态语言，变量的数据类型可以变化
var a = 18;
var a = '张三'; //可以给数字型 a 赋值字符串类型的数据
（1）简单数据类型
① Number：数字型，可以保存整数、小数、Infinity（无穷大）、NaN（非数字）、八进制（0开头）、十六进制（0x 开头）
② String：字符串型
③ Boolean：布尔型，可以保存 true、false
④ Null：空型（已声明赋值为 null），保存的值为空
⑤ Undefined：未定义型（已声明但未赋值）
（2）复杂数据类型
① Array：数组
② Function：函数
③ Object：对象
七、JavaScript 数据类型转换
1、转为字符串型
<script>
var num = 18;
//1.toString()
var str = num.toString();
console.log(str);
console.log(typeof str);
//2.String()
var str2 = String(num);
console.log(str2);
console.log(typeof str2);
//3. + 号拼接字符串
var str3 = num + '';
console.log(str3);
console.log(typeof str3);
</script>
2、转为数字型
<script>
// 1、parseInt() 整型
console.log(parseInt('3.14'));
console.log(typeof(parseInt('3.14')));
// 2、parseFloat() 浮点型
console.log(parseFloat('3.14'));
console.log(typeof(parseFloat('3.14')));
</script>
3、转为布尔型
<script>
console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(null)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(undefined)); // false
</script>
空字符串、0、null、NAN、undefined 转换为布尔型都是 false
八、JavaScript 运算符
（1）算术运算符
+（加）、-（减）、*（乘）、/（除）、%（取余）
（2） 一元运算符
++（自增）、--（自减）、+（正号）、-（负号）
（3）比较运算符
>、>=、<、<=、==、===（全等于）
- 比较方式：
① 类型相同：直接比较（字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止）
② 类型不同：先进行类型转换，再比较，例如：console.log(18 == '18'); 结果为 true
③ ===：全等于，在比较之前先判断两侧数据类型，如果类型不一样直接返回 false
（4）逻辑运算符
&&（与）、||（或）、！（非）
- 逻辑运算返回的值不一定是布尔型，即当运算的是表达式，而不是布尔值时（逻辑中断）
- 逻辑中断会发生短路，能决定后续的程序是否执行（重要）
（5）赋值运算符
=、+=、-=、*=、/=、%=
九、JavaScript 流程控制
顺序结构、分支结构、循环结构
1、顺序结构
按顺序执行
2、分支结构
有条件，只有一个语句能执行
- if 语句（一个条件，二选一执行）
- if else 语句（一个条件，二选一执行）
- if else if 语句（多个条件，多选一执行）
- ? : : 语句（一个条件，二选一执行）
- switch case 语句（一个条件，多选一执行）
注意：
① switch 判断条件与 case 全等（即 ===）才会执行
② 如果不写 break，那么匹配 case 后，执行当前语句后继续向下执行
③ switch case 语句案例：
<script>
var fruit = prompt('请输入水果种类');
switch(fruit){ //有大括号 { }
case '苹果': //有冒号 :
alert('1元/斤');
break; //注意是否要添加 break
case '香蕉':
alert('1.5元/斤');
break;
case '橘子':
alert('2元/斤');
break;
case '芒果':
alert('2.5元/斤');
break;
default: //写 default（无匹配 case）
alert('没有' + fruit);
}
</script>
3、循环语句
- for 循环
- 双重 for 循环
- while 循环
- do while 循环
注意：
① do while 语句案例
<script>
var i = 1;
do { //大括号
console.log('我今年' + i + '岁了');
i++;
} while (i <= 100) // wile 加小括号
</script>
② continue 关键字案例
<script>
//吃包子案例
for (var i = 1; i <= 5; i++){
if(i == 3){
console.log('第3个包子有虫子，不能吃');
continue; //退出本次循环，继续执行下次循环
}
console.log('我正在吃第' + i + '个包子');
}
</script>
③ break 案例
<script>
//吃包子案例
for (var i = 1; i <= 5; i++){
if(i == 3){
console.log('第3个包子有虫子，我不吃你的包子了!!');
break; //直接退出整个循环，之后的循环也不会执行
}
console.log('我正在吃第' + i + '个包子');
}
</script>
十、JavaScript 数组
1、创建数组
① 利用 new
//创建空数组
var 数组名 = new Array();
// 举例
// 创建空数组 arr:
var arr = new Array();
② 利用数组字面量
// 创建空数组
var 数组名 = [];
// 创建初始化的数组
var 数组名 = ['小白','小黑'];
// 举例
// 创建空数组
var arr = [];
// 创建一个数组，初始化值为：小白、12、true
var arr = ['小白',12,true]; // 数组中可以存放任意类型的数据
2、获取数组中的元素
数组名[];
// 举例
var arr = ['周一','周二','周三','周四','周五','周六','周日'];
console.log(arr[6]);
3、遍历数组
利用 for 循环遍历
<script>
var arr = ['周一','周二','周三','周四','周五','周六','周日'];
// 遍历数组
for (var i = 0; i < arr.length; i++){
console.log(arr[i]); // arr[i] 输出数组元素； 计数器 i 当索引号来用
}
console.log('数组长度为' + arr.length); //获取数组长度：数组名.length
</script>
4、新增数组元素
① 修改 length
// 例如
<script>
var arr = [1,2,3];
console.log(arr.length, arr);
arr.length = 5; //修改数组长度
console.log(arr.length, arr);
</script>
② 追加数组元素
// 例如
<script>
var arr = [1,3,5];
console.log(arr);
arr[3] = 13; // 追加元素
console.log(arr);
</script>
十一、JavaScript 函数
封装一段需要重复执行的代码块
1、声明
① 利用函数关键字（命名函数）
function 函数名(){
// 函数体
}
// 举例
function sayHello(){
alert('HelloWorld!');
}
② 利用函数表达式（匿名函数）
var 变量名 = function(){
// 函数体
}
// 举例
var sayHello = function(){
alert('HelloWorld!');
}
2、函数参数
<script>
function getAdd(num1,num2) { // 形参可以看作不用声明的变量
var sum = num1 + num2;
console.log(sum);
}
getAdd(3,4); // 函数无返回值时返回的是 undefined
</script>
3、函数返回值
<script>
function getMessage(){
return '我爱你'; // 函数返回值不只是变量，还可以是字符串、数字
}
console.log(getMessage());
</script>
注意：函数只能 return 一个变量，例如：
return sum1,sum2; // 调用函数只能获取到 sum2
4、arguments 的使用
只有函数才有 arguments 对象，而且是每个函数都内置好了 arguments
- arguments 是一个伪数组，不是真正意义上的数组
- 存储了所有传递过来的实参
- 具有数组的 length 属性
- 按照索引的方式存储
- 没有真正数组的一些方法 pop()、push()等
- 可以按照数组方式遍历 arguments
<script>
function fn(){
console.log(arguments); //打印伪数组
console.log('arguments的长度：' + arguments.length); //length 属性
console.log('arguments索引为1的元素：' + arguments[1]); // 按索引存储
for (var i = 0; i < arguments.length; i++) {
console.log('遍历arguments元素：' + arguments[i]); // 按数组方式遍历
}
}
fn(1,2,3);
</script>
十二、JavaScript 作用域
（1）为了减少命名冲突
（2）es6 之前 JS 作用域：全局作用域、局部作用域
① 全局作用域：整个 JavaScript 标签或者 JS 文件
② 局部作用域：函数内部
特殊情况：函数内部未声明、直接赋值的变量是全局使用的
十三、JavaScript 对象
对象比数组表示内容更清晰
对象包含属性、方法
1、创建对象
① 使用字面量创建对象
<script> // 利用字面量创建对象 var obj = { uname: '张三丰', // 1.键值对形式 (属性名: 属性值) age: 18, // 2.用逗号隔开 sayHi: function(){ // 3.方法名的冒号后是个匿名函数 console.log('hi'); } } // 调用对象属性 console.log(obj.uname); // 方法一: 对象名.属性名 console.log(obj['uname']); // 方法二: 对象名['属性名'] // 调用对象方法 obj.sayHi(); // 对象名.方法名()
</script>
② 使用 new Object 创建对象
<script>
// 利用 new Object 创建对象
var obj = new Object();
obj.uname = '张三丰'; // 1.追加属性：对象名.属性名 = 属性值
obj.age = 18; // 2.用分号隔开
obj.sayHi = function(){ // 3.方法名的等号后是个匿名函数
console.log('hi');
}
// 调用对象属性、调用对象方法方法同上
console.log(obj.uname);
console.log(obj['uname']);
obj.sayHi();
</script>
③ 使用构造函数创建对象
<script>
// 使用构造函数创建对象
function Star(uname, age) { //1. 构造函数名首字母要大写
this.name = uname; //2. 用 this 指定是哪个对象
this.age = age;
this.sayHi = function(){ //3. 方法名后接匿名函数
console.log('hi');
}
} //4. 构造函数不需要 return 返回
var zsf = new Star('张三丰',18); //5. 调用构造函数必须使用 new
var zjl = new Star('周杰伦',18);
// 调用对象属性、调用对象方法方法同上
console.log(zsf.name);
console.log(zsf['name']);
zsf.sayHi();
</script>
2、遍历对象
<script>
var zs = {
name : '张三',
age : 18,
skill : function(){
console.log('i can dance!');
}
}
// 使用 for ( var key in obj) 遍历对象
for (var k in zs){ // for 里的变量习惯上使用 k 或者 key
console.log(k); // k 属性名
console.log(zs[k]); // obj[k] 属性值
}
</script>
十四、JavaScript 内置对象
JS 中的对象分为三种：自定义对象（ECMAScript）、内置对象（ECMAScript）、浏览器对象（JS 独有）
常见的内置对象有：Math、Date、Array、String 等
1、Math 对象
Math 数学对象不是一个构造函数，所以不需要 new 来调用
（1）圆周率
<script>
console.log(Math.PI);
</script>
（2）求最大值方法
<script>
console.log(Math.max(1,3,5));
console.log(Math.max(1,3,'老师')); // NAN 因为不能转为数字型
console.log(Math.max()); // -Infinity 无参数
</script>
（3）求绝对值方法
<script>
console.log(Math.abs(1));
console.log(Math.abs(-1)); // 1 隐式转换
console.log(Math.abs('老师')); // NAN
</script>
（4）取整方法
<script>
// 1.向下取整 floor()
console.log(Math.floor(1.2)); // 1
console.log(Math.floor(1.5)); // 1
console.log(Math.floor(1.9)); // 1
// 2.向上取整 ceil()
console.log(Math.ceil(1.2)); // 2
console.log(Math.ceil(1.5)); // 2
console.log(Math.ceil(1.9)); // 2
// 3.四舍五入取整 round()
console.log(Math.round(1.2)); // 1
console.log(Math.round(1.5)); // 2
console.log(Math.round(1.9)); // 2
</script>
（5）随机数方法
<script>
// 1. [0,1)的随机小数
function getRandom() {
return Math.random();
}
console.log(getRandom());
// 2. 两个数(并包含两个数)之间的随机整数
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandomIntInclusive(1, 10));
</script>
2、Date 对象
Date 对象是一个构造函数，调用时要用 new 实例化
<script>
// 1.不带参数实例化
var now = new Date();
console.log(now);
// 2.带上参数实例化
var time = new Date('2019-5-1');
console.log(time);
</script>
（1）获取年、月、日、时、分、秒方法
<script>
var date = new Date();
console.log(date.getFullYear()); //年
console.log(date.getMonth()); //月 (月份小1个月)
console.log(date.getDate()); //日
console.log(date.getDay()); //星期 (周日返回的是0)
console.log(date.getHours()); //时 (时分秒小于10时都是个位数)
console.log(date.getMinutes()); //分
console.log(date.getSeconds()); //秒
</script>
（2）把日期按习惯格式化
<script>
// 2022年4月3日 星期日 xx:xx:xx
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var day = date.getDay();
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var hours = date.getHours();
hours = hours < 10 ? '0' + hours : hours;
var minutes = date.getMinutes();
minutes = minutes < 10 ? '0' + minutes : minutes;
var seconds = date.getSeconds();
seconds = seconds < 10 ? '0' + seconds : seconds;
console.log(year + '年' + month + '月' + dates + '日 ' + arr[day] + ' ' + hours + ':' + minutes + ':' + seconds);
</script>
（3）获取时间戳方法
距离1970年1月1日总的毫秒数
<script>
// 方法一: value of() 或者 getTime()
var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());
// 方法二: 简单写法(最常用)
console.log(+new Date());
// 方法三: H5 新增
console.log(Date.now());
</script>
（4）实现倒计时
<script>
// xx天xx时xx分xx秒
var nowTime = +new Date();
var inputTime = +new Date('2022-4-3 23:30:00');
var times = (inputTime - nowTime) / 1000;
var days = parseInt(times / 60 / 60 / 24);
days = days < 10 ? '0' + days : days;
var hours = parseInt(times / 60 / 60 % 24);
hours = hours < 10 ? '0' + hours : hours;
var minutes = parseInt(times / 60 % 60);
minutes = minutes < 10 ? '0' + minutes : minutes;
var seconds = parseInt(times % 60);
seconds = seconds < 10 ? '0' + seconds : seconds;
console.log(days + '天' + hours + '时' + minutes + '分' + seconds + '秒');
</script>
3、Array 对象
Array 对象是一个构造函数，调用时要用 new 实例化
<script>
// 1.不带参数:创建空数组
var arr1 = new Array();
console.log(arr1);
// 2.一个参数:创建了长度为参数的数组，里面有参数个空的数组元素
var arr2 = new Array(2);
console.log(arr2);
// 3.多个参数:创建了数组元素为参数的数组
var arr3 = new Array(2,3);
console.log(arr3);
</script>
（1）检测是否为数组方法
<script>
var arr = [];
var obj = {};
//对象 Array 中用于检测是否为数组的方法
console.log(Array.isArray(arr)); //true
console.log(Array.isArray(obj)); //false
//还可以用运算符 instanceof
console.log(arr instanceof Array); //true
console.log(obj instanceof Array); //false
</script>
（2）添加数组元素的方法
<script>
var arr = [1,2,3,4];
//1.数组末尾添加元素
returnPush = arr.push(5,'老师'); //可添加多个元素
console.log(arr); //[1, 2, 3, 4, 5, '老师']
console.log(returnPush); //6 返回新数组的长度
//2.数组前面添加元素
returnUnshift = arr.unshift(0,'同学'); //可添加多个元素
console.log(arr); // [0, '同学', 1, 2, 3, 4, 5, '老师']
console.log(returnUnshift); //8 返回新数组的长度
</script>
（3）删除数组元素的方法
<script>
var arr = ['张三','李四','王五','赵六','孙七'];
//1.数组末尾删除元素
var returnPop = arr.pop(); //只能删除一个元素
console.log(arr); //['张三', '李四', '王五', '赵六']
console.log(returnPop); //孙七 返回删除的元素
//2.数组前面删除元素
var returnShift = arr.shift(); //只能删除一个元素
console.log(arr); //['李四', '王五', '赵六']
console.log(returnShift); //张三 返回删除的元素
</script>
（4）翻转数组的方法
<script>
var arr = [1,3,5,6,2];
var returnReverse = arr.reverse();
console.log(arr); //[2, 6, 5, 3, 1]
console.log(returnReverse); //[2, 6, 5, 3, 1] 返回翻转后的数组
</script>
（5）数组排序的方法
<script>
var arr = [1,2,4,11,22,44];
//1.不传参数:将元素转换为字符串再比较
var returnSort = arr.sort();
console.log(arr); //[1, 11, 2, 22, 4, 44]
console.log(returnSort); //[1, 11, 2, 22, 4, 44] 返回排序后的数组
//2.传参
//(1)升序排列
arr.sort(function(a, b) {
return a - b;
});
console.log(arr); //[1, 2, 4, 11, 22, 44]
//(2)降序排列
arr.sort(function(a, b){
return b - a;
});
console.log(arr); //[44, 22, 11, 4, 2, 1]
</script>
（6）获取元素索引号的方法
当一个数组里有多个相同元素时，indexOf 和 lastIndexOf 都只返回一个索引值
<script>
var arr = ['红','橙','黄','白','白'];
//1.从前往后找，只找第一个匹配的返回索引
console.log(arr.indexOf('橙')); // 1
console.log(arr.indexOf('黑')); //-1 数组没有该元素时，返回 -1
console.log(arr.indexOf('白')); // 3 只能返回一个索引
//2.从后往前找，只找第一个匹配的返回索引
console.log(arr.lastIndexOf('橙')); // 1
console.log(arr.lastIndexOf('黑')); //-1 数组没有该元素时，返回 -1
console.log(arr.lastIndexOf('白')); // 4 只能返回一个索引
</script>
（7）将数组转化为字符串的方法
<script>
var arr = [1,2,3,'黑','blue'];
//1.用 , 分割
console.log(arr.toString()); // 1,2,3,黑,blue
//2.自定义分隔符
console.log(arr.join()); // 1,2,3,黑,blue 不传参:默认用 , 分割
console.log(arr.join('-')); // 1-2-3-黑-blue 传参:用传入的字符分割
console.log(arr.join('&')); // 1&2&3&黑&blue
</script>
4、String 对象
字符串所有的方法都不会修改字符串本身（字符串是不可变的）
（1）根据字符返回位置方法
<script>
var str = '我想你，我想见你';
console.log(str.indexOf('见')); // 6 位置从0开始，和数组一致
console.log(str.indexOf('想')); // 1 只能返回一个位置
console.log(str.indexOf('想', 2)); // 5 从位置2开始查找
</script>
（2）根据位置返回字符方法
<script>
var str = 'andy';
// 1.返回字符
console.log(str.charAt(0)); //a
// 2.返回字符的ASCII码 (可用来判断用户按下了哪个键)
console.log(str.charCodeAt(0)); //97
// 3.返回字符 (H5新增)
console.log(str[0]); //a
</script>
遍历字符串如下：
<script>
var str = 'andy';
for (var i = 0; i < str.length; i++){ //字符串类型是简单数据包装类型，所以有属性length
console.log(str.charAt(i)); //通过位置返回字符来遍历字符串的字符
}
</script>
（3）拼接字符串方法
<script>
var str = 'andy';
console.log(str.concat('iscute')); //andyiscute 和+效果相同，更多地是使用+来拼接
</script>
（4）截取字符串方法
<script>
var str = 'andy';
console.log(str.substr(1,2)); // nd substr(开始索引号,截取的字符长度)
</script>
（5）替换字符方法
<script>
var str1 = 'andy';
var str2 = 'andyandy';
console.log(str1.replace('a', 'b')); //bndy
console.log(str2.replace('a', 'b')); //bndyandy 只会替换第一个字符
</script>
（6）将字符串转换为数组的方法
<script>
var str = 'Andy,Jack,Mike';
console.log(str.split(',')); //['Andy', 'Jack', 'Mike']
console.log(str.split('a')); //['Andy,J', 'ck,Mike']
</script>
