本文参考了 清华大学电子系科协软件部2023暑期培训 ，在此表示感谢。

快速上手

PDF在 Google Drive 打开

目录 HTML 1 CSS 4 JavaScript 6

例子：

function count(x, time) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(x);
            resolve();
        },time)
    });
}

async function counter1() {
    await count(1, 4000);
    await count(2, 4000);
    await count(3, 4000);
}

async function counter2() {
    await count(4, 1000);
    await count(5, 1000);
    await count(6, 1000);
}

counter1();
counter2();

使用 nodejs 运行，运行结果：

4
5
6
1
2
3

一些奇妙的例子（这些文件过于古老，我删除了一些不能用的）： https://github.com/dropsong/JS_Examples

ToDoList 项目

一个简单的小项目。

下面先补充一些小知识。内边距、外边距：

85-1.jpg
85-1.jpg

html 文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDoList</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>ToDoList</h1>
        <div class="input-container">
            <input type="text" placeholder="添加一个任务..." id="task-input">
            <button id="add-btn">+</button>
        </div>
        <div class="tasks">
            <div class="pending-tasks">
                <h2>未完成</h2>
                <!-- 未完成任务列表区域 -->
            </div>
            <div class="completed-tasks">
                <h2>已完成</h2>
                <!-- 已完成任务列表区域 -->
            </div>
        </div>
        <div class="delbutton">
            <button id="delete-btn">删除已完成</button>
        </div>
    </div>
    <script src="simple.js"></script>
</body>
</html>

css 文件：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    display: flex;             /* 弹性布局 */
    justify-content: center;   /* 水平方向居中对齐 */
    align-items: center;       /* 在垂直方向居中对齐 */
    height: 100vh;
    background-color: #f4f4f4;
}

.container {
    background-color: white;
    padding: 20px;
    border-radius: 10px;      /* 圆角 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 400px;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

.input-container {
    display: flex;
    justify-content: space-between;  /* 子元素（输入框和按钮）会在容器内两端对齐 */
    margin-bottom: 20px;
}

input[type="text"] {
    width: 80%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

button {
    padding: 10px;
    background-color: orange;
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;  /* 光标变成小手*/
    font-size: 16px;
}

button:hover {
    background-color: darkorange;
}

.tasks {
    display: flex;
    justify-content: space-between;
}

.pending-tasks, .completed-tasks {
    width: 48%;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.pending-tasks {
    background-color: #ff726f;
}

.completed-tasks {
    background-color: #79e376;
}

h2 {
    text-align: center;
    color: white;
}

.delbutton {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.delbutton button {
    width: 100%;
    background-color: #ddd;
}

.delbutton button:hover {
    background-color: #ccc;
}

/* 调整任务项中的文字样式 */
.pending-tasks li span, .completed-tasks li span {
    font-size: 20px;
    color: white;  /* 深灰色字体，保持网页一致风格 */
    margin-left: 10px;  /* 留出与复选框的间距 */
}

/* 复选框样式 */
.pending-tasks li input[type="checkbox"], .completed-tasks li input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* 已完成任务的样式 */
.completed-tasks li span {
    text-decoration: line-through;  /* 已完成任务添加删除线 */
    color: #888;  /* 颜色变浅，表明任务已完成 */
}

js 文件：

// 获取页面中的元素
const taskInput = document.getElementById("task-input");
const addTaskBtn = document.getElementById("add-btn");
const incompleteTasks = document.querySelector(".pending-tasks");
const completedTasks = document.querySelector(".completed-tasks");
const clearCompletedBtn = document.getElementById("delete-btn");

// 点击加号按钮时，添加任务
addTaskBtn.addEventListener("click", function() {
    const taskText = taskInput.value;

    if (taskText.trim() === "") {
        alert("请输入任务内容");
        return;
    }

    // 创建一个新的任务项 <li>
    const li = document.createElement("li");

    // 创建勾选框 <input type="checkbox">
    const checkbox = document.createElement("input");
    checkbox.type = "checkbox";

    // 创建任务文字节点 <span>
    const taskLabel = document.createElement("span");
    taskLabel.textContent = taskText;

    // 当勾选框被点击时，将任务移动到“已完成”
    checkbox.addEventListener("change", function() {
        if (this.checked) {
            completedTasks.appendChild(li);
        } else {
            incompleteTasks.appendChild(li);
        }
    });

    // 将勾选框和任务文字添加到任务项中
    li.appendChild(checkbox);
    li.appendChild(taskLabel);

    // 将任务项添加到“未完成”列表
    incompleteTasks.appendChild(li);

    // 清空输入框
    taskInput.value = "";
});

// 点击“删除已完成”按钮时，移除已完成任务列表中的任务项
clearCompletedBtn.addEventListener("click", function() {
    // 获取所有已完成任务的子元素 (li) 并删除它们
    const completedTaskItems = completedTasks.querySelectorAll("li");
    completedTaskItems.forEach(function(task) {
        task.remove();
    });
});

最终效果（视频就不录了）：

85-2.png
85-2.png

互联网产品开发流程及开发岗位：

85-3.png
85-3.png

可以当作手册查询的 html, css, js 网站： https://developer.mozilla.org/zh-CN/docs/Web

NODEJS

PDF在 Google Drive 打开

异步的例子：

const fs = require('fs');

fs.writeFile('1.txt', 'this is 1.txt', (err) => {
    // 如果发生错误，打印错误并退出
    if(err) {
        console.error(err);
        return;
    }
    // 文件写入成功
    console.log('file has been created successfully.');
})

console.log("Dose this happen after file?");

使用 nodejs 运行：

Dose this happen after file?
file has been created successfully.