JS 快速学习入门：从 HTML/CSS 到交互网页的进阶指南

对于刚学完 HTML 和 CSS 的小伙伴来说，JS（JavaScript）是让网页 “动起来” 的关键 —— 它能实现表单验证、动态内容更新、交互效果等 HTML/CSS 无法完成的功能。这篇文章将带你跳过复杂概念，聚焦 “实用派” 入门：从环境搭建到语法核心，再到结合网页的实战案例，帮你快速掌握 JS 基础并上手开发。

一、先搞懂：JS 怎么和 HTML/CSS 配合？

在学语法前，先明确 JS 在网页中的 “位置” 和运行方式，这是衔接 HTML/CSS 的核心。

1. JS 的 3 种引入方式（直接用 HTML 写）

和 CSS 的内联、内嵌、外部引入类似，JS 也有 3 种嵌入网页的方式，新手建议从 “外部引入” 开始（便于维护）。

（1）内嵌式（写在 HTML 的`<script>`标签里）

直接在 HTML 文件中用<script>包裹 JS 代码，通常放在<body>末尾（确保 HTML 加载完再执行 JS）：

<!DOCTYPE html>

<html>

<body>

<h1 id="title">Hello HTML/CSS!\</h1>

<!-- JS放在body末尾 -->

<script>

   // 这里写JS代码：修改h1的内容

   document.getElementById("title").innerText = "Hello JS!";

</script>

</body>

</html>

（2）外部引入（推荐！写在单独的.js 文件里）

新建一个index.js文件（和 HTML 同目录）；
在 HTML 中用<script src="路径">引入：

<!-- HTML文件 -->

<body>

<h1 id="title">Hello HTML/CSS!\</h1>

<!-- 引入外部JS -->

<script src="index.js"></script>

</body>

//index.js文件

document.getElementById("title").innerText = "JS从外部来！";

（3）内联式（写在 HTML 标签的属性里，不推荐）

直接把 JS 写在onclick等属性中，仅适合简单场景：

<button onclick="alert('你点我了！')">点我试试\</button>

2. 调试工具：用浏览器控制台看效果

写 JS 时难免出错，浏览器的 “控制台” 是调试神器：

打开网页，按F12或右键 “检查”；
切换到 “Console”（控制台）面板：

直接输入 JS 代码按回车，实时看结果；
代码出错时，这里会显示错误原因和行数。

二、JS 语法核心：30 分钟掌握最常用基础

JS 语法和 HTML/CSS 不同，但核心基础很简单，重点记 “实用高频” 的内容即可。

1. 变量与数据类型：存储数据的 “容器”

变量是用来存储数据的，比如用户输入的内容、计算结果等。

（1）声明变量：3 个关键字

关键字	特点	推荐场景
`let`	可修改、块级作用域（最常用）	存储会变化的值（如计数器、用户输入）
`const`	不可修改（常量）	存储固定值（如网址、固定参数）
`var`	全局作用域（旧语法，不推荐）	尽量不用

示例：结合网页的变量使用

// 1. 存储固定的网页标题（用const）

const pageTitle = "我的第一个JS网页";

// 2. 存储用户输入的用户名（用let，因为会变化）

let username = document.getElementById("username").value;

// 3. 修改变量的值（let可以改，const不行）

username = "新用户名";

（2）5 种常用数据类型

不用死记，通过例子理解：

let num = 100;          // 数字（整数、小数都算）

let str = "Hello JS";   // 字符串（用单引号或双引号包裹）

let isShow = true;      // 布尔值（只有true/false两种）

let arr = [1, 2, 3];    // 数组（存储多个值）

let obj = {name: "张三", age: 20}; // 对象（存储键值对，如用户信息）

举一反三：用变量存储网页中的 “商品价格” 和 “商品列表”

// 商品价格（数字类型）

let price = 99.9;

// 商品列表（数组类型，每个元素是对象）

let goodsList = [

 {name: "T恤", price: 59},

 {name: "裤子", price: 89}

];

2. 运算符：做计算或判断

和数学中的运算符类似，重点记 “赋值”“比较”“逻辑” 三类。

（1）赋值运算符（给变量赋值）

let a = 10;

a += 5; // 等价于 a = a + 5 → 结果15

a *= 2; // 等价于 a = a * 2 → 结果30

（2）比较运算符（判断两个值的关系）

常用于 “条件判断”，返回true或false：

let x = 10;

console.log(x > 5);  // true

console.log(x === 10); // 全等（值和类型都一样，推荐用===不用==）

console.log(x != 8); // true

（3）逻辑运算符（组合多个判断）

运算符	作用	示例	结果
`&&`	与（两个都为 true 才 true）	`(x>5) && (x<15)`	true
`\`		`\`	或（一个为 true 就 true）
`!`	非（取反）	`!(x===10)`	false

3. 条件语句：让 JS “做选择”

根据不同条件执行不同代码，最常用if...else和switch。

（1）if...else（多条件判断）

示例：网页表单验证（判断用户名是否为空）

<!-- HTML：用户名输入框 -->

<input type="text" id="username" placeholder="请输入用户名">

<button onclick="checkUsername()">提交</button>

// JS：验证函数

function checkUsername() {

 let username = document.getElementById("username").value;

 if (username === "") { // 条件1：为空

   alert("用户名不能为空！");

 } else if (username.length < 3) { // 条件2：长度不够

   alert("用户名至少3个字符！");

 } else { // 都不满足（条件成立）

   alert("用户名合法！");

 }

}

（2）switch（固定值匹配）

示例：根据用户选择的 “颜色” 修改网页背景

<select id="colorSelect" onchange="changeBg()">

<option value="white">白色</option>

<option value="lightblue">蓝色</option>

<option value="lightgreen">绿色</option>

</select>

function changeBg() {

 let color = document.getElementById("colorSelect").value;

 switch (color) {

   case "white":

     document.body.style.backgroundColor = "white";

     break; // 必须加break，否则会继续执行下一个case

   case "lightblue":

     document.body.style.backgroundColor = "lightblue";

     break;

   case "lightgreen":

     document.body.style.backgroundColor = "lightgreen";

     break;

 }

}

举一反三：扩展表单验证，增加 “密码是否一致” 的判断

<input type="password" id="pwd1" placeholder="密码">

<input type="password" id="pwd2" placeholder="确认密码">

<button onclick="checkPwd()">验证密码</button>

function checkPwd() {

 let pwd1 = document.getElementById("pwd1").value;

 let pwd2 = document.getElementById("pwd2").value;

 if (pwd1 === "") {

   alert("请输入密码！");

 } else if (pwd1 !== pwd2) {

   alert("两次密码不一致！");

 } else {

   alert("密码一致！");

 }

}

4. 循环语句：重复执行代码

当需要 “批量处理”（如遍历数组、生成列表）时用循环，最常用for和for...of。

（1）for 循环（适合已知循环次数）

示例：根据数组生成网页列表

<!-- HTML：空列表 -->

<ul id="goodsList"></ul>

// JS：商品数组

let goods = ["T恤", "裤子", "鞋子", "帽子"];

// 获取列表元素

let list = document.getElementById("goodsList");

// for循环遍历数组

for (let i = 0; i < goods.length; i++) {

 // 每次循环添加一个li到列表

 list.innerHTML += `<li>${goods[i]}</li>`;

}

i是 “计数器”，从 0 开始；
i < goods.length：循环条件（只要 i 小于数组长度就继续）；
i++：每次循环后 i 加 1。

（2）for...of 循环（适合遍历数组 / 字符串，更简洁）

let goods = ["T恤", "裤子", "鞋子"];

for (let item of goods) {

&#x20; console.log(item); // 依次输出：T恤、裤子、鞋子

}

举一反三：用循环计算数组中 “商品总价”

let goodsPrice = [59, 89, 129, 39];

let total = 0;

for (let price of goodsPrice) {

 total += price; // 累加每个商品价格

}

console.log("总价：" + total); // 输出：316

三、JS 核心：函数与方法（重点！）

函数是 “可重复调用的代码块”，方法是 “对象中的函数”。掌握常用函数和方法，能大幅提升开发效率。

1. 自定义函数：把重复代码 “封装” 起来

当一段代码需要多次执行（如表单验证、样式修改）时，就把它封装成函数。

（1）函数的基本语法

// 定义函数

function 函数名(参数1, 参数2) {

 // 函数体（要执行的代码）

 return 返回值; // 可选：返回函数执行结果

}

// 调用函数

函数名(实参1, 实参2);

（2）示例：封装 “计算两个数之和” 的函数

// 定义函数：参数a和b，返回它们的和

function add(a, b) {

 return a + b;

}

// 调用函数：传入实参3和5，接收返回值

let result = add(3, 5);

console.log(result); // 输出8

// 结合网页：点击按钮计算总价

function calculateTotal(price, count) {

 return price * count;

}

<button onclick="alert('总价：' + calculateTotal(99, 2))">计算2件商品总价</button>

举一反三：封装 “修改元素样式” 的函数（可复用给多个元素）

// 定义函数：参数1=元素ID，参数2=样式对象

function setStyle(elementId, styles) {

 let elem = document.getElementById(elementId);

 // 遍历样式对象，批量设置样式

 for (let key in styles) {

   elem.style\[key] = styles\[key];

 }

}

// 调用函数：修改h1和p的样式

setStyle("title", {color: "red", fontSize: "24px"});

setStyle("content", {lineHeight: "1.8", color: "#333"});

2. 常用内置函数（JS 自带，直接用）

无需定义，直接调用的函数，重点记这 3 个：

函数	作用	示例
`alert(内容)`	弹出提示框	`alert("操作成功！")`
`console.log(内容)`	在控制台输出（调试用）	`console.log("当前值：" + x)`
`prompt(提示语, 默认值)`	弹出输入框，返回用户输入的内容	`let age = prompt("请输入年龄", 18)`

3. 常用对象方法（数组、字符串、DOM）

方法是 “对象。方法名 ()” 的形式，重点掌握数组、字符串和 DOM 操作的方法。

（1）数组方法（处理批量数据）

方法	作用	示例	结果
`push(元素)`	向数组末尾添加元素	`let arr = [1,2]; arr.push(3)`	[1,2,3]
`filter(条件)`	筛选符合条件的元素	`arr.filter(item => item > 2)`	[3]
`map(处理函数)`	对每个元素做处理，返回新数组	`arr.map(item => item * 2)`	[2,4,6]
`join(分隔符)`	把数组转成字符串	`arr.join("-")`	"1-2-3"

示例：用数组方法筛选网页中的 “低价商品”

let goods = [

 {name: "T恤", price: 59},

 {name: "裤子", price: 89},

 {name: "袜子", price: 9}

];

// 筛选价格<30的商品

let cheapGoods = goods.filter(item => item.price < 30);

console.log(cheapGoods); // 输出：[{name: "袜子", price: 9}]

（2）字符串方法（处理文本）

方法	作用	示例	结果
`length`	获取字符串长度	`"hello".length`	5
`includes(子串)`	判断是否包含子串	`"hello".includes("he")`	true
`trim()`	去除首尾空格	`" js ".trim()`	"js"
`replace(旧值, 新值)`	替换字符	`"hello".replace("h", "H")`	"Hello"

示例：处理用户输入的 “手机号”（去除空格）

let phone = document.getElementById("phone").value;

// 去除空格并判断长度是否为11

let cleanPhone = phone.trim();

if (cleanPhone.length !== 11) {

 alert("手机号格式错误！");

}

（3）DOM 操作方法（核心！控制 HTML 元素）

DOM（文档对象模型）是 JS 操作 HTML 的接口，重点记 “获取元素”“修改内容 / 样式”“绑定事件” 三类方法。

操作类型	方法	示例
获取元素	`getElementById(id)`	`document.getElementById("title")`（通过 ID 获取，最常用）
	`querySelector(选择器)`	`document.querySelector(".box")`（支持 CSS 选择器，如.class、#id）
修改内容	`innerText`	纯文本内容（`elem.innerText = "新文本"`）
	`innerHTML`	带 HTML 标签的内容（`elem.innerHTML = "<b>加粗</b>"`）
修改样式	`style.样式名`	`elem.style.color = "red"`（样式名用驼峰式，如 fontSize）
	`classList.add/remove`	操作 CSS 类（`elem.classList.add("active")`）
绑定事件	`addEventListener(事件名, 函数)`	动态绑定事件（比内联 onclick 更灵活）

综合示例：点击按钮切换网页主题（DOM + 函数 + 样式）

<!-- HTML -->

<button id="themeBtn">切换深色模式\</button>

<div class="content">这是网页内容\</div>

<!-- CSS -->

<style>

 .light { background: white; color: #333; }

 .dark { background: #333; color: white; }

</style>

<!-- JS -->

<script>

 // 1. 获取元素

 let btn = document.getElementById("themeBtn");

 let content = document.querySelector(".content");

 let isDark = false; // 标记当前是否为深色模式

 // 2. 绑定点击事件（用addEventListener）

 btn.addEventListener("click", function() {

   if (isDark) {

     // 切换浅色模式

     document.body.className = "light";

     btn.innerText = "切换深色模式";

     isDark = false;

   } else {

     // 切换深色模式

     document.body.className = "dark";

     btn.innerText = "切换浅色模式";

     isDark = true;

   }

 });

</script>

举一反三：扩展成 “点击按钮显示 / 隐藏密码”

<input type="password" id="pwd">

<button id="togglePwd">显示密码\</button>

let pwd = document.getElementById("pwd");

let btn = document.getElementById("togglePwd");

let isShow = false;

btn.addEventListener("click", function() {

 if (isShow) {

   pwd.type = "password"; // 隐藏密码

   btn.innerText = "显示密码";

   isShow = false;

 } else {

   pwd.type = "text"; // 显示密码

   btn.innerText = "隐藏密码";

   isShow = true;

 }

});

四、实战案例：用 JS 写一个简单的待办清单

结合前面的所有知识点，我们来写一个可 “添加”“删除” 待办的网页，巩固 JS 基础。

完整代码（HTML+CSS+JS）

<!DOCTYPE html>

<html>

<head>

<title>JS待办清单</title>

<style>

   .todo-container { width: 400px; margin: 20px auto; }

   #todoInput { width: 280px; padding: 8px; }

   #addBtn { padding: 8px 16px; background: #008cba; color: white; border: none; cursor: pointer; }

   .todo-item { display: flex; justify-content: space-between; margin: 8px 0; padding: 8px; border: 1px solid #eee; }

   .deleteBtn { color: red; border: none; background: none; cursor: pointer; }

</style>

</head>

<body>

<div class="todo-container">

<h2>待办清单</h2>

<input type="text" id="todoInput" placeholder="请输入待办事项">

<button id="addBtn">添加</button>

<div id="todoList"></div>

</div>

<script>

   // 1. 获取元素

   let input = document.getElementById("todoInput");

   let addBtn = document.getElementById("addBtn");

   let todoList = document.getElementById("todoList");

   // 2. 添加待办事项的函数

   function addTodo() {

     let text = input.value.trim(); // 去除空格

     if (text === "") { // 验证非空

       alert("请输入待办事项！");

       return; // 为空则不执行后续代码

     }

     // 创建待办项（用innerHTML添加HTML）

     todoList.innerHTML += `

       <div class="todo-item">

         <span>${text}</span>

         <button class="deleteBtn">删除</button>

       </div>

     `;

     // 清空输入框

     input.value = "";

     // 给新添加的删除按钮绑定事件（委托给父元素）

     bindDeleteEvent();

   }

   // 3. 删除待办事项的函数

   function bindDeleteEvent() {

     // 获取所有删除按钮

     let deleteBtns = document.querySelectorAll(".deleteBtn");

     // 遍历按钮，绑定点击事件

     for (let btn of deleteBtns) {

       btn.addEventListener("click", function() {

         // 删除当前按钮的父元素（todo-item）

         this.parentElement.remove();

       });

     }

   }

   // 4. 绑定添加按钮的点击事件

   addBtn.addEventListener("click", addTodo);

   // 支持按Enter键添加

   input.addEventListener("keydown", function(e) {

     if (e.key === "Enter") {

       addTodo();

     }

   });

 </script>

</body>

</html>

案例要点解析

DOM 操作：用getElementById获取输入框和按钮，用innerHTML动态生成待办项；
函数封装：把 “添加”“删除” 功能分别封装成addTodo()和bindDeleteEvent()；
事件绑定：既用了addEventListener绑定点击 / 键盘事件，又处理了 “动态元素的事件委托”；
表单验证：用trim()去除空格，判断输入是否为空。

五、新手快速上手的 3 个建议

“先抄后改”：先复制本文的示例代码，运行成功后再修改（如改文字、改样式、加条件），逐步理解逻辑；
聚焦 “网页交互”：不要纠结于纯 JS 语法题，多写 “点击按钮、修改内容、表单验证” 等网页场景的代码；
善用文档：遇到不懂的方法，查MDN 文档（最权威，有中文版本）。

通过本文的学习，你已经掌握了 JS 和 HTML/CSS 的配合方式、核心语法、常用函数 / 方法，以及实战案例的开发思路。接下来就动手修改案例，比如给待办清单加 “完成状态切换”，或者写一个简单的计算器 —— 多练多改，JS 入门其实很简单！

JS 快速入门：从 HTML/CSS 到交互网页的基础指南

阅读选项

JS 快速学习入门：从 HTML/CSS 到交互网页的进阶指南

一、先搞懂：JS 怎么和 HTML/CSS 配合？

1. JS 的 3 种引入方式（直接用 HTML 写）

（1）内嵌式（写在 HTML 的<script>标签里）

（2）外部引入（推荐！写在单独的.js 文件里）

（3）内联式（写在 HTML 标签的属性里，不推荐）

2. 调试工具：用浏览器控制台看效果

二、JS 语法核心：30 分钟掌握最常用基础

1. 变量与数据类型：存储数据的 “容器”

（1）声明变量：3 个关键字

（2）5 种常用数据类型

2. 运算符：做计算或判断

（1）赋值运算符（给变量赋值）

（2）比较运算符（判断两个值的关系）

（3）逻辑运算符（组合多个判断）

3. 条件语句：让 JS “做选择”

（1）if...else（多条件判断）

（2）switch（固定值匹配）

4. 循环语句：重复执行代码

（1）for 循环（适合已知循环次数）

（2）for...of 循环（适合遍历数组 / 字符串，更简洁）

三、JS 核心：函数与方法（重点！）

1. 自定义函数：把重复代码 “封装” 起来

（1）函数的基本语法

（2）示例：封装 “计算两个数之和” 的函数

2. 常用内置函数（JS 自带，直接用）

3. 常用对象方法（数组、字符串、DOM）

（1）数组方法（处理批量数据）

（2）字符串方法（处理文本）

（3）DOM 操作方法（核心！控制 HTML 元素）

四、实战案例：用 JS 写一个简单的待办清单

完整代码（HTML+CSS+JS）

案例要点解析

五、新手快速上手的 3 个建议

JS 快速学习入门：从 HTML/CSS 到交互网页的进阶指南

一、先搞懂：JS 怎么和 HTML/CSS 配合？

1. JS 的 3 种引入方式（直接用 HTML 写）

（1）内嵌式（写在 HTML 的<script>标签里）

（2）外部引入（推荐！写在单独的.js 文件里）

（3）内联式（写在 HTML 标签的属性里，不推荐）

2. 调试工具：用浏览器控制台看效果

二、JS 语法核心：30 分钟掌握最常用基础

1. 变量与数据类型：存储数据的 “容器”

（1）声明变量：3 个关键字

（2）5 种常用数据类型

2. 运算符：做计算或判断

（1）赋值运算符（给变量赋值）

（2）比较运算符（判断两个值的关系）

（3）逻辑运算符（组合多个判断）

3. 条件语句：让 JS “做选择”

（1）if...else（多条件判断）

（2）switch（固定值匹配）

4. 循环语句：重复执行代码

（1）for 循环（适合已知循环次数）

（2）for...of 循环（适合遍历数组 / 字符串，更简洁）

三、JS 核心：函数与方法（重点！）

1. 自定义函数：把重复代码 “封装” 起来

（1）函数的基本语法

（2）示例：封装 “计算两个数之和” 的函数

2. 常用内置函数（JS 自带，直接用）

3. 常用对象方法（数组、字符串、DOM）

（1）数组方法（处理批量数据）

（2）字符串方法（处理文本）

（3）DOM 操作方法（核心！控制 HTML 元素）

四、实战案例：用 JS 写一个简单的待办清单

完整代码（HTML+CSS+JS）

案例要点解析

五、新手快速上手的 3 个建议

微信分享二维码

猜您想看

网格布局两行代码css,完美适配任何屏幕

评论区(1条评论)

我要评论

设置

（1）内嵌式（写在 HTML 的`<script>`标签里）

（1）内嵌式（写在 HTML 的`<script>`标签里）