1 语法基础
(1)变量声明:使用 var、let 或 const 关键字来声明变量。
var x = 10;
let y = "Hello";
const z = true;
(2)数据类型:JavaScript 中的数据类型包括原始数据类型和引用数据类型。
- 原始数据类型:数值类型(如整数和浮点数)、字符串类型、布尔类型、null 和 undefined。
let num = 42;
let str = "Hello";
let bool = true;
let n = null;
let u = undefined;
- 引用数据类型:对象、数组、函数等。
let obj = { name: "John", age: 25 };
let arr = [1, 2, 3, 4];
let func = function() { console.log("Hello"); };
(3)运算符:JavaScript 支持多种运算符,包括算术运算符、赋值运算符、比较运算符、逻辑运算符等。
let a = 10 + 5; // 加法运算
let b = 20 - 8; // 减法运算
let c = 4 * 6; // 乘法运算
let d = 12 / 3; // 除法运算
let e = 10 % 3; // 取模运算
let x = 5;
x += 3; // 等同于 x = x + 3;
let result = (a > b) && (c < d); // 逻辑与运算
(4)条件语句:使用 if、else if 和 else 关键字进行条件判断。
let num = 10;
if (num > 10) {
console.log("大于 10");
} else if (num === 10) {
console.log("等于 10");
} else {
console.log("小于 10");
}
(5)循环语句:使用 for、while 和 do…while 循环来执行重复操作。
for (let i = 0; i < 5; i++) {
console.log(i);
}
let j = 0;
while (j < 5) {
console.log(j);
j++;
}
let k = 0;
do {
console.log(k);
k++;
} while (k < 5);
(6)函数:在 JavaScript 中,函数可以定义和调用。可以使用 function 关键字来定义函数,并通过函数名和参数列表来调用函数。
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("John"); // 调用函数并传递参数
(7)数组:JavaScript 中的数组是一种用于存储多个值的对象。可以使用方括号和逗号来定义数组,并通过索引访问数组元素。
let fruits = ["apple", "banana", "orange"];
console.log(fruits[0]); // 输出第一个元素
fruits.push("grape"); // 向数组末尾添加元素
fruits.pop(); // 删除数组末尾的元素
(8)对象:JavaScript 中的对象是一种由键值对组成的无序集合。可以使用花括号和冒号来定义对象,并通过点号或方括号来访问对象的属性。
let person = {
name: "John",
age: 30,
address: {
city: "New York",
country: "USA"
}
};
console.log(person.name); // 使用点号访问属性
console.log(person["age"]); // 使用方括号访问属性
(9)字符串操作:JavaScript 中的字符串是一系列字符的序列,可以进行连接、截取、替换等操作。
let str = "Hello, world!";
console.log(str.length); // 字符串长度
let concatStr = str + " Welcome!"; // 连接字符串
let subStr = str.substring(0, 5); // 截取子字符串
let replacedStr = str.replace("world", "everyone"); // 替换字符串
(10)注释:可以使用注释将说明性文字添加到代码中,注释不会被执行。
// 单行注释
/*
多行注释
可以跨越多行
*/
2 数据类型与变量
(1)数据类型
- 数值(Number):用于表示数值,包括整数和浮点数。
let age = 25;
let price = 9.99;
- 字符串(String):用于表示文本数据,由一系列字符组成,可以使用单引号或双引号表示。
let name = "John";
let message = 'Hello, world!';
- 布尔值(Boolean):用于表示真或假两种状态。
let isStudent = true;
let isLoggedIn = false;
- 空值(Null):表示一个空值。
let data = null;
- 未定义(Undefined):表示一个未定义的值。
let variable;
- 对象(Object):用于存储多个相关属性和方法的集合。
let person = {
name: "John",
age: 25
};
- 数组(Array):用于存储多个值的有序列表。
let numbers = [1, 2, 3, 4, 5];
(2)变量
变量用于存储和引用数据。在 JavaScript 中,可以使用 var、let 或 const 关键字来声明变量。
- var:定义一个变量,它的作用域可以是函数范围或全局范围。
var x = 10;
- let:定义一个块级作用域的变量,它只在当前代码块中有效。
let y = "Hello";
- const:定义一个块级作用域的常量,一旦赋值后不能再修改
const z = true;
3 函数
定义函数的基本语法:
function functionName(parameter1, parameter2, ...) {
// 函数体
return result;
}
- function 关键字用于定义一个函数。
- functionName 是函数的名称,可以根据需要自定义。
- (parameter1, parameter2, …) 是函数参数的列表,多个参数之间用逗号分隔。
- {} 中包含函数的实际操作,也称为函数体。
- return 关键字用于指定函数的返回值,可以省略。
示例:
function greet(name) {
return "Hello, " + name + "!";
}
let result = greet("John");
console.log(result); // 输出:Hello, John!
3 对象和面向对象编程
在JavaScript中,对象是一种复合数据类型,用于存储多个相关属性和方法的集合。对象可以被看作是现实世界中的某个实体或概念的抽象表示。
面向对象编程(Object-Oriented Programming,简称OOP)是一种编程范式,它将程序设计构建在对象的概念上。面向对象编程强调对象的行为和特征,并通过定义对象之间的相互关系来组织和管理代码。
在JavaScript中,我们可以使用对象来创建自定义的数据类型,通过定义构造函数和原型方法来封装属性和行为。
1、对象:
在JavaScript中,对象由键值对组成的属性集合,每个属性都有一个名称和一个关联的值。
let person = {
name: "John",
age: 25,
greet: function() {
console.log("Hello, " + this.name + "!");
}
};
2、构造函数:
构造函数是创建对象的模板或蓝图,使用 new 关键字配合构造函数可以创建新的对象实例。
function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function() {
console.log("Hello, " + this.name + "!");
};
}
let john = new Person("John", 25);
john.greet(); // 输出:Hello, John!
3、原型:
JavaScript中的对象通过原型(prototype)来共享方法和属性。原型是一个对象,包含了其他对象可以访问的共享属性和方法。
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function() {
console.log("Hello, " + this.name + "!");
};
let john = new Person("John", 25);
john.greet(); // 输出:Hello, John!
4 数组和迭代器
1、创建数组
使用数组字面量 [] 或 Array 构造函数来创建数组。
let numbers = [1, 2, 3, 4, 5];
let fruits = new Array("apple", "banana", "orange");
2、访问数组元素:
数组中的每个元素都有一个对应的索引,从0开始计数。可以使用索引来访问或修改数组中的元素。
let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 输出:1
numbers[2] = 10;
console.log(numbers); // 输出:[1, 2, 10, 4, 5]
3、数组的常用方法:
JavaScript提供了丰富的数组方法,用于操作和处理数组。
- push():在数组末尾添加一个或多个元素。
- pop():删除并返回数组的最后一个元素。
- shift():删除并返回数组的第一个元素。
- unshift():在数组开头添加一个或多个元素。
- slice():返回从原数组中指定位置开始到结束位置之间的元素,不修改原数组。
- splice():删除、替换或添加数组的元素,并返回被删除的元素。
- concat():连接两个或多个数组,返回一个新数组。
- length:获取数组的长度。
(1) 增加元素: - 使用 push() 方法在数组末尾添加一个或多个元素。
- 使用 unshift() 方法在数组开头添加一个或多个元素。
(2)删除元素: - 使用 pop() 方法删除并返回数组的最后一个元素。
- 使用 shift() 方法删除并返回数组的第一个元素。
- 使用 splice() 方法删除、替换或添加数组的元素。
(3)修改元素: - 通过索引直接修改数组中的元素。
(4)查找元素: - 使用 indexOf() 方法查找指定元素在数组中的索引。
- 使用 includes() 方法判断数组是否包含某个元素。
- 使用 find() 方法根据条件查找符合要求的第一个元素。
- 使用 filter() 方法根据条件过滤出符合要求的元素数组。
(5)遍历数组: - 使用 for 循环遍历数组。
- 使用 forEach() 方法对数组中的每个元素执行回调函数。
- 使用 map() 方法对数组中的每个元素执行回调函数,并返回一个新数组。
- 使用 reduce() 方法根据回调函数对数组中的元素进行累积运算。
(6)数组排序: - 使用 sort() 方法对数组进行原地排序。
- 使用 reverse() 方法反转数组的元素顺序。
- 使用自定义的比较函数来进行排序,例如 sort((a, b) => a - b) 可以按升序排序。
let numbers = [3, 1, 5, 2, 4];
// 增加元素
numbers.push(6);
numbers.unshift(0);
console.log(numbers); // 输出:[0, 3, 1, 5, 2, 4, 6]
// 删除元素
numbers.pop();
numbers.shift();
numbers.splice(2, 1);
console.log(numbers); // 输出:[3, 5, 2, 4]
// 修改元素
numbers[1] = 10;
console.log(numbers); // 输出:[3, 10, 2, 4]
// 查找元素
console.log(numbers.indexOf(2)); // 输出:2
console.log(numbers.includes(5)); // 输出:true
console.log(numbers.find(num => num > 3)); // 输出:10
console.log(numbers.filter(num => num % 2 === 0)); // 输出:[10, 2, 4]
// 遍历数组
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
numbers.forEach(function(number) {
console.log(number);
});
let doubledNumbers = numbers.map(function(number) {
return number * 2;
});
console.log(doubledNumbers);
let sum = numbers.reduce(function(acc, curr) {
return acc + curr;
}, 0);
console.log(sum);
// 数组排序
numbers.sort();
console.log(numbers); // 输出:[10, 2, 3, 4]
numbers.reverse();
console.log(numbers); // 输出:[4, 3, 2, 10]
let sortedNumbers = numbers.sort((a, b) => a - b);
console.log(sortedNumbers); // 输出:[2, 3, 4, 10]
4、迭代器的使用
(1)使用 for 循环迭代数组:
let numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
(2)使用 forEach() 方法迭代数组:
let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
console.log(number);
});
(3)使用 map() 方法迭代数组,并返回一个新数组:
let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map(function(number) {
return number * 2;
});
console.log(doubledNumbers);
(4)使用 filter() 方法迭代数组,并返回满足条件的元素组成的新数组:
let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(number) {
return number % 2 === 0;
});
console.log(evenNumbers);
for 循环是最基本的迭代方式,适用于复杂的迭代操作。forEach() 方法适用于简单的遍历操作,它接受一个回调函数作为参数,在每次迭代中对数组的元素执行相应的操作。map() 方法可以通过回调函数对数组中的每个元素执行操作,并返回一个新数组。filter() 方法可以根据条件过滤出符合要求的元素组成一个新的数组。
5 DOM操作
(1)查询元素:
-
getElementById(id):通过元素的 id 获取指定元素。
-
getElementsByClassName(className):通过类名获取一组元素。
-
getElementsByTagName(tagName):通过标签名获取一组元素。
-
querySelector(selector):通过 CSS 选择器获取匹配的第一个元素。
-
querySelectorAll(selector):通过 CSS 选择器获取匹配的所有元素。
(2)修改元素内容: -
textContent:获取或设置元素的文本内容。
-
innerHTML:获取或设置元素的 HTML 内容。
(3)修改元素属性: -
getAttribute(attributeName):获取指定属性的值。
-
setAttribute(attributeName, value):设置指定属性的值。
-
removeAttribute(attributeName):移除指定属性。
(4)修改元素样式: -
style.property:获取或设置元素的行内样式属性。
-
classList.add(className):添加指定类名。
-
classList.remove(className):移除指定类名。
-
classList.toggle(className):切换指定类名的状态。
(5)创建和插入元素: -
createElement(tagName):创建新元素。
-
appendChild(node):将节点插入到父节点的末尾。
-
insertBefore(newNode, referenceNode):将节点插入到参考节点之前。
(6)删除元素:
-parentNode.removeChild(node):从父节点中移除指定节点。
// 查询元素
let element = document.getElementById('my-element');
let elements = document.getElementsByClassName('my-class');
let elements = document.getElementsByTagName('div');
let element = document.querySelector('#my-element');
let elements = document.querySelectorAll('.my-class');
// 修改元素内容
element.textContent = 'Hello, World!';
element.innerHTML = '<b>Hello, World!</b>';
// 修改元素属性
let value = element.getAttribute('data-value');
element.setAttribute('data-value', 'new value');
element.removeAttribute('data-value');
// 修改元素样式
element.style.color = 'red';
element.classList.add('highlight');
element.classList.remove('highlight');
// 创建和插入元素
let newElement = document.createElement('div');
parentElement.appendChild(newElement);
parentElement.insertBefore(newElement, referenceElement);
// 删除元素
parentElement.removeChild(element);
6 HTML中的Javascript
1、内嵌 JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 示例</title>
</head>
<body>
<h1>内嵌 JavaScript 示例</h1>
<script>
// 在这里编写 JavaScript 代码
alert('Hello, World!');
</script>
</body>
</html>
2、外部 JavaScript 文件:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 示例</title>
<script src="script.js"></script> <!-- 引入外部 JavaScript 文件 -->
</head>
<body>
<h1>外部 JavaScript 示例</h1>
</body>
</html>
3、在 HTML 元素上添加事件处理程序:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 示例</title>
<script>
function handleClick() {
alert('Button clicked!');
}
</script>
</head>
<body>
<h1>事件处理程序示例</h1>
<button onclick="handleClick()">点击我</button>
</body>
</html>
4、外部链接的 JavaScript 库:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 示例</title>
<script src="https://example.com/library.js"></script> <!-- 引入外部链接的 JavaScript 库 -->
</head>
<body>
<h1>外部链接的 JavaScript 库示例</h1>
</body>
</html>
5、内联事件处理程序:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 示例</title>
</head>
<body>
<h1>内联事件处理程序示例</h1>
<button onclick="alert('Button clicked!')">点击我</button>
</body>
</html>
6、外部脚本模块(使用 ES6 的模块化语法):
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 示例</title>
<script type="module">
import { greet } from './script.js'; // 导入外部脚本模块
greet();
</script>
</head>
<body>
<h1>外部脚本模块示例</h1>
</body>
</html>