纯js脚本怎么写程序

纯JS脚本怎么写程序

使用纯JS脚本编写程序需要掌握基本的JavaScript语法、理解DOM操作、掌握事件处理、了解异步编程。本文将详细介绍这些方面，并结合实际案例加以说明。

一、JavaScript基本语法

JavaScript是目前最流行的编程语言之一，广泛应用于Web开发。要编写纯JS脚本程序，首先要掌握其基本语法。

1、变量和常量

在JavaScript中，可以使用var、let和const来声明变量和常量。

var oldVariable = 'Hello World'; // 使用var声明变量
let newVariable = 'Hello JavaScript'; // 使用let声明变量
const constantVariable = 'I am constant'; // 使用const声明常量

2、数据类型

JavaScript具有多种数据类型，包括字符串、数字、布尔值、对象、数组等。

let string = 'Hello';
let number = 123;
let boolean = true;
let object = {name: 'John', age: 30};
let array = [1, 2, 3, 4, 5];

3、运算符

JavaScript支持多种运算符，如算术运算符、比较运算符、逻辑运算符等。

let sum = 5 + 3; // 算术运算符
let isEqual = (5 == '5'); // 比较运算符
let andOperation = (true && false); // 逻辑运算符

4、控制结构

JavaScript提供了丰富的控制结构，如条件语句、循环语句等。

// 条件语句
if (number > 100) {
    console.log('Number is greater than 100');
} else {
    console.log('Number is less than or equal to 100');
}
// 循环语句
for (let i = 0; i < 5; i++) {
    console.log(i);
}

二、DOM操作

DOM（Document Object Model）是浏览器中的文档对象模型，允许JavaScript与HTML和CSS进行交互。

1、选择DOM元素

可以使用getElementById、getElementsByClassName、querySelector等方法选择DOM元素。

let elementById = document.getElementById('myId');
let elementsByClass = document.getElementsByClassName('myClass');
let elementByQuery = document.querySelector('.myClass');

2、修改DOM元素

可以通过修改DOM元素的属性、内容等来更新页面。

elementById.innerHTML = 'New Content';
elementById.style.color = 'red';

3、创建和删除DOM元素

可以使用createElement、appendChild、removeChild等方法创建和删除DOM元素。

let newElement = document.createElement('div');
newElement.innerHTML = 'I am a new element';
document.body.appendChild(newElement);
document.body.removeChild(newElement);

三、事件处理

事件处理是JavaScript与用户交互的重要方式，可以通过addEventListener方法为DOM元素绑定事件。

1、绑定事件

可以为DOM元素绑定各种事件，如点击事件、鼠标悬停事件等。

elementById.addEventListener('click', function() {
    alert('Element clicked!');
});

2、事件对象

事件对象包含了事件的相关信息，如事件类型、目标元素等。

elementById.addEventListener('click', function(event) {
    console.log(event.type); // 输出事件类型
    console.log(event.target); // 输出目标元素
});

四、异步编程

JavaScript的异步编程是通过回调函数、Promise、async/await等实现的。

1、回调函数

回调函数是异步编程的基础，通过将函数作为参数传递来实现异步操作。

function fetchData(callback) {
    setTimeout(function() {
        callback('Data fetched');
    }, 1000);
}
fetchData(function(data) {
    console.log(data);
});

2、Promise

Promise是ES6引入的一种异步编程方式，可以避免回调地狱。

let promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve('Data fetched');
    }, 1000);
});
promise.then(function(data) {
    console.log(data);
}).catch(function(error) {
    console.error(error);
});

3、async/await

async/await是基于Promise的语法糖，使异步代码更加简洁。

async function fetchData() {
    let data = await new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve('Data fetched');
        }, 1000);
    });
    console.log(data);
}
fetchData();

五、综合案例

为了更好地理解如何使用纯JS脚本编写程序，下面通过一个综合案例来演示。

1、案例描述

我们将创建一个简单的待办事项列表应用，用户可以添加待办事项、标记已完成的事项以及删除事项。

2、HTML结构

首先，创建一个简单的HTML结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List</title>
</head>
<body>
    <h1>Todo List</h1>
    <input type="text" id="newTodo" placeholder="Add new todo">
    <button id="addTodo">Add</button>
    <ul id="todoList"></ul>
    <script src="script.js"></script>
</body>
</html>

3、JavaScript代码

接下来，编写JavaScript代码来实现待办事项列表的功能。

document.addEventListener('DOMContentLoaded', function() {
    let newTodoInput = document.getElementById('newTodo');
    let addTodoButton = document.getElementById('addTodo');
    let todoList = document.getElementById('todoList');
    // 添加待办事项
    addTodoButton.addEventListener('click', function() {
        let todoText = newTodoInput.value.trim();
        if (todoText === '') {
            alert('Please enter a todo');
            return;
        }
        let listItem = document.createElement('li');
        listItem.innerHTML = `
            <span>${todoText}</span>
            <button class="markDone">Done</button>
            <button class="deleteTodo">Delete</button>
        `;
        todoList.appendChild(listItem);
        newTodoInput.value = '';
    });
    // 事件代理，处理标记完成和删除事项
    todoList.addEventListener('click', function(event) {
        if (event.target.classList.contains('markDone')) {
            event.target.previousElementSibling.style.textDecoration = 'line-through';
        } else if (event.target.classList.contains('deleteTodo')) {
            event.target.parentElement.remove();
        }
    });
});

4、优化代码

为了代码更加整洁和模块化，可以将功能拆分成函数。

document.addEventListener('DOMContentLoaded', function() {
    let newTodoInput = document.getElementById('newTodo');
    let addTodoButton = document.getElementById('addTodo');
    let todoList = document.getElementById('todoList');
    function addTodo() {
        let todoText = newTodoInput.value.trim();
        if (todoText === '') {
            alert('Please enter a todo');
            return;
        }
        let listItem = createTodoItem(todoText);
        todoList.appendChild(listItem);
        newTodoInput.value = '';
    }
    function createTodoItem(text) {
        let listItem = document.createElement('li');
        listItem.innerHTML = `
            <span>${text}</span>
            <button class="markDone">Done</button>
            <button class="deleteTodo">Delete</button>
        `;
        return listItem;
    }
    function handleTodoListClick(event) {
        if (event.target.classList.contains('markDone')) {
            markTodoAsDone(event.target);
        } else if (event.target.classList.contains('deleteTodo')) {
            deleteTodoItem(event.target);
        }
    }
    function markTodoAsDone(button) {
        button.previousElementSibling.style.textDecoration = 'line-through';
    }
    function deleteTodoItem(button) {
        button.parentElement.remove();
    }
    addTodoButton.addEventListener('click', addTodo);
    todoList.addEventListener('click', handleTodoListClick);
});

通过以上案例，我们展示了如何使用纯JS脚本编写一个简单的待办事项列表应用。通过掌握JavaScript的基本语法、DOM操作、事件处理和异步编程，你可以编写出更加复杂和实用的JavaScript程序。如果你正在团队合作开发中，还可以考虑使用研发项目管理系统PingCode和通用项目协作软件Worktile来提高效率和协作效果。希望这篇文章对你有所帮助！