导入方式

HTML 中的脚本必须位于 标签之间。

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

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

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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>
1
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 跳过当前这次循环的剩余部分 循环继续执行下一次 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!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 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!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 → 可用显示区大小 一般用于布局适配，全屏展示一般用于判断显示环境，比如全屏展示、适配布局