JavaScript 的组成与书写方式
一、什么是 JavaScript？
1. JavaScript 简介
JavaScript 是一种解释型、动态类型、面向对象的脚本语言。
最初 JavaScript 被设计出来，是为了让网页能够实现简单的交互，例如：
点击按钮弹出提示
表单数据验证
图片轮播
动态修改网页内容
随着发展，现在 JavaScript 已经不仅仅用于浏览器：
前端开发（网页交互）
后端开发（Node.js）
移动端开发
桌面应用开发
游戏开发
小程序开发
例如：
alert("Hello JavaScript");运行后浏览器会弹出：
Hello JavaScript二、JavaScript 在网页中的作用
一个完整网页通常由三个部分组成：
| 技术 | 作用 | 类比 |
|---|---|---|
| HTML | 页面结构 | 人的骨架 |
| CSS | 页面样式 | 人的衣服 |
| JavaScript | 页面行为 | 人的动作 |
例如：
HTML：
<button>点击我</button>CSS：
button { color:red; }JavaScript：
alert("你点击了按钮");三者结合：
HTML 创建按钮
CSS 美化按钮
JavaScript 控制点击后的行为
三、JavaScript 的组成
JavaScript 主要由三个部分组成：
JavaScript = ECMAScript + DOM + BOM1. ECMAScript（JavaScript 核心）
什么是 ECMAScript？
ECMAScript 是 JavaScript 的标准规范。
简单理解：
ECMAScript 规定了 JavaScript 的语法和基本功能。
例如：
变量：
let name = "张三";函数：
function sayHello(){ console.log("Hello"); }数组：
let arr = [1,2,3];这些都是 ECMAScript 规定的内容。
ECMAScript 包含内容
（1）变量
保存数据：
let age = 20;（2）数据类型
JavaScript 常见数据类型：
基本数据类型
number string boolean undefined null symbol bigint例如：
let num = 10; let str = "JavaScript"; let flag = true;（3）运算符
例如：
let a = 10; let b = 20; console.log(a+b);输出：
30（4）流程控制
判断：
if(age>=18){ console.log("成年人"); }循环：
for(let i=0;i<5;i++){ console.log(i); }（5）函数
函数可以封装重复代码：
function add(a,b){ return a+b; } console.log(add(10,20));输出：
302. DOM（文档对象模型）
什么是 DOM？
DOM（Document Object Model）
中文：
文档对象模型
浏览器会把 HTML 页面转换成一个对象结构。
例如：
HTML：
<h1 id="title"> 学习JavaScript </h1>JavaScript：
let title = document.getElementById("title"); title.innerHTML="Hello JS";页面内容会改变。
DOM 可以做什么？
修改 HTML 内容
document.body.innerHTML="Hello";修改 CSS 样式
box.style.color="red";添加事件
例如点击按钮：
button.onclick=function(){ alert("点击成功"); }3. BOM（浏览器对象模型）
什么是 BOM？
BOM：
Browser Object Model
浏览器对象模型。
主要用于操作浏览器。
例如：
弹窗
alert("提示信息");浏览器地址跳转
location.href="https://www.baidu.com";获取浏览器窗口大小
window.innerWidth;四、JavaScript 的书写方式
JavaScript 有三种书写方式：
行内式
内部式
外部式
1. 行内 JavaScript
直接写在 HTML 标签内部。
例如：
<button onclick="alert('你好')"> 点击 </button>点击按钮：
你好优点
简单方便。
缺点
代码混乱，不方便维护。
实际开发中很少使用。
2. 内部 JavaScript
把 JavaScript 写在 HTML 的<script>标签里面。
例如：
<!DOCTYPE html> <html> <head> <title> JS学习 </title> </head> <body> <h1> JavaScript </h1> <script> alert("Hello JS"); </script> </body> </html>script 标签位置
通常放在：
<body> ... <script> </script> </body>原因：
浏览器解析 HTML 时：
先加载页面内容
最后执行 JS
这样可以提高页面加载速度。
3. 外部 JavaScript（推荐）
把 JS 单独写到.js文件中。
例如：
目录：
项目 │ ├── index.html │ └── main.jsmain.js：
alert("Hello JavaScript");index.html：
<script src="main.js"></script>外部 JS 优点
1. 结构清晰
HTML：
负责结构
CSS：
负责样式
JS：
负责逻辑
符合：
结构、表现、行为分离
2. 方便维护
多个网页可以共享一个 JS 文件。
例如：
common.js多个页面：
<script src="common.js"></script>3. 浏览器缓存
外部 JS 文件会被浏览器缓存，提高加载速度。
五、JavaScript 注释
注释不会被执行。
作用：
解释代码
方便阅读
方便维护
1. 单行注释
语法：
// 这是一个注释 let age=18;2. 多行注释
语法：
/* 这是多行注释 可以写很多内容 */ let name="Tom";六、JavaScript 的代码规范
1. 区分大小写
JavaScript 严格区分大小写。
正确：
let name="张三";错误：
let Name="张三";二者不是同一个变量。
2. 每条语句建议加分号
推荐：
let age=20; console.log(age);虽然 JS 可以省略：
let age=20但是规范建议添加。
3. 使用小驼峰命名
变量：
let userName="Tom";函数：
function getUserInfo(){ }七、JavaScript 执行环境
JavaScript 可以运行在：
1. 浏览器环境
例如：
Chrome
Edge
Firefox
浏览器提供：
JavaScript + DOM + BOM2. Node.js 环境
Node.js 让 JavaScript 可以脱离浏览器运行。
例如：
console.log("Hello Node");可以直接在电脑运行。
八、JavaScript 学习路线
推荐学习顺序：
JavaScript基础 ↓ 变量和数据类型 ↓ 运算符 ↓ 流程控制 ↓ 函数 ↓ 数组 ↓ 对象 ↓ DOM操作 ↓ BOM操作 ↓ 事件 ↓ ES6+ ↓ 异步编程 ↓ Promise ↓ Ajax ↓ Vue/React九、总结
JavaScript 是前端开发的核心语言。
它主要由：
ECMAScript ↓ JavaScript核心语法 DOM ↓ 操作网页内容 BOM ↓ 操作浏览器组成。
JavaScript 的三种书写方式：
| 方式 | 特点 | 推荐 |
|---|---|---|
| 行内式 | 直接写标签中 | ⭐⭐ |
| 内部式 | script标签中 | ⭐⭐⭐ |
| 外部式 | 独立.js文件 | ⭐⭐⭐⭐⭐ |
实际开发中推荐：
HTML负责结构，CSS负责样式，JavaScript负责行为，三者分离开发。
这篇作为 JS 入门第一篇博客，后续可以继续写：
《JavaScript变量与数据类型详解》
《JavaScript运算符大全》
《JavaScript流程控制语句》
《JavaScript函数详解》
《JavaScript对象与数组》
《JavaScript DOM操作详解》
这样可以形成完整的 JS 学习笔记体系。
