Web前端

JavaScript

JavaScript

理论篇

  • 概述

    • JavaScript（JS）：跨平台、面向对象的脚本语言，用于控制网页行为，实现人机交互。
    • JS 与 Java 是不同语言，概念与设计不同，但基础语法类似。
    • 组成：
      • ECMAScript：变量、数据类型、流程控制、函数、对象等核心语法。
      • BOM：浏览器对象模型（弹窗、地址栏、关闭窗口等）。
      • DOM：文档对象模型（修改内容、样式、结构等）。
    • 标准：ECMAScript 由 ECMA 国际制定，JS 遵循该标准（笔记中提及 ES2024）。

  • JS 引入方式

    • 内部脚本：在 HTML 的 script 标签中编写 JS。
    • 外部脚本：将 JS 写入 .js 文件，通过 script 标签的 src 引入。外部文件中不写 script 标签，且引入时必须双标签。

  • 输出语句

    • document.write()：输出到页面 body。
    • alert()：弹出提示。
    • console.log()：输出到控制台。

  • 变量与常量

    • let：声明变量（推荐），JS 为弱类型语言，变量可存放不同类型值。
    • var：早期声明方式，可重复声明（不推荐）。
    • const：声明常量，必须初始化且不可重新赋值。

  • 数据类型与模板字符串

    • 原始类型：number、string、boolean、null、undefined。
    • typeof：检测数据类型（如 typeof 3 为 number，typeof null 为 object）。
    • 模板字符串：反引号 ...，使用 ${变量} 插值，便于拼接。

  • 函数

    • 命名函数：function 函数名(形参){...}。
    • 匿名函数：
      • 函数表达式：let fn = function(...) {...}
      • 箭头函数：let fn = (...) => {...}
    • JS 调用只要求函数名正确，实参与形参个数可不一致（不建议）。

  • 自定义对象与 JSON

    • 对象字面量：let obj = { 属性: 值, 方法(){...} }
    • JSON：JavaScript 对象标记法，key 必须用双引号；常用 API：
      • JSON.stringify(obj)：对象转 JSON 字符串
      • JSON.parse(str)：JSON 字符串转对象

  • 流程控制

    • if ... else if ... else ...
    • switch
    • for
    • while
    • do ... while
    • 与 Java 中的执行机制一致。

  • DOM

    • 概念：将 HTML 文档封装为对象（Document、Element、Attribute、Text、Comment 等）。
    • 核心思路：把网页内容当作对象来处理，修改对象属性会映射到页面。
    • 常用选择：
      • document.querySelector(选择器)：匹配到的第一个元素。
      • document.querySelectorAll(选择器)：匹配到的所有元素（NodeList 伪数组）。

  • 事件监听

    • 绑定方式：
      • addEventListener('事件类型', 回调)：可绑定多次（推荐）。
      • 元素.on事件 = 回调：会覆盖上一次绑定（早期方式）。
    • 常见事件：
      • 鼠标：click、mouseenter、mouseleave
      • 键盘：keydown、keyup
      • 表单：focus、blur、input、submit

代码篇

JS 引入方式

作用/概念简述

  • 在 HTML 中加载 JavaScript。分内部脚本和外部脚本两种方式。

通用模板

<!-- 内部脚本 -->
<script>
  alert('Hello JS');
</script>

<!-- 外部脚本 -->
<script src="js/demo.js"></script>

属性/知识点表格

项说明
在 HTML 中声明 JS 脚本
src引入外部 JS 文件路径
外部文件文件中不包含
引入标签不能自闭合，必须双标签

片段代码案例

<!DOCTYPE html>
<html>
<body>
  <!-- 内部脚本 -->
  <script>
    alert('Hello JS');
  </script>
  <!-- 外部脚本 -->
  <script src="js/demo.js"></script>
</body>
</html>

输出语句

作用/概念简述

  • 将信息输出到页面、弹窗或控制台，用于调试/显示。

通用模板

document.write("文本");
alert("提示");
console.log("日志");

属性/知识点表格

方法作用
document.write输出到页面 body 中
alert弹出浏览器提示框
console.log输出到控制台

片段代码案例

<script>
  document.write("Hello JS (document.write)");
  window.alert("Hello JS (window.alert)");
  console.log("Hello JS (console.log)");
</script>

变量与常量

作用/概念简述

  • JS 为弱类型语言，变量可存不同类型；常量不可重新赋值。

通用模板

let a = 20;    // 变量
const PI = 3.14; // 常量
var x = 'old'; // 早期方式（不推荐）

属性/知识点表格

关键字特点
let块级作用域，不可重复声明
const块级作用域，必须初始化，值不可修改
var函数作用域，可重复声明（不推荐）

片段代码案例

<script>
  let a = 20;
  a = "Hello";
  alert(a);

  const PI = 3.14;
  // PI = 3.15; // 会报错：常量不可重新赋值
</script>

数据类型与模板字符串

作用/概念简述

  • 使用 typeof 检测类型；模板字符串便于拼接文本与变量。

通用模板

typeof 值;         // 返回类型
`内容${变量}`;     // 模板字符串

属性/知识点表格

类型示例/备注
number3, 3.14
string"abc", 'abc', abc
booleantrue, false
nulltypeof 结果为 object
undefined未初始化的变量

片段代码案例

<script>
  alert(typeof 3);       // number
  alert(typeof 'Hello'); // string
  alert(typeof null);    // object
  let a;
  alert(typeof a);       // undefined

  let name = 'Tom', age = 18;
  console.log(`大家好, 我是新入职的${name}, 今年${age}岁了, 请多多关照`);
</script>

函数定义与调用

作用/概念简述

  • 封装可复用逻辑。包括命名函数、函数表达式与箭头函数。

通用模板

function add(a, b){ return a + b; }      // 命名函数
let sum = function(a, b){ return a + b;} // 函数表达式
let mul = (a, b) => { return a * b; }    // 箭头函数

属性/知识点表格

要点说明
形参与返回值JS 不需声明类型
调用参数实参与形参数量可不一致（不建议）
箭头函数语法简洁，常用

片段代码案例

<script>
  function add(a, b){ return a + b; }
  let result1 = add(10, 20, 30, 40); // 仍返回 30
  console.log(result1);

  let sum = (a, b) => { return a + b; }
  let result2 = sum(10, 20);
  console.log(result2);
</script>

自定义对象与 JSON

作用/概念简述

  • 使用对象字面量组织数据与方法；JSON 用于数据传输。

通用模板

let user = {
  name: "Tom",
  age: 10,
  sing(){ console.log("唱歌"); }
};

let str = JSON.stringify(user); // 对象 -> JSON 字符串
let obj = JSON.parse(str);      // JSON 字符串 -> 对象

属性/知识点表格

API作用
JSON.stringify(obj)对象转 JSON 字符串
JSON.parse(str)JSON 字符串转对象
对象方法简写method(){...}

片段代码案例

<script>
  let user = {
    name: "Tom",
    age: 10,
    sing(){
      console.log("悠悠的唱着最炫的民族风~");
    }
  }
  console.log(user.name);
  user.sing();

  let person = { name:'itcast', age:18, gender:'男' }
  alert(JSON.stringify(person));
  let personJson = '{"name":"heima","age":18}';
  alert(JSON.parse(personJson).name);
</script>

流程控制

作用/概念简述

  • 控制程序执行流程，语法与 Java 作用机制一致。

通用模板

if (cond) { ... } else if (cond2) { ... } else { ... }
switch (v) { case 1: ...; break; default: ... }
for (let i=0; i<n; i++){ ... }
while (cond){ ... }
do { ... } while (cond)

属性/知识点表格

结构要点
if/else if/else条件分支
switch多分支匹配
for/while/do-while循环结构

片段代码案例

<script>
  let score = 90;
  if (score >= 90) console.log('优秀');
  else if (score >= 60) console.log('及格');
  else console.log('不及格');
</script>

DOM 获取与修改

作用/概念简述

  • 使用 DOM API 获取元素并修改内容/属性。

通用模板

const el = document.querySelector('选择器');     // 第一个
const list = document.querySelectorAll('选择器'); // NodeList
el.innerHTML = '新的内容';

属性/知识点表格

API说明
querySelector返回匹配的第一个元素
querySelectorAll返回匹配的所有元素（NodeList 伪数组）
innerHTML读写元素内容

片段代码案例

<h1 id="title1">11111</h1>
<h1>22222</h1>
<h1>33333</h1>
<script>
  const hs = document.querySelectorAll('h1');
  hs[0].innerHTML = '修改后的文本内容';
</script>

事件监听与常见事件

作用/概念简述

  • 为元素绑定事件，响应用户操作。addEventListener 可多次绑定，onclick 会覆盖。

通用模板

element.addEventListener('事件类型', ()=>{ ... });
element.onclick = function(){ ... }; // 早期方式

属性/知识点表格

事件说明
click鼠标单击
mouseenter / mouseleave鼠标移入 / 移出
keydown / keyup键盘按下 / 抬起
focus / blur获得 / 失去焦点
input输入时触发
submit提交表单

片段代码案例

<input type="button" id="btn1" value="点我一下试试1">
<input type="button" id="btn2" value="点我一下试试2">
<script>
  // 推荐
  document.querySelector("#btn1").addEventListener('click', ()=>{
    alert("按钮1被点击了...");
  });
  // 早期
  document.querySelector('#btn2').onclick = function(){
    alert("按钮2被点击了...");
  }
</script>

片段代码案例（表格行移入移出变色）

<table>
  <tr><th>学号</th><th>姓名</th><th>分数</th></tr>
  <tr><td>001</td><td>张三</td><td>90</td></tr>
  <tr id="last"><td>002</td><td>李四</td><td>92</td></tr>
</table>
<script>
  const trs = document.querySelectorAll('tr');
  for (let i = 1; i < trs.length; i++) {
    trs[i].addEventListener('mouseenter', function () {
      this.style.backgroundColor = '#f2e2e2';
    });
    trs[i].addEventListener('mouseleave', function () {
      this.style.backgroundColor = '#fff';
    });
  }
</script>

片段代码案例（常见事件汇总示例）

<form>
  <input type="text" id="username">
  <input type="text" id="age">
  <input id="b1" type="submit" value="提交">
  <input id="b2" type="button" value="单击事件">
</form>
<script>
  document.querySelector('#b2').addEventListener('click', () => {
    console.log("我被点击了...");
  });
  document.querySelector('#username').addEventListener('keydown', () => {
    console.log("键盘被按下了...");
  });
  document.querySelector('#username').addEventListener('keyup', () => {
    console.log("键盘被抬起了...");
  });
  document.querySelector('#age').addEventListener('focus', () => {
    console.log("获得焦点...");
  });
  document.querySelector('#age').addEventListener('blur', () => {
    console.log("失去焦点...");
  });
  document.querySelector('#age').addEventListener('input', () => {
    console.log("用户输入时触发...");
  });
  document.querySelector('form').addEventListener('submit', () => {
    alert("表单被提交了...");
  });
</script>
评论