探索JavaScript：实现网页交互和动态效果

暖阳浅笑-嘿

于 2024-08-03 23:01:01 发布

阅读量273

点赞数 9

文章标签： javascript 交互开发语言

本文链接：https://blog.csdn.net/weixin_41978174/article/details/140898597

版权

引言

JavaScript 是前端开发中不可或缺的一部分，它为网页提供了动态交互和丰富的功能。

1. JavaScript 基础

JavaScript 是一种轻量级的编程语言，广泛应用于网页开发。它与 HTML 和 CSS 一起，为网页提供了结构、样式和行为。

变量和数据类型

在 JavaScript 中，你可以使用 var、let 或 const 关键字来声明变量。常见的数据类型包括数字、字符串、布尔值、数组和对象。

let age = 25; // 数字
const name = "Alice"; // 字符串
let isStudent = true; // 布尔值
let hobbies = ["reading", "traveling", "coding"]; // 数组
let person = { firstName: "John", lastName: "Doe" }; // 对象

函数

函数是 JavaScript 中的重要概念，用于封装代码块，以便重用。

function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet("Alice")); // 输出: Hello, Alice!

2. DOM 操作

文档对象模型 (DOM) 是 JavaScript 用来与 HTML 和 XML 文档进行交互的接口。通过 DOM 操作，你可以动态地改变网页内容和结构。

获取元素

你可以使用 document.getElementById、document.querySelector 等方法获取 DOM 元素。

let heading = document.getElementById("heading");
let button = document.querySelector(".button");

修改元素内容

通过 innerText 或 innerHTML 属性，可以修改元素的内容。

heading.innerText = "Welcome to My Webpage";

事件监听

你可以使用 addEventListener 方法为元素添加事件监听器，实现用户交互。

button.addEventListener("click", function() {
    alert("Button clicked!");
});

3. 示例项目：简单的待办事项列表

让我们结合上述知识，创建一个简单的待办事项列表应用。

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>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        .todo-list {
            list-style-type: none;
            padding: 0;
        }

        .todo-list li {
            padding: 10px;
            border-bottom: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h1>Todo List</h1>
    <input type="text" id="todoInput" placeholder="Add a new task">
    <button id="addButton">Add</button>
    <ul class="todo-list" id="todoList"></ul>

    <script src="scripts.js"></script>
</body>
</html>

JavaScript

document.getElementById("addButton").addEventListener("click", addTodo);

function addTodo() {
    let todoInput = document.getElementById("todoInput");
    let todoText = todoInput.value.trim();

    if (todoText !== "") {
        let todoList = document.getElementById("todoList");
        let li = document.createElement("li");
        li.innerText = todoText;
        todoList.appendChild(li);
        todoInput.value = "";
    } else {
        alert("Please enter a task.");
    }
}

暖阳浅笑-嘿

关注

9
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
探索JavaScript：实现网页交互和动态效果

JavaScript 是前端开发中不可或缺的一部分，它为网页提供了动态交互和丰富的功能。在这篇博客中，我们将介绍一些基本的JavaScript概念，并通过具体示例展示如何使用JavaScript实现网页上的各种交互效果。文档对象模型 (DOM) 是 JavaScript 用来与 HTML 和 XML 文档进行交互的接口。通过 DOM 操作，你可以动态地改变网页内容和结构。JavaScript 是一种轻量级的编程语言，广泛应用于网页开发。函数是 JavaScript 中的重要概念，用于封装代码块，以便重用。
复制链接

扫一扫