JAVASCRIPT

23882 发布于 2025-12-09 45 次阅读

导入方式

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

JavaScript 可以通过不同的方式来输出数据：

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导入方式</title>
    <script>
        console.log("Hello, 内联样式head");
    </script>

    <script src="1.js"></script>
</head>
<body>
    <script>
        console.log("Hello, 内联样式body");
        alert("弹窗");
    </script>
</html>

console.log('Hello, 外联样式');

常见语法

在strict模式下运行的JavaScript代码，强制通过var申明变量，未使用var申明变量就使用的，将导致运行错误。

作用域

特性 函数作用域 (var) 块级作用域 (let / const)
定义 变量在整个函数内有效。 变量仅在 {} 代码块内有效。
关键字 var let, const
可见范围 渗透 if, for, while 等块。 被严格限制在 if, for, while 等块内。
优点/缺点 缺点：容易造成变量泄露、命名冲突和意外的 bug（如循环陷阱）。 优点：代码更清晰、更安全、更易于维护，能有效避免命名冲突。

函数提升和变量提升

声明方式 提升行为 初始化状态 声明前访问
var 声明被提升 初始化为 undefined 得到 undefined
let 声明被提升 未初始化 (进入 TDZ) ReferenceError
const 声明被提升 未初始化 (进入 TDZ) ReferenceError
函数声明 整个函数体被提升 - 可以正常调用

变量

变量提升：它会先扫描整个函数体的语句，把所有用var申明的变量“提升”到函数顶部：

特性 var let const
核心定义 JavaScript 最初的变量声明方式，规则宽松，现已不推荐使用。 用于声明其值未来可能需要被改变的变量。 用于声明一个不希望被重新赋值的“只读”变量。
作用域 函数作用域 块级作用域 {} 块级作用域 {}
变量提升 会提升，并初始化为 undefined。(可以先使用后声明，值为 undefined) 会提升，但存在暂时性死区 (TDZ)。(在声明前访问会报错) 会提升，但存在暂时性死区 (TDZ)。(在声明前访问会报错)
重复声明 允许在同一作用域内重复声明。(容易造成变量覆盖) 不允许在同一作用域内重复声明。(更安全) 不允许在同一作用域内重复声明。(更安全)
重新赋值 允许 允许 不允许 (但可修改对象或数组的内部内容)
初始值 声明时可以不赋初始值，默认为 undefined 声明时可以不赋初始值，默认为 undefined 声明时必须立即赋初始值，否则报错。
特性 undefined null
含义 “缺少值”、“未定义” “没有对象”、“空值”
类型 undefined 类型 (typeof a === "undefined") object 类型 (typeof a === "object")
来源 通常是系统自动赋值 必须是程序员手动赋值
用途 检查变量是否已赋值、函数是否有返回值等 明确表示一个变量为空，特别是期望存放对象的地方

条件语句和循环语句和错误处理

条件语句

if (条件1) { // 如果条件1为 true，执行这里 } else if (条件2) { // 如果条件1不成立，但条件2为 true，执行这里 } else { // 如果以上所有条件都不成立，执行这里 }

循环语句

for (初始化; 条件; 更新) {

// 循环体代码

}

while (条件) {

// 只要条件为 true，就一直执行这里的代码

// 重要：循环体内必须有代码能让条件最终变为 false，否则会死循环！

}

try { // 可能会抛出错误的代码 } catch (error) { // 当 try 里出错时执行 // error 是一个错误对象，可以通过 error.message 查看错误信息 } finally { // 可选 // 不管 try 里是否出错，这里的代码都会执行 }

指令 作用 对循环的影响
break 终止整个循环 循环立即结束
continue 跳过当前这次循环的剩余部分 循环继续执行下一次 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>常见语法</title>
</head>
<body>
    <script>
    var a ;
    let b = 2;
    const PI = 3.14;
    console.log(a, b, PI);
    let name = "张三";
    console.log(name);
    let empty_value=null;
    console.log(empty_value);
    
    console.log('条件语句');
    let age = 20;
    if (age < 18) {
        console.log('未成年');
    } else if (age === 18) {
        console.log('刚成年');
    } else {
        console.log('成年人');
    }

    console.log('循环语句for');
    for (let i=0; i<3; i++) {
        console.log(i);
    }

    console.log('循环语句while');
    let j=0;
    while (j<3) {
        console.log(j);
        j++;
    }

    console.log('continue和break');
    for (let k=0; k<5; k++) {
        if (k===2) {
            continue;
        }
        if (k===4) {
            break;
        }
        console.log(k);
    }
    </script>
</body>
</html>

函数

//普通函数

function functionName(参数1,参数2) {

// 函数体 (要执行的代码)

// …

return result; // 可选的返回值

}

// 箭头函数 const fn = (参数1, 参数2) => {

//函数体

//…

return a + b; };

事件

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作，在事件触发时 JavaScript 可以执行一些代码

下面是一些常见的HTML事件的列表:

事件 描述
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载

DOM

document代表整个网页文档，是 DOM 的入口点。通过它可以访问/操作页面里的所有节点。是window的子对象

“全局找/建/文档态 → document；视口/地址/尺寸 → window；对哪块操作/监听 → 用那块的元素element。”

查询/获取节点

  • document.getElementById('idName'): 通过元素的 id 获取，最快最精确。（返回单个元素）
  • document.getElementsByClassName('className'): 通过 class 名称获取。（返回一个 HTMLCollection，类似数组）
  • document.getElementsByTagName('tagName'): 通过标签名（如 'p', 'div'）获取。（返回一个 HTMLCollection）

更新/修改节点

  • 修改内容
    • element.textContent = '新文本内容': 只修改文本，会忽略 HTML 标签（更安全）。
    • element.innerHTML = '<strong>新</strong> HTML 内容': 可以解析并插入 HTML 标签。
  • 修改样式
    • element.style.property = 'value': 直接修改行内样式，例如 title.style.color = 'red';。

事件监听器

addEventListener() 方法:

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 “click” 或 “mousedown”).

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

对象 定义（详细） 常用属性 / 方法 说明
document 代表整个网页文档，是 DOM 的入口点。通过它可以访问/操作页面里的所有节点。 - getElementById(id) → 根据 id 获取元素 - getElementsByClassName(name) → 根据 class 获取元素集合 - getElementsByTagName(tag) → 根据标签获取集合 - querySelector(sel) / querySelectorAll(sel) → 按选择器获取 - createElement(tag) → 创建新元素 - createTextNode(text) → 创建文本节点 - body / head / documentElement → 获取 <body> <head> <html> 最常用的 DOM 对象，所有节点操作的起点
Element 表示一个 HTML 元素节点（如 <div>、<p> 等）。可以操作它的内容、属性、样式。 - innerHTML → 设置/获取 HTML 内容 - innerText / textContent → 文本内容 - setAttribute(name, val) / getAttribute(name) / removeAttribute(name) → 属性操作 - style → 操作行内样式 - classList.add() / .remove() / .toggle() → class 操作 document.getElementById() 等获取的结果就是 Element 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件和DOM</title>
</head>
<body>
    <button onclick="handleClick()">点击我</button>
    <div id="message">这是id标签</div>
    <div class="box">这是class标签</div>
    <div>这是div标签</div>
    <button id="myButton">通过JS添加事件</button>

    <script>
        function handleClick() {
            alert("按钮被点击了！");
        }
        // 通过id选择元素
        const elementById = document.getElementById("message");
        console.log(elementById);

        // 通过class选择元素
        const elementByClass = document.getElementsByClassName('box')[0];
        console.log(elementByClass);

        // 通过标签名选择元素
        const elementByTag = document.getElementsByTagName('div')[2];
        console.log(elementByTag);

        elementById.innerHTML = "<a href='#'>链接跳转</a>";// 解析html标签
        elementByClass.innerText = "<a href='#'>链接跳转</a>";// 作为纯文本
        elementByTag.style.color = 'red';

        const elementButton = document.getElementById("myButton");
        console.log(elementButton);
        elementButton.addEventListener('click',function(){
            alert("addEventListener触发了");
        })
    </script>
</body>
</html>

BOM（浏览器对象模型）

对象 定义（详细） 常用属性 / 方法 说明
window 代表一个浏览器窗口或 <iframe> 框架，是 BOM 的顶级对象。所有全局变量、函数、DOM 对象、BOM 对象都挂在 window 上。 alert(msg) / confirm(msg) / prompt(msg) → 弹框setTimeout(fn, ms) / clearTimeout(id) → 定时器setInterval(fn, ms) / clearInterval(id) → 循环定时器innerWidth / innerHeight → 窗口可视区域大小scrollX / scrollY → 滚动条位置open(url) / close() → 打开/关闭窗口 BOM 核心对象，其他对象（location、history、navigator、screen、event）都是它的属性
location 表示 当前窗口的 URL 信息，可读取或修改地址栏，实现页面跳转、刷新。 href → 当前 URLreload() → 刷新页面assign(url) → 跳转（可回退）replace(url) → 替换（不可回退） 用得最多的 BOM 对象
history 表示 浏览器历史记录栈，允许前进、后退或跳转到指定页面。 back() → 后退forward() → 前进go(n) → 前进/后退 n 步 出于安全考虑，不能获取具体 URL，只能操作历史栈
navigator 表示 浏览器自身和运行环境的信息（类型、版本、语言、是否联网）。 userAgent → 浏览器标识language → 当前语言onLine → 是否联网 常用于浏览器环境检测
screen 表示 用户屏幕相关信息，与浏览器窗口无关。 width / height → 屏幕分辨率availWidth / availHeight → 可用显示区大小 一般用于布局适配，全屏展示一般用于判断显示环境，比如全屏展示、适配布局
此作者没有提供个人介绍。
最后更新于 2025-12-09