《JS 口袋书》：初学者入门指南

2023-11-03 21:29:40

《JS 口袋书》第 1 章：JS 简介

在第 1 章中，我将介绍 JavaScript 的历史、特点和应用。你将了解到 JavaScript 是如何创建的，以及它为什么成为一种如此受欢迎的语言。你还会了解到 JavaScript 的一些基本概念，例如变量、运算符和条件语句。

《JS 口袋书》第 2 章：JS 基础

在第 2 章中，我将介绍 JavaScript 的一些高级概念，例如函数、数组和对象。你将了解到如何使用这些概念来创建更复杂的 JavaScript 程序。你还会了解到如何使用 JavaScript 来操作 HTML 和 CSS，以便创建交互式网页。

JS 项目搭建教程

在本教程中，我将向你展示如何创建一个简单的 JavaScript 项目。这个项目将是一个简单的计算器，它可以让你输入两个数字并选择一个运算符，然后计算结果。

为了创建这个项目，你需要以下工具：

文本编辑器
网络浏览器
JavaScript 解释器

首先，你需要创建一个新的文本文件，并将其保存为 calculator.js。然后，你需要在文件中输入以下代码：

// 获取输入元素
const num1 = document.getElementById('num1');
const num2 = document.getElementById('num2');
const operator = document.getElementById('operator');

// 获取输出元素
const result = document.getElementById('result');

// 创建计算函数
function calculate() {
  // 获取输入的值
  const n1 = parseFloat(num1.value);
  const n2 = parseFloat(num2.value);
  const op = operator.value;

  // 根据运算符进行计算
  let res;
  switch (op) {
    case '+':
      res = n1 + n2;
      break;
    case '-':
      res = n1 - n2;
      break;
    case '*':
      res = n1 * n2;
      break;
    case '/':
      res = n1 / n2;
      break;
  }

  // 将结果显示在输出元素中
  result.value = res;
}

// 添加事件监听器
document.getElementById('calculate-button').addEventListener('click', calculate);

接下来，你需要创建一个新的 HTML 文件，并将其保存为 calculator.html。然后，你需要在文件中输入以下代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>计算器</h1>
  <form>
    <input type="number" id="num1" placeholder="第一个数字">
    <input type="number" id="num2" placeholder="第二个数字">
    <select id="operator">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <input type="button" id="calculate-button" value="计算">
  </form>
  <div id="result"></div>
</body>
</html>