JavaScript 启航：变量、数据类型与你的第一行代码

最新推荐文章于 2025-07-29 18:18:43 发布

我不管我要学前端

最新推荐文章于 2025-07-29 18:18:43 发布

阅读量491

点赞数 24

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/wozhenbang2/article/details/147377631

引言：踏入动态网页世界的钥匙

欢迎来到 JavaScript 的世界！如果你想让网页“活”起来，实现用户交互、动态更新内容、创建炫酷的动画效果，甚至开发复杂的前端应用、后端服务 (Node.js) 或移动 App，那么 JavaScript 就是你必须掌握的那把钥匙。

这个系列博客将带你从零开始，一步一个脚印地学习 JavaScript。今天，作为我们旅程的第一站，我们将搞清楚：

JavaScript 到底是什么？
如何在你自己的电脑上运行第一行 JS 代码？
什么是变量，以及如何用它来存储信息？
JavaScript 中最基本的数据类型有哪些？

准备好了吗？让我们正式启航！

一、JavaScript 是什么？它和 Java 有关系吗？

首先，划重点：JavaScript 和 Java 没有任何关系！这就像“雷锋”和“雷峰塔”一样，只是名字恰好有点像。

JavaScript (简称 JS): 是一种轻量级的、解释型的、基于原型的、面向对象的脚本语言。
- 脚本语言：通常不需要编译，由解释器（比如浏览器里的 JS 引擎）直接读取一行、执行一行。
- 主要运行环境：浏览器！这是 JS 的主战场，它能直接操作网页的 HTML 结构和 CSS 样式。
- 也能运行在：服务器端 (Node.js)、桌面应用 (Electron) 等。
核心作用：赋予网页交互能力。比如：响应用户的点击、在不刷新页面的情况下更新内容 (AJAX)、实现动画效果、验证表单数据等。

二、你的第一个 JS “游乐场”：在哪运行代码？

学习编程，动手实践最重要。你有两种非常方便的方式来运行你的第一行 JS 代码：

1. 浏览器开发者工具 (Developer Tools)

这是最快、最直接的方式，每个现代浏览器都有。

如何打开：在浏览器页面上右键点击，选择“检查”或“审查元素”，然后切换到“控制台”(Console) 标签页。或者直接按 F12 键。
如何使用：你会看到一个 > 或类似的提示符。直接在后面输入 JS 代码，按 Enter 键，代码就会立即执行，并显示结果。

   // 在控制台里输入下面这行，然后按 Enter
   console.log("你好，JavaScript 世界！");

console.log() 是一个非常有用的命令，用于在控制台打印信息，是你学习和调试 JS 的好帮手。

2. HTML 文件中的 <script> 标签

你可以将 JS 代码嵌入到 HTML 文件中，让它在页面加载时执行。

方式一：内联脚本 (Inline Script)

   <!DOCTYPE html>
   <html>
   <head>
       <title>我的第一个 JS 页面</title>
   </head>
   <body>
       <h1>看！JS 在这里！</h1>

       <script>
           // 把你的 JS 代码直接写在 <script> 标签里
           alert("欢迎来到我的网站！"); // alert 会弹出一个提示框
       </script>

   </body>
   </html>

将这段代码保存为一个 .html 文件（比如 index.html），然后用浏览器打开它，你就会看到一个弹窗。

方式二：外部脚本 (External Script) (推荐)

当代码量变多时，最好把 JS 代码单独放在一个 .js 文件中，然后在 HTML 里引用它。这样更清晰、更易于维护。

创建一个 main.js 文件，内容如下：
javascript // main.js console.log("外部 JS 文件被加载了！"); alert("这是来自外部文件的问候！");

在你的 HTML 文件中，使用 <script> 标签的 src 属性来引入它：

<!DOCTYPE html>
<html>
<head>
<title>引入外部 JS</title>
</head>
<body>
<h1>看！外部 JS！</h1>
{: id="20250420231930-7936zs9" updated="20250420231930"}

<!-- src 指向你的 JS 文件路径 -->
<script src="main.js"></script>
</body>
</html>

用浏览器打开这个 HTML 文件，你会先在控制台看到输出，然后看到弹窗。

三、代码的基本单元：语句与注释

语句 (Statement): JavaScript 代码由一系列语句组成，每条语句执行一个特定的任务。通常，一条语句以分号 ; 结尾（虽然在很多情况下可以省略，但建议初学者始终加上分号，以避免潜在问题）。
```
let message = "Hello"; // 这是一条赋值语句
console.log(message); // 这是一条函数调用语句
```
注释 (Comment): 用于解释代码，方便自己和他人阅读。注释会被 JS 引擎忽略，不会执行。
- 单行注释: 以 // 开始，直到行尾。
- 多行注释: 以 /* 开始，以 */ 结束。
```
// 这是单行注释
let age = 18; // 可以在语句后面写注释

/*
  这是
  一个
  多行注释
*/
```

四、数据的“容器”：变量 (Variable)

想象一下，你需要临时存储一个数字或者一段文字，稍后还要用它，怎么办？用变量！变量就像一个带标签的盒子，你可以往里面放东西（数据），并通过标签（变量名）找到它。

在 JavaScript 中，我们主要使用 let 和 const 来声明变量（var 是旧的方式，我们稍后会了解它的不同，但现在优先使用 let 和 const）。

let: 声明一个可以被重新赋值的变量。

let myName; // 声明一个名为 myName 的变量，此时它的值是 undefined
myName = "Alice"; // 给 myName 赋值（把 "Alice" 放进盒子里）
console.log(myName); // 输出: Alice

myName = "Bob"; // 可以修改盒子里的内容
console.log(myName); // 输出: Bob

const: 声明一个常量。一旦赋值后，其值（对于基本类型）或引用（对于对象/数组）就不能再改变。常量在声明时必须初始化（赋值）。

const pi = 3.14159; // 声明一个常量 pi 并赋值
console.log(pi); // 输出: 3.14159

// 尝试修改常量会报错：
// pi = 3.14; // Uncaught TypeError: Assignment to constant variable.

const user = { name: "Charlie" };
console.log(user.name); // 输出: Charlie
// 对于对象或数组，const 保证的是变量指向的内存地址不变，但对象内部的属性可以修改
user.name = "David";
console.log(user.name); // 输出: David
// 但不能让 user 指向另一个对象
// user = { name: "Eve" }; // Uncaught TypeError: Assignment to constant variable.

变量命名规则:
- 必须以字母、下划线 (_) 或美元符号 ($) 开头。
- 后面可以跟字母、数字、下划线或美元符号。
- 区分大小写 (myName 和 myname 是两个不同的变量)。
- 不能使用 JavaScript 的关键字和保留字（如 let, const, if, for 等）。
- 推荐使用驼峰命名法 (camelCase)，例如 firstName, totalAmount。

五、数据的“种类”：基本数据类型

JavaScript 中的数据有不同的类型，表示不同种类的信息。我们先认识几个最基本的：

String (字符串): 用于表示文本。用单引号 ('...') 或双引号 ("...") 包裹起来。

let greeting = "Hello";
let target = 'World';
let phrase = greeting + ", " + target + "!"; // 可以用 + 连接字符串
console.log(phrase); // 输出: Hello, World!

Number (数字): 用于表示整数或小数（浮点数）。
```
let count = 10;
let price = 99.9;
let quantity = 5;
let total = price * quantity; // 可以进行数学运算
console.log(total); // 输出: 499.5
```
- 特殊的数字值：Infinity (正无穷), -Infinity (负无穷), NaN (Not a Number，表示一个非数值，比如 0 / 0 的结果)。

Boolean (布尔值): 只有两个值：true (真) 和 false (假)。通常用于表示条件判断的结果。

let isActive = true;
let isLoggedIn = false;
let age = 20;
let isAdult = age >= 18; // 比较运算的结果是布尔值
console.log(isAdult); // 输出: true

Undefined: 表示一个变量已声明但尚未被赋值时的默认值。它只有一个值，就是 undefined。
```
let something;
console.log(something); // 输出: undefined
```
Null: 表示一个有意设置的“空值”或“无值”。它也只有一个值，就是 null。它与 undefined 不同，null 是开发者主动赋予的。
```
let noValue = null;
console.log(noValue); // 输出: null
```