322 lines
192 KiB
HTML
322 lines
192 KiB
HTML
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" /><meta name="generator" content="VuePress 2.0.0-rc.24" /><meta name="theme" content="VuePress Theme Plume 1.0.0-rc.164" /><script id="check-mac-os">document.documentElement.classList.toggle('mac', /Mac|iPhone|iPod|iPad/i.test(navigator.platform))</script><script id="check-dark-mode">;(function () {const um= localStorage.getItem('vuepress-theme-appearance') || 'auto';const sm = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;const isDark = um === 'dark' || (um !== 'light' && sm);document.documentElement.dataset.theme = isDark ? 'dark' : 'light';})();</script><script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","headline":"JavaScript 基础知识","image":[""],"dateModified":"2025-11-10T06:45:12.000Z","author":[]}</script><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 文件中，通常放在 <body> 标签..."><meta property="og:type" content="article"><meta property="og:locale" content="zh-CN"><meta property="og:updated_time" content="2025-11-10T06:45:12.000Z"><meta property="article:modified_time" content="2025-11-10T06:45:12.000Z"><link rel="icon" type="image/png" href="https://theme-plume.vuejs.press/favicon-32x32.png"><title>JavaScript 基础知识 | 仲夏夜之梦</title><meta name="description" content="JavaScript 是什么？ JavaScript 是一种广泛用于网页开发的脚本语言，它使网页能够实现交互式功能。与 HTML（负责结构）和 CSS（负责样式）不同，JavaScript 专注于行为，可以让网页变得动态和响应式。 第一个 JavaScript 程序 JavaScript 代码可以直接写在 HTML 文件中，通常放在 <body> 标签..."><link rel="preload" href="/assets/style-PWY98LJg.css" as="style"><link rel="stylesheet" href="/assets/style-PWY98LJg.css"><link rel="modulepreload" href="/assets/app-DnSLvtbI.js"><link rel="modulepreload" href="/assets/index.html-CsZYPlvx.js"></head><body><div id="app"><!--[--><!--[--><div class="theme-plume vp-layout" vp-container data-v-f73ca3da><!--[--><!--[--><!--]--><!--[--><span tabindex="-1" data-v-17e3d305></span><a href="#VPContent" class="vp-skip-link visually-hidden" data-v-17e3d305> Skip to content </a><!--]--><!----><header class="vp-nav" data-v-f73ca3da data-v-e98a6132><div class="vp-navbar" vp-navbar data-v-e98a6132 data-v-2c31ea5e><div class="wrapper" data-v-2c31ea5e><div class="container" data-v-2c31ea5e><div class="title" data-v-2c31ea5e><div class="vp-navbar-title has-sidebar" data-v-2c31ea5e data-v-1a4f50af><a class="vp-link link no-icon title" href="/" data-v-1a4f50af><!--[--><!--[--><!--]--><!--[--><!--[--><!--[--><img class="vp-image dark logo" style="" src="/plume.svg" alt data-v-480e858a><!--]--><!--[--><img class="vp-image light logo" style="" src="/plume.svg" alt data-v-480e858a><!--]--><!--]--><!--]--><span data-v-1a4f50af>仲夏夜之梦</span><!--[--><!--]--><!--]--><!----></a></div></div><div class="content" data-v-2c31ea5e><div class="content-body" data-v-2c31ea5e><!--[--><!--]--><div class="vp-navbar-search search" data-v-2c31ea5e><div class="search-wrapper" data-v-97535d1e><!----><div id="local-search" data-v-97535d1e><button type="button" class="mini-search mini-search-button" aria-label="搜索文档" data-v-97535d1e><span class="mini-search-button-container"><span class="mini-search-search-icon vpi-mini-search" aria-label="search icon"></span><span class="mini-search-button-placeholder">搜索文档</span></span><span class="mini-search-button-keys"><kbd class="mini-search-button-key"></kbd><kbd class="mini-search-button-key">K</kbd></span></button></div></div></div><!--[--><!--]--><nav aria-labelledby="main-nav-aria-label" class="vp-navbar-menu menu" data-v-2c31ea5e data-v-d43c1732><span id="main-nav-aria-label" class="visually-hidden" data-v-d43c1732>Main Navigation</span><!--[--><!--[--><a class="vp-link link navbar-menu-link" href="/" tabindex="0" data-v-d43c1732 data-v-d4acf911><!--[--><!----><span data-v-d4acf911>首页</span><!----><!--]--><!----></a><!--]--><!--[--><a class="vp-link link navbar-menu-link" href="/blog/" tabindex="0" data-v-d43c1732 data-v-d4acf911><!--[--><!----><span data-v-d4acf911>博客</span><!----><!--]--><!----></a><!--]--><!--[--><div class="vp-flyout vp-navbar-menu-group" data-v-d43c1732 data-v-86530b6c><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-86530b6c><span class="text" data-v-86530b6c><!----><!----><span data-v-86530b6c>学科知识</span><!----><span class="vpi-chevron-down text-icon" data-v-86530b6c></span></span></button><div class="menu" data-v-86530b6c><div class="vp-menu" data-v-86530b6c data-v-709dc2b1><div class="items" data-v-709dc2b1><!--[--><!--[--><div class="vp-menu-link" data-v-709dc2b1 data-v-1ff1855f><a class="vp-link link" href="/subject/english/" data-v-1ff1855f><!--[--><!----> 英语学习笔记 <!----><!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vp-flyout vp-navbar-menu-group" data-v-d43c1732 data-v-86530b6c><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-86530b6c><span class="text" data-v-86530b6c><!----><!----><span data-v-86530b6c>编程笔记</span><!----><span class="vpi-chevron-down text-icon" data-v-86530b6c></span></span></button><div class="menu" data-v-86530b6c><div class="vp-menu" data-v-86530b6c data-v-709dc2b1><div class="items" data-v-709dc2b1><!--[--><!--[--><div class="vp-menu-link" data-v-709dc2b1 data-v-1ff1855f><a class="vp-link link" href="/programming/leetcode/" data-v-1ff1855f><!--[--><!----> LeetCode <!----><!--]--><!----></a></div><!--]--><!--[--><div class="vp-menu-link" data-v-709dc2b1 data-v-1ff1855f><a class="vp-link link" href="/programming/cplusplus/" data-v-1ff1855f><!--[--><!----> C++ <!----><!--]--><!----></a></div><!--]--><!--[--><div class="vp-menu-link" data-v-709dc2b1 data-v-1ff1855f><a class="vp-link link" href="/programming/solidity/" data-v-1ff1855f><!--[--><!----> Solidity <!----><!--]--><!----></a></div><!--]--><!--[--><div class="vp-menu-link" data-v-709dc2b1 data-v-1ff1855f><a class="vp-link link" href="/programming/web/" data-v-1ff1855f><!--[--><!----> Web 开发 <!----><!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vp-flyout vp-navbar-menu-group" data-v-d43c1732 data-v-86530b6c><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-86530b6c><span class="text" data-v-86530b6c><!----><!----><span data-v-86530b6c>技术理论</span><!----><span class="vpi-chevron-down text-icon" data-v-86530b6c></span></span></button><div class="menu" data-v-86530b6c><div class="vp-menu" data-v-86530b6c data-v-709dc2b1><div class="items" data-v-709dc2b1><!--[--><!--[--><div class="vp-menu-link" data-v-709dc2b1 data-v-1ff1855f><a class="vp-link link" href="/theory/cryptography/" data-v-1ff1855f><!--[--><!----> 密码学基础 <!----><!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vp-flyout vp-navbar-menu-group" data-v-d43c1732 data-v-86530b6c><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-86530b6c><span class="text" data-v-86530b6c><!----><!----><span data-v-86530b6c>运维</span><!----><span class="vpi-chevron-down text-icon" data-v-86530b6c></span></span></button><div class="menu" data-v-86530b6c><div class="vp-menu" data-v-86530b6c data-v-709dc2b1><div class="items" data-v-709dc2b1><!--[--><!--[--><div class="vp-menu-link" data-v-709dc2b1 data-v-1ff1855f><a class="vp-link link" href="/ops/blockchain/" data-v-1ff1855f><!--[--><!----> 区块链运维 <!----><!--]--><!----></a></div><!--]--><!--[--><div class="vp-menu-link" data-v-709dc2b1 data-v-1ff1855f><a class="vp-link link" href="/ops/linux/" data-v-1ff1855f><!--[--><!----> Linux 运维 <!----><!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="vp-link link navbar-menu-link" href="/tools/" tabindex="0" data-v-d43c1732 data-v-d4acf911><!--[--><!----><span data-v-d4acf911>工具</span><!----><!--]--><!----></a><!--]--><!--[--><a class="vp-link link navbar-menu-link" href="/about/" tabindex="0" data-v-d43c1732 data-v-d4acf911><!--[--><!----><span data-v-d4acf911>关于</span><!----><!--]--><!----></a><!--]--><!--[--><a class="vp-link link navbar-menu-link" href="/friends/" tabindex="0" data-v-d43c1732 data-v-d4acf911><!--[--><!----><span data-v-d4acf911>友情链接</span><!----><!--]--><!----></a><!--]--><!--]--></nav><!--[--><!--]--><!----><div class="vp-navbar-appearance appearance" data-v-2c31ea5e data-v-a295abf6><button class="vp-switch vp-switch-appearance" type="button" role="switch" title aria-checked="false" data-v-a295abf6 data-v-596c25a9 data-v-7eb32327><span class="check" data-v-7eb32327><span class="icon" data-v-7eb32327><!--[--><span class="vpi-sun sun" data-v-596c25a9></span><span class="vpi-moon moon" data-v-596c25a9></span><!--]--></span></span></button></div><div class="vp-social-links vp-navbar-social-links social-links" data-v-2c31ea5e data-v-ad52545c data-v-40bac536><!--[--><a class="vp-social-link no-icon" href="/" aria-label="github" target="_blank" rel="noopener" data-v-40bac536 data-v-67b21932><span class="vpi-social-github" /></a><!--]--></div><div class="vp-flyout vp-navbar-extra extra" data-v-2c31ea5e data-v-652282fd data-v-86530b6c><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-86530b6c><span class="vpi-more-horizontal icon" data-v-86530b6c></span></button><div class="menu" data-v-86530b6c><div class="vp-menu" data-v-86530b6c data-v-709dc2b1><!----><!--[--><!--[--><!----><div class="group" data-v-652282fd><div class="item appearance" data-v-652282fd><p class="label" data-v-652282fd>外观</p><div class="appearance-action" data-v-652282fd><button class="vp-switch vp-switch-appearance" type="button" role="switch" title aria-checked="false" data-v-652282fd data-v-596c25a9 data-v-7eb32327><span class="check" data-v-7eb32327><span class="icon" data-v-7eb32327><!--[--><span class="vpi-sun sun" data-v-596c25a9></span><span class="vpi-moon moon" data-v-596c25a9></span><!--]--></span></span></button></div></div></div><div class="group" data-v-652282fd><div class="item social-links" data-v-652282fd><div class="vp-social-links social-links-list" data-v-652282fd data-v-40bac536><!--[--><a class="vp-social-link no-icon" href="/" aria-label="github" target="_blank" rel="noopener" data-v-40bac536 data-v-67b21932><span class="vpi-social-github" /></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="vp-navbar-hamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="nav-screen" data-v-2c31ea5e data-v-2b50024d><span class="container" data-v-2b50024d><span class="top" data-v-2b50024d></span><span class="middle" data-v-2b50024d></span><span class="bottom" data-v-2b50024d></span></span></button></div></div></div></div><div class="divider" data-v-2c31ea5e><div class="divider-line" data-v-2c31ea5e></div></div></div><!----></header><div class="vp-local-nav reached-top" data-v-f73ca3da data-v-3944d8e8><button class="menu" aria-expanded="false" aria-controls="SidebarNav" data-v-3944d8e8><span class="vpi-align-left menu-icon" data-v-3944d8e8></span><span class="menu-text" data-v-3944d8e8>Menu</span></button><div class="vp-local-nav-outline-dropdown" style="--vp-vh:0px;" data-v-3944d8e8 data-v-4114a62c><button data-v-4114a62c>返回顶部</button><!----></div></div><aside class="vp-sidebar" vp-sidebar data-v-f73ca3da data-v-95211354><div class="curtain" data-v-95211354></div><nav id="SidebarNav" class="nav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-95211354><span id="sidebar-aria-label" class="visually-hidden" data-v-95211354> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-473fd05b><section class="vp-sidebar-item sidebar-item level-0" data-v-473fd05b data-v-12048f0f><!----><div data-v-12048f0f data-v-12048f0f><div class="items" data-v-12048f0f><!--[--><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-12048f0f data-v-12048f0f><div class="item" data-v-12048f0f><div class="indicator" data-v-12048f0f></div><!----><a class="vp-link link link" href="/programming/web/" data-v-12048f0f><!--[--><p class="text" data-v-12048f0f><span data-v-12048f0f>Web 开发学习笔记</span><!----></p><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section></div><div class="no-transition group" data-v-473fd05b><section class="vp-sidebar-item sidebar-item level-0 has-active" data-v-473fd05b data-v-12048f0f><div class="item" role="button" tabindex="0" data-v-12048f0f><div class="indicator" data-v-12048f0f></div><!----><h2 class="text" data-v-12048f0f><span data-v-12048f0f>基础知识</span><!----></h2><!----></div><div data-v-12048f0f data-v-12048f0f><div class="items" data-v-12048f0f><!--[--><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-12048f0f data-v-12048f0f><div class="item" data-v-12048f0f><div class="indicator" data-v-12048f0f></div><!----><a class="vp-link link link" href="/programming/web/basic-syntax/html-css-js/" data-v-12048f0f><!--[--><p class="text" data-v-12048f0f><span data-v-12048f0f>Web 前端基础讲解</span><!----></p><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-12048f0f data-v-12048f0f><div class="item" data-v-12048f0f><div class="indicator" data-v-12048f0f></div><!----><a class="vp-link link link" href="/programming/web/basic-syntax/html-tags-attributes/" data-v-12048f0f><!--[--><p class="text" data-v-12048f0f><span data-v-12048f0f>HTML 常用标签与属性</span><!----></p><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-12048f0f data-v-12048f0f><div class="item" data-v-12048f0f><div class="indicator" data-v-12048f0f></div><!----><a class="vp-link link link" href="/programming/web/basic-syntax/html-lists-and-semantic-layout/" data-v-12048f0f><!--[--><p class="text" data-v-12048f0f><span data-v-12048f0f>HTML 列表与语义布局</span><!----></p><!--]--><!----></a><!----></div><!----></div><div class="vp-sidebar-item sidebar-item level-1 is-link" data-v-12048f0f data-v-12048f0f><div class="item" data-v-12048f0f><div class="indicator" data-v-12048f0f></div><!----><a class="vp-link link link" href="/programming/web/basic-syntax/javascript-basics/" data-v-12048f0f><!--[--><p class="text" data-v-12048f0f><span data-v-12048f0f>JavaScript 基础知识</span><!----></p><!--]--><!----></a><!----></div><!----></div><!--]--></div></div></section></div><!--]--><!--[--><!--]--></nav></aside><!--[--><div id="VPContent" vp-content class="vp-content has-sidebar" data-v-f73ca3da data-v-b2beaca7><div class="vp-doc-container has-sidebar has-aside" data-v-b2beaca7 data-v-23f6ad98><!--[--><!--]--><div class="container" data-v-23f6ad98><div class="aside" vp-outline data-v-23f6ad98><div class="aside-curtain" data-v-23f6ad98></div><div class="aside-container" data-v-23f6ad98><div class="aside-content" data-v-23f6ad98><div class="vp-doc-aside" data-v-23f6ad98 data-v-5976474c><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="vp-doc-aside-outline" role="navigation" data-v-5976474c data-v-aa56eba0><div class="content" data-v-aa56eba0><div class="outline-marker" data-v-aa56eba0></div><div id="doc-outline-aria-label" aria-level="2" class="outline-title" role="heading" data-v-aa56eba0><span data-v-aa56eba0>此页内容</span><span class="vpi-print icon" data-v-aa56eba0></span></div><ul class="root" data-v-aa56eba0 data-v-3e6b023c><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-5976474c></div><!--[--><!--]--></div></div></div></div><div class="content" data-v-23f6ad98><div class="content-container" data-v-23f6ad98><!--[--><!--]--><main class="main" data-v-23f6ad98><nav class="vp-breadcrumb" data-v-23f6ad98 data-v-1ae4ad7a><ol vocab="https://schema.org/" typeof="BreadcrumbList" data-v-1ae4ad7a><!--[--><li property="itemListElement" typeof="ListItem" data-v-1ae4ad7a><a class="vp-link link breadcrumb" href="/" property="item" typeof="WebPage" data-v-1ae4ad7a><!--[-->首页<!--]--><!----></a><span class="vpi-chevron-right" data-v-1ae4ad7a></span><meta property="name" content="首页" data-v-1ae4ad7a><meta property="position" content="1" data-v-1ae4ad7a></li><li property="itemListElement" typeof="ListItem" data-v-1ae4ad7a><span class="vp-link breadcrumb" property="item" typeof="WebPage" data-v-1ae4ad7a><!--[-->基础知识<!--]--><!----></span><span class="vpi-chevron-right" data-v-1ae4ad7a></span><meta property="name" content="基础知识" data-v-1ae4ad7a><meta property="position" content="2" data-v-1ae4ad7a></li><li property="itemListElement" typeof="ListItem" data-v-1ae4ad7a><a class="vp-link link breadcrumb current" href="/programming/web/basic-syntax/javascript-basics/" property="item" typeof="WebPage" data-v-1ae4ad7a><!--[-->JavaScript 基础知识<!--]--><!----></a><!----><meta property="name" content="JavaScript 基础知识" data-v-1ae4ad7a><meta property="position" content="3" data-v-1ae4ad7a></li><!--]--></ol></nav><!--[--><!--]--><!--[--><h1 class="vp-doc-title page-title" data-v-ba8d1a1e><!----> JavaScript 基础知识 <!----></h1><div class="vp-doc-meta" data-v-ba8d1a1e><!--[--><!--]--><p class="reading-time" data-v-ba8d1a1e><span class="vpi-books icon" data-v-ba8d1a1e></span><span data-v-ba8d1a1e>约 2466 字</span><span data-v-ba8d1a1e>大约 8 分钟</span></p><!----><!--[--><!--]--><p class="create-time" data-v-ba8d1a1e><span class="vpi-clock icon" data-v-ba8d1a1e></span><span data-v-ba8d1a1e>2025-11-2</span></p></div><!--]--><!--[--><!--]--><div class="_programming_web_basic-syntax_javascript-basics_ external-link-icon-enabled vp-doc plume-content" vp-content data-v-23f6ad98><!--[--><!--]--><div data-v-23f6ad98><h2 id="javascript-是什么" tabindex="-1"><a class="header-anchor" href="#javascript-是什么"><span>JavaScript 是什么？</span></a></h2><p>JavaScript 是一种广泛用于网页开发的脚本语言，它使网页能够实现交互式功能。与 HTML（负责结构）和 CSS（负责样式）不同，JavaScript 专注于<strong>行为</strong>，可以让网页变得动态和响应式。</p><h2 id="第一个-javascript-程序" tabindex="-1"><a class="header-anchor" href="#第一个-javascript-程序"><span>第一个 JavaScript 程序</span></a></h2><p>JavaScript 代码可以直接写在 HTML 文件中，通常放在 <code><body></code> 标签的底部，使用 <code><script></code> 标签包裹。</p><div class="code-block-title" data-title="index.html"><div class="code-block-title-bar"><span class="title"><!---->index.html</span></div><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><!</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">DOCTYPE</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">html</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> lang</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">zh-CN</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">head</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">meta</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> charset</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">utf-8</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">我的第一个 JavaScript 程序</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">head</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">body</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">你好，世界！</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> </span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 这是注释，不会被执行</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Hello, JavaScript!</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 在控制台输出文本</span></span>
|
||
<span class="line"><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> alert</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">欢迎学习 JavaScript！</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 弹出提示框</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">body</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div><p><strong>提示</strong>：你可以在浏览器中按下 F12 打开开发者工具，然后切换到 "Console" 标签查看 <code>console.log()</code> 的输出。</p><p><code>console.log()</code> 是 JavaScript 中最常用、最重要的调试工具，可以说是每个开发者的"最佳朋友"！</p><h3 id="基本输出" tabindex="-1"><a class="header-anchor" href="#基本输出"><span>基本输出</span></a></h3><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-javascript"><span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// 输出字符串</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Hello World!</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// 输出变量</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> "</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">小明</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// 输出多个值</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> age</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 18</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> isStudent</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> true</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">学生信息:</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> age</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> isStudent</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="输出不同类型的数据" tabindex="-1"><a class="header-anchor" href="#输出不同类型的数据"><span>输出不同类型的数据</span></a></h3><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-javascript"><span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// 各种数据类型</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">字符串:</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> "</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Hello</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">数字:</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 42</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">布尔值:</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> true</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">数组:</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> [</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;">1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 3</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]);</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">对象:</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> "</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">李华</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> age</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 20</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">});</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">函数:</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> function</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">()</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {});</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">undefined:</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> undefined</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">null:</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> null</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="字符串插值" tabindex="-1"><a class="header-anchor" href="#字符串插值"><span>字符串插值</span></a></h3><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-javascript"><span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> userName</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> "</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">张三</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> userAge</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 25</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> score</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 95.5</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// 传统方式</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">用户 </span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> +</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> userName</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> +</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> "</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 年龄 </span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> +</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> userAge</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> +</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> "</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 分数 </span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> +</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> score</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// 模板字符串（推荐）</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">`</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">用户 </span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">${</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">userName</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">}</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 年龄 </span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">${</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">userAge</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">}</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 分数 </span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">${</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">score</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">}</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">`</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// 带表达式的插值</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">`</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">${</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">userName</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">}</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 是 </span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">${</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">userAge </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">>=</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 18</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> ?</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> "</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">成年人</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> :</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> "</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">未成年人</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">}</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">`</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="格式化输出" tabindex="-1"><a class="header-anchor" href="#格式化输出"><span>格式化输出</span></a></h3><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-javascript"><span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> product</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> "</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">笔记本电脑</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> price</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 5999</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> brand</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> "</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">Dell</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> inStock</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> true</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">};</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// %s - 字符串</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">产品名称: %s</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> product</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// %d - 数字</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">价格: %d 元</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> product</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">price</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// %f - 浮点数</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">折扣价: %f</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> product</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">price</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> *</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 0.9</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// %o - 对象</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">完整产品信息: %o</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> product</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// %c - CSS样式</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">%c重要信息!</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> "</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">color: red; font-size: 20px; font-weight: bold;</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="javascript-变量" tabindex="-1"><a class="header-anchor" href="#javascript-变量"><span>JavaScript 变量</span></a></h2><p>变量是用来存储信息的容器。在 JavaScript 中，我们使用 <code>let</code>、<code>const</code> 或 <code>var</code> 关键字来声明变量。</p><h3 id="变量声明方式" tabindex="-1"><a class="header-anchor" href="#变量声明方式"><span>变量声明方式</span></a></h3><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-javascript"><span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// 使用 let 声明可变变量</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">let</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> "</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">小明</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> "</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">小红</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 可以修改</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// 使用 const 声明常量（不可变）</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> PI</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 3.14159</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// PI = 3.14;</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 错误！常量不能修改</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// 使用 var 声明变量（旧方式，现在推荐使用 let 和 const）</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">var</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> age</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 25</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>注意</strong>：</p><ul><li>使用 <code>let</code> 声明的变量可以重新赋值</li><li>使用 <code>const</code> 声明的变量不能重新赋值（常量）</li><li>尽量避免使用 <code>var</code>，因为它有一些奇怪的作用域规则</li></ul><h2 id="数据类型" tabindex="-1"><a class="header-anchor" href="#数据类型"><span>数据类型</span></a></h2><p>JavaScript 有几种基本数据类型：</p><h3 id="_1-字符串-string" tabindex="-1"><a class="header-anchor" href="#_1-字符串-string"><span>1. 字符串（String）</span></a></h3><p>用于表示文本，可以使用单引号或双引号。</p><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-javascript"><span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> greeting</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> "</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">你好</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> '</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">JavaScript</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> message</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> `</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">${</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">greeting</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">}</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">, </span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">${</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">name</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">}</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">!</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">`</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 使用模板字符串（ES6 特性）</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">message</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 输出：你好, JavaScript!</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_2-数字-number" tabindex="-1"><a class="header-anchor" href="#_2-数字-number"><span>2. 数字（Number）</span></a></h3><p>用于表示数值。</p><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-javascript"><span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> age</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 25</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> price</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 99.99</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> PI</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 3.14159</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_3-布尔值-boolean" tabindex="-1"><a class="header-anchor" href="#_3-布尔值-boolean"><span>3. 布尔值（Boolean）</span></a></h3><p>用于表示真或假，只有两个值：<code>true</code> 和 <code>false</code>。</p><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-javascript"><span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> isStudent</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> true</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> hasGraduated</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> false</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_4-数组-array" tabindex="-1"><a class="header-anchor" href="#_4-数组-array"><span>4. 数组（Array）</span></a></h3><p>用于存储多个值的集合。</p><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-javascript"><span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> fruits</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> [</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">苹果</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> "</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">香蕉</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> "</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">橙子</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">];</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">fruits</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;">0</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 输出：苹果（数组索引从0开始）</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// 添加元素</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">fruits</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">push</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">葡萄</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">fruits</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 输出：["苹果", "香蕉", "橙子", "葡萄"]</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_5-对象-object" tabindex="-1"><a class="header-anchor" href="#_5-对象-object"><span>5. 对象（Object）</span></a></h3><p>用于存储键值对集合。</p><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-javascript"><span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> person</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> "</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">小明</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> age</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 25</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> isStudent</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> true</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> greet</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> function</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">()</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">`</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">你好，我是</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">${</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">this</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">name</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">}</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">！</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">`</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">};</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">person</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 输出：小明</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">person</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">greet</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">();</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 输出：你好，我是小明！</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="运算符" tabindex="-1"><a class="header-anchor" href="#运算符"><span>运算符</span></a></h2><h3 id="算术运算符" tabindex="-1"><a class="header-anchor" href="#算术运算符"><span>算术运算符</span></a></h3><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-javascript"><span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 10</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> b</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 5</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">a</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> +</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> b</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 15 加法</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">a</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> -</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> b</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 5 减法</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">a</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> *</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> b</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 50 乘法</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">a</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> /</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> b</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 2 除法</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">a</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> %</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> b</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 0 取余</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">a</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> **</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> b</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 100000 幂运算（ES6）</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="赋值运算符" tabindex="-1"><a class="header-anchor" href="#赋值运算符"><span>赋值运算符</span></a></h3><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-javascript"><span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> x</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 10</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">x</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> +=</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 5</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 等同于 x = x + 5</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">x</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 15</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">x</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> -=</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 3</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 等同于 x = x - 3</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">x</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 12</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="比较运算符" tabindex="-1"><a class="header-anchor" href="#比较运算符"><span>比较运算符</span></a></h3><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-javascript"><span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 10</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> b</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 5</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> ></span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> b</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // true</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> b</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // false</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> >=</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> b</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // true</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <=</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> b</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // false</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">a</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> ===</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> b</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // false（严格相等，比较值和类型）</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">a</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> ==</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> b</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // false（宽松相等，只比较值）</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">a</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> !==</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> b</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // true（严格不相等）</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="条件语句" tabindex="-1"><a class="header-anchor" href="#条件语句"><span>条件语句</span></a></h2><h3 id="if-语句" tabindex="-1"><a class="header-anchor" href="#if-语句"><span>if 语句</span></a></h3><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-javascript"><span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> age</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 18</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">if</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> (</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">age</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> >=</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 18</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">你已经成年了！</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> else</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> if</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> (</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">age</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> >=</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 13</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">你是青少年。</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> else</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">你还是个孩子。</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="循环" tabindex="-1"><a class="header-anchor" href="#循环"><span>循环</span></a></h2><h3 id="for-循环" tabindex="-1"><a class="header-anchor" href="#for-循环"><span>for 循环</span></a></h3><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-javascript"><span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// 打印1到5</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">for</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> (</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> i</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> i</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <=</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 5</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> i</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">++</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">i</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// 遍历数组</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> fruits</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> [</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">苹果</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> "</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">香蕉</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> "</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">橙子</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">];</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">for</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> (</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> i</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 0</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> i</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> fruits</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">length</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> i</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">++</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">fruits</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">i</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]);</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// 使用 for...of 遍历（ES6）</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">for</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> (</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> fruit</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> of</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> fruits</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">fruit</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="while-循环" tabindex="-1"><a class="header-anchor" href="#while-循环"><span>while 循环</span></a></h3><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-javascript"><span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> count</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">while</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> (</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">count</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <=</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 5</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">count</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> count</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">++</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="函数" tabindex="-1"><a class="header-anchor" href="#函数"><span>函数</span></a></h2><p>函数是可重用的代码块，用于执行特定任务。</p><h3 id="函数声明" tabindex="-1"><a class="header-anchor" href="#函数声明"><span>函数声明</span></a></h3><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-javascript"><span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">function</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> greet</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">name</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> return</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> `</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">你好，</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">${</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">name</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">}</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">！</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">`</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> message</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> greet</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">小明</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">message</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 输出：你好，小明！</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="箭头函数-es6" tabindex="-1"><a class="header-anchor" href="#箭头函数-es6"><span>箭头函数（ES6）</span></a></h3><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-javascript"><span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> sum</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> (</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> b</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =></span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> return</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> a</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> +</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> b</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">};</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// 简化写法（当只有一行返回语句时）</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> multiply</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> (</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">a</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> b</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =></span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> a</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> *</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> b</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">sum</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;">3</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 4</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">));</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 7</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">multiply</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;">3</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 4</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">));</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 12</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="dom-操作" tabindex="-1"><a class="header-anchor" href="#dom-操作"><span>DOM 操作</span></a></h2><p>DOM（文档对象模型）是 HTML 和 XML 文档的编程接口。JavaScript 可以通过 DOM 来操作网页元素。</p><h3 id="选择元素" tabindex="-1"><a class="header-anchor" href="#选择元素"><span>选择元素</span></a></h3><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-javascript"><span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// 通过 id 选择元素</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> document</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">getElementById</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">title</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// 通过 class 选择元素（返回元素集合）</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> items</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> document</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">getElementsByClassName</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">item</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// 通过标签名选择元素</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> paragraphs</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> document</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">getElementsByTagName</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">p</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// 通过 CSS 选择器选择元素（ES5+）</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> header</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> document</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">querySelector</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">header</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 选择第一个匹配的元素</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> allLinks</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> document</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">querySelectorAll</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">a</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 选择所有匹配的元素</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="修改元素内容" tabindex="-1"><a class="header-anchor" href="#修改元素内容"><span>修改元素内容</span></a></h3><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-javascript"><span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// 修改文本内容</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> document</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">getElementById</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">title</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">textContent</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> "</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">新标题</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// 修改 HTML 内容</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">innerHTML</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> "</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"><strong>加粗的新标题</strong></span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="修改元素样式" tabindex="-1"><a class="header-anchor" href="#修改元素样式"><span>修改元素样式</span></a></h3><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-javascript"><span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> element</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> document</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">getElementById</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">box</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">element</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">style</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">color</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> "</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">red</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">element</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">style</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">fontSize</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> "</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">20px</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">element</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">style</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">backgroundColor</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> "</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">#f0f0f0</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="添加事件监听器" tabindex="-1"><a class="header-anchor" href="#添加事件监听器"><span>添加事件监听器</span></a></h3><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-javascript"><span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> button</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> document</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">getElementById</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">myButton</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">button</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">addEventListener</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">click</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> function</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">()</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">按钮被点击了！</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> alert</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">你好，欢迎使用！</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">});</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="小案例-交互式计算器" tabindex="-1"><a class="header-anchor" href="#小案例-交互式计算器"><span>小案例：交互式计算器</span></a></h2><p>下面是一个简单的交互式计算器示例，演示如何结合 HTML、CSS 和 JavaScript。</p><div class="vp-code-tabs"><div class="vp-code-tabs-nav" role="tablist"><!--[--><button class="active vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-181-0" aria-selected="true"><!--[--><!----><span>index.html</span><!--]--></button><button class="vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-181-1" aria-selected="false"><!--[--><!----><span>style.css</span><!--]--></button><button class="vp-code-tab-nav" type="button" role="tab" aria-controls="codetab-181-2" aria-selected="false"><!--[--><!----><span>script.js</span><!--]--></button><!--]--></div><!--[--><div id="codetab-181-0" class="active vp-code-tab" role="tabpanel" aria-expanded="true"><div class="vp-code-tab-title"><!--[--><!----><span>index.html</span><!--]--></div><!--[--><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-html"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><!</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">DOCTYPE</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">html</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> lang</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">zh-CN</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">head</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">meta</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> charset</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">utf-8</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">简易计算器</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">title</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">link</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> rel</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">stylesheet</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> href</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">style.css</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">head</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">body</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> class</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">calculator</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">简易计算器</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">h2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">input</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> type</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">number</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> id</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">num1</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> placeholder</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">输入第一个数字</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">select</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> id</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">operation</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">option</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> value</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">add</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">+</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">option</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">option</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> value</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">subtract</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">-</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">option</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">option</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> value</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">multiply</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">×</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">option</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">option</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> value</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">divide</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">÷</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">option</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">select</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">input</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> type</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">number</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> id</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">num2</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> placeholder</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">输入第二个数字</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">button</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> id</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">calculate</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">计算</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">button</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> id</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">result</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">结果将显示在这里</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> </</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">div</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> </span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> <</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> src</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">script.js</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">script</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">body</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"></</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">html</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div id="codetab-181-1" class="vp-code-tab" role="tabpanel" aria-expanded="false"><div class="vp-code-tab-title"><!--[--><!----><span>style.css</span><!--]--></div><!--[--><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-css"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">calculator</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> max-width</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 300</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> margin</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 2</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> auto</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> padding</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1.5</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> border</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> solid</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">ddd</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> border-radius</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 8</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> text-align</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> center</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> font-family</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> system-ui</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">input</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> select</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> button</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> margin</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 0.5</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 0</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> padding</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 0.5</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> width</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 100</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">%</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> box-sizing</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> border-box</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">button</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> background</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">007bff</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> color</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> white</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> border</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> none</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> cursor</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;"> pointer</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> border-radius</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 4</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">button</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">hover</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> background</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">0056b3</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">#</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">result</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> margin-top</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> padding</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">rem</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> background</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> #</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">f8f9fa</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> border-radius</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 4</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">px</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><div id="codetab-181-2" class="vp-code-tab" role="tabpanel" aria-expanded="false"><div class="vp-code-tab-title"><!--[--><!----><span>script.js</span><!--]--></div><!--[--><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-javascript"><span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// 获取DOM元素</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> num1Input</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> document</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">getElementById</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">num1</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> num2Input</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> document</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">getElementById</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">num2</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> operationSelect</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> document</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">getElementById</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">operation</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> calculateButton</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> document</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">getElementById</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">calculate</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> resultDiv</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> document</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">getElementById</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">result</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// 添加点击事件监听器</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">calculateButton</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">addEventListener</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">click</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> function</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">()</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 获取输入值</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> num1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> parseFloat</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">num1Input</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">value</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> num2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> parseFloat</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">num2Input</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">value</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> operation</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> operationSelect</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">value</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> result</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> </span></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 检查输入是否有效</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> if</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> (</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">isNaN</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">num1</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> ||</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> isNaN</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">num2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">))</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> resultDiv</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">textContent</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> '</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">请输入有效的数字！</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> return</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> </span></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 执行计算</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> switch</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> (</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">operation</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> case</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> '</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">add</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> result</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> num1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> +</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> num2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> break</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> case</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> '</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">subtract</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> result</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> num1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> -</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> num2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> break</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> case</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> '</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">multiply</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> result</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> num1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> *</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> num2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> break</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> case</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> '</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">divide</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">:</span></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 检查除数是否为0</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> if</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> (</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">num2</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> ===</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 0</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> resultDiv</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">textContent</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> '</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">除数不能为0！</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> return</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> result</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> num1</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> /</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> num2</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> break</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> </span></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 显示结果</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> resultDiv</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">textContent</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> `</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">计算结果：</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">${</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">result</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">}</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">`</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">});</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!--]--></div><!--]--></div><h2 id="javascript-的异步编程" tabindex="-1"><a class="header-anchor" href="#javascript-的异步编程"><span>JavaScript 的异步编程</span></a></h2><p>JavaScript 是单线程的，但它可以通过异步编程模型来处理耗时操作，如网络请求、定时器等。</p><h3 id="settimeout-和-setinterval" tabindex="-1"><a class="header-anchor" href="#settimeout-和-setinterval"><span>setTimeout 和 setInterval</span></a></h3><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-javascript"><span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// setTimeout - 延迟执行一次</span></span>
|
||
<span class="line"><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">setTimeout</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">function</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">()</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">2秒后执行</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">},</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 2000</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// setInterval - 定期重复执行</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> count</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 0</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> timer</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> setInterval</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">function</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">()</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> count</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">++</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">`</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">执行第 </span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">${</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">count</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">}</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> 次</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">`</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> </span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> if</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> (</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">count</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> >=</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 5</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> clearInterval</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">timer</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 清除定时器</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">定时器已停止</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">},</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 1000</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="promise-es6" tabindex="-1"><a class="header-anchor" href="#promise-es6"><span>Promise（ES6）</span></a></h3><p>Promise 是异步编程的一种解决方案，用于处理异步操作。</p><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-javascript"><span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// 创建一个Promise</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> fetchData</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> new</span><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> Promise</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">((</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">resolve</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">,</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> reject</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =></span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // 模拟网络请求</span></span>
|
||
<span class="line"><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> setTimeout</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(()</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =></span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> const</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> success</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> true</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> if</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> (</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">success</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> resolve</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">数据获取成功</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> else</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> reject</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">数据获取失败</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">'</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> },</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 2000</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">});</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">// 使用Promise</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">fetchData</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> .</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">then</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">data</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =></span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">data</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> })</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> .</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">catch</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">error</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> =></span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">error</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">error</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> });</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="常见错误和调试技巧" tabindex="-1"><a class="header-anchor" href="#常见错误和调试技巧"><span>常见错误和调试技巧</span></a></h2><h3 id="常见错误" tabindex="-1"><a class="header-anchor" href="#常见错误"><span>常见错误</span></a></h3><ol><li><strong>语法错误</strong>：代码不符合 JavaScript 语法规则</li><li><strong>引用错误</strong>：使用了未定义的变量或函数</li><li><strong>类型错误</strong>：对错误类型的值进行操作</li><li><strong>范围错误</strong>：数值超出有效范围</li></ol><h3 id="调试技巧" tabindex="-1"><a class="header-anchor" href="#调试技巧"><span>调试技巧</span></a></h3><ol><li><strong>使用 console.log()</strong>：在控制台输出变量值或执行流程</li><li><strong>使用断点</strong>：在浏览器开发者工具中设置断点，逐步执行代码</li><li><strong>检查错误信息</strong>：仔细阅读错误提示，找出问题所在</li><li><strong>检查变量类型</strong>：使用 <code>typeof</code> 操作符检查变量类型</li></ol><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;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-javascript"><span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">typeof</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> "</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">hello</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // "string"</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">typeof</span><span style="--shiki-light:#2F798A;--shiki-dark:#4C9A91;"> 42</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // "number"</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">typeof</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> true</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // "boolean"</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">typeof</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {});</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // "object"</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">console</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">log</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">(</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;">typeof</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> []);</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;"> // "object"（数组也是对象的一种）</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="实践练习" tabindex="-1"><a class="header-anchor" href="#实践练习"><span>实践练习</span></a></h2><h3 id="练习1-创建一个简单的待办事项列表" tabindex="-1"><a class="header-anchor" href="#练习1-创建一个简单的待办事项列表"><span>练习1：创建一个简单的待办事项列表</span></a></h3><p>使用 HTML、CSS 和 JavaScript 创建一个待办事项列表，包含添加、删除和标记完成功能。</p><p>提示：</p><ul><li>使用数组存储待办事项</li><li>使用 DOM 操作动态更新列表</li><li>为按钮添加事件监听器</li></ul><h3 id="练习2-实现一个数字猜谜游戏" tabindex="-1"><a class="header-anchor" href="#练习2-实现一个数字猜谜游戏"><span>练习2：实现一个数字猜谜游戏</span></a></h3><p>计算机随机生成一个1到100之间的数字，玩家通过输入框猜测，程序提示"猜大了"或"猜小了"，直到猜对为止。</p><p>提示：</p><ul><li>使用 <code>Math.random()</code> 生成随机数</li><li>使用条件语句判断猜测结果</li><li>记录并显示猜测次数</li></ul><h2 id="总结" tabindex="-1"><a class="header-anchor" href="#总结"><span>总结</span></a></h2><p>JavaScript 是现代 web 开发的核心技术之一，它可以让网页变得动态和交互。通过学习变量、数据类型、运算符、条件语句、循环、函数和 DOM 操作等基础知识，你已经迈出了学习 JavaScript 的第一步。</p><p>继续练习和探索，你会发现 JavaScript 的强大功能和灵活性！</p></div><!----><!----><!----></div></main><footer class="vp-doc-footer" data-v-23f6ad98 data-v-7138e2cb><!--[--><!--]--><!----><div class="contributors" aria-label="Contributors" data-v-7138e2cb><span class="contributors-label" data-v-7138e2cb>贡献者: </span><span class="contributors-info" data-v-7138e2cb><!--[--><!--[--><span class="contributor" data-v-7138e2cb>Kawaxxxsaki</span><!----><!--]--><!--]--></span></div><nav class="prev-next" data-v-7138e2cb><div class="pager" data-v-7138e2cb><a class="vp-link link pager-link prev" href="/programming/web/basic-syntax/html-lists-and-semantic-layout/" data-v-7138e2cb><!--[--><span class="desc" data-v-7138e2cb>上一页</span><span class="title" data-v-7138e2cb>HTML 列表与语义布局</span><!--]--><!----></a></div><div class="pager" data-v-7138e2cb><!----></div></nav></footer><div id="comment" class="waline-wrapper vp-comment" vp-comment darkmode="false" style="display:block;" data-v-23f6ad98><!----></div><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!--]--><button style="display:none;" type="button" class="vp-back-to-top" aria-label="back to top" data-v-f73ca3da data-v-bcf8d9a6><span class="percent" data-allow-mismatch data-v-bcf8d9a6>0%</span><span class="show icon vpi-back-to-top" data-v-bcf8d9a6></span><svg aria-hidden="true" data-v-bcf8d9a6><circle cx="50%" cy="50%" data-allow-mismatch style="stroke-dasharray:calc(0% - 12.566370614359172px) calc(314.1592653589793% - 12.566370614359172px);" data-v-bcf8d9a6></circle></svg></button><svg style="display:none;" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" aria-label="sign down" class="vp-sign-down" aria-hidden="true" data-v-f73ca3da data-v-900978de><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" data-v-900978de><path d="m19 11l-7 6l-7-6" data-v-900978de></path><path d="m19 5l-7 6l-7-6" opacity="0.6" data-v-900978de></path></g></svg><footer class="vp-footer has-sidebar" vp-footer data-v-f73ca3da data-v-400675cf><!--[--><div class="container" data-v-400675cf><p class="message" data-v-400675cf>Powered by <a target="_blank" href="https://v2.vuepress.vuejs.org/">VuePress</a> & <a target="_blank" href="https://theme-plume.vuejs.press">vuepress-theme-plume</a></p><!----></div><!--]--></footer><!--[--><!--]--><!--]--></div><!----><!--]--><!--[--><!--]--><!--]--></div><script type="module" src="/assets/app-DnSLvtbI.js" defer></script></body></html> |