【前端】JavaScript基础知识及基本应用
下面是一些重要的 JavaScript 知识点及其详细解析：
1. 基本概念
变量 (Variables)
变量用于存储数据值。
let name = "Alice";
const age = 25;
数据类型 (Data Types)
原始类型：string, number, boolean, null, undefined
引用类型：object, array, function
示例：
let num = 42; // number type
let str = "Hello"; // string type
let bool = true; // boolean type
变量作用域 (Variable Scope)
变量可以在不同的作用域内声明。
全局变量：在所有函数外部定义的变量。
局部变量：在函数内部定义的变量。
示例：
let globalVar = "I'm Global";
function example() {
let localVar = "I'm Local";
console.log(localVar); // 输出: I'm Local
}
example();
console.log(globalVar); // 输出: I'm Global
// 尝试访问局部变量会引发错误
console.log(localVar); // ReferenceError: localVar is not defined
2. 控制结构 (Control Structures)
条件语句 (Conditional Statements)
if...else
switch
示例：
let age = 18;
if (age >= 18) {
console.log("You are an adult.");
} else {
console.log("You are a minor.");
}
// switch case 示例
const color = "red";
switch(color) {
case 'green':
console.log('Go');
break;
case 'yellow':
console.log('Slow down');
break;
case 'red':
console.log('Stop');
break;
default:
console.log("Unknown");
}
循环语句 (Loop Statements)
for
while
do...while
示例：
let i = 0;
// for loop 示例
for(i = 0; i < 5; i++) {
console.log(`i: ${i}`);
}
// while loop 示例
while (i <= 10) {
console.log(`i in while: ${i}`);
if (i == 8)
break;
i++;
}
// do...while loop 示例
do {
console.log(`i in do-while: ${i}`);
} while (i++ < 5);
3. 函数 (Functions)
定义函数 (Defining Functions)
function greet(name) {
return `Hello, ${name}`;
}
console.log(greet("Alice")); // 输出: Hello, Alice
匿名函数 (Anonymous Functions)
let square = function(x) {
return x * x;
};
console.log(square(4)); // 输出: 16
4. 对象和数组 (Objects and Arrays)
创建对象 (Creating Objects)
字面量表示法
构造函数
示例：
let person = {
name: "John",
age: 30,
};
console.log(person.name); // 输出: John
// 构造函数创建对象
function Person(name, age) {
this.name = name;
this.age = age;
}
let john = new Person("John", 30);
console.log(john.name); // 输出: John
创建数组 (Creating Arrays)
let numbers = [1, 2, 3, 4, 5];
for(let i = 0; i < numbers.length; i++) {
console.log(`numbers[${i}]: ${numbers[i]}`);
}
5. DOM 操作 (DOM Manipulation)
获取元素 (Getting Elements)
let paragraph = document.getElementById("myPara");
console.log(paragraph.innerHTML); // 输出: This is a paragraph.
修改元素属性和内容 (Modifying Element Properties and Content)
paragraph.style.color = "red";
paragraph.innerHTML += "<br>This is more content.";
6. 事件处理 (Event Handling)
添加事件监听器 (Adding Event Listeners)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="myButton">Click Me!</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});
</script>
</body>
</html>
7. AJAX (Asynchronous JavaScript and XML)
发送异步请求 (Sending Asynchronous Requests)
function loadContent(url) {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.open("GET", url, true); // 第三个参数是异步标志
xhr.send();
}
loadContent("/data.json");
总结
JavaScript 是一种强大的编程语言，能够用于控制网页的行为和响应用户交互。掌握 JavaScript 的基本概念、语法结构和常见操作方法对于开发动态网站至关重要。