JS基础知识入门教程@慕课网原创_慕课网

概述

本文全面介绍了js基础知识，包括环境搭建、基本语法、流程控制、函数使用以及DOM操作等内容。文章详细讲解了如何安装必要的工具并编写简单的JavaScript代码，同时涵盖了变量、运算符、条件和循环语句的使用方法。此外，还涉及到了函数的定义、调用以及一些高级用法，如递归函数和箭头函数。文中还提供了DOM元素获取和事件绑定的实际示例，帮助读者更好地理解和应用这些概念。

JS简介与环境搭建

JavaScript是什么

JavaScript是一种广泛使用的脚本语言，最初由Netscape公司于1995年创建，用于在网页上添加交互性。它是一种解释型语言，能够在浏览器环境中直接运行，也可以在服务器端通过Node.js等技术运行。JavaScript的核心特点包括：

解释型语言：不需要编译，可以在浏览器中直接执行。
弱类型语言：不需要显式声明变量类型。
事件驱动：可以响应用户事件（如点击、输入等）。
面向对象：支持面向对象编程。
跨平台：可以在任何操作系统上运行。
动态性：可以在运行时改变代码。

JavaScript主要用于客户端编程，通过嵌入在HTML页面中，实现网页的交互逻辑。此外，它还可以通过Node.js等技术在服务器端运行，实现全栈开发。

开发环境搭建

要开始使用JavaScript进行开发，首先需要搭建一个合适的开发环境。以下是搭建步骤：

安装文本编辑器：选择一个适合的文本编辑器，如VS Code、Sublime Text、Atom等。这些编辑器提供了丰富的插件和功能，可以提升开发效率。
安装Node.js：Node.js是一个基于Chrome V8引擎的JavaScript运行环境，旨在方便开发者在服务器端使用JavaScript。Node.js也可以用于开发浏览器外的应用程序。安装Node.js后，你将在命令行工具中获得node和npm命令，分别用于运行JavaScript代码和管理依赖。
安装浏览器：选择一个现代浏览器，如Google Chrome、Mozilla Firefox、Microsoft Edge等。浏览器提供了开发者工具，可以帮助你调试和测试JavaScript代码。
编写一个简单的HTML文件：创建一个HTML文件，使用<script>标签引入JavaScript代码。例如：

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Example</title>
</head>
<body>
    <script>
        console.log("Hello, World!");
    </script>
</body>
</html>

运行JavaScript代码：可以通过两种方式运行JavaScript代码：
- 在浏览器中运行：将上述HTML文件保存为index.html，然后在浏览器中打开该文件。你可以在浏览器的开发者工具中查看控制台输出。
- 使用Node.js运行：如果是服务器端脚本，可以在命令行中使用node命令运行JavaScript文件（例如node script.js）。

JS基本语法

注释

注释是代码中用于解释或说明的部分，不会被编译器或解释器执行。在JavaScript中，可以使用单行注释和多行注释。

单行注释：以//开头，后面的内容直到行尾都是注释。
多行注释：以/*开始，以*/结束，中间的内容都是注释。

示例：

// 单行注释
console.log("Hello, World!"); // 这也是单行注释

/*
多行注释
可以跨越多行
*/
console.log("Some message");

变量与数据类型

在JavaScript中，变量用于存储数据。JavaScript是一种弱类型语言，这意味着你可以在声明变量时不指定类型。变量可以使用var、let或const关键字声明。

变量声明

使用var、let、或const关键字声明变量。

var：
- var关键字声明的变量可以改变其值。
- 具有函数作用域。
- 可以声明重复的变量名。

示例：

var message;
message = "Hello, World!";
console.log(message);

let：
- let关键字声明的变量也可以改变其值。
- 具有块作用域。
- 不能声明重复的变量名。

示例：

let greeting = "Hello";
greeting = "Hi"; // 允许赋新值
console.log(greeting);

const：
- const关键字声明的变量一旦赋值，就不能改变其值。
- 具有块作用域。
  .
- 不能声明重复的变量名。

示例：

const name = "Alice";
// name = "Bob"; // 报错，不允许重新赋值
console.log(name);

数据类型

JavaScript有以下几种基本数据类型：

Number：数值类型，可以是整数或浮点数。
String：字符串类型，表示文本数据。
Boolean：布尔类型，表示true或false。
null：表示空值。
undefined：表示未定义的值。
Symbol：表示唯一的、不可变的、可排序的标识符。
BigInt：表示整数，能够表示任意大小的整数。

示例：

let number = 42;
let string = "Hello";
let boolean = true;
let nullValue = null;
let undefinedValue = undefined;
let symbol = Symbol("unique");
let bigInt = 9007199254740991n;

console.log(number, string, boolean, nullValue, undefinedValue, symbol, bigInt);

运算符

JavaScript支持多种运算符，包括算术运算符、比较运算符、逻辑运算符和位运算符等。

算术运算符

加法 +：进行数值加法或字符串连接。
减法 -：进行数值减法。
乘法 *：进行数值乘法。
除法 /：进行数值除法。
取模 %：返回两个数相除的余数。
递增 ++：将变量值加1。
递减 --：将变量值减1。

示例：

let x = 10;
let y = 5;

console.log(x + y);  // 15
console.log(x - y);  // 5
console.log(x * y);  // 50
console.log(x / y);  // 2
console.log(x % y);  // 0
console.log(++x);    // 11
console.log(--x);    // 10

比较运算符

等于 ==：进行值相等的比较。
全等 ===：进行值和类型的比较。
不等于 !=：进行值不相等的比较。
不全等 !==：进行值或类型不相等的比较。
大于 >：比较是否大于。
小于 <：比较是否小于。
大于等于 >=：比较是否大于等于。
小于等于 <=：比较是否小于等于。

示例：

let a = 10;
let b = "10";

console.log(a == b);    // true
console.log(a === b);   // false
console.log(a != b);    // false
console.log(a !== b);   // true
console.log(a > b);     // false
console.log(a < b);     // false
console.log(a >= b);    // true
console.log(a <= b);    // true

逻辑运算符

逻辑与 &&：如果两个条件都为true，结果为true。
逻辑或 ||：如果任一条件为true，结果为true。
逻辑非 !：取反操作。

示例：

let age = 20;
let isAdult = age >= 18;

console.log(age >= 18 && isAdult);   // true
console.log(age >= 18 || isAdult);   // true
console.log(!isAdult);               // false

位运算符

位运算符用于按位操作数字。位运算符通常用于整数，但JavaScript中位运算符对浮点数同样有效。

按位与 &：按位执行“与”操作。
按位或 |：按位执行“或”操作。
按位异或 ^：按位执行“异或”操作。
按位非 ~：执行按位取反操作。
左移 <<：将数字的二进制表示左移指定位置。
右移 >>：将数字的二进制表示右移指定位置。
无符号右移 >>>：将数字的二进制表示无符号右移指定位置。

示例：

let num = 5;

console.log(num & 3);   // 1
console.log(num | 3);   // 7
console.log(num ^ 3);   // 6
console.log(~num);      // -6
console.log(num << 1);  // 10
console.log(num >> 1);  // 2
console.log(num >>> 1); // 2

流程控制

条件语句

条件语句用于根据不同的条件执行不同的代码段。JavaScript支持以下几种条件语句：

if语句：用于单条件判断。
if-else语句：用于双条件判断，根据条件选择不同的代码块执行。
if-else if-else语句：用于多条件判断，根据多个条件选择不同的代码块执行。
switch语句：用于多条件判断，基于变量的值选择不同的代码块执行。

if语句

if语句依据条件是否为true来执行相应的代码块。

示例：

let age = 17;

if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are not an adult.");
}

if-else语句

if-else语句在条件为true时执行一段代码，否则执行另一段代码。

示例：

let score = 75;

if (score >= 60) {
    console.log("Pass");
} else {
    console.log("Fail");
}

if-else if-else语句

if-else if-else语句用于处理多个条件。每个if或else if条件都必须为true，才能执行相应的代码块。else块用于在所有条件都不满足时执行。

示例：

let grade = 85;

if (grade >= 90) {
    console.log("A");
} else if (grade >= 80) {
    console.log("B");
} else if (grade >= 70) {
    console.log("C");
} else {
    console.log("D");
}

switch语句

switch语句基于变量的值选择执行相应的代码块。每个case标签对应一个可能的值，default标签用于在所有case都不匹配时执行代码。

示例：

let day = "Monday";

switch (day) {
    case "Monday":
        console.log("It's Monday");
        break;
    case "Tuesday":
        console.log("It's Tuesday");
        break;
    default:
        console.log("Other day");
}

循环语句

循环语句允许代码块重复执行，直到满足特定的条件。JavaScript中常见的循环语句包括for、while和do-while。

for循环

for循环用于明确指定循环的次数。它包含初始化、条件判断和迭代三个部分。

示例：

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

while循环

while循环在条件为true时重复执行代码块。条件在循环开头检查。

示例：

let counter = 0;

while (counter < 5) {
    console.log(counter);
    counter++;
}

do-while循环

do-while循环与while类似，但条件在循环末尾检查，确保至少执行一次循环体。

示例：

let counter = 0;

do {
    console.log(counter);
    counter++;
} while (counter < 5);

基本循环与嵌套循环

循环结构包括基本循环和嵌套循环。嵌套循环是指在一个循环内部包含另一个循环。

示例：

for (let i = 0; i < 3; i++) {
    console.log("Outer loop: " + i);
    for (let j = 0; j < 3; j++) {
        console.log("Inner loop: " + j);
    }
}

循环结构

循环结构包括基本循环和嵌套循环。嵌套循环允许在主循环内部嵌套其他循环。

基本循环

基本循环结构比较简单，仅包含一个循环。

示例：

for (let i = 0; i < 3; i++) {
    console.log("Basic loop: " + i);
}

嵌套循环

嵌套循环允许在主循环内部嵌套其他循环。这可以在某些情况下简化代码并减少重复。

示例：

for (let i = 0; i < 3; i++) {
    console.log("Outer loop: " + i);
    for (let j = 0; j < 3; j++) {
        console.log("Inner loop: " + j);
    }
}

函数

函数是JavaScript中常用的基本构建块，用于封装一段可重复使用的代码。在JavaScript中，可以定义和调用函数，使用参数传递数据，并返回值。

函数定义与调用

函数定义使用function关键字，后面跟着函数名和参数列表。函数体包含具体的操作代码。

示例：

function greet(name) {
    console.log("Hello, " + name + "!");
}

greet("Alice"); // 输出 "Hello, Alice!"

参数与返回值

函数可以接受参数，并通过return语句返回结果。

参数：函数可能需要一些输入值，这些输入值称为参数。
返回值：函数可以返回一个值，使用return关键字返回。

示例：

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

let result = add(10, 20);
console.log(result); // 输出 30

函数的高级用法

默认参数：可以在定义函数时为参数设置默认值。

示例：

function multiply(a, b = 1) {
    return a * b;
}

console.log(multiply(5)); // 输出 5
console.log(multiply(5, 2)); // 输出 10

箭头函数：ES6 引入了箭头函数，使用更简洁的语法。

示例：

const square = (x) => x * x;

console.log(square(5)); // 输出 25

函数作为返回值：一个函数可以返回另一个函数。

示例：

function createMultiplier(factor) {
    return function(x) {
        return x * factor;
    };
}

let double = createMultiplier(2);
let triple = createMultiplier(3);

console.log(double(5)); // 输出 10
console.log(triple(5)); // 输出 15

递归函数

递归函数是一种特殊类型的函数，它在函数体中调用自身。递归函数通常用于解决可以分解为更小的相似问题的问题。

示例：

function factorial(n) {
    if (n <= 1) {
        return 1;
    } else {
        return n * factorial(n - 1);
    }
}

console.log(factorial(5)); // 输出 120

DOM操作基础

DOM（Document Object Model）是文档对象模型的缩写，用于描述HTML和XML文档的标准结构。通过DOM，JavaScript可以操作网页上的元素，包括添加、删除或修改元素。

DOM元素获取

要操作DOM元素，首先需要获取这些元素。可以通过ID、类名或标签名选择元素。

通过ID选择元素

使用getElementById方法通过ID获取元素。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <div id="myDiv1">Div 1</div>
    <div id="myDiv2">Div 2</div>
    <script>
        let div1 = document.getElementById("myDiv1");
        let div2 = document.getElementById("myDiv2");
        console.log(div1.textContent, div2.textContent);
    </script>
</body>
</html>

通过类名选择元素

使用getElementsByClassName方法通过类名获取元素。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <div class="myClass1">Div 1</div>
    <div class="myClass1">Div 2</div>
    <script>
        let elements = document.getElementsByClassName("myClass1");
        for (let i = 0; i < elements.length; i++) {
            console.log(elements[i].textContent);
        }
    </script>
</body>
</html>

通过标签名选择元素

使用getElementsByTagName方法通过标签名获取元素。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <script>
        let paragraphs = document.getElementsByTagName("p");
        for (let i = 0; i < paragraphs.length; i++) {
            console.log(paragraphs[i].textContent);
        }
    </script>
</body>
</html>

属性与事件绑定

DOM不仅可以操作元素内容，还可以修改元素的属性，并绑定事件处理器。

修改元素属性

可以使用setAttribute方法修改元素的属性。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <div id="myDiv" >Hello, World!</div>
    <script>
        let div = document.getElementById("myDiv");
        div.setAttribute("style", "color: blue;");
    </script>
</body>
</html>

绑定事件处理器

使用addEventListener方法添加事件处理器。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>
    <button id="myButton">Click Me</button>
    <script>
        let button = document.getElementById("myButton");
        button.addEventListener("click", function() {
            alert("Button clicked!");
        });
    </script>
</body>
</html>

常见错误与调试

错误类型简介

JavaScript中存在多种类型的错误，包括语法错误、运行时错误和逻辑错误。理解这些错误类型有助于进行有效的调试。

语法错误

语法错误通常由代码不符合JavaScript语法规则引起。例如，不匹配的括号、未闭合的引号等。

示例：

function example() {
    console.log("Hello, " world);
}

这里缺少一个引号，导致语法错误。

运行时错误

运行时错误是在运行代码时发生的错误。例如，尝试访问不存在的对象属性。

示例：

let obj = {};
console.log(obj.name); // 未定义的属性

这里尝试访问一个未定义的对象属性，会抛出undefined。

逻辑错误

逻辑错误是代码逻辑上的错误，可能会导致代码无法达到预期效果。例如，一个循环的终止条件错误可能会导致无限循环。

示例：

let i = 0;
while (i < 5) {
    console.log(i);
    i++; // 忘记增加i
}

这里循环的终止条件永远不会改变，导致无限循环。

调试工具使用

调试工具是帮助开发人员发现并修复错误的工具。常用的调试工具包括浏览器的开发者工具和Node.js的调试工具。

使用浏览器开发者工具

浏览器的开发者工具提供了多种调试功能，包括断点设置、变量检查和堆栈跟踪等。

打开开发者工具：在浏览器中打开开发者工具（通常可以通过F12或右键选择“检查”打开）。
设置断点：找到需要调试的代码行，点击行号旁边的小点设置断点。
单步执行：运行代码时，代码执行会在断点处暂停，可以单步执行并查看变量值。
变量检查：在调试过程中，可以查看和修改变量的值。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>Debugging Example</title>
</head>
<body>
    <script>
        function multiply(a, b) {
            return a * b;
        }

        let result = multiply(5, 2);
        console.log(result);
    </script>
</body>
</html>

使用浏览器开发者工具单步执行上述代码，并查看变量值。

使用Node.js调试工具

Node.js提供了内置的调试工具node --inspect，可以启动一个调试服务器并使用调试客户端连接。

启动调试服务器：
```
node --inspect script.js
```
连接调试客户端：
使用Chrome浏览器打开chrome://inspect，点击“Inspect”连接到调试服务器。
设置断点：在代码中设置断点。
单步执行：运行代码时，代码执行会在断点处暂停，可以单步执行并查看变量值。

示例：

function multiply(a, b) {
    return a * b;
}

let result = multiply(5, 2);
console.log(result);

使用Node.js调试工具单步执行上述代码，并查看变量值。

通过这些工具，开发人员可以更方便地发现和修复代码中的错误，提高开发效率。