JavaScript 基础教程：从入门到实践

没事多睡觉666

于 2025-05-01 21:44:21 发布

阅读量373

点赞数 8

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2401_85751940/article/details/147655590

版权

1. JavaScript 简介

JavaScript 是一种轻量级的解释型编程语言，主要用于网页开发，为静态页面添加交互功能。它是 Web 三大核心技术之一（HTML、CSS、JavaScript）。

1.1 JavaScript 的特点

解释型语言，无需编译
基于原型和面向对象
弱类型语言
跨平台（所有现代浏览器都支持）
事件驱动
丰富的内置对象和API

2. JavaScript 基础语法

2.1 在HTML中使用JavaScript

（1）内联方式

（2）外部引入方式

2.2 变量声明

2.3 数据类型

JavaScript 有7种基本数据类型：

2.4 运算符

3. 流程控制

3.1 条件语句

3.2 循环语句

4. 函数

4.1 函数定义与调用

4.2 函数参数

5. 对象与面向对象编程

5.1 对象创建与使用

5.2 构造函数与类

6. 数组操作

6.1 常用数组方法

7. DOM 操作

7.1 选择元素

7.2 修改元素

7.3 创建元素

7.4 事件处理

8. 异步 JavaScript

8.1 回调函数

8.2 Promise

8.3 async/await (ES2017)

9. ES6+ 新特性

9.1 解构赋值

9.2 模板字符串

9.3 模块化

10. 实用代码示例

10.1 表单验证

11.列表清单小案例

11.1案例源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>表单验证示例</title>
</head>
<body>
 
    <div id="todo-app">
        <input type="text" id="todo-input" placeholder="输入待办事项">
        <button id="add-btn">添加</button>
        <ul id="todo-list"></ul>
    </div>
    
    <!-- 引入外部 JS 文件 -->
    <script src="./index.js"></script>
</body>
</html>

// 获取页面中的输入框元素
const input = document.getElementById("todo-input");

// 获取“添加”按钮元素
const addBtn = document.getElementById("add-btn");

// 获取待办事项列表容器
const list = document.getElementById("todo-list");

// 为“添加”按钮绑定点击事件处理函数 addTodo
addBtn.addEventListener("click", addTodo);

// 为输入框绑定键盘按下事件，如果按下了回车键（Enter），则调用 addTodo 函数
input.addEventListener("keypress", function(e) {
    if (e.key === "Enter") addTodo();
});

// 定义 addTodo 函数：用于添加新的待办事项
function addTodo() {
    // 获取输入框的值并去除前后空格
    const text = input.value.trim();

    // 如果输入为空，则直接返回，不添加任何内容
    if (text === "") return;

    // 创建一个新的 <li> 元素
    const li = document.createElement("li");

    // 设置 li 的 HTML 内容：显示文本 + 删除按钮
    li.innerHTML = `
        ${text}
        <button class="delete-btn">删除</button>
    `;

    // 为删除按钮绑定点击事件：点击时移除当前 li 元素
    li.querySelector(".delete-btn").addEventListener("click", function() {
        li.remove();
    });

    // 将新创建的 li 添加到待办事项列表中
    list.appendChild(li);

    // 清空输入框内容
    input.value = "";
}

JavaScript 是一门功能强大且灵活的语言，本教程涵盖了 JavaScript 的基础知识和核心概念。要成为一名优秀的 JavaScript 开发者，还需要不断实践和学习更高级的主题，如闭包、原型链、设计模式、性能优化等。

希望这篇教程能帮助你开始 JavaScript 的学习之旅！