🐸 青蛙编程网
首页 / 前端 / JavaScript

JavaScript 教程

JavaScript（简称 JS） 是网页的灵魂——HTML 搭好骨架后，是 JS 让页面"动"起来：点击、弹窗、请求数据、表单验证，全靠它。全 6 章已上线，DOM 及之后的章节都配在线运行示例，零基础直接开冲！

章节目录

章节 内容 核心知识点 状态
1. JavaScript 是什么 浏览器里的编程语言 JS 是什么、在 HTML 里怎么写、控制台输出 ✅ 已上线
2. 变量与数据类型 let / const、类型与 === 变量声明、字符串/数字/布尔、严格相等 ✅ 已上线
3. 函数 代码的积木 函数定义、参数、返回值、匿名函数 ✅ 已上线
4. 操作网页：DOM 找到元素并改变它 document.getElementById、修改内容和样式 ✅ 已上线
5. 事件 响应用户的点击与输入 addEventListener、点击、输入、表单提交 ✅ 已上线
6. 综合练习 做一个网页计算器 全章知识串联，做个可运行的网页计算器 ✅ 已上线

适合谁看

  • 已学完 HTML，会写基本网页结构
  • 想让网页有交互：点击按钮有反应、输入框能验证、数据能动态显示
  • 零编程经验也可入门，JS 语法相对宽松，适合作为第一门编程语言之二

JS 的核心能力

能力 说明 典型场景
操作 DOM 找到网页元素并改内容、样式、属性 点击按钮后改变一段文字
监听事件 响应用户的点击、输入、滚动 提交表单时做验证
处理数据 变量、数组、对象、循环、条件判断 计算购物车总价
请求数据 与服务器交换数据（进阶） 加载最新文章列表

本教程的学习约定

  1. 每篇都要动手：右侧运行框（RunBox）里的代码，改一改、跑一跑，看效果立刻变化
  2. 在线即可：JS 示例都能直接在浏览器里运行，无需安装 Node.js 或任何环境
  3. 顺序学习：变量→函数→DOM→事件，递进关系，跳着看容易懵

记忆口诀

let 声明变，const 定常量；=== 严格比，函数是积木；DOM 找元素，事件响应。

动手建议

  1. 从第 1 章开始，每章代码都亲手在 RunBox 里跑一遍
  2. 完成《综合练习：网页计算器》后，试着加一个"科学计算器"模式，做平方、开方等功能
  3. 学完 JS，前端三件套就齐了——去 AI 板块 或 Python 板块 继续进阶

学完 JS，前端三件套就齐了——去 AI 板块 或 Python 板块 继续进阶 🐸