轻松上手！JavaScript实战小项目助你提升编程技能

JavaScript 是一种广泛使用的编程语言，它不仅用于网页开发，还广泛应用于服务器端编程、移动应用开发等领域。通过实践项目，你可以更好地理解和掌握 JavaScript 的各种特性。本文将介绍一些适合初学者和中级开发者的小型 JavaScript 项目，帮助你提升编程技能。

项目一：待办事项列表

待办事项列表是一个经典的入门级项目，它可以帮助你学习 JavaScript 的基本语法、DOM 操作和事件处理。

项目目标

创建一个简单的待办事项列表。
用户可以添加、删除待办事项。
列表中的待办事项可以勾选完成。

实现步骤

HTML 结构：创建一个简单的 HTML 结构，包括输入框、按钮和待办事项列表。

<div id="todo-app">
  <input type="text" id="new-todo" placeholder="添加待办事项">
  <button id="add-todo">添加</button>
  <ul id="todo-list"></ul>
</div>

CSS 样式：为待办事项列表添加一些基本的样式。

#todo-app {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

#new-todo {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}

#todo-list {
  list-style: none;
  padding: 0;
}

.todo-item {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 5px;
}

.todo-item.completed {
  text-decoration: line-through;
}

JavaScript 逻辑：编写 JavaScript 代码，实现添加、删除和勾选待办事项的功能。

document.addEventListener('DOMContentLoaded', function() {
  const addTodoButton = document.getElementById('add-todo');
  const todoInput = document.getElementById('new-todo');
  const todoList = document.getElementById('todo-list');

  addTodoButton.addEventListener('click', function() {
    const todoText = todoInput.value.trim();
    if (todoText) {
      const todoItem = document.createElement('li');
      todoItem.className = 'todo-item';
      todoItem.textContent = todoText;
      todoList.appendChild(todoItem);

      todoItem.addEventListener('click', function() {
        todoItem.classList.toggle('completed');
      });

      todoInput.value = '';
    }
  });
});

项目二：计算器

计算器是一个实用的项目，可以帮助你学习 JavaScript 的运算符、函数和事件处理。

项目目标

创建一个简单的计算器。
支持基本的数学运算，如加、减、乘、除。
允许用户输入数字和运算符。

实现步骤

HTML 结构：创建一个计算器的 HTML 结构，包括数字按钮、运算符按钮和显示结果区域。

<div id="calculator">
  <input type="text" id="display" disabled>
  <button onclick="appendNumber('1')">1</button>
  <button onclick="appendNumber('2')">2</button>
  <button onclick="appendNumber('3')">3</button>
  <button onclick="setOperation('+')">+</button>
  <button onclick="appendNumber('4')">4</button>
  <button onclick="appendNumber('5')">5</button>
  <button onclick="appendNumber('6')">6</button>
  <button onclick="setOperation('-')">-</button>
  <button onclick="appendNumber('7')">7</button>
  <button onclick="appendNumber('8')">8</button>
  <button onclick="appendNumber('9')">9</button>
  <button onclick="setOperation('*')">*</button>
  <button onclick="appendNumber('0')">0</button>
  <button onclick="calculate()">=</button>
  <button onclick="clearDisplay()">C</button>
  <button onclick="setOperation('/')">/</button>
</div>

JavaScript 逻辑：编写 JavaScript 代码，实现计算器的功能。

let currentInput = '';
let previousInput = '';
let operation = null;

function appendNumber(number) {
  currentInput += number;
  updateDisplay();
}

function setOperation(op) {
  if (currentInput === '') return;
  if (previousInput !== '') calculate();
  operation = op;
  previousInput = currentInput;
  currentInput = '';
}

function calculate() {
  let result;
  const prev = parseFloat(previousInput);
  const current = parseFloat(currentInput);
  if (isNaN(prev) || isNaN(current)) return;
  switch (operation) {
    case '+':
      result = prev + current;
      break;
    case '-':
      result = prev - current;
      break;
    case '*':
      result = prev * current;
      break;
    case '/':
      result = prev / current;
      break;
    default:
      return;
  }
  currentInput = result.toString();
  operation = null;
  previousInput = '';
  updateDisplay();
}

function clearDisplay() {
  currentInput = '';
  previousInput = '';
  operation = null;
  updateDisplay();
}

function updateDisplay() {
  document.getElementById('display').value = currentInput;
}

项目三：天气应用

天气应用是一个实用的项目，可以帮助你学习 JavaScript 的异步编程、API 调用和用户界面设计。

项目目标

创建一个简单的天气应用。
显示当前城市的天气信息。
支持搜索功能，允许用户查找其他城市的天气。

实现步骤

HTML 结构：创建一个天气应用的 HTML 结构，包括搜索框、城市列表和天气信息显示区域。

<div id="weather-app">
  <input type="text" id="search-input" placeholder="搜索城市">
  <button id="search-button">搜索</button>
  <div id="weather-info">
    <h2 id="city-name"></h2>
    <p id="temperature"></p>
    <p id="description"></p>
  </div>
</div>

CSS 样式：为天气应用添加一些基本的样式。

#weather-app {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

#search-input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}

#weather-info {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  padding: 20px;
  margin-top: 20px;
}

#city-name {
  font-size: 24px;
  margin-bottom: 10px;
}

#temperature,
#description {
  font-size: 18px;
}

JavaScript 逻辑：编写 JavaScript 代码，实现天气应用的功能。

const apiKey = 'YOUR_API_KEY';
const weatherUrl = 'https://api.openweathermap.org/data/2.5/weather';

document.getElementById('search-button').addEventListener('click', function() {
  const city = document.getElementById('search-input').value;
  fetchWeather(city);
});

function fetchWeather(city) {
  fetch(`${weatherUrl}?q=${city}&appid=${apiKey}&units=metric`)
    .then(response => response.json())
    .then(data => {
      const cityName = document.getElementById('city-name');
      const temperature = document.getElementById('temperature');
      const description = document.getElementById('description');

      cityName.textContent = data.name;
      temperature.textContent = `${data.main.temp}°C`;
      description.textContent = data.weather[0].description;
    })
    .catch(error => {
      console.error('Error fetching weather data:', error);
    });
}

通过以上三个实战小项目，你可以逐步提升 JavaScript 编程技能。实践是学习编程的最佳方式，希望这些项目能够帮助你更好地掌握 JavaScript。