为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 JavaScript基础知识详解

JavaScript基础知识详解

标签：
JavaScript 前端工具 Vue.js
概述

本文全面介绍了JavaScript基础知识，包括变量与数据类型、运算符与表达式、字符串与数组、流程控制、函数定义与调用、对象与DOM操作等内容，帮助读者快速掌握JavaScript的核心概念和用法。

JavaScript简介

JavaScript的作用

JavaScript是一种广泛使用的编程语言，主要用于增强网页的交互性。它可以使得网页元素响应用户的动作，如点击、滚轮滚动、表单提交等，从而提供更加动态和交互式的用户体验。此外，JavaScript也可用于开发服务器端应用，例如使用Node.js等。

JavaScript的发展历程

JavaScript最初由Netscape公司于1995年开发，最初名为LiveScript。1996年，Netscape公司将它更名为JavaScript以利用Java的热度。自那时起，JavaScript迅速发展并成为Web开发的标准之一。ECMAScript是JavaScript的国际标准，由ECMA国际组织维护。最新的标准版本是ECMAScript 2022，每个版本都引入了一些新的特性。

JavaScript与其他编程语言的区别

JavaScript是一种动态类型语言，与其他静态类型语言如Java或C++相比，它更加灵活。这使得开发人员可以更快地编写代码，但也可能导致类型错误。JavaScript主要运行在不同的环境，如浏览器、服务器端（Node.js）、嵌入式设备等，这使得其具有高度的可移植性。此外，JavaScript主要以事件驱动的方式运行，这意味着它可以在浏览器中响应用户的交互事件，从而实现动态网页。

JavaScript环境搭建

如何在浏览器中使用JavaScript

在浏览器中使用JavaScript非常简单，只需要在HTML文件中插入<script>标签。例如：

<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
</head>
<body>
    <script>
        console.log('Hello, World!');
    </script>
</body>
</html>

这段代码会在控制台输出“Hello, World!”。通过这种方式，开发者可以快速地在浏览器中测试JavaScript代码。

如何在本地安装Node.js环境

Node.js允许开发者在服务器端使用JavaScript。安装Node.js包括以下步骤：

  1. 访问Node.js官网（https://nodejs.org）。
  2. 下载适用于你操作系统的Node.js安装包。
  3. 按照安装向导完成安装。
  4. 安装完成后，在命令行中输入node -v来检查Node.js是否正确安装。例如，在Windows系统中，你可以在命令提示符（cmd）中执行以下命令：
node -v

这会输出你安装的Node.js版本号。

如何使用代码编辑器编写JavaScript代码

有许多代码编辑器可以用于编写JavaScript代码，例如Visual Studio Code（VS Code）、Sublime Text、Atom等。以下是使用VS Code编写JavaScript代码的步骤：

  1. 下载并安装Visual Studio Code。
  2. 打开VS Code。
  3. 创建一个新的JavaScript文件（例如example.js）。
  4. 输入以下代码：
console.log('Hello, World!');
  1. 保存文件。
  2. 在命令行中导航到包含文件的目录，然后运行node example.js。

此外，你也可以使用Sublime Text或Atom编写JavaScript代码。例如，在Sublime Text中，创建一个新文件并保存为.js扩展名，然后在命令行中运行node 文件名.js。

JavaScript基本语法

变量与数据类型

在JavaScript中，变量用于存储数据。使用var、let或const关键字来声明变量。JavaScript具有多种数据类型，包括数字、字符串、布尔值等。例如：

var age = 25;          // number type
let name = "Alice";    // string type
const isStudent = true; // boolean type

变量的使用示例：变量可以用于存储和操作不同类型的数据，如数字、字符串和布尔值。你可以使用这些变量进行数学运算、字符串操作等。

运算符与表达式

JavaScript支持多种运算符，包括算术运算符、比较运算符、逻辑运算符等。以下是一些示例：

算术运算符：

let a = 10;
let b = 5;
console.log(a + b); // 15
console.log(a - b); // 5
console.log(a * b); // 50
console.log(a / b); // 2
console.log(a % b); // 0

比较运算符：

let x = 10;
let y = 20;
console.log(x == y); // false
console.log(x != y); // true
console.log(x < y); // true
console.log(x > y); // false

逻辑运算符：

let p = true;
let q = false;
console.log(p && q); // false
console.log(p || q); // true
console.log(!q); // true

字符串与数组

字符串是JavaScript中用来表示文本的数据类型。数组可以存储多个值。例如：

字符串：

let str = "Hello, World!";
console.log(str.length);   // 13
console.log(str[0]);       // H
console.log(str.slice(7)); // World!
console.log(str.toUpperCase()); // HELLO, WORLD!

数组：

let fruits = ["apple", "banana", "orange"];
console.log(fruits[0]); // apple
fruits.push("mango");   // 添加元素
console.log(fruits.length); // 4
console.log(fruits.pop());  // mango
console.log(fruits);    // ["apple", "banana", "orange"]

变量作用域示例：

function outerScope() {
    let outerVar = "outer";
    function innerScope() {
        let innerVar = "inner";
        console.log(outerVar); // outer
    }
    console.log(innerVar); // ReferenceError: innerVar is not defined
    innerScope();
}

outerScope();

数组解构示例：

let [a, b] = ["apple", "banana"];
console.log(a); // apple
console.log(b); // banana

JavaScript流程控制

条件语句

JavaScript中的条件语句包括if、else和switch语句。

if语句：

let num = 10;
if (num > 0) {
    console.log("正数");
} else {
    console.log("非正数");
}

switch语句：

let grade = "B";
switch (grade) {
    case "A":
        console.log("优秀");
        break;
    case "B":
        console.log("良好");
        break;
    case "C":
        console.log("一般");
        break;
    default:
        console.log("其他");
}

嵌套条件语句示例：

let number = 0;
if (number > 0) {
    if (number % 2 === 0) {
        console.log("正数且为偶数");
    } else {
        console.log("正数且为奇数");
    }
} else if (number < 0) {
    console.log("负数");
} else {
    console.log("零");
}

循环语句

循环语句包括for和while循环。

for循环：

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

while循环：

let count = 0;
while (count < 5) {
    console.log(count);
    count++;
}

多重循环示例：

for (let i = 1; i <= 5; i++) {
    for (let j = 1; j <= i; j++) {
        console.log(j);
    }
    console.log('-----');
}

跳转语句

JavaScript中的跳转语句包括break和continue。

break语句：

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

continue语句：

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

JavaScript函数

函数的定义与调用

JavaScript中的函数可以使用function关键字定义，并通过函数名称调用。

定义函数：

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

调用函数：

greet("Alice");

函数的参数与返回值

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

带参数和返回值的函数：

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

let result = add(3, 4);
console.log(result); // 7

递归函数示例：

function factorial(n) {
    if (n === 0 || n === 1) {
        return 1;
    }
    return n * factorial(n - 1);
}

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

闭包示例：

function createCounter() {
    let count = 0;
    return function() {
        count++;
        return count;
    }
}

let counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

匿名函数与箭头函数

匿名函数是指没有名称的函数，通常用于回调函数等临时场景。

匿名函数：

let multiply = function(a, b) {
    return a * b;
};
console.log(multiply(2, 3)); // 6

箭头函数：

let add = (a, b) => a + b;
console.log(add(2, 3)); // 5

JavaScript对象与DOM操作

JavaScript对象的创建与使用

JavaScript中的对象是一种数据结构，可以包含属性（键值对）和方法（函数）。对象通常通过对象字面量来创建。

创建对象：

let person = {
    name: "Alice",
    age: 25,
    greet: function() {
        console.log("Hello, " + this.name + "!");
    }
};

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

复杂对象创建与使用示例：

let book = {
    title: "JavaScript: The Good Parts",
    author: "Douglas Crockford",
    getAuthor: function() {
        return this.author;
    },
    getTitle: function() {
        return this.title;
    }
};

console.log(book.getTitle()); // JavaScript: The Good Parts
console.log(book.getAuthor()); // Douglas Crockford

浏览器DOM模型简介

文档对象模型（DOM）是一个用于描述HTML和XML文档的结构和内容的编程接口。DOM将文档视为一个树形结构，树中的节点包括元素节点、文本节点、属性节点等。例如，HTML文档中的每个标签都是一个元素节点，文本内容则是文本节点。

基本的DOM操作方法

DOM提供了多种方法来操作HTML文档中的元素。以下是一些常用的DOM方法：

获取元素：

let element = document.getElementById("myElement");
console.log(element);

创建元素：

let newDiv = document.createElement("div");
newDiv.innerHTML = "这是一个新元素";
document.body.appendChild(newDiv);

修改元素：

let name = document.getElementById("name");
name.innerHTML = "John Doe";

删除元素：

let elementToRemove = document.getElementById("removeMe");
elementToRemove.parentNode.removeChild(elementToRemove);

事件监听示例：

let button = document.getElementById("button");
button.addEventListener("click", function() {
    console.log("Button clicked");
});

动态修改样式示例：

let element = document.getElementById("element");
element.style.backgroundColor = "red";
element.style.color = "white";

通过这些基本的DOM操作，可以动态地改变网页的结构和内容。

点击查看更多内容
发表于 2024.11.05 02:54， 共 65 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

MMMHUHU

手记
篇
粉丝
26
获赞与收藏
98

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消