JavaScript是一种广泛应用于网页开发的脚本语言，它可以让网页实现动态效果和交互性。无论是前端开发还是全栈开发，JavaScript都是不可或缺的一部分。本文将带你快速入门JavaScript，从基础语法到实际应用，让你快速上手这门强大的语言。
一、JavaScript简介
JavaScript最初由***scape的Brendan Eich在1995年创建，起初名为Mocha，后来改名为LiveScript，最终在发布前定名为JavaScript。JavaScript是一种解释性的脚本语言，它是HTML和Web的核心技术之一，为网页提供交互性和动态功能。
JavaScript可以在HTML文档中直接使用，也可以用在服务器端（如Node.js环境），用途非常广泛。
二、基础语法
1. 变量和数据类型
JavaScript是一种动态类型语言，你不需要提前声明变量的类型。可以使用var、let、const来声明变量。
javascript
|
var name = "John"; |
|
|
let age = 30; |
|
|
const PI = 3.14; |
JavaScript中的数据类型包括：
- 字符串（String）
- 数字（Number）
- 布尔（Boolean）
- 对象（Object）
- 函数（Function）
- 空（Null）
- 未定义（Undefined）
2. 操作符
JavaScript中的操作符包括算术操作符（+, -, *, /等）、比较操作符（==, !=, >, <等）、逻辑操作符（&&, ||, !等）和赋值操作符（=）。
javascript
|
let x = 5; |
|
|
let y = 2; |
|
|
console.log(x + y); // 输出 7 |
|
|
console.log(x > y); // 输出 true |
3. 控制结构
JavaScript中的控制结构包括if语句、switch语句、for循环、while循环等。
javascript
|
if (x > y) { |
|
|
console.log("x is greater than y"); |
|
|
} else { |
|
|
console.log("x is not greater than y"); |
|
|
} |
|
|
for (let i = 0; i < 5; i++) { |
|
|
console.log(i); |
|
|
} |
4. 函数
函数是JavaScript中的基本组件之一，用于执行特定任务。
javascript
|
function greet(name) { |
|
|
console.log("Hello, " + name + "!"); |
|
|
} |
|
|
greet("Alice"); // 输出 "Hello, Alice!" |
三、DOM操作
JavaScript的一个重要用途是操作HTML文档的内容、结构和样式。通过DOM（Document Object Model），你可以访问和修改网页的内容。
javascript
|
// 获取元素 |
|
|
let element = document.getElementById("demo"); |
|
|
// 修改内容 |
|
|
element.innerHTML = "Hello, JavaScript!"; |
|
|
// 修改样式 |
|
|
element.style.color = "blue"; |
四、事件处理
JavaScript可以响应用户的操作，如点击、滚动、按键等。通过事件处理，你可以创建交互式的网页。
javascript
|
document.getElementById("demo").onclick = function() { |
|
|
alert("You clicked me!"); |
|
|
}; |
五、Ajax
Ajax（Asynchronous JavaScript and XML）是一种技术，用于在网页中实现异步数据交换，可以在不重新加载整个页面的情况下更新部分网页的内容。
javascript
|
let xhr = new XMLHttpRequest(); |
|
|
xhr.open("GET", "https://api.example.***/data", true); |
|
|
xhr.onreadystatechange = function() { |
|
|
if (xhr.readyState == 4 && xhr.status == 200) { |
|
|
console.log(xhr.responseText); |
|
|
} |
|
|
}; |
|
|
xhr.send(); |
六、ES6及更高版本的新特性
ES6（ECMAScript 2015）及更高版本引入了许多新特性，如模板字符串、箭头函数、Promise、async/await等，这些新特性大大增强了JavaScript的功能和易用性。
javascript
|
// 模板字符串 |
|
|
let name = "Bob"; |
|
|
console.log(`Hello, ${name}!`); |
|
|
// 箭头函数 |
|
|
let greet = name => console.log(`Hello, ${name}!`); |
|
|
greet("Eve"); |
|
|
// async/await |
|
|
async function fetchData() { |
|
|
let response = await fetch("https://api.example.***/data"); |
|
|
let data = await response.json(); |
|
|
console.log(data); |
|
|
} |
|
|
fetchData(); |
七、实战：构建一个简单的待办事项应用
下面，我们将使用HTML、CSS和JavaScript构建一个简单的待办
事项应用。这个应用将允许用户添加新的待办事项，并标记它们为已完成或删除它们。
1. HTML结构
首先，我们需要创建一个简单的HTML结构来容纳我们的待办事项列表。
html
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>待办事项应用</title> |
|
|
<link rel="stylesheet" href="styles.css"> |
|
|
</head> |
|
|
<body> |
|
|
<h1>我的待办事项</h1> |
|
|
<input type="text" id="newTodo" placeholder="添加新的待办事项"> |
|
|
<button onclick="addTodo()">添加</button> |
|
|
<ul id="todoList"></ul> |
|
|
<script src="script.js"></script> |
|
|
</body> |
|
|
</html> |
2. CSS样式
接下来，我们添加一些基本的CSS样式来美化我们的应用。
css
|
/* styles.css */ |
|
|
body { |
|
|
font-family: Arial, sans-serif; |
|
|
} |
|
|
#todoList { |
|
|
list-style-type: none; |
|
|
padding: 0; |
|
|
} |
|
|
#todoList li { |
|
|
padding: 8px; |
|
|
margin-top: 5px; |
|
|
background-color: #f9f9f9; |
|
|
border: solid 1px #ddd; |
|
|
} |
|
|
#todoList li.***pleted { |
|
|
background-color: #e9e9e9; |
|
|
text-decoration: line-through; |
|
|
} |
3. JavaScript逻辑
最后，我们添加JavaScript逻辑来处理待办事项的添加、标记完成和删除。
javascript
|
// script.js |
|
|
let todos = []; |
|
|
function addTodo() { |
|
|
let todoText = document.getElementById('newTodo').value.trim(); |
|
|
if (todoText) { |
|
|
todos.push({ |
|
|
text: todoText, |
|
|
***pleted: false |
|
|
}); |
|
|
renderTodoList(); |
|
|
document.getElementById('newTodo').value = ''; |
|
|
} |
|
|
} |
|
|
function renderTodoList() { |
|
|
let todoList = document.getElementById('todoList'); |
|
|
todoList.innerHTML = ''; |
|
|
todos.forEach((todo, index) => { |
|
|
let todoEl = document.createElement('li'); |
|
|
todoEl.textContent = todo.text; |
|
|
if (todo.***pleted) { |
|
|
todoEl.classList.add('***pleted'); |
|
|
} |
|
|
todoEl.onclick = function() { |
|
|
toggleTodo***pletion(index); |
|
|
}; |
|
|
let deleteButton = document.createElement('button'); |
|
|
deleteButton.textContent = '删除'; |
|
|
deleteButton.onclick = function() { |
|
|
deleteTodo(index); |
|
|
}; |
|
|
todoEl.appendChild(deleteButton); |
|
|
todoList.appendChild(todoEl); |
|
|
}); |
|
|
} |
|
|
function toggleTodo***pletion(index) { |
|
|
todos[index].***pleted = !todos[index].***pleted; |
|
|
renderTodoList(); |
|
|
} |
|
|
function deleteTodo(index) { |
|
|
todos.splice(index, 1); |
|
|
renderTodoList(); |
|
|
} |
现在，你拥有了一个基本的待办事项应用，它可以添加新的待办事项，标记它们为已完成，以及删除它们。通过这个实战项目，你应该对JavaScript的基本用法和DOM操作有了更深入的理解。随着你深入学习JavaScript，你将能够构建更复杂和功能丰富的Web应用。
