JavaScript 入门指南：从变量到 DOM 操作，一步掌握基础知识

前端

2023-11-11 19:03:09

JavaScript基础：打造动态网页的指南

变量和数据类型

在JavaScript中，变量是存储数据的容器。它们可以包含数字、字符串、布尔值或更复杂的对象。使用var、let和const来声明变量，分别用于创建全局变量、局部变量和常量。

不同的数据类型定义了变量可以存储的值类型。最常见的数据类型包括：

数字： 整数和浮点数
字符串： 字符序列
布尔值： true或false
对象： 包含属性和方法的复杂数据结构
数组： 有序元素的集合
函数： 执行特定任务的代码块

运算符

运算符用于对变量或常量执行操作。常见运算符包括：

算术运算符： +、-、*、/和%
比较运算符： ==、!=、<、<=、>和>=
逻辑运算符： &&、||和!
赋值运算符： =、+=、-=、*=、/=和%=

流程语句

流程语句控制程序执行的顺序。常见的流程语句包括：

if语句： 根据条件执行不同的代码块
switch语句： 根据变量的值执行不同的代码块
for循环： 重复执行代码块一定次数
while循环： 重复执行代码块直到条件为false
do-while循环： 至少执行一次代码块，然后根据条件决定是否继续执行

数组和函数

数组

数组是按顺序组织的一组元素。使用方括号（[]）创建数组，并使用索引访问其中的元素。

示例：

const colors = ["red", "blue", "green"];
console.log(colors[1]); // 输出："blue"

函数

函数是执行特定任务的代码块。使用function关键字创建函数，可以传递参数并返回结果。

示例：

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("John")); // 输出："Hello, John!"

字符串函数和正则表达式

字符串函数用于操作字符串。常见的字符串函数包括：

charAt：返回指定索引处的字符
charCodeAt：返回指定索引处字符的Unicode编码
concat：连接两个字符串
indexOf：返回指定子字符串在字符串中首次出现的位置
lastIndexOf：返回指定子字符串在字符串中最后一次出现的位置
replace：用新字符串替换指定子字符串
slice：从字符串中提取子字符串
split：将字符串分割成子字符串数组
toLowerCase：将字符串转换为小写
toUpperCase：将字符串转换为大写

正则表达式（regex）是用于匹配字符串的模式。正则表达式对象可以创建，用于搜索、替换和验证字符串。

示例：

const regex = /hello/gi;
const text = "Hello, world!";
console.log(text.match(regex)); // 输出：["Hello", "hello"]

DOM基本操作

文档对象模型（DOM）是HTML文档的编程接口。通过DOM，可以操作HTML元素。

常见DOM操作包括：

getElementById：获取具有指定ID的元素
getElementsByTagName：获取具有指定标签名的元素
createElement：创建新的HTML元素
appendChild：将元素添加到另一个元素的末尾
insertBefore：将元素添加到另一个元素之前
removeChild：从元素中删除子元素
replaceChild：用新元素替换现有元素

示例：

const div = document.getElementById("myDiv");
div.innerHTML = "Hello, world!";

Window对象和JS对象

Window对象是浏览器窗口的编程接口。Window对象可以用于操作浏览器窗口。

常见的Window对象方法包括：

alert：显示警报对话框
confirm：显示确认对话框
open：打开新窗口
close：关闭窗口
print：打印当前网页
location：获取或设置当前网页的URL
history：获取或设置浏览器的历史记录

JS对象是具有属性和方法的数据类型。使用new关键字创建JS对象。

常见的JS对象属性和方法包括：

属性： 对象的键值对
方法： 对象的函数

示例：

const person = {
  name: "John",
  age: 30,
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet(); // 输出："Hello, my name is John"

JSON和Cookie

JSON（JavaScript对象表示法）是一种轻量级的用于数据交换的格式。可以使用JSON.stringify()方法将JS对象转换为JSON字符串，可以使用JSON.parse()方法将JSON字符串转换为JS对象。

Cookie是存储在浏览器中的小块数据。可以使用document.cookie属性来操作Cookie。

常见的Cookie操作包括：

设置Cookie： 使用document.cookie属性设置Cookie
获取Cookie： 使用document.cookie属性获取Cookie
删除Cookie： 使用document.cookie属性删除Cookie

示例：

// 设置Cookie
document.cookie = "username=John";

// 获取Cookie
const cookieValue = document.cookie.split("=")[1];

// 删除Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC";