JavaScript是什么
2025-02-17
简介
JavaScript 是一种功能强大的脚本编程语言，作为 Web 技术的第三层，它能够：
- 为网页添加交互功能
- 处理动态内容更新
- 实现复杂的用户界面效果
Web 技术三层架构
| 层级 | 技术 | 作用 |
|---|---|---|
| 结构层 | HTML | 构建网页内容结构，定义语义 |
| 表现层 | CSS | 设计页面样式，控制布局 |
| 行为层 | JavaScript | 实现交互功能，处理动态内容 |
可以做什么
JavaScript 的核心功能包括：
- 在变量中存储有用的值
- 操作一段文本（string）
- 运行代码以相应网页中发生的特定事件
- 通过 API 扩展功能
API
浏览器内置 API
| API 类型 | 功能描述 | 应用场景 |
|---|---|---|
| DOM API | 操作 HTML 和 CSS | 动态修改页面内容和样式 |
| Geolocation API | 获取地理位置信息 | 位置服务、地图应用 |
| Canvas/WebGL | 绘制 2D/3D 图形 | 游戏、数据可视化 |
| Media API | 处理音视频 | 在线播放器、视频通话 |
第三方 API
- 社交媒体 API（Twitter、微博等）
- 地图服务 API（谷歌地图、高德地图等）
- 支付服务 API
- 数据服务 API
JS 在页面上做些什么
JavaScript 在网页中主要用于：
- 动态修改页面内容
- 响应用户交互
- 处理表单数据
- 实现动画效果
- 与服务器通信
JS 运行次序
JavaScript 代码的执行遵循以下规则：
- 按照在页面中出现的顺序从上到下执行
- 等待 DOM 加载完成后执行（使用 DOMContentLoaded）
- 异步代码的执行顺序由事件循环决定
向页面添加 JS
内部脚本
<script>
// JavaScript 代码
</script>外部脚本
<script src="script.js"></script>脚本调用策略
aysnc和 defer
为避免脚本加载阻塞页面渲染，可以使用两种策略：
- async
- defer
async
<script async src="script.js"></script>- 异步下载，不阻塞渲染
- 下载完立即执行
- 执行顺序不可控
- 适用于独立脚本
defer
<script defer src="script.js"></script>- 异步下载，不阻塞渲染
- 按顺序执行
- DOM 加载完成后执行
- 适用于依赖 DOM 的脚本
脚本调用策略小结
| 特性 | async | defer |
|---|---|---|
| 下载方式 | 异步 | 异步 |
| 执行时机 | 下载完立即执行 | DOM 就绪后执行 |
| 执行顺序 | 不保证顺序 | 按照顺序执行 |
| 适用场景 | 独立脚本 | 依赖 DOM 或其他脚本 |
注释
// 单行注释
/*
* 多行注释
* 可以写多行
*/最佳实践：
- 合理使用注释说明代码功能
- 避免过多的注释
- 保持注释的及时更新