4-JavaWeb - 第三章 JavaScript

2301_78573451

719人浏览 · 2025-12-29 16:11:19

2301_78573451 · 2025-12-29 16:11:19 发布

第三章 JavaScript

一 JS简介

1.1 JS起源

JS是一种运行于浏览器端上的脚本语言,可以实现网页动态变化和动画特效。

1.2 JS 组成部分

JavaScript的组成包含 BOM、ECMAScript、DOM。

1.3 JS的引入方式

1.3.1 内部脚本方式引入

说明

在页面中,通过一对script标签引入JS代码

script代码放置位置具备一定的随意性,一般放在head标签中居多

EG：

<head>

        <script>
        function suprise(){
        alert("Hello,我是惊喜")
        }
        </script>

</head>

1.3.2 外部脚本方式引入

说明

内部脚本仅能在当前页面上使用,代码复用度不高

可以将脚本放在独立的js文件中,通过script标签引入外部脚本文件

一对script标签要么用于定义内部脚本,要么用于引入外部js文件,不能混用 [ 总结：一对script标签，一次只能干一件事 ]

一个html文档中,可以有多个script标签

抽取脚本代码到独立的js文件中

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

</head>

二 JS的数据类型和运算符

2.1 JS的数据类型

1- 数值类型

数值类型统一为 number,不区分整数和浮点数

2- 字符串类型

字符串类型为 string 和JAVA中的String相似,JS中不严格区分单双引号,都可以用于表示字符串

3- 布尔类型

布尔类型为boolean 和Java中的boolean相似,但是在JS的if语句中,非空字符串会被转换为'真',非零数字也会被认为是'真'

4- 引用数据类型

引用数据类型对象是Object类型, 各种对象和数组在JS中都是Object类型

5- function类型

JS中的各种函数属于function数据类型

6- 命名未赋值

js为弱类型语言 , 统一使用 var 声明对象和变量 , 在赋值时才确定真正的数据类型,变量如果只声明没有赋值的话,数据类型为undefined

7- 赋予NULL值

在JS中,如果给一个变量赋值为null,其数据类型是Object, 可以通过typeof关键字判断数据类型

2.2 JS的变量

JS中的变量具有如下特征

1 弱类型变量,可以统一声明成var

2 var声明的变量可以再次声明

3 变量可以使用不同的数据类型多次赋值

4 JS的语句可以以; 结尾,也可以不用;结尾

5 变量标识符严格区分大小写

6 标识符的命名规则参照JAVA

7 如果使用了一个没有声明的变量,那么运行时会报uncaught ReferenceError: *** is not defined at index.html:行号:列号

8 如果一个变量只声明,没赋值,那么值是undefined

2.3 JS的运算符

1- 算数运算符 + - * / %

其中需要注意的是 / 和 %

/ 在除0时,结果是 Infinity（中文意思：无穷） ,而不是报错

% 在模0时,结果是 NaN,意思为 not a number ,而不是报错

2- 复合算数运算符 ++ -- += -= *= /= %=

符合算数运算符基本和JAVA一致,同样需要注意 /=和%=

在/=0时,结果是 Infinity ,而不是报错

在%=0时,结果是 NaN,意思为 not a number ,而不是报错

3- 关系运算符 > < >= <= == === !=

== 符号,如果两端的数据类型不一致,会尝试将两端的数据转换成number,再对比number大小

'123' 这种字符串可以转换成数字

true会被转换成1 false会被转换成0

=== 符号,如果两端数据类型不一致,直接返回false,数据类型一致在比较是否相同

4- 逻辑运算符 || &&

几乎和JAVA中的一样,需要注意的是,这里直接就是短路的逻辑运算符,单个的 | 和 & 以及 ^ 是位运算符

5- 条件运算符条件? 值1 : 值2

几乎和JAVA中的一样

6- 位运算符 | & ^ << >> >>>

和 java中的类似(了

三 JS的流程控制和函数

3.1 JS分支结构

1- if结构

这里的if结构几乎和JAVA中的一样,需要注意的是

if()中的非空字符串会被认为是 true

if()中的非零数字会被认为是 true

if('false'){        // 非空字符串 if判断为true
console.log(true)
}else{
console.log(false)
}
if(''){        // 长度为0字符串 if判断为false
console.log(true)
}else{
console.log(false)
}
if(1){        // 非零数字 if判断为true

}

2- switch结构

几乎和JAVA的语法一致

3.2 JS循环结构

1- while结构

几乎和JAVA一致

/* 打印99 乘法表 */
var i = 1;
while(i <= 9){
var j = 1;
while(j <= i){
document.write(j+"*"+i+"="+i*j+"     ");
j++;
}
document.write("<hr/>");
i++;
}

2- for循环

几乎和JAVA一致

/* 打印99 乘法表 */
for( var i = 1;i <= 9; i++){
for(var j = 1;j <= i;j++){
document.write(j+"*"+i+"="+i*j+"     ");
}
document.write("<hr/>");
}

3- foreach循环

迭代数组时,和 java 不一样

括号中的临时变量表示的是元素的索引,不是元素的值,

()中也不在使用: 分隔,而是使用 in 关键字

var cities =["北京","上海","深圳","武汉","西安","成都"]
document.write("<ul>")
for(var index in cities){
document.write("<li>"+cities[index]+"</li>")
}
document.write("</ul>")

3.3 JS函数声明

JS中的方法,多称为函数,函数的声明语法和JAVA中有较大区别

函数说明

函数没有权限控制符

不用声明函数的返回值类型,需要返回在函数体中直接return即可,也无需void关键字

参数列表中,无需数据类型

调用函数时,实参和形参的个数可以不一致 [多出来的实参视为无效]

声明函数时需要用function关键字

J函数没有异常列表

函数声明- 语法1

/*
语法1
function 函数名 (参数列表){函数体}
*/
function sum(a, b){
return a+b;
}
var result =sum(10,20);
console.log(result)

函数声明- 语法2

/*
语法2
var 函数名 = function (参数列表){函数体}
*/
var add = function(a, b){
return a+b;
}
var result = add(1,2);
console.log(result);

四 JS的对象和JSON

4.1 JS声明对象的语法

语法1

通过new Object()直接创建对象

var person =new Object();
// 给对象添加属性并赋值
person.name="张小明";
person.age=10;
person.foods=["苹果","橘子","香蕉","葡萄"];
// 给对象添加功能函数
person.eat= function (){
console.log(this.age+"岁的"+this.name+"喜欢吃:")
for(var i = 0;i<this.foods.length;i++){
console.log(this.foods[i])
}
}
//获得对象属性值
console.log(person.name)
console.log(person.age)
//调用对象方法
person.eat();

语法2

通过 {}形式创建对象

语法为 var person ={"属性名":"属性值","属性名","属性值","函数名":函数}

var person ={
"name":"张小明",
"age":10,
"foods":["苹果","香蕉","橘子","葡萄"],
"eat":function (){
console.log(this.age+"岁的"+this.name+"喜欢吃:")
for(var i = 0;i<this.foods.length;i++){
console.log(this.foods[i])
}
}
}
//获得对象属性值
console.log(person.name)
console.log(person.age)
//调用对象方法
person.eat();

4.2 JSON格式

简单来说,JSON 就是一种字符串格式,这种格式无论是在前端还是在后端,都可以很容易的转换成对象,所以常用于前后端数据传递

前后端传递数据

JSON字符串与对象之间的转换

通过JSON.parse()方法可以将一个JSON串转换成对象

通过JSON.stringify()方法可以将一个对象转换成一个JSON格式的字符串

4.3 JS常见对象

1- 数组

创建数组的四种方式

new Array() 创建空数组

new Array(5) 创建数组时给定长度

new Array(ele1,ele2,ele3,... ... ,elen); 创建数组时指定元素值

[ele1,ele2,ele3,... ... ,elen]; 相当于第三种语法的简写

数组的常见API

在JS中,数组属于Object类型,其长度是可以变化的,更像JAVA中的集合

EG:

concat()

2- Boolean对象
3- Date对象
4- Math
5- Number
6- String

五事件的绑定

5.1 什么是事件

HTML 事件可以是浏览器行为，也可以是用户行为。当这样一些行为发生时,可以自动触发对应的JS函数的运行,我们称之为事件发生。JS的事件驱动指的就是行为触发代码运行的这种特点。

5.2 常见事件

1- 鼠标事件

2- 键盘事件

3- 表单事件

4- 页面加载完毕事件

5.3 事件的绑定

1- 通过属性绑定

<head>
<meta charset="UTF-8">
<title>小标题</title>

<script>
function testDown1(){
console.log("down1")
}
function testDown2(){
console.log("down2")
}
function testFocus(){
console.log("获得焦点")
}

function testBlur(){
console.log("失去焦点")
}
function testChange(input){
console.log("内容改变")
console.log(input.value);
}
function testMouseOver(){
console.log("鼠标悬停")
}
function testMouseLeave(){
console.log("鼠标离开")
}
function testMouseMove(){
console.log("鼠标移动")
}
</script>
</head>

<body>
<input type="text"
onkeydown="testDown1(),testDown2()"
onfocus="testFocus()"
onblur="testBlur()"
onchange="testChange(this)"
onmouseover="testMouseOver()"
onmouseleave="testMouseLeave()"
onmousemove="testMouseMove()"
/>
</body>

说明

通过事件属性绑定函数,在行为发生时会自动执行函数

一个元素可以同时绑定多个事件

一个事件可以同时绑定多个函数

方法中可以传入 this对象,代表当前元素

2- 通过DOM编程绑定

<head>
<meta charset="UTF-8">
<title>小标题</title>

<script>
// 页面加载完毕事件,浏览器加载完整个文档行为 - onload
window.onload=function(){
var in1 =document.getElementById("in1");
// 通过DOM编程绑定事件
in1.onchange=testChange
}
function testChange(){
console.log("内容改变")
console.log(event.target.value);
}
</script>
</head>

<body>
<input id="in1" type="text" />
</body>

5.4 事件的触发

1- 行为触发

发生行为时触发

2- DOM编程触发

通过DOM编程,用代码触发,执行某些代码相当于发生了某些行为

六 BOM编程

6.1 什么是BOM

BOM是Browser Object Model的简写，即浏览器对象模型。

BOM由一系列对象组成，是访问、控制、修改浏览器的属性和方法(通过window对象及属性的一系列方法控制浏览器行为的一种编程)

BOM没有统一的标准(每种客户端都可以自定标准)。

BOM编程是将浏览器窗口的各个组成部分抽象成各个对象,通过各个对象的API操作组件行为的一种编程

BOM编程的对象结构如下:

window 顶级对象,代表整个浏览器窗口

location对象 window对象的属性之一,代表浏览器的地址栏

history对象 window对象的属性之一,代表浏览器的访问历史

screen对象 window对象的属性之一,代表屏幕

navigator对象 window对象的属性之一,代表浏览器软件本身

document对象 window对象的属性之一,代表浏览器窗口目前解析的html文档

console对象 window对象的属性之一,代表浏览器开发者工具的控制台

localStorage对象 window对象的属性之一,代表浏览器的本地数据持久化存储

sessionStorage对象 window对象的属性之一,代表浏览器的本地数据会话级存储

6.2 window对象的常见属性(了解)

6.3 window对象的常见方法(了解)

6.4 通过BOM编程控制浏览器行为演示

A- 三种弹窗方式

1- 普通信息提示框

window.alert("提示信息");

2- 确认框

confirm("确定要删除吗?"); [ window. 可以省略不写]

3- 信息输入对话框

prompt("请输入昵称","例如:张三");

B- 页面跳转

通过BOM编程地址栏url切换

window.location.href="http://www.xxx.com"

备注：

href是location的属性，不是方法。

6.5 通过BOM编程实现会话级和持久级数据存储

sessionStorge

会话级数据 : 内存型数据,是浏览器在内存上临时存储的数据,浏览器关闭后,数据失去,通过window的sessionStorge属性实现。

// 让浏览器存储一些会话级数据
window.sessionStorage.setItem("sessionMsg","sessionValue")

localStorge

持久级数据 : 磁盘型数据,是浏览器在磁盘上持久存储的数据,浏览器关闭后,数据仍在,通过window的localStorge实现。

// 让浏览器存储一些持久级数据
window.localStorage.setItem("localMsg","localValue")

查看数据状态

在F12开发者工具的应用程序栏,可以查看数据的状态

七 DOM编程

7.1 什么是DOM编程

简单来说:

DOM(Document Object Model)编程就是使用 document对象 的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程。

document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。

根据HTML代码结构特点,document对象本身是一种树形结构的文档对象。

树形结构 - dom树

dom树中节点的类型

node 节点,所有结点的父类型

element 元素节点,node的子类型之一,代表一个完整标签

attribute 属性节点,node的子类型之一,代表元素的属性

text 文本节点,node的子类型之一,代表双标签中间的文本

DOM编程其实就是用 window对象的 document属性的相关API完成对页面元素的控制的编程。

7.2 获取页面元素的几种方式

EG:

功能 - 根据id值查询

                API - document.getElementById(“id值”)

返回值 -  一个具体的元素节

7.3 操作元素属性值

A- 属性操作

1- 读取属性值

元素对象.属性名

2- 修改属性值

元素对象.属性名=新的属性值

B- 内部文本操作

1- 获取或者设置标签体的文本内容

element.innerText

2- 获取或者设置标签体的内容

element.innerHTML [eg：比文本内容多一个html ]

7.4 增删元素

八正则表达式

8.1 正则表达式简介

8.2 正则表达式体验

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

技术分享：Nvidia NOOA——一个Python类就是一个AI Agent

AI Agent 工程化正在进入深水区。怎么让 Agent 像普通软件一样被 review、被 debug、被审计。Nvidia NOOA 给出的答案是一行代码的审美——你敢不敢把全部复杂性塞进一个 Python 类里？有人觉得它干净得像个艺术品，也有人觉得它只是把混乱藏进了漂亮的抽屉里。至少，当无数团队还在为"提示模板放哪儿"这种问题内耗时，有人先甩出了一个极简的方案。模型之外的挽具怎么设计，已

AI Agent技术社区

记忆革命：三级分层架构如何让AI Agent“过目不忘”？

AI Agent技术社区

英辰朗迪AI获客每日AI精选（2026.08.05）

据行业公开分享，国内已有 8.1 亿用户习惯用 AI 获取信息、日均 AI 搜索量达 45 亿次，但约 90% 企业尚未布局 AI 流量阵地，窗口期约为 2—3 年。：华为诺亚方舟实验室开源面向 AI Agent 的可迁移、自演进记忆操作层 MindMemOS，将记忆从单个 Agent 中解耦，以实体、属性、时间三维结构保存最新状态与完整演化轨迹，并通过 MindSchema、Feedback 挖

AI Agent技术社区

所有评论(0)

查看更多评论

2301_78573451

@2301_78573451

已为社区贡献1条内容

4-JavaWeb - 第三章 JavaScript

2301_78573451

第三章 JavaScript

一 JS简介

1.1 JS起源

1.2 JS 组成部分

1.3 JS的引入方式

1.3.1 内部脚本方式引入

1.3.2 外部脚本方式引入

二 JS的数据类型和运算符

2.1 JS的数据类型

1- 数值类型

2- 字符串类型

3- 布尔类型

4- 引用数据类型

5- function类型

6- 命名未赋值

7- 赋予NULL值

2.2 JS的变量

2.3 JS的运算符

1- 算数运算符 + - * / %

2- 复合算数运算符 ++ -- += -= *= /= %=

3- 关系运算符 > < >= <= == === !=

4- 逻辑运算符 || &&

5- 条件运算符 条件? 值1 : 值2

6- 位运算符 | & ^ << >> >>>

三 JS的流程控制和函数

3.1 JS分支结构

1- if结构

2- switch结构

3.2 JS循环结构

1- while结构

2- for循环

3- foreach循环

3.3 JS函数声明

函数声明- 语法1

函数声明- 语法2

四 JS的对象和JSON

4.1 JS声明对象的语法

语法1

语法2

4.2 JSON格式

4.3 JS常见对象

1- 数组

2- Boolean对象

3- Date对象

4- Math

5- Number

6- String

五 事件的绑定

5.1 什么是事件

5.2 常见事件

1- 鼠标事件

2- 键盘事件

3- 表单事件

4- 页面加载完毕事件

5.3 事件的绑定

1- 通过属性绑定

2- 通过DOM编程绑定

5.4 事件的触发

1- 行为触发

2- DOM编程触发

六 BOM编程

6.1 什么是BOM

6.2 window对象的常见属性(了解)

6.3 window对象的常见方法(了解)

6.4 通过BOM编程控制浏览器行为演示

A- 三种弹窗方式

1- 普通信息提示框

2- 确认框

3- 信息输入对话框

B- 页面跳转

6.5 通过BOM编程实现会话级和持久级数据存储

sessionStorge

localStorge

查看数据状态

七 DOM编程

7.1 什么是DOM编程

7.2 获取页面元素的几种方式

7.3 操作元素属性值

5- 条件运算符条件? 值1 : 值2

五事件的绑定

八正则表达式