JavaScript是什么

目录

• 简介
  • Web 技术三层架构
• 可以做什么
  • API
• JS 在页面上做些什么
• JS 运行次序
• 向页面添加 JS
  • 内部脚本
  • 外部脚本
• 脚本调用策略
  • async 和 defer
  • 脚本调用策略小结
• 注释

---

简介

JavaScript 是 Web 技术的第三层，是一种脚本编程语言，用来：

• 为网页添加交互功能
• 处理动态内容更新
• 实现用户界面效果

Web 技术三层架构

层级	技术	作用
结构层	<i class=“fa-brands fa-html5”></i> HTML	构建网页内容结构，定义语义
表现层	<i class=“fa-brands fa-css3-alt”></i> CSS	设计页面样式，控制布局
行为层	<i class=“fa-brands fa-js”></i> 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 在网页中主要用于：

1. 动态修改页面内容
2. 响应用户交互
3. 处理表单数据
4. 实现动画效果
5. 与服务器通信

JS 运行次序

JavaScript 代码的执行规则：

1. 按照在页面中出现的顺序从上到下执行
2. 等待 DOM 加载完成后执行（使用 DOMContentLoaded）
3. 异步代码的执行顺序由事件循环决定

向页面添加 JS

内部脚本

<script>
  // JavaScript 代码
</script>

外部脚本

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

脚本调用策略

async 和 defer

脚本加载会阻塞页面渲染，用 async 或 defer 可以解决这一问题。

async

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

• 异步下载，不阻塞渲染
• 下载完立即执行
• 执行顺序不可控
• 适用于独立脚本

defer

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

• 异步下载，不阻塞渲染
• 按顺序执行
• DOM 加载完成后执行
• 适用于依赖 DOM 的脚本

脚本调用策略小结

特性	async	defer
下载方式	异步	异步
执行时机	下载完立即执行	DOM 就绪后执行
执行顺序	不保证顺序	按照顺序执行
适用场景	独立脚本	依赖 DOM 或其他脚本

注释

// 单行注释

/* 
 * 多行注释
 * 可以写多行
 */

写注释的几条原则：用来说明代码做什么，不要过多，代码改了注释也要跟着改。