import{_ as r,c as g,a as e,b as s,e as k,d as i,w as h,r as p,o as y}from"./app-COnnofor.js";const c={},A={class:"code-block-title","data-title":"index.html"},D={class:"code-block-title-bar"},B={class:"title"};function v(o,a){const t=p("VPIcon"),d=p("CodeTabs");return y(),g("div",null,[a[8]||(a[8]=e('

JavaScript 是什么？

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

第一个 JavaScript 程序

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

',4)),s("div",A,[s("div",D,[s("span",B,[k(t,{provider:"iconify",name:"vscode-icons:file-type-html"}),a[0]||(a[0]=i("index.html",-1))])]),a[1]||(a[1]=e(`
<!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>
`,1))]),a[9]||(a[9]=e(`

提示：你可以在浏览器中按下 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;

注意：

数据类型

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。

`,68)),k(d,{id:"185",data:[{id:"index.html"},{id:"style.css"},{id:"script.js"}]},{title0:h(({value:n,isActive:l})=>[k(t,{provider:"iconify",name:"vscode-icons:file-type-html"}),a[2]||(a[2]=s("span",null,"index.html",-1))]),title1:h(({value:n,isActive:l})=>[k(t,{provider:"iconify",name:"vscode-icons:file-type-css"}),a[3]||(a[3]=s("span",null,"style.css",-1))]),title2:h(({value:n,isActive:l})=>[k(t,{provider:"iconify",name:"vscode-icons:file-type-js"}),a[4]||(a[4]=s("span",null,"script.js",-1))]),tab0:h(({value:n,isActive:l})=>[...a[5]||(a[5]=[s("div",{class:"language-html line-numbers-mode","data-highlighter":"shiki","data-ext":"html",style:{"--shiki-light":"#393a34","--shiki-dark":"#dbd7caee","--shiki-light-bg":"#ffffff","--shiki-dark-bg":"#121212"}},[s("pre",{class:"shiki shiki-themes vitesse-light vitesse-dark vp-code"},[s("code",{class:"language-html"},[s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"<"),s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"html"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," lang"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"zh-CN"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"<"),s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"head"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"meta"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," charset"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"utf-8"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"title"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),s("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"简易计算器"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"link"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," rel"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"stylesheet"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," href"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"style.css"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"<"),s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"body"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"div"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," class"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"calculator"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"h2"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),s("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"简易计算器"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"input"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," type"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"number"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," id"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"num1"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," placeholder"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"输入第一个数字"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"select"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," id"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"operation"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"option"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," value"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"add"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),s("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"+"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"option"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," value"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"subtract"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),s("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"-"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"option"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," value"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"multiply"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),s("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"×"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"option"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," value"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"divide"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),s("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"÷"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"input"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," type"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"number"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," id"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"num2"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," placeholder"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"输入第二个数字"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"button"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," id"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"calculate"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),s("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"计算"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"div"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," id"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"result"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">"),s("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}},"结果将显示在这里"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}}," ")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," <"),s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"script"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," src"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"="),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"script.js"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},'"'),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},">")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"")])])]),s("div",{class:"line-numbers","aria-hidden":"true",style:{"counter-reset":"line-number 0"}},[s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"})])],-1)])]),tab1:h(({value:n,isActive:l})=>[...a[6]||(a[6]=[s("div",{class:"language-css line-numbers-mode","data-highlighter":"shiki","data-ext":"css",style:{"--shiki-light":"#393a34","--shiki-dark":"#dbd7caee","--shiki-light-bg":"#ffffff","--shiki-dark-bg":"#121212"}},[s("pre",{class:"shiki shiki-themes vitesse-light vitesse-dark vp-code"},[s("code",{class:"language-css"},[s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"."),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}},"calculator"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," {")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," max-width"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),s("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 300"),s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"px"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," margin"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),s("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 2"),s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"rem"),s("span",{style:{"--shiki-light":"#A65E2B","--shiki-dark":"#C99076"}}," auto"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," padding"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),s("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 1.5"),s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"rem"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," border"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),s("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 1"),s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"px"),s("span",{style:{"--shiki-light":"#A65E2B","--shiki-dark":"#C99076"}}," solid"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," #"),s("span",{style:{"--shiki-light":"#A65E2B","--shiki-dark":"#C99076"}},"ddd"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," border-radius"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),s("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 8"),s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"px"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," text-align"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),s("span",{style:{"--shiki-light":"#A65E2B","--shiki-dark":"#C99076"}}," center"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," font-family"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),s("span",{style:{"--shiki-light":"#A65E2B","--shiki-dark":"#C99076"}}," system-ui"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"}")]),i(` `),s("span",{class:"line"}),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"input"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},","),s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}}," select"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},","),s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}}," button"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," {")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," margin"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),s("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 0.5"),s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"rem"),s("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 0"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," padding"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),s("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 0.5"),s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"rem"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," width"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),s("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 100"),s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"%"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," box-sizing"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),s("span",{style:{"--shiki-light":"#A65E2B","--shiki-dark":"#C99076"}}," border-box"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"}")]),i(` `),s("span",{class:"line"}),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"button"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," {")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," background"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," #"),s("span",{style:{"--shiki-light":"#A65E2B","--shiki-dark":"#C99076"}},"007bff"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," color"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),s("span",{style:{"--shiki-light":"#A65E2B","--shiki-dark":"#C99076"}}," white"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," border"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),s("span",{style:{"--shiki-light":"#A65E2B","--shiki-dark":"#C99076"}}," none"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," cursor"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),s("span",{style:{"--shiki-light":"#A65E2B","--shiki-dark":"#C99076"}}," pointer"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," border-radius"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),s("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 4"),s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"px"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"}")]),i(` `),s("span",{class:"line"}),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"button"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}},"hover"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," {")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," background"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," #"),s("span",{style:{"--shiki-light":"#A65E2B","--shiki-dark":"#C99076"}},"0056b3"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"}")]),i(` `),s("span",{class:"line"}),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"#"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}},"result"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," {")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," margin-top"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),s("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 1"),s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"rem"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," padding"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),s("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 1"),s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"rem"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," background"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," #"),s("span",{style:{"--shiki-light":"#A65E2B","--shiki-dark":"#C99076"}},"f8f9fa"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#998418","--shiki-dark":"#B8A965"}}," border-radius"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":"),s("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 4"),s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"px"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"}")])])]),s("div",{class:"line-numbers","aria-hidden":"true",style:{"counter-reset":"line-number 0"}},[s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"})])],-1)])]),tab2:h(({value:n,isActive:l})=>[...a[7]||(a[7]=[s("div",{class:"language-javascript line-numbers-mode","data-highlighter":"shiki","data-ext":"javascript",style:{"--shiki-light":"#393a34","--shiki-dark":"#dbd7caee","--shiki-light-bg":"#ffffff","--shiki-dark-bg":"#121212"}},[s("pre",{class:"shiki shiki-themes vitesse-light vitesse-dark vp-code"},[s("code",{class:"language-javascript"},[s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#A0ADA0","--shiki-dark":"#758575DD"}},"// 获取DOM元素")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"const"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," num1Input"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ="),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," document"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"."),s("span",{style:{"--shiki-light":"#59873A","--shiki-dark":"#80A665"}},"getElementById"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"("),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},"'"),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"num1"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},"'"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},");")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"const"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," num2Input"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ="),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," document"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"."),s("span",{style:{"--shiki-light":"#59873A","--shiki-dark":"#80A665"}},"getElementById"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"("),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},"'"),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"num2"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},"'"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},");")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"const"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," operationSelect"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ="),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," document"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"."),s("span",{style:{"--shiki-light":"#59873A","--shiki-dark":"#80A665"}},"getElementById"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"("),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},"'"),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"operation"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},"'"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},");")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"const"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," calculateButton"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ="),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," document"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"."),s("span",{style:{"--shiki-light":"#59873A","--shiki-dark":"#80A665"}},"getElementById"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"("),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},"'"),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"calculate"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},"'"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},");")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}},"const"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," resultDiv"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ="),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," document"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"."),s("span",{style:{"--shiki-light":"#59873A","--shiki-dark":"#80A665"}},"getElementById"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"("),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},"'"),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"result"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},"'"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},");")]),i(` `),s("span",{class:"line"}),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#A0ADA0","--shiki-dark":"#758575DD"}},"// 添加点击事件监听器")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}},"calculateButton"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"."),s("span",{style:{"--shiki-light":"#59873A","--shiki-dark":"#80A665"}},"addEventListener"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"("),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},"'"),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"click"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},"'"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},","),s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}}," function"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"()"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," {")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#A0ADA0","--shiki-dark":"#758575DD"}}," // 获取输入值")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}}," const"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," num1"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ="),s("span",{style:{"--shiki-light":"#59873A","--shiki-dark":"#80A665"}}," parseFloat"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"("),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}},"num1Input"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"."),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}},"value"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},");")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}}," const"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," num2"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ="),s("span",{style:{"--shiki-light":"#59873A","--shiki-dark":"#80A665"}}," parseFloat"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"("),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}},"num2Input"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"."),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}},"value"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},");")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}}," const"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," operation"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ="),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," operationSelect"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"."),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}},"value"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}}," const"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," result"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}}," ")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#A0ADA0","--shiki-dark":"#758575DD"}}," // 检查输入是否有效")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}}," if"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ("),s("span",{style:{"--shiki-light":"#59873A","--shiki-dark":"#80A665"}},"isNaN"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"("),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}},"num1"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},")"),s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}}," ||"),s("span",{style:{"--shiki-light":"#59873A","--shiki-dark":"#80A665"}}," isNaN"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"("),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}},"num2"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"))"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," {")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," resultDiv"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"."),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}},"textContent"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ="),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}}," '"),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"请输入有效的数字！"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},"'"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}}," return"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," }")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}}," ")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#A0ADA0","--shiki-dark":"#758575DD"}}," // 执行计算")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}}," switch"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ("),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}},"operation"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},")"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," {")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}}," case"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}}," '"),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"add"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},"'"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," result"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ="),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," num1"),s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}}," +"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," num2"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}}," break"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}}," case"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}}," '"),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"subtract"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},"'"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," result"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ="),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," num1"),s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}}," -"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," num2"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}}," break"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}}," case"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}}," '"),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"multiply"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},"'"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," result"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ="),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," num1"),s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}}," *"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," num2"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}}," break"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}}," case"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}}," '"),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"divide"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},"'"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},":")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#A0ADA0","--shiki-dark":"#758575DD"}}," // 检查除数是否为0")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}}," if"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ("),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}},"num2"),s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}}," ==="),s("span",{style:{"--shiki-light":"#2F798A","--shiki-dark":"#4C9A91"}}," 0"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},")"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," {")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," resultDiv"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"."),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}},"textContent"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ="),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}}," '"),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"除数不能为0！"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},"'"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}}," return"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," }")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," result"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ="),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," num1"),s("span",{style:{"--shiki-light":"#AB5959","--shiki-dark":"#CB7676"}}," /"),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," num2"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}}," break"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," }")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#393A34","--shiki-dark":"#DBD7CAEE"}}," ")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#A0ADA0","--shiki-dark":"#758575DD"}}," // 显示结果")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}}," resultDiv"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"."),s("span",{style:{"--shiki-light":"#B07D48","--shiki-dark":"#BD976A"}},"textContent"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}}," ="),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}}," `"),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"计算结果："),s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"${"),s("span",{style:{"--shiki-light":"#B56959","--shiki-dark":"#C98A7D"}},"result"),s("span",{style:{"--shiki-light":"#1E754F","--shiki-dark":"#4D9375"}},"}"),s("span",{style:{"--shiki-light":"#B5695977","--shiki-dark":"#C98A7D77"}},"`"),s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},";")]),i(` `),s("span",{class:"line"},[s("span",{style:{"--shiki-light":"#999999","--shiki-dark":"#666666"}},"});")])])]),s("div",{class:"line-numbers","aria-hidden":"true",style:{"counter-reset":"line-number 0"}},[s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"}),s("div",{class:"line-number"})])],-1)])]),_:1}),a[10]||(a[10]=e(`

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);
  });

常见错误和调试技巧

常见错误

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

调试技巧

  1. 使用 console.log()：在控制台输出变量值或执行流程
  2. 使用断点：在浏览器开发者工具中设置断点，逐步执行代码
  3. 检查错误信息：仔细阅读错误提示，找出问题所在
  4. 检查变量类型：使用 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 创建一个待办事项列表，包含添加、删除和标记完成功能。

提示：

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

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

提示：

总结

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

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

`,25))])}const m=r(c,[["render",v]]),b=JSON.parse('{"path":"/programming/web/basic-syntax/javascript-basics/","title":"JavaScript 基础知识","lang":"zh-CN","frontmatter":{"title":"JavaScript 基础知识","createTime":"2025/11/2 21:30:00","permalink":"/programming/web/basic-syntax/javascript-basics/","description":"JavaScript 是什么？ JavaScript 是一种广泛用于网页开发的脚本语言，它使网页能够实现交互式功能。与 HTML（负责结构）和 CSS（负责样式）不同，JavaScript 专注于行为，可以让网页变得动态和响应式。 第一个 JavaScript 程序 JavaScript 代码可以直接写在 HTML 文件中，通常放在 标签...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"JavaScript 基础知识\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2025-12-05T05:32:37.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://notes.simengweb.com/programming/web/basic-syntax/javascript-basics/"}],["meta",{"property":"og:site_name","content":"仲夏夜之梦"}],["meta",{"property":"og:title","content":"JavaScript 基础知识"}],["meta",{"property":"og:description","content":"JavaScript 是什么？ JavaScript 是一种广泛用于网页开发的脚本语言，它使网页能够实现交互式功能。与 HTML（负责结构）和 CSS（负责样式）不同，JavaScript 专注于行为，可以让网页变得动态和响应式。 第一个 JavaScript 程序 JavaScript 代码可以直接写在 HTML 文件中，通常放在 标签..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"zh-CN"}],["meta",{"property":"og:updated_time","content":"2025-12-05T05:32:37.000Z"}],["meta",{"property":"article:modified_time","content":"2025-12-05T05:32:37.000Z"}]]},"readingTime":{"minutes":8.39,"words":2518},"git":{"createdTime":1762757112000,"updatedTime":1764912757000,"contributors":[{"name":"Kawaxxxsaki","username":"","email":"1111@123.com","commits":2,"avatar":"https://gravatar.com/avatar/b3cd57e776cc1b92ffa9800b35152c0ce7692893d12a14450061083fcacd34ce?d=retro"}]},"autoDesc":true,"filePathRelative":"notes/programming/web/basic-syntax/javascript-basics.md","headers":[]}');export{m as comp,b as data};