当前位置：首页 > news >正文

前端三大件---JavaScript

news 来源：原创 2025/5/16 7:28:11

在当今数字化时代，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); // 输出5let 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 的更多可能性。