JavaScript基础语法：初学者指南

zjw
  2025-01-15 11:00 2025-01-15 11:00 创建   2025-07-10 13:19:01 2025-07-10 13:19:01 更新      

JavaScript基础语法：初学者指南

🚀 引言

欢迎来到JavaScript的世界！如果你是编程初学者，或者对Web开发充满好奇，那么JavaScript绝对是你不可错过的一门语言。它被誉为”Web的活化剂“，让网页从静态的展示变为动态的交互，为用户带来更丰富的体验。从简单的网页动画到复杂的Web应用程序，JavaScript无处不在。

本篇文章将带你从零开始，掌握JavaScript的基础语法，为你的编程之旅打下坚实的基础。

🤔 什么是JavaScript？

JavaScript（通常缩写为JS）是一种轻量级的、解释型的或即时编译型的编程语言。它最初被设计用于开发Web页面，使其具有交互性。然而，随着技术的发展，JavaScript的应用范围已经远远超出了浏览器，现在它也可以在服务器端（通过Node.js）、移动应用程序（通过React Native、Ionic等）甚至桌面应用程序（通过Electron）中运行。

✨ JavaScript的特点

特点 说明
解释型语言 无需预先编译，代码可以直接在浏览器或其他JavaScript运行时环境中执行
弱类型语言 变量的数据类型在运行时自动确定，你不需要显式声明变量的类型
基于原型的面向对象 与传统的基于类的面向对象语言不同，JavaScript通过原型链实现继承
事件驱动 能够响应用户的操作（如点击、键盘输入）或浏览器事件
跨平台 可以在多种操作系统和设备上运行

🔗 如何在HTML中引入JavaScript？

在Web开发中，JavaScript通常与HTML和CSS协同工作。HTML负责网页结构，CSS负责样式，而JavaScript则负责行为和交互。你可以在HTML文件中通过以下几种方式引入JavaScript代码：

1. 内部JavaScript

将JavaScript代码直接嵌入到HTML文件的<script>标签中。通常建议将<script>标签放置在<body>标签的底部，</body>标签之前，这样可以确保HTML内容先加载，避免JavaScript在操作DOM元素时出现错误。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
    <title>内部JavaScript示例</title>
</head>
<body>
    <h1>欢迎学习JavaScript！</h1>

    <script>
        // 你的JavaScript代码将在这里
        console.log("Hello, JavaScript!");
        alert("这是一个内部JavaScript弹窗！");
    </script>
</body>
</html>

2. 外部JavaScript

将JavaScript代码保存为独立的.js文件，然后在HTML文件中通过<script>标签的src属性引入。这种方式有助于代码的组织和复用，也是实际开发中推荐的做法。

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
    <title>外部JavaScript示例</title>
</head>
<body>
    <h1>外部JavaScript文件示例</h1>

    <script src="script.js"></script>
</body>
</html>

script.js文件内容：

1
2
3
// script.js
console.log("Hello from external JavaScript file!");
alert("这是一个外部JavaScript弹窗！");

3. 行内JavaScript（不推荐）

将JavaScript代码直接作为HTML元素的属性值。这种方式通常用于简单的事件处理，但在大型项目中不推荐使用，因为它会使HTML和JavaScript代码混淆，难以维护。

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
    <title>行内JavaScript示例</title>
</head>
<body>
    <button onclick="alert('你点击了我！')">点击我</button>
</body>
</html>

📝 JavaScript基本语法

1. 变量

变量用于存储数据。在JavaScript中，你可以使用var、let和const关键字来声明变量。

🔧 变量声明关键字

关键字 作用域 可重新赋值 变量提升 推荐使用
var 函数作用域 ✅ ✅ ❌
let 块级作用域 ✅ ❌ ✅
const 块级作用域 ❌ ❌ ✅ 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var name = "Alice";
let age = 30;
const PI = 3.14159;

console.log(name); // Alice
console.log(age);  // 30
console.log(PI);   // 3.14159

age = 31;
console.log(age);  // 31

// PI = 3.14; // 错误：Assignment to constant variable.

const person = { name: "Bob" };
person.name = "Charlie"; // 可以修改对象内部属性
console.log(person.name); // Charlie

2. 数据类型

JavaScript有七种基本数据类型（原始类型）和一种复杂数据类型（对象）。

🔢 原始类型

类型 说明 示例
String 文本数据 "Hello", 'World'
Number 数字（整数和浮点数） 10, 3.14
Boolean 布尔值 true, false
Undefined 未定义 let x;
Null 空值 let y = null;
Symbol 唯一标识符 Symbol('id')
BigInt 大整数 10n

🏗️ 复杂类型

类型 说明 示例
Object 对象 { name: "Alice", age: 30 }
Array 数组 [1, 2, 3]
Function 函数 function greet() { } 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let str = "Hello";
let num = 123;
let bool = true;
let und = undefined;
let nul = null;
let sym = Symbol('description');
let big = 9007199254740991n;

let obj = { key: "value" };
let arr = [1, 2, 3];
function greet() { console.log("Hi!"); }

console.log(typeof str); // string
console.log(typeof num); // number
console.log(typeof bool); // boolean
console.log(typeof und); // undefined
console.log(typeof nul); // object (历史遗留问题)
console.log(typeof sym); // symbol
console.log(typeof big); // bigint
console.log(typeof obj); // object
console.log(typeof arr); // object (数组也是对象)
console.log(typeof greet); // function

3. 运算符

JavaScript支持多种运算符，用于执行各种操作。

🧮 运算符类型

类型 运算符 说明
算术运算符 +, -, *, /, %, ** 数学运算
赋值运算符 =, +=, -=, *=, /= 赋值操作
比较运算符 ==, ===, !=, !==, >, < 比较操作
逻辑运算符 &&, `
位运算符 &, ` , ^, ~`, <<, >>
一元运算符 ++, --, +, - 单操作数运算 
1
2
3
4
5
6
7
8
9
let a = 10;
let b = 5;

console.log(a + b); // 15
console.log(a === 10); // true
console.log(a > b && b < 10); // true

a++;
console.log(a); // 11

4. 条件语句

条件语句用于根据不同的条件执行不同的代码块。

🔀 if…else if…else

1
2
3
4
5
6
7
8
9
let score = 85;

if (score >= 90) {
    console.log("优秀");
} else if (score >= 60) {
    console.log("及格");
} else {
    console.log("不及格");
}

🔄 switch语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let day = "Monday";

switch (day) {
    case "Monday":
        console.log("星期一");
        break;
    case "Tuesday":
        console.log("星期二");
        break;
    case "Wednesday":
        console.log("星期三");
        break;
    default:
        console.log("其他日子");
}

5. 循环

循环用于重复执行代码块。

🔁 for循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 基本for循环
for (let i = 0; i < 5; i++) {
    console.log("第" + (i + 1) + "次循环");
}

// for...of循环（遍历数组）
let fruits = ["apple", "banana", "cherry"];
for (let fruit of fruits) {
    console.log(fruit);
}

// for...in循环（遍历对象属性）
let person = { name: "Alice", age: 30 };
for (let key in person) {
    console.log(key + ": " + person[key]);
}

🔄 while和do…while循环

1
2
3
4
5
6
7
8
9
10
11
12
13
// while循环
let count = 0;
while (count < 3) {
    console.log("while循环: " + count);
    count++;
}

// do...while循环
let num = 0;
do {
    console.log("do...while循环: " + num);
    num++;
} while (num < 3);

6. 函数

函数是可重用的代码块，用于执行特定的任务。

📋 函数声明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 基本函数声明
function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet("Alice")); // Hello, Alice!

// 函数表达式
let multiply = function(a, b) {
    return a * b;
};

console.log(multiply(3, 4)); // 12

// 箭头函数（ES6）
let divide = (a, b) => a / b;
console.log(divide(10, 2)); // 5

// 带默认参数的函数
function createUser(name, age = 18) {
    return {
        name: name,
        age: age
    };
}

console.log(createUser("Bob")); // { name: "Bob", age: 18 }
console.log(createUser("Alice", 25)); // { name: "Alice", age: 25 }

7. 数组

数组是用于存储多个值的有序集合。

📦 数组操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 创建数组
let fruits = ["apple", "banana", "cherry"];

// 访问元素
console.log(fruits[0]); // apple

// 修改元素
fruits[1] = "grape";
console.log(fruits); // ["apple", "grape", "cherry"]

// 添加元素
fruits.push("orange"); // 末尾添加
fruits.unshift("mango"); // 开头添加
console.log(fruits); // ["mango", "apple", "grape", "cherry", "orange"]

// 删除元素
fruits.pop(); // 删除末尾元素
fruits.shift(); // 删除开头元素
console.log(fruits); // ["apple", "grape", "cherry"]

// 数组方法
let numbers = [1, 2, 3, 4, 5];

// map方法
let doubled = numbers.map(x => x * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// filter方法
let evenNumbers = numbers.filter(x => x % 2 === 0);
console.log(evenNumbers); // [2, 4]

// reduce方法
let sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15

8. 对象

对象是键值对的集合，用于存储和组织数据。

🏗️ 对象操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 创建对象
let person = {
    name: "Alice",
    age: 30,
    city: "New York",
    greet: function() {
        return "Hello, I'm " + this.name;
    }
};

// 访问属性
console.log(person.name); // Alice
console.log(person["age"]); // 30

// 修改属性
person.age = 31;
person["city"] = "Boston";

// 添加新属性
person.job = "Developer";

// 删除属性
delete person.city;

// 对象方法
console.log(person.greet()); // Hello, I'm Alice

// 对象解构（ES6）
let { name, age } = person;
console.log(name, age); // Alice 31

🎯 实践项目：简单的计算器

让我们创建一个简单的计算器来巩固所学知识：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
<head>
    <title>简单计算器</title>
    <style>
        .calculator {
            width: 300px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 8px;
        }
        .display {
            width: 100%;
            height: 40px;
            margin-bottom: 10px;
            font-size: 18px;
            text-align: right;
        }
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 5px;
        }
        button {
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <input type="text" class="display" id="display" readonly>
        <div class="buttons">
            <button onclick="clearDisplay()">C</button>
            <button onclick="appendToDisplay('(')">(</button>
            <button onclick="appendToDisplay(')')">)</button>
            <button onclick="appendToDisplay('/')">/</button>
            
            <button onclick="appendToDisplay('7')">7</button>
            <button onclick="appendToDisplay('8')">8</button>
            <button onclick="appendToDisplay('9')">9</button>
            <button onclick="appendToDisplay('*')">*</button>
            
            <button onclick="appendToDisplay('4')">4</button>
            <button onclick="appendToDisplay('5')">5</button>
            <button onclick="appendToDisplay('6')">6</button>
            <button onclick="appendToDisplay('-')">-</button>
            
            <button onclick="appendToDisplay('1')">1</button>
            <button onclick="appendToDisplay('2')">2</button>
            <button onclick="appendToDisplay('3')">3</button>
            <button onclick="appendToDisplay('+')">+</button>
            
            <button onclick="appendToDisplay('0')">0</button>
            <button onclick="appendToDisplay('.')">.</button>
            <button onclick="calculate()" style="grid-column: span 2;">=</button>
        </div>
    </div>

    <script>
        function appendToDisplay(value) {
            document.getElementById('display').value += value;
        }

        function clearDisplay() {
            document.getElementById('display').value = '';
        }

        function calculate() {
            try {
                let result = eval(document.getElementById('display').value);
                document.getElementById('display').value = result;
            } catch (error) {
                document.getElementById('display').value = 'Error';
            }
        }
    </script>
</body>
</html>

📚 总结

通过本篇文章的学习，你已经掌握了JavaScript的基础语法：

✅ 学到的内容

  1. 变量和数据类型：了解如何声明变量和使用不同的数据类型
  2. 运算符和表达式：掌握各种运算符的使用方法
  3. 控制流：学会使用条件语句和循环
  4. 函数：理解函数的定义和调用
  5. 数组和对象：掌握数据结构的操作
  6. 实践项目：创建了一个简单的计算器

🚀 下一步学习建议

  1. DOM操作：学习如何操作网页元素
  2. 事件处理：响应用户交互
  3. 异步编程：理解Promise和async/await
  4. ES6+特性：学习现代JavaScript语法
  5. 框架学习：探索React、Vue等前端框架

💡 练习建议

  1. 尝试修改计算器代码，添加更多功能
  2. 创建简单的游戏（如猜数字）
  3. 制作动态的网页效果
  4. 练习数组和对象的高级操作

记住，编程是一门实践的艺术。多写代码，多调试，你的JavaScript技能会越来越熟练！

希望这篇文章对你学习JavaScript有所帮助！如果有任何问题，欢迎在评论区讨论。

  • 标题: JavaScript基础语法：初学者指南
  • 作者: zjw
  • 创建于 : 2025-01-15 11:00:00
  • 更新于 : 2025-07-10 13:19:01
  • 链接: https://blog.zjw6.cn/javascript_basic_syntax/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
目录
JavaScript基础语法：初学者指南
  1. JavaScript基础语法：初学者指南
    1. 🚀 引言
    2. 🤔 什么是JavaScript？
      1. ✨ JavaScript的特点
    3. 🔗 如何在HTML中引入JavaScript？
      1. 1. 内部JavaScript
      2. 2. 外部JavaScript
      3. 3. 行内JavaScript（不推荐）
    4. 📝 JavaScript基本语法
      1. 1. 变量
      2. 2. 数据类型
      3. 3. 运算符
      4. 4. 条件语句
      5. 5. 循环
      6. 6. 函数
      7. 7. 数组
      8. 8. 对象
    5. 🎯 实践项目：简单的计算器
    6. 📚 总结
      1. ✅ 学到的内容
      2. 🚀 下一步学习建议
      3. 💡 练习建议