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

【Java Web】速通JavaScript

article 2025/6/1 4:41:02

参考笔记：JavaWeb 速通JavaScript_javascript 速通-CSDN博客

一、JavaScript快速入门

1. 基本介绍

2. JavaScript特点

3. JavaScript的引入方式(重要)

3.1 写在script标签中

3.2 以外部文件方式引入

二、JS的数据类型

1. 变量

2. 常用数据类型

3.特殊值

三、JS的运算符

1. 算数运算符

2. 关系运算符

3. 逻辑运算符 || &&

4.三目运算符

四、JS的分支结构和循环结构

1. 分支结构

2. 循环结构

五、JS中的数组

1. 特点

2. 创建方法

3. 遍历方法

六、JS的函数

1. 简介

2. 声明方式

3. 使用的注意事项

七、JS事件

1. 什么是事件

2. 常见事件

3. 事件的绑定

3.1 通过属性绑定

3.2 通过DOM编程绑定

4. 事件的案例演示

4.1 onclick

4.2 onblur

4.3 onchange

八、JS创建对象的2种方式

九、BOM、DOM编程

一、JavaScript快速入门

1. 基本介绍

① JavaScript 主要用于页面元素的动态处理，能改变 HTML 的内容和属性，能改变 HTML 的样式(CSS)，能完成页面的数据验证，能控制网页的行为等等

② 关于 JS 代码：

JS 代码通常写在 <head></head> 内的 <script></script> 标签中

<script> 标签中的属性 type="text/javascript" 可加可不加

JS语句可不写分号 " ；"

2. JavaScript特点

脚本语言

JavaScript 是一种解释型的脚本语言。不同于 C、C++、Java 等语言需要先编译后执行， JavaScript 不会产生编译出来的字节码文件（ Java 文件编译后会生成 .class 字节码文件），而是在程序的运行过程中对源文件逐行进行解释

基于对象

JavaScript 是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是面向对象的三大特性：『封装』、『继承』、『多态』中，JavaScript 能够实现封装，可以模拟继承(但不是真正的继承)，不支持多态
var i = 10;
var str = "小马"
弱类型

JavaScript 中有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型

JavaScript 的语法规范性没有那么强，约束性较弱

3. JavaScript的引入方式(重要)

3.1 写在script标签中

虽然可以在 html 文件任意位置嵌入 <script> 标签，但通常还是写在 <head> 中，因为 html 文件的执行顺序是从上到下

案例演示：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><script>function suprise(){alert("Hello,我是惊喜")}</script></head><body><button onclick="suprise()">点我有惊喜</button></body>
</html>

缺陷 + 解决方案：

缺陷：仅能在当前页面上使用，代码复用度不高

解决方案：将脚本放在独立的 js 文件中，通过 script 标签引入外部脚本文件

3.2 以外部文件方式引入

方法：

         在 <script></script> 标签中添加 src 属性

        src 属性指明 .js 文件的路径，相对路径和绝对路径均可

案例演示：

第 1 步：抽取代码到独立的 js 文件中

第 2 步：在 html 文件中,通过 <script> 标签的 src 属性引入外部 js 文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><script src="../js/button.js"></script><!--可引入多个外部JS文件--></head><body><button onclick="suprise()">点我有惊喜</button><button onclick="scare()">点我有惊吓</button></body>
</html>

运行效果：

二、JS的数据类型

1. 变量

变量是用于存储信息的"容器"。JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。JS变量对大小写敏感。

内存指浏览器的内核空间。变量指向某一个内存空间
如下图所示 :

2. 常用数据类型

        ① number：数值类型。JS 中数值类型统一为 number ，包括整数和小数

        ② string：字符串类型。和 Java 的 String 相似，但 JS 中不严格区分单双引号，都可以用于表示字符串

        ③ boolean：布尔类型。在 JS 的 if 语句中，非空字符串会被转换为 '真'，非零数字也会被认为是 '真'

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

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

代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script type="text/javascript">var i = 10console.log(typeof i)//numberi = "asf"console.log(typeof i)//stringi = falseconsole.log(typeof i)//booleani = new Object()console.log(typeof i)//Objecti = [1,2,3];console.log(typeof i)//Objectfunction say(){alert("hello")}console.log(typeof say)//function</script>
</head>
<body>
</body>
</html>

运行效果：

3.特殊值

        有 3 个比较特殊的值，如下：

        ① undefined：只声明但未作初始化的变量，默认为 undefined 类型，其变量值也为 undefined

        ② null：在 JS 中，如果给一个变量赋值 null ，其数据类型是 Object ，变量值是 null

        ③ Nan：非数值，全称是 Not a Number ，一般进行错误的数学运算会导致变量值变为Nan

代码演示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>special value</title><script type="text/javascript">var v1;console.log("v1 = " + v1 + ", v1 type: " + typeof v1);var v2 = null;console.log("v1 = " + v2 + ", v1 type: " + typeof v2);var v3 = 5 * '小马';console.log("v3 = &#

【Java Web】速通JavaScript

参考笔记：JavaWeb 速通JavaScript_javascript 速通-CSDN博客目录一、JavaScript快速入门 1. 基本介绍 2. JavaScript特点 3. JavaScript的引入方式(重要) 3.1 写在script标签中 3.2 以外部文件方式引入二、JS的数据类型 1. 变量 2. 常用数据类型 3.特殊值三、…...

编程日记 2025/6/1 4:41:02

TDengine 运维——巡检工具（安装前预配置）

背景 TDengine 的安装部署对环境系统有一定的依赖和要求，安装部署前需要进行环境预配置操作，本文档旨在说明安装前预配置工具在安装 TDengine 前对环境的预配置内容和工具的使用方法。预配置工具使用方法工具支持通过 help 参数查看支持的语法 Usa…...

编程日记 2025/6/1 4:57:59

C#索引器详解：让对象像数组一样被访问

索引器是C#中一个强大而实用的特性，它允许我们像访问数组一样访问类的成员。本文将全面介绍索引器的概念、语法、实现方式以及实际应用场景。索引器基础概念索引器（Indexer）是一组get和set访问器，与属性类似，但有以…...

编程日记 2025/6/1 1:50:27

机器学习课设

🎓 图像处理课程设计任务书课程名称： 图像处理与模式识别课设题目： 基于手工特征提取与传统机器学习方法的图像分类系统实现一、课设目的本课程设计旨在加深对图像处理与分类算法的理解，提升图像特征提取、传统机器学习模…...

编程日记 2025/5/31 1:38:13

vue 如何对 div 标签设置assets内本地背景图片

在 Vue 中为 <div> 设置 assets 目录下的本地背景图片，需要通过 Webpack 或 Vite 等构建工具处理路径引用。以下是详细实现方法： 一、项目结构说明假设你的项目结构如下： src/assets/images/bg.jpg # 背景图片components/…...

编程日记 2025/6/1 9:22:10

wsl2 docker重启后没了

参考这篇文章：wsl2 docker重启后没了_mob64ca12f55920的技术博客_51CTO博客...

编程日记 2025/6/1 9:32:09

1、打开配置文件 vi /etc/netplan/00-installer-config.yaml 2、修改文件内容 # This is the network config written by subiquity network:ethernets:ens33:dhcp4: false # 禁用 dhcpaddresses:- 192.168.12.15/24 # 静态IProutes:- to: defaultvia: 192.168.12.254 …...

编程日记 2025/6/1 10:28:03

RDS PostgreSQL手动删除副本集群副本的步骤

由于PostgreSQL不支持直接删除副本集群，而是需要先将副本集群升级到主实例(区域集群)，然后在逐一将写入器实例删除，然后才可以删除副本集群查看现有的主从实例集群将副本集群提升到区域集群选择副本集群–>操作–>提升提升只读副本…...

编程日记 2025/6/1 8:41:58

MySQL 自增主键重置详解：保持 ID 连续性

目录前言正文前言爬虫神器，无代码爬取，就来：bright.cn Java基本知识： java框架零基础从入门到精通的学习路线附开源项目面经等（超全）【Java项目】实战CRUD的功能整理（持续更新&#xff09…...

编程日记 2025/6/1 9:57:15

Vue Hook Store 设计模式最佳实践指南

Vue Hook Store 设计模式最佳实践指南一、引言在 Vue 3 组合式 API 与 TypeScript 普及的背景下，Hook Store 设计模式应运而生，它结合了 Vue 组合式 API 的灵活性与状态管理的最佳实践，为开发者提供了一种轻量级、可测试且易于维护的状态…...

编程日记 2025/6/1 4:15:51

国产化Word处理控件Spire.Doc教程：通过Java简单快速的将 HTML 转换为 PDF

在处理 HTML 文件时，你可能会发现它们在不同的浏览器和屏幕尺寸下的显示效果并不一致。而将 HTML 转换为 PDF 则可以有效地保留其布局和格式，从而确保内容在不同设备和平台上的呈现保持一致。本文将介绍如何在 Spire.Doc for Java 的帮助下通过 Java 将 …...

编程日记 2025/6/1 4:56:19

Spring AI 1.0 GA深度解析与最佳实践

随着人工智能技术的快速发展，Spring AI 1.0 GA 的发布标志着 Spring 生态在 AI 领域迈出了重要一步。本文将从原理、全景架构设计、最佳实践、性能测试对比等维度，全面解析如何基于 Spring AI 构建企业级 AI 应用，并以接入 DeepSeek 大模型为…...

编程日记 2025/6/1 9:30:15

Java求职面试：从Spring到微服务的技术挑战

Java求职面试：从Spring到微服务的技术挑战在这个故事中，我们将进入一个模拟的互联网大厂Java求职者面试现场。面试官严肃而专业，而求职者谢飞机则以其幽默和捉摸不透的回答，让面试过程充满了趣味。第一轮：基础框架…...

编程日记 2025/6/1 9:40:57

鸿蒙OSUniApp 开发的图文混排展示组件#三方框架 #Uniapp

使用 UniApp 开发的图文混排展示组件在移动应用开发中，图文混排展示是资讯、社区、电商、教育等场景中极为常见的需求。一个灵活、美观的图文混排组件，不仅能提升内容的可读性，还能增强用户的视觉体验。随着 HarmonyOS（鸿蒙&…...

编程日记 2025/6/1 8:49:24

WHAT - 学习 WebSocket 实时 Web 开发

文章目录一、基础知识了解1. WebSocket 是什么？2. 它的优势： 二、基本工作流程三、快速体验：使用原生 WebSocket客户端（浏览器端 JS）：服务端（Node.js 示例，使用 ws 库） …...

编程日记 2025/6/1 2:59:06

5G NTN卫星通信发展现状(截止2025年3月)

今天咱们用实实在在的数据唠唠卫星通信这事儿—这些数字可比科幻片还刺激，直接告诉你这玩意儿现在有多火，未来能有多野！ 先甩个大数字：截至2025年3月，全球已经有143个运营商和卫星厂商的合作项目，覆盖53个国…...

编程日记 2025/6/1 9:43:45

【计算机网络】第2章：应用层—DNS

目录一、PPT 二、总结 DNS（域名系统）详解 （一）DNS核心概念 （二）DNS查询过程（重点❗） （三）DNS资源记录（RR）类型…...

编程日记 2025/6/1 7:30:02

[Linux]虚拟地址到物理地址的转化

[Linux]虚拟地址到物理地址的转化水墨不写bug 文章目录一、再次认识地址空间二、页表1、页表的结构设计2、页表节省了空间，省在哪里？3、页表的物理实现一、再次认识地址空间 OS和磁盘交互的内存基本单位是4KB，这4KB通常被称为内存块。OS对…...

编程日记 2025/6/1 10:07:27

Linux线程入门

目录 Linux线程概念什么是线程重新理解进程线程的优点线程的缺点线程的异常线程用途 Linux线程概念什么是线程在一个程序里的一个执行路线就叫做线程（thread）。更准确的定义是：线程是“一个进程内部的控制序列”。一切进程至…...

编程日记 2025/6/1 9:44:39

Kubernetes超详细教程，一篇文章帮助你从零开始学习k8s，从入门到实战

k8s 概述 k8s github地址：https://github.com/kubernetes/kubernetes 官方文档：https://kubernetes.io/zh-cn/docs/home/ k8s，全程是 kubernetes，这个名字源于希腊语，意为"舵手"或"飞行员” k8s 这…...

编程日记 2025/5/31 1:20:41

Docker基础 -- Ubuntu 22.04 AArch64 交叉编译 Docker 镜像构建指南

Ubuntu 22.04 AArch64 交叉编译 Docker 镜像构建指南作者： （填写作者） 发布日期： 2025‑05‑26 1 背景与目标在企业内网（需要代理）环境下，我们需要一套可靠、可复用的 Ubuntu 22.04 交叉编…...

编程日记 2025/6/1 9:11:49

【Elasticsearch】使用脚本删除索引中的某个字段

在 Elasticsearch 中，删除索引中的某个字段可以通过以下几种方式实现，具体取决于你的需求和场景。以下是几种常见的方法： 方法 1：使用 _update_by_query API 删除字段 _update_by_query API 可以对索引中的文档执行批量更新操作&…...

编程日记 2025/6/1 10:08:51

OpenHarmony平台驱动使用（二），CLOCK

OpenHarmony平台驱动使用（二） CLOCK 概述功能简介 CLOCK，时钟是系统各个部件运行的基础，以CPU时钟举例，CPU 时钟是指 CPU 内部的时钟发生器，它以频率的形式工作，用来同步和控制 CPU 内部的各…...

编程日记 2025/6/1 10:12:33

我们是如何为 ES|QL 重建自动补全功能的

作者：来自 Elastic Drew Tate Elasticsearch 拥有许多新功能，可以帮助你根据使用场景构建最佳搜索方案。浏览我们的示例笔记本了解更多内容，开始免费试用云服务，或者立即在本地机器上尝试 Elastic。对于我们开发者来说&#xff0…...

编程日记 2025/6/1 9:10:31

Keepalived 配置 VIP 的核心步骤

Keepalived 配置 VIP 的核心步骤主要涉及安装软件、主备节点配置及服务管理。以下是具体操作指南：一、安装 Keepalived ‌Ubuntu/Debian 系统‌ sudo apt update sudo apt install keepalived ‌CentOS/RHEL 系统‌ sudo yum install keepalived 注：需确保已配置 EPE…...

编程日记 2025/6/1 9:46:54

如何使用 Redis 快速实现排行榜？

Redis 的 Sorted Set（有序集合） 是实现排行榜的高效工具，其天然支持按分数排序、范围查询和原子操作。以下是快速实现排行榜的步骤和核心方案： 一、核心数据结构：Sorted Set 特性： 每个成员（me…...

编程日记 2025/6/1 9:49:10

MATLAB在逐渐被Python淘汰吗

MATLAB在学术研究、工程仿真、数值计算等传统领域仍占据一席之地，但Python因其开源免费、生态丰富、易于集成的优势，正在快速崛起，逐步蚕食MATLAB的市场份额。尤其在人工智能、数据分析和科学计算等领域，Python的优势愈发明显。例…...

编程日记 2025/6/1 9:27:07

Git 使用规范

Git 使用规范一、版本控制的核心原则 🧭二、分支策略（Branch Strategy） 🌿2.1 分支类型与命名规范2.2 可视化流程图三、提交信息规范（Commit Message）✍️3.1 提交格式3.2 Type 类型说明四、Tag 版本规范…...

编程日记 2025/6/1 6:01:39

代码随想录第43天：图论4（最小生成树、拓扑排序）

一、冗余的边II（Kamacoder 109） from collections import defaultdict# 并查集 - 查找根节点（路径压缩） def find(fa, x):if fa[x] ! x:fa[x] find(fa, fa[x])return fa[x]# 并查集 - 合并两个集合，返回是否合并成功 …...

编程日记 2025/6/1 1:47:03

AI智能体|扣子(Coze)搭建【自动生成超高质量PPT】工作流

各位好久不见，你的失踪人口又回来了，已经超过一周的时间没有进行文章的更新了。没更新的这段时间，主要还是因为工作上的调整以及身体生病所导致的停更，具体以后再说。我们先讲今天的主要主题，使用 Coze 智能体一键生…...

编程日记 2025/6/1 10:06:38

一、JavaScript快速入门

1. 基本介绍

2. JavaScript特点

3. JavaScript的引入方式(重要)

3.1 写在script标签中

​​​​​3.2 以外部文件方式引入

二、JS的数据类型

1. 变量

2. 常用数据类型

3.特殊值

相关文章：

3.2 以外部文件方式引入