一、回顾与本篇目标
前面五篇，我们学习了 HTML（结构）和 CSS（样式）。你已经能写出结构清晰、样式美观的静态页面。
但“静态”意味着页面像一张打印出来的纸——用户只能看，不能互动。点击按钮没反应，输入文字没响应，数据不会更新。
JavaScript 就是让页面“活起来”的语言。 它是前端三基石中的第三个，负责行为与交互。
本篇的目标：
- 知道 JavaScript 写在哪里（
<script>标签） - 理解什么是变量，学会用
let声明变量 - 掌握三种基本数据类型：字符串、数字、布尔值
- 学会用
console.log()输出信息进行调试 - 写出第一段能真正运行的 JavaScript 代码
二、JavaScript 写在哪里
和 CSS 类似，JavaScript 也有两种书写位置。
方式一：内部脚本（写在 <script> 标签里）
这是初学者最常用的方式。把 JS 代码写在 HTML 文件的 <script> 标签中。<script> 通常放在 </body> 闭合标签之前，也就是页面内容的最后。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>第一个 JS 程序</title>
</head>
<body>
<h1>你好</h1>
<script>
// JavaScript 代码写在这里
alert('欢迎来到 JavaScript 的世界！');
</script>
</body>
</html>为什么 <script> 放在 </body> 前面？
因为浏览器是按从上到下的顺序解析 HTML 的。如果 <script> 放在 <head> 里，浏览器会先执行 JS 代码，再去渲染页面的可见内容。如果 JS 代码试图操作某个 HTML 元素（比如获取一个按钮），但那个元素还没被渲染出来，就会出错。放在 </body> 前面，可以确保所有 HTML 元素都已经存在，JS 可以安全地操作它们。
方式二：外部脚本（写在独立的 .js 文件里）
和 CSS 的外部样式表一样，这是实际项目中的标准做法。把 JS 代码单独保存在一个 .js 文件中，然后用 <script> 标签的 src 属性引入。
第一步：创建 JS 文件
新建一个文件叫 script.js，内容如下：
alert('欢迎来到 JavaScript 的世界！');第二步：在 HTML 中引入
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>外部脚本演示</title>
</head>
<body>
<h1>你好</h1>
<script src="script.js"></script>
</body>
</html>注意：如果 <script> 标签使用了 src 属性引入外部文件，就不要在标签内部再写 JS 代码了——内部的代码会被忽略。
练习初期：我们主要使用内部脚本（写在 <script> 标签里），因为所有代码在一个文件里，方便查看和实验。等你做稍大一点的项目时，自然会切换到外部文件。
三、输出与调试：alert() 和 console.log()
在深入学习之前，你需要一个方法来“看到”JS 代码的运行结果。这就像学 HTML 时要打开浏览器看页面效果一样重要。
alert()：弹窗显示
弹出一个带有提示信息和“确定”按钮的对话框。
<script>
alert('你好，这是弹出消息！');
</script>打开页面，会弹出一个对话框，显示“你好，这是弹出消息！”。点击“确定”后对话框消失。
用途：直观，适合演示。但频繁弹窗会干扰用户，真实项目中很少使用。
console.log()：控制台输出（调试利器）
这是最重要的调试方法。它把信息输出到浏览器的“开发者工具”控制台中，不会影响页面的正常显示。
<script>
console.log('这条信息会出现在控制台里');
console.log(123);
console.log('可以输出多个值');
</script>如何查看控制台输出：
- 在浏览器中打开你的 HTML 页面。
- 按 F12（Mac 用户按
Cmd + Option + I），打开开发者工具。 - 点击顶部的 “Console”（控制台）标签。
- 你会看到刚才用
console.log()输出的内容。
从本篇开始，请养成在控制台查看输出结果的习惯。 后面的所有 JS 代码，你都可以在控制台中看到执行结果。如果你写的代码没有按预期运行，第一步就是打开控制台看有没有报错信息。
四、变量：存储数据的盒子
变量是编程中最基础的概念。你可以把它想象成一个贴着标签的盒子，标签就是变量名，盒子里放的就是数据。
声明变量：let
在 JavaScript 中，用 let 关键字来创建一个变量：
let name;这行代码的意思是：创建一个名为 name 的变量（盒子），目前里面是空的。
赋值：用 = 把数据放进盒子
name = '张三';= 在这里不是“等于”，而是赋值运算符。它的意思是：把右边的值放进左边的变量里。
声明和赋值可以一步完成：
let age = 25;
let greeting = '你好，世界！';
let isStudent = true;使用变量：直接用变量名
变量一旦创建并赋值，就可以在代码里使用它：
<script>
let name = '张三';
let age = 25;
console.log(name); // 控制台输出：张三
console.log(age); // 控制台输出：25
console.log(name + '今年' + age + '岁'); // 控制台输出：张三今年25岁
</script>变量命名规则
- 只能包含字母、数字、下划线
_和美元符号$。 - 不能以数字开头：
1name不合法，name1合法。 - 区分大小写：
name和Name是两个不同的变量。 - 不能用 JavaScript 的保留字：比如
let、if、function等。 - 命名习惯：使用驼峰命名法（camelCase）——第一个单词小写，后面每个单词首字母大写。例如：
userName、studentAge、isLoggedIn。
变量可以重新赋值
用 let 声明的变量，内容可以被改变：
let score = 80;
console.log(score); // 80
score = 95; // 重新赋值，不需要写 let
console.log(score); // 95注意：第二次给 score 赋值时，前面不需要再写 let。因为变量已经创建过了，直接使用变量名赋值即可。如果写了 let score = 95;，浏览器会报错——同一个变量名不能在同一作用域内重复声明。
五、三种基本数据类型
变量盒子里的数据有不同的“类型”。初学者先掌握最基础的三种。
1. 字符串（String）
字符串就是文本，必须用引号包裹。单引号或双引号都可以，但要成对使用。
let name = '张三'; // 单引号
let greeting = "你好"; // 双引号
let message = 'He said "Hello"'; // 如果字符串里有双引号，外层用单引号字符串之间可以用 + 拼接：
let firstName = '张';
let lastName = '三';
let fullName = firstName + lastName; // '张三'
console.log(fullName);
2. 数字（Number）
数字就是数值，不需要加引号。加引号就变成字符串了。
let age = 25; // 数字
let price = 19.9; // 小数也是数字
let sum = 10 + 20; // 可以做数学运算，sum 的值是 30
数字和字符串的区别很关键：
let a = 10;
let b = '10';
console.log(a + 5); // 15（数字加法）
console.log(b + 5); // '105'（字符串拼接，"10" + "5" → "105"）
给数字加引号，它就变成了字符串，+ 的含义也从“数学加法”变成了“字符串拼接”。
3. 布尔值（Boolean）
布尔值只有两个：true（真）和 false（假）。不需要加引号。
let isStudent = true;
let isLoggedIn = false;
console.log(isStudent); // true
布尔值通常用来表示“是或否”、“开或关”这样的状态。后面学习 if 条件判断时，布尔值是核心。
类型速记表
| 类型 | 中文 | 示例 | 加不加引号 |
|---|---|---|---|
String |
字符串 | '你好'、"Hello" |
必须加 |
Number |
数字 | 25、3.14 |
不加 |
Boolean |
布尔值 | true、false |
不加 |
六、本篇综合实战：一个会自我介绍的程序
下面这段代码综合运用了变量、数据类型、字符串拼接和控制台输出。请手敲并在浏览器控制台中查看结果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>JS 入门实战</title>
</head>
<body>
<h1>JavaScript 入门实战</h1>
<p>请按 F12 打开控制台查看输出结果。</p>
<script>
// 1. 声明变量并赋值
let userName = '张三';
let userAge = 28;
let userCity = '上海';
let isLearningFrontend = true;
let learningHoursPerDay = 3;
// 2. 用 console.log 输出信息
console.log('===== 用户信息 =====');
console.log('姓名：' + userName);
console.log('年龄：' + userAge);
console.log('城市：' + userCity);
console.log('正在学习前端：' + isLearningFrontend);
console.log('每天学习时长：' + learningHoursPerDay + ' 小时');
// 3. 计算和拼接
let learningHoursPerWeek = learningHoursPerDay * 7;
console.log('每周学习时长：' + learningHoursPerWeek + ' 小时');
// 4. 修改变量值
learningHoursPerDay = 5; // 加大学习强度
learningHoursPerWeek = learningHoursPerDay * 7;
console.log('调整后每周学习时长：' + learningHoursPerWeek + ' 小时');
// 5. 字符串拼接出完整句子
let summary = userName + '住在' + userCity + '，今年' + userAge + '岁，正在学习前端。';
console.log(summary);
</script>
</body>
</html>代码解析：
- 第 1 部分：声明了 5 个变量，分别存姓名（字符串）、年龄（数字）、城市（字符串）、是否在学习（布尔值）、每日学习时长（数字）。
- 第 2 部分：用
console.log()把变量值逐一输出到控制台。+用于拼接字符串和变量。 - 第 3 部分：用
*（乘号）计算出每周学习时长，把结果存进新变量并输出。 - 第 4 部分：修改了每日学习时长的值，重新计算每周时长。注意第二次赋值没有写
let。 - 第 5 部分：把所有信息拼接成一句完整的话输出。
打开这个页面，按 F12 → Console，你应该能看到类似下面的输出：
===== 用户信息 =====
姓名：张三
年龄：28
城市：上海
正在学习前端：true
每天学习时长：3 小时
每周学习时长：21 小时
调整后每周学习时长：35 小时
张三住在上海，今年28岁，正在学习前端。七、本篇动手练习
练习 1：创建变量练习
新建 practice6-1.html，在 <script> 中声明三个变量：你的名字（字符串）、你的年龄（数字）、你是否喜欢前端（布尔值）。用 console.log() 把三个值分别输出。
练习 2：字符串拼接练习
新建 practice6-2.html，声明变量 firstName 和 lastName，然后用 + 把它们拼成完整的姓名存入变量 fullName，输出它。再拼出一句话：“我叫XXX，我来自XXX”，输出。
练习 3：数字运算练习
新建 practice6-3.html，声明两个数字变量，分别计算它们的和、差、积、商（用 +、-、*、/），把结果分别用 console.log() 输出。输出时加上有意义的文字说明，比如 '和：' + sum。
练习 4：变量重新赋值练习
新建 practice6-4.html，声明一个变量 count = 10，输出它。然后把 count 改成 20，再次输出。接着把 count 改成 count + 5，再次输出（结果应该是 25）。确认每次输出结果正确。
八、本篇小结
这一篇你学会了 JavaScript 最基础的概念：
- 书写位置：内部
<script>标签（放在</body>前面）和外部.js文件。 alert()弹出提示框，console.log()输出到控制台（调试利器，按 F12 查看）。- 变量：用
let声明，=赋值，可以重新赋值（不需要再写let）。 - 变量命名：区分大小写，驼峰命名法，不能以数字开头。
- 三种基本数据类型：字符串（文本，加引号）、数字（数值，不加引号）、布尔值（
true/false，不加引号）。 - 字符串拼接：用
+可以把字符串和变量连在一起。
从今天起，你的网页不再是死的。你可以让浏览器执行你的指令、存储数据、计算结果并输出。JavaScript 的世界远比这广阔，但变量的创建和操作，是一切复杂逻辑的地基。打好这个地基，后面的学习会顺利很多。
下一篇预告
下一篇，我们将学习如何用 JavaScript 操作页面上的 HTML 元素。你会学到 document.getElementById() 获取元素、.textContent 修改文字内容、.style 动态修改样式，以及 onclick 点击事件——让按钮真正“动”起来。届时，HTML、CSS、JS 三条线将首次交汇，你会亲眼看到一个完整的“点击按钮改变页面内容”的交互流程。
前端·零基础入门专题，每周更新。
暂无评论内容