搞懂 JavaScript：从零开始了解它是什么 – wiki基地

作者： /

搞懂 JavaScript：从零开始了解它是什么

想象一下，你正在浏览一个网站。页面上不仅仅有文字和图片，还有可以点击的按钮、滚动的图片轮播、实时更新的数据、弹出的小窗口，甚至可以在线玩的游戏。是什么让这一切“动”起来，让网页变得如此生动和交互？答案就是 JavaScript。

如果你是编程领域的初学者，或者对网页开发充满好奇，你可能已经听说过 JavaScript 这个名字。它无处不在，是现代 Web 开发的核心技术之一。但对于初学者来说，JavaScript 到底是什么？它是如何工作的？学习它需要了解哪些基础知识？这篇文章将带你从零开始，一步步揭开 JavaScript 的神秘面纱。

我们的目标不是让你立即成为 JavaScript 大师，而是帮助你建立一个坚实的基础认知：了解 JavaScript 是什么，它能做什么，以及学习它需要掌握的最最核心的概念。 准备好了吗？让我们开始这段探索之旅。

第一站：JavaScript 是什么？它为什么如此重要？

要理解 JavaScript 是什么，首先得把它放在 Web 开发的语境中。一个现代网页通常由三个主要部分组成：

  1. HTML (HyperText Markup Language)： 负责页面的结构和内容。就像建筑物的框架和砖块，规定了哪里是标题、哪里是段落、哪里是图片等等。
  2. CSS (Cascading Style Sheets)： 负责页面的样式和布局。就像建筑物的装修和外观设计，规定了文字的颜色、大小、字体，图片的边框，元素的排列方式等等。
  3. JavaScript： 负责页面的行为和交互。就像建筑物里的电力系统、电梯、自动门等，让静态的结构和样式“活”起来，响应用户的操作，执行特定的功能。

简单来说，JavaScript 是一种脚本语言。它的主要目的是让网页具有交互性。在它出现之前，网页基本上是静态的，只能显示信息。而 JavaScript 的出现，彻底改变了这一点，让开发者可以在用户的浏览器中运行代码，根据用户的行为（点击、鼠标移动、表单输入等）来改变页面的内容或外观，与服务器进行通信等等。

为什么 JavaScript 如此重要？

  • 无处不在： 几乎所有的现代网站都使用 JavaScript。它是前端开发（用户直接看到和交互的部分）不可或缺的技术。
  • 全栈能力： 随着 Node.js 的出现，JavaScript 不仅可以在浏览器中运行（前端），也可以在服务器端运行（后端）。这意味着你可以用同一种语言开发网站的两个主要部分，极大地提高了开发效率和可能性。
  • 丰富的生态系统： JavaScript 拥有庞大而活跃的社区，以及海量的框架和库（如 React, Vue, Angular 用于前端；Express, NestJS 用于后端），可以帮助开发者快速构建复杂应用。
  • 跨平台： 结合其他技术，JavaScript 甚至可以用于开发桌面应用（Electron）和移动应用（React Native, NativeScript），真正实现了“一次学习，到处开发”的愿景。

所以，学习 JavaScript 不仅仅是学习一门编程语言，更是打开了通往现代 Web 开发以及更广阔的软件开发领域的大门。

第二站：JavaScript 在哪里运行？（客户端与服务器端）

理解 JavaScript 的运行环境是重要的第一步。

1. 客户端 (Client-side) JavaScript：在浏览器中运行

这是 JavaScript 最初也是最主要的运行环境。当你访问一个网页时，浏览器会下载 HTML、CSS 和 JavaScript 文件。浏览器内置了一个 JavaScript 引擎（例如 Chrome 的 V8 引擎，Firefox 的 SpiderMonkey 引擎），它负责解析和执行 JavaScript 代码。

  • 用途： 操纵网页元素（DOM 操作）、响应用户事件（点击、鼠标移动）、验证表单数据、与服务器异步通信（AJAX, Fetch API）、创建动态效果、在用户端存储数据（Cookies, Local Storage）等。
  • 特点： 直接在用户的设备上运行，无法直接访问服务器的文件系统或操作系统底层资源（出于安全考虑）。

2. 服务器端 (Server-side) JavaScript：使用 Node.js 运行

Node.js 是一个让 JavaScript 运行在浏览器 外部 的环境。它使用了与 Chrome 相同的 V8 引擎。通过 Node.js，JavaScript 拥有了服务器端编程语言的能力。

  • 用途： 构建 Web 服务器、处理数据库操作、处理文件系统、构建 API 接口、执行后端逻辑等等。
  • 特点： 可以访问服务器资源，处理大量并发请求，是构建后端服务、命令行工具等的强大选择。

对于初学者来说，我们通常从学习客户端 JavaScript 开始，因为它能让你直接看到代码对网页产生的效果，反馈更直观。本文也将主要聚焦于客户端 JavaScript 的基础概念。

第三站：如何开始编写和运行 JavaScript 代码？

不需要安装复杂的开发环境，你可以用非常简单的方式开始你的第一个 JavaScript 程序。

方法一：在浏览器开发者工具的 Console 中直接运行

现代浏览器都内置了开发者工具。打开任何网页，按下 F12 键（或右键点击页面选择“检查”/“检查元素”），找到 “Console”（控制台）标签页。这就是一个可以直接输入和执行 JavaScript 代码的“沙盒”环境。

在控制台中输入：
javascript
console.log("Hello, JavaScript!");
然后按回车。你会在下一行看到输出结果：”Hello, JavaScript!”。console.log() 是一个非常常用的命令，用于在控制台输出信息，这对于调试代码非常有用。

方法二：在 HTML 文件中使用 <script> 标签

这是在网页中嵌入 JavaScript 的标准方法。

创建一个简单的 HTML 文件（例如 index.html），用任何文本编辑器打开，输入以下内容：

“`html




我的第一个 JavaScript 页面

欢迎学习 JavaScript!

这是一个静态段落。


“`

将文件保存为 .html 格式，然后用浏览器打开它。
你会看到：
1. 页面的标题和段落。
2. 一个按钮。
3. 当你打开浏览器的开发者工具，切换到 Console 标签页，你会看到输出 “页面加载完成！”。
4. 当你点击那个按钮时，会弹出一个小窗口显示 “按钮被点击了！你好，世界！”。

这段简单的代码展示了 JavaScript 如何：
* 在页面加载时执行（console.log）。
* 找到页面上的特定元素（document.getElementById）。
* 监听用户的操作（addEventListener）。
* 在用户操作发生时执行预定的动作（弹出 alert 窗口）。

<script> 标签的位置：
通常，<script> 标签可以放在 <head> 或 <body> 中。
* 放在 <head> 中时，建议加上 defer 或 async 属性，以避免脚本下载和执行阻塞页面渲染。
* 放在 <body> 结束标签 </body> 之前是常见的做法，这样可以确保在脚本执行时，页面上的 HTML 元素已经被浏览器解析完毕，脚本可以直接访问和操作这些元素。上面的例子就是采用了这种方式。

方法三：外部 JavaScript 文件

将 JavaScript 代码放在单独的 .js 文件中是更常用和推荐的方式，特别是当代码量较大时。这有助于组织代码，并可以在多个 HTML 页面中重用同一段 JavaScript 代码。

  1. 创建一个新的文本文件（例如 script.js），将上面的 JavaScript 代码剪切进去：

    “`javascript
    // 这是一段 JavaScript 代码 (在外部文件)
    console.log(“外部脚本已加载！”);

    // 找到页面上的按钮
    const button = document.getElementById(‘myButton’);

    // 当按钮被点击时，执行一个函数
    button.addEventListener(‘click’, function() {
    alert(“按钮被点击了！你好，世界！”);
    });
    “`

  2. 修改 index.html 文件，将 <script> 标签的内容替换为指向外部文件的链接：

    “`html
    <!DOCTYPE html>


    我的第一个 JavaScript 页面 (外部文件)

    欢迎学习 JavaScript!

    这是一个静态段落。




    “`

现在，当你打开 index.html，浏览器会加载 script.js 文件并执行其中的代码，效果与之前相同。

选择一个你喜欢的方式（或者从 Console 开始，然后过渡到 HTML 文件）来编写和运行代码，这是实践和理解概念的关键。

第四站：JavaScript 的核心概念（编程基础）

学习任何编程语言，都需要掌握一些基本的概念，它们是构建程序的“积木”。JavaScript 的核心概念包括：

1. 变量 (Variables)

变量就像是给数据起的名字，用于存储和引用数据。你可以把变量想象成一个盒子，你可以把数据放进这个盒子，然后通过盒子的名字来找到或改变里面的数据。

在 JavaScript 中，使用 let 和 const 关键字来声明变量（旧版本使用 var，但现在推荐使用 let 和 const）。

  • let： 声明的变量可以被重新赋值。
    “`javascript
    let age = 25; // 声明一个名为 age 的变量，并赋值 25
    console.log(age); // 输出 25

    age = 26; // 重新赋值
    console.log(age); // 输出 26
    “`

  • const： 声明一个常量，一旦赋值后就不能再被重新赋值。这用于表示值不会改变的数据。
    “`javascript
    const PI = 3.14159; // 声明一个名为 PI 的常量
    console.log(PI); // 输出 3.14159

    // PI = 3.0; // 这行代码会报错，因为 PI 是常量，不能重新赋值
    “`

  • var (不推荐用于新代码)： 早期 JavaScript 使用 var。它的作用域规则比较特殊，容易引起混淆，因此在新代码中通常避免使用。

变量命名规则：
* 变量名可以包含字母、数字、下划线 _ 和美元符号 $。
* 变量名不能以数字开头。
* 变量名不能使用 JavaScript 的保留关键字（如 if, for, function, let, const 等）。
* 变量名区分大小写（myVariable 和 myvariable 是不同的变量）。
* 推荐使用驼峰命名法（camelCase），即第一个单词小写，后面每个单词的首字母大写，例如 myFirstName。

2. 数据类型 (Data Types)

数据是程序处理的基本单位。JavaScript 有几种内置的数据类型，用于表示不同种类的数据。它们分为两大类：原始类型 (Primitive types) 和 对象类型 (Object type)。

原始类型 (Primitive types)：

  • Number (数字)： 用于表示整数或浮点数。
    javascript
    let count = 10; // 整数
    let price = 19.99; // 浮点数
    let bigNumber = 1e6; // 科学计数法 (1 * 10^6 = 1000000)

  • String (字符串)： 用于表示文本。可以用单引号 (')、双引号 (") 或反引号 (`) 包围。反引号字符串（模板字面量）支持嵌入变量和多行文本。
    javascript
    let name = "张三";
    let message = '你好，世界！';
    let greeting = `我的名字是 ${name}。`; // 使用模板字面量嵌入变量
    console.log(greeting); // 输出：我的名字是 张三。

  • Boolean (布尔值)： 只有两个值：true (真) 和 false (假)，常用于逻辑判断。
    javascript
    let isStudent = true;
    let hasPermission = false;

  • Undefined (未定义)： 表示变量已声明但未赋值时的默认值，或者函数没有明确返回值时的返回值。
    javascript
    let city; // 声明了但未赋值
    console.log(city); // 输出 undefined

  • Null (空)： 表示一个空值或“不存在”的值，是开发者故意赋给变量的。
    javascript
    let car = null; // 故意将 car 设置为空

  • Symbol (符号)： ES6 (ECMAScript 2015) 引入的新类型，表示独一无二的值，常用于对象的属性键，避免命名冲突。
    javascript
    const id = Symbol('id');
    const anotherId = Symbol('id');
    console.log(id === anotherId); // 输出 false

  • BigInt (任意精度整数)： ES2020 引入的新类型，用于表示任意大的整数，可以超出 Number 类型能安全表示的范围。
    javascript
    const bigNum = 12345678901234567890n; // 在数字末尾加 n

对象类型 (Object type)：

  • Object (对象)： JavaScript 中除了原始类型之外的所有值都是对象。对象是属性的集合，每个属性由“键”和“值”组成。
    javascript
    let person = {
    name: "李四", // 键: name, 值: "李四"
    age: 30, // 键: age, 值: 30
    isEmployed: true // 键: isEmployed, 值: true
    };
    console.log(person.name); // 访问属性值：输出 "李四"
    console.log(person['age']); // 另一种访问属性值的方式：输出 30

  • Array (数组)： 是一种特殊的对象，用于存储有序的集合。数组的元素通过索引（从 0 开始的数字）访问。
    javascript
    let colors = ["红", "绿", "蓝"]; // 包含三个字符串的数组
    console.log(colors[0]); // 访问第一个元素：输出 "红"
    console.log(colors.length); // 数组长度：输出 3
    colors.push("黄"); // 向数组末尾添加元素
    console.log(colors); // 输出 ["红", "绿", "蓝", "黄"]

  • Function (函数)： 也是一种对象，可以被调用执行特定的任务。后面会详细介绍。

  • 还有其他内置对象，如 Date (日期), RegExp (正则表达式), Error (错误) 等等。

3. 运算符 (Operators)

运算符用于对值（操作数）执行某种操作，并产生一个结果。

  • 算术运算符 (Arithmetic Operators)： 进行数学计算。

    • + (加)
    • - (减)
    • * (乘)
    • / (除)
    • % (取余)
    • ** (幂运算)
    • ++ (自增)
    • -- (自减)
      javascript
      let x = 10;
      let y = 5;
      console.log(x + y); // 15
      console.log(x * y); // 50
      console.log(x % y); // 0
      x++; // x 变为 11

  • 赋值运算符 (Assignment Operators)： 给变量赋值。

    • = (赋值)
    • += (加等于，a += b 等同于 a = a + b)
    • -= (减等于)
    • *= (乘等于)
    • /= (除等于)
    • 等等…
      javascript
      let total = 100;
      total += 50; // total 现在是 150

  • 比较运算符 (Comparison Operators)： 比较两个值，返回布尔值 (true 或 false)。

    • == (相等，只比较值，不比较类型，可能引起类型转换)
    • != (不等，只比较值)
    • === (全等，比较值和类型，推荐使用！)
    • !== (不全等，比较值和类型，推荐使用！)
    • > (大于)
    • < (小于)
    • >= (大于或等于)
    • <= (小于或等于)
      javascript
      console.log(5 == '5'); // true (只比较值)
      console.log(5 === '5'); // false (值相同，但类型不同)
      console.log(10 > 5); // true
      console.log(10 <= 10); // true

  • 逻辑运算符 (Logical Operators)： 用于组合或修改布尔表达式。

    • && (逻辑与，AND) – 两个操作数都为 true 时结果为 true。
    • || (逻辑或，OR) – 只要一个操作数为 true 时结果为 true。
    • ! (逻辑非，NOT) – 对操作数取反。
      javascript
      let isAdult = true;
      let isMale = false;
      console.log(isAdult && isMale); // false
      console.log(isAdult || isMale); // true
      console.log(!isAdult); // false

4. 控制流 (Control Flow)

控制流结构用于决定代码的执行顺序。它们允许你根据条件选择执行不同的代码块，或者重复执行某段代码。

  • 条件语句 (Conditional Statements)：

    • if...else if...else： 根据条件的真假执行不同的代码块。
      “`javascript
      let score = 85;

      if (score >= 90) {
      console.log(“优秀”);
      } else if (score >= 60) {
      console.log(“及格”);
      } else {
      console.log(“不及格”);
      }
      // 输出：及格
      * **`switch`：** 根据表达式的值，选择执行多个代码块中的一个。常用于替代多个 `else if`。javascript
      let day = 3;
      let dayName;

      switch (day) {
      case 1:
      dayName = “星期一”;
      break; // break 关键字用于跳出 switch 语句
      case 2:
      dayName = “星期二”;
      break;
      case 3:
      dayName = “星期三”;
      break;
      default: // 如果以上情况都不匹配，执行 default
      dayName = “未知日期”;
      }
      console.log(dayName); // 输出：星期三
      “`

  • 循环语句 (Loop Statements)： 重复执行一段代码，直到满足某个条件为止。

    • for 循环： 常用于已知循环次数的情况。
      javascript
      // 打印 1 到 5
      for (let i = 1; i <= 5; i++) { // i 从 1 开始，每次循环 i 增加 1，直到 i 大于 5 停止
      console.log(i);
      }
      // 输出：1, 2, 3, 4, 5 ( each on a new line)
    • while 循环： 在执行循环体之前检查条件。
      javascript
      let count = 0;
      while (count < 3) { // 当 count 小于 3 时，继续循环
      console.log("循环次数：" + count);
      count++; // 不要忘记更新条件相关的变量，否则可能导致无限循环
      }
      // 输出：循环次数：0, 循环次数：1, 循环次数：2
    • do...while 循环： 先执行一次循环体，然后在检查条件。至少会执行一次。
      javascript
      let i = 0;
      do {
      console.log("至少执行一次");
      i++;
      } while (i < 0); // 条件为 false，但循环体已经执行了一次
      // 输出：至少执行一次
    • for...of 循环： 用于遍历可迭代对象（如数组、字符串）。
      javascript
      const fruits = ["苹果", "香蕉", "橙子"];
      for (const fruit of fruits) {
      console.log(fruit);
      }
      // 输出：苹果, 香蕉, 橙子
    • for...in 循环： 用于遍历对象的可枚举属性。
      javascript
      const car = { brand: "Toyota", model: "Camry" };
      for (const key in car) {
      console.log(key + ": " + car[key]);
      }
      // 输出：brand: Toyota, model: Camry

5. 函数 (Functions)

函数是一段封装好的、可以重复使用的代码块。通过定义函数，可以将复杂任务分解为更小的、可管理的单元，提高代码的可读性和可维护性。

定义函数：

  • 函数声明 (Function Declaration)：
    javascript
    function sayHello(name) { // 定义一个名为 sayHello 的函数，接受一个参数 name
    console.log("你好，" + name + "！");
    }

  • 函数表达式 (Function Expression)：
    javascript
    const sayGoodbye = function(name) { // 将一个匿名函数赋值给变量 sayGoodbye
    console.log("再见，" + name + "！");
    };

  • 箭头函数 (Arrow Function) – ES6： 更简洁的函数表达式写法。
    “`javascript
    const add = (a, b) => { // 定义一个函数，接受两个参数 a 和 b
    return a + b; // 返回它们的和
    };

    // 如果函数体只有一行 return 语句，可以进一步简化：
    const subtract = (a, b) => a – b;
    “`

调用函数：

通过函数名后面加上圆括号 () 来调用函数。如果函数定义时需要参数，调用时在圆括号中传入相应的值（称为实参）。

“`javascript
sayHello(“小明”); // 调用 sayHello 函数，传入 “小明” 作为参数
// 输出：你好，小明！

sayGoodbye(“小红”); // 调用 sayGoodbye 函数
// 输出：再见，小红！

let sum = add(5, 3); // 调用 add 函数，将返回值赋给变量 sum
console.log(sum); // 输出：8

console.log(subtract(10, 4)); // 输出：6
“`

参数 (Parameters) 和 返回值 (Return Values)：
* 函数定义时圆括号中的变量是参数，它们是函数内部使用的局部变量，接收外部传入的值。
* 函数可以使用 return 关键字返回一个值。当函数执行到 return 语句时，会立即停止执行并将指定的值返回到调用它的地方。如果函数没有 return 语句，或者 return 后面没有值，函数默认返回 undefined。

6. 注释 (Comments)

注释是代码中不会被执行的部分，用于解释代码的作用，提高代码的可读性。

  • 单行注释： 使用 //
    javascript
    let x = 10; // 这是一个单行注释，解释变量 x 的作用
  • 多行注释： 使用 /* ... */
    javascript
    /*
    这是一个多行注释
    可以跨越多行来解释一段代码块
    或者函数的复杂逻辑
    */
    let y = 20;

写清晰的注释是一个好习惯，可以帮助自己和他人更容易理解代码。

第五站：继续深入（简要提及）

掌握了以上核心概念，你就已经迈入了 JavaScript 的大门。但 JavaScript 的世界远不止这些。接下来，你可以学习以下更高级的概念：

  • DOM 操作 (Document Object Model Manipulation)： 这是 JavaScript 与网页 HTML 元素交互的基础。学习如何通过 JavaScript 查找、创建、修改或删除页面上的元素。
  • 事件处理 (Event Handling)： 学习如何让 JavaScript 响应用户的操作（点击、鼠标移动、键盘输入、表单提交等）或其他事件（页面加载、图片加载失败等）。
  • 异步编程 (Asynchronous JavaScript)： JavaScript 中的某些操作（如网络请求、定时器）需要时间，如果在等待这些操作完成时阻塞主线程，页面就会“卡死”。异步编程（回调函数、Promises, async/await）就是解决这个问题的方法，让程序可以在等待的同时继续执行其他任务。
  • 面向对象编程 (Object-Oriented Programming – OOP)： JavaScript 支持 OOP，你可以学习如何使用对象、原型链、类（ES6+）来组织和构建更复杂的程序。
  • 模块化 (Modules)： 学习如何将代码分成独立的文件（模块），以便于管理、复用和维护。
  • 现代 JavaScript (ES6+)： ECMAScript 是 JavaScript 的标准化名称。每年都会发布新的标准，引入许多有用的新特性（如箭头函数、类、模块、解构赋值、Promise、async/await 等）。了解并使用这些新特性可以让你写出更简洁、更强大的代码。
  • 错误处理 (Error Handling)： 学习如何使用 try...catch 等机制来捕获和处理程序运行时可能发生的错误。

当你对核心概念感到熟悉后，就可以开始学习这些进阶主题，并将 JavaScript 应用到更复杂的场景中。

第六站：实践与资源

学习编程最好的方法就是动手实践。

  • 写代码： 尝试自己写一些简单的程序，比如计算器、待办事项列表、简单的游戏等等，运用你学到的变量、数据类型、运算符、控制流和函数。
  • 阅读代码： 查看别人写的 JavaScript 代码（特别是开源项目），学习不同的编程风格和解决问题的方法。
  • 利用在线资源：
    • MDN Web Docs (Mozilla Developer Network)： JavaScript 最权威、最全面的文档，是学习和查阅的首选。
    • FreeCodeCamp, Codecademy, The Odin Project： 提供结构化的免费课程，适合初学者入门。
    • W3Schools： 提供了大量的代码示例和练习。
    • 各种在线教程、博客、YouTube 视频： 选择适合你学习风格的资源。
  • 参与社区： 在Stack Overflow、GitHub、技术论坛等社区提问和交流。

结语

“搞懂 JavaScript”是一个持续学习的过程，它需要时间和耐心。从零开始，首先理解它是什么、在哪里运行，然后扎实掌握变量、数据类型、运算符、控制流和函数这些基础概念。

不要害怕犯错，错误是学习过程中不可避免的一部分。通过不断地编写、运行、调试代码，你会逐渐建立起对 JavaScript 的直觉和理解。

JavaScript 的世界充满活力，不断发展。掌握了 JavaScript，你就掌握了让网页“动”起来的神奇能力，也为进入更广阔的软件开发领域奠定了坚实的基础。

祝你在 JavaScript 的学习之旅中取得成功！现在，就从在浏览器的控制台里输入你的第一行 console.log() 开始吧！

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部