JavaScript程序设计基础教程该怎么学？-杰瑞科技汇

JavaScript 程序设计基础教程

前言：什么是 JavaScript？

JavaScript（简称 JS）是一种轻量级的、解释型的编程语言，它是一种脚本语言，意味着代码不需要编译,可以直接在浏览器或服务器端运行。

（图片来源网络，侵删）

在浏览器中： JavaScript 是网页的“灵魂”，负责实现页面的交互性，当你点击按钮、填写表单、看到动画效果时，背后都是 JavaScript 在工作，它和 HTML（结构）、CSS（样式）一起，构成了现代 Web 开发的三大基石。
在服务器端： 随着 Node.js 的出现，JavaScript 也可以用于编写服务器端程序，实现数据库操作、API 接口开发等。

本教程目标： 掌握 JavaScript 的核心语法和基本编程思想，能够编写简单的交互脚本，并为后续学习前端框架（如 React, Vue）或后端开发打下坚实的基础。

第一部分：环境搭建与第一个程序

在开始写代码之前，我们需要一个运行环境,最简单的方式就是使用你的浏览器。

开发环境

浏览器： 任何现代浏览器都可以，推荐使用 Google Chrome 或 Firefox,它们内置了强大的开发者工具。
代码编辑器： 一个好的编辑器能让你事半功倍，强烈推荐 Visual Studio Code (VS Code)，它免费、强大且插件丰富。
创建 HTML 文件： 在你的电脑上创建一个文件夹，在里面新建一个文件，命名为 index.html。

你的第一个 JavaScript 程序：Hello, World!

打开 index.html 文件,输入以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">My First JS</title>
</head>
<body>
    <h1>欢迎来到 JavaScript 世界</h1>
    <!-- 引入 JavaScript 文件 -->
    <script src="script.js"></script>
</body>
</html>

在同一文件夹下再创建一个文件，命名为 script.js,并输入：

（图片来源网络，侵删）

// 这是 JavaScript 的注释，解释代码的作用
// 向控制台输出一条消息
console.log("Hello, World! 欢迎学习 JavaScript!");

如何运行？ 直接用浏览器打开 index.html 文件，按 F12 (或 Ctrl+Shift+I / Cmd+Option+I) 打开开发者工具，切换到 Console（控制台） 标签页，你就能看到 "Hello, World!" 的输出。

第二部分：JavaScript 基础语法

变量

变量是存储数据值的容器，在 JavaScript 中,我们有三种声明变量的方式：

let (推荐): 声明一个块级作用域的变量,可以被重新赋值。
const: 声明一个块级作用域的常量,一旦赋值就不能再改变。
var: 旧的方式，函数级作用域,不推荐在新的项目中使用。

// 使用 let 声明变量
let myName = "张三";
let age = 25;
age = 26; // 可以重新赋值
// 使用 const 声明常量
const PI = 3.14159;
// PI = 4; // 这行代码会报错，因为常量不能修改
// 使用 var (不推荐)
var city = "北京";

数据类型

JavaScript 是一种动态类型语言,变量的类型由其存储的值决定。

Number (数字): 整数和小数。
```
let score = 100;
let price = 99.98;
```

String (字符串): 文本，用单引号或双引号包裹。

let message = '你好，JavaScript!';
let greeting = "今天天气不错。";

Boolean (布尔值): 只有两个值：true (真) 和 false (假)。
```
let isStudent = true;
let isAdult = false;
```
Undefined (未定义): 一个变量被声明了，但没有被赋值。
```
let x;
console.log(x); // 输出 undefined
```
Null (空值): 表示一个空值或“无”的值。
```
let data = null;
```
Object (对象): 复杂数据类型，用于存储键值对集合。
```
let person = {
    name: "李四",
    age: 30
};
```
Array (数组): 用于存储一个有序的值列表。
```
let colors = ['红色', '绿色', '蓝色'];
```

运算符

算术运算符: , , , , (取余), (自增), (自减)

let a = 10, b = 3;
console.log(a + b); // 13
console.log(a % b); // 1 (10 除以 3 的余数)

字符串连接符:

let firstName = "John";
let lastName = "Doe";
console.log(firstName + " " + lastName); // "John Doe"

赋值运算符: , , , ,

let num = 10;
num += 5; // 等同于 num = num + 5;  num 现在是 15

比较运算符: (等于), (不等于), (严格等于), (严格不等于), >, <, >=, <=
- 重要区别：
  - 会进行类型转换（5 == '5' 为 true）。
  - 不会进行类型转换，要求值和类型都相同（5 === '5' 为 false）。
  - 推荐总是使用和。
```
console.log(5 == '5');  // true
console.log(5 === '5'); // false
```

逻辑运算符: && (与), (或), (非)

let isAdult = true;
let hasID = false;
console.log(isAdult && hasID); // false (必须都为真才是真)
console.log(isAdult || hasID); // true (有一个为真就是真)
console.log(!isAdult);         // false (取反)

流程控制

条件语句

（图片来源网络，侵删）

let score = 85;
if (score >= 90) {
    console.log("优秀");
} else if (score >= 60) {
    console.log("及格");
} else {
    console.log("不及格");
}
// 三元运算符 (简化的 if-else)
let message = (score >= 60) ? "及格了" : "不及格";
console.log(message);

循环语句

// for 循环
for (let i = 1; i <= 5; i++) {
    console.log("这是第 " + i + " 次循环。");
}
// while 循环
let count = 0;
while (count < 3) {
    console.log("Count is: " + count);
    count++;
}
// 遍历数组
let fruits = ['苹果', '香蕉', '橙子'];
for (let fruit of fruits) {
    console.log(fruit);
}

第三部分：函数

函数是一段可以重复使用的代码块，它接收输入（参数），执行特定的任务，并可以返回一个输出（返回值）。

函数声明

// 定义一个函数
function greet(name) {
    // name 是参数
    let message = "你好, " + name + "!";
    return message; // 返回值
}
// 调用函数
let welcomeMsg = greet("小明");
console.log(welcomeMsg); // 输出: 你好, 小明!

箭头函数 (ES6 新特性，推荐)

箭头函数是更简洁的函数写法。

// 传统函数写法
function add(a, b) {
    return a + b;

JavaScript程序设计基础教程该怎么学？