前端三大件---JavaScript

最新推荐文章于 2025-05-16 14:49:58 发布

Python智慧行囊

最新推荐文章于 2025-05-16 14:49:58 发布

阅读量914

点赞数 17

文章标签： python javascript

本文链接：https://blog.csdn.net/2201_75786273/article/details/147977400

版权

在当今数字化时代，JavaScript 作为 Web 开发的核心语言之一，几乎无处不在。无论是网页交互、移动应用开发，还是后端服务搭建，JavaScript 都发挥着至关重要的作用。本文将带你从零开始，深入探索 JavaScript 的世界，从基础语法到高级特性，再到实战项目，助你全面掌握这门强大的编程语言。

一、JavaScript 基础语法

1.1 变量声明

在 JavaScript 中，变量声明有三种方式：var、let和const。var是 ES5 时代的产物，存在函数作用域和变量提升的特性。例如：

console.log(a); // 输出undefined
var a = 10;

而let和const是 ES6 引入的新声明方式，具有块级作用域。let声明的变量可以重新赋值，const声明的常量则一旦赋值就不能更改。

{
  let b = 20;
  const c = 30;
  b = 25; // 合法
  // c = 35; // 报错，常量不能重新赋值
}

1.2 数据类型

JavaScript 拥有丰富的数据类型，包括基本数据类型（number、string、boolean、null、undefined、symbol）和引用数据类型（object、array、function等）。基本数据类型按值传递，引用数据类型按引用传递。

let num1 = 5;
let num2 = num1;
num2 = 10;
console.log(num1); // 输出5

let arr1 = [1, 2, 3];
let arr2 = arr1;
arr2.push(4);
console.log(arr1); // 输出[1, 2, 3, 4]

1.3 运算符

JavaScript 支持常见的算术运算符（+、-、*、/、%）、比较运算符（==、===、!=、!==等）和逻辑运算符（&&、||、!）。特别要注意==和===的区别，==会进行类型转换，===则要求类型和值都相等。

console.log(1 == '1'); // 输出true
console.log(1 === '1'); // 输出false

二、JavaScript 高级特性

2.1 函数

函数是 JavaScript 的一等公民，它可以作为参数传递，也可以作为返回值。JavaScript 支持匿名函数、箭头函数和闭包。箭头函数语法简洁，并且没有自己的this，它的this继承自外层作用域。

// 普通函数
function add(a, b) {
  return a + b;
}

// 箭头函数
const subtract = (a, b) => a - b;

// 闭包
function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}
const increment = outer();
console.log(increment()); // 输出1
console.log(increment()); // 输出2

2.2 原型与原型链

在 JavaScript 中，每个对象都有一个prototype属性，通过原型链实现继承。原型链是 JavaScript 实现继承的重要机制，当访问一个对象的属性或方法时，如果该对象本身没有，就会沿

// 导出模块
export function add(a, b) {
  return a + b;
}

// 导入模块
import { add } from './math.js';
console.log(add(1, 2)); // 输出3

三、JavaScript 实战项目

3.1 开发一个简单的待办事项应用

我们将使用 JavaScript 和 HTML、CSS 开发一个简单的待办事项应用。首先，在 HTML 中创建页面结构，包括输入框、添加按钮和待办事项列表。然后，通过 JavaScript 实现添加待办事项、删除待办事项和标记待办事项已完成的功能。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Todo App</title>
  <style>
    /* 样式代码 */
  </style>
</head>

<body>
  <input type="text" id="todoInput" placeholder="Add a new todo">
  <button id="addButton">Add</button>
  <ul id="todoList"></ul>

  <script>
    const todoInput = document.getElementById('todoInput');
    const addButton = document.getElementById('addButton');
    const todoList = document.getElementById('todoList');

    addButton.addEventListener('click', () => {
      const todoText = todoInput.value;
      if (todoText) {
        const li = document.createElement('li');
        li.textContent = todoText;
        const deleteButton = document.createElement('button');
        deleteButton.textContent = 'Delete';
        const completeButton = document.createElement('button');
        completeButton.textContent = 'Complete';
        li.appendChild(deleteButton);
        li.appendChild(completeButton);
        todoList.appendChild(li);

        deleteButton.addEventListener('click', () => {
          todoList.removeChild(li);
        });

        completeButton.addEventListener('click', () => {
          li.classList.toggle('completed');
        });

        todoInput.value = '';
      }
    });
  </script>
</body>

</html>

3.2 实现一个简单的图片轮播效果

图片轮播是网页中常见的交互效果，我们可以使用 JavaScript 和 CSS 来实现。首先，准备一组图片，然后在 HTML 中创建图片容器和导航按钮。通过 JavaScript 控制图片的切换和导航按钮的状态。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Image Carousel</title>
  <style>
    /* 样式代码 */
  </style>
</head>

<body>
  <div class="carousel">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <button id="prevButton">&lt;</button>
  <button id="nextButton">&gt;</button>

  <script>
    const carousel = document.querySelector('.carousel');
    const images = carousel.querySelectorAll('img');
    const prevButton = document.getElementById('prevButton');
    const nextButton = document.getElementById('nextButton');
    let currentIndex = 0;

    function showImage(index) {
      images.forEach((img, i) => {
        if (i === index) {
          img.style.display = 'block';
        } else {
          img.style.display = 'none';
        }
      });
    }

    showImage(currentIndex);

    prevButton.addEventListener('click', () => {
      currentIndex = (currentIndex === 0)? images.length - 1 : currentIndex - 1;
      showImage(currentIndex);
    });

    nextButton.addEventListener('click', () => {
      currentIndex = (currentIndex === images.length - 1)? 0 : currentIndex + 1;
      showImage(currentIndex);
    });
  </script>
</body>

</html>

四、总结

通过本文的学习，我们对 JavaScript 的基础语法、高级特性以及实战应用有了全面的了解。JavaScript 是一门非常灵活且强大的语言，随着技术的不断发展，新的特性和框架也在不断涌现。希望本文能为你学习 JavaScript 打下坚实的基础，鼓励你在实际项目中不断探索和实践，深入挖掘 JavaScript 的更多可能性。