JavaWeb（三）JavaScript详细讲解

湮w2026-07-09 9:41

JavaScript

文档查询：

W3School 在线教程

1.引入方式

第一种方式：内部脚本，将JS代码定义在HTML页面中

  • JavaScript代码必须位于<script></script>标签之间

  • 在HTML文档中，可以在任意地方，放置任意数量的<script>

  • 一般会把脚本置于<body>元素的底部，可改善显示速度

例子：

sql 复制代码 
<script>
    alert("Hello JavaScript")
</script>

第二种方式：外部脚本将， JS代码定义在外部JS文件中，然后引入到HTML页面中

  • 外部JS文件中，只包含JS代码，不包含<script>标签

  • 引入外部js的<script>标签，必须是双标签

例子：

sql 复制代码 
<script src="js/demo.js"></script>

注意：demo.js中只有js代码，没有<script>标签。

2.基础语法

2.1 书写语法

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

  2. 每行结尾的分号可有可无

  3. 大括号表示代码块

  4. 注释：

    1. 单行注释：// 注释内容

    2. 多行注释：/* 注释内容 */

js中3钟输出语句：

api 描述
window.alert() 警告框，window.可以省略，即alert()
document.write() 在HTML 页面输出内容
console.log() 写入浏览器控制台

2.2 变量

js中主要通过如下3个关键字来声明变量：

关键字 解释
var 早期ECMAScript5中用于变量声明的关键字
let ECMAScript6中新增的用于变量声明的关键字，相比较var，let只在代码块内生效
const 声明常量的，常量一旦声明，不能修改

在js中声明变量还需要注意如下几点：

  • JavaScript 是一门弱类型语言，变量可以存放不同类型的值

  • 变量名需要遵循如下规则：

    • 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）

    • 数字不能开头

    • 建议使用驼峰命名

var和let的区别：

  • var声明的变量的作用域是全局的，而且可以重复定义

  • let所声明的变量，只在 let关键字所在的代码块内有效，且不允许重复声明

2.3 数据类型和运算符

2.3.1 数据类型

虽然js是弱数据类型的语言，但是js中也存在数据类型，js中的数据类型分为 ：原始类型 和 引用类型，具体有如下类型：

数据类型 描述
number 数字（整数、小数、NaN(Not a Number)）
string 字符串，单双引皆可
boolean 布尔。true，false
null 对象为空
undefined 当声明的变量未初始化时，该变量的默认值是 undefined
  • 使用typeof函数可以返回变量的数据类型
2.3.2 运算符

js中的运算规则绝大多数还是和java中一致的，具体运算符如下：

运算规则 运算符
算术运算符 + , - , * , / , % , ++ , --
赋值运算符 = , += , -= , *= , /= , %=
比较运算符 > , < , >= , <= , != , == , === 注意 == 会进行类型转换，=== 不会进行类型转换
逻辑运算符 && , || , !
三元运算符 条件表达式 ? true_value: false_value

==和===是有区别的：

  • ==：只比较值是否相等，不区分数据类型，哪怕类型不一致，==也会自动转换类型进行值得比较

  • ===：不光比较值，还要比较类型，如果类型不一致，直接返回false

2.3.3 数据类型转换

  1. 通过parseInt()函数来进行将其他类型转换成数值类型：

    1. 如果是纯数字字符串，直接转换成对应的数字

    2. 如果是非纯数字字符串，会把开始的最长数字子串转换成数字，如parseInt('123Afe2')的结果为123，但是parseInt('Afe2')的结果为NaN

  2. 通过Boolean()函数可以将其他类型转换成布尔类型：

    1. 除了0、null、undefined、""、NaN 会被认为是false，其他都会被认为是true

3.函数

JavaScript中的函数被设计为执行特定任务的代码块，通过关键字function来定义。

3.1 第一种定义格式

javascript 复制代码 
function 函数名(参数1,参数2..){
    要执行的代码
}

//示例
function add(a, b){
    return a + b;
}

注意点：

  • 形式参数不需要声明类型，并且JavaScript中不管什么类型都是let或者var去声明，加上也没有意义。

  • 返回值也不需要声明类型，直接return即可

3.2 第二种定义格式

javascript 复制代码 
var 函数名 = function (参数1,参数2..){   
        //要执行的代码
}

JavaScript的流程控制语句if，switch，for等和java保持一致，这里不多阐述

4.JavaScript对象

JavaScript对象可以分为三类：

  • 基本对象，我们主要学习Array和JSON和String

  • BOM对象，主要是和浏览器相关的几个对象

  • DOM对象，JavaScript中将html的每一个标签都封装成一个对象

4.1 基本对象

4.1.1 Array对象

Array对象时用来定义数组的。常用语法格式有如下2种：

方式1：

javascript 复制代码 
var 变量名 = new Array(元素列表); 

//例如：
var arr = new Array(1,2,3,4); //1,2,3,4 是存储在数组中的数据（元素）

方式2：

javascript 复制代码 
var 变量名 = [ 元素列表 ]; 

//例如：
var arr = [1,2,3,4]; //1,2,3,4 是存储在数组中的数据（元素）

通过索引可以获取数组中的值：

javascript 复制代码 
arr[索引] = 值;

细节：

JavaScript中的数组长度是可变的，而且因为JavaScript是弱类型语言，所以数组可以存放各种类型的数据，例如：

javascript 复制代码 
var arr = [1,2,3,4];
arr[10] = 50;

console.log(arr[10]);        //50
console.log(arr[9]);        //undefined
属性和方法

属性：

属性 描述
length 设置或返回数组中元素的数量。

方法：

方法方法 描述
forEach() 遍历数组中的每个有值得元素，并调用一次传入的函数
push() 将新元素添加到数组的末尾，并返回新的长度
splice() 从数组中删除元素

  • length属性：可以用来获取数组的长度，可以借助这个属性，来遍历数组中的元素

  • forEach()函数：这个方法的参数，需要传递一个函数，而且这个函数接受一个参数，就是遍历时数组的值

javascript 复制代码 
//e是形参，接受的是数组遍历时的值
arr.forEach(function(e){
     console.log(e);
})

//在ES6中，引入箭头函数的写法，语法类似java中lambda表达式
arr.forEach((e) => {
     console.log(e);
})

  • push()函数：用于向数组的末尾添加元素，其中函数的参数就是需要添加的元素

  • splice()函数：用来删除数组中的元素，函数中填入2个参数。

    • 参数1：表示从哪个索引位置删除

    • 参数2：表示删除元素的个数

4.1.2 String对象

String对象的创建方式有2种：

方式1：

javascript 复制代码 
var 变量名 = new String("...") ;

//例如：
var str = new String("Hello String");

方式2：

javascript 复制代码 
var 变量名 = "..." ;

//例如：
var str = 'Hello String';
属性和方法

属性：

属性 描述
length 字符串的长度。

方法：

方法 描述
charAt() 返回在指定位置的字符。
indexOf() 检索字符串。
trim() 去除字符串两边的空格
substring() 提取字符串中两个指定的索引号之间的字符。

  • length属性：可以用于返回字符串的长度

  • charAt()函数：用于返回在指定索引位置的字符，函数的参数就是索引

  • indexOf()函数：用于检索指定内容在字符串中的索引位置，返回值是索引，参数是指定的内容

  • trim()函数：用于去除字符串两边的空格，并返回去除空格后的字符串

  • substring()函数：用于截取字符串，函数有2个参数

    • 参数1：表示从哪个索引位置开始截取，包含

    • 参数2：表示到哪个索引位置结束，不包含

4.1.3 JSON对象
自定义对象

在 JavaScript 中自定义对象特别简单，其语法格式如下：

javascript 复制代码 
var 对象名 = {
    属性名1: 属性值1, 
    属性名2: 属性值2,
    属性名3: 属性值3,
    ...
    函数名称: function(形参列表){}
};

我们可以通过如下语法调用属性：

javascript 复制代码 
对象名.属性名

通过如下语法调用函数：

javascript 复制代码 
对象名.函数名()
json对象

JSON对象：J avaS cript O bject Notation，JavaScript对象标记法，是通过JavaScript标记法书写的文本，其格式如下：

javascript 复制代码 
{
    "key":value,
    "key":value,
    "key":value
}

其中，key必须使用引号并且是双引号标记，value可以是任意数据类型。

例如我们可以直接百度搜索"json在线解析"，随便挑一个进入，然后编写内容如下：

javascript 复制代码 
{ "name": "李传播" }

JSON对象经常用来作为前后台交互的数据载体。如下图所示：前后台交互时，我们需要传输数据，但是java中的对象我们该怎么去描述呢？我们可以使用如图所示的xml格式，可以清晰的描述java中需要传递给前端的java对象。

但是xml格式存在如下问题：

  • 标签需要编写双份，占用带宽，浪费资源

  • 解析繁琐

所以我们可以使用json来替代，如下图所示：

复制代码
javascript 复制代码 
var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
alert(jsonstr.name);    //undefined

jsonstr是一个json字符串，不是json对象，所以结果是undefined，需要借助parse函数来进行json字符串和json对象的转换：

javascript 复制代码 
var obj = JSON.parse(jsonstr);
alert(obj.name);    //Tom

通过stringify函数可以将json对象再次转换成json字符串：

javascript 复制代码 
alert(JSON.stringify(obj));    //{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}

4.2 BOM对象

BOM的全称是Browser Object Model。JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能，可以通过操作BOM对象的相关属性或者函数来完成。

BOM中提供了如下5个对象：

对象名称 描述
Window 浏览器窗口对象
Navigator 浏览器对象
Screen 屏幕对象
History 历史记录对象
Location 地址栏对象
4.2.1 Window对象

window对象指的是浏览器窗口对象，是JavaScript的全部对象，所以对于window对象，我们可以直接使用，并且对于window对象的方法和属性，我们可以省略window，例如window.alert('hello')和alert('hello')是一样的。

window对象提供了获取其他BOM对象的属性：

属性 描述
history 用于获取history对象
location 用于获取location对象
Navigator 用于获取Navigator对象
Screen 用于获取Screen对象

也就是说我们要使用location对象，只需要通过代码window.location或者简写location即可使用

window也提供了一些常用的函数，如下表格所示：

函数 描述
alert() 显示带有一段消息和一个确认按钮的警告框。
comfirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。

  • alert()函数：弹出警告框，参数的内容就是警告框的内容

  • confirm()函数：弹出确认框，并且提供用户2个按钮，分别是确认和取消；用户点击确认时，返回true，点击取消时，返回false

  • setInterval(fn,毫秒值)：定时器，用于周期性的执行某个功能，并且是循环执行。该函数需要传递2个参数

    • fn：函数，需要周期性执行的功能代码

    • 毫秒值：间隔时间

javascript 复制代码 
var i = 0;
setInterval(function(){
     i++;
     console.log("定时器执行了"+i+"次");
},2000);
  • setTimeout(fn,毫秒值) ：定时器，只会在一段时间后执行一次功能。参数和上述setInterval一致
javascript 复制代码 
//定时器 - setTimeout -- 延迟指定时间执行一次 
setTimeout(function(){
        alert("JS");
},3000);

浏览器打开，3s后弹框，关闭弹框，发现再也不会弹框了。

4.2.2 Location对象

location是指代浏览器的地址栏对象，对于这个对象，我们常用的是href属性，用于获取或者设置浏览器的地址信息

javascript 复制代码 
//获取浏览器地址栏信息
alert(location.href);
//设置浏览器地址栏信息
location.href = "https://www.itcast.cn";

4.3 DOM对象

DOM：Document Object Model 文档对象模型，也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为

  • Document：整个文档对象

  • Element：元素对象

  • Attribute：属性对象

  • Text：文本对象

  • Comment：注释对象

DOM的作用是通过修改HTML元素的内容和样式等来实现页面的各种动态效果，HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。document对象提供的用于获取Element元素对象的api如下表所示：

函数 描述
document.getElementById() 根据id属性值获取，返回单个Element对象
document.getElementsByTagName() 根据标签名称获取，返回Element对象数组
document.getElementsByName() 根据name属性值获取，返回Element对象数组
document.getElementsByClassName() 根据class属性值获取，返回Element对象数组

  • document.getElementById()： 根据标签的id属性获取标签对象，id是唯一的，所以获取到是单个标签对象，例如document.getElementById('h1')

  • document.getElementsByTagName() : 根据标签的名字获取标签对象，同名的标签有很多，所以返回值是数组，例如document.getElementsByTagName('div')

  • document.getElementsByName() ：根据标签的name的属性值获取标签对象，name属性值可以重复，所以返回值是一个数组，例如document.getElementsByName('hobby')

  • document.getElementsByClassName() : 根据标签的class属性值获取标签对象，class属性值也可以重复，返回值是数组，例如document.getElementsByClassName('cls')

获取到标签了，可以通过参考书得到标签对象的属性来操作标签的内容，例如可以通过div标签对象的innerHTML属性来修改标签的内容

5.JavaScript事件

5.1 事件绑定

JavaScript对于事件的绑定提供了2种方式：

方式1：通过html标签中的事件属性进行绑定，例如一个按钮，我们对于按钮可以绑定单机事件，可以借助标签的onclick属性，属性值指向一个函数

html 复制代码 
<input type="button" id="btn1" value="事件绑定1" onclick="on()">
<script>
    function on(){
        alert("按钮1被点击了...");
    }
</script>

方式2：通过DOM中Element元素的事件属性进行绑定

html 复制代码 
<input type="button" id="btn2" value="事件绑定2">
<script>
        document.getElementById('btn2').onclick = function(){
            alert("按钮2被点击了...");
        }
</script>

事件绑定的函数，只有在事件被触发时，函数才会被调用

5.2 常见事件

事件属性名 说明
onclick 鼠标单击事件
onblur 元素失去焦点
onfocus 元素获得焦点
onload 某个页面或图像被完成加载
onsubmit 当表单提交时触发该事件
onmouseover 鼠标被移到某元素之上
onmouseout 鼠标从某元素移开
相关推荐
gcw10241 小时前
Cron专业工具：定时任务与开发办公的一站式在线工具箱
java·前端·数据库·工具·crontab·cron·spring cron
whaledown2 小时前
互联网大厂Java求职面试三轮提问详解（涵盖Spring Boot、微服务、Kafka等核心技术）
java·jvm·数据库·spring boot·微服务·面试·kafka
xixingzhe22 小时前
Spring 依赖注入
java·后端·spring
带刺的坐椅2 小时前
多 Agent 协作实战：任务编排与子代理系统
java·ai·llm·agent·solon·harness
木木子222 小时前
# 星座配对深度解析：Select 长列表选择器、矩阵评分算法与数据驱动建议
java·算法·华为·矩阵·harmonyos
摇滚侠2 小时前
云原生 Java 架构师的第一课 K8s+Docker+KubeSphere+DevOps 51-60
java·云原生·kubernetes
折哥的程序人生 · 物流技术专研2 小时前
第4篇：模板方法 vs 策略模式，面试怎么选？
java·设计模式·策略模式·行为型模式·模版方法模式·扩充系列·继承v组合
吠品2 小时前
Mac定时关机、开机自动化：用shutdown和pmset就够了
android·java·开发语言
hdsoft_huge3 小时前
JDK系列19：JVM全维度调优实战，内存、元空间、线程栈、GC参数压测调优完整方案
java·开发语言·jvm
热门推荐
012026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？022026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf03AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路042026 年 AI 大模型 & AI 编程工具实战全总结05AI科技热点日报 | 2026年07月01日06GitHub 镜像站点07【AI】2026 年具身智能模型和世界模型总结082026 AI 编程工具选型横评：Cursor / Claude Code / Trae / Copilot 到底选谁（建议收藏·避坑版）09Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析102026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片