复习：
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 ...
less太好用了😋
01-移动 Web 基础谷歌模拟器模拟移动设备，方便查看页面效果
屏幕分辨率分类：
物理分辨率：硬件分辨率（出厂设置）
逻辑分辨率：软件 / 驱动设置
结论：制作网页参考 逻辑分辨率
视口作用：显示 HTML 网页的区域，用来约束 HTML 的尺寸
123456789101112131415<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!– 视口标签 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</t ...
01-空间转换空间转换简介
空间：是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴位置与视线方向相同。
空间转换也叫 3D转换
属性：transform
平移 1234transform: translate3d(x, y, z);transform: translateX();transform: translateY();transform: translateZ();
取值与平面转换相同
默认情况下，Z 轴平移没有效果，原因：电脑屏幕默认是平面，无法显示 Z 轴平移效果
视距作用：指定了观察者与 Z=0 平面的距离，为元素添加透视效果
透视效果：近大远小、近实远虚
属性：(添加给父级，取值范围 800-1200)
1perspective: 视距;
旋转
Z 轴：rotateZ()
X 轴：rotateX()
Y 轴：rotateY()
左手法则作用：根据旋转方向确定取值正负
使用：左手握住旋转轴, 拇指指向正值方向, 其他四个手指弯曲方向为旋转正值方向
rotate3d-了解
rotate3d(x, y, ...
