目录
- 介绍
- JavaScript 基础
- 变量声明
- 数据类型
- 控制结构
- DOM 操作
- 事件处理
- AJAX 与 Fetch API
- 使用框架（以 React 为例）
- 实战案例
- 总结
1. 介绍
JavaScript 是一种广泛使用的前端开发语言。它允许开发人员创建动态交互式网站和应用程序。现代 JavaScript（通常称为 ES6 及以上）引入了许多新特性，使得编写和维护代码变得更加容易。以下是阿里开源的一套企业级的 UI 设计语言和 React 实现，使用 TypeScript 构建，提供完整的类型定义文件，自带提炼自企业级中后台产品的交互语言和视觉风格、开箱即用的高质量 React 组件与全链路开发和设计工具体系。https://download.csdn.net/download/vvvae1234/90052217?spm=1001.2101.3001.9500
2. JavaScript 基础
变量声明
在 JavaScript 中，我们可以使用 var, let, 和 const 来声明变量。
let name = "Alice"; // 可以被重新赋值
const age = 30; // 不可以被重新赋值
var city = "New York"; // 可以在函数作用域内被重新赋值
数据类型
JavaScript 中常见的数据类型有：
- 字符串 (
String) - 数字 (
Number) - 布尔值 (
Boolean) - 数组 (
Array) - 对象 (
Object) null和undefined
let str = "Hello, World!";
let num = 42;
let isTrue = true;
let arr = [1, 2, 3, 4];
let obj = { name: "Bob", age: 25 };
let noValue = null;
let notDefined;
控制结构
JavaScript 提供了条件语句和循环控制结构，如 if, for, while 等：
// 条件语句
if (age > 18) {console.log("成年人");
} else {console.log("未成年人");
}// 循环
for (let i = 0; i < arr.length; i++) {console.log(arr[i]);
}
3. DOM 操作
DOM（文档对象模型）是一个表示网页的结构化表示。使用 JavaScript，我们可以通过以下方式操作 DOM:
// 获取元素
let element = document.getElementById("myElement");// 修改内容
element.innerText = "Hello, JavaScript!";// 插入元素
let newElement = document.createElement("p");
newElement.innerText = "这是一个新的段落!";
document.body.appendChild(newElement);
4. 事件处理
事件处理允许你响应用户的操作。例如，单击按钮或输入文本。可以使用以下方法来添加事件处理程序：
<button id="myButton">点击我</button><script>document.getElementById("myButton").addEventListener("click", function() {alert("按钮被点击了!");});
</script>
5. AJAX 与 Fetch API
AJAX（异步 JavaScript 和 XML）允许在不重新加载整个页面的情况下异步请求数据。Fetch API 是一种现代方法来进行网络请求。
fetch('https://jsonplaceholder.typicode.com/posts').then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));
6. 使用框架（以 React 为例）
React 是一个用于构建用户界面的 JavaScript 库。它使得创建组件化的 UI 更加简单。
安装 React 项目
你可以使用 Create React App 快速搭建 React 项目。
npx create-react-app my-app
cd my-app
npm start
创建一个简单的组件
在 src 文件夹中创建 Hello.js 文件：
import React from 'react';const Hello = () => {return <h1>你好, React!</h1>;
}export default Hello;
在 App.js 中引入并使用 Hello 组件：
import React from 'react';
import Hello from './Hello';function App() {return (<div><Hello /></div>);
}export default App;
7. 实战案例
在这个章节中，我们将创建一个简单的待办事项应用，其中包含添加、删除和显示待办事项的功能。
创建 HTML 结构
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>待办事项应用</title>
</head>
<body><h1>待办事项</h1><input type="text" id="todoInput" placeholder="添加新的待办事项"><button id="addButton">添加</button><ul id="todoList"></ul><script src="app.js"></script>
</body>
</html>
编写 JavaScript app.js
let todoInput = document.getElementById("todoInput");
let addButton = document.getElementById("addButton");
let todoList = document.getElementById("todoList");addButton.addEventListener("click", function() {let todoItem = todoInput.value;if (todoItem) {let li = document.createElement("li");li.innerText = todoItem;let deleteButton = document.createElement("button");deleteButton.innerText = "删除";deleteButton.addEventListener("click", function() {todoList.removeChild(li);});li.appendChild(deleteButton);todoList.appendChild(li);todoInput.value = ""; // 清空输入框}
});
JavaScript 前端开发实际操作案例
https://download.csdn.net/download/vvvae1234/90052217?spm=1001.2101.3001.9500
8. 总结
JavaScript 是前端开发的核心语言，它为我们提供了大量的工具和功能。通过这份操作指南，你可以快速上手一些基本概念和操作，建立起前端开发的基础。
无论是在简单的 DOM 操作、事件处理，还是在使用现代框架如 React 进行复杂交互，你都有了初步的了解与实战经验。随着技术的不断发展，学习并保持更新是非常重要的，希望这份指南能帮助你更好地进入 JavaScript 前端开发的世界。