前言
作为前端宇宙的核心编程语言，JavaScript 是赋予网页生命的 “魔法咒语”—— 它让静态的 HTML 页面拥有交互、动态更新和数据处理的能力。从基础语法到逻辑分支，Day1 和 Day2 的学习如同解锁 JavaScript 本源的第一把钥匙，让我们一步步走进这门语言的核心世界。
1 叩开JavaScript的大门
1.1JavaScript是什么？
JavaScript 是运行在客户端（浏览器）的脚本语言，无法独立运行，必须嵌入 HTML 中由浏览器解析执行。它的核心能力是实现页面的动态交互：小到按钮点击反馈，大到多媒体控制、动画效果，都是它的 “拿手好戏”。
1.2如何书写JavaScript代码？
- 内部形式：用<script>标签包裹代码，直接写在HTML文件中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部 JS</title>
<script>
let i = 10;
console.log(i); // 控制台输出 10
</script>
</head>
<body></body>
</html>
- 外部形式：将代码写在.js文件中，通过<script src="文件路径"></script> 引入。
⚠️ 注意：如果
- 注释：单行注释用 //（快捷键Ctrl+/），多行注释用 /* */，是代码的 “说明书”，不影响执行。
结束符：; 表示一段代码结束，多数情况下可省略，用回车替代。
JavaScript提供了多种和用户/开发者交互的方式：
| alert() | 页面弹出警示框，给用户提示 | alert('你好，JS！') |
| document.write() | 向页面输出内容，可解析 HTML 标签 | document.write('<h4>今日特价</h4>') |
| console.log() | 开发者调试用，输出到浏览器控制台 | console.log('程序员专属输出') |
| prompt() | 弹窗提示用户输入内容，返回输入值 | let name = prompt('请输入你的姓名：') |
变量是存放数据的容器，常量则是 “不可修改的容器”，二者是 JavaScript 处理数据的基础。
- 变量声明：推荐使用let（ES6 新增），替代存在缺陷的 var。
| 作用域 | 函数作用域 | 块级作用域 |
| 重复声明 | 允许(覆盖原有值) | 不允许(同一作用域报错) |
| 全局挂载 | 挂载到window | 不会挂载到window |
// 声明并赋值变量
let age = 18;
age = 19; // 变量可更新
console.log(age); // 输出 19
- 常量声明：用const,声明时必须赋值，且不可修改。
const pi = 3.14;
// pi = 3.1415; // 报错：常量无法重新赋值
- 变量命名规则：
只能包含字母、数字、下划线、$，不能以数字开头；遵守小驼峰（如 userName），见名知义。
JavaScript 的数据类型分为基本类型，核心包括：
- 数字型（number）：整数、小数，用 typeof 检测
let num = 18.88;
console.log(typeof num); // 输出 "number"
- 字符串型（string）：用单引号、双引号或反引号包裹，反引号支持多行和变量拼接（模板字符串）。
let age = 88;
console.log(`Pink老师今年${age}岁`); // 输出 "Pink老师今年88岁"
- 布尔型（boolean）：只有 true（真）和 false（假）两个值。
- 未定义型（undefined）：只声明变量不赋值时，变量默认值为 undefined。
运算符是处理数据的 “工具”，核心包括：
算术运算符：+ – * / %（加减乘除取余）；
赋值运算符：=`` += ``-=（如 x += 5 等价于 x = x + 5）；
自增 / 自减：x++（后自增）、++x（前自增），单独使用无差别，开发中 x++ 更常用；
比较运算符：> < >= <= ==（值相等）===（值 + 类型相等），返回布尔值。
⚠️ 运算优先级：括号 > 自增 / 自减 > 算术运算符 > 比较运算符 > 赋值运算符。
2 解锁JavaScript的逻辑思维
如果说 前面是 “认识数据”，下面就是 “学会处理数据”—— 核心是类型转换和分支语句，让代码拥有 “判断和决策” 的能力。
2.1类型转换：让数据"兼容"
JavaScript 是弱类型语言，变量的类型由值决定，而实际开发中（如表单、prompt 输入）常需要转换类型才能处理。
| 数字型 | Number(数据) | Number(‘123’) // 123；Number('abc') // NaN |
| 整数型 | parseInt(数据) | parseInt('12.5px') // 12（保留整数，数字开头才有效） |
| 浮点型 | parseFloat(数据) | parseFloat('12.5px') // 12.5（保留小数） |
| 字符串型 | String(数据)/变量.toString() | String(123) // '123'；(10).toString(16) // 'a' |
| 布尔型 | Boolean(数据) | 6 种情况为 false：false、0、''、null、undefined、NaN，其余均为 true |
- 算术运算符（- * /）、比较运算符（> ==）、+ 正号：自动转数字型；
console.log(8 – '3'); // 5；'3' 自动转数字
console.log(+'123'); // 123；+ 正号触发转数字
- + 作为拼接符：一侧是字符串，整体转字符串；
console.log('Pink' + 18); // 'Pink18'
!（逻辑非）：自动转布尔型
console.log(!0); // true；0 转布尔为 false，! 取反为 true
2.2分支语句：让代码"做选择"
分支语句是代码的 “逻辑大脑”，根据条件真假执行不同代码块，核心包括 if、三元运算符、switch。
适用于区间判断，分为单分支、多分支：
// 单分支：满足条件才执行
let score = +prompt('请输入高考成绩：');
if (score >= 700) {
alert('恭喜考入节点星火！');
}
// 多分支：多个区间判断
if (score >= 90) {
alert('优秀！');
} else if (score >= 70) {
alert('良好！');
} else if (score >= 60) {
alert('及格！');
} else {
alert('继续加油！');
}
⚠️ 多分支注意：条件要从大到小 / 从小到大排列，避免逻辑错误。
2. 三元运算符
简化版if-else，适用于二选一场景：
// 语法：条件 ? 表达式1 : 表达式2
let x = 100, y = 20;
let max = x > y ? x : y; // 取 x 和 y 的最大值，结果为 100
适用于等值判断，匹配case值后执行对应代码：
let fruit = prompt('请输入水果名称：');
switch (fruit) {
case '香蕉':
alert('香蕉 3 元/斤');
break; // 终止当前 case，避免穿透
case '苹果':
alert('苹果 4 元/斤');
break;
default:
alert('未查询到该水果');
}
⚠️ 注意：break 不可省略（否则会触发 case 穿透）；switch 匹配是 “全等于（===）”，值和类型都要一致。
3 循环初探：重复执行的"魔法"
末尾接触了循环的核心思想 —— 让代码重复执行，比如 while 循环：
// 重复打印 3 次内容
let i = 1;
while (i <= 3) {
console.log('月薪过万不是梦，毕业时候见英雄~');
i++; // 必须自增，否则死循环
}
4结束语
从基础语法到数据容器，从类型转换到分支判断，再到循环逻辑，我们已经走完 JavaScript 最核心的入门脉络。这些看似零散的知识点，正是前端交互世界的基石。
真正掌握它们，不是背会规则，而是能用代码实现想法：判断、计算、交互、反馈。
下一段旅程，我们将走进数组、函数、对象，让逻辑更强大、代码更优雅、结构更清晰。
前端宇宙很大，我们才刚刚启航。
