术语图鉴/前端基础/JavaScript
←→切换Esc返回

JavaScript JavaScript (JS)

你可能会说

我想让这个按钮点一下弹个提示框,鼠标移上去变个颜色。

JavaScript 是网页的编程语言,赋予页面交互能力——响应事件、操作 DOM、请求数据、动态更新界面。

网页的「大脑」。让网页能「动起来」——点击按钮弹出窗口、输入文字实时搜索、滚动加载更多内容,这些交互逻辑都是 JavaScript 在背后运行。

也常被叫作JS脚本语言前端脚本

生活类比

HTML 是人的骨架,CSS 是外貌穿着,JavaScript 是神经系统——让你能思考、能反应。

🎮 动手试试

👇 点击按钮体验 JavaScript 的状态管理和数组操作

let count =0
const items =["苹果", "香蕉"]
选择题选择一个你认为最合适的答案

以下哪个声明方式定义的变量不能被重新赋值?

你可以这样告诉 AI

帮我用 JavaScript 实现:点击按钮后,下方内容区淡入显示,同时按钮变成「收起」状态。

容易混淆?这样区分

JavaScript JavaScript (JS)≠
Java Java

名字像但完全不同。Java 是后端/企业级语言,JavaScript 是浏览器脚本语言。

JavaScript JavaScript (JS)≠
TypeScript TS

TypeScript = JavaScript + 类型系统。TS 编译后就是 JS,多了类型检查更安全。

什么时候用

用户交互

点击、输入、拖拽、滚动等事件响应

动态更新

不刷新页面就更新内容(AJAX / Fetch)

数据处理

表单验证、数据转换、计算逻辑

什么时候不用

纯静态展示

如果页面不需要交互,纯 HTML + CSS 就够了

高性能计算

图像/视频处理、大规模计算考虑 WebAssembly 或后端

组成结构 · Anatomy

1
变量Variable

存储数据的容器:let(可变)、const(不可变)

2
函数Function

可复用的代码块,接收输入、返回输出

3
DOM 操作DOM Manipulation

用 JS 增删改查页面元素

4
事件Event

用户行为的信号:click、input、scroll、keydown

常见变体 · Variants

TypeScriptTS

JS 的超集,添加静态类型,大型项目首选

JSXJavaScript XML

React 使用的语法扩展,在 JS 里写类 HTML 标签

Node.jsServer-side JS

让 JS 跑在服务器上,不只是浏览器

典型使用场景

表单实时验证
告诉 AI「帮我写 JS:用户输入邮箱时实时检查格式,不对就显示红色提示」
无限滚动加载
告诉 AI「滚动到页面底部时自动加载下一页数据,加个 loading 动画」

延伸阅读