0基础学前端 Day 7
目录
引言
在前端开发的学习过程中，JavaScript 是一个不可或缺的部分，它使网页变得动态和交互。经过几天的学习，我们已经掌握了一些基本概念，今天我们将深入探讨 JavaScript 的基本语法，并通过一个实际案例来巩固所学的知识。
JavaScript 基础复习
变量与数据类型
JavaScript 中的变量可以用 var、let 和 const 来声明。每种声明方式有其独特的作用域和特性。
javascriptCopy Code// 使用 var 声明变量
var name = "Alice";
var age = 25;
// 使用 let 声明变量
let score = 100;
// 使用 const 声明常量
const pi = 3.14;
JavaScript 支持多种数据类型：
- 数字（Number）
- 字符串（String）
- 布尔值（Boolean）
- 对象（Object）
- 数组（Array）
- 函数（Function）
运算符
JavaScript 提供了多种运算符，包括算术运算符、比较运算符、逻辑运算符等。
javascriptCopy Codelet x = 10;
let y = 20;
// 算术运算符
let sum = x + y; // 30
// 比较运算符
let isEqual = (x === y); // false
// 逻辑运算符
let isTrue = (x < y && y > 15); // true
控制结构
控制结构用于控制代码的执行流程，最常用的有条件语句和循环语句。
javascriptCopy Code// 条件语句
if (age >= 18) {
console.log("成年");
} else {
console.log("未成年");
}
// 循环语句
for (let i = 0; i < 5; i++) {
console.log(i);
}
DOM 操作
什么是 DOM？
DOM（文档对象模型）是浏览器将 HTML 文档表示为对象的方式。通过 DOM，JavaScript 可以访问和修改网页内容。
选择元素
我们可以使用不同的方法来选择 DOM 元素，例如 getElementById、getElementsByClassName 和 querySelector。
javascriptCopy Codelet header = document.getElementById("header");
let items = document.getElementsByClassName("item");
let firstItem = document.querySelector(".item");
修改元素内容
一旦选择了元素，我们可以修改其内容或属性。
javascriptCopy Codeheader.innerText = "欢迎来到我的网站!";
firstItem.style.color = "red";
事件处理
JavaScript 允许我们为元素添加事件监听器，以响应用户的操作。
javascriptCopy Codeheader.addEventListener("click", function() {
alert("你点击了标题!");
});
案例：简单的待办事项应用
项目构建
今天我们将创建一个简单的待办事项应用，让用户可以添加、查看和删除待办事项。这个应用将帮助我们巩固对 DOM 操作和 JavaScript 基础的理解。
HTML 结构
我们将构建一个简单的 HTML 页面，包含输入框、添加按钮和待办事项列表。
htmlCopy Code<!DOCTYPE html>
<html lang="zh">
<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>
<div id="app">
<h1>待办事项列表</h1>
<input type="text" id="todoInput" placeholder="添加新事项...">
<button id="addButton">添加</button>
<ul id="todoList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
CSS 样式
在 styles.css 文件中添加一些基本样式，使应用看起来更美观。
cssCopy Codebody {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
#app {
width: 300px;
margin: 50px auto;
padding: 20px;
background-color: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
input {
width: calc(100% - 22px);
padding: 10px;
margin-bottom: 10px;
}
button {
padding: 10px;
width: 100%;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
}
button:hover {
background-color: #218838;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 10px;
background-color: #e9ecef;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
li button {
background-color: #dc3545;
border: none;
color: white;
border-radius: 5px;
padding: 5px 10px;
}
li button:hover {
background-color: #c82333;
}
JavaScript 功能实现
在 script.js 文件中实现功能。我们需要获取输入框和按钮的引用，并添加事件监听器。
javascriptCopy Codeconst todoInput = document.getElementById("todoInput");
const addButton = document.getElementById("addButton");
const todoList = document.getElementById("todoList");
// 添加事项
addButton.addEventListener("click", function() {
const todoText = todoInput.value.trim();
if (todoText !== "") {
const newTodo = document.createElement("li");
newTodo.innerText = todoText;
// 添加删除按钮
const deleteButton = document.createElement("button");
deleteButton.innerText = "删除";
deleteButton.addEventListener("click", function() {
todoList.removeChild(newTodo);
});
newTodo.appendChild(deleteButton);
todoList.appendChild(newTodo);
// 清空输入框
todoInput.value = "";
} else {
alert("请输入待办事项!");
}
});
总结与练习
今天我们学习了 JavaScript 的基本语法、DOM 操作以及如何构建一个简单的待办事项应用。通过这个项目，我们实践了之前所学的知识，并提高了对 JavaScript 的理解。
练习
- 尝试添加“编辑”功能，让用户可以编辑已添加的事项。
- 实现事项的持久化存储，使用
localStorage保存待办事项，即使刷新页面也不会丢失。 - 美化应用界面，尝试使用 Flexbox 或 Grid 布局。
参考资料
这样，你就完成了第七天的学习内容！继续保持学习的热情，明天将会有更多的知识等待你去探索！
本站地址： https://www.ffyonline.com/pageSingle/articleOneWeb/106530