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

JavaScript学习教程，从入门到精通，JavaScript 快速入门指南（4）

article 2026/2/2 3:01:35

JavaScript 快速入门指南

在HTML中引入JavaScript

语法知识点：

内部JavaScript：使用<script>标签直接嵌入HTML中
外部JavaScript：通过<script src="file.js">引入外部文件
推荐将脚本放在<body>末尾或使用defer属性

案例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>JavaScript引入方式</title><!-- 外部引入方式 --><script src="external.js" defer></script><!-- 内部引入方式 --><script>// 这里写JavaScript代码console.log("内部脚本已加载");</script>
</head>
<body><!-- 推荐的位置 --><script>console.log("body底部脚本");</script>
</body>
</html>

常用输出语句

语法知识点：

console.log() - 控制台输出
alert() - 弹出警告框
document.write() - 直接写入HTML文档（慎用）
innerHTML/textContent - 修改DOM元素内容

案例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>输出语句示例</title>
</head>
<body><div id="output"></div><script>// 1. 控制台输出console.log("这是一条控制台日志");console.error("这是一条错误信息");console.warn("这是一条警告信息");// 2. 弹出警告框alert("欢迎来到我的网站！");// 3. 写入HTML文档（会覆盖整个文档，慎用）document.write("<p>使用document.write写入的内容</p>");// 4. 修改DOM元素内容document.getElementById("output").innerHTML = "<p>使用innerHTML添加的内容</p>";document.getElementById("output").textContent = "使用textContent添加的纯文本";</script>
</body>
</html>

基础表达式

语法知识点：

变量声明：let, const, var（不推荐）
数据类型：Number, String, Boolean, Null, Undefined, Object, Symbol
运算符：算术、比较、逻辑、赋值
条件语句：if…else, switch
循环语句：for, while, do…while

案例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>基础表达式</title>
</head>
<body><script>// 1. 变量声明let name = "张三"; // 可变的const PI = 3.1415; // 常量var age = 25; // 旧方式，不推荐// 2. 数据类型let num = 100; // Numberlet str = "Hello"; // Stringlet bool = true; // Booleanlet empty = null; // Nulllet notDefined; // Undefinedlet obj = {key: "value"}; // Object// 3. 运算符let sum = 10 + 5; // 算术let isEqual = (10 == "10"); // 比较（true，值相等）let isStrictEqual = (10 === "10"); // 严格比较（false，类型不同）let and = (true && false); // 逻辑与let or = (true || false); // 逻辑或// 4. 条件语句let score = 85;if (score >= 90) {console.log("优秀");} else if (score >= 60) {console.log("及格");} else {console.log("不及格");}// switch语句let day = 3;switch(day) {case 1: console.log("周一"); break;case 2: console.log("周二"); break;case 3: console.log("周三"); break;default: console.log("其他");}// 5. 循环语句// for循环for (let i = 0; i < 5; i++) {console.log("for循环:", i);}// while循环let j = 0;while (j < 5) {console.log("while循环:", j);j++;}// do...while循环let k = 0;do {console.log("do...while循环:", k);k++;} while (k < 5);</script>
</body>
</html>

函数

语法知识点：

函数声明：function name() {}
函数表达式：const name = function() {}
箭头函数：const name = () => {}
参数和返回值
作用域和闭包

案例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>函数示例</title>
</head>
<body><script>// 1. 函数声明function greet(name) {return "Hello, " + name + "!";}console.log(greet("张三"));// 2. 函数表达式const add = function(a, b) {return a + b;};console.log("5 + 3 =", add(5, 3));// 3. 箭头函数const multiply = (a, b) => a * b;console.log("5 * 3 =", multiply(5, 3));// 4. 默认参数function createUser(name, age = 18) {console.log(`${name}, ${age}岁`);}createUser("李四"); // 使用默认年龄createUser("王五", 25);// 5. 作用域let globalVar = "全局变量";function scopeTest() {let localVar = "局部变量";console.log(globalVar); // 可以访问console.log(localVar); // 可以访问}scopeTest();// console.log(localVar); // 报错，无法访问局部变量// 6. 闭包function createCounter() {let count = 0;return function() {count++;return count;};}const counter = createCounter();console.log(counter()); // 1console.log(counter()); // 2</script>
</body>
</html>

事件

语法知识点：

常见事件：click, mouseover, mouseout, keydown, load, submit
事件处理方式：
- HTML属性：onclick="handler()"
- DOM属性：element.onclick = handler
- 事件监听：element.addEventListener('click', handler)
事件对象：包含事件相关信息
事件冒泡和捕获

案例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>事件处理</title><style>#box {width: 200px;height: 200px;background-color: lightblue;margin: 20px;padding: 20px;}#inner {width: 100px;height: 100px;background-color: lightcoral;}</style>
</head>
<body><!-- 1. HTML属性方式 --><button onclick="alert('按钮被点击了！')">点击我</button><!-- 2. DOM属性方式 --><button id="btn1">按钮1</button><!-- 3. 事件监听方式 --><button id="btn2">按钮2</button><!-- 事件冒泡示例 --><div id="box">外层div<div id="inner">内层div</div></div><script>// 2. DOM属性方式document.getElementById("btn1").onclick = function() {console.log("按钮1被点击了");};// 3. 事件监听方式（推荐）document.getElementById("btn2").addEventListener("click", function(e) {console.log("按钮2被点击了", e); // e是事件对象});// 事件对象document.addEventListener("keydown", function(event) {console.log(`按下了${event.key}键，键码:${event.keyCode}`);});// 事件冒泡document.getElementById("box").addEventListener("click", function() {console.log("外层div被点击");});document.getElementById("inner").addEventListener("click", function(e) {console.log("内层div被点击");// e.stopPropagation(); // 阻止冒泡});// 页面加载事件window.addEventListener("load", function() {console.log("页面已完全加载");});</script>
</body>
</html>

示例：改变网页文字颜色

案例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>改变文字颜色</title><style>body {font-family: Arial, sans-serif;line-height: 1.6;padding: 20px;}#content {padding: 20px;border: 1px solid #ddd;margin-bottom: 20px;}button {padding: 8px 16px;margin-right: 10px;cursor: pointer;}</style>
</head>
<body><div id="content"><h1>欢迎来到我的网站</h1><p>这是一个演示如何用JavaScript改变文字颜色的示例。</p><p>点击下方按钮可以改变这段文字的颜色。</p></div><button id="redBtn">红色</button><button id="blueBtn">蓝色</button><button id="greenBtn">绿色</button><button id="randomBtn">随机颜色</button><script>// 获取DOM元素const content = document.getElementById("content");const redBtn = document.getElementById("redBtn");const blueBtn = document.getElementById("blueBtn");const greenBtn = document.getElementById("greenBtn");const randomBtn = document.getElementById("randomBtn");// 改变颜色函数function changeColor(color) {content.style.color = color;}// 生成随机颜色function getRandomColor() {const letters = '0123456789ABCDEF';let color = '#';for (let i = 0; i < 6; i++) {color += letters[Math.floor(Math.random() * 16)];}return color;}// 事件监听redBtn.addEventListener("click", function() {changeColor("red");});blueBtn.addEventListener("click", function() {changeColor("blue");});greenBtn.addEventListener("click", function() {changeColor("green");});randomBtn.addEventListener("click", function() {changeColor(getRandomColor());});</script>
</body>
</html>

综合案例：用户登录验证

案例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>用户登录验证</title><style>body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f5f5f5;}.login-container {background-color: white;padding: 30px;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);width: 350px;}h1 {text-align: center;color: #333;margin-bottom: 30px;}.form-group {margin-bottom: 20px;}label {display: block;margin-bottom: 8px;font-weight: bold;color: #555;}input {width: 100%;padding: 10px;border: 1px solid #ddd;border-radius: 4px;box-sizing: border-box;}button {width: 100%;padding: 12px;background-color: #4CAF50;color: white;border: none;border-radius: 4px;cursor: pointer;font-size: 16px;}button:hover {background-color: #45a049;}.error {color: red;font-size: 14px;margin-top: 5px;display: none;}.success {color: green;text-align: center;margin-top: 20px;display: none;}</style>
</head>
<body><div class="login-container"><h1>用户登录</h1><form id="loginForm"><div class="form-group"><label for="username">用户名</label><input type="text" id="username" placeholder="请输入用户名"><div id="usernameError" class="error">用户名不能为空</div></div><div class="form-group"><label for="password">密码</label><input type="password" id="password" placeholder="请输入密码"><div id="passwordError" class="error">密码不能少于6位</div></div><button type="submit">登录</button><div id="successMessage" class="success">登录成功！</div></form></div><script>// 获取DOM元素const loginForm = document.getElementById("loginForm");const usernameInput = document.getElementById("username");const passwordInput = document.getElementById("password");const usernameError = document.getElementById("usernameError");const passwordError = document.getElementById("passwordError");const successMessage = document.getElementById("successMessage");// 验证用户名function validateUsername() {const username = usernameInput.value.trim();if (username === "") {usernameError.style.display = "block";return false;} else {usernameError.style.display = "none";return true;}}// 验证密码function validatePassword() {const password = passwordInput.value;if (password.length < 6) {passwordError.style.display = "block";return false;} else {passwordError.style.display = "none";return true;}}// 表单提交处理loginForm.addEventListener("submit", function(event) {// 阻止表单默认提交行为event.preventDefault();// 验证输入const isUsernameValid = validateUsername();const isPasswordValid = validatePassword();// 如果验证通过if (isUsernameValid && isPasswordValid) {// 模拟登录成功successMessage.style.display = "block";loginForm.style.display = "none";// 3秒后重定向（模拟）setTimeout(function() {alert("即将跳转到主页...");// window.location.href = "home.html"; // 实际项目中跳转到主页}, 3000);}});// 实时验证usernameInput.addEventListener("input", validateUsername);passwordInput.addEventListener("input", validatePassword);</script>
</body>
</html>

这个综合案例包含了：

表单元素获取
输入验证逻辑
事件处理（表单提交、输入事件）
DOM操作（显示/隐藏元素）
定时器使用
样式和交互效果

所有代码都有详细注释，可以帮助理解JavaScript的各个基础知识点在实际项目中的应用。

JavaScript学习教程，从入门到精通，JavaScript 快速入门指南（4）

JavaScript 快速入门指南在HTML中引入JavaScript 语法知识点： 内部JavaScript：使用<script>标签直接嵌入HTML中外部JavaScript：通过<script src"file.js">引入外部文件推荐将脚本放在<body>末尾或使用defer属…...

编程日记 2026/1/14 15:18:21

网络安全应急响应-文件痕迹排查

在Windows系统的网络安全应急响应中，文件痕迹排查是识别攻击行为的关键步骤。以下是针对敏感目录的详细排查指南及扩展建议： 1. 临时目录排查（Temp/Tmp） 路径示例： C:\Windows\TempC:\Users\<用户名>\AppData\L…...

编程日记 2026/1/30 17:09:47

C++ 提高编程下

C提高编程 set/multiset 容器set 基本概念set 构造和赋值set 大小和交换set 插入和删除set 查找和统计set 和 multiset 的区别pair 对组创建set 容器排序 map/multimap 容器map 基本概念map 构造和赋值map 大小和交换map 插入和删除map 查找和统计map 容器排序案例——员工分组…...

编程日记 2026/1/13 9:31:35

【Linux网络】网络套接字socket

🌈个人主页：秦jh__https://blog.csdn.net/qinjh_?spm1010.2135.3001.5343 🔥 系列专栏：https://blog.csdn.net/qinjh_/category_12891150.html 目录 Socket 编程预备理解源 IP 地址和目的 IP 地址认识端口号端口号范围划分…...

编程日记 2026/1/25 19:29:14

tomcat的负载均衡和会话保持

写你的想写的东西，写在tomcat的默认发布目录中这里写了一个jsp的文件访问成功可以用nginx实现反向代理 tomcat负载均衡实现： 这里使用的算法是根据cookie值进行哈希，根据ip地址哈希会有问题.如果是同一台主机再怎么访问都是同一个ip。 t…...

编程日记 2026/1/31 0:18:06

ffmpeg基础知识入门

文章目录 📦 1. **容器（Container）**✅ 定义：✅ 举例：✅ 功能： 📶 2. **媒体流（Stream）**✅ 定义：✅ 举例：✅ 流和容器关系： &#x1…...

编程日记 2026/1/26 21:17:47

c++项目网络聊天服务器实现；QPS测试

源码 https://github.com/DBWGLX/SZU_system_programming 文章目录技术设计编码JSON的替换Protobuf 网络线程池更高效率网络字节序的考虑send可能无法一次性发送全部数据！EPOLLHUP , EPOLLERR 的正确处理 IO数据库操作的更高性能开发日志2025.3a.粘包问题 2025.4b…...

编程日记 2026/1/31 18:29:16

rnn的音频降噪背后技术原理

rnniose: 这个演示展示了 RNNoise 项目，说明了如何将深度学习应用于噪声抑制。其核心理念是将经典的信号处理方法与深度学习结合，打造一个小巧、快速的实时噪声抑制算法。它不需要昂贵的 GPU —— 在树莓派上就能轻松运行。相比传统的噪声抑制系统&…...

编程日记 2026/2/1 19:23:13

Python项目打包指南：PyInstaller与SeleniumWire的兼容性挑战及解决方案

前言前段时间做一个内网开发的需求，要求将selenium程序打包成.exe放在内网的win7上运行，在掘金搜了一圈也没有发现相关文章，因此将过程中踩到的坑记录分享一下。本文涵盖了具体打包操作、不同模块和依赖项的兼容性解决方案，以…...

编程日记 2025/11/1 20:56:05

【题解】AtCoder AT_abc400_c 2^a b^2

题目大意我们定义满足下面条件的整数 X X X 为“好整数”： 存在一个正整数对 ( a , b ) (a,b) (a,b) 使得 X 2 a ⋅ b 2 X2^a\cdot b^2 X2a⋅b2。给定一个正整数 N N N（ 1 ≤ N ≤ 1 0 18 1\le N\le 10^{18} 1≤N≤1018）&#xff…...

编程日记 2025/11/1 1:07:28

ubuntu 配置固定ip

在装服务器系统的时候，DHCP自动获取ip时，路由可能会重新分配ip，为避免产生影响，可以关闭DHCP将主机设置为静态ip。系统环境 Ubuntu 22.04-Desktop 配置方式一、如果是装的Ubuntu图形化（就是可以用鼠标操作点击应用…...

编程日记 2026/1/25 2:20:03

基于Coze平台实现工程项目管理SaaS软件的在线化客户服务

一、引言在数字化转型浪潮下，SaaS（软件即服务）模式已成为企业级软件的主流交付方式。然而，随着用户规模的增长，传统人工客服模式面临响应速度慢、人力成本高、知识库更新滞后等痛点。如何利用AI技术实现客户服务的智…...

编程日记 2026/1/26 0:20:39

vue3实现markdown工具栏的点击事件监听

这里以监听全屏事件为例监听 Vditor 编辑器的全屏事件要监听 Vditor 编辑器的全屏事件，你可以使用 Vditor 提供的 API 和事件系统。以下是几种实现方法： 方法一：使用 Vditor 的 after 钩子函数 const vditor new Vditor(editor, {afte…...

编程日记 2025/8/24 2:19:31

QT ARM开发板调试

QT 应用程序在 ARM 开发板上完全可以进行调试。以下是完整的调试方案和配置方法： 1. 调试方式概览调试方式适用场景所需工具特点GDB 远程调试代码级调试gdbserver gdb-multiarch最强大的调试方式QT Creator 远程调试集成开发环境调试QT Creator gdbserver开发体…...

编程日记 2025/8/24 19:00:44

OpenCV 图形API（21）逐像素操作

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述在OpenCV的G-API模块中，逐像素操作指的是对图像中的每个像素单独进行处理的操作。这些操作可以通过G-API的计算图（Graph …...

编程日记 2025/5/31 18:01:07

报错信息如下 com.mysql.cj.jdbc.exceptions.CommunicationsException: Communications link failureThe last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server.at com.mysql.cj.jdbc.exceptions.SQ…...

编程日记 2025/7/10 22:58:49

JavaScript学习教程，从入门到精通，JavaScript 快速入门指南（4）

JavaScript 快速入门指南

在HTML中引入JavaScript

常用输出语句

基础表达式

函数

事件

示例：改变网页文字颜色

综合案例：用户登录验证

相关文章：

JavaScript学习教程，从入门到精通，JavaScript 快速入门指南（4）

网络安全应急响应-文件痕迹排查

C++ 提高编程下

【Linux网络】网络套接字socket

tomcat的负载均衡和会话保持

ffmpeg基础知识入门

c++项目网络聊天服务器实现；QPS测试

rnn的音频降噪背后技术原理

Python项目打包指南：PyInstaller与SeleniumWire的兼容性挑战及解决方案

【题解】AtCoder AT_abc400_c 2^a b^2

ubuntu 配置固定ip

基于Coze平台实现工程项目管理SaaS软件的在线化客户服务

vue3实现markdown工具栏的点击事件监听

QT ARM开发板调试

OpenCV 图形API（21）逐像素操作

Mysql连接池报错

使用git clone的时候部分文件夹克隆不下来

批量图片文本识别重命名，批量ocr识别图片重命名，基于WPF和腾讯OCR云部署实，现批量对图片局部提取文字后重命名的操作详细步骤

Linux——冯 • 诺依曼体系结构操作系统初识

洛谷题单3-P5724 【深基4.习5】求极差最大跨度值最大值和最小值的差-python-流程图重构

Vue3 实现进度条组件

35.[前端开发-JavaScript基础]Day12-for循环中变量-华为商城-商品列表-轮播图

【蓝桥杯】十五届省赛B组c++

scala-集合2

[Linux系统编程]多线程

IntelliJ IDEA下开发FPGA——FPGA开发体验提升__下

odo18实施——销售-仓库-采购-制造-制造外包-整个流程自动化单据功能的演示教程

微信小程序生成某个具体页面的二维码

鸿蒙开发_ARKTS快速入门_语法说明_组件声明_组件手册查看---纯血鸿蒙HarmonyOS5.0工作笔记010

利用解析差异SSRF + sqlite注入 + waf逻辑漏洞 -- xyctf 2025 fate WP