蜗牛学苑 Java 智能体学习 Day28｜JavaScript、CSS 布局思维导图复盘

一、思维导图整体知识结构梳理

JavaScript

JS 介绍

JS 简介：跨平台面向对象脚本语言，实现网页交互，与 Java 无关
JS 三大组成
- ECMAScript：基础语法（变量、类型、流程控制、函数、对象）
- BOM：浏览器对象模型，操作浏览器
- DOM：文档对象模型，操作 HTML 文档

JS 基础语法

JS 引入方式
- 内部脚本：script 标签嵌入，推荐放 body 底部
- 外部脚本：引入外部 js 文件，script 必须双标签
书写语法
- 区分大小写，分号可选，大括号为代码块
- 注释：// 单行、/* */ 多行
输出语句
- window.alert () 警告框
- document.write () 页面输出
- console.log () 控制台输出
变量 & 常量
- var：ES5 旧声明
- let：ES6 变量，块级作用域
- const：常量，不可修改
- JS 弱类型，变量可存不同类型值
- 变量命名规则
数据类型（原始类型）
- number 数字
- string 字符串，模板字符串${}
- boolean 布尔
- null 对象为空
- undefined 未初始化
- typeof 查看类型
运算符
- 算术、赋值、比较、逻辑、三元
- === 强相等；== 值相等即可
- 假值：0 null undefined '' NaN
函数
- 普通函数 function 定义
- 匿名函数、函数表达式、箭头函数
- 形参无类型，实参形参数量可不‑致
流程控制：if, switch, for, while, do‑while

JavaScript 对象

基本对象
- Array 数组
  - 创建方式 new Array () / \[\]
  - 属性方法：length、forEach、push、splice
- String 字符串
  - 创建方式
  - 属性方法：length、charAt、indexOf、trim、substring
- JSON 对象
  - JS 自定义对象语法
  - JSON 字符串双引号，前后端交互载体
BOM 浏览器对象模型
- Window 窗口对象
  - alert、confirm
  - setInterval 循环定时器
  - setTimeout 延时执行一次
- Location 地址栏对象：href 获取 / 设置网页地址
DOM 文档对象模型
- DOM 概念：把 html 标签封装成对象
- DOM 树：document、element、attribute、text、comment
- 获取元素
  - querySelector 获取第一个匹配元素
  - querySelectorAll 获取全部匹配元素，伪数组
  - 旧 API：getElementById 等（了解）
- DOM 作用：修改内容、样式、绑定事件、增删元素

事件

事件概念：用户行为触发，绑定函数执行
事件监听三种写法
- addEventListener（推荐）
- 标签 onxxx 属性
- dom.onxxx = function
常用事件
- click 点击
- mouseenter/mouseleave 鼠标移入移出
- keydown/keyup 键盘按下抬起
- focus/blur 获得失去焦点
- input 输入触发
- submit 表单提交

JS 模块化 import export

export 命名导出：可多个，导入用 {}
export default 默认导出：仅一个，导入不用 {}
script 标签必须加 type="module"

CSS 布局

浮动 float

传统布局三种：标准流、浮动、定位
float 浮动：实现块级横向排列
浮动布局准则：纵向标准流，横向浮动
display:flex 设置给父容器

Flex 弹性布局

概念：弹性容器、弹性盒子、主轴、侧轴
容器属性
- justify‑content 主轴对齐
- align‑items 侧轴全部盒子对齐
- flex‑direction 修改主轴方向
- flex‑wrap 是否换行
- align‑content 多行对齐
子项属性
- flex 伸缩占比
- align‑self 单独控制子项侧轴
- order 调整排列顺序

定位 position

定位 = 定位模式 + 边偏移 top/right/bottom/left
定位模式
- static 静态默认
- relative 相对定位：参照自身原位置，不脱标，用来给绝对定位做父级
- absolute 绝对定位：参照最近有定位祖先，脱标，子绝父相
- fixed 固定定位：相对浏览器视口，脱标，滚动不变化
z‑index 堆叠层级，仅对非 static 定位生效，无单位

二、思维导图制作意图

系统梳理 JavaScript 全套入门知识点，理清 ES 语法、BOM、DOM 三者边界，打好前端脚本基础。
重点掌握 DOM 获取页面元素、绑定事件，实现网页交互效果，这是 JS 最核心的用途。
完善 CSS 布局知识闭环：从浮动布局进阶到 Flex 弹性布局，再到 position 定位；分清相对、绝对、固定定位的区别，吃透「子绝父相」高频布局方案。
学习 ES6 模块化语法，建立前端模块化开发思想，为后续项目开发铺路。

三、当日学习总结

今天开启 JavaScript 前端脚本学习，掌握 JS 基础语法、变量、数据类型、运算符、函数、流程控制语句。熟悉三大对象模型：基本对象、BOM 浏览器对象、DOM 文档对象；能够通过 DOM 选择器获取页面元素，绑定各类鼠标、键盘、表单事件，完成网页交互。同时学习 CSS 高级布局，学习 Flex 弹性布局容器、子项全套属性，快速实现盒子对齐排列；深入学习 position 定位四大模式，理解脱标特性、子绝父相布局技巧，能够利用 z‑index 控制元素上下层级。最后了解 ES6 模块化导出导入语法，为后续前后端项目综合开发打下坚实基础。