正文

从零开始：JavaScript核心技术与前端实战案例详解

/0 浏览量
0408

JavaScript，作为网页开发的核心技术之一，已经成为了现代网页开发不可或缺的一部分。对于初学者来说，从零开始学习JavaScript，不仅需要掌握其核心语法和特性，还需要通过实战案例来加深理解和应用。本文将详细介绍JavaScript的核心技术，并通过一些实战案例来帮助你更好地理解和掌握这门语言。

JavaScript基础语法

变量和数据类型

在JavaScript中，变量是用来存储数据的容器。变量声明可以使用var、let或const关键字。数据类型包括：

  • 基本类型：数字（Number）、字符串（String）、布尔值（Boolean）、空值（Null）、未定义（Undefined）
  • 对象类型：对象（Object）、数组（Array）
let age = 18;
const name = "Alice";
let isStudent = true;
let emptyValue = null;
let undefinedValue;

console.log(age); // 输出：18
console.log(name); // 输出："Alice"
console.log(isStudent); // 输出：true
console.log(emptyValue); // 输出：null
console.log(undefinedValue); // 输出：undefined

运算符

JavaScript中的运算符包括：

  • 算术运算符：加（+）、减（-）、乘（*）、除（/）、取余（%）
  • 关系运算符：等于（==）、不等于（!=）、大于（>）、小于（<）、大于等于（>=）、小于等于（<=）
  • 逻辑运算符：与（&&）、或（||）、非（!）
let a = 5, b = 3;
console.log(a + b); // 输出：8
console.log(a == b); // 输出：false
console.log(a > b); // 输出：true
console.log(a && b); // 输出：true
console.log(a || b); // 输出：true
console.log(!a); // 输出：false

控制语句

JavaScript中的控制语句包括：

  • 条件语句：if、else if、else
  • 循环语句：for、while、do...while
  • 跳转语句：break、continue
let score = 85;
if (score >= 90) {
  console.log("优秀");
} else if (score >= 80) {
  console.log("良好");
} else if (score >= 70) {
  console.log("中等");
} else {
  console.log("不及格");
}

for (let i = 0; i < 5; i++) {
  console.log(i);
}

while (i < 10) {
  console.log(i);
  i++;
}

do {
  console.log(i);
  i++;
} while (i < 15);

前端实战案例

1. 制作一个简单的计算器

以下是一个简单的计算器实现，包括加、减、乘、除四个功能。

<!DOCTYPE html>
<html>
<head>
  <title>计算器</title>
</head>
<body>
  <input type="text" id="display" disabled>
  <br>
  <button onclick="appendNumber('1')">1</button>
  <button onclick="appendNumber('2')">2</button>
  <button onclick="appendNumber('3')">3</button>
  <button onclick="appendOperation('+')">+</button>
  <br>
  <button onclick="appendNumber('4')">4</button>
  <button onclick="appendNumber('5')">5</button>
  <button onclick="appendNumber('6')">6</button>
  <button onclick="appendOperation('-')">-</button>
  <br>
  <button onclick="appendNumber('7')">7</button>
  <button onclick="appendNumber('8')">8</button>
  <button onclick="appendNumber('9')">9</button>
  <button onclick="appendOperation('*')">*</button>
  <br>
  <button onclick="appendNumber('0')">0</button>
  <button onclick="calculate()">=</button>
  <button onclick="clearDisplay()">C</button>
  <button onclick="appendOperation('/')">/</button>
  <script>
    let display = document.getElementById("display");
    let currentInput = "";
    let operation = "";

    function appendNumber(number) {
      currentInput += number;
      display.value = currentInput;
    }

    function appendOperation(op) {
      if (currentInput === "") {
        return;
      }
      operation = op;
      currentInput += op;
      display.value = currentInput;
    }

    function calculate() {
      let result;
      if (operation === "+") {
        result = parseFloat(currentInput.split("+")[0]) + parseFloat(currentInput.split("+")[1]);
      } else if (operation === "-") {
        result = parseFloat(currentInput.split("-")[0]) - parseFloat(currentInput.split("-")[1]);
      } else if (operation === "*") {
        result = parseFloat(currentInput.split("*")[0]) * parseFloat(currentInput.split("*")[1]);
      } else if (operation === "/") {
        result = parseFloat(currentInput.split("/")[0]) / parseFloat(currentInput.split("/")[1]);
      }
      display.value = result;
      currentInput = result.toString();
      operation = "";
    }

    function clearDisplay() {
      currentInput = "";
      operation = "";
      display.value = "";
    }
  </script>
</body>
</html>

2. 制作一个简单的待办事项列表

以下是一个简单的待办事项列表实现，用户可以添加、删除待办事项。

<!DOCTYPE html>
<html>
<head>
  <title>待办事项列表</title>
</head>
<body>
  <input type="text" id="todoInput" placeholder="添加待办事项">
  <button onclick="addTodo()">添加</button>
  <ul id="todoList"></ul>
  <script>
    let todoList = document.getElementById("todoList");

    function addTodo() {
      let todoInput = document.getElementById("todoInput");
      let todoText = todoInput.value;
      if (todoText.trim() === "") {
        return;
      }
      let todoItem = document.createElement("li");
      todoItem.innerText = todoText;
      let deleteButton = document.createElement("button");
      deleteButton.innerText = "删除";
      deleteButton.onclick = function() {
        todoList.removeChild(todoItem);
      };
      todoItem.appendChild(deleteButton);
      todoList.appendChild(todoItem);
      todoInput.value = "";
    }
  </script>
</body>
</html>

通过以上两个实战案例，你可以了解到JavaScript在网页开发中的应用。在实际开发中，JavaScript的功能远不止这些，还需要掌握更多高级特性，如事件处理、DOM操作、异步编程等。希望本文对你学习JavaScript有所帮助。

-- 展开阅读全文 --