ECMAScript：规定了JS的编程语法和基础核心知识，是所有浏览器厂商都去共同遵守的一套JS语法标准。

DOM：也叫页面文档对象模型。是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的元素进行各种的样式操作，例如颜色：大小，位置等等。

BOM：也叫浏览器对象模型。是各个浏览器厂商根据 DOM在各自浏览器上的实现。就是Window 是 BOM 对象，而不是 js 对象；javacsript是通过访问BOM对象来访问、控制、修改客户端(浏览器)

7.目前版本和开发状态

ECMAScript可以理解为是JavaScript的一个标准。目前版本最新的已经到了ES6.但是大部分浏览器只支持到ES5。所以开发环境和线上环境版本不一致

二、引入方式

（1）内部脚本：将JS代码定义在HTML页面中

（2）外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中

1.内部脚本例子

步骤

1.新建一个html文件，在里面添加一个script标签（建议放在body底部，可以优先加载其他HTML代码，显示运行效率更快），标签里面添加一个弹窗语句测试

即

<script>
alert("hello JS")
</script>

加自动模板的完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--在<script>标签中写一个弹窗语句alert测试-->
<script>
alert("hello JS")
</script>

<body>

</body>
</html>

运行结果

2. 外部脚本例子

步骤

1.idea新建里面新建一个js文件，并在js文件中添加一个弹窗语句

alert("hello  js")

2.idea新建一个html文件，然后标签里面输入一个src引用js的文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--script这里添加引入的js文件-->
<script src="demo1.js"></script>
</body>
</html>

运行结果

三、使用规则

1.书写语法

（1）区分大小写：与Java一样，变量名，函数名以及其他一切东西都区分大小写

（2）每行结尾的分号可有可无

（3）注释：单行注释：//注释内容多行注释：/*注释内容*/

（4）大括号表示代码块

（5）定义的语句都要写在script标签里面（script标签建议写在html的body里面）

2.报错的查看方式

1.键盘F12（或者右键-检查）—2.点击顶部的Sources里面的报红查看

3.输出语句

ps：以下语句都是再html文件的body里面写的

（1）写入警告框

<script>
    window.alert("hello  js");//写入警告框
</script>

运行结果

（2）写入HTML（浏览器）页面里面

<script>
    document.write("hello js")//写入HTML页面里面
</script>

运行结果

（3）写入浏览器的控制台

<script>
    console.log("hello js")
</script>

运行结果（运行后，浏览器页面F12点开，点击Console就可以查看了）

4.JS的变量

简介：变量就是用来保存数据的，JavaScript是一门弱类型语言，变量可以用来存放任意的数据类型的值

（1）var关键字

说明：JS使用var（variable的缩写）关键字来声明变量。var相当于一个全局变量，用来定义什么都可以，而且值可以被重复定义

<script>
//1.代码块内可以定义相同的var，不过最下面的会覆盖上面之前的
    var age = 30;
    var age = 20;
    //测试
    alert(age);//运行结果为弹窗出来20

//2.变量值可以被重复定义，但是会覆盖上面的
    var Test = 10;
    Test = "帅哥"
    //测试
    alert(Test)//运行结果为弹窗出来帅哥
</script>

（2） let关键字

说明：ECMAScript6新增了let关键字来定义变量，他的语法类似var，但是所声明的变量，只能在在let关键字的代码块里面有效，有点像局部变量，并且不能重复声明。

<script>
    {//如果被代码块包裹住，就只能在代码块里面生效
        let age = 20;
        alert(age)//运行结果：黑色页面（因为代码块内）弹窗出来20
    }    
</script>

（3）const关键字

说明：ECMAScript6新增了const关键字，用来声明一个只读的常量，一旦声明，常量的值就无法改变

5.数据类型

（1）JavaScript（简称JS）的数据类型

数值类型：number

字符串类型：string

对象类型：object

布尔类型：boolean

函数类型：function

（2）特殊的值

初始默认值：undefined

空值：null

非数字、非数值：NAN—–全称是Not a Number

ps：要查看属于什么数字类型可以用：弹窗标签（typeof 查看的数据）

6.运算符

JS的运算符和Java运算符都差不多，不过多了一个===（全等于的运算符）

ps：==就不是全等。例如23可以==”23“

这里的全等就是===了

7.流程控制语句

JS的流程控制语句和Java的一样，正常去使用就好了

java三种循环（for、while、do while）和终止语句（break、continue、return）_云边的快乐猫的博客-CSDN博客_java跳出本次循环进入下一次循环

Java中的if与switch选择结构语句应用_云边的快乐猫的博客-CSDN博客

8.函数（通俗讲就像是Java中的方法）

ps：我习惯称为方法，知道一个意思就可以了

（1）方法一

通过function关键词进行定义

注意：形式参数不需要类型。返回值也不需要定义类型，直接return返回就好了

语法为：

function 自定义方法名 (自定义参数名1，自定义参数名2……){

要执行的代码

}

<script>
    function hello(a,b){
        return a+b;
    }

    //传值并赋值给一个变量
    var h = hello(5,6);
    alert(h);//弹窗测试运行结果弹窗出来11
</script>

（2）方法二

也是通过function关键词进行定义，区别在于实际传参个数和方法里面的形参个数不一样情况。对比方法一特点：可以任意个参数进去，但是

实际传参个数>形参个数。结果：实际传参多余的个数不会不生效

实际传参个数<形参个数。结果：传参+默认值计算结果（这个类型和传进去的参数类型一样，没有就默认值）。ps：谁会吃饱了没事干传多或者传少啊

语法为：

var 自定义名字 function（参数列表）{
要执行的代码
}

<script>
    //1.编写方法
    var Test = function (a,b){
        return a+b;
    }
    //2.把方法的值赋值给自定义的result
    var result = Test(1,2);
    //3.弹窗测试
    alert(result)//运行结果为3
</script>

9.Array对象(类似Java中的集合)

这个在JS里面叫数组或者对象的，但是除了{}换成了[ ],实际使用方式还是和Java中的集合差不多,因为长度，类型都可以变。

语法格式为：

var 变量名 =new Array(元素列表); //方法一但是不怎么常用，因为麻烦

var 变量名 =[元素列表]; //方式二常用

访问方式

arr[索引值] = 自定义值;

（1）使用方式

ps：这些都是在html的body里面运行

<script>
    //一、
    //1.编写方式
    var arr =[1,2,3];
    //2.弹窗测试
    alert(arr);//运行结果为弹窗1，2，3

    //3.根据索引访问并修改索引对应的值
    arr[1] = 10;//访问集合中的第一个元素的位置。并重新给他定义一个值
    alert(arr);//运行结果为弹窗1,10,3
    //ps:根据索引直接访问方式:alert(arr[1]);
</script>

（2）遍历方式

    //二、遍历方式
    //1.定义一个数组
<script>
    var name = ["张三","李四","王五"];
    //2.for循环遍历--快捷键为变量名.fori+回车键
    for (let i = 0; i < name.length; i++) {
        //3.弹窗测试
        alert(name[i]);//弹窗依次弹出张,三,李,四,王,五。如果想只弹出弹出一次，那就直接访问呗//alert(name)
    }
</script>

（3）添加和删除

<script>
    //一、添加：push
    //1.编写方式
    var arr =[1,2,3];
    //添加值
    arr.push(10);
    //弹窗测试
    alert(arr);//运行结果：弹窗出1,2,3,10

    //二、删除：
    arr.splice(0,2);//删除了从第0个开始，删除2个
    alert(arr);//运行结果弹窗3,10
</script>

10.String关键字对象

String里面常用的方法就是去除多余的空格——trim()

语法为：

var 自定义名称 = “值”

<script>
    //一、创建String类型对象
    var str1 = "abc";
    //运行测试
    alert(str1);//运行结果为弹窗出来abc

    //二、常用方法：去除多余的空格,用trim()方法
    //创建String类型对象
    var str2 ="     abc    "
    //运行测试
    alert(str2.trim());//运行结果为弹窗出来abc，没有多余的空格
</script>

11.自定义对象

简介：可以在自定义对象当中定义很多的方法或者函数这些，就像一个大麻袋，需要的东西就可以装里面。

语法为：

var 对象名称 = {

属性名称1：属性值1,

属性名称2：属性值2,

……

函数名称：function（形参列表）{}

……

};

<script>
    
    //一、创建自定义对象
    var boy = {
        name:"小明",
        age:18,
        eat:function () {
            alert("吃饭")
        }
    }
    //二、调用测试
    alert(boy.name);//运行结果为弹窗出小明
    alert(boy.eat())//运行结果为弹窗出吃饭
    //还有弹窗出来一个默认值undefined，因为age还没有被调用
    
</script>

12.BOM

简介：全称为：Browser Object Model—–浏览器对象模型

JS将浏览器的各个组成部分封装为对象

参考的w3school网站：JavaScript Window – 浏览器对象模型

组成：

Window：浏览器窗口对象

Navigator：浏览器对象

Screen：屏幕对象

History：历史记录对象

Location：地址栏对象

（1）window对象

之前一直用的alert弹窗语句完整写法就是这样。通过window对象还可以获取其他4个BOM对象

常用的方法

alert()

显示一段话和带有一个确认按钮的警告框

<script>
    //window浏览器窗口对象
    window.alert("666");//运行结果为弹窗出来666
</script>

confirm()

显示带有一段消息以及确认按钮和取消按钮的对话框

<script>
    //确认取消按钮，点击确定按钮会返回true,取消会返回false
    var b = confirm("你确定执行吗？");

    //扩展代码
    if (b){
        //可以写上逻辑代码
        alert("6666")
    }
</script>

setTimeout()——单次定时器

在指定的毫秒数后调用函数或者计算表达式。在一定时间后执行一个function，只执行一次

<script>

    //单次定时器，只执行一次
    setTimeout(function (){
        alert("666")
    },3000);//运行结果为3秒后弹窗出来666一次
    
</script>

setInterval()—-循环定时器

按照指定的周期（毫秒）来调用函数或者计算表达式。在一定时间后执行一个function，循环执行

<script>

    //循环定时器，循环执行
    setInterval(function (){
        alert("快乐")
    },2000);//运行结果为每2秒执行一次快乐，一直循环

</script>

（2）History历史记录对象

使用window.history获取，其中的window可以忽略

语法为：

history.方法（）；

常用的方法

返回网页的上一步：history.back();

进入下一个网页：history.forward();

（3）Location地址栏对象

使用window.Location获取，其中的window可以忽略

语法为：

Location.方法（）;

常用的方法

跳转到指定的网页：

跳转到百度的例子

location.href=”https://www.baidu.com”

13.DOM

简介：全称为：Document Object Model —–文档对象模型。是w3c（万维网联盟）的标准。DOM定义了访问HTML和XML文档的标准

将标记语言的各个组成部分封装成对象

（1）DOM树

（2）DOM的作用

JS通过DOM，就能够对HTML进行操作了。

改变HTML元素的内容————–方法.innerHTML=”改变后”

改变HTML元素的样式（CSS）——–方法.style.样式方法=”样式”

对HTML DOM事件作出反应

添加和删除HTML元素

（3）DOM大全

1.核心DOM：针对任何结构化文档的标准模型

⚪Document：整个文档对象

⚪Element：元素对象

获取：使用Document对象来获取

<body>
<!--测试标签1-->
<img id="light" src="D:\图片\壁纸\111.jpg" >

<!--测试标签2-->
<div class="cla">云边的快乐猫</div>

<!--测试标签3-->
<input type="checkbox" name="hobby">吃
<input type="checkbox" name="hobby">睡

<!--二、以下是调用测试上面的-->
<script>
    //测试1
    //getElementById:根据id属性值获取，返回一个Element对象
    var img = document.getElementById("light");
    alert(img);//弹窗运行结果为[object HTMLImageElement]

    //测试2
    //getElementsByTagName：根据标签名称获取，返回Element对象数组
    var divs = document.getElementsByTagName("div");
    //遍历访问数组
    for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);//弹窗运行结果为[object HTMLDivElement]
    }

    //测试3
    //getElementsByName：根据name属性值获取，返回Element对象数组
    var hobbys = document.getElementsByName("hobby");
    for (let i = 0; i < hobbys.length; i++) {
        alert(hobbys[i]);//弹窗结果运行为[object HTMLInputElement]和[object HTMLInputElement]
    }

    //测试4
    //getElementsByClassName，根据class属性值获取，返回Element对象数组
    var clss = document.getElementsByClassName("cls");
    for (let i = 0; i < clss.length; i++) {
        alert(clss[i]);
    }
    
</script>

</body>

⚪Attribute：属性对象

⚪Text：文本对象

⚪Comment：注释对象

2.XML DOM：针对XML文档的标准模型

3.HTML DOM：针对HTML文档的标准模型

14.事件监听

简介：事件：HTML事件是发生在HTML元素上的”事情” 。比如按钮被点击、鼠标移到元素上、按下键盘按键。

事件监听：JavaScript可以在事件被侦测到时执行代码

（1）事件绑定

方式一、通过HTML标签中的事件属性进行绑定—–不怎么推荐，因为耦合度高

方式二、通过DOM元素属性进行绑定

<body>

<!--HTML代码-->
<!--按钮1-->
<input type="button" value="点我" onclick="on()"><br>
<!--按钮2-->
<input type="button" value="再点我" id="btn">



    <!--JS代码-->
<script>
    //方式一
    function on(){
    alert("我被点了");
}

    //方式二
    document.getElementById("btn").onclick=function (){
    alert("我也被点了");
    }
</script>

</body>

（2）常见事件

参考w3sccool:HTML DOM 事件

常用的有：元素失去焦点、获得元素焦点

15.正则表达式

简介：正则表达式定义了字符串的组成规则，一般用来进行验证使用。非常的方便

语法：

^：表示开始

$：表示结束

[]：代表某个范围内的单个字符，比如[0~9]单个数字字符

.：代表任意单个字符，除了换行和结束符

\w：代表单词字符：字母、数字、下划线

\d：代表数字字符，相当于[0~9]

量词

+：至少一个

*：零个或者多个

？：零个或者一个

{x}：x个

{m}：至少m个

{m，n}：至少m个，最多n个