SiMengWebSite_Notes/javascript-basics.md at main

Files

Kawaxxxsaki 82324f6274 docs(web): 更新javascript基础文档中函数部分的描述

添加函数声明格式说明并完善函数定义描述

2025-12-05 13:32:37 +08:00

14 KiB

Raw Permalink Blame History

title, createTime, permalink

title	createTime	permalink
JavaScript 基础知识	2025/11/2 21:30:00	/programming/web/basic-syntax/javascript-basics/

JavaScript 是什么？

JavaScript 是一种广泛用于网页开发的脚本语言，它使网页能够实现交互式功能。与 HTML（负责结构）和 CSS（负责样式）不同，JavaScript 专注于行为，可以让网页变得动态和响应式。

第一个 JavaScript 程序

JavaScript 代码可以直接写在 HTML 文件中，通常放在 <body> 标签的底部，使用 <script> 标签包裹。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>我的第一个 JavaScript 程序</title>
</head>
<body>
  <h1>你好，世界！</h1>
  
  <script>
    // 这是注释，不会被执行
    console.log('Hello, JavaScript!'); // 在控制台输出文本
    alert('欢迎学习 JavaScript！'); // 弹出提示框
  </script>
</body>
</html>

提示：你可以在浏览器中按下 F12 打开开发者工具，然后切换到 "Console" 标签查看 console.log() 的输出。

console.log() 是 JavaScript 中最常用、最重要的调试工具，可以说是每个开发者的"最佳朋友"！

基本输出

// 输出字符串
console.log("Hello World!");

// 输出变量
const name = "小明";
console.log(name);

// 输出多个值
const age = 18;
const isStudent = true;
console.log("学生信息:", name, age, isStudent);

输出不同类型的数据

// 各种数据类型
console.log("字符串:", "Hello");
console.log("数字:", 42);
console.log("布尔值:", true);
console.log("数组:", [1, 2, 3]);
console.log("对象:", {name: "李华", age: 20});
console.log("函数:", function() {});
console.log("undefined:", undefined);
console.log("null:", null);

字符串插值

const userName = "张三";
const userAge = 25;
const score = 95.5;

// 传统方式
console.log("用户 " + userName + " 年龄 " + userAge + " 分数 " + score);

// 模板字符串（推荐）
console.log(`用户 ${userName} 年龄 ${userAge} 分数 ${score}`);

// 带表达式的插值
console.log(`${userName} 是 ${userAge >= 18 ? "成年人" : "未成年人"}`);

格式化输出

const product = {
    name: "笔记本电脑",
    price: 5999,
    brand: "Dell",
    inStock: true
};

// %s - 字符串
console.log("产品名称: %s", product.name);

// %d - 数字
console.log("价格: %d 元", product.price);

// %f - 浮点数
console.log("折扣价: %f", product.price * 0.9);

// %o - 对象
console.log("完整产品信息: %o", product);

// %c - CSS样式
console.log("%c重要信息!", "color: red; font-size: 20px; font-weight: bold;");

JavaScript 变量

变量是用来存储信息的容器。在 JavaScript 中，我们使用 let、const 或 var 关键字来声明变量。

变量声明方式

// 使用 let 声明可变变量
let name = "小明";
name = "小红"; // 可以修改

// 使用 const 声明常量（不可变）
const PI = 3.14159;
// PI = 3.14; // 错误！常量不能修改

// 使用 var 声明变量（旧方式，现在推荐使用 let 和 const）
var age = 25;

注意：

使用 let 声明的变量可以重新赋值
使用 const 声明的变量不能重新赋值（常量）
尽量避免使用 var，因为它有一些奇怪的作用域规则

数据类型

JavaScript 有几种基本数据类型：

1. 字符串（String）

用于表示文本，可以使用单引号或双引号。

const greeting = "你好";
const name = 'JavaScript';
const message = `${greeting}, ${name}!`; // 使用模板字符串（ES6 特性）
console.log(message); // 输出：你好, JavaScript!

2. 数字（Number）

用于表示数值。

const age = 25;
const price = 99.99;
const PI = 3.14159;

3. 布尔值（Boolean）

用于表示真或假，只有两个值：true 和 false。

const isStudent = true;
const hasGraduated = false;

4. 数组（Array）

用于存储多个值的集合。

const fruits = ["苹果", "香蕉", "橙子"];
console.log(fruits[0]); // 输出：苹果（数组索引从0开始）

// 添加元素
fruits.push("葡萄");
console.log(fruits); // 输出：["苹果", "香蕉", "橙子", "葡萄"]

5. 对象（Object）

用于存储键值对集合。

const person = {
  name: "小明",
  age: 25,
  isStudent: true,
  greet: function() {
    console.log(`你好，我是${this.name}！`);
  }
};

console.log(person.name); // 输出：小明
person.greet(); // 输出：你好，我是小明！

运算符

算术运算符

const a = 10;
const b = 5;

console.log(a + b); // 15 加法
console.log(a - b); // 5 减法
console.log(a * b); // 50 乘法
console.log(a / b); // 2 除法
console.log(a % b); // 0 取余
console.log(a ** b); // 100000 幂运算（ES6）

赋值运算符

const x = 10;

x += 5; // 等同于 x = x + 5
console.log(x); // 15

x -= 3; // 等同于 x = x - 3
console.log(x); // 12

比较运算符

const a = 10;
const b = 5;

console.log(a > b); // true
console.log(a < b); // false
console.log(a >= b); // true
console.log(a <= b); // false
console.log(a === b); // false（严格相等，比较值和类型）
console.log(a == b); // false（宽松相等，只比较值）
console.log(a !== b); // true（严格不相等）

条件语句

if 语句

const age = 18;

if (age >= 18) {
  console.log("你已经成年了！");
} else if (age >= 13) {
  console.log("你是青少年。");
} else {
  console.log("你还是个孩子。");
}

循环

for 循环

// 打印1到5
for (const i = 1; i <= 5; i++) {
  console.log(i);
}

// 遍历数组
const fruits = ["苹果", "香蕉", "橙子"];
for (const i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// 使用 for...of 遍历（ES6）
for (const fruit of fruits) {
  console.log(fruit);
}

while 循环

const count = 1;
while (count <= 5) {
  console.log(count);
  count++;
}

函数

函数是一段可重复使用的代码块，可以接受输入（参数），执行操作，并返回输出（返回值）。

函数声明

function greet(name) {
  return `你好，${name}！`;
}

const message = greet("小明");
console.log(message); // 输出：你好，小明！

格式如下

function 函数名(参数1, 参数2, ...参数N) {
    // 函数体：要执行的代码
    return 返回值;  // 可选
}

箭头函数（ES6）

const sum = (a, b) => {
  return a + b;
};

// 简化写法（当只有一行返回语句时）
const multiply = (a, b) => a * b;

console.log(sum(3, 4)); // 7
console.log(multiply(3, 4)); // 12

DOM 操作

DOM（文档对象模型）是 HTML 和 XML 文档的编程接口。JavaScript 可以通过 DOM 来操作网页元素。

选择元素

// 通过 id 选择元素
const title = document.getElementById("title");

// 通过 class 选择元素（返回元素集合）
const items = document.getElementsByClassName("item");

// 通过标签名选择元素
const paragraphs = document.getElementsByTagName("p");

// 通过 CSS 选择器选择元素（ES5+）
const header = document.querySelector("header"); // 选择第一个匹配的元素
const allLinks = document.querySelectorAll("a"); // 选择所有匹配的元素

修改元素内容

// 修改文本内容
const title = document.getElementById("title");
title.textContent = "新标题";

// 修改 HTML 内容
title.innerHTML = "<strong>加粗的新标题</strong>";

修改元素样式

const element = document.getElementById("box");
element.style.color = "red";
element.style.fontSize = "20px";
element.style.backgroundColor = "#f0f0f0";

添加事件监听器

const button = document.getElementById("myButton");

button.addEventListener("click", function() {
  console.log("按钮被点击了！");
  alert("你好，欢迎使用！");
});

小案例：交互式计算器

下面是一个简单的交互式计算器示例，演示如何结合 HTML、CSS 和 JavaScript。

::: code-tabs @tab index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>简易计算器</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="calculator">
    <h2>简易计算器</h2>
    <input type="number" id="num1" placeholder="输入第一个数字">
    <select id="operation">
      <option value="add">+</option>
      <option value="subtract">-</option>
      <option value="multiply">×</option>
      <option value="divide">÷</option>
    </select>
    <input type="number" id="num2" placeholder="输入第二个数字">
    <button id="calculate">计算</button>
    <div id="result">结果将显示在这里</div>
  </div>
  
  <script src="script.js"></script>
</body>
</html>

@tab style.css

.calculator {
  max-width: 300px;
  margin: 2rem auto;
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: center;
  font-family: system-ui;
}

input, select, button {
  margin: 0.5rem 0;
  padding: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

button {
  background: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

button:hover {
  background: #0056b3;
}

#result {
  margin-top: 1rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 4px;
}

@tab script.js

// 获取DOM元素
const num1Input = document.getElementById('num1');
const num2Input = document.getElementById('num2');
const operationSelect = document.getElementById('operation');
const calculateButton = document.getElementById('calculate');
const resultDiv = document.getElementById('result');

// 添加点击事件监听器
calculateButton.addEventListener('click', function() {
  // 获取输入值
  const num1 = parseFloat(num1Input.value);
  const num2 = parseFloat(num2Input.value);
  const operation = operationSelect.value;
  const result;
  
  // 检查输入是否有效
  if (isNaN(num1) || isNaN(num2)) {
    resultDiv.textContent = '请输入有效的数字！';
    return;
  }
  
  // 执行计算
  switch (operation) {
    case 'add':
      result = num1 + num2;
      break;
    case 'subtract':
      result = num1 - num2;
      break;
    case 'multiply':
      result = num1 * num2;
      break;
    case 'divide':
      // 检查除数是否为0
      if (num2 === 0) {
        resultDiv.textContent = '除数不能为0！';
        return;
      }
      result = num1 / num2;
      break;
  }
  
  // 显示结果
  resultDiv.textContent = `计算结果：${result}`;
});

:::

JavaScript 的异步编程

JavaScript 是单线程的，但它可以通过异步编程模型来处理耗时操作，如网络请求、定时器等。

setTimeout 和 setInterval

// setTimeout - 延迟执行一次
setTimeout(function() {
  console.log('2秒后执行');
}, 2000);

// setInterval - 定期重复执行
const count = 0;
const timer = setInterval(function() {
  count++;
  console.log(`执行第 ${count} 次`);
  
  if (count >= 5) {
    clearInterval(timer); // 清除定时器
    console.log('定时器已停止');
  }
}, 1000);

Promise（ES6）

Promise 是异步编程的一种解决方案，用于处理异步操作。

// 创建一个Promise
const fetchData = new Promise((resolve, reject) => {
  // 模拟网络请求
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve('数据获取成功');
    } else {
      reject('数据获取失败');
    }
  }, 2000);
});

// 使用Promise
fetchData
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

常见错误和调试技巧

常见错误

语法错误：代码不符合 JavaScript 语法规则
引用错误：使用了未定义的变量或函数
类型错误：对错误类型的值进行操作
范围错误：数值超出有效范围

调试技巧

使用 console.log()：在控制台输出变量值或执行流程
使用断点：在浏览器开发者工具中设置断点，逐步执行代码
检查错误信息：仔细阅读错误提示，找出问题所在
检查变量类型：使用 typeof 操作符检查变量类型

console.log(typeof "hello"); // "string"
console.log(typeof 42); // "number"
console.log(typeof true); // "boolean"
console.log(typeof {}); // "object"
console.log(typeof []); // "object"（数组也是对象的一种）

实践练习

练习1：创建一个简单的待办事项列表

使用 HTML、CSS 和 JavaScript 创建一个待办事项列表，包含添加、删除和标记完成功能。

提示：

使用数组存储待办事项
使用 DOM 操作动态更新列表
为按钮添加事件监听器

练习2：实现一个数字猜谜游戏

计算机随机生成一个1到100之间的数字，玩家通过输入框猜测，程序提示"猜大了"或"猜小了"，直到猜对为止。

提示：

使用 Math.random() 生成随机数
使用条件语句判断猜测结果
记录并显示猜测次数

总结

JavaScript 是现代 web 开发的核心技术之一，它可以让网页变得动态和交互。通过学习变量、数据类型、运算符、条件语句、循环、函数和 DOM 操作等基础知识，你已经迈出了学习 JavaScript 的第一步。

继续练习和探索，你会发现 JavaScript 的强大功能和灵活性！

14 KiB Raw Permalink Blame History Unescape Escape