# day02.JavaScript脚本语言 # 第一章.JS介绍 ```java 1.脚本语言：JavaScript是一种解释型的脚本语言。不同于C、C++、Java等语言先编译后执行, JavaScript不会产生编译出来的字节码文件，而是在程序的运行过程中对源文件逐行进行解释； 2.基于对象：JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是面向对象的三大特性：『封装』、『继承』、『多态』中，JavaScript能够实现封装，可以模拟继承，不支持多态，所以它不是一门面向对象的编程语言； 3.弱类型：JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型； 4.事件驱动：JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应； 5.跨平台性：JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持； ``` ## 1.什么是JS ```JAVA 1.概述:写在页面上的脚本语言 2.作用:让页面动起来,提高用户的体验,提高页面和用户的交互性 ``` 1735012006442

## 2.JS三大组成部分 | 组成部分 | 作用 | | ----------- | ------------------------------------------------------------ | | ECMA Script | 所有脚本语言规范，构成了js的语法基础 | | BOM | Browser Object Model 浏览器对象模型，用来操作浏览器中各个对象 | | DOM | Document Object Model 文档对象模型，用来操作网页中的各个元素(标签)
获取标签操作标签属性(获取属性的值，或者为属性赋值) 操作标签体的文本部分 | ## 3.网页中各技术的作用 | 技术 | 作用 | | ---- | ------------------------------- | | html | 构建网页,展示数据 | | css | 美化页面 | | js | 让页面动起来,提高和用户的互动性 | # 第二章.JS入门 ## 1.案例入门 ```java 需求: 使用js在网页上输出5个HelloWorld ``` ```html js入门 ``` > script标签放哪里都可以 ## 2.JS注释 1735025377729

# 第三章.JS的两种引入方式 ## 1.script代码引入1_内部引入 ```html 1.内部引入:在html中使用script标签 ``` ```html js入门 ``` ## 2.script代码引入2_外部引入 ```java 1.创建一个js文件，在js文件中写js代码，然后在当前页面引入js文件 ``` ```js for (var i = 0; i < 5; i++) { //在浏览器的控制台上输出 console.log("helloworld"+i); } ``` ```html js入门 ``` # 第四章.JS的三种输出方式 ```java 1.alert("内容") -> 以弹框的形式输出，有阻塞效果，弹框不完事，后面代码不会执行 2.document.write("输出内容") -> 页面输出 3.console.log("输出内容") -> 浏览器控制台输出 4.三种输出方式的区别: alert和console.log如果输出内容中是标签,标签不生效 document.write()如果输出内容是标签,标签是生效的 ``` ```html 三种输出方式 ``` > 在vscode软件中添加代码块快捷键: > > 1735028817480

> > ```java > "Print to console": { > "prefix": "log", > "body": [ > "console.log($1);" > ], > "description": "Log output to console" > }, > > "Print out fori": { > "prefix": "fori", > "body": [ > "for (var i = 0; i < $1; i++) {", > " $2$0", > "}" > ], > "description": "Output Loop 'fori'" > }, > > "Print out dw": { > "prefix": "dw", > "body": [ > "document.write($2$0);" > ], > "description": "Output Loop 'dw'" > } > ``` # 第五章.JS的基本使用 ## 1.JS的数据类型 ```java 1.java中的数据类型分为:基本类型(4类8种)和引用类型(类,数组,接口,枚举,注解,Record) 2.但是js中不用分那么细,js中的类型有6种 3.如何判断类型: typeof 变量名 ``` | 关键字 | 说明 | | --------- | ----------------------- | | number | 数字类型 | | boolean | 布尔型:true或者false | | string | 字符串类型: "" '' `` | | object | 对象类型 | | undefined | 未定义类型 | | function | 函数类型 | ```HTML js数据类型 ``` > | null与undefined的区别 | 说明 | > | --------------------- | ----------------------------------- | > | null | 属于object类型,但是没有我们想要的值 | > | undefined | 没有为其赋值 | ## 2.JS的变量定义 ```java 1.定义格式: var let const(相当于java中的final,定义常量的) var 变量名 = 值 let 变量名 = 值 const 变量名 = 值 ``` ```html 变量的定义 ``` > var和let的区别: > > ```java > var的作用范围大 > let的作用范围小 > ``` > > ```html > > > > > var和let的区别 > > > > > > > ``` ## 3.常用的运算符 ### 3.1.算术运算符(和java语言一样) 算术运算符用于执行两个变量或值的算术运算 ### 3.2.赋值运算符(和Java一样) 赋值运算符用于给JavaScript 变量赋值 1599555098306

### 3.3.比较运算符比较运算符用于逻辑语句的判断，从而确定给定的两个值或变量是否相等。 1599555116586

数字可以与字符串进行比较，字符串可以与字符串进行比较。字符串与数字进行比较的时候会先把字符串转换成数字然后再进行比较 ```html js运算符 ``` ### 3.4.逻辑运算符(跟Java一样) 逻辑运算符用来确定变量或值之间的逻辑关系，支持短路运算 1599555131434

js中逻辑运算符不存在单与&、单或| ### 3.5.三元运算符(跟java一样) 1599555142303

### 3.6.小结 - 运算符 === 有什么作用？ ```java 恒等于,既比较值,还比较类型 ``` ## 4.JS流程控制语句 ```java js中的for,while,if,switch和Java一样,不再阐述 ``` ## 5.JS内置对象_数组 ### 5.1.Array数组 #### 5.1.1.数组的定义 ```java 1.var/let 数组名 = new Array() -> 创建一个长度为0的空数组 2.var/let 数组名 = new Array(长度) -> 创建一个指定长度的空数组 3.var/let 数组名 = new Array(元素1,元素2...) -> 创建一个有指定元素的数组 4.var/let 数组名 = [元素1,元素2...] ->创建数组,直接给元素->简化形式 ``` ```html js中的数组 ``` #### 5.1.2.数组特点 ```java 1.js中数组中的元素类型可以不一致 2.js中的数组定义完之后,后续可以改变长度 3.js中的数组里面有函数 ``` ```html js中的数组 ``` #### 5.1.3.数组的函数 ```java concat(数组)数组拼接 reverse()->数组反转 join(规则):将一个数组通过分隔符拼接成一个字符串,与字符串中的split功能相反 sort()排序，根据字符集进行排序。如果希望通过数值大小排序，需要给sort函数传递比较器：sort((a, b) => a - b) pop():删除数组中最后一个元素,返回的是被删除的元素 push():往数组最后添加一个或者多个元素 ``` ```html js中数组的方法 ``` #### 5.1.4.数组的遍历 ```java 1.普通for遍历 for(var i = 0;i<数组名.length;i++){ } 2.增强for遍历: for(var 变量名 of 数组名){ } ``` ```html 数组的遍历 ``` ## 6.JS函数 ### 6.1.函数介绍 ```java 1.概述:相当于java中的方法 2.分类: a.命名函数:函数有函数名 function 函数名(参数){ 方法体 } b.匿名函数:没有函数名 function(参数){ 方法体 } 3.注意: a.js中的函数,参数不需要指定数据类型,连var都不要,直接写参数名即可 b.js中的函数不需要声明具体的返回值类型,有没有返回值取决于方法体中写不写return ``` ### 6.2.函数定义方式1_命名函数 ```java function 函数名(参数){ 方法体 } ``` ```html 命名函数 ``` ### 6.3.函数定义方式2_匿名函数 ```java function(参数){ 方法体 } 注意:匿名函数单独使用没有意义,都是和js事件绑定在一起使用的 ``` ```html 匿名函数 ``` ### 6.4.JS函数没有重载 ```java js中的函数没有方法的重载,如果函数名相同,后面的会把前面的函数覆盖掉 ``` ```html js中的函数没有重载 ``` # 第六章.BOM对象 ```java BOM:浏览器对象模型,主要操作浏览器上的控件的 ``` ## 1.BOM内置对象_window对象 ### 1.1.确认框弹窗 ```java 1.confirm("确认框的提示信息") -> 结果是boolean型的 a.如果点击确认按钮,此函数返回true b.如果点击取消按钮,此函数返回false ``` ```html 确认框 ``` ### 1.2.操作地址栏_页面跳转 ```java location.href = "地址" ->控制浏览器地址栏的 ``` ```html 地址栏 ``` > 使用window对象中的方法，可以省略window # 第七章.DOM对象 ```java 1.概述:文档对象模型 2.作用:操作html页面上的标签的 a.操作标签的属性 -> 获取属性值,为属性赋值 b.操作标签的标签体-> 获取标签体,为标签体赋值 ``` ```html DOM对象百度一下

标题标签

```

## 1.DOM对象_查找标签方法 ```java document.getElementById("id") 根据标签中的id值获取标签对象,由于id要求唯一,所以返回单个标签对象 document.getElementsByTagName("标签名") 根据标签名,获取一组标签,返回的是数组 document.getElementsByName("name属性值") 根据标签中的name的属性值获取标签对象,返回数组 document.getElementsByClassName("class属性值")根据标签中的class的值获取一组标签,返回的是数组 ``` ```html 获取标签对象

根据id获取标签对象

根据标签名获取标签对象1

根据标签名获取标签对象2

根据name值获取标签对象1

根据name值获取标签对象2

根据class值获取标签对象1

根据class值获取标签对象2

``` ```java 扩展: document.querySelector(CSS选择器) 通过css选择器获取一个标签.如:"#id",".类名","标签名" document.querySelectorAll(CSS选择器) 通过css选择器获取一组标签,返回数组 ``` ```html 获取标签对象

根据id获取标签对象

根据标签名获取标签对象1

根据标签名获取标签对象2

根据name值获取标签对象1

根据name值获取标签对象2

根据class值获取标签对象1

根据class值获取标签对象2

``` ## 2.属性操作 | 需求 | 操作方式 | | -------------- | ------------------------ | | 为标签属性赋值 | 标签对象.属性名 = 属性值 | | 获取标签属性值 | 标签对象.属性名 | ```html 操作标签属性百度 ``` ## 3.标签体操作 | 需求 | 操作方式 | | ------------ | ------------------------------------------------------------ | | 获取标签体 | 标签对象.innerHTML
标签对象.innerText | | 为标签体赋值 | 标签对象.innerHTML = 标签体内容
标签对象.innerText = 标签体内容 | ```java innerText和innerHTML区别: 相同点:都可以操作标签体不同点:如果使用innerText给标签体设置子标签,是不生效的如果使用innerHTML给标签体设置子标签,会生效 ``` ```html 操作标签体我是span1 ``` ```html 操作标签体我是span1 ``` ## 4.标签添加和删除 | API | 功能 | | ---------------------------------------- | ------------------------------------------------------------ | | document.createElement("标签名") | 创建元素节点并返回被创建的标签对象，但不会自动添加到文档中,需要用到appendChild函数将创建的标签添加到指定的标签中 | | 标签对象.appendChild(ele) | 将ele添加到标签对象所有子节点后面 | | parentEle.insertBefore(newEle,targetEle) | 将newEle插入到targetEle前面-> parentEle指的是父标签 | | parentEle.replaceChild(newEle, oldEle) | 用新节点替换原有的旧子节点 -> parentEle指的是父标签 | | element.remove() | 删除某个标签,element指的是要删除的标签对象 | ```html 标签添加和删除

北京
上海
深圳
广州

``` ```html 标签的添加和删除

北京
上海
深圳
广州

``` # 第八章_JS事件 ## 1.JS事件介绍 ```java 1.作用:用于监听用户在页面上做的操作的 2.大白话解释: 我们在页面上做的操作都对应一个事件, 至于操作被事件监听到了之后要干啥,需要让这个事件绑定的一个函数,在函数中实现具体的操作 ``` ## 2.设置JS事件的两种方式 ```javascript 1.在标签上绑定事件,让其调用一个函数,在下面实现这个函数 2.先获取标签对象,然后绑定某个事件,然后让这个事件再绑定一个匿名函数 document.getElementById("标签中的id属性值").事件 = function(){ 方法体 } ``` ```html 事件初体验

``` ```html 事件的初体验

``` ## 3.鼠标点击事件 ```java onclick:单击事件 ondblclick:双击事件 ``` ```html 点击事件姓名:
姓名:
``` ```html 点击事件姓名:
姓名:
``` ## 4.焦点事件 ```java onfocus:得到焦点 onblur:失去焦点 ``` ```html 焦点事件用户名: ``` ## 5.改变事件 ```javascript 1.onchange:改变事件-> 当一个框中的内容改变了,就会触发onchange事件 2.this: a.this在哪个标签对象绑定的事件中使用,this就代表哪个标签对象 b.如果this直接放到标签中使用,那么this就直接代表当前所在标签对象 ``` ```html 改变事件

将字母转成大写: ``` ```html 改变事件

将字母转成大写: ``` # 第九章.JSON ## 1.Json介绍 ```java (JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换格式。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。 ``` 1745052147338

## 2.Json的数据格式 ```java 1.数组格式：[obj,obj,obj...]，使用中括号包裹，数组的元素可以是任意类型，多个元素之间逗号分开。 2.对象格式：{"key1":obj,"key2":obj,"key3":obj...}，使用大括号包裹，对象采用键值对形式，键必须是字符串类型，值可以是任意类型，多个键值对之间逗号分开。 3.数组和对象之间可以相互嵌套 ``` ## 3.Json数据解析 ### 3.1.json数组 ```html json数组 ``` ### 3.2.json对象 ```html json对象 ``` ### 3.3.json数组嵌套对象 ```html 数组嵌套对象 ``` ### 3.4.json对象嵌套数组 ```html 对象嵌套数组 ``` ### 3.5.json对象嵌套数组_多个键值对 ```html 对象嵌套数组,多个键值对 ``` ### 3.6.JSON和字符串之间的转换 #### 3.6.1.json转成string ```js var jsonObj = {"stuName":"tom","stuAge":20}; var jsonStr = JSON.stringify(jsonObj); console.log(typeof jsonObj); // object console.log(typeof jsonStr); // string ``` #### 3.6.2.string转成json ```js jsonObj = JSON.parse(jsonStr); console.log(jsonObj); // {stuName: "tom", stuAge: 20} ``` # 第十章.正则表达式 ## 1.正则表达式概念 ```java 1.什么是正则表达式:字符串表示的匹配规则 2.作用:主要用于校验 3.比如:校验一个QQ号 a.不能是0开头 if(startsWith("0")) b.只能是数字 if(字符>='0' && 字符<='9') c.5-15位 if(字符串.length()>=5 && 字符串.length()<=15) 正则:[1-9][0-9]{4,14} []代表区间 ``` | 表达式 | 描述 | | :---------: | :----------------------------------------------------------- | | [a-z] | 这个字符必须是小写字母 a-z [] 代表区间 | | [abc] | 字符必须是abc | | [0-9] | 这个字符必须是数字 | | [a-zA-Z0-9] | 这个字符必须是字母或者是数字 [a-zA-Z0-9] | | [^a-z] | 这个字符不是小写字母 []中写^代表取反 | | [\d] | 等同于[0-9] | | [\w] | 等同于[a-zA-Z_0-9] 字母、数字、下划线 | | [\D] | 等同于`[^0-9]` | | [\W] | 等同于`[^a-zA-Z_0-9]` | | . | 代表匹配任意字符，若只是想代表普通数据`.` 需要使用转义字符来表示`\.` | | X* | X这个字符可以出现零次或者多次 [0-9]* | | X? | X这个字符可以出现零次或者一次 [0-9] ? | | X+ | X这个字符可以出现一次或者多次 [0-9] + | | X{m} | X这个字符出现次数正好m次 [0-9]{4} | | X{m, } | X这个字符出现次数至少m次 [0-9]{4, } | | X{m, n} | X这个字符出现次数至少m次,最多n次 [0-9]{3,5} | | (X)+ | ()括号代表X所表示的内容作为一组数据出现；()括号后面的+号，代表这组数据可以出现一次或者多次 (abc)+ -->代表的是abc可以连续出现一次或多次 | | ^X | ^匹配开头 | | X$ | $匹配结尾 | > ^如果在[]里面，代表取反 > > ^如果在[]外面，代表以什么开头 > > $：代表以什么什么结尾 ## 2.正则表达式的创建和使用 ```java 1.定义方式1: var 变量名 = /正则表达式/ 2.定义方式2: var 变量名 = new RegExp("正则表达式") ``` | 说明 | 方法 | | ----------------------------------- | ---------------------------------- | | 正则表达式.test(被匹配的字符串内容) | 判断字符串是否符合指定的正则表达式 | | string中的方法:match(正则表达式) | 根据正则表达式获取对应的字符串内容 | ```html 正则表达式 ``` ## 3.模糊匹配和精确匹配 ```html 正则表达式 ``` ## 4.正则表达式匹配模式 | 修饰符 | 描述 | | :----- | :--------------- | | i | 匹配时忽略大小写 | ```java var 变量名 = /正则表达式/匹配模式 ``` ```HTML 正则表达式 ``` ## 5.常用正则表达式 | 需求 | 正则表达式 | 含义 | | -------- | --------------------------------------------------- | ------------------------------------------------------------ | | 用户名 | /^[a-zA-Z_][a-zA-Z_-0-9]{5,9}$/ | 只能以字母或者'_'开头，后面的内容可以是字母、数字、'_'、'-'都行，整个字符串只能有6-10位 | | 密码 | /^[a-zA-Z0-9_-\@#&*]{6,12}$/ | 密码只能由字母、数字、'_'、'-'、'@'、'#'、'\'、'&'、'*'组成，总共是6-12位 | | 前后空格 | /^\s+\|\s+$/g | 匹配开头的空格或者结尾的空格 | | 电子邮箱 | /^[a-zA-Z0-9_.-]+@([a-zA-Z0-9-]+[.]{1})+[a-zA-Z]+$/ | 多个字母、数字、'.'、'-'加上@多个数字、字母、'-'再加上'.'再加上多个字母 |