JavaScript 最初由网景公司开发的一种脚本语言，被大量地应用于网页中，用以实现网页和浏览者的动态交互。目前几乎所有的浏览器都可以很好地支持 JavaScript。由于 JavaScript 可以及时响应浏览者的操作，控制页面的行为表现，提高用户体验，因而已经成为前端开发人员必须掌握的语言之一。

JavaScript 是为满足制作动态网页的需要而诞生的一种编程语言，在 HTML 基础上，使用 JavaScript 可以开发交互式（网页）Web。JavaScript 的出现使得网页和用户之间实现了实时、动态和交互的关系。

2.JavaScript的组成部分

标准化后的 JavaScript 包含了 3 个组成部分：

1.ECMAScript

脚本语言的核心内容，定义了脚本语言的基本语法和基本对象。现在每种浏览器都有对ECMAScript标准的实现。

2.DOM（Document Object Model）

文档对象模型，浏览器中的DOM把整个网页规划成由节点层级构成的树状结构的文档，用DOM API可以轻松地删除、添加和替换文档树结构中的节点。

3.BOM（Browser Object Model）

浏览器对象模型，描述了对浏览器窗口进行访问和操作的方法和接口。

3.JavaScript的特点

JavaScript 是一种运行在浏览器中的主要用于增强网页的动态效果、提高与用户的交互性的编程语言。相比于其他编程语言，它具有许多特点，主要包括以下几方面。

解释性

JavaScript 不同于一些编译性的程序语言，它是一种解释性的程序语言，它的源代码不需要经过编译，直接在浏览器中运行时进行解释。

动态性

JavaScript 是一种基于事件驱动的脚本语言，它不需要经过 Web 服务器就可以对用户的输入直接做出响应。

跨平台性

JavaScript 依赖于浏览器本身，与操作环境无关。任何浏览器，只要具有JavaScript脚本引擎，就可以执行JavaScript。目前，几乎所有用户使用的浏览器都内置了JavaScript脚本引擎。

安全性

JavaScript 是一种安全性语言，它不允许访问本地的硬盘，同时不能将数据存到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。这样可有效地防止数据丢失。

基于对象

JavaScript 是一种基于对象的语言，同时也可以被看作是一种面向对象的语言。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。

4.JavaScript的使用方式

1.行内式（直接将js代码写在标签的内部）

<a href="javascript:alert('hello javascript');">点一下试试</a>
<button type="button" onclick="javascript:alert('hello javascript');">点一下</button>

2.内嵌式（将js代码写在script标签中）

推荐

<head>
    <script type="text/javascript">
        alert('hello javascript');
    </script>
</head>

script标签可以放在body中，也可以放在head中（推荐）

3.外链式（将js代码写在外部独立的文件中）

<script type="text/javascript" src="../js/my.js">   </script>

5.JavaScript中的输入和输出方式

5.1输入方式

使用window对象提供的prompt对象可以实现用户数据的输入

window.prompt('请输入数据');

5.2输出方式

使用警告窗口实现数据的输出

window.alert('hello javascript');
输出数据到控制台

console.log('hello javascript');
输出数据到页面

document.write('hello javascript');

6.JavaScript注释

JavaScript的注释分为两种类型：

1.单行注释

 //单行注释

2.多行注释

 /* 多行注释*/

7.JavaScript变量

1.什么是变量

通俗的讲，变量类似与一个存放东西的容器，从计算机的角度讲，变量指代的是计算机内存中的一段内存空间，用于存数据

2.JavaScript中如何定义一个变量

1.使用var关键字声明变量

var age ;//程序执行到这一步时，会在内存中开辟一段内存空间
age=18;  //将数字18放入刚刚开辟的空间中


var age=18; //定义变量的同时，赋值

2.变量命名规则

1.变量可以由数字，字母、英文下划线，美元$组成

2.不能以数字开头 a1 1a

3.不能使用关键字或者保留字 var for while ......

4.严格区分大小写 age Age 是不同的变量

5.变量名字要见名知意

6.使用驼峰命名法（首字母小写，后面单词的首字母大写 myName）

案例：

1.使用变量输出自己的信息 （姓名性别年龄学历专业邮箱工资电话）

2.交换两个变量的值

8.JavaScript数据类型

JavaScript中数据的类型大体可以分为两种，简单类型和复杂类型

简单类型

数值型	number
字符型	string
布尔型	boolean
未初始化	undefined
空值	null

复杂类型包含数组和对象等

js中的变量是一种动态数据类型，也就是变量本身是没有数据类型的，只有赋值以后才有了类型。

var a="张三";
    a=25;
    a=true;

如何判定数据的类型？

在js中判断一个变量的数据类型可以使用 typeof 运算符

var num = 20;
console.log(typeof num); //number
var name="张三";
console.log(typeof name); //string
var blen = true;
console.log(typeof blen); //boolean
var age;
console.log(typeof age) //undefined
var n = null;
console.log(typeof n) //object

数据类型的转换

1.其他类型转化成字符串类型

//数字类型转换成字符串  
var num  =10;
var temp = num.toString();
console.log(typeof temp);
console.log(String(num));
//使用 + 实现隐式转换
console.log(num+'');
//布尔类型转换成字符串
var b = true;
var temp =b.toString();
console.log(typeof temp);

2.其他类型转化成数字类型

//字符型转化为数字型
var age  = prompt('请输入您的年龄');
console.log( typeof age);
age = parseInt(age);
console.log( typeof age);

var p = '20px';
console.log(parseInt(p));

var price =prompt('请输入单价');
console.log( typeof price);
price = parseInt(price);//取整 不会四舍五入
console.log(price);
//小数的转换
price = parseFloat(price);
console.log(price);
//使用 Number(变量名)转换
var p = '120';
p = Number(p);
console.log(p);
console.log( typeof p);

//使用 - * / 实现隐式转换
var num = '10';
num = num -0;
console.log( num);
console.log( typeof num);

3.其他类型转换为布尔类型

console.log(Boolean('')); //false
console.log(Boolean(0)); //false
console.log(Boolean(NaN));//false
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false

9.JavaScript 运算符

9.1JavaScript 算数运算符

算数运算符用于对数字执行算数运算：

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	系数(取余)
++	递加
--	递减

//加法
var x = 7;
var y = 8;
var z = x + y;
console.log(z);

//除法
x = 3;
y = 2;
console.log(3/2);
console.log(3%2);

/*  ++ --
        
    1：后置++ 是将自身的值赋给变量，之后自身再加1；

    2：前置++ 是将自身+1 后的值赋给变量，同时自身加1；

*/
var a = 1;
b = a ++;
console.log('a=' + a + '   ' +'b='+ b); //  a = 2 , b = 1

var a = 1 ;
b = ++a ;
console.log('a=' + a + '   ' +'b='+ b)//a = 2 b=2

9.2JavaScript 赋值运算符

赋值运算符向 JavaScript 变量赋值

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

var x=2;
var y=3;
x+=2;
y-=1;
console.log(x);
console.log(y);

9.3JavaScript 比较运算符

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
?	三元运算符

var a=1;
var b=2;
console.log(a==b);

var a=1;
var b='1';
console.log(a==b);  //true
console.log(a===b); //false
console.log(a!=b);  //false
console.log(a!==b); //true


// 三元运算符

var a=1;
var b=2;

var str = a>b ? "a大于b":"a小于b"; //当条件为真时 执行前面的表达式  否则执行后面的表达式
console.log(str);

9.4JavaScript 逻辑运算符

运算符	描述
&&	逻辑与
\|\|	逻辑或
!	逻辑非

var b = true;
var c= false;
console.log(b&&c); //false
console.log(b||c);
console.log(!b);//false

9.5JavaScript 类型运算符

运算符	描述
typeof	返回变量的类型。
instanceof	返回 true，如果对象是对象类型的实例。

###

10.JavaScript 流程控制

流程控制（代码按照一定的顺序进行执行）分类：

10.1顺序结构

代码自上而下依次执行，所有的代码都将被执行

10.2分支结构

根据不同的条件，执行不同路径的代码（代码多选一），得到不同的结果

if分支：

语法结构：

//单分支
if(条件表达式){
    //条件满足时执行的代码
  }

//根据年龄判断是否成年

//双分支
if(条件表达式){
    //条件满足时执行的代码
  }else{
    //条件不满足时执行的代码
  }


//判断年份是否是闰年 能被4整除且不能被100整除 或者能被400整除


//多分支
if(条件表达式1){
    //条件满足时执行的代码
  }else if(条件表达式2){
    //条件满足时执行的代码
  }else if(条件表达式3){
    //条件满足时执行的代码
  }......
   else{
      //以上条件都不满足时执行的代码 
  }

//根据分数 给出成绩等级

switch分支

语法结构：

switch(表达式){
   case value1：
      //满足条件执行代码
       break;
    case value2：
      //满足条件执行代码
       break;
    case value3：
      //满足条件执行代码
       break;
    ....
    default:
        //以上条件都不满足执行代码  
  }  

//楼层查询案例

switch 注意事项：

1.表达式一般是一个变量方便进行值的替换

2.表达式和case里面的值在匹配的时候，是做的全等运算 ===

3.如果当前的case没有break，则不会退出，会继续执行下一个case

10.3循环结构

循环是反复不断的执行某些代码块

需求:打印输出100次hello world

for 循环

/*
    for循环语法结构 一般使用在已知循环次数的情况下
    初始化变量：用于计数
    条件表达式：循环的终止条件
    操作表达式：更新计数器
*/
for(初始化变量;条件表达式;操作表达式){
    
    //需要循环执行的代码
    
}

//for循环的执行过程

for(var i=1;i<=100;i++){
    
    console.log('hello');
}

补充：断点调试

在浏览器中按F12进入开发者模式

选择Sources

打断点（需要让代码在哪个位置停止执行，就在哪里打断点，直接点击代码坐在行即完成打断点操作）

刷新浏览器

1.step over

2.step into

3.step out

while循环

//while循环语法结构  一般使用在未知循环次数的情况下
while(条件表达式){
    //需要循环执行的代码
}

do...while 循环

//do  while循环语法结构  一般使用在要先执行在判定的条件下
do{
    
    //需要循环执行的代码
    
}while(条件表达式)

break continue的使用

break用于终止整个循环

for (var i = 0; i <10 ; i++) {
    if (i==3){
        break;
    }
    console.log(i)
}

//结束离其最近的循环体
 for (var j = 0; j <5 ; j++) {
     for (var i = 0; i <10 ; i++) {
         if (i==3){
             break;
         }
         console.log(i)
     }
 }


continue用于终止某一次循环

 for (var i = 0; i <5 ; i++) {
     if (i==3){
         continue;
     }
     console.log(i)
 }

11.JavaScript 数组

1.数组可以用一个变量名存储所有的值，并且可以用变量名访问任何一个值

2.数组中的每个元素都有自己的的ID(index 下标)，以便它可以很容易地被访问到

1、数组的创建

1.创建一个数组

var myCars=new Array() myCars[0]="Saab"; myCars[1]="Volvo" myCars[2]="BMW"

2.创建一个数组并指定长度，注意不是上限，是长度

var array = new Array([size]);

3.创建一个数组并赋值

var myCars=new Array("Saab","Volvo","BMW");

4.字面形式

var myCars=["Saab","Volvo","BMW"];

2.数组的元素的访问

通过指定数组名以及索引号码，你可以访问某个特定的元素。

var name=myCars[0];

myCars[0]="Opel";

3.数组的遍历

使用for循环实现数组的遍历

var array = [23, 12, 5, 19, 3];

for (var i = 0; i < array.length; i++) {
    console.log(array[i])
}

4.数组元素的添加、删除、截取、合并、拷贝

1.将一个或多个新元素添加到数组结尾，并返回数组新长度

arrayObj. push（);

var array3 =[1,2,3,4,5];
//添加元素到数组的最后  返回新数组的长度
var len =  array3.push(12)
console.log(array3)
console.log(len)

2.将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度

arrayObj.unshift（);

//添加元素到数组的最前面  返回新数组的长度
len =  array3.unshift(0);
console.log(array3)
console.log(len)

3.将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回删除后的元素。

arrayObj.splice（start，deleteNum，insert);

/*
 插入元素到数组指定的位置
 第一个参数 start  从哪里开始
 第二个参数 delNum 删除元素的个数
 第三个参数 insert  插入的新元素
 
 1.只写一个参数 会从指定开始的位置开始删除直到数组的末尾  以数组的形式返回删除的元素
 2.写两个参数  会从指定的位置 删除指定个数的元素 并以数组的形式返回
 3.写三个参数  从指定位置开始 删除指定的元素，并将新元素从指定开始的位置添加   返回删除的元素
*/

var arr = array3.splice(0)
console.log(arr)
console.log(array3)




console.log(array3.toString())
var arr = array3.splice(1,2)
console.log(arr)
console.log(array3.toString())


console.log(array3.toString())
var arr = array3.splice(1,2,28)
console.log(arr)
console.log(array3.toString())


4.移除最后一个元素并返回该元素值

arrayObj.pop();

var array = [23, 12, 5, 19, 3];
var temp = array.pop();
console.log(temp)
console.log(array.toString())


5.移除最前一个元素并返回该元素值，数组中元素自动前移

arrayObj.shift();

var array = [23, 12, 5, 19, 3];
var temp = array.shift();
console.log(temp)
console.log(array.toString())


6.删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素

arrayObj.splice(deletePos,deleteCount);

var array = [23, 12, 5, 19, 3];
var temp = array.splice(1,4);
console.log(temp)
console.log(array.toString())


7.以数组的形式返回数组的一部分，注意不包括 end对应的元素，如果省略 end 将复制start 之后的所有元素

arrayObj.slice(start, [end]);

var array = [23, 12, 5, 19, 3];
var temp = array.slice(1,3)
console.log(temp)
console.log(array.toString())


8.将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组

arrayObj.concat([item1[, item2[, . . . [,itemN]]]]);

9.返回数组的拷贝数组，注意是一个新的数组，不是指向

arrayObj.concat();

var array4 = [10,11,13,14]
var a = array4.concat()
console.log(array4)
console.log(a)

数组的深浅拷贝:

1.使用以上的concat（）和 slice（）方法对一维数组可实现新旧数组互不影响的拷贝，但是在元素是对象时，仍然还是会影响，因此这两种方法均是浅拷贝

2.使用JSON.parse(JSON.stringify(array));可实现数组的深拷贝；

5.数组的排序和翻转

反转元素（最前的排到最后、最后的排到最前），返回数组地址

arrayObj.reverse();

var array4 = [10,11,13,14]
array4.reverse();
console.log(array4)


对数组元素排序，返回数组地址

arrayObj.sort();

var array4 = [10,11,13,14,100,21]
console.log(array4)
array4.sort()
console.log(array4)


var array4 = [10,11,13,14,100,21]
console.log(array4)
array4.sort(function(a,b){return a-b})
console.log(array4)


sort()默认的排列方式是按照字符的unicode码进行排列的，在排列数值的时候会出现问题，因此需要依赖一个比值函数function(a,b){return a-b}

编写代码实现数组的排序

var array = [10,2,16,30,8]
console.log(array)
//冒泡排序法
for (let i = 0; i <array.length-1 ; i++) {
    for (let j = 0; j <array.length-i-1 ; j++){
        if(array[j]>array[j+1]){
            var temp = array[j]
            array[j] = array[j+1]
            array[j+1] = temp
        }
    }
}

//选择排序
for (var i = 0; i < array.length-1; i++) {
    var index = i;
    for (var j = i+1; j < array.length ; j++) {
        if(array[index]>array[j]){
            index = j;
        }
    }
    if(index!=i){
        var temp = array[i];
        array[i] = array[index];
        array[index] = temp;

    }
}

6.获取数组的长度

length 属性

//1.判断数组中元素的个数
var array3 = [10,11,13,14,100,21]
console.log(array3.length)

12.JavaScript 函数

JavaScript 函数是被设计为执行特定任务的代码块，会在某代码调用它时被执行

为何使用函数？

能够对代码进行复用：只要定义一次代码，就可以多次使用它。
能够多次向同一函数传递不同的参数，以产生不同的结果。

JavaScript 函数语法

JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()，函数名规则与变量名相同，圆括号可包括由逗号分隔的参数：(参数 1, 参数 2, ...)，由函数执行的代码被放置在花括号中：{}

function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}

案例：

1.计算两个数字的和

 //计算两个数字的和
    var num1 = 1;
    var num2 = 2;
    var result = num1+num2;
/*
    以上代码的写法无法实现代码的复用，如果后续还需要计算两个数字的和 
    以上代码还需要再写一次 造成代码的冗余，这时可以考虑将代码进行封装
    写成函数的形式  因为使用函数可以实现代码的复用
*/

function add(num1,num2){
    var res = num1+num2
    console.log(res)
}

//调用函数  函数不会再页面加载后自动执行  需要手动的调用
 add(1,2);

//为了后续能使用计算的结果 可以使用return将结果返回

function add(num1,num2){
    var res = num1+num2
    return res
}

var a = add2(1,2);
console.log(a+2); //5


//利用函数 实现简易计算器

function add(num1,num2){

    return num1/1+num2/1;

}
function sub(num1,num2){

    return num1-num2;

}
function mult(num1,num2){

    return num1*num2;

}
function div(num1,num2){

    return num1/num2;

}

let num1 = prompt('请输入第一个数')
let num2 = prompt('请输入第二个数')
let operator = prompt('请输入运算符')


switch(operator){
    case  '+':
        alert(add(num1,num2))  
        break;
    case  '-':
        alert(sub(num1,num2))
        break;
    case  '*':
         alert(mult(num1,num2))
        break;
    case  '/':
         alert(div(num1,num2))
        break;
    default:
        console.log('请输入正确的运算符！')
}

递归

函数的内部自己调用自己本身，默认是一个死循环，因此在使用递归的时候需要添加限制条件

function say(){
    alert('hello')
    say()
}
say()

var i = 0
function say(){
    i++
    alert('hello')
    if(i===3){
       return; //结束函数体的执行 
    }
    say()
}
say();

使用函数实现数组排序代码的复用

案例：

1.提示用户输入一个数组的长度

2.用户输入数组中的数值 ，要保证用户输入的值是数值

3.将用户输入值组成的数组排序

//获取数组

 var len = prompt('请输入数组的长度')
 var array = new Array();
do{
    var num = prompt('请输入数字')
    if(isNaN(num)){
        continue
    }
    array.push(num);
}while (array.length<len)
    
//函数实现代码复用
function getArray(length){
    var array = new Array();
    do{
        var num = prompt('请输入数字')
        if(isNaN(num)){
            continue
        }
        num = num*1;
        array.push(num);
    }while (array.length<length)

        return array;
}

//数组排序
function sortArray(ary){
    var array = ary
    for (var i = 0; i <array.length-1 ; i++) {
        for (var j = 0; j <array.length-i-1; j++){
            if(array[j]>array[j+1]){
                var temp = array[j]
                array[j] = array[j+1]
                array[j+1] = temp
            }
        }
	} 
    return array;
}
2.编写函数实现能创建x行y列的表格输出到页面

3.计算1-5之间所有整数的和

function getSum(num){
    if(num==1){
        return   1
    }
    return num+getSum(num-1)

}

4.菲波那切数列

function fb(n){
    if(n==1 || n==2){
        return 1;
    }
    return fb(n-1)+fb(n-2)  
}

13.JavaScript 作用域

作用域：

变量或者函数可以访问的范围，分为两种：

1.全局作用域：在全局使用var关键字声明的变量 ,可以再任意的范围访问

2.函数作用域: 在函数内使用var关键字声明的变量，只能在函数内部访问

var a = 10
console.log(a) //10

/*
    js程序执行前 会将使用var关键字声明的变量提升所在作用域的最前面，
    但是赋值还是在原来的位置
*/

console.log(a) //undefined
var a = 10
//以上代码作用域提升后 可以改写为
var a;
console.log(a) //undefined
a=10


function fn(){
    //局部变量作用域提升
    console.log(b) //undefined
    var b = 10;
}

var a = 10; //全局作用域下的变量  全局变量
function fn(){
    var b = 2  //函数作用域下使用var关键字声明的变量 局部变量
    // console.log(a)
    console.log(b)
}

console.log(a)
fn() //调用函数  执行函数体内的代码
console.log(b); //b是在函数内部定义的 在外部无法访问

var n = 10

function fn(){
    console.log(n//undefined
    var n = 5
}
console.log(n) 
var m =1
function fn3(m){ //参数在函数中相当于一个局部变量
    m=m+3 
}
console.log(m)

function fn4(){
    var a=b=c=2;
}
fn4();
console.log(a) //a is not defined
console.log(b) //2
console.log(c) //2

14.JavaScript自定义对象

什么是对象

现实世界的万物皆对象，对象是看得见，摸得着的事物，比如一个水杯，一个人

创建对象的三种方式

1.利用字面量创建对象

使用大括号，括号里包含了对象的属性和方法

var obj = {}  //空对象

var ob = {
    name：‘张三’，
    age：20，
    sex：'男'
    say：function(){
       console.log('hello')
    }
    
}
//使用对象  访问对象的属性 对象名.属性名  对象名['属性名']
ob.name

//调用对象的方法  对象名.方法名()
ob.say()

2.利用new Object创建对象

var obj = new Object()
 o.name = "zs"
 o.age =20
 o.say = function(){
    alert('123')
 }

alert(o.name)
alert(o.age)
o.say()

3.利用构造函数创建对象

构造函数是一种特殊的函数，只要是用来初始化对象，即为对象的成员变量赋初始值，它总与new关键字一起使用，可以把对象中的一些公共的属性和方法抽取出来，然后封装到函数里。

//构造函数的语法格式

function 函数名(){
    this.属性名=值,
    this.方法名 = function(){}
}

new  构造函数名()


function Person(name,age,sex) {
    this.sex = sex,
    this.name = name,
    this.age = age
    this.say = function () {
        alert('345')
    }
}

var person =   new Person('zsan',25,'nan');
alert(person.age)
person.say()


//遍历对象
for(key in person){
    alert(key)
    alert(person[key])
}

15.JavaScript 常用内置对象

15.1 String（字符串）对象

length 属性返回字符串的长度

var txt = "ABCDEF";
var sln = txt.length;
indexOf() 方法返回字符串中指定文本首次出现的索引（位置）：0 是字符串中的第一个位置，1 是第二个，2 是第三个 ...

var str = "The full name of China is the People's Republic of China";
var pos = str.indexOf("China");
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引

var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");
如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1

var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("USA");
两种方法都接受作为检索起始位置的第二个参数

var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China", 18);
var pos = str.lastIndexOf("China", 50);
search() 方法搜索特定值的字符串，并返回匹配的位置：

var str = "The full name of China is the People's Republic of China.";
var pos = str.search("locate");
提取部分字符串

有三种提取部分字符串的方法：

slice(start, end)

substring(start, end)

substr(start, length)

slice() 方法

slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。

该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）。

这个例子裁剪字符串中位置 7 到位置 13 的片段：

var str = "Apple, Banana, Mango";
var res = str.slice(7,13); //Banana
如果某个参数为负，则从字符串的结尾开始计数。这个例子裁剪字符串中位置 -12 到位置 -6 的片段：

var str = "Apple, Banana, Mango";
var res = str.slice(-13,-7); //Banana
如果省略第二个参数，则该方法将裁剪字符串的剩余部分：

var res = str.slice(7);
或者从结尾计数：

var res = str.slice(-13);
substring() 类似于 slice()

不同之处在于 substring() 无法接受负的索引。

var str = "Apple, Banana, Mango";
var res = str.substring(7,13);
res 的结果是：

Banana
如果省略第二个参数，则该 substring() 将裁剪字符串的剩余部分。

substr() 类似于 slice()

不同之处在于第二个参数规定被提取部分的长度。

var str = "Apple, Banana, Mango";
var res = str.substr(7,6);
res 的结果是：

Banana
如果省略第二个参数，则该 substr() 将裁剪字符串的剩余部分

var str = "Apple, Banana, Mango";
var res = str.substr(7);
res 的结果是：

Banana, Mango
如果首个参数为负，则从字符串的结尾计算位置。

var str = "Apple, Banana, Mango";
var res = str.substr(-5);
res 的结果是：

Mango
第二个参数不能为负，因为它定义的是长度

replace() 方法用另一个值替换在字符串中指定的值,默认地，replace() 只替换首个匹配

str = "Please visit Microsoft and Microsoft!";
var n = str.replace("Microsoft", "W3School");
replace() 对大小写敏感。因此不对匹配 MICROSOFT

str = "Please visit Microsoft!";
var n = str.replace("MICROSOFT", "W3School");
如需执行大小写不敏感的替换，请使用正则表达式 /i（大小写不敏感）

str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3School");
如需替换所有匹配，请使用正则表达式的 g 标志（用于全局搜索）

str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/Microsoft/g, "W3School");
toUpperCase() 把字符串转换为大写,toLowerCase() 把字符串转换为小写

var text1 = "Hello World!";
var text2 = text1.toLowerCase();
    text2 = text1.toUpperCase();
concat() 连接两个或多个字符串

var text1 = "Hello";
var text2 = "World";
text3 = text1.concat(" ",text2);
concat() 方法可用于代替加运算符,下面两行是等效的

var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");
trim() 方法删除字符串两端的空白符

var str = "       Hello World!        ";
alert(str.trim());
提取字符串字符的方法

charAt() 方法返回字符串中指定下标（位置）的字符串

var str = "HELLO WORLD";
str.charAt(0);   // 返回 H

/*charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码*/

var str = "HELLO WORLD";
str.charCodeAt(0); 


可以通过 split() 将字符串转换为数组

var txt = "a,b,c,d,e";   // 字符串
txt.split(",");          // 用逗号分隔
txt.split(" ");          // 用空格分隔
txt.split("|");          // 用竖线分隔

15.2数字对象 Math

Math.PI; //3.1415

Math.round()

Math.round(x) 的返回值是 x 四舍五入为最接近的整数：

Math.round(6.8);    // 返回 7
Math.round(2.3);    // 返回 2

Math.pow(x, y) 的返回值是 x 的 y 次幂：

Math.pow(8, 2); // 返回 64

Math.sqrt(x) 返回 x 的平方根：

Math.sqrt(64);      // 返回 8

Math.abs(x) 返回 x 的绝对（正）值：

Math.abs(-4.7);     // 返回 4.7

Math.ceil(x) 的返回值是 x 上舍入最接近的整数：

Math.ceil(6.4);     // 返回 7

Math.floor(x) 的返回值是 x 下舍入最接近的整数：

Math.floor(2.7);    // 返回 2

Math.min() 和 Math.max() 可用于查找参数列表中的最低或最高值：

Math.min(0, 450, 35, 10, -8, -300, -78);  // 返回 -300
Math.max(0, 450, 35, 10, -8, -300, -78);  // 返回 450

Math.random() 返回介于 0（包括）与 1（不包括）之间的随机数：

Math.random();     // 返回随机数
Math.random() 与 Math.floor() 一起使用用于返回随机整数。

Math.floor(Math.random() * 10);		// 返回 0 至 9 之间的数

Math.floor(Math.random() * 11);		// 返回 0 至 10 之间的数

Math.floor(Math.random() * 10) + 1;	// 返回 1 至 10 之间的数

//JavaScript 函数始终返回介于 min（包括）和 max（不包括）之间的随机数：
Math.random() * (max - min) ) + min

//JavaScript 函数始终返回介于 min 和 max（都包括）之间的随机数
Math.random() * (max - min + 1) ) + min

15.3日期对象

日期对象的创建方式

new Date()

new Date(year, month, day, hours, minutes, seconds, milliseconds)

new Date(milliseconds) 1970年1月1日 格林威治时间

new Date(date string)

new Date() 用当前日期和时间创建新的日期对象：

var d = new Date();
new Date(year, month, ...)

new Date(year, month, ...) 用指定日期和时间创建新的日期对象。7个数字分别指定年、月、日、小时、分钟、秒和毫秒（按此顺序）：

var d = new Date(2018, 11, 24, 10, 33, 30, 0);
JavaScript 从 0 到 11 计算月份。一月是 0，十二月是11，6个数字指定年、月、日、小时、分钟、秒：

var d = new Date(2018, 11, 24, 10, 33, 30);
2个数字指定年份和月份：

var d = new Date(2018, 11);
您不能省略月份。如果只提供一个参数，则将其视为毫秒

var d = new Date(2018)

日期获取方法

获取方法用于获取日期的某个部分（来自日期对象的信息）。下面是最常用的方法（以字母顺序排序）：

方法	描述
getDate()	以数值返回天（1-31）
getDay()	以数值获取周名（0-6）
getFullYear()	获取四位的年（yyyy）
getHours()	获取小时（0-23）
getMilliseconds()	获取毫秒（0-999）
getMinutes()	获取分（0-59）
getMonth()	获取月（0-11）
getSeconds()	获取秒（0-59）
getTime()	获取时间（从 1970 年 1 月 1 日至今）

设置方法用于设置日期的某个部分。下面是最常用的方法（按照字母顺序排序）：

方法	描述
setDate()	以数值（1-31）设置日
setFullYear()	设置年（可选月和日）
setHours()	设置小时（0-23）
setMilliseconds()	设置毫秒（0-999）
setMinutes()	设置分（0-59）
setMonth()	设置月（0-11）
setSeconds()	设置秒（0-59）
setTime()	设置时间（从 1970 年 1 月 1 日至今的毫秒数）

JS获取当前毫秒数(时间戳)汇总

new Date().getTime()

new Date().valueOf()

+new Date()

案例：

实现小米抢购倒计时

var second = parseInt(SysSecond % 60);            // 计算秒     
var minite =parseInt((SysSecond / 60) % 60);      //计算分 
var hour =parseInt((SysSecond / 3600) % 24);      //计算小时
var day = parseInt((SysSecond / 3600) / 24);       //计算天

16.JavaScript DOM

HTML DOM 树

DOM 节点 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

1.整个文档是一个文档节点 2.每个 HTML 元素是元素节点 3.HTML 元素内的文本是文本节点 4.每个 HTML 属性是属性节点 5.注释是注释节点

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

访问 HTML 元素（节点）

您能够以不同的方式来访问 HTML 元素：

通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法
通过使用H5新增 getElementsByClassName() 方法
通过使用H5新增的方法document.querySelectorAll()
通过使用H5新增的方法document.querySelector()

特殊节点的获取

获取body元素

document.body

获取html元素

document.documentElement

改变/获取节点的内容

innerText 不能识别html标签
innerHTML 能识别html标签
value 表单

改变/获取节点的属性值

href
src
title
alt

表单元素的属性操作

type
value
checked
selected
disabled（表单被禁用 true）

修改节点样式属性

element.style 行内样式
element.className 类名样式
ie10 及以上 document.getElementsByClassName('t1').classList.add('t2')
全兼容 document.getElementsByClassName('t1')[0].className='t2'
ie8 及以上 document.getElementsByClassName('t1')[0].setAttribute('class','t2')

通过节点关系获取节点对象

父（parent）
子（child）
同胞（sibling）

父节点拥有子节点，同级的子节点被称为同胞

创建和删除节点

1.创建节点

2.添加节点

3.删除节点

元素注册事件

事件的执行步骤：

获取事件源
注册事件
编写事件处理逻辑

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onkeyup	用户弹起键盘按键
onload	浏览器已完成页面的加载

注册事件的两种方式：

1.element.onclick = function(){}

2.element.addEventListener('click',function(){})

移除事件

1.element.onclick = null

2.select1.removeEventListener('click',fn)

事件的传播方式：

1.捕获阶段 document -> html - >body ->目标节点

2.目标阶段

3.冒泡阶段目标节点 ->body->html->document

事件对象

事件对象的属性和方法	说明
`e.target`	返回触发的事件的对象
`e.srcElement`	返回触发的事件的对象
`e.type`	返回事件类型(比如：`click`、`mouseover`不带`on`)
`e.cancelBubble`	该属性阻止冒泡
`e.returnValue`	该属性阻止默认事件(默认行为
`e.preventDefault()`	该方法阻止默认事件(默认行为)
`e.stopPropagation`	阻止冒泡

案例：

1.轮播图的小圆点鼠标滑过以及点击事件效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            
            ul{
                width: 200px;
                list-style-type: none;
                margin: 100px auto;
            }
            
            ul>li{
                width: 20px;
                height: 20px;
                border-radius: 10px;
                border: 1px solid red;
                float: left;
                margin-left: 10px;
            }
            ul>li:hover{
                background-color: #FF6700;
            }
            .active{
                background-color: #5F9EA0;
            }
        </style>
        
        <script type="text/javascript">
            window.onload = function(){
            var lis = document.querySelector("ul").children
                for (var i = 0; i < lis.length; i++) {
                    lis[i].onclick = function(){
                        //排它思想
                        for (var j = 0; j < lis.length; j++) {
                            lis[j].removeAttribute('class')
                        }
                        this.classList.add('active')
                    }
                }
            }
        </script>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>

2.表单的全选和取消全选

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="checkbox" name="" id="ck_header" />
        <hr>
        <input type="checkbox" class="ck_child"  /><br>
        <input type="checkbox"class="ck_child" /><br>
        <input type="checkbox" class="ck_child"  />
        
        <script type="text/javascript">
            var ck_header = document.querySelector('#ck_header')
            var cks = document.getElementsByClassName('ck_child')
            ck_header.onclick = function(){
                
                if(this.checked){
                    for (var i = 0; i < cks.length; i++) {
                        cks[i].checked = 'checked'
                    }
                }else{
                    for (var i = 0; i < cks.length; i++) {
                        cks[i].checked = ''
                    }
                }
            }
            
            //通过子节点实现全选和取消全选 绑定单击事件
            for (var i = 0; i < cks.length; i++) {
                
                cks[i].onclick = function(){
                    var flag = true;
                    for (var j = 0; j < cks.length; j++) {
                        if(!cks[j].checked){
                            flag = false;
                            break;
                        }
                    }
                    console.log("flag:"+flag);
                    if(flag){
                        ck_header.checked = 'checked'
                    }else{
                        ck_header.checked = ''
                    }
                }
            }
        </script>
    </body>
</html>

17.JavaScript BOM

BOM：Browser Object Model 是浏览器对象模型，浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。

BOM对象

1.核心对象window，是浏览器对象模型的顶级对象，同时也是一个全局对象，在全局作用域下定义的变量和函数都会变为window对象的属性和方法

window常见的事件

1.窗口加载事件 onload 页面加载完毕触发事件

window.onload = function(){
    let btn = document.querySelector("button")
    btn.addEventListener('click',function(){
        console.log('btn');
    })
}
            
window.onload = function(){
    console.log(123);
}
window.addEventListener('load',function(){
    console.log(123);
})

2.窗口尺寸事件

window.onresize = function(){
    console.log("窗口尺寸改变了");
}

window.addEventListener('resize',function(){
     console.log("窗口尺寸改变了");                
})

3.定时器

3.1一次性定时器

window.setTimeout(function(){
    console.log("一次性定时器");
},1000) // 时间单位ms
//清除定时器
window.clearTimeout(index)

3.2.循环定时器

let index = window.setInterval(function(){
    console.log("循环性定时器");
},1000)

window.clearInterval(index)//定时器的标识符

JavaScript执行机制

javascript是一门单线程语言，在最新的HTML5中提出了Web-Worker，但javascript是单线程这一核心仍未改变。所以一切javascript版的"多线程"都是用单线程模拟出来的

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着，因此执行的效率比较低。

于是，将所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行

实例演示

同步

console.log(1);
console.log(2);
console.log(3);
/*
    执行结果：1、2、3
    同步任务，按照顺序一步一步执行
*/
同步和异步

console.log(1);
setTimeout(function() {
    console.log(2);
},1000)
console.log(3);
/*
    执行结果：1、3、2
    同步任务，按照顺序一步一步执行
    异步任务，放入消息队列中，等待同步任务执行结束，读取消息队列执行
*/
异步进一步分析

console.log(1);
setTimeout(function() {
    console.log(2);
},1000)
setTimeout(function() {
    console.log(3);
},0)
console.log(4);
/*
    猜测是：1、4、2、3   但实际上是：1、4、3、2
    分析：
        同步任务，按照顺序一步一步执行
        异步任务，当读取到异步任务的时候，将异步任务放置到Event table（事件表格）
中，当满足某种条件或者说指定事情完成了（这里的是时间分别是达到了0ms和1000ms）当指定
事件完成了才从Event table中注册到Event Queue（事件队列），当同步事件完成了，便从
Event Queue中读取事件执行。（因为3的事情先完成了，所以先从Event table中注册到
Event Queue中，所以先执行的是3而不是在前面的2）
*/

4.location对象

location是window对象中的一个属性，而该属性的值是一个对象，因此一般把location称之为location对象

重点属性：

4.1.href ：获取页面的url地址

window.onload = function(){
    let btn = document.querySelector("button")
    btn.addEventListener('click',function(){
        console.log(location.href);
        setInterval(function(){
            location.href = "http://www.baidu.com"
        },3000)
    })

4.2.search：获取请求的参数

//location.href = "http://www.baidu.com?name=lisi&age=12"
console.log(location.search);

4.3.对象中常见的方法

assign（）实现页面的跳转，跟href一样记录历史，因此能后退页面
replace（）替换当前页面，不记录历史，因此不能后退页面
reload（）重新加载页面，实现页面的刷新，相当于F5

5.navigator对象

console.log(window.navigator.userAgent);

6.history对象

6.1back（）

6.2 forward（）

6.3 go（）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>详情页</title>
    </head>
    <body>
        <a href="index.html">跳转主页面</a>
        <button type="button">后退</button>
        <script type="text/javascript">
            document.querySelector("button").addEventListener("click",function(){
                // history.back();
                history.go(-1)
            })
        </script>
    </body>
</html>

7.screen对象

Screen 对象包含有关客户端显示屏幕的信息。

8.元素偏移量offset

offset系列只能读，不能改变值，而且返回的值是数字，不带单位。

offsetTop 返回元素距离带有定位的父级顶部的距离，不带单位
offsetLeft 返回元素距离带有定位的父级左侧的距离，不带单位
offsetWidth 返回元素自身的宽度，包括padding、border、width，不带单位
offsetHeight 返回元素自身的高度，包括padding、border、width，不带单位
offsetParent 返回带有定位的父亲，没有则返回body

案例：

1.获取鼠标在矩形区域中的坐标（e.pageX ，e.pageY）

9.元素的可视区client

clientWidth：元素内容区宽度加上左右内边距宽度。
clientHeight：元素内容区高度加上上下内边距高度。
clientLeft 元素左边框的大小
clientTop 元素上边框的大小

10.元素的滚动scroll

指的是包含滚动内容的元素的大小。

scrollHeight：在没有滚动条的情况下，元素内容的总高度。
scrollWidth：在没有滚动条的情况下，元素内容的总宽度。
scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

案例：

1.页面回到顶部的显示和隐藏

11.动画函数

1.动画原理

获取目标节点对象
获取节点对象的位置
通过定时器设置对象的位置（移动的元素需要添加定位）
结束定时器

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;
            padding: 0;}
            #corcle{
                width: 50px;
                height: 50px;
                border: 1px solid red;
                background-color: #ff6700;
                border-radius: 50%;
                text-align: center;
                line-height: 50px;
                position: relative;
            }
        </style>
    </head>
    <body>
        
        <div id="corcle">圆</div>    
        <script type="text/javascript">
            var left;
            var timeId = setInterval(function(){
                if(left>200){
                    clearInterval(timeId)
                }
                left =   document.querySelector("#corcle").offsetLeft
                document.querySelector("#corcle").style.left = (left+2)+"px";
            },50)
        </script>
    </body>
</html>

函数封装

function move(object,target){
    var timeId = setInterval(function(){
        var left =object.offsetLeft
        if(left>target){
            clearInterval(timeId)
        }
        object.style.left = (left+1)+"px";
    },50)
    }

缓动动画

step = （目标位置-现在位置）/10

function move(object, target) {
    var timeId = setInterval(function() {
        var left = object.offsetLeft
        var step = (target - left) / 10
        if (left > target) {
            clearInterval(timeId)
        }
        object.style.left = (left + step) + "px";
    }, 30)
    }

12.本地存储

localStorage

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

sessionStorage

sessionStorage存储的数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

总结

学会JS这一篇就够啦！！！

整理不易，记得加个关注，点个赞呀，有什么看不明白的地方，私聊或者评论区都可以呀，最后，祝屏幕前的你，生活愉快，完事胜意！！！

学会JavaScrip有这一篇就够啦（内附习题源码）

JavaScript教程

1.javascript简介

2.JavaScript的组成部分

3.JavaScript的特点

4.JavaScript的使用方式

5.JavaScript中的输入和输出方式

5.1输入方式

5.2输出方式

6.JavaScript注释

7.JavaScript变量

8.JavaScript数据类型

9.JavaScript 运算符

9.1JavaScript 算数运算符

9.2JavaScript 赋值运算符

9.3JavaScript 比较运算符

9.4JavaScript 逻辑运算符

9.5JavaScript 类型运算符

10.JavaScript 流程控制

10.1顺序结构

10.2分支结构

10.3循环结构

1、数组的创建

2.数组的元素的访问

3.数组的遍历

4.数组元素的添加、删除、截取、合并、拷贝

5.数组的排序和翻转

6.获取数组的长度

12.JavaScript 函数

13.JavaScript 作用域

14.JavaScript自定义对象

15.JavaScript 常用内置对象

15.1 String（字符串）对象

15.2数字对象 Math

15.3日期对象

16.JavaScript DOM

访问 HTML 元素（节点）

改变/获取节点的内容

改变/获取节点的属性值

表单元素的属性操作

修改节点样式属性

通过节点关系获取节点对象

创建和删除节点

元素注册事件

17.JavaScript BOM

BOM对象

总结

学会JS这一篇就够啦！！！

猜你喜欢