当前位置：首页 > article >正文

JavaWeb 课堂笔记 —— 02 JavaScript

article 2026/2/5 16:51:09

本系列为笔者学习JavaWeb的课堂笔记，视频资源为B站黑马程序员出品的《黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）》，章节分布参考视频教程，为同样学习JavaWeb系列课程的同学们提供参考。

01 什么是 JavaScript ?

JavaScript 是一门跨平台、面向对象的脚本语言，其使得网页可交互。

02 JavaScript 引入方式

标签：<script>

<!-- 内部脚本 -->
<script>alert("Hello JavaScript");
</script><!-- 外部脚本 -->
<script src="demo.js"></script>

03 JavaScript 基础语法

① 输出语句

<script>window.alert("Hello JavaScript"); //弹出警告框document.write("Hello JavaScript"); //写入HTML页面console.log("Hello JavaScript"); //浏览器控制台输出（F12）
</script>

注：console / kənˈsoʊl / 控制台。

② 变量

var a = 20;
a = "张蓝天";

注：var 为全局变量，可重复定义。

③ 数据类型

在这里插入图片描述

var a = 20;
alert(typeof a); //获取数据类型

④ 运算符

在这里插入图片描述

⑤ 流程控制语句

在这里插入图片描述

04 JavaScript 函数

//定义
function add(a, b){return a + b;
}var add = function(a, b){return a + b;
}//调用
var result = add(1, 2);
alert(result);

05 JavaScript 对象

① Array

var arr = new Array(1, 2, 3, 4);
var arr = [1, 2, 3, 4];arr[10] = "hello";
arr[9] = 'a';
arr[8] = true;

注：JavaScript数组相当于Java集合，其长度可变，类型可变。

在这里插入图片描述

<script>var arr = [1, 2, 3, 4];for(int i=0; i<arr.length; ++i){console.log(arr[i]);}arr.forEach(function(e){console.log(e); //仅遍历有值的元素}) arr.forEach( (e) => {console.log(e);} ) //ES6 箭头函数 (...) => {...}arr.push(7, 8, 9);console.log(arr);arr.splice(2, 2); //start numberconsole.log(arr);
</script>

② String

var str = new String("Hello JavaScript");
var str = "Hello JavaScript";

在这里插入图片描述

<script>var str = "  Hello JavaScript  ";console.log(str.length);console.log(str.charAt(4)); //oconsole.log(str.indexOf(o)); //4var str2 = str.trim();console.log(str2);console.log(str2.substring(0, 5)) //[start, end)
</script>

③ 对象

var user{//属性名：属性值name: "Tom";age: 10;gender: "male";//方法eat: function(){alert("干饭！");}drink(){alert("喝酒！");}
}alert(user.name);
user.eat();

④ JSON

JavaScript Object Notation为通过JavaScript对像标记法书写的文本，由于其语法简单，层次结构鲜明，多用于作为数据载体，在网络中进行数据传输。

在这里插入图片描述

var 变量名 = '{"key1": value1, "key2": value2}'; //JSON字符串var jsonStr = '{"name": "Tom", "age": 18, "address": {"北京", "上海", "西安"}}';//JSON字符串 -> JavaScript对象
var obj = JSON.parse(jsonStr);
alert(obj.name);//JavaScript对象 -> JSON字符串
var str = JSON.string(obj);
alert(atr);

⑤ BOM

Browser Object Model为浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。

Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象

Ⅰ 浏览器窗口对象Window

window.alert("Hello Window");
alert("Hello Window");

在这里插入图片描述

<script>//confirm - 对话框 - 确认：true，取消：falsevar flag = confirm("确定删除吗？");alert(flag);//setInterval - 定时器 - 无限循环var i = 0;setInterval(function(){i++;console.log("第"i"次振翅")；}, 2000)//setTimeout() - 延迟器 - 延期执行setInterval(function(){alert("Hello JavaScript");}, 3000) //毫秒
</script>

Ⅱ 地址栏对象Location

window.location.href;
location.href;

⑤ DOM

Document Object Model为文档对象模型，将标记语言的各部分封装为对象。

Document：整个文档对象
Element：元素（标签）对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

在这里插入图片描述

JavaScript通过DOM 就能够对HTML文档进行操作:

改变HTML元素的内容
改变HTML元素的样式(CSS)
对HTML DOM事件作出反应
添加和制除HTML元素

Ⅰ 获取Element元素（标签）对象

在这里插入图片描述

Ⅱ 修改Element元素（标签）内容

<body><img id="h1" src="img/off.gif"> <br><br><div class="cls">传智教育</div> <br><div class="cls">黑马程序员</div> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏
</body><script>//点亮灯泡var img = document.getElementById("h1");img.src = "img/on.gif";//very goodvar divs = document.getElementByClassName('cls');var div1 = divs[0];var div2 = divs[1];div1.innerHTML += "<font color="red">very good</font>"; div2.innerHTML += "<font color="red">very good</font>";//勾选方框var ins = document.getElementByName("hobby");for(let i=0; i<ins.length; ++i){const check = ins[i];check.checked = "true"; //问AI呗~}
</script>

在这里插入图片描述

06 JavaScript 事件监听

HTML事件是发生在HTML元素上的事情，比如按钮被点击、鼠标移动到元素上或者按下键盘按键，JavaScript可以在事件被侦测到时执行代码。

在这里插入图片描述

① 事件绑定

方式一：通过HTML标签中的属性进行绑定

<body>
<input type="button" onclick="on()" value="按钮1">
</body>
<script>function on(){alert('我被点击啦！');}
</script>

方式二：通过DOM元素属性绑定

<body>
<input type="button" id="btn" balue="按钮2">
</body><script>document.getElementById("btn").onclick=function(){alert('我被点击啦！');}
</script>

在这里插入图片描述

② 常见事件

在这里插入图片描述

③ 案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-事件-案例</title>
</head>
<body><img id="light" src="img/on.gif"> <br><input type="button" value="点亮" onclick="on()"> <input type="button"  value="熄灭" onclick="off()"><br> <br><input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()"><br> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏<br><input type="button" value="全选" onclick="checkAll()"> <input type="button" value="反选" onclick="reverse()"></body><script>//1. 点击 "点亮" 按钮, 点亮灯泡; // 点击 "熄灭" 按钮, 熄灭灯泡; function on(){ //事件监听var img = document.getElementsById("light"); //DOMimg.src="img/on.gif";}function off(){var img = document.getElementsById("light");img.src="img/off.gif";}//2. 输入框聚焦后, 展示小写; // 输入框离焦后, 展示大写; function lower(){var input = document.getElementById("name");input.value = input.toLowerCase();}function upper(){var input = document.getElementById("name");input.value = input.toUpperCase();}//3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; // 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; function checkAll(){var checks = document.getElementsByName("hobby");for(let i=0; i<checks.length; ++i){const check = checks[i];check.checked = true;}}function reverse(){var checks = document.getElementsByName("hobby");for(let i=0; i<checks.length; ++i){const check = checks[i];check.checked = false;}}</script>
</html>

JavaWeb 课堂笔记 —— 02 JavaScript

本系列为笔者学习JavaWeb的课堂笔记，视频资源为B站黑马程序员出品的《黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖SpringMyBatisSpringMVCSpringBoot等）》，章节分布参考视频教程，为同样学习…...

编程日记 2026/2/2 9:08:43

多GPU训练

写在前面限于财力不足，本机上只有一个 GPU 可供使用，因此这部分的代码只能够稍作了解，能够使用的 GPU 也只有一个。多 GPU 的数据并行：有几张卡，对一个小批量数据，有几张卡就分成几块，每个 …...

编程日记 2026/1/24 4:48:45

Java面试黄金宝典33

1. 什么是存取控制、触发器、存储过程、游标存取控制定义：存取控制是数据库管理系统（DBMS）为保障数据安全性与完整性，对不同用户访问数据库对象（如表、视图等）的权限加以管理的机制。它借助定义用户…...

编程日记 2025/10/23 7:54:01

如何在 Linux 上安装 Python

本指南介绍如何在Linux机器上安装 Python。Python 已成为开发人员、数据科学家和系统管理员必不可少的编程语言。它用于各种应用，包括 Web 开发、数据科学、自动化和机器学习。本综合指南将引导您完成在 Linux 系统上安装Python的过程，涵盖从基本包管理…...

编程日记 2026/2/1 14:56:12

系统与网络安全------Windows系统安全（6）

资料整理于网络资料、书本资料、AI，仅供个人学习参考。共享文件夹发布共享文件夹 Windows共享概述微软公司推出的网络文件/打印机服务系统可以将一台主机的资源发布给其他主机共有共享访问的优点方便、快捷相比光盘 U盘不易受文件大小限制可以实现访问…...

编程日记 2026/2/2 9:11:33

解决 Spring Boot 返回日期格式问题

springboot项目有个属性这样注解 DateTimeFormat(pattern "yyyy-MM-dd") private Date createTime; 表中是 create_time datetime DEFAULT NULL 只使用了 DateTimeFormat 注解来处理输入格式，但没有配置输出格式。返回给前端还是 createTime: "2…...

编程日记 2025/9/12 23:57:58

复古千禧Y2风格霓虹发光酸性镀铬金属短片音乐视频文字标题动画AE/PR模板

踏入时光机，重温 21 世纪初大胆、未来主义和超光彩的美学！这是一个动态的 After Effects 模板，旨在重现千禧年的标志性视觉效果——铬反射、霓虹灯发光、闪亮的金属和流畅的动态图形。无论您是在制作时尚宣传片、怀旧音乐视频还是时尚的社交媒…...

编程日记 2026/2/2 9:12:04

linux 安装 mysql记录

sudo apt-get install mysql-server 一直报错，按照下面的终于安装出来了这个链接 https://cn.linux-console.net/?p13784 第 1 步：要删除 MySQL 及其所有依赖项，请执行以下命令： sudo apt-get remove --purge mysql* 第 2 步…...

编程日记 2026/1/13 18:17:22

如何设计一个本地缓存

想获取更多高质量的Java技术文章？欢迎访问Java技术小馆官网，持续更新优质内容，助力技术成长 Java技术小馆官网https://www.yuque.com/jtostring 如何设计一个本地缓存随着系统的复杂性和数据量的增加，如何快速响应用户请求、减…...

编程日记 2026/2/4 0:04:33

NLP/大模型八股专栏结构解析

1.transformer 结构相关 （1）transformer的基本结构有哪些，分别的作用是什么，代码实现。 NLP高频面试题（一）——Transformer的基本结构、作用和代码实现 （2）LSTM、GRU和Transformer结…...

编程日记 2026/1/28 16:40:10

[rootxxx ~]# grep root /etc/passwd [rootxxx ~]# grep -A 2 root /etc/passwd -A #匹配行后两行 [rootxxx ~]# grep -B 2 root /etc/passwd -B #匹配行前两行 [rootxxx ~]# grep -C 2 root /etc/passwd -C #前后2行 [rootxxx ~]# grep -n root /…...

编程日记 2025/8/20 3:25:27

SpringBoot洗衣店订单管理系统设计与实现

一个基于SpringBoot的洗衣店订单管理系统的设计与实现。系统概述支持管理员管理顾客与店家信息、店家管理店铺与洗衣信息，以及顾客预约、查看洗衣信息与交流等功能。部分功能模块 1. 管理员模块顾客信息管理店家信息管理 2. 店家模块店铺信息管 …...

编程日记 2026/2/2 9:11:26

模版的特性及其编译分离

1.模版的分类模版参数分为类型形参和非类型形参类型形参：出现在模版参数列表中，跟在class和typename之后的参数类型名称非类型形参：就是用一个常量作为类（函数）模版的一个参数，在类（函…...

编程日记 2026/2/2 9:12:59

基于 Ubuntu 24.04 LTS（Noble Numbat）的完整安装指南

以下是基于 Ubuntu 24.04 LTS（Noble Numbat）的完整安装指南，整合了多平台安装方法与优化建议，涵盖物理机、虚拟机及服务器场景： 一、准备工作 1. 系统要求硬件配置： CPU：2 GHz双核或更高内存…...

编程日记 2025/6/2 18:57:13

7-12 最长对称子串（PTA）

对给定的字符串，本题要求你输出最长对称子串的长度。例如，给定Is PAT&TAP symmetric?，最长对称子串为s PAT&TAP s，于是你应该输出11。输入格式： 输入在一行中给出长度不超过1000的非空字符串。输出格式&…...

编程日记 2025/12/9 0:20:31

NO.66十六届蓝桥杯备战|基础算法-贪心-区间问题|凌乱的yyy|Rader Installation|Sunscreen|牛栏预定(C++)

区间问题是另⼀种⽐较经典的贪⼼问题。题⽬⾯对的对象是⼀个⼀个的区间，让我们在每个区间上做出取舍。这种题⽬的解决⽅式⼀般就是按照区间的左端点或者是右端点排序，然后在排序之后的区间上，根据题⽬要求，制定出相应的贪⼼策略&…...

编程日记 2026/2/2 9:12:05

搭建redis主从同步实现读写分离(原理剖析)

搭建redis主从同步实现读写分离(原理剖析) 文章目录搭建redis主从同步实现读写分离(原理剖析)前言一、搭建主从同步二、同步原理前言为什么要学习redis主从同步，实现读写分析。因为单机的redis虽然是基于内存，单机并发已经能支撑很高。但是随着业务量…...

编程日记 2026/2/2 9:09:08

Rust切片、结构体、枚举

文章目录切片类型字符串切片其他结构的切片结构体结构体实例元组结构体结构体所有权输出结构体结构体的方法结构体关联函数单元结构体枚举match语法Option枚举类if let 语句切片类型切片（Slice）是对数据值的部分“引用” 我们可以从一个数据集合中…...

编程日记 2026/2/1 14:54:42

使用人车关系核验API快速核验车辆一致性

一、引言随着车辆交易的日益频繁，二手车市场和金融领域的汽车抵押业务蓬勃发展。然而，欺诈和盗窃行为也时有发生，给行业带来了不小的冲击。例如，3月20日央视曝光的“新能源车虚假租赁骗补”产业链，以及某共享汽车平…...

编程日记 2025/7/16 10:15:47

【学习笔记】深度学习环境部署相关

文章目录 [AI硬件科普] 内存/显存带宽，从 NVIDIA 到苹果 M4[工具使用] tmux 会话管理及会话持久性[A100 02] GPU 服务器压力测试，gpu burn，cpu burn，cuda samples[A100 01] A100 服务器开箱，超微平台，gpu、…...

编程日记 2026/2/2 9:08:53

股票日数据使用_未复权日数据生成前复权日周月季年数据

目录前置： 准备代码：数据库交互部分代码：生成前复权日、周、月、季、年数据前置： 1 未复权日数据获取，请查看 https://blog.csdn.net/m0_37967652/article/details/146435589 数据库使用PostgreSQL。更新日…...

编程日记 2026/2/2 9:08:49

Java程序设计第1章：概述

一、Hello World 1.代码： public class HelloWorld {public static void main(String[] args){System.out.println("Hello World!");} } 2.运行结果： Hello World! 二、输出姓名、学号、班级 1.题目： 编写一个Application&a…...

编程日记 2026/1/30 14:16:52

【LeetCode Solutions】LeetCode 146 ~ 150 题解

CONTENTS LeetCode 146. LRU 缓存（中等）LeetCode 147. 对链表进行插入排序（中等）LeetCode 148. 排序链表（中等）LeetCode 149. 直线上最多的点数（困难）LeetCode 150. 逆波兰表达式求值…...

编程日记 2026/2/2 10:33:22

《如何更高效地学习》

🚀个人主页：BabyZZの秘密日记 📖收入专栏：个人谈心 🌍文章目入一、明确学习目标二、制定学习计划三、选择合适的学习方法（一）主动学习（二）分散学习（三&#…...

编程日记 2026/2/2 9:08:49

常用中间件合集

简介在游戏或者web服务器开发过程中难免会使用一些中间件正所谓有现成的就没必要重复造轮子了以下大概介绍下常用的中间件nginx etcd nats docker k8s nginx 简介 Nginx是一个轻量级/高性能的反向代理Web服务器，他实现非常高效的反向代理、负载平衡，他可以处理2-3万…...

编程日记 2026/1/27 12:12:29

分布式数据一致性场景与方案处理分析｜得物技术

一、引言在经典的CAP理论中一致性是指分布式或多副本系统中数据在任一时刻均保持逻辑与物理状态的统一，这是确保业务逻辑正确性和系统可靠性的核心要素。在单体应用单一数据库中可以直接通过本地事务(ACID)保证数据的强一致性。然而随着微服务架构的普及和业务场…...

编程日记 2026/2/2 9:11:10

JAVA：使用 Curator 进行 ZooKeeper 操作的技术指南

1、简述 Apache Curator 是一个基于 ZooKeeper 的 Java 客户端库，它极大地简化了使用 ZooKeeper 的开发工作。Curator 提供了高层次的 API，封装了很多复杂的 ZooKeeper 操作，例如连接管理、分布式锁、Leader 选举等。在分布式系统中&#…...

编程日记 2026/2/2 9:09:42

C++ - 宏基础（简单常量替换宏、函数样式的宏、多行宏、预定义宏、字符串化宏、连接宏、可变参数日志宏）

宏概述在编程中，宏（Macro）是一种预处理器指令宏可以让程序员在源代码中定义一段值或代码的别名，在编译程序之前，预处理器会查找这些宏，并将其替换为相应的值或代码 C 宏在 C 中，宏可以通过…...

编程日记 2026/2/4 9:37:19

Linux中的调试器gdb与冯·诺伊曼体系

一、Linux中的调试器：gdb 1.1安装与版本查看可以使用yum进行安装： yum install -y gdb 版本查看：使用指令 gdb --version 1.2调试的先决条件：release版本与debug版本的切换 debug版本：含有调试信息 release版本…...

编程日记 2026/2/2 9:08:50

STM32 + keil5 跑马灯

硬件清单 1. STM32F407VET6 2. STLINK V2下载器(带线) 环境配置 1. 安装ST-LINK 2. 安装并配置 keil5 https://blog.csdn.net/qq_36535414/article/details/108947292 https://blog.csdn.net/weixin_43732386/article/details/117375266 3. 接线并下载点击"LOAD“&a…...

编程日记 2026/2/2 9:09:18

JavaWeb 课堂笔记 —— 02 JavaScript

01 什么是 JavaScript ?

02 JavaScript 引入方式

03 JavaScript 基础语法

04 JavaScript 函数

05 JavaScript 对象

06 JavaScript 事件监听

相关文章：

JavaWeb 课堂笔记 —— 02 JavaScript

多GPU训练

Java面试黄金宝典33

如何在 Linux 上安装 Python

系统与网络安全------Windows系统安全（6）

解决 Spring Boot 返回日期格式问题

复古千禧Y2风格霓虹发光酸性镀铬金属短片音乐视频文字标题动画AE/PR模板

linux 安装 mysql记录

如何设计一个本地缓存

NLP/大模型八股专栏结构解析

grep命令: 过滤

SpringBoot洗衣店订单管理系统设计与实现

模版的特性及其编译分离

基于 Ubuntu 24.04 LTS（Noble Numbat）的完整安装指南

7-12 最长对称子串（PTA）

NO.66十六届蓝桥杯备战|基础算法-贪心-区间问题|凌乱的yyy|Rader Installation|Sunscreen|牛栏预定(C++)

搭建redis主从同步实现读写分离(原理剖析)

Rust切片、结构体、枚举

使用人车关系核验API快速核验车辆一致性

【学习笔记】深度学习环境部署相关

股票日数据使用_未复权日数据生成前复权日周月季年数据

Java程序设计第1章：概述

【LeetCode Solutions】LeetCode 146 ~ 150 题解

《如何更高效地学习》

常用中间件合集

分布式数据一致性场景与方案处理分析｜得物技术

JAVA：使用 Curator 进行 ZooKeeper 操作的技术指南

C++ - 宏基础（简单常量替换宏、函数样式的宏、多行宏、预定义宏、字符串化宏、连接宏、可变参数日志宏）

Linux中的调试器gdb与冯·诺伊曼体系

STM32 + keil5 跑马灯