前端学习week6

JavaScript学习

一.JavaScript基础

3.书写位置

内部JavaScript：直接写在html文件里面，用script标签包住
规范：写在/body上面
alert(‘文字’)：弹出警示框

外部js：写在.js文件里，html里写<script src=路径></script>(写在/body上面)
注意：

内联js：

4.注释和结束符

单行注释：//或ctrl+/
多行注释：/* … */或shift+alt+a
结束符：“;” (可不写)

5.输入和输出语句和字面量

输出语法1：document.write(‘文字’)
作用：向body输出内容
注意：如果输出的内容写的是标签，也会被解析成网页元素
输出语法2：alert
输出语法3：console.log(‘文字’)
作用：控制台打印输出，在检查里面的console里面看，程序员调试用
输入语法1：prompt(‘文字’)
作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字
展示：

注意：alert()和prompt()会被优先执行
字面量：在计算机中描述事/物
比如：1000是数字字面量，'文字’是字符串字面量

6.变量的声明和赋值

声明的语法：let 变量名
赋值：“=”
例：let age = 18或let age; age = 18

7.变量的更新和多个变量

变量=新的值
注意：let不允许多次声明一个变量
声明多个变量：let 变量名 = 值, 变量名 = 值(少用)
输出多个变量：console.log(变量名, 变量名)

8.变量的本质和命名规则和规范

本质：是程序在内存中申请的一块用来存放数据的小空间
规则：

规范：

9.let和var的区别

旧的JavaScript中常用var

10.数组的基本使用

声明语法：let 数组名 = [数值1,数值2,…,数值n]
调用：数组名[索引]
注意：数组可以存储任意类型的数据
获得长度：数组名.length

11.常量

语法：const 常量名 = 数据
命名规范与变量一致
注意：常量不允许重新赋值，声明的时候必须赋值(初始化)

12.数据类型和算术运算符

基本数据类型：

1. number 数字型
2. string 字符串型
3. boolean 布尔型
4. undefined 未定义型
5. null 空类型

引用数据类型：object 对象
注意：js是弱数据类型，变量不需要前置类型
算术运算符：+，-，，/，%
优先级：、/、%大，+、-小，()可以提升优先级
若返回NaN，则表示计算错误
NaN是粘性的，任何对NaN的操作都会返回NaN

(1)字符串

‘’,“”,``包裹的数据都叫字符串类型，推荐使用’’
log出的字符串偏蓝色
注意：

字符串拼接用"+"

(2)模板字符串

作用：拼接字符串和变量
语法：

1. 用``包裹文本
2. 用${}来包裹变量

(3)布尔型

true和false是布尔型字面量

(4)未定义型

不赋值的变量就是未定义型

(5)空类型

null表示赋值了，但是内容为空
null通常作为未创建的对象
注意：null+1=1，undefined+1=NaN

13.检测数据类型

语法：

1. 作为运算符：typeof x(常用)
2. 函数形式：typeof(x)

14.类型转换

prompt获取的数据是字符串

(1)隐形转换

规则：

1. +号两边只要有字符串，都会把另一个转成字符串
2. 除了+以外的字符串，比如-*/都会把数据转成数字类型

缺点：转换类型不明确，靠经验才能总结
小技巧：

1. +号作为正号解析可以换成数字型
2. 任何数据和字符串相加都是字符串

(2)显示转换

转换为数字型：Number()
注意：

1. 如果字符串内容里有非数字，转换结果为NaN
2. NaN也是数字类型，代表非数字

只保留整数：parseInt()
只保留小数：parseFloat()
注意：严格区分大小写

15.常见错误

错误：常量声明没有赋值

错误：变量没有声明就使用

错误：变量多次声明

错误：常量被重新赋值

16.赋值运算符

作用：对变量赋值
=、+=、-=、*=、/=、%=都是

17.一元运算符

二元运算符如：let num = 10 + 20
一元运算符：

1. 正负号
2. 自增：++
3. 自减：–

18.比较运算符

比较运算符：>,<,>=,<=,,=,!==
对比：

1. =单等是赋值
2. ==是判断，只判断值是否相等
3. ===是全等，即类型和数值都相等

注意：

1. NaN不等于任何人，包括他自己
2. 开发中最好用三等号
3. 字符串比较用的是ASCII码
4. 尽量不要比较小数，小数有精度问题
5. 比较符有隐式转换的作用

19.逻辑运算符

与：&&
或：||
非：!

20.运算符优先级

注意：

1. 一元运算符里面的逻辑非优先级很高
2. 逻辑与比逻辑或优先级高

21.if单分支语句

语法：
if (条件) {
   ~~   代码
}

22.if双分支语句

语法：if (条件) {
   ~~   代码
} else {
   ~~   代码
}

23.if多分支语句

语法：if(条件) {
   ~~   代码
} else if (条件) {
   ~~   代码
} else {
   ~~   代码
}

24.三元运算符

作用：简化双分支语句
语法：条件 ? 满足条件的代码 : 不满足条件的代码
如：3>5 ? console.log(3) : console.log(5)或console.log(3>5 ? 3 : 5)
一般用来取值，如：let num = 3>5 ? 3 : 5

数字补0，显示时间

let num = prompt(‘数字’)
num = num < 10 ? 0+num : num

25.switch分支语句

switch (数据) {
   ~~   case 值1:
     ~~~~     代码1
     ~~~~     break
   ~~   case 值2:
     ~~~~     代码2
     ~~~~     break
   ~~   default:
     ~~~~     代码3
     ~~~~     break
}

26.断点

步骤：

1. 浏览器打开调试界面
2. 按F12打开开发者工具
3. 点到sources一栏
4. 选择代码文件

27.while循环

语法：
while (循环条件) {
   ~~   代码
}

28.循环退出

break：退出循环
continue：结束本次循环，跳到下次循环

29.for循环

语法：
for (变量起始值; 终止条件; 变量变化量) {
   ~~   代码
}

构造无限循环

1. while(true)
2. for（;;）

30.数组的修改

数组[下标]=数据

31.数组的新增

数组.push(元素1,元素2…):方法将一个或多个元素添加到数组的末尾
数组.unshift:添加到数组的开头
注意：push和unshift都会返回数组的新长度

32.数组的删除

数组.pop():删除最后一个元素
数组.shift():删除第一个元素
数组.splice(起始位置, 删除几个元素(可省略))
注意：pop和shift会返回该元素的值

33.数组排序

数组.sort()
语法：
arr.sort(function (a, b) {
   ~~   return a - b
}) (升序)
arr.sort(function (a, b) {
   ~~   return b - a
}) (降序)

34.函数的基本使用

声明：
function 函数名() {
   ~~   代码
}
调用：函数名()

35.函数的参数以及默认参数

声明：
function 函数名(参数列表) {
   ~~   代码
}
调用：函数名 (传递的参数列表)
实参：实际的参数
形参：可以看作变量，但是不给值是默认是undefined
默认参数的设置，如：
function getSum(x=0,y=0){…}
若x、y不给值，则默认是0、0

36. return

语法：return 数据

函数细节

1. 两个同名的函数，后面的会覆盖前面的
2. 在JavaScript中实参的个数和形参的个数可以不一致，缺少的实参会用undefined填补，多余的实参会被忽略
3. 函数一旦遇到return就结束

37.作用域

全局作用域：作用于所以代码执行的环境或者一个独立的js文件
局部作用域：作用于函数内的代码环境
若函数中直接给一个变量赋值但没有let声明，那么这个变量是全局变量(不建议用)

38.变量的访问原则

变量的访问原则：

1. 只要是代码，就至少有一个作用域
2. 写在函数内部的局部作用域
3. 如果函数中还有函数，那么在这个作用域中就可以又诞生一个作用域
4. 访问原则：在能够访问到的情况下先局部，局部没有在找全局
   作用域链：采取就近原则的方式来查找变量最终的值

39.匿名函数

具名函数：
function 函数名() {
   ~~   代码
}
匿名函数：
function () {
   ~~   代码
}
匿名函数的使用方式：函数表达式和立即执行函数
函数表达式：将函数赋值给一个变量，如：let fn = function(参数列表){代码}
调用：fn(传递的参数列表)
区别：具名函数可以先使用后声明，匿名函数不行

40.立即执行函数

作用：避免全局变量之间的污染
语法：

1. (function (参数列表) {代码})(传递的参数列表)
2. ((function (参数列表) {代码})(传递的参数列表))

注意：多个立即执行函数要用;隔开

41.逻辑中断

短路：只存在于&&和||中，当满足一定条件会让右边代码不执行

符号	说明
&&	左边为false就短路
||	左边为true就短路

原因：通过左边能得到整个式子的结果，因此没必要再判断右边

42.转换为布尔型

显示转换：Boolean()
‘’、0、undefined、null、false、NaN转换为布尔值后都是false，其余则为true
隐式转换：

1. 有字符串的加法 “”+1，结果是1
2. 减法-（像大多数数学运算）只能用于数字，它会使空字符串转换为0
3. null经过数字转换之后会变为0
4. undefined经过数字转换之后会变为NaN

43.对象的介绍和基本使用

对象(object)：JavaScript里的一种数据类型
可以理解为是一种无序的数据集合
用来描述某个事物，比如：let obj={uname:‘asd’,age:18}
声明：let 对象名 = {}或let 对象名 = new Object()
对象由属性和方法组成：let 对象名 = {属性名:属性值,方法名:函数}

44.对象的操作

查：对象名.属性名
改：对象名.属性 = 新值
增：对象名.属性 = 值
删：delete 对象名.属性名(少)
查的另一种写法：对象名[‘属性名’]

45.对象的方法

声明：
let obj = {
   ~~   方法名: function(x,y){
     ~~~~     代码
   ~~   }
}
调用：obj.方法名(x,y)

46.对象的遍历

语法：for (let k in obj){代码}，k是对象的属性名
输出：console.log(obj[k])（k是带引号的，所以要用[]）

47.数学内置对象

Math提供了一系列做数学运算的方法

1. random
2. ceil
3. floor
4. max
5. min
6. pow(幂运算)
7. abs
8. 其它详见MDN

随机函数

Math.random()返回[0,1)的随机小数
生成N-M之间的随机数：Math.floor(Math.random()(M-N+1))+N
封装一个取N~M的随机函数：
function getRandom(N,M){
   ~~   return Math.floor(Math.random()(M-N+1))+N
}

一些术语

关键字：在JavaScript中右特殊意义的词汇
保留字：在目前的JavaScript中没意义，但未来可能会具有特殊意义的词汇
标识(标识符)：变量名、函数名的另一种叫法
表达式：能产生值的代码，一般配合运算符出现
语句：一段可执行的代码

48.简单数据类型和复杂数据类型

简单类型又叫基本数据类型或者值类型，复杂类型又叫做引用类型
值数据类型：在存储变量中存储的是值本身，因此叫做值类型
引用类型：复杂数据类型，在存储存储的仅仅是地址(引用)时变量中，因此叫做引用类型
复杂数据类型：数组、对象…
栈堆空间分配：

1. 栈(操作系统)：由操作系统自动分配释放存放函数的参数值、局部变量等。操作方式类似于数据结构中的栈；简单数据类型存放到栈里面
2. 堆(操作系统)：存储复杂数据类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。引用数据存放到堆里面

简单数据存储方式：

复杂数据存储方式：

二.Web APIs

1.声明变量const优先

声明变量const优先
不变的简单数据类型可以用const声明
不改变地址的复杂数据类型都能用const声明，可以追加、删除属性

2.DOM树和DOM对象

APIs作用：就是用js去操作html和浏览器
分类：DOM（文档对象类型）、BOM（浏览器对象类型）
DOM是用来呈现以及与任意HTML或XML文档交互的API
白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能
DOM树作用：直观的体现了标签与标签之间的关系
DOM树：

DOM对象：浏览器根据html标签生成的js对象
DOM的核心思想：网页内容当做对象来处理
document对象：是DOM里提供的一个对象，它提供的属性和方法都是用来访问和操作网页内容的，网页所有内容都在document里面

3.获取DOM对象

方法1：根据CSS选择器获取DOM对象
语法：document.querySelector(‘css选择器’)（query:查询）
返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象，如果没有匹配到则返回null
例：const box = document.querySelector(‘div’)
方法2：（选择匹配的多个元素）document.querySelectorAll(‘css选择器’)
返回值：一个伪数组（有长度和索引，但没有push()、pop()方法）
注意：

1. 想要得到里面的数据，要用for循环获取
2. 只有一个元素，querySelectorAll获取的也是伪数组

其它方法(少)：

1. document.getELementById(‘id’)
2. document.getELementByTagName(‘标签名’)
3. document.getELementByClassName(‘class’)

4.修改元素内容

方式1：元素.innerText（获取文字内容）
注意：显示纯文本，不解析标签
方式2：元素.innerHTML
注意：识别标签，其它功能与方式1相同

5.DOM修改元素常见属性

常见的属性：href、title、src等
语法：对象.属性=值

6.通过style修改样式属性

语法：对象.style.样式属性=值
注意：100px是字符串

7.通过类名修改属性

语法：元素.className=css类名
例：div.className=‘box’
注意：className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

8.通过classList修改样式

语法：

1. 元素.classList.add(‘类名’)（追加一个类）
2. 元素.classList.remove(‘类名’)（删除一个类）
3. 元素.classList.toggle(‘类名’)（切换一个类，有就删掉，没有就加上）

className和classList的区别：
4. 修改大量样式的方便
5. 修改不多样式的时候方便
6. classList是追加和删除不影响以前类名

---

本周demo

网页：

html：

css：

js：