一、事件流1. 事件流的两个阶段
捕获阶段：事件从最顶层的父元素（如 html）向目标元素（触发事件的元素）逐层传递，addEventListener 第三个参数为 true 时在此阶段触发。
冒泡阶段：事件从目标元素向最顶层的父元素逐层回溯，addEventListener 第三个参数为 false（默认）时在此阶段触发。
示例：事件流执行顺序
123456789101112131415161718192021<div class="outer" <div class="inner" <div class="child" </div> </div></div><script> const outer = document.querySelector('.outer'); const inner = document.querySelector('.inner'); const child = d ...
学习目标
能够判断函数运行的环境并确定 this 所指代的对象。
理解事件的作用，掌握应用事件的基本步骤。
事件定义与用途事件是编程语言中的术语，用来描述程序的行为或状态。当行为或状态发生改变时，会立即调用一个相应的函数。
示例：
用户使用鼠标点击网页中的按钮
用户拖拽网页中的一张图片
事件监听为了实现DOM元素的交互功能，需要为DOM对象添加事件监听器，等待事件触发时执行特定函数。
12345678910111213141516171819<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件监听示例</title></head><body> <h3>事件监听</h3> <p id="text">点击按钮改变文字颜色</p> <button id=" ...
复习：
splice() 方法用于添加或删除数组中的元素。
注意：这种方法会改变原始数组。
删除数组：
splice(起始位置， 删除的个数)
比如：1
123let arr = ['red', 'green', 'blue']arr.splice(1,1) // 删除green元素console.log(arr) // ['red, 'blue']
添加元素
splice(起始位置，删除个数，添加数组元素)
12345let arr = ['red', 'green', 'blue']//arr.splice(1, 0, 'pink') // 在索引号是1的位置添加 pink//console.log(arr) // ['red', 'pink', 'green', 'blue']arr.splice(1, 0, 'p ...
知道对象数据类型的特征，能够利用数组对象渲染页面
理解什么是对象，掌握定义对象的语法
掌握数学对象的使用
对象
对象是 JavaScript 数据类型的一种，之前已经学习了数值类型、字符串类型、布尔类型、undefined。对象数据类型可以被理解成是一种数据集合。它由属性和方法两部分构成。
语法声明一个对象类型的变量与之前声明一个数值或字符串类型的变量没有本质上的区别。
123456789101112131415161718192021<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JavaScript 基础 - 对象语法</title></head><body> <script> // 声明字符串类型变量 let str = 'hello world!' // 声明数值类型变量 let ...
理解封装的意义，能够通过函数的声明实现逻辑的封装，知道对象数据类型的特征，结合数学对象实现简单计算功能。
理解函数的封装的特征
掌握函数声明的语法
理解什么是函数的返回值
知道并能使用常见的内置函数
函数
理解函数的封装特性，掌握函数的语法规则
声明和调用函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。
声明（定义）声明（定义）一个完整函数包括关键字、函数名、形式参数、函数体、返回值5个部分
调用声明（定义）的函数必须调用才会真正被执行，使用 () 调用函数。
123456789101112131415161718192021<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JavaScript 基础 - 声明和调用</title></head><body> <sc ...
if 多分支语句和 switch的区别：
共同点
都能实现多分支选择， 多选1
大部分情况下可以互换
区别：
switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，通常用于范围判断(大于，等于某个范围)。
switch 语句进行判断后直接执行到程序的语句，效率更高，而if…else语句有几种判断条件，就得判断多少次
switch 一定要注意 必须是 === 全等，一定注意 数据类型，同时注意break否则会有穿透效果
结论：
当分支比较少时，if…else语句执行效率高。
当分支比较多时，switch语句执行效率高，而且结构更清晰。
for 语句
掌握 for 循环语句，让程序具备重复执行能力
for 是 JavaScript 提供的另一种循环控制的话句，它和 while 只是语法上存在差异。
for语句的基本使用
实现循环的 3 要素
1234567891011121314<script> // 1. 语法格式 // for(起始值; 终止条件; 变化量) { ...
理解什么是流程控制，知道条件控制的种类并掌握其对应的语法规则，具备利用循环编写简易ATM取款机程序能力
运算符
语句
综合案例
运算符算术运算符数字是用来计算的，比如：乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。
算术运算符：也叫数学运算符，主要包括加、减、乘、除、取余（求模）等
运算符
作用
+
求和
-
求差
*
求积
/
求商
%
取模（取余数），开发中经常用于作为某个数字是否被整除
注意：在计算失败时，显示的结果是 NaN （not a number）
12345678910111213141516// 算术运算符console.log(1 + 2 * 3 / 2) // 4 let num = 10console.log(num + 10) // 20console.log(num + num) // 20// 1. 取模(取余数) 使用场景： 用来判断某个数是否能够被整除console.log(4 % 2) // 0 console.log(6 % 3) // ...
了解变量、数据类型、运算符等基础概念，能够实现数据类型的转换，结合四则运算体会如何编程。
体会现实世界中的事物与计算机的关系
理解什么是数据并知道数据的分类
理解变量存储数据的“容器”
掌握常见运算符的使用，了解优先级关系
知道 JavaScript 数据类型隐式转换的特征
介绍
掌握 JavaScript 的引入方式，初步认识 JavaScript 的作用
引入方式JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中，有两种方式：
内部方式通过 script 标签包裹 JavaScript 代码
1234<script> alert('嗨，欢迎来传智播学习前端技术！') </script>
外部形式一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入
12// demo.jsdocument.write('嗨，欢迎 ...
响应式布局方案
媒体查询
Bootstrap框架
01-媒体查询基本写法
max-width：最大宽度（小于等于）
min-width：最小宽度（大于等于）
书写顺序
min-width（从小到大）
max-width（从大到小）
案例-左侧隐藏需求：网页宽度小于等于768px则隐藏左侧区域
HTML 结构
123456<div class="box"> <div class="left">left</div> <div class="main"> 响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式 ...
01-vw适配方案vw和vh基本使用vw和vh是相对单位，相对视口尺寸计算结果
vw：viewport width（1vw = 1/100视口宽度 ）
vh：viewport height ( 1vh = 1/100视口高度 )
vw布局vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )
vh问题vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形
02-综合案例-酷我音乐
准备工作
HTML 结构
12<link rel="stylesheet" href="./iconfont/iconfont.css"><link rel="stylesheet" href="./css/index.css">
less 样式
123// out: ../css/@import "./base";
头部布局
HTML 结构
12345 ...
