JavaScript 基础教程

1. 介绍

JavaScript 是一种广泛使用的脚本语言，主要用于网页开发。它可以在客户端（浏览器）和服务器端（Node.js）运行，为开发者提供了丰富的编程工具和库。本教程将带你从零开始学习 JavaScript，包括语法、变量、函数、面向对象编程等方面的内容。

2. JavaScript 环境搭建

在开始编写 JavaScript 代码之前，你需要设置一个合适的开发环境。以下是一些常用的方法：

2.1 使用浏览器内置的开发者工具

• Chrome: 打开 Chrome 浏览器，按 F12 或者使用 Ctrl+Shift+I（Windows）或 Cmd+Opt+I（Mac）打开开发者工具。在开发者工具的 Console 标签页，你可以直接编写和运行 JavaScript 代码。

2.2 使用在线编辑器

• JSFiddle: 你可以使用 JSFiddle 或 CodePen 网站进行在线编辑和测试 JavaScript 代码。
• Repl.it: Repl.it 是一个在线编程环境，支持多种语言包括 JavaScript。

2.3 使用本地开发环境

• Visual Studio Code: 安装 Visual Studio Code，然后安装 JavaScript 插件。在 VS Code 中创建一个新的 HTML 文件，并在文件中插入 <script> 标签，编写 JavaScript 代码。
• Node.js: 安装 Node.js，使用 npm 安装所需依赖。创建一个新的项目目录，初始化一个新的 Node.js 项目，并在项目中编写 JavaScript 代码。

3. JavaScript 语法基础

3.1 基本语法

JavaScript 语法类似于其他 C 语言家族的语言，如 C++ 和 Java。下面是一些基本的语法示例：

// 输出 Hello World
console.log("Hello World");

// 变量声明
var x = 5;
let y = 10;
const z = 20;

// 函数定义
function add(a, b) {
    return a + b;
}

// 调用函数
console.log(add(3, 4));  // 输出 7

3.2 注释

JavaScript 支持单行注释和多行注释：

// 这是单行注释

/*
这是
多行注释
*/

3.3 数据类型

JavaScript 中变量可以存储多种类型的数据，包括数字、字符串、布尔值、对象、数组等。

var number = 42;           // number
var string = "Hello";      // string
var boolean = true;        // boolean
var nullVar = null;        // null
var undefinedVar = undefined; // undefined
var obj = {};              // object
var arr = [];              // array

3.4 变量和类型

在 JavaScript 中，可以使用 var、let 和 const 关键字来声明变量。const 和 let 提供了块级作用域，而 var 则是函数级作用域。

var count = 1; // 全局作用域
{
    var count = 2; // 仍属于全局作用域
    console.log(count); // 输出 2
}
console.log(count); // 输出 2

let count2 = 1; // 全局作用域
{
    let count2 = 2; // 局部作用域
    console.log(count2); // 输出 2
}
console.log(count2); // 输出 1

const price = 100; // 常量
price = 200; // 报错，不允许重新赋值

3.5 运算符

JavaScript 支持基本的算术运算符如加法（+）、减法（-）、乘法（*）、除法（/）和取余（%）。

console.log(5 + 3); // 8
console.log(5 - 3); // 2
console.log(5 * 3); // 15
console.log(5 / 3); // 1.6666666666666667
console.log(5 % 3); // 2

3.6 条件语句

JavaScript 中的条件语句包括 if、else if 和 else。它们用于根据条件执行不同的代码块。

var x = 10;
if (x < 5) {
    console.log("x 小于 5");
} else if (x < 15) {
    console.log("x 在 5 到 15 之间");
} else {
    console.log("x 大于或等于 15");
}

3.7 循环语句

JavaScript 提供了 for、while 和 do...while 循环来重复执行代码块。

// for 循环
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// while 循环
let j = 0;
while (j < 5) {
    console.log(j);
    j++;
}

// do...while 循环
let k = 0;
do {
    console.log(k);
    k++;
} while (k < 5);

4. 函数

4.1 定义函数

在 JavaScript 中，函数用于封装重复使用的代码片段。可以使用 function 关键字来定义函数。

function add(a, b) {
    return a + b;
}

console.log(add(3, 4)); // 输出 7

4.2 匿名函数

匿名函数是指没有命名的函数。它们通常用于赋值给变量或作为函数的参数。

let add = function(a, b) {
    return a + b;
};

console.log(add(3, 4)); // 输出 7

4.3 函数作用域

JavaScript 中的函数定义了一个新的作用域。在函数内部定义的变量只能在函数内部访问。

function example() {
    let x = 1;
    console.log(x); // 输出 1
}
console.log(x); // 报错，x 未定义

4.4 闭包

闭包是指一个函数可以访问其外部作用域中的变量。闭包允许函数在另一个函数的内部被定义。

function outer() {
    let count = 0;
    function inner() {
        count++;
        console.log(count);
    }
    return inner;
}

let closure = outer();
closure(); // 输出 1
closure(); // 输出 2

5. 对象和数组

5.1 对象

对象是 JavaScript 中常用的数据结构，用于存储键值对。

let person = {
    name: "Alice",
    age: 30,
    gender: "female"
};

console.log(person.name); // 输出 Alice

5.2 数组

数组是一种特殊类型的对象，用于存储一组值。

let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 输出 1
console.log(numbers.length); // 输出 5

5.3 方法

JavaScript 为数组提供了一些内建的方法，如 push、pop、shift、unshift、slice 和 splice。

let arr = [1, 2, 3];
arr.push(4); // 添加一个元素到数组末尾
arr.pop();   // 删除数组末尾的元素
arr.shift(); // 删除数组开头的元素
arr.unshift(0); // 在数组开头添加一个元素
console.log(arr); // 输出 [0, 1, 2]

6. JSON 和 JSON.parse/JSON.stringify

6.1 JSON

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。它可以用来将对象转换为字符串，或将字符串转换为对象。

let obj = {
    name: "Tom",
    age: 25
};

// 将对象转换为字符串
let jsonStr = JSON.stringify(obj);
console.log(jsonStr); // 输出 {"name":"Tom","age":25}

// 将字符串转换为对象
let newObj = JSON.parse(jsonStr);
console.log(newObj.name); // 输出 Tom

7. 事件处理

7.1 事件绑定

在网页中，可以使用 JavaScript 来处理用户的交互事件，如点击、鼠标移动等。

<button id="myButton">点击我</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
    console.log("按钮被点击了");
});
</script>

7.2 阻止默认行为

有时需要阻止浏览器的默认行为，例如在表单提交时阻止页面刷新。

<form id="myForm">
    <input type="submit" value="提交">
</form>
<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault();
    console.log("表单提交被阻止了");
});
</script>

8. 异步编程

8.1 setTimeout 和 setInterval

setTimeout 和 setInterval 是 JavaScript 中常用的异步编程方法。

setTimeout(function() {
    console.log("这是定时器的回调函数");
}, 1000); // 1秒后执行

setInterval(function() {
    console.log("每秒执行一次");
}, 1000); // 每秒执行一次

8.2 Promise

Promise 是一种处理异步操作的方式，它提供了一种更清晰的方式来处理异步操作的完成结果。

let promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        console.log("执行了 setTimeout");
        resolve("成功");
    }, 1000);
});

promise.then(function(result) {
    console.log(result); // 输出 "成功"
});

8.3 Async/Await

async/await 是一种更现代化的异步编程方式，它使得异步代码看起来像同步代码一样。

async function asyncCall() {
    return "成功";
}

async function useAsyncCall() {
    let result = await asyncCall();
    console.log(result); // 输出 "成功"
}

useAsyncCall();

8.4 异步编程示例

下面是一个完整的异步编程示例，展示了如何使用 fetch API 从服务器获取数据：

<!DOCTYPE html>
<html>
<head>
    <title>异步编程示例</title>
</head>
<body>
    <script>
        async function fetchData() {
            try {
                const response = await fetch('https://api.example.com/data');
                const data = await response.json();
                console.log(data);
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        }

        fetchData();
    </script>
</body>
</html>

9. DOM 操作

9.1 获取元素

可以通过 ID、类名、标签名等方式获取 DOM 元素。

<div id="myDiv">这是一个 div</div>
<script>
let elementById = document.getElementById("myDiv"); // 通过 ID 获取
let elementsByTagName = document.getElementsByTagName("div"); // 通过标签名获取
let elementsByClassName = document.getElementsByClassName("myClass"); // 通过类名获取
</script>

9.2 修改元素

可以通过修改元素的属性或文本内容来改变页面。

<button id="myButton">点击我</button>
<script>
let button = document.getElementById("myButton");
button.onclick = function() {
    button.innerHTML = "按钮被点击了";
};
</script>

9.3 添加和删除元素

使用 appendChild 和 removeChild 来添加和删除 DOM 元素。

<div id="parent">
</div>
<script>
let parent = document.getElementById("parent");
let child = document.createElement("div");
parent.appendChild(child);

let anotherChild = document.createElement("div");
anotherChild.innerHTML = "另一个子元素";
parent.appendChild(anotherChild);

parent.removeChild(child);
</script>

9.4 DOM 操作示例

下面是一个完整的 DOM 操作示例，展示了如何修改和删除页面元素：

<!DOCTYPE html>
<html>
<head>
    <title>DOM 操作示例</title>
</head>
<body>
    <div id="myDiv">这是一个 div</div>
    <script>
        let div = document.getElementById("myDiv");
        div.innerHTML = "内容被修改了";
        div.style.color = "red";
        div.style.fontSize = "20px";
    </script>
</body>
</html>

10. AJAX 请求

10.1 基础 AJAX

可以通过 XMLHttpRequest 对象来发送 AJAX 请求。

<script>
function sendAjaxRequest() {
    let xhr = new XMLHttpRequest();
    xhr.open("GET", "https://api.example.com/data", true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText);
        }
    };
    xhr.send();
}

sendAjaxRequest();
</script>

10.2 使用 fetch API

fetch 是一个更现代的 AJAX 请求方式，它返回一个 Promise，可以更好地处理异步操作。

fetch("https://api.example.com/data")
    .then(response => response.text())
    .then(data => console.log(data));

11. 实践示例

11.1 小游戏开发

11.1.1 猜数字游戏

创建一个简单的猜数字游戏，用户需要在一定次数内猜出一个随机生成的数字。

<!DOCTYPE html>
<html>
<head>
    <title>猜数字游戏</title>
</head>
<body>
    <input id="guessBox" type="number" min="0" max="100">
    <button onclick="guess()">猜</button>
    <p id="result"></p>
    <script>
        let target = Math.floor(Math.random() * 100) + 1;
        let attempts = 0;
        let maxAttempts = 10;

        function guess() {
            let guess = parseInt(document.getElementById("guessBox").value);
            attempts++;

            if (guess == target) {
                document.getElementById("result").innerHTML = "恭喜你，猜对了！";
            } else if (attempts >= maxAttempts) {
                document.getElementById("result").innerHTML = `很遗憾，你超过了 ${maxAttempts} 次尝试。正确答案是 ${target}`;
            } else if (guess < target) {
                document.getElementById("result").innerHTML = "太小了，再试一次吧。";
            } else {
                document.getElementById("result").innerHTML = "太大了，再试一次吧。";
            }
        }
    </script>
</body>
</html>

11.1.2 列表过滤器

创建一个简单的网页，允许用户通过输入框过滤显示的数据列表。

<!DOCTYPE html>
<html>
<head>
    <title>列表过滤器</title>
</head>
<body>
    <input id="filterBox" type="text">
    <ul id="list">
        <li>苹果</li>
        <li>香蕉</li>
        <li>橙子</li>
        <li>草莓</li>
        <li>葡萄</li>
    </ul>
    <script>
        document.getElementById("filterBox").oninput = function() {
            let filter = this.value.toLowerCase();
            let listItems = document.getElementsByTagName("li");
            Array.from(listItems).forEach(function(item) {
                if (item.innerText.toLowerCase().indexOf(filter) > -1) {
                    item.style.display = "";
                } else {
                    item.style.display = "none";
                }
            });
        };
    </script>
</body>
</html>

12. 总结

本文介绍了 JavaScript 的基础语法、数据类型、函数、对象和数组、JSON、事件处理、异步编程、DOM 操作和 AJAX 请求。希望这些知识能帮助你开始编写自己的 JavaScript 程序。如果你希望更深入地学习 JavaScript，可以参考慕课网的“JavaScript基础教程”课程。