前端

JS

JavaScript 引入方式

内部脚本

概述： 在 HTML 文件中使用 <script> 标签直接编写 JS 代码，可以放在页面 <head> 或 <body> 中，通常建议放在 </body> 前减少阻塞渲染。

<script>
    // JavaScript 代码
    alert('Hello JS');
</script>
元素/属性说明
<script>包含 JS 代码的标签
type脚本类型，默认 text/javascript（可省略）

外部脚本

概述： 将 JavaScript 独立成单独的 .js 文件，并在 HTML 中通过 <script src="路径"></script> 引入，便于复用与维护。

<!-- HTML 文件 -->
<script src="js/demo.js"></script>

// js/demo.js 文件内容
alert('JavaScript is working!');
属性说明
src外部脚本文件路径（相对/绝对）
注意外部脚本的 <script> 标签里通常不再写 JS 代码

模块化脚本

概述： 使用 type="module" 属性加载 ES6 模块，可以通过 import / export 在多个文件间导入导出函数和变量。

<!-- HTML 文件 -->
<script src="js/eventDemo.js" type="module"></script>

// js/utils.js
export function printLog(msg) {
    console.log(msg);
}

// js/eventDemo.js
import { printLog } from './utils.js';
printLog('JS 模块化加载成功！');
属性说明
type="module"开启 ES6 模块化语法支持
export用于导出模块变量或函数
import用于导入其他模块的变量或函数

JavaScript 基础语法

变量声明（let）

概述： 使用 let 声明变量，支持块级作用域，可以存放不同类型的值，变量的值可更改。

// 使用 let 声明变量
let a = 10;
a = 'hello'; // 重新赋值为字符串
a = true;    // 再重新赋值为布尔值

console.log(a); // true
关键字说明
let声明块级作用域变量，值可修改

常量声明（const）

概述： 使用 const 声明常量，声明时必须赋值，且值不可重新赋值。

const PI = 3.14;
console.log(PI);

// PI = 5; // ❌ 报错：常量不能重新赋值
关键字说明
const声明常量，一旦赋值不可更改

输出方式

概述： JS 常用三种输出方式：弹窗、控制台输出、写入页面内容。

alert('Hello JS');        // 弹出提示框
console.log('控制台输出'); // 浏览器控制台输出
document.write('页面输出'); // 直接写入 HTML 文档
方法说明
alert()弹出提示框，阻塞页面交互
console.log()在浏览器开发者工具控制台输出信息
document.write()向文档写入内容（不推荐用于页面加载完成后）

JavaScript 数据类型

number 数值型

概述： 表示整数和浮点数，支持数学运算。

alert(typeof 10);   // number
alert(typeof 1.5);  // number
类型说明
number整数或浮点数，支持 + - * / % 等运算

boolean 布尔型

概述： 只有两个值：true 和 false，常用作逻辑判断。

alert(typeof true);  // boolean
alert(typeof false); // boolean
类型说明
boolean逻辑值，true 表示真，false 表示假

string 字符串

概述： 文本数据，可以用单引号、双引号或反引号包裹。

alert(typeof "Hello");    // string
alert(typeof 'JavaScript');// string
alert(typeof `模板字符串`); // string
类型说明
string文本内容，用于存储和处理字符数据

null 空值

概述： 特殊值，表示“空对象”或“无值”。

alert(typeof null); // object（历史遗留 bug）
类型说明
null表示空值或空对象引用

undefined 未定义

概述： 变量声明但未赋值时，值为 undefined。

let a;
alert(typeof a); // undefined
类型说明
undefined变量未赋值的默认值

模板字符串

概述： 使用反引号 ` 包裹的字符串，可在其中嵌入变量和表达式。

let name = 'Tom';
let age = 18;
console.log(`我的名字叫${name}，今年${age}岁`);
特性说明
变量插值通过 ${变量名} 在字符串中嵌入变量
多行字符串模板字符串可以直接换行

JavaScript 函数

普通函数

概述： 使用 function 关键字定义函数，按需调用。JS 函数可以接受任意个参数，参数多也不会报错，未定义参数值为 undefined。

function add(a, b) {
    return a + b;
}

let result = add(10, 20); // 调用函数
console.log(result); // 30
关键字说明
function声明一个函数
return返回函数结果，终止函数执行

匿名函数（函数表达式）

概述： 没有名称的函数，可赋值给变量使用。

// 将匿名函数赋给变量 add
let add = function(a, b) {
    return a + b;
}

console.log(add(10, 20)); // 30
说明
匿名函数常用于回调或赋值给变量，以便后续调用

箭头函数

概述： ES6 引入的简写函数形式，省略 function 关键字，且对 this 的指向与普通函数不同（箭头函数中 this 绑定定义时的上下文）。

// 带返回值的写法
let add = (a, b) => {
    return a + b;
};
console.log(add(10, 20)); // 30

// 单表达式可省略 return 和 {}
let square = x => x * x;
console.log(square(5)); // 25
特性说明
this 指向箭头函数不会创建自己的 this，继承外层上下文
简写仅有一个参数时可省略括号，函数主体仅有一个表达式时可省略 {} 和 return

JavaScript 对象与 JSON

对象定义

概述： JavaScript 对象是由属性和方法组成的无序集合，可以使用 {} 字面量语法创建。

// 带方法的对象
let user = {
    name: 'Tom',
    age: 18,
    sex: '男',
    show: function() {
        alert(this.name + ' 在唱歌');
    }
};

// 调用对象属性和方法
alert(user.name); // Tom
user.show();
术语说明
属性对象中的键值对数据
方法对象中的函数，作为属性值定义
this在普通方法中，指向当前对象

方法简写

概述： ES6 支持在对象中定义方法时省略 function 关键字。

let user = {
    name: 'Tom',
    age: 18,
    sex: '男',
    show() { // 方法简写
        alert(this.name + ' 在唱歌');
    }
};
user.show();
语法说明
方法名() { ... }等价于 方法名: function() { ... }

对象中的箭头函数

概述： 箭头函数不会绑定自己的 this，其 this 指向定义时的外层作用域，通常不是当前对象本身。

let user = {
    name: 'Tom',
    age: 18,
    sex: '男',
    show: () => {
        alert(this.name + ' 在唱歌'); // this 指向外部作用域
    }
};
user.show(); // 输出 undefined 在唱歌
注意
当需要访问对象本身的属性时，方法不建议用箭头函数。

JSON.stringify 与 JSON.parse

概述： JSON（JavaScript Object Notation）是一种轻量级数据交换格式，key 必须用双引号包裹。

// JS 对象
let person = {
    name: 'itcast',
    age: 18,
    sex: '男'
};

// 1. 将 JS 对象转为 JSON 字符串
let jsonStr = JSON.stringify(person);
console.log(jsonStr); // {"name":"itcast","age":18,"sex":"男"}

// 2. 将 JSON 字符串转为 JS 对象
let personJson = '{"name":"heima","age":18,"sex":"男"}';
let obj = JSON.parse(personJson);
console.log(obj.name); // heima
方法作用
JSON.stringify(obj)JS 对象 → JSON 字符串
JSON.parse(str)JSON 字符串 → JS 对象

JavaScript DOM 操作

获取元素 - querySelector / querySelectorAll

概述： 通过 CSS 选择器获取页面元素，querySelector 返回匹配的第一个元素，querySelectorAll 返回匹配的所有元素（NodeList）。

// 获取第一个 h1 元素
let h1 = document.querySelector('h1');
console.log(h1);

// 获取 id 为 title1 的元素
let title = document.querySelector('#title1');

// 获取所有 h1 元素（NodeList）
let hs = document.querySelectorAll('h1');
console.log(hs[0], hs[1]);
方法说明
document.querySelector(selector)返回匹配选择器的第一个元素
document.querySelectorAll(selector)返回匹配选择器的所有元素（NodeList，可用下标访问）

修改元素内容 - innerHTML

概述： innerHTML 属性用于获取或设置元素的 HTML 内容。

let h1 = document.querySelector('#title1');
h1.innerHTML = '修改后的文本内容';
属性说明
innerHTML设置或返回元素的 HTML 内容

修改元素样式 - style

概述： 通过元素的 style 属性可直接设置行内样式，属性名需用驼峰命名。

let div = document.querySelector('#box');
div.style.backgroundColor = 'red';
div.style.width = '200px';
属性说明
element.style.样式属性直接设置行内样式，CSS 属性名用驼峰写法

修改元素属性 - setAttribute / getAttribute

概述： 使用 setAttribute 设置 HTML 属性，getAttribute 获取 HTML 属性值。

let img = document.querySelector('img');

// 设置属性
img.setAttribute('src', 'images/new.png');
img.setAttribute('alt', '新图片');

// 获取属性
console.log(img.getAttribute('src'));
方法说明
element.setAttribute(name, value)设置 HTML 属性
element.getAttribute(name)获取 HTML 属性值

classList 操作类名

概述： 通过 classList 属性可方便地添加、移除、切换类名。

let box = document.querySelector('#box');

box.classList.add('active');     // 添加类
box.classList.remove('active');  // 移除类
box.classList.toggle('active');  // 切换类
方法说明
add(className)添加类名
remove(className)移除类名
toggle(className)切换类名（有则移除，无则添加）

JavaScript 事件监听

addEventListener 绑定事件

概述： 使用 addEventListener 为元素绑定事件，可以为同一事件绑定多个监听函数，彼此不会覆盖。

let btn = document.querySelector('#btn1');

btn.addEventListener('click', () => {
    alert('点击了按钮1 - 事件1');
});
btn.addEventListener('click', () => {
    alert('点击了按钮1 - 事件2');
});
方法说明常用事件类型
element.addEventListener(type, listener)绑定事件监听器click、mouseover、mouseout、keydown 等

onxxx 属性绑定事件

概述： 通过元素的事件属性（如 onclick）绑定事件，后绑定的会覆盖先绑定的。

let btn = document.querySelector('#btn2');

btn.onclick = function() {
    alert('点击了按钮2 - 事件1');
};
btn.onclick = function() {
    alert('点击了按钮2 - 事件2'); // 覆盖了前一个事件
};
属性说明
on事件名绑定事件处理函数，后赋值会覆盖

常见鼠标事件

概述： 鼠标相关的事件类型。

element.addEventListener('click', () => { console.log('单击'); });
element.addEventListener('dblclick', () => { console.log('双击'); });
element.addEventListener('mouseenter', () => { console.log('鼠标移入'); });
element.addEventListener('mouseleave', () => { console.log('鼠标移出'); });
事件类型说明
click鼠标单击
dblclick鼠标双击
mouseenter鼠标移入元素
mouseleave鼠标移出元素
mouseover鼠标移入（会冒泡）
mouseout鼠标移出（会冒泡）

常见键盘事件

概述： 键盘按键相关事件。

input.addEventListener('keydown', () => { console.log('键盘按下'); });
input.addEventListener('keyup', () => { console.log('键盘抬起'); });
事件类型说明
keydown键盘按下时触发
keyup键盘抬起时触发
keypress键盘按下并产生字符时触发（已废弃）

常见表单事件

概述： 表单输入和焦点相关事件。

input.addEventListener('focus', () => { console.log('获得焦点'); });
input.addEventListener('blur', () => { console.log('失去焦点'); });
input.addEventListener('input', () => { console.log('用户正在输入'); });
form.addEventListener('submit', () => { alert('表单提交'); });
事件类型说明
focus元素获得焦点
blur元素失去焦点
input用户输入时触发
change值变化且失去焦点时触发
submit表单提交时触发

事件案例：表格行高亮

概述： 鼠标移入表格行时高亮显示，移出时恢复。

let trs = document.querySelectorAll('tbody tr');

trs.forEach(tr => {
    tr.addEventListener('mouseenter', function() {
        this.style.backgroundColor = '#f2e2e2';
    });
    tr.addEventListener('mouseleave', function() {
        this.style.backgroundColor = '#fff';
    });
});
方法说明
forEach遍历 NodeList 集合
this事件回调中指向触发事件的元素（普通函数时）

JavaScript 模块化

模块化概述

概述： 自 ES6 起，JavaScript 原生支持模块化，可使用 export 导出模块成员，import 导入模块成员。模块文件可以互相独立维护，提高代码复用性与可维护性。

<!-- HTML 文件 -->
<script src="js/eventDemo.js" type="module"></script>
关键词说明
export从模块文件中导出变量、函数、类等
import从其他模块导入成员
type="module"指定脚本为模块，支持 ES6 模块语法

导出模块 - export

概述： 使用 export 将函数、对象、常量等暴露出去，以便在其他文件中导入。

// utils.js
export function printLog(msg) {
    console.log(msg);
}

export const PI = 3.14159;

// 也可统一导出
function sum(a, b) { return a + b; }
function multiply(a, b) { return a * b; }
export { sum, multiply };
语法说明
export 声明前直接导出导出变量、函数、类
统一导出export { a, b, c }

导入模块 - import

概述： 通过 import 从其他模块导入已导出的成员，可以按需导入或整体导入。

// 导入单个成员
import { printLog } from './utils.js';
printLog('Hello Module');

// 导入多个成员
import { PI, sum } from './utils.js';
console.log(PI, sum(2, 3));

// 模块整体导入为对象
import * as util from './utils.js';
console.log(util.PI);
util.printLog('All imported!');

// 导入默认导出（见下节）
import demo from './defaultModule.js';
语法说明
import { a, b }按需导入
import * as obj整体导入为对象
import defaultName导入默认导出

默认导出 - export default

概述： 每个模块只能有一个默认导出，导入时可自定义名称。

// defaultModule.js
export default function() {
    console.log('我是默认导出的函数');
}

// 导入默认导出内容
import anyName from './defaultModule.js';
anyName(); // 输出：我是默认导出的函数
关键点说明
export default默认导出，不需要用大括号导入
导入时命名自由默认导出可任意命名

模块化案例：事件函数分离

概述： 将通用的打印函数单独封装到模块中，通过模块导入来实现代码复用。

// utils.js
export function printLog(msg) {
    console.log(msg);
}

// eventDemo.js
import { printLog } from './utils.js';

// 给按钮绑定事件
document.querySelector('#b2').addEventListener('click', () => {
    printLog('我被点击了...');
});
优点
代码结构清晰，便于维护；可在多个页面重复使用同一模块。

JavaScript 数组与循环案例：学生分数统计

案例概述

需求： 老师需要将学生信息录入学生管理系统，并对学生成绩进行统计：

  1. 创建数组 studentArr 保存学生对象（包含属性 name、score）
  2. 添加多位学生到数组中
  3. 编写 getSumScore 函数统计学生总分
  4. 将总分输出到页面

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生成绩统计</title>
</head>
<body>
<script>
    // ① 创建数组保存学生对象
    let studentArr = [];

    // 创建学生对象
    let stu01 = {name: "张三", score: 99};
    let stu02 = {name: "李四", score: 100};
    let stu03 = {name: "王五", score: 97};

    // 添加对象到数组
    studentArr.push(stu01);
    studentArr.push(stu02);
    studentArr.push(stu03);

    // ② 创建函数统计总分
    function getSumScore(arr) {
        let sumScore = 0;
        for (let i = 0; i < arr.length; i++) {
            sumScore += arr[i].score;
        }
        return sumScore;
    }

    // ③ 在页面输出总分
    document.write("总分：" + getSumScore(studentArr));
</script>
</body>
</html>

相关知识点

知识点说明
Array.push() 向数组末尾添加元素，可一次性添加多个
对象字面量 使用 {key: value} 形式创建对象
for 循环 遍历数组中的每个元素
document.write() 向页面输出内容（演示用，实际项目少用）
评论