JavaScript

最新推荐文章于 2023-01-25 12:12:59 发布

Petrel_

最新推荐文章于 2023-01-25 12:12:59 发布

阅读量828

点赞数

分类专栏：笔记 JavaScript

本文链接：https://blog.csdn.net/Petrel_/article/details/107548751

版权

笔记同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

JavaScript

1 篇文章 0 订阅

订阅专栏

JavaScript简介

概述：JavaScript在前端中简称【JS】，JavaScript是开发web脚本语言。但是它也被用到了很多非浏览器环境中【比如：node平台】，JavaScript在1995年由Netscape公司的Brendan Eich（创始人大概用了十天的时间将这门语言创建出来），JS可以嵌套在静态页面中可以给静态页面添加一些动态效果（脚本语言）；
不同浏览器厂商（在浏览器中都有内置解析器解析JS语法）；
各大浏览器厂商：chorme、IE、火狐、sofai、欧朋（都有属于自己的解析器）
谷歌浏览器：V8解析器（可以解析JS语法：让谷歌浏览器知道你在写什么）
脚本语言：【PHP、JavaScript】有一个很大特征：可以嵌套静态页面中添加一些动态效果。

前端分为三层

结构层前面课程当中学习标签（html）
样式层前面课程我们学习样式（css）
行为层即将学习javaScript （js）

JavaScript组成

在这里插入图片描述
ECMAScrip：欧洲计算机协会大概每年6月中旬定制语法规范；
比如：变量为什么用var、函数关键字为什么function、循环语句为什么是for
注意：咱们这段事件学习的是2014年规范简称ES5
DOM【document object model】文档对象模型（经常用来操作标签：在JS当中）
BOM【browser object model】:浏览器对象模型（模拟浏览器）
在这里插入图片描述

JavaScript书写格式

概述：JavaScript属于脚本语言，JS语法务必、必须、一定嵌套在静态页面中，JS当中才可以运行；
我们可以利用双闭合标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
</body>

</html>
<script>
    //这里面是要书写JS语法的地方
    alert("Hello word");
</script>

JS语法必须放置在双闭合标签script里面
双闭合标签script可以放置静态页面中任意地方（一般放置静态页面底部）
程序当中当然可以有多个script标签

内置功能函数使用

内置：浏览器厂商天生本身天生就有的，我们程序员可以直接使用

警告框-alert

概述：警告框功能是在浏览器正上方（中间）弹出一个警告框。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //单行注释
    /*
       多行注释：可以写多行注释给同事们看
       工作当中尽量养成这个习惯
    */
    //JS字符串：人说的话，务必加上双引号、单引号
    alert("未来");
    alert("我们希望我们将来很好");
    alert('希望听贾老师的课程你们有收获');
</script>

警告框功能可以多次使用
JS当中字符串，外层需要加上双引号、单引号（别一双一单）
每行代码最后面加上一个分号：代表的是这行语句结束

提示框-prompt

概述：在JS当中内置函数prompt，可以在浏览器正上方弹出一个提示框；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //提示框
    prompt("hello", hi);
</script>

控制台使用

概述：console.log（打印的数据）
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //控制台打印数据
    console.log("我在控制台中打印数据，你看不见我");
    console.log(12306);
</script>

数据类型

概述：在JS当中也有数据类型也分：基本数据类型（5）、引用类型【复杂数据类型】（1）
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //字符串（String）:必加上双引号、单引号
    console.log("哈哈哈哈哈");
    //数字类型(Number)
    console.log(100);
    console.log(-4.14);
    console.log(123456789);
    //布尔类型数值：true、false
    console.log(true);
    console.log(false);
    //未定类型数据
    console.log(undefined);
    //空对象类型
	console.log(null);
    //JS当中有一个关键字typeof可以检测数据类型
    console.log(typeof 123);
    console.log(typeof true);
    console.log(typeof undefined);
</script>

在JS当中有五个基本数据类型是：字符串、数字、布尔值、未定义、空对象
typeof是JS当中一个关键字可以检查数据类型

变量

概述：变量（variable）来源于数学,变量相当于是一个容器，变量可以存储数据、存储计算完结果；
通过访问变量名字获取到存储数据。

JavaScript当中变量使用：
第一步：用关键字var 声明变量 var 变量名字
第二步：给变量进行赋值变量名字 = 123；
第三步：使用变量 console.log(变量名字)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //第一步：用关键字var进行声明变量
    var num;
    //第二步：可以给变量进行赋值 （将右侧数据||计算完结果）赋值给左侧变量
    num = 123;
    //第三步：使用
    //通过访问变量名字、获取到对应存储数据
    console.log(num);
</script>

JS当中变量只是用关键字var声明但为赋值，默认初始undefined
JS当中变量可以声明一次、但是可以多次赋值
多次赋值以后在使用：使用的是最后一次赋值数据

  var abc;
    //给变量进行赋值（多次赋值）
    abc = 123;
    abc = "我爱你";
    abc = "我喜欢貂蝉、吕布、鲁班";
    console.log(abc);

常用声明变量方式：就是将第一步和第二步结合在一起

<script>
    var a = 100;
    var b = 200;
    var c = 300;
    console.log(a, b, c);
</script>

0.1 + 0.2 ==0.3 错误的由于遵守iEEE754浮点数标准（后面保留17位小数）

运算符

在JS当中拥有数学运算符、比较运算符、逻辑运算符、赋值运算符等等。运算符又称之为操作符。
数学运算符（五个）、比较运算符（八个）、逻辑运算符(三个)

数学运算符（5）

概述：数学运算符即为：加、减、乘、除、取余数。在JS当中任意类型数据都可以参与数学运算符。
除了数字以为其他类型数据需要隐式转换为数字参与数学运算符。

数字参与
运算符口诀和小学学习一模一样

<script>
    //数学运算符------数字参与
    //如果是数字和数字进行数学运算符：
    //先算乘除、后算加减、如果有小括号先算小括号里面的
    console.log(66 + 22);
    console.log(66 - 33);
    console.log(22 * 22);
    console.log(6 / 3);
    console.log(99 % 3); // 0
</script>

布尔参与
在JS当中布尔值类型数据也可以参与数学运算符，布尔值参与数学运算符，计算机底层自动隐式转换为数字参与。（底层完成隐式转换为其实是通过系统内置函数Number完成）
布尔类型数据参与数学运算符：隐式转换为数字 true=>1 false=>0

    console.log(Number(true));//1
    console.log(Number(false));//0
    console.log(true + 99);//100
    console.log(false * 100);//0

未定义类型参数
未定义类型是数值也可以参与数学运算符，需要隐式转换为数字NaN【not a number】
NaN:是JS语言当中一个数字类型特殊值，一般进行数学运算符的时候，计算不出结果，返回数字NaN

    //在JS当中未定义类型数据undefined也可以参数学运算符：
    //但是要隐式转换为数字参与
    //undefined未定义类型数据参与数学运算符的时候会隐式转换为数字NaN
    /************************************************************/
    //NaN起始也是数字类型数值：值不够这个数值比较特殊，一般在计算数学运算符的时候算不出结果的时候
    //返回数字NaN
    console.log(0 / 0);
    console.log(typeof NaN);
    console.log(NaN + 33);
    console.log(NaN * 33);
    console.log(NaN + NaN);
    console.log(undefined + 33);
    console.log(undefined / 33);

总结：未定义类型数据也可以参数数学运算符，但是需要隐式转换为数字NaN参与
NaN是数字类型一个特殊值：这个数字进行数学运算的时候都是计算不出结果（NaN）

空对象类参与
空对象类型数据null，也可以参与数学运算符，但是需要隐式转换为数字参与数学运算符；

    //Null类型数值参与数学运算符
    console.log(Number(null));
    console.log(null * 99);
    console.log(0 + NaN);
    console.log(null + NaN);

总结
任意类型数据都可以参与数学运算符：如果不是数字类型的，隐式转换（浏览器自动）为数字参与；
字符串参与
字符串也可以参与数学运算符，但是它有一些特殊：
特殊：字符串参与数学运算符的时候，加号比较特殊；

	console.log("12" + 44);
	//console.log(3 + 2 + "44"); //这个运算结果是544
    console.log("张三喜欢李四" + 666);
    console.log("12" - 44);
    console.log("12" * 44);
    console.log("12" / 44);
	console.log("12" % 44);

在这里插入图片描述
注意：
字符串也可以参数数学运算符：但加号比较特殊，
如果加号遇见字符串称之为连字符：将数据从左到右拼接为字符串
如果减、乘、除、取余数字符串参与：都隐式转换为数字参与。

<script>
    //字符串参与
    console.log("张三" + 66);
    console.log("张三" + "李四");
    //如果是字符串参与数学运算符：减、乘、除、取余数
    console.log("小明" / 66);
    console.log("小红红" * "小兰兰");
</script>

比较运算符（8）

任意类型数据都可以参与比较运算符，比较最终结果：要么为布尔值true、要么为布尔值false
除了数字以外其他类型数据也可以参与比较运算符：但是需要隐式转换为数字参与（字符串特殊）
在这里插入图片描述

数字比较

//数字参与比较运算符
    console.log(3 > 6); //false
    console.log(3 >= 6); //false
    console.log(3 < 6); //true
    console.log(3 <= 6); //true 
    console.log(3 == 3); //true
    console.log(3 != 3); //false
    console.log(3 === "3"); //false
    console.log(3 !== 3); //false

一个等号：赋值运算符不是进行比较运算符（常用于给变量赋值）
两个等号：相等比较运算符 (只看数值是否一样)
三个等号：全等比较（即看数值又看类型比较）

其他类型数据比较（字符串除外）
其他类型数据也可以参与比较（数字、字符串除去），其他类型数据也可以参与比较运算符，
但是需要隐式转换为数字参与。

console.log(100 > true);
    console.log(true === 1);
    console.log(true == 1);
    console.log(true < false);
    console.log(NaN > 100);
    console.log(undefined > 100);
    console.log(6666 > null);

在这里插入图片描述

字符串比较
概述：字符串参与比较时候分为两种情况：
第一种：字符串和数字
第二种：字符串和字符串比较
字符串和数字比较
如果是字符窜和数字比较：字符串隐式转换为数字参与比较；

<script>
    //字符串和数字比较
    console.log("66" > 99); //false
    console.log("33" > 12); //true
    console.log("33" == 33); //true 
    console.log("33" === 33); //false
</script>

字符串和字符串进行比较
概述：如果是字符串和字符串进行表：通过的是ASCII码数值进行比较：
两个字符串都是从左到右有一个一个字符进行比较：直到某一个字符比较出结果，比较结束了；
0-9<A-Z<a-z:从左到右依次变大

  //字符串和字符串比较
    console.log("a2" > "A2"); //true
    console.log("b2a" > "ABC"); //true
    console.log("李四" == "李四");//true

逻辑运算符(3)

在JavaScript脚本语言当中也有所谓逻辑运算符【与、或、非】，任意类型数据都可以参与逻辑运算符，但是需要注意（除了布尔值以外数据）需要隐式转换为布尔值参与逻辑运算符（通过内置函数Boolean将其他类型数据转换为布尔值）

逻辑与
概述：在JS当中使用两个&&代表逻辑与。两者（A、B）同时为真，返回结果才为真，否则结果为假的。

	console.log(true && false); //false
    console.log(false && true); //false
    console.log(false && false); //false
    console.log(true && true); //true

在这里插入图片描述
记忆口诀：如果A为真，结果看B；如果A为假，结果看A。

逻辑或
在JS当中使用两个||代表逻辑或。两者有一个为真即为真，否则为假的

 	console.log(true || false); //true
    console.log(true || true); //true
    console.log(false || true); //true
    console.log(false || false); //false

在这里插入图片描述
口诀：如果A为真，结果看A；如果A为假，结果看B

逻辑非
JS当中逻辑非！作用是置反；
JS当中的逻辑非可以同时使用多个

 	console.log(!true); //false
    console.log(!false); //true
    console.log(!!!true); //false

其他类型数据参与逻辑运算

<script>
    //逻辑与
    console.log(1 && 0);
    console.log(66666 && 999999);
    console.log(NaN && 34);
    console.log("张三" && "李四");

    console.log("小明" || "小花花");
    console.log(NaN || 123);
</script>

IF条件语句

在JavaScript脚本语言当中：也有条件语句、也有循环语句；

条件语句基本使用

<script>
    //条件语句基本使用
    if (true) alert("大江东去浪淘尽");
    if (false) alert(123);
    //其他类型数据也可以作为条件语句条件：但是都隐式转换为布尔值
    if (6666) alert(123);
    if (NaN) console.log("我能执行吗");
</script>

条件语句条件：一般需要的是布尔值，但是其他类型数值也可以参与（隐式转换为布尔值）
如果条件语句只有一行代码可以省略大花括号

if结合else关键字一起使用

<script>
    //关键字else【否则】，可以结合if条件语句一起使用
    //else关键字是对于上面条件进行否定
    //小案例:让用户输入一个分数对应弹出这个学生是否及格
    var score = prompt("请你输入你的分数");
    if (score >= 60) {
        //条件：分数大于等于60
        alert("及格");
    } else {
        //暗含条件：对于上面条件进行否定（分数是小于60分）
        alert("来年继续考试");
    }
</script>

多分支条件语句

script>
    //用户输入分数
    var score = prompt("请你输入一个分数");
    if (score < 60) {
        //条件：分数小于60
        alert("来年补考");
    } else if (score < 70) {
        //出现else:暗含条件分数一定是大于等于60
        //完整条件大于等于60 且小于70
        alert("及格");
    } else if (score < 80) {
        //暗含条件：分数大于等于70
        //完整条件：大于等于70 且小于80
        alert("良好");
    } else {
        //暗含条件：分数大于等于80
        alert("优秀");
    }
</script>

嵌套使用

<script>
    var nl = 88;
    var sex = "男";
    if (sex == "女") {

    } else {
        if (nl > 60) {
            alert(123);//弹出结果
        } else {
            alert(456);
        }
    }
</script>

循环语句

概述：JavaScript脚本语言当中也有循环【loop】语句，可以做一些重复事情；
for、while、do.while

<script>
    //for循环
    for (var i = 0; i < 10; i++) {
        console.log(i);
        document.write("<h1>hello</h1>");
    }
    console.log(i);
</script>
//在JS当中循环语句第一步（var i），认为全局变量，可以在循环体外面使用；

累加

<script>
    //计算数字1~100之间的数字累加和
    //声明变量：保存每一次循环计算结果
    var sum = 0;
    for (var i = 1; i <= 100; i++) {
        sum += i;
    }
    console.log(sum);
</script>

水仙花数字

for (var i = 100; i < 1000; i++) {
        //分别获取当前这次循环数字个、十、百
        var ge = i % 10,
            shi = parseInt(i / 10) % 10;
        bai = parseInt(i / 100);
        //计算数字累加和
        var result = Math.pow(ge, 3) + Math.pow(shi, 3) + Math.pow(bai, 3);
        if (i == result) {
            console.log(i + "水仙花数字")
        }
    }

while练习

<script>
    //计算数字1-10累加和
    var i = 11;
    var sum = 0;
    while (i--) {
        sum += i;
    }
    console.log(sum);
</script>

do…while

<script>
    var i = 10;
    var sum = 0;
    do {
        sum += i;
        console.log(i);
    } while (i--);
    console.log(sum);
</script>

总结：JS当中循环语句和Java循环语句很类似，但是JS循环语句变量可以在循环体外边使用；

break和continue关键字
概述：break可以终止就近循环语句（立刻终止）Continue可以终止当前这一次循环，去执行下一次循环。

<script>
    waiceng: for (var i = 1; i < 10; i++) {
        if (i % 3 == 0) break waiceng;
        console.log(i)
    }
</script>

小总结：
逻辑运算符：与、或、非
条件语句：JS当中也有IF、switch条件语句
循环语句：for、while、do…while
需要注意：JS当中的循环语句中声明变量可以在循环语句外面使用；

函数

概述：在JavaScript脚本语言中也有函数概念，函数其实就是将某一个功能进行封装，当你事项用这个功能的时候，需要调用、执行这个函数
比如：
内置函数alert：这个功能是在浏览器正上方弹出一个警告框
内置函数prompt：这个功能是在浏览器正上方弹出一个提示框

在javaScript脚本语言当中：函数使用也是分为两部分：声明+调用
注意：函数在JS当中声明方式有两种：关键字function声明函数、表达式声明函数

关键字函数基本使用

JS当中如果想声明关键字形式函数，需要用到关键字function进行声明

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //关键字形式函数分为两部分声明+调用
    //声明部分(函数名字务必符合命名标识符规范)
    function fun() {
        //这里面是书写代码地方(函数体)
        console.log("鹅鹅鹅,去向向天歌");
        console.log("白毛浮绿水,红掌拨清波");
    }
    //函数调用部分
    fun();
    fun();
    fun();
</script>

形参和实参

<script>
    //形参【形式参数】和实参【实际参数】
    //计算两个数字之和
    //a、b所谓形参
    function sum(a, b) {
        console.log(a + b);
    }
    //100、200实参
    sum(100, 200);
    sum("张三", "李四");
</script>

当调用函数的时候：实参会一一对应进行赋值；
注意：在JS当中数学运算符中：加号比较特殊，如果加号遇见字符串【称之为连字符】不进行数学加法，
将数据从左到右进行字符串拼接；

全局变量和局部变量

局部变量：
作为函数形参【只能在函数体中使用】、在函数体中声明变量【局部变量：只能在函数体中使用】
全局变量：
只要不是局部变量即为全局变量【全局变量可以在JS行为层中任意地方使用】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //局部变量：函数形参、在函数体中声明变量（只能在函数体中使用）
    //声明部分
    function fun(a, b) {
        //形参a、形参b称之为局部变量
        console.log(a);
        console.log(b);
        //在函数体中声明变量（局部变量）
        var c = "么么哒";
    }
    //调用
    fun(true, "哈哈哈哈哈");
    console.log(c);
</script>

全局变量和局部变量区分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //当前变量i全局变量（可以在JS行为层中任意地方使用）
    for (var i = 0; i < 10; i++) {
        console.log(i);
    }
    console.log("循环语句结束" + i);

    //当前变量str：既不是形参、也不是函数体中声明变量[全局变量]
    if (true) {
        var str = "我是全局";
    }
    console.log(str);
</script>

作用域

作用域【scope】代码书写范围;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //作用域书写代码范围
    //称之为全局作用域
    console.log(123);
    //函数也有作用域概念
    function fun(a, b) {
        console.log(a);
        console.log(b);
    }
    fun(5, 6);
</script>

全局作用域：可以理解为两个双闭合标签script之间
函数作用域：函数体

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //全局变量
    var b = 100;
    //声明一个函数
    function fun() {
        //局部变量
        var b = 200;
        console.log(b);
    }
    fun();
</script>

JS当中没有函数重载概念

在JS当中如果有多个重名的函数，永远是后者覆盖前者，没有函数重载问题；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    function fun(a) {
        console.log("第一个");
    }

    function fun(a, b) {
        console.log("第二个");
    }

    function fun(a, b, c) {
        console.log("第三个");
    }
    fun("我爱你");
</script>

//运行结果：第三个

关键字return

return是JS当中关键字，经常结合函数一起使用，可以将函数计算完记过返回；
注意：return关键字只能在函数体中使用
1：在函数体中return关键字后面语句不再执行
2：可以将函数体中计算完结果返回，可以在函数体外面使用

Return后面语句不再执行

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    function mul() {
        console.log(123);
        console.log(456);
        return;
        console.log(789);
    }
    mul();
</script>

Return可以将函数体中计算完结果返回，在函数体中使用；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    function mul(a, b) {
        return a * b;
    }
    var result = mul(6, 7);
    console.log(result);
</script>

canvas

canvas简介

（canvas是一张图片，可以通过js对它进行绘画）
概述：canvas是2014年（超文本标记语言第五次重大修改中新增的）结构层中一个双闭合标签；
我们可以通过JS在行为层中操作画布，可以在canvas中绘制一些简单图形、对于图片进行裁切、
可以实现一些简单2D动画、显示视频；

canvas基本使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <canvas width="600" height="400"></canvas>
</body>

</html>
<script>
    //获取canvas标签   （画布）
    var canvas = document.querySelector("canvas");
    //画布当中任何操作必须通过2D上下文进行操作  （绘画笔）
    var ctx = canvas.getContext("2d");
    //一定要注意：画布当中任何操作都是通过ctx属性、方法进行操作
    //设置矩形填充颜色
    ctx.fillStyle = "cyan";      
    //绘制矩形   fillRect(到左侧距离, 到上侧距离, 长, 宽0)
    ctx.fillRect(100, 100, 100, 100);

    //绘制圆
    //通过绘制路径形式绘制圆
    ctx.beginPath();
    //用户在描述绘制图形  （arc是弧的意思  arc(圆心,圆心,半价,起始弧度,终止弧度2π360度,逆时针)）
    ctx.arc(200, 200, 50, 0, Math.PI * 2, false);
    //设置填充颜色
    ctx.fillStyle = "red";
    //开始填充
    ctx.fill();
    //边框设置
    ctx.lineWidth = 20;
    ctx.strokeStyle = "pink";

    //开始绘制
    ctx.stroke();
</script>

canvas是HTML5中新增的一个双闭合标签【浏览器认为他是一张图片】
Canvas标签是由默认w（300）、h（150）
canvas标签w、h务必通过属性进行设置（别写样式设置）否则变形
canvas标签文本、儿子标签都没有任何意义

Canvas最基本功能是绘制图形，需要注意画布任何操作都是通过2D上下文进行渲染；

数组

array:数组
概述：在JS当中也有数组存在，数组你可以理解为是一个‘容器’，可以存储很多有序数据。
数组在JS当中是引用类型数据，在JS当中数组是用中括号表示

数组基本使用

JS当中[]代表是数组，数组引用类型数据
JS当中数组可以存储很多元素（数据：可以是任意类型属）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //在JS当中数组使用[]进行表示
    //JS当中数组是引用类型数据
    console.log([]);
    console.log(typeof []);
    //数组目的：可以一次性存储很多有序数据
    console.log([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
</script>

数组经常存储、读取、修改、新增数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //在JS当中数组使用[]进行表示
    //JS当中数组是引用类型数据
    console.log([]);
    console.log(typeof []);
    //数组目的：可以一次性存储很多有序数据
    console.log([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
</script>
<script>
    //为了在JS当中使用数组方便
    //经常将右侧数组赋值给左侧变量（通过变量名字可以访问存储数组）

    //存储数据
    var arr = ["我爱你", 12306, true, NaN, [2, 3, 4]];

    //为了读取数据:通过枚举法 + 下角标（索引值）获取数组里面存储数据
    console.log(arr[0]);
    console.log(arr[3]);
    console.log(arr[4]);
    //修改数组里面数据
    arr[0] = "我爱你母亲";
    arr[1] = 110;
    arr[4][0] = 66666;
    console.log(arr);
    //新增数据
    arr[5] = "我是后来的";
    arr[6] = "稍等我也来了";
    arr[9999] = "我是老嘎达";
    console.log(arr);
    console.log(arr[100]);
</script>

length属性

length是数组一个属性，主要的作用是可以获取数组元素总个数；
因此它返回的是一个数字；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //length属性：可以获取数组里面元素总个数
    var arr = ["吃饭", "睡觉", "打豆豆", "喝酒", "烫头"];
    //数组里面一共是五个元素
    console.log(arr.length);
    //数组里面元素是从零开始的
    //数组的length属性常用语遍历数组
    for (var i = 0; i < arr.length; i++) {
        //获取数组里面元素
        console.log(arr[i]);
    }
</script>
<script>
    //数组常见算法题：
    //比如：计算数组里面元素累加和问题
    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    var sum = 0;
    for (var i = 0; i < arr.length; i++) {
        sum += arr[i];
    }
    //计算完毕获取结果
    console.log(sum);
</script>
<script>
    //获取数组里面最大元素
    var arr = [66, 3, 2, 99, 26, 21, 19, 88];
    //获取最大数字
    var max = arr[0];
    for (var i = 0; i < arr.length; i++) {
        //后者元素大于前者进行重新赋值
        if (arr[i] > max) {
            max = arr[i];
        }
    }
    console.log(max);
</script>

数组方法

pop||push
他们两者是数组方法，主要的作用是可以在数组尾处移除、添加元素。
单词少的：移除元素单词多的：新增元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //声明数组
    var arr = ["幺鸡", "五万", "三饼", "二条", "二筒", "发财"];
    //pop:是数组的一个方法，主要的作用是可以在数组尾巴出移除 一项元素
    var result = arr.pop();
    var result1 = arr.pop();
    console.log(arr); //运行结果：["幺鸡", "五万", "三饼", "二条"]
    console.log(result); //运行结果：二筒
    console.log(result1); //运行结果：发财
</script>

函数

概述：在JavaScript脚本语言中也有函数概念，函数其实就是将某一个功能进行封装，当你事项用这个功能的时候，需要调用、执行这个函数
比如：我们在前面课程当中学习过一些内置函数

内置函数alert：这个功能是在浏览器正上方弹出一个警告框
内置函数prompt:这个功能是在浏览器正上方弹出一个提示框

比如他们使用的时候：函数名字+小括号
在javaScript脚本语言当中：函数使用也是分为两部分：声明+调用
注意：函数在JS当中声明方式有两种：关键字function声明函数、表达式声明函数

关键字函数基本使用

JS当中如果想声明关键字形式函数，需要用到关键字function进行声明

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //关键字形式函数分为两部分声明+调用
    //声明部分(函数名字务必符合命名标识符规范)
    function fun() {
        //这里面是书写代码地方(函数体)
        console.log("鹅鹅鹅,去向向天歌");
        console.log("白毛浮绿水,红掌拨清波");
    }
    //函数调用部分
    fun();
    fun();
    fun();
</script>

形参和实参

<script>
    //形参【形式参数】和实参【实际参数】
    //计算两个数字之和
    //a、b所谓形参
    function sum(a, b) {
        console.log(a + b);
    }
    //100、200实参
    sum(100, 200);
    sum("张三", "李四");
</script>

全局变量和局部变量

//下面代码为局部变量：只能在函数体中使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //局部变量：函数形参、在函数体中声明变量（只能在函数体中使用）
    //声明部分
    function fun(a, b) {
        //形参a、形参b称之为局部变量
        console.log(a);
        console.log(b);
        //在函数体中声明变量（局部变量）
        var c = "么么哒";
    }
    //调用
    fun(true, "哈哈哈哈");
    console.log(c);
</script>

全局变量和局部变量区分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //当前变量i全局变量（可以在JS行为层中任意地方使用）
    for (var i = 0; i < 10; i++) {
        console.log(i);
    }
    console.log("循环语句结束" + i);

    //当前变量str：既不是形参、也不是函数体中声明变量[全局变量]
    if (true) {
        var str = "我是全局还是局部呀";
    }
    console.log(str);
    //判断下面变量是全局还是局部
    var a = 100;
    /*****************************************************************************/
    function fun(haha, hehe) {
        console.log(haha, hehe);

        //判断这个变量是全局还是局部
        for (var num = 1; num < 5; num++) {
            console.log(num);
        }
    }
    //调用函数
    fun(1, 2);
    // console.log(haha);
</script>

总结：
局部变量：函数形参、函数体中声明变量（只能在函数体中使用）
全局变量：全局变量可以在JS行为层中任意地方使用

作用域

作用域【scope】代码书写范围

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //作用域书写代码范围
    //称之为全局作用域
    console.log(123);
    //函数也有作用域概念
    function fun(a, b) {
        console.log(a);
        console.log(b);
    }
    fun(5, 6);
</script>

全局作用域：你可以理解为两个双闭合标签script之间
函数作用域：函数体

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //全局变量
    var b = 100;
    //声明一个函数
    function fun() {
        //局部变量
        var b = 200;
        console.log(b);
    }
    fun();
</script>

JS当中没有函数重载概念

在JS当中如果有多个重名的函数，永远是后者覆盖前者

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    function fun(a) {
        console.log("我是第一个");
    }

    function fun(a, b) {
        console.log("我是第二个");
    }

    function fun(a, b, c) {
        console.log("我是第三个");
    }
    fun("我爱你");
</script>

//运行结果：我是第三个

关键字return

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    function mul() {
        console.log(123);
        console.log(456);
        return;
        console.log(789);
    }
    mul();
</script>

Return后面语句不再执行

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    function mul(a, b) {
        return a * b;
    }
    var result = mul(6, 7);
    console.log(result);
</script>

Return可以将函数体中计算完结果返回，在函数体中使用

拓展canvas

canvas简介

canvas基本使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <canvas width="600" height="400"></canvas>
</body>

</html>
<script>
    //获取canvas标签   （画布）
    var canvas = document.querySelector("canvas");
    //画布当中任何操作必须通过2D上下文进行操作  （绘画笔）
    var ctx = canvas.getContext("2d");
    //一定要注意：画布当中任何操作都是通过ctx属性、方法进行操作
    //设置矩形填充颜色
    ctx.fillStyle = "cyan";
    //绘制矩形   fillRect(到左侧距离, 到上侧距离, 长, 宽0)
    ctx.fillRect(100, 100, 100, 100);

    //绘制圆
    //通过绘制路径形式绘制圆
    ctx.beginPath();
    //用户在描述绘制图形  （arc是弧的意思  arc(圆心,圆心,半价,起始弧度,终止弧度2π360度,逆时针)）
    ctx.arc(200, 200, 50, 0, Math.PI * 2, false);
    //设置填充颜色
    ctx.fillStyle = "red";
    //开始填充
    ctx.fill();
    //边框设置
    ctx.lineWidth = 20;
    ctx.strokeStyle = "pink";

    //开始绘制
    ctx.stroke();
</script>

canvas是HTML5中新增的一个双闭合标签【浏览器认为他是一张图片】
Canvas标签是由默认w（300）、h（150）
canvas标签w、h务必通过属性进行设置（别写样式设置）否则变形
canvas标签文本、儿子标签都没有任何意义
Canvas最基本功能是绘制图形，需要注意画布任何操作都是通过2D上下文进行渲染；

数组

数组基本使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //在JS当中数组使用[]进行表示
    //JS当中数组是引用类型数据
    console.log([]);
    console.log(typeof []);
    //数组目的：可以一次性存储很多有序数据
    console.log([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
</script>

JS当中[]代表是数组，数组引用类型数据
JS当中数组可以存储很多元素（数据：可以是任意类型属）

数组经常存储、读取、修改、新增数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //在JS当中数组使用[]进行表示
    //JS当中数组是引用类型数据
    console.log([]);
    console.log(typeof []);
    //数组目的：可以一次性存储很多有序数据
    console.log([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
</script>
<script>
    //为了在JS当中使用数组方便
    //经常将右侧数组赋值给左侧变量（通过变量名字可以访问存储数组）

    //存储数据
    var arr = ["我爱你", 12306, true, NaN, [2, 3, 4]];

    //为了读取数据:通过枚举法 + 下角标（索引值）获取数组里面存储数据
    console.log(arr[0]);
    console.log(arr[3]);
    console.log(arr[4]);
    //修改数组里面数据
    arr[0] = "我爱你母亲";
    arr[1] = 110;
    arr[4][0] = 66666;
    console.log(arr);
    //新增数据
    arr[5] = "我是后来的";
    arr[6] = "稍等我也来了";
    arr[9999] = "我是老嘎达";
    console.log(arr);
    console.log(arr[100]);
</script>

JS当中数组：可以存储、可以读取、可以修改、可以新增数据

length属性

概述：length是数组一个属性，主要的作用是可以获取数组元素总个数；
因此它返回的是一个数字；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //length属性：可以获取数组里面元素总个数
    var arr = ["吃饭", "睡觉", "打豆豆", "溜冰", "滑雪"];
    //数组里面一共是五个元素
    console.log(arr.length);
    //数组里面元素是从零开始的
    //数组的length属性常用语遍历数组
    for (var i = 0; i < arr.length; i++) {
        //获取数组里面元素
        console.log(arr[i]);
    }
</script>
<script>
    //数组常见算法题：
    //比如：计算数组里面元素累加和问题
    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    var sum = 0;
    for (var i = 0; i < arr.length; i++) {
        sum += arr[i];
    }
    //计算完毕获取结果
    console.log(sum);
</script>
<script>
    //获取数组里面最大元素
    var arr = [66, 3, 2, 99, 26, 21, 19, 88];
    //获取最大数字
    var max = arr[0];
    for (var i = 0; i < arr.length; i++) {
        //后者元素大于前者进行重新赋值
        if (arr[i] > max) {
            max = arr[i];
        }
    }
    console.log(max);
</script>

数组方法

1、pop||push
概述：他们两者是数组方法，主要的作用是可以在数组尾处移除、添加元素。
单词少的：移除元素单词多的：新增元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //声明数组
    var arr = ["一万", "五万", "三饼", "二条", "二筒", "发财"];
    //pop:是数组的一个方法，主要的作用是可以在数组尾巴出移除 一项元素
    var result = arr.pop();
    var result1 = arr.pop();
    console.log(arr); //运行结果：["一万", "五万", "三饼", "二条"]
    console.log(result); //运行结果：二筒
    console.log(result1); //运行结果：发财
</script>

pop是数组方法，可以在数组尾出移除掉一项元素
Pop方法有返回数值，返回的是移除掉的那项元素
pop是数组方法，可以在数组尾出移除掉一项元素
Pop方法有返回数值，返回的是移除掉的那项元素

var result = arr.push("曹操");
var result1 = arr.push("刘备", "关二爷", "张飞");
console.log(arr); //运行结果：运行结果：["一万", "五万", "三饼", "二条","曹操","刘备", "关二爷", "张飞"]
console.log(result); //运行结果：5
console.log(result1) //运行结果：9

push也是数组方法，主要的作用是可以向数组尾处添加一项、多项元素
push方法执行完毕有返回数值，返回的数值是数组新增完元素总个数；

总结：
pop是数组方法，可以在数组尾巴出移除一项元素，返回的是删除调的那个元素
push是数组方法，可以在数组尾巴出添加一个、多个元素，返回的是添加完元素总个数

2、shift||unshift
概述：shift||unshift他们两者是数组方法，可以在数组头部添加、移除元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //shift:在数组头部删除一项元素
    var arr = ["北京", "上海", "广州", "深圳"];
    //头部删除一项元素
    // var result = arr.shift(); 
    // console.log(arr); //运行结果：["上海", "广州", "深圳"];
    // console.log(result); //运行结果：北京

    //头部添加一个、多个元素
    var result = arr.unshift("杭州", "苏州", "小米粥");
    console.log(arr); //运行结果：["杭州", "苏州", "小米粥","北京","上海", "广州", "深圳"];
    console.log(result); //运行结果：7
</script>

Shift在数组头部移除一项元素、返回删除掉的那项元素
unshift在数组头部添加一个、多个元素，返回的是数组元素总个数（新的总个数）

3、reverse

概述：它也是数组方法，主要的作用是可以让数组里面元素进行倒置。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //reverse:数组方法让数组元素进行倒置
    var arr = ["米菲", "香蕉", "兔子"];
    arr.reverse();
    console.log(arr); //运行结果：["兔子", "香蕉", "米菲"]
</script>

4、indexOf
概述：它也是数组方法，主要的作用是可以获取数组当中某一个元素索引值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //reverse:数组方法让数组元素进行倒置
    var arr = ["米菲", 1, 2, 3, 4, 5, "香蕉", "香蕉", "香蕉", "兔子"];
    // arr.reverse();
    // console.log(arr);
    //indexOf：可以检测某一个元素索引值
    console.log(arr.indexOf("香蕉")); //运行结果：6
    console.log(arr.indexOf("猴子")); //运行结果：-1  
</script>

indexOf是数组方法，可以获取数组当中某一个元素索引值
注意1：获取到的是从左到右第一个符合条件索引值
注意2：如果获取的是数组里面没有元素，返回索引值是-1

5、join
概述：它也是数组方法，主要的作用是可以通过某一个字符将数组转换为字符串。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //join:将数组转换为字符串
    var arr = ["北京", "南京", "燕京", "东京", "吴京", "亮晶晶"];
    console.log(arr.join()); //运行结果：北京,南京,燕京,东京,吴京,亮晶晶
    console.log(arr.join("*"));//运行结果：北京*南京*燕京*东京*吴京*亮晶晶
    console.log(arr.join(""));//运行结果：北京南京燕京东京吴京亮晶晶
</script>

6、concat

概述：它也是数组方法，主要的作用是将多个数组合并为一个数组；

//concat:将多个数组合并为一个数组
var a = [1, 2, 3]；
var b = [4, 5, 6];
var c = [7, 8, 9];
console.log(a.concat(b, c)); //运行结果：[1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(a, b, c); //运行结果：[1, 2, 3]   [4, 5, 6]   [7, 8, 9]

7、slice
概述:它也是数组方法，主要的作用是可以切割数组；
语法格式：
注意：切割的时候，包含起始位置，但是不包含结束位置,
slice方法对于起始数组没有任何影响

arr.slice(起始索引值，结束索引值);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //slice:数组方法用于切割数组
    //代表起始位置索引值，结束索引值 （包含起始位置，但是不包含结束位置）
    var arr = ["小浣熊", "麻花", "包子", "烤鸭", "棒棒糖"];
    //一个参数：代表起始位置
    var newArr1 = arr.slice(1); //["麻花", "包子", "烤鸭", "棒棒糖"]
    var newArr2 = arr.slice(1, 3); //["麻花", "包子"]  包含起始 不包含结束
    var newArr3 = arr.slice(-2); //["烤鸭", "棒棒糖"] 倒数第二个开始切
    console.log(newArr3);
</script>

8、splice
概述：它也是数组方法，主要的作用是切割数组。（和slice的区别：按长度切割，对原数组有影响）
语法格式：

Arr.splice(起始位置，长度);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    var arr = ["王者荣耀", "吃鸡", "lol", '魔兽', "传奇", "劲舞团", "CF", "DNF", "逆战"];
    //切割
    // var newArr1 = arr.splice(2, 3);
    // console.log(newArr1); //运行结果：["lol", '魔兽',"传奇"]
    // console.log(arr); //运行结果：["王者荣耀", "吃鸡", "劲舞团", "CF", "DNF", "逆战"]

    //插入
    // arr.splice(2, 0, "哈哈哈插入数据", "么么哒");
    // console.log(arr); //运行结果：["王者荣耀", "吃鸡", "哈哈哈插入数据", "么么哒", "lol", '魔兽', "传奇", "劲舞团", "CF", "DNF", "逆战"]

    //替换
    arr.splice(2, 2, "哈哈哈插入数据", "么么哒");
    console.log(arr); //运行结果：["王者荣耀", "吃鸡", "哈哈哈插入数据", "么么哒", "传奇", "劲舞团", "CF", "DNF", "逆战"]
</script>

节点树

节点【element】即为标签
概述：静态页面骨架是由标签组成，标签之间关系很像一颗大树，简称为节点树。
如下图：静态页面标签之间关系图，很像一颗大树，因为前端人称之为节点树。
在这里插入图片描述

DOM

document：文档、页面

概述：DOM【全称：document object model】其实就是系统内置引用类型对象document，你可以认为他是整个节点树‘根元素’（虽然实际上的根元素是html）
JS当中DOM对象可以通过一些手段操作结构层中标签。

DOM四个小属性

documentElement属性：可以获取页面中HTML标签
head属性:可以获取到head标签
body属性：可以获取到body标签
title属性：可以操作title标签文本

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我爱你们</title>
</head>

<body>
    <div></div>
</body>

</html>
<script>
    //DOM：其实就是内置document（页面）对象，你可以认为是当前页面的‘根元素’
    //DOM：是引用类型数据
    console.log(document);
    console.log(typeof document);
    //四个小属性
    console.log(document.documentElement);
    console.log(document.head);
    console.log(document.body);
    console.log(document.title);
    //下面是错误的写法
    console.log(document.div);
    console.log(document.meta);
</script>

在这里插入图片描述
DOM方法
四个属性：documentElement(获取HTML标签),head(获取head标签),body(获取body标签),title(获取标题文字内容)。
如果想获取其他页面中标签：需要通过一些方法获取，DOM方法很多，今天怎么暂时学习一个。
getElementById：DOM这个方法可以通过标签的ID选择器匹配任意节点树上标签。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" id="box">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>
        <ul id="box1">
            <li>吃饭</li>
            <li id="box2">睡觉</li>
            <li>打豆豆</li>
        </ul>
    </div>
</body>

</html>
<script>
    //getElementById:是DOM方法，可以通过标签ID属性值获取任意节点
    var meta = document.getElementById("box");
    console.log(meta);
    //获取ul标签
    var ul = document.getElementById("box1");
    console.log(ul);
    //获取li标签
    var li = document.getElementById("box2");
    console.log(li);
</script>

getElementById：是DOM方法，可以通过节点ID属性值获取节点树上任意标签
Script标签一般放置程序最下方（因为加载先后顺序问题）

操作标签文本

概述：我们可以通过DOM方法获取节点树上任意节点，除此之外，获取节点经常操作自己文本内容；

如果是表单元素：需要通过value属性操作文本【经常结合form标签一起使用input标签】
如果是非表单元素：需要通过innerHTML属性操作文本【非input标签】

我是的未来称之为标签文本：

<div>我是的未来</div>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>
        我是表单元素:<input type="text" value="最近天气好冷呀" id="cur">
    </div>
    <a href="http://www.baidu.com" id="box">跳转到百度</a>
    <p id="memeda">欢迎~~</p>
</body>

</html>
<script>
    //如果操作表单元素文本：需要使用标签的value属性
    //操作文本：即为可以在JS当中获取已有文本、但让也可以重新设置文本
    //第一步：获取表单元素
    var input = document.getElementById("cur");
    //获取表单元素文本
    console.log(input.value);
    //从新设置表单元素文本
    input.value = "我是通过JS动态修改表单元素文本";

    //非表单元素：就不是input即可
    //非表单元素操作文本：需要通过innerHTML属性
    var a = document.getElementById("box");
    //获取非表单元素文本
    console.log(a.innerHTML);
    //重新设置非表单元素文本
    a.innerHTML = "哇哦";

    //获取P标签
    var p = document.getElementById("memeda");
    //获取文本
    console.log(p.innerHTML);
    //动态修改
    p.innerHTML = "最近有的同学老不来上课";
</script>

操作标签属性

src=”./1.jpg” 和 id=”box” class=”cur 称之为属性：

<img src=”./1.jpg”>
<div id=”box” class=”cur”>这里叫做文本</div>

<!-- 下面这行代码：是文档声明方式，不是标签（H5） -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <img src="./img/1.jpg" alt="" id="box">
    <div class="cur" id="ha">我是一个粉刷匠</div>
</body>

</html>
<script>
    //获取img标签
    var img = document.getElementById("box");
    //获取标签属性值
    console.log(img.src);
    //重新修改图片src属性值
    img.src = "./img/2.jpg";
    //获取div标签
    var div = document.getElementById("ha");
    //获取div的class、id属性值
    console.log(div.id);
    console.log(div.className);
    //重新设置class属性值
    div.className = "rewrite";
    div.id = "gagaga";
    //修改文本
    div.innerHTML = "粉霜本领强";
</script>

大多情况下：操作标签属性标签.属性名字进行操作
但是有特例：class属性，如果操作标签class属性，需要通过className属性值操作

操作标签样式

概述：我们通过DOM可以操作标签的行内样式。
区分web样式：
Link:称之为外部样式
Style：称之为内部样式
//下面写法称之为行内样式：

<h1 style=“color:red”>我是文本</h1>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>

<body>
    <div style="width:100px;height: 100px;color:blueviolet;border: 1px solid black;" id="cur">12306</div>
</body>

</html>
<script>
    //获取div标签
    var div = document.getElementById("cur");
    //获取已有样式
    console.log(div.style.width);
    console.log(div.style.height);
    console.log(div.style.color);
    console.log(div.style.border);
    //设置元素样式
    div.style.width = "250px";
    div.style.color = "red";
    //如果样式中中间带有横杠变驼峰写法
    div.style.fontSize = "30px";
    div.style.textAlign = "center";
    div.style.background = "cyan";
</script>

DOM能操作的只是标签的行内样式（外部样式、内部样式暂时操作不了）
样式中属性带有横杠变为驼峰写法
该有单位需要有单位

事件

概述：事件英文【event】，事件是由用户触发，当用户触发事件的时候，标签可以做出相应的响应。
比如：用户触发单击事件、鼠标移上、鼠标移下…
语法格式：

element.onxxxx = function(){

}

onxxxx = function()这个函数：称之为事件处理函数（当用户触发事件的时候才会执行一次）

单击事件-onclick
概述：你可以给任意标签绑定单击事件（当用户触发单击事件的时候），事件处理函数才会执行一次。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 600px;
            height: 100px;
            margin: 100px auto;
            background: red;
            color: white;
            text-align: center;
            line-height: 100px;
        }

        #box1 {
            /* 定位元素 */
            position: relative;
            width: 100px;
            height: 100px;
            background: cyan;
            left: 0px;
        }

        #box2 {
            width: 300px;
            height: 100px;
            background: pink;
        }
    </style>
</head>

<body>
    <div id="box">文字</div>
    <div id="box1"></div>
    <div id="box2"></div>
</body>

</html>
<script>
    //给第一个div标签绑定单击事件
    var div = document.getElementById("box");
    var div1 = document.getElementById("box1");
    var div2 = document.getElementById("box2");
    //全局变量：存储一下起始字号大小
    var f = 16;
    var w = 600;
    //绑定单击事件
    div.onclick = function () {
        //字号加上1
        f++;
        w += 5;
        div.style.fontSize = f + "px";
        div.style.width = w + "px";
    }
    //第二个div
    var l = 0;
    div1.onclick = function () {
        l += 10;
        div1.style.left = l + "px";
    }
    //第三个div
    div2.onclick = function () {
        //随机三个数字
        var R = parseInt(Math.random() * 255);
        var G = parseInt(Math.random() * 255);
        var B = parseInt(Math.random() * 255);
        //随机颜色
        div2.style.background = `rgb(${R},${G},${B})`;
    }
</script>

注意：JS属于脚本语言，脚本语言需要嵌套在静态页面中，给静态页面添加一些动态效果。

动态创建标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ul id="box">

    </ul>
</body>

</html>
<script>
    //先获取UL标签
    var ul = document.getElementById("box");
    //DOM提供给我们一个createElement方法，可以在JS当中动态创建标签
    //循环语句创建10000li
    for (var i = 0; i < 10000; i++) {
        var li = document.createElement("li");
        li.innerHTML = i;
        //UL追加子元素
        ul.appendChild(li);
    }
</script>

echarts图表库

官方手册：https://www.echartsjs.com/zh/index.html
概述：echarts是前端工程师比较出名的JavaScript函数库，它最牛的一件事情，就是可以快速开发各种图表。
比如：折线图、柱状图、饼图、散点图等等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 通过双闭和标签script将echarts源码引入 -->
    <!-- 第一步：需要引包，将源码引入 -->
    <script src="./js/echarts.min.js"></script>
</head>
<body>
      <!-- 第二步:显示图表的地方 -->
     <div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>  
<script type="text/javascript">
    //当引入echarts函数的时候，它对外保留一个对象通过init方法创建实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
   Var option = {
    title : {
        text: '南丁格尔玫瑰图',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        x : 'center',
        y : 'bottom',
        data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'半径模式',
            type:'pie',
            radius : [20, 110],
            center : ['25%', '50%'],
            roseType : 'radius',
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            lableLine: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            data:[
                {value:10, name:'rose1'},
                {value:5, name:'rose2'},
                {value:15, name:'rose3'},
                {value:25, name:'rose4'},
                {value:20, name:'rose5'},
                {value:35, name:'rose6'},
                {value:30, name:'rose7'},
                {value:40, name:'rose8'}
            ]
        },
        {
            name:'面积模式',
            type:'pie',
            radius : [30, 110],
            center : ['75%', '50%'],
            roseType : 'area',
            data:[
                {value:10, name:'rose1'},
                {value:5, name:'rose2'},
                {value:15, name:'rose3'},
                {value:25, name:'rose4'},
                {value:20, name:'rose5'},
                {value:35, name:'rose6'},
                {value:30, name:'rose7'},
                {value:40, name:'rose8'}
            ]
        }
    ]
};

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

ECHARTS函数库：图标开发
在实际工作的时候用到概率比较大的【前端工程师】，在使用的时候如下图

对象

概述：前端工程师中也有面向对象编程概念(基于面向对象编程),在JS当中对象分为两种：

第一种：狭义对象
第二种：广义对象

狭义对象

概述：在JS当中狭义对象用一个大花括号表示{}；狭义对象可以拥有很多属性和方法；
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
   //狭义对象:使用大花括号表示
   var obj = {
        name:"小明",
        age:18,
        sex:"男",
        eat:function(){
             console.log("我可以吃八斤米饭");
        }
   };
 //检测当前对象类型
 console.log(typeof obj);
 //对应获取属性值
</script>

右侧属性值为函数：称之为对象方法，否则为属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
   //狭义对象:使用大花括号表示
   var obj = {
        name:"小明",
        age:18,
        sex:"男",
        eat:function(){
             console.log("我可以吃八斤米饭");
        }
   };
 //检测当前对象类型
 console.log(typeof obj);
 //获取属性值
 console.log(obj.name);
 console.log(obj.age);
 console.log(obj.sex);
 console.log(obj.eat);
 //重新修改属性值
 obj.name = "二哈";
 obj.age = 2;
 obj.sex = "公";
 //动态添加属性、方法
 obj.color = "白加黑";
 obj.yaoren = function(){
      console.log("我可以咬人");
 }
/*********************************************************/
 obj.eat();
 obj.eat();
 obj.eat();
 obj.yaoren();
</script>

在JS当中大花括号即为狭义对象
狭义对象可以拥有属性、方法（区分开：属性值为函数称之为方法，否则称之为属性）
记住：JS当中对象才可以通过点语法动态添加属性和方法

广义对象

概述：如果是引用类型数据，且系统提供内置属性和方法的对象，称之为广义对象；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>   
<script>
  //广义对象-----函数
  function People (a,b,c){

  }
  //JS当中：五个基本数据类型：数字、字符串、布尔、未定义、空对象
  //引用类型数据:Object
  //函数即为广义对象：因为有一些系统内置属性、方法提供给我们使用
  //name:系统提供内置属性，可以获取函数名字
  console.log(People.name);
  //length：系统提供内置属性，可以获取函数形参个数
  console.log(People.length);
  //动态添加自定义属性
  People.xingming = "我是小明";
  People.age = 18;
  People.sex = "男";
  console.log(People.xingming);
/*************************************************************/People
//广义对象------数组
var arr = ["吃饭",'睡觉','打豆豆'];
console.log(arr.length);
console.log(arr.reverse());
console.log(arr.join());
//动态添加属性和方法
arr.xingming ="小红";
arr.age = 18;
arr.sex = "女";
console.log(arr.xingming);
</script>

在JS当中对象【狭义、广义】：可以通过点语法动态添加自定义属性、方法
狭义对象：其实狭义对象即为大花括号表示
广义对象:广义对象除了自定义属性、方法意外，系统给它提供了内置属性和方法使用；
总结：其实在JS当中只要是引用类型数据即为对象

什么不是对象

概述：在JS当中基本数据类型数值都不是对象：（如果不是对象不能通过点语法动态添加属性和方法）
比如：数字、字符串、布尔值、未定义、空对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
   //NaN不是数据类型，它只是Number（数字类型中的一个特殊值）
   console.log(5);
   console.log(NaN);
   console.log(typeof 5);
   console.log(typeof NaN);
   //在那些特定情况下回出现这个特殊值NaN【在进行数学运算符且算不出结果的时候返回数字NaN】
   console.log(0/0)
</script>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
   //JS当中基本数据类型数值都不是对象【数字、字符串、布尔值、未定义、空对象】
   var num = 100;
   num.xingming ="我爱你";
   console.log(num.xingming);
   var str = "今天是个好日子";
   str.xingming = "毛爷爷";
   console.log(str.xingming);
</script>

总结：在JS当中引用类型都是对象（通过点语法动态添加属性、方法）
在JS当中基本数据类型都不是对象（不能通过点语法动态添加属性、方法）

函数上下文

概述：函数上下文即为this，它只能在函数体中使用，函数上下文this（它代表的数值并不是一个固定数值），
函数上下文数值取决函数该如何调用执行；
函数执行在JS当中有五种

函数名+小括号 ;
函数作为事件处理函数执行
定时器回调函数执行
函数作为数组元素枚举出来执行
函数作为对象方法执行
综上所述：函数执行方式有五种，不同执行方法，函数上下文this 是不同的；

函数名+小括号执行

概述：函数名+小括号执行，函数体中上下文为window[即为BOM对象：浏览器对象]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>   
<script>
  //先认识BOM【browser object model】浏览器对象模型
  //在模拟浏览器
  //函数名+小括号执行，函数上下文即为BOM【内置window对象】
  function fun (){
      //这个this即为函数上下文
      console.log(this);
  }
  //如果是函数名+小括号调用函数上下文为window【所谓BOM对象】
  fun();

</script>

函数作为事件处理函数执行

概述：函数作为事件处理函数执行，函数的上下文即为触发事件的当前标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       div{
            width:400px;
            height: 200px;
            background-color: black;
       }
    </style>
</head>
<body>
     <div id="box"></div>
</body>
</html>  
<script>
  //获取div标签
  var div = document.getElementById("box");
  //绑定单击事件
  div.onclick = function(){
     //函数体中上下文
     this.style.background = "red";
  }
</script>

定时器回调函数执行

概述：在JavaScript语言当中，定时为回调函数回每隔一段时间执行一次，
而定时器回调函数上下文为window；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>   
<script>
  //定时器回调函数每隔一段事件执行一次
  //第一个参数：函数（称之为回调函数）
  //第二个参数：是一个数字（代表的是定时器间隔）单位MS
  setInterval(function(){
      console.log(this);
  },1500);
</script>

函数作为数组元素枚举出来执行

概述：函数作为数组元素枚举出来执行，函数的上下文为当前数组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>   
<script>
  var arr = [1,2,3,4,5,function(){
       console.log("我是数组里面函数----我执行了");
       this.reverse();
  },6,7,8,9,10];
  //枚举出函数执行
  arr[5]();
  console.log(arr);
</script>

函数作为狭义对象方法执行

概述：函数作为狭义对象方法执行，谁最后打点函数的上下文即为谁。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
   //狭义对象
   var jch = {
       name:"贾成豪",
       age:18,
       sex:"男",
       eat:function(){
           console.log(this.name+"我可以吃八级米饭");
       }
   }
//调用对象方法
jch.eat();
</script>

总结：函数上下文五大规律
1：函数名+小括号执行=>window
2:函数作为事件处理函数执行=>当前触发这个事件标签
3：定时器回调函数每隔一段事件执行=>window
4:函数作为数组元素枚举出来执行=>当前数组
5：函数作为狭义对象方法执行=>最后打点对象

构造函数

概述：在JavaScript语言当中也有所谓构造函数【constructor】，JS当中构造函数要符合如下两个特征：

函数名字首个英文字母一般需要大写【不是决定性因素】
构造函数务必、必须、一定是一个关键字new调用的【决定形因素】

关键字new

概述：在上一次课程当中，我们知道函数执行一共五种，关键字new其实也是调用函数另外一种方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
  //认知关键字new：它也是调用函数一种方式
  //函数声明部分
  function Fun (){
   console.log("兄弟你执行呀");
  }
  //关键字new 也是调用函数一种手段
  new Fun;
  new Fun;
  new Fun;
</script>

关键字new也是调用函数一种方式【6种方式】
关键字new需要放在函数名字前面

构造函数基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
   //构造函数两个特征:
   //第一：构造函数的首个英文字母一般大写的【不是决定性因素】
   //第二：函数如果是new调用的，称之为构造函数【决定形式因素】
   //问题：老师函数名+小括号调用函数执行、new调用函数也执行，两者有什么区别呀？
   function People(){
     //第一步：在函数体中神秘创建了一个空的狭义对象【大的花括号】
     //第二步:函数体中的上下文指向当前这个空的狭义对象
     //第三步：可以通过点语法给狭义对象动态添加属性、方法
     this.xingming = "小明";
     this.age = 18;
     this.sex = "男";
     this.hobby = ['吃饭','睡觉','打豆豆'];
     //第四步：虽然没有关键字return，但是系统会自动将狭义对象返回 
   }
   var obj = new People;
   console.log(obj);

</script>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>   
<script>
    //构造函数两个特征：
    //函数名字首个英文字母需要大写的
    //函数务必使用关键字new调用的
    function Dog(name,sex,age){
      //构造函数独有四步走
      //第一步：在函数体中神秘创建了一个空的狭义对象
      //第二步：函数的上下文指向当前的空的狭义对象
      //第三步：通过点语法动态给狭义对象添加属性、方法
       this.name = name;
       this.sex  = sex;
       this.age = age;
      //第四步：虽然没有关键字new，但是系统会将当前这个狭义对象返回
      for(var i = 0 ; i < 10 ;i++){};
      if(true){};
    }
    //调用函数
    var erha =  new Dog("二哈","公",3);
    var taidi  =  new Dog("泰迪","母",6);
   //因为这是两个不同对象，因为在堆空间当中内存地址不同
   console.log(erha,taidi);
</script>

构造函数也是一个函数，以前函数能做的构造函数也能在【循环、条件】
只不过构造函数可以捎带脚返回一个狭义对象而已

原型----prototype

概述：在前端工程师世界当中，构造函数就是所谓‘类’，通过四步走出来的狭义对象，称之为‘实例’：
比如上一个案例：Dog构造函数他们一般称之为Dog类 erha、taidi:一般称之为Dog类的实例；
在这里插入图片描述
任意构造函数天生都有一个prototype属性，指向一个空的狭义对象
实例天生拥有一个__proto__属性，向上面的狭义对象借用方法使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
      //任意构造函数 天生都有一个 prototype属性 ，指向一个空的狭义对象
      //创建出来的时候天生拥有一个__proto__属性，可以向上面的狭义对象借用方法使用
      function Dog(name,age,sex){
         //经历四步走
         this.name = name;
         this.age = age;
         this.sex  = sex;
      }   
      Dog.prototype.yaoren = function(){
          console.log("我可以咬人");
      }
      //创建二哈实例
      var erha = new Dog("二哈",18,"公");  
      console.log(erha); 
      erha.yaoren();
      erha.yaoren();
</script>

在这里插入图片描述

士兵行走

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            position: absolute;
            width: 50px;
            height: 100px;
            background: url('./img/1.png');
            /* 背景图定位 */
            background-position: 0px -200px;
        }
    </style>
</head>

<body>

</body>

</html>
<script>
    //将来我需要10000士兵行走
    function Bing() {
        //控制背景图发生变化属性
        this.x = 0;
        //top属性值
        this.t = parseInt(Math.random() * 500);
        //修改left属性值
        this.l = 0;
        //控制小兵是否行走
        this.isMove = false;
        //经历四步走
        this.init();
        //将每隔一秒创建实例添加到数组进行同一管理
        arr.push(this);
        //控制是否行走
        this.bind();
    }
    Bing.prototype.init = function () {
        //在JS当中创建div标签
        this.dom = document.createElement("div");
        this.dom.style.top = this.t + "px";
        //标签上树
        document.body.appendChild(this.dom);
    }
    //跟新脚步方法
    Bing.prototype.update = function () {
        if (this.isMove) return;
        //控制背景图发生变化属性值
        this.x++;
        //修改控制left变化属性值
        this.l += 10;
        if (this.x > 3) this.x = 0;
        //修改div背景图定位
        this.dom.style.backgroundPosition = -this.x * 50 + "px -200px";
        this.dom.style.left = this.l + "px";
        //当达到一定条件删除标签
        if (this.l > 500) {
            //将数组里面实例移出
            arr.splice(arr.indexOf(this), 1);
            //节点移出
            document.body.removeChild(this.dom);
        }
    }
    Bing.prototype.bind = function () {
        var self = this;
        this.dom.onclick = function () {
            self.isMove = !self.isMove;
        }
    }
    //向每隔一秒创建一个士兵
    var time = 0;
    //创建数组接受全部实例
    var arr = [];
    //开启定时器一直运动
    setInterval(function () {
        time++;
        if (time % 10 == 0) new Bing;
        //让每一个士兵向右侧行走---遍历数组
        for (var i = 0; i < arr.length; i++) {
            arr[i].update();
        }
    }, 100);
</script>

Petrel_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

JavaScript简介概述：JavaScript在前端中简称【JS】，JavaScript是开发web脚本语言。但是它也被用到了很多非浏览器环境中【比如：node平台】，JavaScript在1995年由Netscape公司的Brendan Eich（创始人大概用了十天的时间将这门语言创建出来），JS可以嵌套在静态页面中可以给静态页面添加一些动态效果（脚本语言）；不同浏览器厂商（在浏览器中都有内置解析器解析JS语法）；各大浏览器厂商：chorme、IE、火狐、sofai、欧朋（都有属于自己的解析器）
复制链接

扫一扫