1、项目流程与数据库

1.课程体系

阶段1(服务器开发): 项目导入/数据库/JS基础/NodeJS

阶段2(前端核心技术): HTML/AJAX/CSS/bootstrap

阶段3(前端进阶技术):JS高级/DOM&BOM/jquery/VueJS

阶段4(H5移动开发):VueJS组件库/HTML5技术/微信开发/HybirdAPP

阶段5(框架技术):AngularJS/ReactJS/Python

2.Window操作系统中常用的快捷键

Alt+Tab: 切换窗口(向右)

Alt+Shift+Tab: 切换窗口(向左)

Window+d 显示/隐藏桌面

Window+r 打开“运行”窗口输入cmd打开命令行窗口

Window+e 打开“资源管理器”

Alt+F4 关闭当前窗口

练习：不使用鼠标——进入C:/xampp/htdocs，创建demo.html，使用编辑器打开，输入内容；保存使用浏览器打开该文件；最后删除demo.html

3.软件工程

无软件阶段 bug -> debug

软件作坊 IBM ->Dos->Microsoft->Windows->Bill Gates

软件工程

软件过程(开发流程)

软件测试

软件度量

软件质量保证

4.软件的开发流程

软件过程/软件的生命周期

1)软件定义期

(1)可行性研究阶段

技术、人力、设备、时间、资金、回报、政策、风俗...

(2)需求分析阶段

功能性需求、非功能性需求

2)软件开发期

(1)概要设计阶段——设计师

子系统、模块、各自功能、模块间的接口

(2)详细设计阶段——架构师

页面、主题内容、对象、属性、方法

(3)编码实现阶段

UI设计：效果图

前端：把效果图转换为html/css/js代码

后端：为前端提供页面需要的数据

(4)测试阶段——软件测试工程师

3)软件维护期

(1)项目部署阶段

将项目部署到服务器

(2)项目维护阶段

5.学子商城功能性需求

前台：www.codeboy.com

后台：www.codeboy.com/admin/login.html

(1)前台子系统: 商品模块、用户模块、购物车模块

(2)后台子系统: 商品模块、用户模块、订单模块

(3)移动端子系统: 商品模块、用户模块、购物车模块

6.web项目中的服务器

Server: 为客户端提供各种服务的功能强大的计算机。

访问服务器:

(1)服务器地址: 域名/IP地址

(2)对应的服务的端口号

(3)提供该服务所有使用的协议

http://www.codeboy.com:80

协议域名/IP地址端口

7.访问自己电脑上的web服务器

启动web服务器 /webServer/start.cmd

http://127.0.0.1:80 通过自己电脑的IP地址

http://localhost:80 通过自己电脑服务器的域名

练习：在public下创建4.html，随便输入内容，分别使用域名和IP地址访问该文件。

获取自己电脑在局域网的IP地址

在命令行下输入 ipconfig

http://172.163.100.134:80 通过局域网IP来访问服务器

练习：同桌之间互相访问对应的服务器

Mysql

day01

关系型数据库

Server->Database->Table->Row->Column

mysql

服务器端：开启服务

客户端：连接

连接

mysql.exe -h127.0.0.1 -P3306 -uroot -p

mysql -uroot

mysql -uroot < c:/....

交互模式

脚本模式

常用管理命令

show databases;

use 名字;

show tables;

desc 表名;

quit;

sql命令

增删改查

drop database if exists ...

create database..

use ...

create table

insert into

select * from ...

update ... set ... where

delete from ... where

标准SQL语句分类

DDL: Data Define Language 定义数据结构

CREATE/DROP/ALTER

DML: Data Manipulate Language 操作数据

INSERT/UPDATE/DELETE

DQL: Data Query Language 查询数据

SELECT

DCL: Data Control Language 控制用户权限

GRANT(授权)/REVOKE(收权)

1.计算机存储字符

(1)如何存储英文字符

ASCII: 总共有128个，对所有的英文字母和符号进行编码。

hel 104101108

Latin-1: 总共有256，兼容ASCII码，同时对欧洲符号进行了编码。MySQL默认使用这种编码。

(2)如何存储中文字符

GB2312: 对常用6千多汉字进行了编码，兼容ASCII

GBK: 对2万多汉字进行了编码，兼容GB2312

BIG5: 台湾繁体字编码，兼容ASCII

Unicode: 对世界上主流国家常用的语言进行了编码，兼容ASCII，不兼容GB2312,GBK,BIG5。具体分为UTF-8,UTF-16,UTF-32存储方案。

(3)解决mysql存储中文乱码

sql脚本文件另存为的编码

客户端连接服务器的编码(SET NAMES UTF8)

服务器端创建数据库使用的编码(CHARSET=UTF8)

练习：编写脚本文件01_sina.sql，创建数据库sina，设置存储编码为UTF8，进入该数据库，创建数据表news保存新闻数据，包含nid，title(标题)，ctime(发表时间)，content(内容)，author(作者)，cfrom(来源)；插入若干条数据。在交互模式下查询数据。

2.mysql中的列类型

创建数据表的时候，指定的列可以存储的数据类型

CREATE TABLE t1( nid 列类型 );

(1)数值型 引号可加可不加

TINYINT 微整型，占1个字节范围-128~127

SMALLINT 小整型，占2个字节，范围-32768~32767

INT 整型，占4个字节，范围

-2147483648~2147483647

BIGINT 大整型，占8个字节

FLOAT 单精度浮点型，占4个字节，最多3.4E38，可能产生计算误差。

DOUBLE 双精度浮点型，占8个字节，范围比BIGINT大的多，也可能查收计算误差。

DECIMAL(M,D) 定点小数，不会产生计算误差；M代表总的有效位数，D代表小数点后的有效位数。

BOOL 布尔型，只有两个值TRUE/1、FALSE/0，TRUE和FALSE不能加引号；真正存储数据的时候，会变成TINYINT,数据是1和0

(2)日期时间型必须加引号

DATE 日期型 '2018-10-31'

TIME 时间型 '14:30:50'

DATETIME 日期时间型 '2018-10-31 14:30:50'

(3)字符串型必须加引号

VARCHAR(M) 变长字符串，不会产生空间浪费，操作速度相对慢，M最大值时65535。

CHAR(M) 定长字符串，可能产生空间浪费，操作速度相对快，M最大值是255；用于存储手机号码、身份证号码等固定长度的字符串。

TEXT(M) 大型变长字符串，M最多2G

	CHAR(5)	VARCHAR(5)
a	a\0\0\0\0	a\0
ab	ab\0\0\0	ab\0
abcde	abcde	abcde
一二三	一二三\0\0	一二三\0

CREATE TABLE t1(

id INT,

age TINYINT,

commontCount INT,

price DECIMAL(6,2), #9999.99

phone CHAR(11),

article VARCHAR(5000),

sex BOOL, # 1->男 0->女

pubTime DATE

);

练习：编写02_xuezi.sql文件，先丢弃再创建数据库xuezi，设置存储的编码为UTF8，进入该数据库，创建保存笔记本数据的表laptop，包含lid，title(标题)，price(价格)，stockCount(库存量)，shelfTime(上架时间)，isIndex(是否显示在首页)；插入4条数据

练习：编写脚本文件03_tedu.sql，创建数据库tedu，设置存储的编码为UTF8;进入该数据库，创建保存部门数据的表dept，包含did，dname(部门名称)，empCount(员工数量)；插入以下数据

10 研发部 3

20 运营部 2

30 市场部 2

创建保存员工数据的表emp，包含eid，ename(姓名)，sex(性别)，birthday(生日)，salary(工资)

插入若干条数据。

3.列约束

mysql可以对要插入的数据进行特定的验证，只有满足条件才允许插入到数据表中，否则被认为非法的插入。

例如：一个人的性别只能是男或者女，一个人的年龄0~100

(1)主键约束——PRIMARY KEY

声明了主键约束的列上的值不能出现重复，一个表中只能有一个主键，通常加在编号列。设置了主键约束就不能使用NULL值。

表中查询的记录会按照主键由小到大的顺序排序——加快查找速度。

NULL 表示空，在插入数据时，无法确定要保存的数据。例如：无法确定员工的工资，生日都可以使用NULL

(2)非空约束——NOT NULL

声明了非空约束的列上不能插入NULL值

课后任务

(1)复习今天内容，重新编写代码

(2)练习

编写脚本文件xz.sql，创建数据库xz，进入该数据库；

创建保存笔记本家族的表laptop_family,包含fid，fname，laptopCount笔记本数量

10 联想 2 20 戴尔 2 30 小米 3

创建保存笔记本数据的表laptop，包含lid，title，price，spec规格，detail商品介绍，shelfTime，isOnsale是否在售，familyId所属家族编号；插入若干条数据。

(3)预习列约束

复习

ASCII/Latin-1/GB2312/GBK/BIG5/Unicode

脚本/客户端连接/服务器端

列类型

数值型

TINYINT/SMALLINT/INT/BIGINT

FLOAT/DOUBLE/DECIMAL/BOOL

日期时间型

DATE/TIME/DATETIME

字符串型

VARCHAR/CHAR/TEXT

1.列约束

(1)主键约束——PRIMARY KEY

(2)非空约束——NOT NULL

(3)唯一约束——UNIQUE

声明了唯一约束的列上不能插入重复的值，允许插入NULL，而且允许插入多个NULL

(4)检查约束——CHECK

检查约束可以对插入的数据进行自定义验证

CREATE TABLE student(

score TINYINT CHECK(score>=0 AND score<=100)

);

mysql不支持检查约束，会降低数据的插入速度。

(5)默认值约束——DEFAULT

可以使用DEFAULT关键字声明默认值，有两种方式可以应用默认值

INSERT INTO family VALUES(50, '华硕', DEFAULT);

INSERT INTO family(fid,fname) VALUES(60,'荣耀');

练习：设置笔记本的默认价格为6999，分别应用两种默认值插入数据。

(6)外键约束——FOREIGN KEY

声明了外键约束的列，取值必须在另一个表的主键列上出现过，两者的列类型要保持一致，允许使用NULL或者多个NULL

FOREIGN KEY(列) REFERENCES 数据表(主键列)

2.mysql中的自增列

AUTO_INCREMENT: 自动增长，假如一个列声明了自增列，无需手动赋值；直接赋值为NULL，会获取当前的最大值，然后加1插入。

注意：

只适用于整数型的主键列上

自增列允许手动赋值

练习：创建脚本文件01_tedu.sql，创建数据库tedu；进入该数据库

创建部门表dept，包含(did，dname)

10 研发部 20 市场部 30 运营部 40 测试部

创建员工表emp，包含(eid，ename，sex，birthday，salary，deptId 所属部门编号)

插入15条记录

3.简单查询

(1)查询特定的列

示例：查询所有员工的姓名、工资

SELECT ename,salary FROM emp;

练习：查询所有员工的编号，姓名，性别，生日

SELECT eid,ename,sex,birthday FROM emp;

(2)查询所有的列

SELECT * FROM emp;

SELECT eid,ename,sex,birthday,salary,deptId FROM emp;

(3)给列起别名

示例：查询所有员工的姓名和工资，使用汉字别名

SELECT ename AS 姓名,salary AS 工资 FROM emp;

练习：查询所有员工的编号，姓名，性别，生日，使用汉字别名

SELECT eid AS 编号,ename AS 姓名,sex 性别,birthday 生日 FROM emp;

练习：查询所有员工编号和姓名，使用一个字母作为别名

SELECT eid a,ename b FROM emp;

在起别名的时候，AS关键字可以省略，保留空格。

(4)显示不同的记录/合并相同的记录

示例：查询出员工都在哪些部门

SELECT DISTINCT deptId FROM emp;

练习：查询出都有哪些性别的员工

SELECT DISTINCT sex FROM emp;

(5)在查询时执行计算

示例：计算2+3*5+7.4*3.5

SELECT 2+3*5+7.4*3.5 AS 结果;

练习：查询所有员工的姓名及其年薪

SELECT ename,salary*12 FROM emp;

练习：假设每个员工工资增加500，年终奖5000，查询所有员工的姓名及其年薪，给列别起中文别名。

SELECT ename AS 姓名,(salary+500)*12+5000 AS 年薪 FROM emp;

(6)查询结果集排序

示例：查询所有的部门，结果集按照部门编号升序排列

SELECT * FROM dept ORDER BY did ASC;#ascendant

示例：查询所有的部门，结果集按照部门编号降序排列

SELECT*FROM dept ORDER BY did DESC;#descendant

练习：查询所有员工，结果集按照工资的降序排列

SELECT * FROM emp ORDER BY salary DESC;

练习：查询所有员工，结果集按照年龄从小到大排列

SELECT * FROM emp ORDER BY birthday DESC;

练习：查询所有员工，结果集按照姓名升序排列

SELECT * FROM emp ORDER BY ename;

练习：查询所有员工，结果集按照工资降序排列，如果工资相同，按照姓名排序

SELECT * FROM emp ORDER BY salary DESC,ename;

练习：查询所有员工，结果集按照性别升序排列，如果性别相同，按照生日降序排列。

SELECT * FROM emp ORDER BY sex,birthday DESC;

ORDER BY可以按照数值、日期/时间、字符串来排序

默认按照ASC升序排列

(7)条件查询

示例：查询出编号为5的员工所有列

SELECT * FROM emp WHERE eid=5;

练习：查询出姓名叫King的员工的编号，工资，姓名

SELECT eid,salary,ename FROM emp WHERE ename='king';

练习：查询出20号部门下员工所有的列

SELECT * FROM emp WHERE deptId=20;

练习：查询出女员工所有的列

SELECT * FROM emp WHERE sex=0;

练习：查询出工资为5000以上的员工所有列

SELECT * FROM emp WHERE salary>=5000;

比较运算符：> < >= <= = !=(不等于)

练习：查询出1991-1-1后出生的员工所有列

SELECT * FROM emp WHERE birthday>'1991-1-1';

练习：查询出不在10号部门的员工所有列

SELECT * FROM emp WHERE deptId!=10;

练习：查询出没有明确部门的员工所有列

SELECT * FROM emp WHERE deptId IS NULL;

练习：查询出有明确部门的员工所有列

SELECT * FROM emp WHERE deptId IS NOT NULL;

练习：查询出工资在6000以上男员工所有列

SELECT * FROM emp WHERE salary>6000 AND sex=1;

练习：查询出工资在5000~7000之间员工所有列

SELECT * FROM emp WHERE salary>=5000 AND salary<=7000;

SELECT * FROM emp WHERE salary BETWEEN 5000 AND 7000;

练习：查询出工资在5000以下和7000以上的员工所有列

SELECT * FROM emp WHERE salary<5000 OR salary>7000;

SELECT * FROM emp WHERE salary NOT BETWEEN 5000 AND 7000;

练习：查询出1990年之前和1993之后出生的员工所有列

SELECT * FROM emp WHERE birthday<'1990-1-1' OR birthday >'1993-12-31';

SELECT * FROM emp WHERE birthday NOT BETWEEN '1990-1-1' AND '1993-12-31';

练习：查询出1993年出生的员工所有列

SELECT * FROM emp WHERE birthday>='1993-1-1' AND birthday<='1993-12-31';

SELECT * FROM emp WHERE birthday BETWEEN '1993-1-1' AND '1993-12-31';

练习：查询出20号部门和30号部门的员工所有列

SELECT * FROM emp WHERE deptId=20 OR deptId=30;

SELECT * FROM emp WHERE deptId IN(20,30);

练习：查询出不在20号部门和30号部门员工所有列

SELECT * FROM emp WHERE deptId NOT IN(20,30);

IS NULL/IS NOT NULL

AND/OR

BETWEEN ... AND../NOT BETWEEN...AND...

IN( )/NOT IN ( )

(8)模糊条件查询

示例：查询姓名中含有字母e的员工所有列

SELECT * FROM emp WHERE ename LIKE '%e%';

练习：查询姓名中以e结尾的员工所有列

SELECT * FROM emp WHERE ename LIKE '%e';

练习：查询姓名中倒数第2个字符为e的员工所有列

SELECT * FROM emp WHERE ename LIKE '%e_';

% 可以匹配任意多个字符 >=0

_ 可以匹配任意1个字符 =1

以上两个匹配必须使用LIKE关键字

(9)分页查询

假如查询的结果集中有太多的数据，一次显示不完，可以分页显示。

需要有两个条件：当前的页码、每页的数据量

SELECT * FROM emp LIMIT start,count;

start: 是一个数字，表示从哪一条开始读取；

start=(当前的页码-1)*每页的数据量

count：是一个数字，表示每页的数据量

注意：start和count的值必须是整数，不能是字符串形式。

假设每页显示5条记录

第1页：SELECT * FROM emp LIMIT 0,5;

第2页：SELECT * FROM emp LIMIT 5,5;

第3页：SELECT * FROM emp LIMIT 10,5;

第4页：SELECT * FROM emp LIMIT 15,5;

第5页：SELECT * FROM emp LIMIT 20,5;

课后任务：

(1)复习今天内容，删除代码保留注释，重新编写SQL语句

(2)查询出工资在8000以上的女员工的姓名、性别、生日，结果集按照按照工资降序排列，取前3个人。

(3)查看学子商城资料，编写数据库（见文件）

Javascript基础

Day01

查询出工资在8000以上的女员工的姓名、性别、生日，结果集按照按照工资降序排列，取前3个人。

SELECT ename,sex,birthday,salary FROM emp

WHERE salary>8000 AND sex=0

ORDER BY salary DESC

LIMIT 0,3;

项目中的时间

2019-3-4 2019年3月4日 3/4/2019 2019/3 2019-3 9:53 9:53:30

距离计算机元年(1970-1-1 0:0:0)的毫秒数

1秒=1000毫秒

2019-1-1 --10:14

49*365*24*60*60*1000

性别男/女 woman/man boy/girl

1/0

1.复杂查询

(1)聚合查询/分组查询

示例：查询所有员工的数量

SELECT COUNT(eid) FROM emp;

SELECT COUNT(*) FROM emp; #推荐写法

练习：使用员工的姓名来查询数量

SELECT COUNT(ename) FROM emp;

练习：使用员工的部门编号来查询数量

SELECT COUNT(deptId) FROM emp;

练习：查询所有女员工的数量

SELECT COUNT(*) FROM emp WHERE sex=0;

聚合函数

函数是一个功能体，提供若干数据，产出结果——饺子机

COUNT(..)/SUM(..)/AVG(..)/MAX(..)/MIN(..)

练习：查询所有员工的工资总和是多少

SELECT SUM(salary) FROM emp;

练习：查询出男员工的平均工资是多少

SELECT SUM(salary)/COUNT(*) FROM emp WHERE sex=1;

SELECT AVG(salary) FROM emp WHERE sex=1;

练习：查询出工资最高的员工

SELECT MAX(salary) FROM emp;

练习：查询出工资最低的员工

SELECT MIN(salary) FROM emp;

练习：查询年龄最大的员工的生日

SELECT MIN(birthday) FROM emp;

分组查询：只能查询分组条件和聚合函数

示例：查询出每个部门工资最高的员工的工资

SELECT deptId,MAX(salary) FROM emp GROUP BY deptId;

练习：查询出男女员工的数量，最高工资，平均工资

SELECT sex,COUNT(*),MAX(salary),AVG(salary) FROM emp GROUP BY sex;

YEAR(..) 获取日期中的年份

MONTH(..) 获取日期中的月份

练习：查询出1991年出生的员工所有列

SELECT * FROM emp WHERE YEAR(birthday)=1991;

练习：查询3月份出生的员工所有列

SELECT * FROM emp WHERE MONTH(birthday)=3;

(2)子查询

把一个SQL语句的查询结果作为另一个SQL语句的查询条件

示例：查询出研发部所有的员工

步骤1：查询出研发部的部门编号——10

SELECT did FROM dept WHERE dname='研发部';

步骤2：查询出10号部门所有的员工

SELECT * FROM emp WHERE deptId=10;

综合：

SELECT * FROM emp WHERE deptId=(SELECT did FROM dept WHERE dname='研发部');

练习：查询出工资比tom高的员工有哪些

步骤1：查询出tom的工资是多少——6000

SELECT salary FROM emp WHERE ename='tom';

步骤2：查询出比6000高的员工

SELECT * FROM emp WHERE salary>6000;

综合：

SELECT * FROM emp WHERE salary>( SELECT salary FROM emp WHERE ename='tom');

练习：查询出和tom同一年出生的员工有哪些

步骤1：查询出tom的出生年份——1990

SELECT YEAR(birthday) FROM emp WHERE ename='tom';

步骤2：查询出1990年出生的员工有哪些

SELECT * FROM emp WHERE YEAR(birthday)=1990;

综合：

SELECT * FROM emp WHERE YEAR(birthday)=(

SELECT YEAR(birthday) FROM emp WHERE ename='tom'

);

(3)多表查询

示例：查询出所有的员工姓名及其部门名称

SELECT ename,dname FROM emp,dept;

错误：产生笛卡尔积

解决方法：添加查询条件

SELECT ename,dname FROM emp,dept WHERE did=deptId;

上述多表查询结果是SQL-92的查询语法，无法查询出没有部门的员工，没有员工的部门

SQL-99中提出了新的多表查询语法

(1)内连接——和SQL-92查询结果一致

SELECT ename,dname FROM emp INNER JOIN dept ON deptId=did;

(2)左外连接——显示左侧表中所有的记录

SELECT ename,dname FROM emp LEFT OUTER JOIN dept ON deptId=did;

OUTER 关键字可以省略

(3)右外连接——显示右侧表中所有的记录

SELECT ename,dname FROM emp RIGHT OUTER JOIN dept ON deptId=did;

OUTER 关键字可以省略

(4)全连接

显示左侧和右侧表中所有的记录——FULL JOIN

mysql不支持全连接

UNION 合并相同的记录

UNION ALL 不合并相同的记录

(SELECT ename FROM emp_us)

UNION

(SELECT ename FROM emp_cn);

把左外连接的结果和右外连接的结果合并

(SELECT ename,dname FROM emp LEFT OUTER JOIN dept ON deptId=did)

UNION

(SELECT ename,dname FROM emp RIGHT OUTER JOIN dept ON deptId=did);

2.学习一门编程语言的基本步骤

(1)了解背景知识：历史、现状、特点、应用场景。

(2)搭建开发环境，编写hello world

(3)常量和变量

(4)数据类型

(5)运算符

(6)逻辑结构

(7)通用小程序

(8)函数和对象

(9)第三方框架、库

(10)实用的项目

程序员必做50题

https://wenku.baidu.com/view/af66e2f14afe04a1b071de42.html

3.JS概述

(1)历史

1995年，JS最早出现在Netscape的浏览器中

1996年，IE3中也出现JS，称为JScript

1997年，ECMA组织，制定标准 ECMAScript

2009年，遵循CommonJS规范，开始向服务端发展

(2)现状

既可以运行在客户端浏览器，也可以运行在服务器端

(3)特点

跨平台，支持所有的操作系统

解释型语言，编译一行执行一行

基于对象

弱类型类型

(4)应用场景

制作浏览器端的交互效果

创建web服务器，操作数据库等

4.JS的开发环境

(1)浏览器端自带的JS解释器

(2)服务器端NodeJS解释器

https://nodejs.org nodejs下载地址

node -v 查看当前安装的nodejs版本

(3)执行JS代码

浏览器

创建01.js和01.html两个文件

在01.html中引入01.js文件

NodeJS

node C:/xampp/..../01.js 回车

5.JS语法规范

(1)区分大小写

(2)每行代码结尾的分号可加可不加，建议都加

(3)分为单行注释(//...)和多行注释(/*...*/)

6.变量

用于存储数据的容器

x=1

(1)声明变量

var x=1;

使用关键字var声明了一个变量，名称叫x，存储的值是1

(2)变量的命名规则

变量名称可以使用字母、数字、下划线、美元符号，其中不能以数字开头。

不能使用关键字和保留字作为变量名称，例如：var、if、break...

user_name userPwd isLogin cityName

(3)变量的注意

var z;

变量只是声明未赋值，此时的值是undefined

可以为变量多次赋值，并且赋不同类型的值

(4)一次性声明多个变量

var a=1,b=2,c;

多个变量之间用逗号隔开

练习：声明语文、数学、和总成绩三个变量；总成绩为空，然后把语文和数学的和赋值给总成绩；打印三个变量。

7.常量

一旦声明不能再重新赋值

const PI=3.14;

8.数据类型

分为原始类型和引用类型

原始类型分为数值型、字符串型、布尔型、未定义型(undefined)、空(null)

(1)数值型

分为整型和浮点型

整型在内存中占4个字节，浮点型占8个字节

课后任务

(1)复习今天内容，整理思维导图

(2)练习：

使用变量保存圆的半径，常量保存圆周率；声明两个变量保存面积和周长；最后打印面积和周长。

声明多组变量保存商品的单价和数量，最后计算商品的总价。

(3)预习JS的数据类型

Day02

浏览器端和服务器端

var $_a1=1,b=2;

const pi=3.14;

学习一门编程语言的基本步骤

(1)了解背景知识：历史、现状、特点、应用场景。

(2)搭建开发环境，编写hello world

(3)常量和变量

(4)数据类型

(5)运算符

(6)逻辑结构

(7)通用小程序

(8)函数和对象

(9)第三方框架、库

(10)实用的项目

1.数据类型

原始类型和引用类型

(1)数值型

整型

8进制 0 1 ... 7 10，以0开头，例如 010->8

16进制 0 1 .... 9 a b c d e f 10

a~f 代表10~15，以0X开头，例如0XC->12

字母不区分大小写

0XFF -> 255

浮点型

分为普通小数和指数型小数

3.14 3.14e3->3140 3.14e-2 ->0.0314

(2)字符串型

任意的数据被引号包含就是字符串型，不区分单双引号

typeof 数据 检测数据类型

查看任意一个字符的Unicode码

'a'.charCodeAt() //97

练习：查看自己名字的Unicode码

(3)布尔型

在程序中表示真或者假

true/false

常用于存储一些是否的结果，例如是否注册，是否登录，是否为会员

isLogin=true isVip=false

(4)未定义型

声明了变量未赋值，结果就是undefined

(5)空

只有一个值null，用于引用类型数据中

2.数据类型转换

(1)隐式转换

数字+字符串数字被转成了字符串类型

2+'3' // '23'

数字+布尔值布尔值被转成了数字 true->1 false->0

2+true //3

2+false //2

字符串+布尔值布尔值被转成字符串

'b'+true //'btrue'

JS中加号(+)的作用

执行加法运算

执行字符串拼接

练习：查看一下程序的执行结果

var a=2,b=true,c='tedu';

console.log(a+b+c); //'3tedu'

console.log(b+c+a);//'truetedu2'

console.log(c+a+b);//'tedu2true'

使用 - * / 执行运算

将运算符两端的非数字转为数字，最终运算结果还是数字；转数字的过程中自动调用Number

(2)强制转换

①将任意类型转为数值型

Number(数据)

如果要转的字符串中含有非数字，则返回NaN(Not a Number)

undefined -> NaN

null -> 0

②将任意数据转为整型

parseInt(数据)

parseInt('2.3c') //2

如果字符串以非数字开头，则返回NaN，布尔型，undefined，null返回NaN

③将任意数据转为浮点型

parseFloat(数据)

parseFloat('2.3c') //2.3

和parseInt用法几乎一致，只是返回时浮点型。

④将数值型转为字符串类型

toString()

var num=12;

num.toString() //'12'

num.toString(16) // c

转换为字符串的同时，可以设置要转换的进制

3.运算符

由运算符连接的操作数据，所组成的形式称为表达式

(1)算术运算符

+ - * / % ++ --

% 取余

++ 自增，在原来的基础之上加1

-- 自减，在原来的基础之上减1

console.log(num++); 先打印num的值，再执行自增

console.log(++num); 先执行自增，然后打印num的值

练习：

var a=2;

console.log(a++ + ++a); //6

var b=7;

console.log(--b + b--); //12

(2)比较运算符

> < >= <= == != ===(全等于) !==(全不等于)

返回一个布尔型的值

== 只是比较值是否相同

=== 不仅比较值，还会比较类型是否相同

3>'10' //false

数字和字符串比较，字符串会转成数字

'3'>'10' //true

两个字符串比较，比较首字符的Unicode码

'3' ->51 '1'->49

3>'10a' //false

'10a'隐式转为了NaN，NaN和任何值比较(> < == === >= <=)都返回false

NaN==NaN false

(3)逻辑运算符

|| 或者 && 并且 ! 非

返回一个布尔型的结果

|| 关联的两个条件只需要满足其一，结果就是true，否则false

&& 关联的两个条件都满足，结果是true，否则false

! 取反 !true ->false !false->true

练习：声明两个变量保存用户名和密码，如果用户名是'root'，并且密码是'123456'，打印true，否则打印false

练习：声明一个变量保存年龄，如果年龄大于90岁，或者小于3岁，打印true，否则打印false

逻辑短路

&& 当第1个条件为false的时候，就不需要再执行第2个条件

|| 当第1个条件为true的时候，就不需要再执行第2个条件

练习：以下程序运行是否报错

var num=3;

num>5 && console.log(a);

num<1 || console.log(a);

(4)位运算符

在执行位运算符的时候，会把数字转成二进制进行运算。

1 10 11 100 101 110 111 1000 1001 1010

2 4 8

85=64+16+4+1

1000000+10000+100+1

1010101

按位与(&) 上下两位都是1，结果是1，否则是0

按位或(|) 上下两位含有1，结果是1，否则是0

按位异或(^) 上下两位不同为1，相同为0

按位右移(>>) 删除二进制的最后的位数

按位左移(<<) 在二进制的最后补0

(5)赋值运算符

= += -= *= /= %=

课后任务

(1)复习今天内容，整理思维导图

(2)练习

声明一个变量保存年份，判断这个年份是否为闰年，如果是打印‘闰年’——逻辑短路

闰年：4年一闰（能被4整除），还有两个

(3)预习if、if-else、switch-case语句

Day03

复习

数值、字符串、布尔型、未定义、空

数据类型转换

隐式转换 + - * / 3>'2' 3>null

强制转换 Number/parseInt/parseFloat/toString(8)

运算符

算术运算符 + - * / % ++ --

比较运算符 > < >= <= == != === !==

逻辑运算符 || && ! 逻辑短路

位运算符 & | ^ >> <<

赋值运算符 = += -= *= /= %=

学习一门编程语言的基本步骤

(1)了解背景知识：历史、现状、特点、应用场景。

(2)搭建开发环境，编写hello world

(3)常量和变量

(4)数据类型

(5)运算符

(6)逻辑结构

(7)通用小程序

(8)函数和对象

(9)第三方框架、库

(10)实用的项目

1.三目运算符

由三组操作数据或表达式组成的形式

条件表达式 ? 表达式1 : 表达式2

如果条件表达式为true，执行表达式1；

如果条件表达式为false，执行表达式2

练习：声明变量保存用户名和密码，如果用户名是root，并且密码是123456，打印登录成功，否则打印登录失败

2.浏览器端函数

alert() 弹出警示框

prompt() 弹出提示框(输入框)，需要使用变量保存输入的值；值的类型是字符串型

练习：两次弹出提示框，使用变量保存后，计算两个数字相加的和，并将和使用警示框弹出。

3.流程控制

程序分为顺序执行、选择执行、循环执行

程序 = 数据 + 算法

(1)if语句

满30减15

if(条件表达式){

语句1;

}

语句2;

如果if后的大括号中只有一行语句，可以省略大括号。

false的几种情况，通常会和取反(!)一起使用。

0 '' undefined null NaN

(2)if-else语句

if(条件表达式){

语句1;

}else{

语句2;

}

练习：使用弹出提示框分别输入商品的单价和数量，如果商品的总价满500,则打八折；假如当前卡内的余额为600，如果足够支付总价，打印pay success，否则打印pay error。

06_exercise.html 06_exercise.js

(3)if-else嵌套

if(条件表达式1){

语句1;

}else if(条件表达式2){

语句2;

}else...if(条件表达式n){

语句n;

}else{

语句n+1; //以上所有的条件表达式都是false

}

(4)switch-case语句

switch(表达式){

case 值1: //如果表达式的值为值1

语句1;

break;

case 值2:

语句2;

break;

...

case 值n:

语句n;

break;

default:

语句n+1;//以上所有的结果都是false

}

注意：在case中表达式和值在比较的时候使用的是全等于(===),要求值和类型都满足结果才是true

对比if-else嵌套和switch-case语句

相同点：两者都可以用于多项分支语句

不同点：if-else可以判断相等或者不等的情况，使用范围更广；switch-case只能用于全等于(===)的情况，结构上更为清晰合理，执行效率更高。

4.循环执行

循环：就是一遍又一遍执行相同或者相似的代码

循环的两个要素：

循环的条件：控制循环的次数

循环体：重复执行的相同或者相似代码

(1)while循环

while(循环条件){ //结果是布尔型的值

循环体

}

课后任务

(1)复习今天内容，整理思维导图

(2)练习：

使用switch-case来根据成绩判断标准

使用while循环打印 11~20之间所有整数

使用while循环打印1~100之间所有奇数

使用while循环打印20 22 24 26 28 30

(3)预习do-while循环，for循环，循环嵌套

Day04

复习

浏览器端函数 alert()/prompt()

流程控制

顺序执行、选择执行、循环执行

if(条件表达式){ 语句1; }

if(条件表达式){ 语句1; }else{ 语句2; }

条件表达式 ? 语句1 : 语句2;

if(条件表达式1){ 语句1; }else if(条件2){ }...else{ }

switch(表达式){

case 1:

语句1;

break;

default:

语句..

}

循环：循环条件循环体

1.break关键字

可以结束任何形式的循环

练习：使用变量保存一个数字，无限循环弹出提示框，获取输入的值，用输入的值和保存的数字比较，如果猜大了，弹出警示框'big'，如果猜小了，弹出警示框'small'，否则弹出警示框 'right'。

03_break.js 03_break.html

2.do-while循环

do{

循环体;

}while(循环条件);

练习：打印50~1之间所有的整数

练习：打印1~100之间所有的偶数

练习：打印50~30之间所有能被5整除的数字

练习：计算1~100之间所有能被3整除的数字的和

练习：计算10的阶乘 !10 10*9....1

练习：声明一个变量保存密码'123456'，无限循环弹出提示框，在提示框中输入密码，如果输入正确，结束循环。

05_dowhile.js 05_dowhile.html

3.for循环

for(表达式1;表达式2;表达式3){

循环体

}

表达式1：初始值

表达式2：循环的条件

表达式3：循环的增量

练习：计算1~100所有能被7整除的数组的和

练习：打印72~39之间所有的奇数

练习：计算1~20之间所有能被3整除的数的乘积

练习：打印本世纪(2000~2100)所有的闰年

练习：假设本金10000，年利率是4%，5年后本金和利息一共有多少

4.break和continue

break：结束循环，不会再执行循环体以及增量等。

continue，跳过本次循环体，还会继续执行增量以及循环条件

练习：计算1~100之间所有偶数的和(遇到奇数跳过)

练习：打印1~100之间所有的数组，如果能被3或者4整除跳过。1 2 5 7 10 11 13...

练习：打印本世纪前10个闰年

5.循环嵌套

***

****

*****

1*1=1

1*2=2 2*2=4

1*3=3 2*3=6 3*3=9

1*9....

课后任务：

(1)复习今天内容，整理思维导图

(2)练习

打印倒着的九九乘法表

9*9=81 8*9=72

8*8=64

1*1

计算1~100之间的和，当和大于4000的时候，提前结束循环，打印当前的和是多少

(3)预习js中的自定义函数

Day05

复习

while(循环条件){ 循环体 }

do{ 循环体 }while(循环条件);

for(初始值;循环条件;循环增量){ 循环体 }

循环嵌套

任意循环之间都可以相互嵌套

break/continue

var i=0,sum=0;

do{

i++;

if(i%2==0){

continue;

}

if(i%5==0){

break;

}

sum+=i;

}while(i<=10);

学习一门编程语言的基本步骤

(1)了解背景知识：历史、现状、特点、应用场景。

(2)搭建开发环境，编写hello world

(3)常量和变量

(4)数据类型

(5)运算符

(6)逻辑结构

(7)通用小程序

(8)函数和对象

(9)第三方框架、库

(10)实用的项目

1.函数

parseInt()/parseFloat()...

分为系统函数和自定义函数

函数：function，是一个功能体，可以接收若干个数据，返回特定的结果。用于封装反复执行的代码——饺子机

(1)创建普通函数

function 函数名称(){

函数体——封装的反复执行的代码

}

调用：函数名称()

练习：创建函数，封装10+20的计算结果并打印出来，调用3次。

练习：创建函数，封装计算1~100之间所有整数的和并打印结果，调用3次

(2)创建带有参数的函数

function 函数名称(参数列表){ //形参 -> 用于接收数据

函数体

}

调用: 函数名称(参数列表) //实参 ->实际要传递的数据

参数列表：创建函数时的参数称为形参，调用函数时的参数称为实参，在调用的时候实参会赋值给形参；多个参数之间用逗号隔开；如果实参的个数小于形参的个数，则未赋值的形参为undefined。

练习：创建函数getSum，传递1个参数，计算1~任意数字之间所有整数的和，调用3次。

练习：创建函数getRun，传递2个参数，计算任意两个年份之间的闰年个数，调用3次。

(3)创建带有返回值的函数

function 函数名称(参数列表){

函数体

return 返回值; //函数的返回结果

}

调用：函数名称(参数列表)

函数调用后会得到return的值。

注意事项：

如果没有return或者return后没有返回值，则返回undefined

return后的所有代码不会被执行

练习：创建函数getMax，传递2个参数，返回两个数字中的最大值。

练习：创建函数getMax，传递3个参数，返回三个数字中的最大值。

练习：创建函数getStatus，传递1个参数，根据状态码返回对应的中文

1-等待付款 2-等待发货 3-运输中 4-已签收 5-已取消

练习：创建函数getDays，传递1个参数(年份)，返回任意年份的天数365/366。

2.变量的作用域

作用域：变量或者函数可访问范围。

全局作用域：在全局作用域下声明的变量，可以在任意合法位置访问到。

函数作用域：在函数中使用var声明的变量，只能在函数内部访问到。

变量的提升

JS程序执行前，当前作用域下使用var声明的变量，会将声明提升到最前，但是赋值还是在原来的位置

3.函数的作用域

和变量作用域一样，也分为全局作用域和函数作用域

函数声明提升

和变量提升一样，使用function关键字创建的函数，声明也会提升到所在作用域最前边。在任意合法都可以调用。

4.递归（掌握）

在函数的内部调用自身

递归的使用：

要有跳出的条件，结合着return来跳出。

练习：使用递归来计算1~任意数字之间所有整数的和。

练习：使用递归来计算任意数字的阶乘。

!10 = 10*9*8...*1

斐波那契数列

1 1 2 3 5 8 13 21 34 55 89....

课后任务

(1)复习今天内容，整理思维导图

(2)练习

使用递归和普通函数来计算斐波那契数列

(3)预习js中的自定义对象

Day06

复习

学习一门编程语言的基本步骤

(1)了解背景知识：历史、现状、特点、应用场景。

(2)搭建开发环境，编写hello world

(3)常量和变量

(4)数据类型

(5)运算符

(6)逻辑结构

(7)通用小程序

(8)函数和对象

(9)第三方框架、库

(10)实用的项目

1.匿名函数

没有名称的函数 function(){ }

创建函数——函数声明

function 函数名称(){ }

(1)创建函数——函数表达式

var 函数名称=function(形参列表){

函数体

return 返回值;

}

调用函数名称()

对比函数声明和函数表达式的区别

函数声明存在函数提升，可以在任意位置创建，也可以在任意合法位置调用。

函数表达式不存在函数提升，只能先创建再调用。

(2)匿名函数自调用

创建一个独立的函数作用域，防止污染全局。

(function(形参列表){

函数体; //封装的代码

})(实参列表);

(3)回调函数

将匿名函数以参数传递

function fn(a){

//调用的时候，实参赋给形参a

//a就是函数名称，如果执行匿名函数体，只需要调用a

a();

}

fn(function(){ .... });

2.全局函数

parseInt 将数据转为整型

parseFloat 将数据转为浮点型

isNaN 判断一个值是否为NaN，是->true 不是->false

isFinite 判断一个值是否为有限值，是->true，不是->false

3/0 -> Infinity 无限值

eval 执行字符串中的表达式 eval('1+1') -> 2

练习：使用弹出提示框输入一组JS表达式，使用eval来执行这组表达式，并打印出来。

06_eval.js 06_eval.html

encodeURI 对URI进行编码

decodeURI 对已编码的URI进行解码

3.对象

对象就是一组属性和方法(功能)的集合。

一个员工：编号，姓名，性别，生日，工资，部门

哪些是对象？

某个人的手机: 属性有品牌、颜色、内存、CPU，功能有看视频，听音乐，玩游戏...

某一个饭盒: 属性有大小、颜色、品牌，方法盛饭、摔...

——万物皆对象

(1)JS中的对象

内置对象：JS提供的

宿主对象：根据JS不同的执行环境来划分

自定义对象：自己创建的对象

(2)自定义对象

对象字面(直接)量

内置构造函数

自定义构造函数

(3)对象字面量

使用大括号{} 创建空对象

属性名和属性值之间用冒号隔开

多组属性之间用逗号隔开

属性名引号可加可不加，如果含有特殊字符，必须加

练习：创建一个商品对象，包含的属性有编号、标题、价格、上架时间、是否在售。

(4)访问对象的属性

对象.属性名

对象['属性名'] 如果属性名不加引号，会认为是变量

练习：创建手机对象，属性有编号，品牌，尺寸，颜色；修改尺寸和颜色，添加内存属性。

(5)内置构造函数创建对象

new Object() //创建一个空对象

需要单独添加每一个属性

练习：创建一个汽车对象，含有属性型号、品牌、颜色、长度。

(6)检测是否含有属性

对象.属性名 === undefined

true -> 不存在 false->存在

'属性名' in 对象

true -> 存在 false -> 不存在

对象.hasOwnProperty('属性名')

true -> 存在 false -> 不存在

(7)遍历属性

访问对象中的每一个属性

for(var key in 对象){

key 对象中每个属性名

对象[key] 每个属性名对应的属性值

}

练习：创建对象，包含5组属性，每一组属性是一个价格，使用遍历属性，来获取价格的总和。

(8)对象中的方法

var person={

name:'jerry',

say:function(){ //say就是成员方法

this.name // this指代当前的对象

}

person.say();//调用成员方法

练习：创建手机对象，属性有品牌，颜色，尺寸；方法打电话，发短信，看视频...

课后任务

(1)复习今天内容，整理思维导图

(2)练习

创建一个圆对象，属性有半径、圆周率；方法有计算圆的面积和周长。

创建一个长方形对象

(3)课后预习数组

Day07

复习

匿名函数 function(){ }

创建函数 var fn=function(a){ return a; }

自调用 (function(){ var n=1; })();

回调函数

function add(num1){ num1() }

add(function(){ .... })

对象

属性和方法的集合

内置、宿主、自定义

var person={};

var animal=new Object();

person['name'] person.age

for(var key in 对象){ 对象[key] }

检测属性是否存在

对象.属性名 === undefined

'属性名' in 对象

对象.hasOwnProperty('属性名')

方法

{ say:function(){ this.name } }

person.say();

学习一门编程语言的基本步骤

(1)了解背景知识：历史、现状、特点、应用场景。

(2)搭建开发环境，编写hello world

(3)常量和变量

(4)数据类型

(5)运算符

(6)逻辑结构

(7)通用小程序

(8)函数和对象

(9)第三方框架、库

(10)实用的项目

数组

数组是由多个元素组成的集合，每个元素就是一个数据。

1.创建数组

(1)数组字面量

[ 元素1,元素2,元素3... ]

练习：创建数组，保存若干个成绩

练习：创建数组，保存若干个大学名称

(2)访问数组中的元素

数组[下标]

下标是从0开始，第一个元素下标0，最后一个元素下标是长度减1

练习：创建数组，保存若干个国家名称，单独添加2个，修改其中的元素，打印结果。

(3)使用内置构造函数

new Array(元素1,元素2,元素3...)

new Array(3) 初始化元素个数为3，后期可以添加更多元素

练习：创建数组，保存若干个编程语言的名称

练习：创建数组，初始化长度为5，保存篮球场上五个位置。

2.获取数组长度

数组.length 可以获取到数组中元素个数

在数组的末尾添加元素

数组[ 数组.length ] = 值

3.数组的分类

数组分为索引数组和关联数组

索引数组：以数字作为下标

关联数组：以字符串作为下标，只能先创建数组，然后单独添加元素。

练习：创建数组，添加员工的编号、姓名、性别、工资、生日，下标使用字符串。

4.遍历数组

(1)for-in

for(var key in 数组){

key 要遍历的数组元素的下标(数字也可以是字符串)

数组[key] 获取下标对应的元素

}

练习：创建数组，包含多个分数，使用for-in遍历该数组，获取总成绩。

(2)循环

for(var i=0;i<数组.length;i++){

i代表下标

数组[i] 代表下标对应的元素

}

循环只能遍历索引数组，无法遍历关联数组。

练习：创建函数，传递一个参数(数组)，返回平均工资。

练习：创建数组，包含多个汽车品牌，把数组中品牌名称为'宝马'的元素修改为'BMW'

练习：创建函数getCount，传递两个参数(数组、要查找的值)，返回任意一个值在数组中出现的次数。

练习：创建函数getIndex，传递两个参数(数组、要查找的值)，返回任意一个值在数组中出现位置的下标，如果找不到返回-1.

练习：创建函数getMax，传递一个参数(数组)，返回最大值。

5.数组中的方法(API)

API 应用程序编程接口、预定义好的一些方法和函数

toString() 将数组中的元素按照逗号分隔转化成字符串

join('-') 将数组中的元素按照指定的字符分隔转换为字符串，默认是逗号。

concat(arr1,arr2...) 拼接多个数组

slice(start, end) 截取数组中的元素，start开始的下标，end结束的下标，不包含end本身；如果是负数表示倒数。

练习：创建数组，包含a~g，每个字母是一个元素；截取b~c，e~g；拼接成一个新数组。

splice(start,count,value1,value2..) 删除数组中的元素，start开始的下标，count删除的长度，value表示删除后补充的元素。

练习：创建数组，包含a~h，每个字母是一个元素；删除d、e，将f替换m，在下标为2的位置插入元素z。

课后任务

(1)复习今天内容，整理思维导图

(2)练习

使用数组遍历翻转数组中的元素

a~h h~a

使用冒泡排序将一组数字进行从小到大的排序

数组遍历

(3)预习字符串对象及相关API

Day08

复习

数组

创建数组

数组字面量 [元素1,元素2...]

内置构造函数 new Array(元素1,元素2...)

数组访问数组[下标]

数组的长度数组.length 数组[数组长度]

数组分类索引数组关联数组

遍历数组 for(var key in 数组){ 数组[key] }

for(var i=0;i<数组.length;i++){ 数组[i] }

数组API toString/join/concat/slice/splice

学习一门编程语言的基本步骤

(1)了解背景知识：历史、现状、特点、应用场景。

(2)搭建开发环境，编写hello world

(3)常量和变量

(4)数据类型

(5)运算符

(6)逻辑结构

(7)通用小程序

(8)函数和对象

(9)第三方框架、库

(10)实用的项目

1.数组API

reverse() 翻转数组中的元素

sort() 对数组中的元素排序，默认是按照Unicode码从小到大

对数字排序

sort(function(a,b){

return a-b;//从小到大

//return b-a; //从大到小

})

push() 在数组的末尾添加元素，返回添加后的长度，原数组会发生变化

pop() 删除数组末尾的一个元素，返回删除后的元素，原数组会发生变化

unshift() 在数组的开头添加元素

shift() 在数组的开头删除一个元素

2.二维数组

数组中的每个元素也是数组

var arr=[ [], [], []... ]

访问二维数组中的元素 arr[下标][下标]

3.字符串操作

包装对象: 目的是让原始类型数据可以向引用类型数据，具有一组属性和方法。

JS中提供了三种包装对象: String、Number、Boolean

将任意类型转为字符串

new String(数据) 强制转为字符串，返回对象

String(数据) 强制转为字符串，返回字符串

注意事项: 包装对象和普通的字符串用法没有区别。

(1)转义字符 —— \

转换字符本身的意义

\n 将普通字符n转义成换行符

\' 将有特殊意义的引号转换成普通字符

\t 将普通字符t转义成制表符(tab键效果)

...

练习：打印出现 welcome to chi\na

(2)字符串API

toUpperCase() 将英文字母转为大写

toLowerCase() 将英文字母转为小写

练习：初始化4个英文字母(有大小写)保存到变量中，循环弹出提示框，输入4个字符(不区分大小写)，如果输入正确结束循环。 06_exercise.html 06_exercise.js

length 获取字符串的长度

charAt() 获取下标对应的字符字符串[下标]

charCodeAt() 获取某个字符的Unicode码

练习：遍历字符串'javascript'，获取a字符出现的次数。

indexOf(value,start) 查看某个字符的下标，value要查找的字符串，start开始查找的下标，找不到返回-1

lastIndexOf(value) 查看某个字符最后一次出现的下标

练习：声明变量保存邮箱，检测是否为邮箱格式，如果是打印true，否则打印false。判断字符串中是否含有@

slice(start, end) 截取字符串，start开始的下标，end结束的下标，不包含end本身；如果end为空截取到最后。

substr(start, count) 截取字符串，start开始的下标，count截取的长度，如果count为空截取到最后。

练习：使用变量保存身份证号，截取其中的出生年，月，日，性别。打印 1997年10月26日性别男

练习：使用变量保存邮箱，分别截取邮箱的用户名和域名

练习：将一个英文单词的首字母转大写，其它转小写

welCome -> Welcome

split() 按照指定的字符将字符串分隔为数组

练习：使用split获取邮箱中的用户名和域名(jerry@126.com)

4.匹配模式

作用：用于查找、替换字符串

tom tum toom tem 正则表达式

replace(value1,value2) 查找并替换，value1是要查找的字符串，value2是要替换的字符串；value1可以使用正则表达式的写法 /china/ig

i -> ignore 忽略大小写

g->global 全局查找

match(value) 用于查找匹配的字符串，返回数组

search(value) 用于查找匹配的字符串，返回满足条件的第一个的下标，如果找不到返回-1；可以使用i，不能使用g

5.Math对象

Math对象不需要使用new创建，可以直接使用

PI 获取圆周率

abs() 获取绝对值

floor() 向下取整

ceil() 向上取整

round() 四舍五入取整

max() 获取一组数字的最大值

min() 获取一组数字的最小值

pow(x,y) 获取x的y次幂

random() 获取随机数 >=0 <1

Day09

复习

push/pop/unshift/shift/reverse/sort

字符串

包装对象

String Number Boolean

new String()/String()

var a='hello'

var person={}

var arr=[];

转义字符 \

toUpperCase()/toLowerCase()/charAt()/

indexOf()/lastIndexOf()/slice()/substr()/split()/join()

匹配模式

replace()/match()/search()

Math对象

PI/abs()/floor()/ceil()/round()/max()/min()/

pow()/random()

学习一门编程语言的基本步骤

(1)了解背景知识：历史、现状、特点、应用场景。

(2)搭建开发环境，编写hello world

(3)常量和变量

(4)数据类型

(5)运算符

(6)逻辑结构

(7)通用小程序

(8)函数和对象

(9)第三方框架、库

(10)实用的项目

1~33 随机取6个数，不能重复红球

1~16 随机取1个数，和前边的没关系篮球

1.Date对象

用于对日期时间进行存储和计算

new Date('2019/3/14 9:47:30')

new Date(2019,2,14,9,47,30); //第二个参数月份范围0~11

new Date() 存储当前的系统时间

new Date(1000*60*60*24) 存储的是距离计算机元年的毫秒数所对应的日期时间

(2)获取Date对象中日期时间

getFullYear/getMonth(范围0~11)/getDate/getHours

getMinutes/getSeconds/getMilliseconds/

getDay(星期 0~6)/getTime(距离计算机元年毫秒数)

练习：创建对象保存'2019-10-1 10:30:50'，打印

2019年10月01日 10点30分50秒星期二

(3)转为本地字符串格式

toLocaleString() // 年-月-日时:分:秒

toLocaleDateString() //年-月-日

toLocaleTimeString() //时:分:秒

(4)设置日期时间

setFullYear/setMonth/setDate/setHours/setMinutes

setSeconds/setMilliseconds/setTime

setTime设置后，可能会影响到其它的日期时间

(5)复制Date对象

把已经创建的Date对象以参数形式传递给构造函数

var d1=new Date();

var d2=new Date(d1); //复制d1对象

练习：创建Date对象，保存员工的入职时间'2019-3-15'；3年后合同到期，计算到期时间；合同到期前一个月续签合同，假如是周末，提前到周五，计算续签时间；提前一周通知人准备续签，计算提醒时间；

2.Number对象

new Number(值) 将数据转为数值型，返回对象

Number(值) 将数据转为数值，返回数值

toFixed(n) 保留小数点后n位

toString(n) 将数值转为字符串，n表示进制，默认是10

3.Boolean对象

new Boolean(值) 将数据转为布尔型，返回对象

Boolean(值) 将数据转为布尔型，返回布尔型

!!值隐式将数据转为布尔型

toString() 将布尔型数据转为字符串

4.错误处理

SyntaxError: 语法错误，错误的使用中文，缺少括号等；出现后所有的代码都不执行。

ReferenceError: 引用错误，使用了未声明的变量，属于运行时的错误，影响后边代码的执行。

TypeError: 类型错误，错误的使用了数据，例如变量当做函数来用；属于运行时的错误，影响后边代码的执行。

RangeError: 范围错误，参数的使用超出了范围；属于运行时的错误，影响后边代码的执行

try{

尝试执行的代码，可能出现错误

}catch(err){

err: 捕获到错误

具体处理错误的内容

}

练习：初始化一个变量add，尝试调用add函数，传递两个数字参数；如果执行错误，给add赋值一个匿名函数，然后再调用add。

5.ES6新特性

ECMAScript 6

ECMAScript 2015 2016 2017

《ES6入门》

http://es6.ruanyifeng.com/

(1)块级作用域

使用let关键字声明变量，只能在块级作用域下使用，不能被外部访问，不存在变量提升。

块级作用域：{ } for、while、do-while、if...

(2)箭头函数 =>

是回调函数的另一种写法，和匿名函数不完全一样。

sort( (a,b)=>{

return a-b;

} )

如果箭头函数的函数体中只有一行代码，并且是return形式的，可以简化为 sort( (a,b)=>a-b )

练习：创建函数add，传递两个参数，每个参数都是回调函数，在回调函数中返回一个数字；在函数add中计算两个数字相加的和。

课后任务

(1)复习今天内容，整理思维导图

(2)练习

计算2019-5-1 9:30:00 距离 2019-12-25日相差的天,小时，分钟，秒钟。

(3)复习服务器，预习nodejs中的模块概念

Nodejs

day01

学习一门编程语言的基本步骤

(1)了解背景知识：历史、现状、特点、应用场景。

(2)搭建开发环境，编写hello world

(3)常量和变量

(4)数据类型

(5)运算符

(6)逻辑结构

(7)通用小程序

(8)函数和对象

(9)第三方框架、库

(10)实用的项目

1.ES6

(1)函数参数的默认值

ES6允许为形参设置默认值，如果没有传递实参，自动使用形参的默认值。

练习：创建函数getSex，传递一个参数(0或者1)，根据值打印对应的性别；如果参数为空，默认为0.

(2)模板字符串

` 在此之间就是模板字符串 ${JS表达式} `

练习：创建一个图书的对象，包含编号，标题，价格，作者，是否在售(1/0)；使用模板字符串打印这些内容

2.nodejs概述

(1)对比JS和nodejs

JS运行在浏览器端，有很多浏览器，代码存在兼容性；nodejs在服务器端只有一个环境，代码不存在兼容性。

两者都有内置对象、宿主对象、自定义对象；JS中宿主对象BOM&DOM，nodejs有大量的扩展对象。

JS用于浏览器端的交互效果，nodejs用于服务器端的操作，例如数据库的操作，文件的操作...

(2)nodejs运行模式

脚本模式

node c:/xampp/.../01.js 回车

交互模式

node 回车进入交互模式

退出： ctrl+c两次 .exit 回车

3.全局对象

nodejs: global

在交互模式下，声明的变量和创建的函数都属于是全局对象下的，可以使用global来访问；

例如：var a=1；可以global.a访问

脚本模式下，文件中的变量和函数都不是全局对象下的，不能使用global来访问

JS: window

在浏览器下，文件中的变量和函数都是全局对象的，可以使用window来访问；例如 var a=1; window.a

(1)console对象

global.console.log() 打印日志

global.console.info() 打印消息

global.console.warn() 打印警告

global.console.error() 打印错误

global.console.time('字符串') 开始计时

global.console.timeEnd('字符串') 结束计时

开始和结束的字符串要保持一致

练习：使用计时查看计算for、while、do-while循环100000次的耗时。

(2)process对象

process.arch 查看当前CPU架构

process.platform 查看当前的操作系统

process.env 查看当前计算机的环境变量

process.version 查看当前nodejs的版本号

process.pid 查看当前的进程编号

process.kill() 通过进程编号杀死某一个进程

(3)Buffer对象

缓冲区：在内存中存储数据的区域

创建buffer

var buf=Buffer.alloc(5, 'abcde')

将buffer数据转为字符串

buf.toString()

(4)全局函数

parseInt/parseFloat/isNaN/isFinite/encodeURI/

decodeURI/eval

一次性定时器

var timer=setTimeout( 回调函数, 间隔的时间 )

当间隔的时间到了，会执行回调函数；单位是毫秒

clearTimeout(timer) 清除一次性定时器

周期性定时器

var timer=setInterval( 回调函数, 间隔的时间 )

每隔一段时间，执行一次回调函数

clearInterval(timer) 清除周期性定时器

练习：使用周期性定时器每隔三秒钟打印'hello'，打印三次后，清除定时器。

立即执行

var timer=setImmediate( 回调函数 )

clearImmediate(timer)

process.nextTick( 回调函数 )

3.模块

模块就是一个独立的功能体，每一个文件、目录都可以称为一个模块。

在nodejs下模块分为自定义模块、核心模块(官方提供)、第三方模块

nodejs自动会给每一个模块添加构造函数

(function(exports,require,module,__filename,__dirname){

//程序员写的代码

})

require() 是一个函数，用于引入一个模块

module 指代当前的模块

module.exports 是当前模块导出的对象，是供其它的模块使用的属性和方法(公开的内容)

exports 等价于 module.exports

课后任务

(1)复习今天内容，整理思维导图

(2)练习

创建两个模块，主模块(main.js)和功能模块(circle.js)；在功能模块中创建两个函数，分别传递1个参数(半径)，计算圆的周长和面积，导出这两个函数；在主模块中引入功能模块，并调用两个函数。

(3)预习querystring，url，fs模块

day02

全局对象

nodejs: global js: window

function fn(){ }

console.log/info/warn/error/time/timeEnd

process.arch/platform/env/version/pid/kill()

Buffer.alloc(5,'abcde') toString()

setTimeout/clearTimeout

setInterval/clearInterval

setImmediate/clearImmediate

process.nextTick

模块系统

(function(exports,require,module,__filename,__dirname){

//写的代码

module.exports === exports

})

1.模块中的参数

__filename 当前模块的完整路径和模块名称

__dirname 当前模块的完整路径

2.模块

以路径开头

不以路径开头

文件模块

require('./circle.js')

常用于用户自定义模块，如果后缀名为js，可以省略

require('querystring')

常用于引入官方提供的核心模块

目录模块

require('./02_2')

到02_2目录下寻找package.json文件中main属性对应的模块，如果找不到引入index.js

require('04_2')

会自动到node_modules中寻找目录模块04_2,如果当前目录下没有，会继续往上一级目录寻找，直到顶层目录；常用于第三方模块

练习：创建模块03_1.js，引入当前目录下03_2目录模块；在03_2下含有文件fun.js，导出一个函数add(计算两个数字相加)，在03_1.js中引入并调用。

练习：在05目录下创建05_1.js，引入不以路径开头的目录模块05_2，包含文件focus.js，在文件中导出函数计算三个数字相加，在05_1.js中引入并调用。

3.包和npm

包: package，就是node_modules下的目录模块，其中含有package.json文件，是包说明文件。

npm: 用于下载安装包的工具

下载的网站：www.npmjs.com

切换到安装的目录

cd 完整的路径

进入要安装的目录，在空白区域按住shift键，单击鼠标右键，在此处打开powershell窗口

使用npm安装

npm install 包的名称

4.查询字符串模块

查询字符串：浏览器向服务器发请求，传递数据的一种方式。

http://www.jd.com/search?ky=电脑&lid=20

parse() 将查询字符串格式化为对象

stringify() 将对象转换成查询字符串

练习：获取百度搜索中查询字符串中的关键字手机

ie=utf-8&tn=baidu&wd=手机

5.URL模块

操作URL

parse() 将URL格式化为对象

protocol 协议

hostname 主机名(域名/IP地址)

port 端口

pathname 请求的文件在服务器上的路径

query 查询字符串

format() 将对象转换成URL

练习：获取URL中查询字符串中的数据。

http://www.codeboy.com:8080/web/1902.html?sid=10&name=tom

将URL格式化为对象，获取查询字符串

将查询字符串格式化为对象，获取到数据

08_exercise.js

6.文件系统模块

(1)查看文件的状态

fs.stat( fd, callback )/fs.statSync( fd )

fd 文件的路径

callback 回调函数，用来查看结果

err 可能产生的错误信息

stats 具体的文件状态

isDirectory() 是否为目录

isFile() 是否为文件

对比同步和异步操作

同步: 会阻止后边代码的执行，只有执行完毕才会执行后边代码；是通过返回值获取结果。

异步：不会阻止后边代码的执行，放在整个线程的最后执行；是通过回调函数获取结果。

(2)创建目录

fs.mkdir( fd, callback )/fs.mkdirSync( fd )

(3)移除目录

fs.rmdir( fd, callback )/fs.rmdirSync( fd )

(4)读取目录

fs.readdir(fd, callback)/fs.readdirSync(fd)

callback 回调函数

err 可能产生的错误

files 读取的目录中的文件

练习：读取目录05中的文件有哪些

(5)写入(创建)文件

fs.writeFile(fd, data, callback)/fs.writeFileSync(fd,data)

fd 文件的路径

data 要写入的数据

callback 回调函数

如果文件不存在创建文件，如果文件已经存在，会清空文件中的内容，然后写入。

(6)追加写入(创建)

fs.appendFile(fd, data, callback)/

fs.appendFileSync(fd, data)

练习：在文件num1.txt中写入'hello'，运行多次。

课后任务

(1)复习今天内容，整理思维导图

(2)练习：

创建目录mydir，在该目录下创建文件data.txt，并写入以下数据，每个对象中的数据占一行。

[{id:1, name:'tom', age:18}, {id:2,name:'kate',age:20} ]

(3)预习http协议，nodejs的http模块

day03

以路径开头

不以路径开头

文件模块

require('./circle.js')

require('fs')

目录模块

require('./04_2');

package.json中的main属性

require('mysql')

到node_modules中寻找目录模块mysql

包和npm

npm install 包名称

querystring parse/stringify

url parse/format

fs stat/statSync/mkdir/rmdir/readdir/writeFile/

appendFile

同步和异步

1.fs模块

(1)判断文件是否存在

fs.existsSync(path) 判断文件是否存在

存在 true 不存在 false

(2)读取文件

fs.readFile(fd, callback)/fs.readFileSync(fd)

fd 文件的路径

callback 回调函数

err 可能产生的错误

data 读取的数据，格式为buffer形式

(3)删除文件

fs.unlink(fd, callback)/fs.unlinkSync(fd)

练习：完成一个文件计数器。

判断文件num.txt是否存在，不存在创建，并写入数据0；

读取num.txt中的数据，然后让读取的值加1，并打印

把加1后的值再次清空写入到num.txt中

全程使用同步方法 03_num.js

2.http协议

是浏览器和web服务器之间的通信协议

(1)通用头信息

Request URL: 请求的URL，对应浏览器地址栏内容，要向服务器获取哪些内容

Request Method: 请求的方法， GET/POST...，获取内容的方式

Status Code: 响应的状态码

1**: 正在请求，没有结束

2**: 成功的响应

3**: 响应的重定向，跳转到另一个网址；通常结合着响应头信息中location一起使用

4**: 客户端错误

5**: 服务器端错误

Remote Address: 请求的服务器的IP地址和端口号

(2)响应头信息

Connection: 连接的方式， keep-alive持续连接

Content-Type: 响应的文件类型

Content-Length: 响应的文件长度

Location: 当响应重定向的时候，跳转的URL

(3)请求头信息

Accept: 客户端接收的文件类型有哪些

Accept-Encoding: 客户端接收的文件压缩形式

User-Agent: 客户端发送请求使用的浏览器

(4)请求主体

可有可无，客户端向服务器端传递数据

3.http模块

既可以模拟浏览器向服务器端发请求，也可以创建web服务器

(1)模拟浏览器

http.get( url, callback )

get 请求的方法

callback 回调函数，用来获取服务器端的响应

res 响应的对象

statusCode 获取响应的状态码

res.on('data', function(buf){ })

通过事件来获取响应的内容，当有数据传递自动触发

通过回调函数来接收响应的内容

buf就是响应的内容，格式为buffer

练习：使用http模块下的get方法向tmooc发请求，并获取响应的状态和响应的内容 05_exercise.js

http://www.tmooc.cn/course/100072.shtml

(2)创建web服务器

var server=http.createServer() 创建web服务器

server.listen(8080) 分配8080端口，监听端口变化

server.on('request', function(req,res){ })

接收浏览器的请求，是一个事件，当有请求自动触发

通过回调函数来接收请求，做出响应

req 请求的对象

url 请求的URL，显示端口后的部分

method 请求的方法

headers 请求的头信息

res 响应的对象

writeHead(code, obj) 设置响应的状态码和头信息

code 状态码 obj 头信息对象

write() 设置响应的内容

end() 结束响应，并发送响应内容到浏览器

练习：创建web服务器，监听端口8081，接收浏览器的请求

/login 响应内容 this is login page

/member 响应内容 <h2>welcome</h2>

/ 重定向到 /login

以上都没有响应内容 404 not found

07_http_server.js

4.express框架

基于nodejs，快速、开放、极简的web开发框架

www.expressjs.com.cn

安装 npm install express

(1)路由

浏览器向web服务器发请求，web服务器根据请求的方法和请求的URL来做出响应。

三要素：请求的方法、请求的URL、响应(回调函数)

课后任务

(1)复习今天内容，整理思维导图

(2)练习

使用http模块创建web服务器，接收浏览器的请求，根据请求的URL来做出不同的响应

/index 响应内容 this is homepage

/login 响应内容 <h2>please login</h2>

/ 重定向 /index

其它响应 404 not found

(3) 预习浏览器向服务器发送请求的方式get/post

预习express中间件

day04

http协议

通用头信息

请求方法、请求URL、响应的状态码

响应头信息

Content-Type: text/html text/plain

Location: http://www.codeboy.com /index

请求头信息

请求主体

http模块

向服务器发请求

http.get(url, function(res){ res.statusCode

res.on('data', function(buf){ });

});

创建web服务器

http.createServer()

listen(8080)

express框架

express()

listen(8080)

路由

1.express框架

(1)路由

req对象

method 请求的方法

url 请求的URL

headers 请求的头信息

query 获取查询字符串数据，格式化为对象

res对象

send() 响应内容并发送，不能多次使用，如果是数字需要转成字符串

sendStatus() 响应状态码对应的中文 200->ok

sendFile() 响应文件并发送

redirect() 响应的重定向

练习：创建路由并响应

get /index 响应<h1>这是首页</h1>

get /member 响应文件member.html

get / 响应重定向到 /index

post /register 响应注册成功

2.post和get请求

post请求是通过表单提交(现阶段)来传递数据，服务器端是通过事件来获取数据，后期可以使用中间件简化。

req.on('data', function(buf){

buf就是获取的数据，格式为buffer，需要使用查询字符串模块格式化为对象

})

get请求通过查询字符串传递数据，服务器端使用req.query获取数据，结果是对象。

post请求安全性较高，速度较慢，注册、登录使用post提交。get请求安全性较低，速度较快，搜索中使用get提交。

练习：创建路由，请求方法get，请求的URL: /reg，响应一个文件 reg.html；在html创建注册的页面(用户名、密码、手机)，点击提交，向服务器发送get请求，请求URL: /myreg，响应'注册成功'。

3.使用路由传递数据

设置路由中接收的名称

server.get('/detail/:lid', function(req,res){

req.params //获取路由传递的数据，格式为对象

});

浏览器传递数据

http://127.0.0.1:8080/detail/5

5就是传递的数据，被lid所接收

练习：创建购物车的路由，请求方法:get，请求URL: /shopping，传递商品的价格(price)和名称(pname)，把接收的两项响应到浏览器中。

商品模块 /list /delete /update

用户模块 /list /delete /update

4.路由器

路由在使用过程中，不同模块下的路由可能出现相同的URL,把同一个模块下的路由挂载到特定的前缀，例如: 商品模块下列表路由 /product/list，用户模块下的列表路由 /user/list

路由器就是自定义的模块，存放了所有模块下的路由

const express=require('express');

var router=express.Router(); //创建空的路由器对象

router.get('/list', function(req,res){ });//往路由器添加路由

module.exports=router;

web服务器下使用路由器

const userRouter=require('./user.js');//引入路由器模块

server.use('/user',userRouter);//把路由器挂载到/user下，访问形式 /user/list

练习：创建商品模块路由器(product.js)，添加路由商品列表、商品删除，在web服务器下引入，并挂载到/product。

5.中间件

中间件作用为主要业务逻辑所服务器

分为应用级中间件，路由级中间件，内置中间件，第三方中间件，错误处理中间件。

(1)应用级中间件

每一个中间件都是一个函数，需要配合其它的中间件或者路由使用。

server.use( function(req,res,next){ } ) 拦截所有请求

server.use('/reg', function(req,res,next){ })

拦截特定的请求，当请求的URL为/reg，才会执行回调函数。

练习：创建路由(请求方法:get，请求URL:/view)响应当前的浏览次数，每次浏览，响应次数加1.

在中间件外部创建变量，设置初始值0，中间件中变量加1，在路由中响应浏览次数(变量) send(0)

(2)路由级中间件

将路由器挂载到特定前缀，就是使用路由级中间件

server.use('/user', userRouter);

(3)内置中间件

在express中只有一个内置的中间件

课后任务

(1)复习今天内容，复习mysql的SQL语句

(2)练习

创建web服务器，向服务器请求查询生日文件(birth.html)，在html中点击提交再次向服务器发请求，根据身份证号显示出生的年月日和性别(中间件)；在路由中响应到浏览器

day05

1.内置中间件

express中只保留了一个内置的中间件

server.use( express.static( '目录' ) );

托管静态资源到某个目录，如果浏览器请求静态资源，自动到该目录下寻找，无需使用路由响应文件。

静态资源：html、css、客户端js、img...

练习：再次托管静态资源到files目录下，如果同时出现两个相同名称的文件，显示哪一个目录下的。

2.第三方中间件body-parser

可以将post请求的数据直接格式化为对象

//引入body-parser

server.use( bodyParser.urlencoded({

extended:false

}) );

urlencoded: 将post请求数据格式为对象

extended:不使用第三方qs模块，而使用核心模块querystring将查询字符串格式化为对象

在路由中获取post请求数据

req.body 返回对象

3.mysql模块

连接mysql数据库服务器

mysql.exe -h127.0.0.1 -P3306 -uroot -p

进入数据库 use xz;

INSERT INTO emp VALUES(....);

DELETE FROM emp WHERE uid=3;

UPDATE emp SET ename='tom',sex=0 WHERE eid=1;

SELECT eid,ename FROM emp;

(1)普通连接

var connection=mysql.createConnection( {} );创建连接对象，提供mysql服务器的主机名，端口号，用户名，密码，连接后要使用的数据库

connection.connect(); 执行连接

connection.query( sql, function(err, result){ } )

sql要执行的SQL语句，result，SQL语句的执行结果

connection.end() 关闭连接

(2)使用连接池

var pool=mysql.createPool({ }); 创建连接池对象，传递主机名，端口号，用户名，密码，使用的数据库，连接池大小

pool.query( sql,callback )

在SQL语句中可以使用占位符 ?

练习：创建web服务器，托管静态资源到public下，创建add.html(包含部门编号，部门名称)。06_add.js

点击表单中的提交按钮，向服务器发送请求，请求方法:post，请求URL：/add，创建对应的路由获取提交的数据。

将服务器接收的数据插入到tedu数据库下dept表中，

课后任务

(1)复习今天内容，整理思维导图

(2)创建web服务器，托管静态资源，点击提交，将数据插入到tedu数据库下的emp表中

day06

复习

步骤：

(1) web服务器 (app.js)

托管静态资源到public

使用body-parser中间件

使用路由器，挂载到指定的位置例如挂载到 /user

(2)路由器( routes )

引入连接池模块

创建路由器对象

往路由器添加路由

在路由中使用连接池

导出路由器

(3)连接池模块(pool.js)

创建连接池对象

导出连接池对象

SELECT * FROM xz_user LIMIT start,count;

count: 每页的数据量

start: 开始查询的值

数据量10、页码

start=(页码-1)*数据量

1 0

2 10

创建商品模块路由器 product.js，

创建空的路由器对象

添加路由

导出路由器

把路由器导入到服务器下，挂载到/product下

阶段2: HTML、AJAX、CSS、BOOT

HTML

day01 HTML

李然 QQ：1535212067

一.课程安排，（20天）

1.HTML5 Basic(2天)

搭建网页结构

2.Ajax异步数据交换(3天)

异步完成前后端数据的交互

3.项目1（2天）

4.CSS样式表(4+2天)，让页面变得好看

美化HTML

5.Bootstrap框架(4天)

简化css开发，

支持响应式开发

6.项目(2天)

总结：20天课程遇到问题

1.知识点细碎，没有条理

2.知识点量极大，单词量极大

二.web基础知识

HTML5:大前端技术

是html4.01升级版 XHTML1.0的升级版

1999年12月发布 2000年1月发布

语法松散语法严谨

1.web与internet

internet:全球性计算机互联网

俗称：互联网，因特网

web就是运行在internet上的一种应用程序

internet上的服务

www服务：world wide web 万维网，访问网站的服务

BBS：电子公告板，简称论坛

Email:电子邮件

TelNet：远程登录

Ftp:上传下载文件

2.internet上的应用程序，结构分类

1.C/S

C：client 客户端 S:server 服务器

代表：QQ，LOL......

2.B/S

B:Browser 浏览器 S：server服务器

C/S和B/S的区别

1.cs是需要升级

2.bs不需要升级

3.web运行原理

web:运行在internet上的一种B/S结构的应用程序

俗称网站

internet:为web运行提供了网络环境

web的工作原理：

基于浏览器和服务器以及通信协议来实现的数据传输和展示

通信协议：规范了数据是如何打包和传递

服务器

1.功能

存储数据

接收用户请求并给出响应

提供了程序的运行环境

具备一定的安全功能

2.服务器产品

Apache/Tomcat/IIS

3.服务器端技术

java/PHP/python/nodejs/C#

浏览器

1.功能

代表用户发送请求

作为html.css.js的解析器，以图形化的界面展示给用户看

2.浏览器的产品

chrome

safari

Firefox

oprea

3.浏览器技术

HTML5 CSS3 JS

三.HTML入门

1.HTML是什么

HyperText Markup Language 超文本标记语言

标记：超文本的组成形式，具有自己独特的功能

语法：<关键字></关键字>

2.HTML的特点

1.以.html或者.htm为后缀

2.由浏览器解析执行

3.使用带有<>的标记来标识

4.页面中可以执行js脚本

3.HTML基本语法学习

1.标记

又称，标签，元素，节点

语法<关键字></关键字>

每个标签都有自己的功能

我们要学习关键字和对应的功能

2.标记的分类

1.双标记（封闭类型标记）

<关键字>....</关键字>

ex:<a></a> <div></div>

2.单标记(非封闭类型标记)，空标签

<关键字>或者<关键字/>

练习

新建文档01_ex.html 在文档中

写一对html标签

写一对head标签

写一对body标签

3.标签的嵌套

在一对标签中出现其他标签，形成功能嵌套关系

嵌套关系，必须子元素有缩进

注意嵌套层级不要混乱

推荐的写法

<b>

<img>

</b>

</a>

不推荐的的写法

错误的写法

<b>

</a>

</b>

4.属性

双标签

<关键字属性1="值1" 属性2="值2" ...></关键字>

单标签

<关键字属性1="值1" 属性2="值2" .../>

属性是对该标签的修饰

练习

在01_ex中添加b标签，内容随意

b标签拥有属性align="center" title="1111"

观察效果，提示：有一个属性不生效

4.1属性分类

1.通用属性，所有元素都有的属性

id:定义元素在页面中唯一的标识符

title:鼠标悬停在元素上所提示的文本

style:css中第一内联样式的属性

class:css中，引用类选择器的属性

2.专有属性，某个元素自带的属性，其它元素此属性不生效

总结

学习html，究竟怎么学？

记忆<关键字>，记忆超文本标签的特殊能力

记忆专有属性，记忆嵌套关系

5.html的注释

不被浏览器解析的文字

四.HTML的文档结构

<!doctype html>

<html>

</html>

1.文档类型声明<!doctype html>

告诉运行解析我的浏览器，如果你想正确的运行解析我这篇HTML文档，请使用h5的规则解析我

2.网页结构

<html>

</html>

语法：<html></html>

标识网页的开头和结束

注意，一个.html文件中，有且只有一组html标签

<head></head>网页的头部，定义全局的信息

<body></body>网页的主体，展示的内容

练习

02_ex.html.完成最基本的网页结构

<head></head>中的元素

<title></title>页面标题

<meta/> 元数据

<body></body> 定义网页主体

body的属性

text="red"指定网页的字体颜色

bgcolor="yellow" 指定网页的背景颜色

15:18上课

关于editeplus快捷键

ctrl+b 快速在指定的浏览器中打开页面

ctrl+s 保存

定义快捷键

ctrl+d 删除当前行

ctrl+z 回退一步

ctrl+y 前进一步

alt+↑/↓ 移动当前行位置

ctrl+alt+↓ 复制当前行

五.文本标记

1.标题元素

在页面中以醒目的方式显示文本

特点：1.字体大小有变化 h1最大，h6最小

2.字体加粗

3.独占一行，上下有垂直间距

属性 align 设置标记内容水平对齐方式

取值：left/center/right

2.段落标记

<p></p>

以突出的形式表现一段文字

特点：1.独占一行

2.文本上下有垂直间距

属性 align

练习

03_ex.html中，模拟一份个人简历

3.换行标记

4.水平分割线

属性

size="5px" 分割线粗细以px为单位的数字

width="50%" 分割线宽度以px为单位的数字 %

align="left" 分割线水平对齐 left/center/right

color="orange" 分割线颜色合法颜色值

5. 预格式化标签

保存了在编写代码时的回车和空格效果

在浏览器中解析显示

6.特殊字符(实体)

html会出现空格折叠现象

把所有的空格都解析成一个空格

把所有的回车都解析成一个空格 <br>

空格  

< <

> >

® ®

× ×

人民币 &

练习

7.文本样式标签

<i></i> <em></em> 斜体

<b> </b> <strong> </strong> 加粗

<s></s> <del></del> 删除线语义

<u></u> 下划线

<sup></sup>上标

<sub></sub>下标

8.分区元素,如果不写样式，页面中是看不到的

1.块分区<div></div>

用于页面中的布局效果

特点，单独成行

2.行分区<span></span>

一行文字如果有多种样式，使用span

特点，与其他span元素共用一行

span中不允许嵌套块级元素

9.块级元素和行内元素

1.块级元素

页面上，单独成行的元素，都是块级元素

ex:h1~h6,p,div

块级元素默认排列方式，由上到下排列

2.行内元素

页面上，多个元素共用一行

ex:span em i b strong sub sup u s del

行内元素默认排列方式，由左往右排列

六.图像和链接

作业

1.熟练完成nodejs接口11个

2.图片可以不写

3.使用div完善个人简历

day02 图像&列表&表格

一.图像和链接

1.图像的使用

属性 src="图片资源路径"

2.URL

Uniform Resource Locator 统一资源定位符，俗称路径

3.url的表现形式

1.绝对路径---使用网络资源的时候使用

完整的路径

通信协议+主机名称+文件目录结构+资源名称

优点：不占用本地存储空间

缺点：不稳定

使用网络资源发展出来的行业---图床

练习：01_ex中再从tmooc中，盗一张图，显示

2.相对路径---使用本服务器资源的时候使用

1.同级目录直接引用资源名称 src="06.png"

2.子级目录先进入子级目录，再引用文件名称

src="data:image/07.png"

src="../8.png"

4.综合应用

src="../../image/a/10.png"

返回上一级，再返回上一级，

进入image文件夹，在进入a文件夹，找到10.png

4.图片的属性

src 设置图片资源路径 source的缩写-数据源

title：鼠标悬停时，显示的文字

alt:图片加载错误时，显示的文字

width:设置图片的宽

height：设置图片的高

注意：如果设置的宽高比，与原始图片宽高比不一致，会出现图片的失真。

解决图片的失真，宽高属性，只写一个，另外一个自适应

5.链接

1.语法

属性 href 链接的路径

target打开页面的方式

取值：_self 默认值，在当前页面中打开新网页

_blank 在新页面打开网页

2.a标签其它表现形式

1.下载资源

2.打开电子邮件

<a href="mailto:g-chengliang@tedu.cn">发送新邮件</a>

3.调用执行js代码

function show(){

alert(2222222);

}

</script>

4.回到页面顶部

<a href="#">回到页面顶部</a>

一般当你不知道a标签要跳转到哪里的时候，写#

6.a标签的锚点操作

1.什么是锚点

锚点，就是页面中的一个记号

可以通过超链接的方式链接到记号位置处

2.锚点的使用

1定义锚点

1.1在锚点位置处添加空的a标签，使用name属性定义锚点

1.2直接使用锚点位置处元素的id当做锚点名称

2链接到锚点

3.锚点想要链接到其它页面的锚点

练习

02_ex.html中

1.点击a标签在新页面打开tmooc

2.点击a标签，给亮亮发邮件

3.点击a标签，下载一个1.zip

4.a中内容为西游记火焰山，下面有对应内容p标签

点击a标签跳转到对应p标签

5. a中内容为西游记女儿国，下面有对应内容p标签

点击a标签跳转到对应p标签

6. a中内容为西游记盘丝洞，下面有对应内容p标签

点击a标签跳转到对应p标签

7.点击a标签，跳转到03_a.html的妖精的尾巴的位置

二.表格

1.表格语法

行 <tr></tr> table row

列 <td></td> table data

<table>

<tr>

</tr>

</table>

编写4行4列的表格，内容随意

2.属性

table标签的属性

border:设置表格的边框

width="200px" 设置表格宽

height="200px" 设置表格高

align="center" 设置表格水平对齐方式

bgcolor="pink" 设置表格背景颜色

bordercolor="red" 设置表格边框颜色

cellpadding="10px" 设置表格内边距边框到内容的距离(以左和上为准)

cellspacing="10px" 设置表格的外边距边框到边框的距离

练习

04_ex.html

设置表格尺寸400px*400px，4*4的表格

表格背景pink

边框1px，边框颜色yellow

表格水平居中

表格内边距5px 外边距10px

tr的属性

align left/center/right 设置当前行内容的水平对齐方式

valign top/middle/bottom 设置当前行内容垂直对齐方式

bgcolor="yellow" 设置当前行的背景颜色

td的属性

width="70px" 设置当前单元格宽度，宽度过大会影响当前列

height="70px" 设置当前单元格的高度，高度过大，会影响当前行

align="right" 设置当前单元格内容的水平对齐方式

valign="top" 设置当前单元格内容的垂直对齐方式

bgcolor="blue" 设置当前单元格的背景颜色

colspan 跨列，列合并

rowspan 跨行，行合并

3.不规则的表格

1跨列 colspan="n"

第一步：从指定的单元格的位置处，横向向右合并N个单元格(n包括自己)

第二步：把被合并的单元格删除

2跨行 rowspan="n"

第一步：从指定的单元格的位置处，纵向向下合并N个单元格(n包括自己)

第二步：把被合并的单元格删除

4.表格可选标记

1.表格的标题

注意，如果设置表格标题，<caption> </caption>必须紧跟<table>

2.行/列的标题

使用<th></th>替换<td></td>

<th></th>：加粗，居中

5.复杂表格的应用

1.行分组,默认不可见

可以将几个连续行，划分到一个组中，进行统一管理

表头<thead></thead>

表主体<tbody></tbody>

表脚<tfoot></tfoot>

2.表格嵌套

被嵌套的表格，只能放在td中

练习

三.列表

1.列表的作用

最原始的作用，有条理的显示数据

列表是由列表类型和列表项组成

2.有序列表

项目中，有序列表就是显示数据，而且使用几率很小

<ol> order list--ol list item--li

<li>打开冰箱门</li>

<li>把大象放进冰箱</li>

<li>关上冰箱门</li>

</ol>

属性type=" " 标识项的类型 1/a/A/i/I

start="" 标识项的起始数字

3.无序列表

四.结构标签

午间练习，把昨天作业中的图片，添加进去

第二阶段练习效果图示\day01_html_01作业\素材

作业：

1.11个nodejs接口

2.完成课程表

day03 列表表单

一.列表

1.无序列表

1.什么是无序列表

有类似结构的列表项，但是没有顺序要求的内容一般使用无序列表

ul在项目中使用非常频繁，常用于对于一组相似的内容进行布局和排版

ul---unorder list li---list item

<ul>

...

</ul>

2.ul的属性

type 指定标识类型

取值 disc 默认值，实心圆

circle 空心圆

square 实心小方块

none 不显示标识

2.列表的嵌套

1.在li中嵌套其它元素

<ul>

</ul>

<ol>

<li><a href="#">汤圆炒橘子</a></li>

<li><a href="#">西红柿炒月饼</a></li>

<li><a href="#">姜丝炒土豆丝</a></li>

</ol>

2.在li中嵌套其它列表

列表的嵌套，必须放在li中，不是语法要求，是语义要求

3.定义列表(h5新标签)

对一个名词，进行解释说明的时候，使用定义列表

<dl> 定义列表

<dt> </dt> 要解释说明的名词

<dd> </dd> 要解释说明的内容

</dl>

二.结构标记

1.用于描述整个网页结构，取代div做布局的一套标记

为什么要使用结构标记，而不用div

结构标记的作用根div一模一样

结构标记是有语义，方便阅读

使用有语义的标签,可以让页面在搜索时更靠前

2.常用的结构标记

1.<header></header>

定义网页的头部，或者某个区域的顶部

2.<footer></footer>

定义网页的脚部，或者某个区域的底部

3.<nav></nav>

定义网页导航链接

4.<section></section>

定义网页主体内容

5.<aside></aside>

定义网页侧边栏

6.<article></article>

定义与文字相关的内容

比如，论坛，回帖，用户评论....

三.表单（重点&难点***********）

1.作用

1.提供可视化的输入控件

2.收集用户输入的信息，并提交请求给服务器

总结，form自带提交请求的功能

ajax提交不需要form支持

2.表单的组成

1.前端部分

提供表单控件，与用户交互的可视化控件

2.后端部分

后台接口对提交的数据进行处理

3.表单

属性：

1. action="" 定义表单提交时发送的动作(接口url)

如果没有值，默认提交给本页

2. method="" 定义表单提交方式

取值：

1.get 默认值

特点：明文提交，提交的内容会显示在浏览器地址栏上(不安全)

提交的数据有大小限制，最大为2kb

向服务器要数据时，使用get方法

2.post

特点：隐式提交，提交的数据不会在地址栏显示

提交数据没有大小限制

要传递数据给服务器的时候，使用post

3.其它方法

delete put option

3. enctype=""

指定表单数据的编码方式

允许将什么样的数据提交给服务器

取值：1.application/x-www-form-urlencoded 背下来

默认值，允许将任意字符提交给服务器(文件除外)

2.text/plain 允许提交普通字符给服务器

3.multipart/form-data 允许提交文件给服务器

4.表单控件，在form标签中，能够与用户进行交互的可视化元素

1.分类

input元素基础9种，h5新标签10种

textarea 多行文本域

select和option 下拉选

其它元素

2. input元素

在页面中，提供了各式各样的输入控件

比如，文本框，密码，单选按钮，多选按钮等等

属性：

2.1 type,指定input元素的类型

2.2 name 为控件定义名称，提供给服务器端使用（name必须写）

2.3 value 控件的值，传递给服务器的值

例外，对于按钮来说，value是设置按钮显示的内容

2.4 disabled 禁用，不能修改值，也不能提交

无值属性，在标签使用的时候，不写值

后期使用js修改值，认为该值为true

3.input元素详解

1.文本框和密码框

文本框 type="text"

密码框 type="password"

属性 maxlength 指定输入的最大长度

readonly 无值属性，只能读，不能写，可以提交

placeholder 占位提示符，默认显示在控件上的文本

2.按钮

提交按钮 type="submit",将表单中的数据收集整理发送给服务器

普通按钮 type="button"没有功能，配合事件，调用js代码

重置按钮 type="reset" 将当前表单的内容恢复到初始化状态

属性 value 设置按钮上的文字，此value不提交

3.单选/复选按钮

单选按钮 type="radio"

必须有value属性，不然传递值永远是on

复选按钮 type="checkbox"

name属性必须是数组

属性 name除了定义控件名称之外，还起到分组的作用

checked 设置默认被选中项，无值属性

4.隐藏域

type="hidden"

想把数据提交给服务器，但是不想展示给用户看

这种数据，放到隐藏域中

用户看不见，却又可以提交

5.文件选择框（上传文件使用）

type="file"

注意：使用文件选择框有两个前提

1.必须使用post方法提交

2.需要把form的enctype属性，设置为multipart/form-data

post发放提交，无法在地址栏显示

属性：multiple 无值属性，选择多个文件

4.多行文本域

允许录入多行文本

cols="5" rows="3" 根据计算机硬件的不同，不准确

5.下拉选

......

</select>

注意：

1.如果option没有value属性，select的value等于被选中的option的内容

2.如果option有value值，select的value值是选中option的value

属性

select name value

size 默认值为1,1的时候是下拉选择框

>1的时候，是滚动选择框

multiple 无值属性，设置多选

option value 定义选项的值

selected 无值属性，默认选中

17:07~17:22休息

day04 表单控件

一.表单

1.其它元素

1.label元素关联文本与表单控件

属性for,绑定要关联的表单控件的id值

效果，点击label文本，被关联的控件也被点中

2.为控件分组

<fieldset></fieldset>为控件分组

<legend></legend>分组的标题

3.浮动框架

src 要引入的网页路径

width 设置iframe的宽度

height设置iframe的高度需要js和dom的支撑

frameborder 浮动框架的边框

scrolling 设置滚动条 yes no auto

4.新表单元素

在html5版本中，新提出来的表单控件

1.邮箱，提交的时候验证@及@后面有一个字节

2搜索类型，自带快速清除功能

3. url类型验证，提交的时候验证有http://开头

4.电话号码，移动端使用时，弹出虚拟键盘

5.数字类型

max="10" 能接受的最大值

min="5" 能接受的最小值

step="2" 步长

6.范围类型

max="20"

min="16"

step="2" 同上

7.颜色类型

8.日期类型，提供了一个日期选择控件

9.月份类型，提供了一个月份选择控件

10.周类型

二.HTTP协议

1.URL

结构：协议+主机名称+目录结构+文件名称

URL完整的结构

<scheme>://<user>:<pwd>@<host>:<port>/<path>;

url完整结构详解

scheme:方案，协议，以哪种方式获取服务器资源

不区分大小写。常见协议http/https/ftp

<user>:<pwd> 用户名，密码

<host>主机名称 localhost 127.0.0.1 域名/ip地址

<port>端口号

<path>路径，资源在服务器上具体存放的位置

<params> 参数跟踪状态参数 session/cookie

<query>get方法提交请求时，查询字符串

#<frag>锚点

2.HTTP协议

HTTP HyperText Transfer Protocol 超文本传输协议

规范了数据是如何打包以及传递的（专门用于传输html文件）

HTTP协议的历史

3.web请求原理详解

4.消息/报文Message

1.请求消息Request Message(请求起始行，请求头，请求主体)

2.响应消息Response Message(响应起始行，响应头，响应主体)

5. Request Message

请求消息，客户端发送给服务器的数据块

由三部分组成：请求起始行，请求头，请求主体

1. 请求起始行

1.请求方法

get:客户端向服务器要数据的时候使用

靠地址栏传递查询的字符串，无请求主体

post：客户端传递给服务器数据的时候使用

有请求主体，靠请求主体传递数据

delete:表示客户端要删除服务器上的内容(一般禁用)

put：表示客户端想要往服务器上放文件/数据(一般禁用)

connect：测试连接

trace：追踪请求路径

option：预请求

head:表示客户端只获取响应消息头

2.协议版本号 HTTP/1.1

3.请求的url

2. 请求头

1. Host:www.tmooc.cn

告诉服务器请求的是哪个主机

2. Connection: keep-alive

告诉服务器开启持久连接

3. User-Agent:

告诉服务器，我现在浏览器的类型和浏览器的版本号

4. Accept-Encoding: gzip

告诉服务器，我这个浏览器能够接收的压缩文件的格式

5. Accept-Language:zh-CN

告诉服务器，我能够接收的自然语言的类型

6.Referer 引用/推荐人

告诉服务器，这个请求来自于哪个网页

3. 请求主体

formdata get请求没有请求主体

post有请求主体

6. Response Message

响应消息，服务器发送给客户端的数据块

由三部分组成：响应起始行，响应头，响应主体

1. 响应起始行

1.协议版本 HTTP/1.1

2.响应状态码

告诉浏览器，服务器的响应状态是什么

1XX:正在请求，提示信息

2XX：200 响应成功

3XX：重定向 301永久重定向

302 临时重定向

304 请求没有修改，命中缓存

4XX:404 请求资源不存在

403 权限不够

405 请求方法不被允许

5XX：500服务器代码错误

3.原因短句

2. 响应头

1.Date: Thu, 28 Mar 2019 08:03:57 GMT

告诉浏览器，服务器响应的时间

2. Connection: keep-alive

告诉浏览器，已经开启了持久连接

3. Content-Type: text/html

告诉浏览器，响应主体的类型是什么

text/html 响应回来的数据是html文本

text/plain 响应回来的数据是普通文本

text/css 响应回来的是样式文件

application/javascript 响应回来的是js脚本

application/xml响应回来的是xml的字符串

application/json 响应回来的是json字符串

image/jpg gif png 响应回来的是图片

3. 响应主体，服务器传给浏览器的数据

7.缓存

客户端将服务器响应回来的数据进行自动的保存

当再次访问的时候，直接使用保存的数据

缓存的优点？

1.减少冗余的数据传输，节省客户端流量

2.节省服务器带宽

3.降低了对服务器资源的消耗和运行的要求

4.降低了由于远距离传输而造成加载延迟

缓存的新鲜度和过期

1.请求--无缓存--连接服务器--存缓存--客户端得到

2.请求--有缓存--够新鲜--使用缓存--客户端得到

3.请求--有缓存--不新鲜--连服务器确认是否过期--没过期--更新缓存的新鲜度--客户端得到

4.请求--有缓存--不新鲜--连服务器确认是否过期--已过期--连服务器--存缓存--客户端得到

1.与缓存相关的消息头

Cache-Control：max-age=0

从服务器将文档传到客户端之时起，

此文档处于新鲜的秒数，这是一个相对时间

语法：Cache-Control：max-age=处于新鲜的秒数

Cache-Control：0 不缓存

2.在网页中添加缓存，需要修改消息头

8.HTTP性能优化

HTTP的连接过程

发起请求-->建立连接-->服务器处理请求-->访问资源-->构建响应-->发送响应-->记录日志

1.HTTP连接性能的优化

1.减少连接创建次数(开启持久连接)

2.减少请求次数

3.提高服务器端运行速度

4.尽可能减少响应数据的长度

2.安全的HTTP协议

HTTPS：安全版本的http协议

SSL：为数据通信特供安全支持

1.客户端发送请求--->SSL层加密--->服务器接收加密文件--->在SSL层解密，得到请求明文，对请求做处理

2.服务器发送响应--->SSL层加密--->客户端得到加密文件--->在SSL层解密，得到响应明文，解析响应内容

AJAX

day05 ajax

一.DOM(简单dom操作)

ajax提交请求，不需要使用form表单

但是，form表单自带收集数据的功能

不是用form标签，就没有自动收集数据的功能了

我们需要使用js的dom操作，手写代码，收集数据

1.使用dom

1.获取元素对象

var obj=document.getElementById("id")

ES6支持简写方式

直接使用元素的id来代表元素对象

2.获取/修改元素的值/内容

获取input的值(value)

var val=id.value; 获取

id.value="新值" 修改

获取双标签的内容(innerHTML)

var content=id.innerHTML; 获取

id.innerHTML="新内容" 修改

3.innerHTML详解

<h1>

</h1>

</div>

d1.innerHTML="<h1><a href="#"></a> </h1>"

d1.innerHTML是可以动态的修改html页面元素结构

4.事件 onclick

通过用户的行为来激发的操作就是事件

常用事件 onclick="fn()"

文本框/密码框事件

onblur焦点移除事件，当失去焦点失，调用js

onfocus获取焦点事件，当元素获得焦点是，调用js

body的事件，页面加载完成，马上激发

onload

二.Ajax

1.同步Synchronous

在一个任务进行的过程中，不能开启其他任务

同步访问：浏览器在向服务器发送请求时，浏览器只能等待服务器的相应，不能做其他事

出现场合：

1.地址栏输入url，访问页面(网速不好时，更明显)

2.a标签跳转

3.表单提交

2.异步Asynchronous

在一个任务开启时，可以开启其他任务。

异步的访问：浏览器在向服务器发送请求时，用户可以在页面上做其他操作

出现场合

1.用户名重复的验证

2.聊天室

3.百度搜索建议

4.股票走势图

1.什么是Ajax

Asynchronous JavaScript and XML

异步的 js 和 xml

本质：使用js提供的异步对象，

异步的向服务器发送请求，

并接收响应回来的数据

异步对象 XMLHttpRequest

2.使用ajax

1.创建异步对象

2.创建请求

3.发送请求

4.接收响应数据

3.创建异步对象

var xhr=new XMLHttpRequest();

这种创建方式，不兼容ie8以下的版本

4.使用异步对象打开连接，创建请求

xhr.open(method,url,isAsyn);

method:string类型，请求的方法。比如 "get"

ulr:string类型，请求的url.比如 "http://127.0.0.1:8080/login"

isAsyn:boolean类型，是否才用异步访问的方式去访问服务器

5.发送请求

xhr.send(formdata)

注意：只有post请求的使用，才有请求主体formdata

get方法不需要请求主体

所以使用get请求的时候,两种发送请求的写法

xhr.send()或者xhr.send(null)

跨域问题，一定在xz的服务器中，托管静态资源文件夹中，编写html文件。不然会发生跨域问题。

运行此html文件，要使用访问服务器的方式运行，不要使用ctrl+b或者直接双击。

//1.创建异步对象

var xhr=new XMLHttpRequest();

//2.打开连接，创建请求 xhr.open("get","http://127.0.0.1:8080/demo/ajaxdemo",true);

//3.发送请求

xhr.send(null); 15:30~15:45休息

6.绑定监听，接收响应

1.readyState属性

用于表示xhr对象的请求状态，一个5个状态

值0：请求尚未初始化

1：已经打开服务器连接，请求正在发送中

2：接收到响应头

3：接收响应主体

4：接收响应数据成功

只要请求一发送，readyState自动改变

2. status属性

表示服务器的响应状态码

当status为200的时候，表示服务器正确的处理了请求

3.onreadystatechange 监听事件

当xhr.readyState属性值发生改变时，自动激发操作

4.常见错误

跨域错误，本地打开的html文件

404，检查路由，检查接口，检查url,检查目录结构

500，检查服务器代码

5.使用get提交，发送带参数的请求(dom)

在xhr.open("get","url?uname=...&upwd=...",true);

作业：

1.使用get方法完成登录模块

2.使用get方法获取商品列表，把响应数据放到div中显示

3.提高题，注册验证，验证新用户名是否可用

模仿学子商城注册页，使用获取焦点和失去焦点事件

day06 ajax

一.Ajax

1.post请求

1.post接口

router.post("/login_post",(req,res)=>{

//获取用户名和密码

var $uname=req.body.uname;

var $upwd=req.body.upwd;

2.使用post方法提交请求

注意：由于服务器默认接收普通字符

请求主体有特殊字符

需要在发送之前，设置请求头信息，改为发送所有字符

设置的位置，是在open之后，在send之前

//1.创建 xhr对象

var xhr=new XMLHttpRequest();

//4.绑定监听，接收响应

xhr.onreadystatechange=function(){

if(xhr.readyState==4&&xhr.status==200){

var result=xhr.responseText;

alert(result);

}

//2.打开连接，创建请求

xhr.open("post","/demo/login_post",true);

//3.发送请求

//设置请求消息头，修改接收所有字符

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

var formdata="uname="+uname.value+"&upwd="+upwd.value;

xhr.send(formdata);

2.作业，查userlist

任务1.重新完成userlist,要用onload事件（接口，页面）

任务2.重新完成post登陆(接口，页面)

3.Json

使用ajax访问服务器，服务器连接数据库，把结果通过相应传送给ajax.

前台ajax内部，xhr.responseText得到这个相应数据

这个相应数据的类型，string

string放的是数组结构，每一个元素是什么？

1.js对象的数据格式

语法：

var 对象名称{属性1：值，属性2：值，属性3：值，。。。。}

ex:var tom={name:"tom",age:18,gender:"男"}

js对象，在属性名称这里是没有双引号

2.JSON数据格式

JavaScript Object Notation

js 对象表现方式

js对象表示法，以js对象的数据格式表现出来的字符串

json字符串的格式：

1.json中用一对{}来表示一个对象

2.json中的属性，必须用""括起来(写单引号不报错，但是最好用双引号)

3.属性的值是字符串，也要带双引号

4.json的表现是个字符串，所以在最外层加引号(单引号)

'{"name":"tom","age":18,"gender":"男"}'

json数组字符串

var result='[

{"uid":1,"uname":"dingding","upwd":"123456"},

{"uid":2,"uname":"dangdang","upwd":"123456"},

{"uid":4,"uname":"yaya","upwd":"123456"},

{"uid":5,"uname":"tom","upwd":"123456"}

3.把json字符串转换成js对象数组

var arr=JSON.parse(result);

arr中，就是一个js对象数组

常见错误

原因：本机开启了另外一个mysql数据库

不是你自己xmapp中的mysql

解决方案：需要在任务管理器中把之前的mysql进程清除。然后重新开启xmapp的mysql

任务管理器，在开始按钮上点击右键打开

设置请求消息头，的代码，放在了open之前或者send之后

4.XML数据格式

XML:eXtensible Markup Language;

可扩展的标记语言

xml是html 的一个变种，专门负责承载数据用的

所以操作xml要使用dom

xml的标记，是没有被预定义过，需要自定义

xml就是做数据传递，而不是数据展示

1.xml的语法

1.版本声明

<?xml version="1.0" encoding="utf-8"?>

2.xml只有双标记

3.xml标记允许嵌套，要注意嵌套顺序

4.每个标签都可以自定义属性,属性值必须带双引号

5.每个xml文档，有且只有一个根标签

2.使用ajax访问xml数据

function getXML(){

//1.创建xhr对象

var xhr=new XMLHttpRequest();

//4.绑定监听，获取响应

xhr.onreadystatechange=function(){

if(xhr.readyState==4&&xhr.status==200){

var result=xhr.responseText;

console.log(result);

}

//2.创建请求get

xhr.open("get","student.xml",true);

//3.发送请求

xhr.send(null);

}

3.xml数据解析，使用dom

getElementsByTagName("")

通过标签名，找到一堆元素

不管有几个元素，得到的一定一个数组（类数组）

类数组，不能使用数组的api只能用下标取数据

解析技巧，从外往里，一层一层剥洋葱

步骤

var result=xhr.responseXML;

此时，result就可以进行dom解析

最后使用innerHTML可以操作内部的内容

17：05~17：20休息

二.AJAX项目

新建mypro.js 在app.js中导入挂载

新建静态文件夹 mypro 在app.js中托管

所有接口写在mypro.js中

所有的html写在mypro文件夹里

1.登陆功能 post方法

作业：

1.完成用户列表页

2.完成注册页面的失去焦点验证，及用户注册

CSS

day08 css

一.CSS概述

1.CSS是什么

cascading style sheets

层叠样式表，级联样式表，简称样式表

2.作用

美化html页面

3.HTML与CSS的关系

html，负责网页的搭建，内容的展示

css，负责网页的修饰，样式构建

4.CSS与HTML的属性，使用原则

w3c建议，尽量使用css的方式取代html的属性

css的优势

1.样式代码可以高度重用

2.样式代码可维护性高

二.CSS的语法规范

1.使用css的方式

1.行内样式，内联样式

在元素的style属性中，声明样式（所有元素都有style属性）

<any style="样式声明"></any>(any是任何元素的意思)

样式声明：样式属性：样式值；样式属性：样式值；

样式属性和值用：连接

多个样式声明用；连接

内联样式在项目中不用，由于不能重用，默认优先级最高。

只有在学习和测试使用。

2.内部样式

在head标签中，写style标签，在style中定义样式规则

<style>

p{color:red;background:pink;font-size:36px;}

</style>

样式规则：选择器，就是规定页面中哪些元素可以使用此样式

{样式声明}

内部样式的重用，只能在当前页面内重用。

项目中较少使用，在学习和测试中使用较多

3.外部样式

单独创建一个.css文件，在这个文件内写样式

在.html的head标签中，是link引入此样式

外部样式在项目中应用广泛

常用样式属性

color:blue; 字体颜色，取值是合法的颜色

font-size:36px; 字号大小，取值px为单位的数字

background:yellow 背景颜色，取值合法的颜色

练习

css3种使用方式

01_ex.html

<h1>lorem</h1>内联，背景色为粉色，字体颜色为黄色

<h2>lorem</h2>内部，背景色为黄色，字体颜色为红

<h3>lorem</h3>外部，背景色为红色，字体颜色为蓝色

2.CSS的特性

1.继承性

作用在父元素的样式，大部分可以被子元素继承

2.层叠性

可以为一个元素定义多个样式规则

样式规则中的属性不冲突时，可以同时应用这个元素上

3.样式的优先级

如果样式声明冲突时，按照样式规则的优先级去应用

默认的优先级规则，由高到低：

1.最高，内联样式

2.内部外部就近原则

3.最低，浏览器默认样式

4.调整优先级

！important规则

放在属性值之后，与值之间使用空格隔开

作用：调整样式优先级，优先级提升

多个样式都有！important，按照就近原则应用

ex: h2{color:red !important;}

练习

02_ex.html中

一个p标签，内容是假文

用内部样式设置文字颜色为蓝色，字号24px

用外部样式设置文字颜色为红色，字号40px

将外部样式引入，f12查看页面效果

然后内部样式和外部样式引入的位置，f12观察效果

尝试使用！important调整样式优先级

三.基础选择器 (重点***)

1.选择器的作用

规范了页面中哪些元素能够使用定义好的样式

选择器就是为了匹配元素(选择器就是一个条件，符合这个条件的元素就可以使用这个样式)

2.基础选择器详解

1.通用选择器 *{样式声明}

*{margin:0;padding:0} 所有元素的内外边距清0

2.元素选择器，标签选择器

页面中所有对应的元素，都应用这个样式

设置页面中某种元素的公有默认样式

ex:p{},div{}

特殊用法：body{margin:0;padding:0}

body及内部所有元素的内外边距清0

3.ID选择器，专属定制

只对当前页，一个标签生效

#id值{样式声明}

一般id选择器在项目中很少单独使用，通常会作为子代选择器或者后代选择器的一部分

练习：

03_ex.html中有h2标签，内容是假文。此h2的id为text1

使用id选择器设置文本为紫色purple.背景为黄色

字体为斜体 font-style:italic;查看页面观察效果

再使用元素选择器，设置文本为红色，背景为pink

这里会对就近原则产生疑问

4.类选择器

定义页面上某些元素的公共样式(类选择器，谁想用谁就可以用)

通过元素的class属性来引用样式

<p class="text-danger">Lorem ipsum dolor sit amet.</p>

.text-danger{color:red;}

1.声明 .类名{样式声明}

点不能省略，类名不能以数字开头，类名只能包含- _

2.引用 <any class="类名"></any>

3.多类选择器一个元素可以应用多个类

4.分类选择器

将元素选择器和类选择器一起使用

更精确的确定使用样式的元素

元素.类名{} 引用了这个类名的此元素才应用这个样式

增加了选择器的权值，提高优先级

练习：04_ex 页面中添加div和p元素，内容假文

用类选择器为所有元素设置字体为红色，字号为24px，用分类选择器为p元素设置背景为黑色

5.群组选择器

将多个选择器使用逗号分隔，放在一起，定义一组公共样式

语法：选择器1，选择器2，选择器3，.....{}

ex：div,p,#s1,.d2{color:red;background:yellow;}

6.后代选择器

通过元素的后代关系匹配元素

后代，一级或者多级的嵌套关系

语法：选择器1 选择器2 选择器3.....{样式声明}

存在的意义：更精准的匹配元素

7.子代选择器

通过元素的子代关系匹配元素

子代，一级嵌套关系

语法：选择器1>选择器2>选择器3.....{}

存在的意义：更精准的匹配元素

8.伪类选择器

匹配元素不同状态下的不同样式

链接伪类

:link{}匹配元素尚未访问时的状态

:visited{}匹配元素访问过后的状态

ex:

#a1:link{color:pink;background:red;}

a:visited{color:red;background:yellow;}

动态伪类

:hover{} 鼠标悬停在元素上应用的样式

ex：img:hover{width:256px;height:50px;}

:active{}匹配元素被激活时的状态(激活：鼠标点住不放开)

:focus 匹配元素获取焦点时的状态

input:focus{background:yellow;}

练习：05_ex 一个a标签，内容随意，设置以下样式

1.访问后，文本颜色orange

2.被激活时，文本颜色绿色

3.鼠标悬停时文本颜色红色

4.未被访问是，文本pink 没有下划线text-decoration:none;

4个伪类同时作用一个元素上，会发生冲突

解决方案，必须按照一定顺序编写，才不会冲突

爱恨原则 love hate

9.选择器的权值

权值：标识当前选择器的重要程度，权值越大优先级越高

!important >1000

内联样式 1000

id选择器 100

类选择器 10

元素选择器 1

*通用选择器 0

继承的样式无

权值的特点

1.当一个选择器中含有多个选择器时，需要将所有的选择器的权值进行相加，然后比较，权值大的优先显示

2.权值相同，使用就近原则

3.群组选择器的权值单独计算，不能相加

4.样式后面加!important，直接获取最高优先级

内联样式不能加!important

5.选择器权值的计算不会超过自己的最大数量级(100个1加一起也不会大于10)

四.尺寸和边框

1.尺寸属性

作用，改变元素的宽度和高度

width: 宽度

max-width最大宽度

min-width 最小宽度

height：高度

max-height最大高度

min-height最小高度

2.页面中允许设置尺寸的元素

1.所有的块级元素都可以设置

2.所有行内块元素都可以设置 input（除了单选多选以外）

3.本身具备尺寸属性的元素可以设置 img table

4.大部分行内元素都不能设置宽高

3.溢出处理

当内容较大，元素区域较小的时候，就会发生溢出效果

默认都是纵向溢出

overflow：默认值 visible 溢出部分可见

hidden 溢出部分隐藏

scroll 显示滚动条，溢出时滚动条可用

auto 自动，溢出时有滚动条，不溢出没有

overflow-x，设置水平轴的滚动条

overflow-y，设置垂直轴的滚动条

如何改成横向溢出

需要在宽度比较小的容器内部，添加一个宽度较大的元素。

在父容器上，写overflow。就可以横向溢出了

附加知识点---单位

尺寸单位

1.px 像素

2.in 英寸 1in=2.54cm

3.pt 磅值，多用于字体大小 1pt=1/72in

4.cm

5.mm

6.% 相对父级的百分比

7.em 相对于父级元素样式数据乘以的倍数 1.5em

8.rem 相对根元素数据乘以的倍数 boot默认1rem=16px

作业

1.今天所有css的demo

2.继续完成ajax注册功能

验证用户名已存在的接口

注册接口

day09 css

附加知识点：合法颜色值

1.颜色的英文单词

2.#rrggbb 6个16进制的数字 ff 为255

3.#aabbcc简写成#abc #f00 #0f0 #00f #ff0 #f0f #0ff

4.rgb(0~255,0~255,0~255); rgb(100,12,23);

5.rgb(0%,10%,50%); 可以使用，但是项目不用

6.rgba(0~255, 0~255, 0~255,0~1) 1不透明，0全透明

一.尺寸和边框

1.尺寸

2.溢出

3.边框

边框的简写方式

border:width style color；

width边框的宽度，以px为单位的数字

style 边框的样式

solid 实线

dotted 点点虚线

dashed 短线虚线

double 双实线

color 边框的颜色

合法的颜色，transparent透明

边框的简写方式，会同时设置4个方向的边框

边框的单边设置

border-top:10px solid #aaa;

border-right:10px solid transparent;

border-bottom:10px solid transparent;

border-left:10px solid transparent;

边框的单属性设置

使用单属性设置，必须保证边框有style属性

border-style:solid;

border-width:3px;

border-color:#f0f;

单边单属性

border-方向-属性,一共12个

border-top-width

border-top-style

border-top-color

border-right-width

border-right-style

border-right-color

border-bottom-width

border-bottom-style

border-bottom-color

border-left-width

border-left-style

border-left-color

边框的倒角(圆角)

border-radius：圆角的半径

取值：以px为单位的数字

% 50%就是一个圆

单角设置，需要两个方向的边，才能确定一个角

先写上下，再写左右

border-top-left-radius:

border-top-right-radius:

border-bottom-left-radius:

border-bottom-right-radius:

边框的阴影

box-shadow:h-shadow v-shadow blur spread color inset;

h-shadow:水平方向偏移量

v-shadow:垂直方向偏移量

blur：阴影的模糊距离，数值越大，越模糊

spread：阴影的尺寸

color：阴影的颜色

inset:把向外的阴影，变成向内的阴影

练习

中午，完成最酷的日食或者月食(放射性符号)

轮廓边框的边框，绘制与边框周围的线条

outline:width style color;

outline:none/0;去掉轮廓

border:none/0;去掉边框

二.框模型--盒子模型

框模型--元素在页面上实际占地空间的计算方式

浏览器默认的元素实际占地宽度

左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距

浏览器默认的元素实际占地高度

上外边距+上边框+上内边距+内容区域高度+下内边距+下边框+下外边距

外边距margin:边框以外的距离(元素与元素之间的距离)

内边距padding：边框与内容之间的距离

1.外边距margin

改变外边距，元素有位移效果

1.语法

margin：v1; 设置4个方向的外边距

margin-top

margin-right

margin-bottom

margin-left

取值：

1.以px为单位的数字

2.%

3.取负数，margin-left,正值往右，负值往左

margin-top,正值往下，负值往上

4.auto 自动计算块级元素的外边距。

让块级元素在水平居中对齐。

auto对上下外边距无效

auto只对设置了宽度的块级元素有效

2.简写方式

margin:v1;设置4个方向外边距

margin:v1 v2; v1:上下，v2:左右

margin:0 auto; margin:auto;

margin:v1 v2 v3; v1:上 v2:左右 v3:下

margin:v1 v2 v3 v4; 上右下左顺时针

练习：06_ex.html

创建两个div,尺寸都是300px*300px

背影颜色随意

设置两个div之间的间距为50px，第二个div水平居中显示

3.外边距的特殊效果

1.外边距的合并

两个垂直外边距相遇时，他们将合并成一个

值以大的为准

练习07_ex

页面中添加两个div，宽高200px，分别设置背景颜色，

为两个div设置4个方向外边距，观察效果。

页面中添加两个span，内容随意，分别设置背景颜色

为两个span添加4个方向的外边距，观察效果

页面中添加两个文本框，内容随意，分别设置背景颜色

为两个文本框添加4个方向的外边距，观察效果

2.关于块级元素，行内元素，行内块的总结

行内元素的特点：

设置宽高无效，宽高根据内容自动撑开。

上下垂直外边距无效，

可以与其他行内元素或者行内块共用一行

块级元素的特点：

设置宽高有效，如果不设置宽，宽度是父元素的100%。

如果不设置高，高度按照内容自动撑开。

上下外边距有效，独占一行。

行内块的特点 input（除了单选和多选）

设置宽高有效，不设置宽高，自带一个默认的宽高。

上下外边距有效。但是同一行修改一个行内块的垂直外边距，整行都会一起位置改变。可以与其他行内元素和行内块共用一行

3.自带外边距的元素

h1~h6,p,body,ol,ul,dl,pre

由于不同浏览器对默认外边距的解析可能会有差别

所以开发之前，一般会把内外边距清空

*{margin:0;padding:0}

blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,

h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,

ul{margin:0;padding:0}

练习：08_ex.html

两个div,id分别为d1和d2

尺寸200px*200px，分别设置不同背景颜色

在d2中添加一个子元素div#d3

宽高100px*100px；添加不同的背景色

给#d3添加上外边距50px。查看页面效果

4.外边距溢出

在特殊的情况下，为子元素设置上外边距，会作用到父元素

特殊情况：1.父元素没有上边框

2.子元素的内容区域上边与父元素内容区域上边重合

（为第一个子元素设置上外边距时，这种说法不严谨）

解决方案：

1.给父元素添加上边框

弊端，影响父元素实际占地高度

2.给父元素添加上内边距

弊端，影响父元素实际占地高度

3.在父元素的第一个子元素的位置处，

添加一个空的<table></table> nice

2.内边距padding

改变内边距的效果，感觉是改变了元素大小

不会影响其他元素，但是会改变元素自己占地尺寸，感觉上改变了元素本身的大小

1.语法：padding

padding:v1;设置4个方向的内边距

padding-top

padding-right

padding-bottom

padding-left

取值：以px为单位的数字

2.简写方式

padding:v1;设置4个方向

padding:v1 v2; v1:上下，v2：左右。padding没有auto

padding:v1 v2 v3; v1:上，v2：左右，v3：下

padding：v1 v2 v3 v4；上右下左

3.box-sizing属性

设置元素占地尺寸的计算方式

box-sizing

取值：默认值 content-box content是内容的意思

设置的尺寸，只设置内容区域

左外+左边框+左内+内容区域宽度+右内+右边框+右外

border-box border是边框的意思

设置的尺寸，设置的是包含边框在内，边框内部的尺寸

元素实际占地宽度：左外边距+width+右外边距

元素实际占地高度：上外边距+height+下外边距

项目中，写样式的思路

从上往下写，从外往里写，从左往右写

1.尺寸，大体位置

2.边框，背景色

3.文本样式

4.微调

day10 css

一.边距

1.box-sizing

浏览器默认元素框模型

元素的实际占地宽度：左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距

默认box-sizing: content-box; 默认值

content-box

设置的width和height，只是在设置内容区域

border-box

设置的width和height,是边框内部的部分(包含边框)

元素实际占地宽度：左外边距+设置的width+右外边距

二.背景

1.背景颜色

2.背景图片

background-image:url(资源路径)

使用背景图片，可以让元素内部的子元素，堆叠显示在背景图上

而img标签，默认不可以堆叠显示

3.背景图片的平铺

background-repeat:

取值：repeat,默认值，平铺

no-repeat,不平铺，背景图只显示一次

repeat-x 在水平方向平铺

repeat-y 在垂直方向平铺

4.背景图片的定位

background-position:

取值 1.x y 以为单位的数字，定义横向位置和纵向位置

2.x% y% 0% 0% 左上 50% 50% 中间

3.关键字 x:left/center/right

y:top/center/bottom

5.背景图片的尺寸

background-size

取值：1.x y 以px为单位的数字，设置具体宽高

2.x% y%按父元素宽高%比设置

3.cover，填充，覆盖。让背景图充满整个容器，哪怕图片显示不全，也没关系

4.contain，包含。让容器可以包含整张图片，图片是显示完整的。容器有空白区域，没关系。

6.背景图片的固定

background-attachment:

取值：scroll,默认值，背景图会随窗口滚动条滚动

fixed 背景图相对于窗口固定，窗口滚动时，背景图位置不变，但是只会在原容器内显示

7.简写方式

在一个属性中指定背景的多个属性值

属性：background

取值：color url() repeat attachment position;

最精简的写法 backgrond:color/image11:01~11:16休息

二.渐变 gradient

1.什么是渐变

渐变是指多种颜色，平缓变化的一种显示效果

2.渐变的主要因素

色标：一种颜色，及其出现的位置

一个渐变，至少有两个色标

3.渐变分类

1.线性渐变，以直线的方式来填充渐变色

2.径向渐变，以圆形的方式来填充渐变色

3.重复渐变，将线性、径向渐变重复几次实现

4.线性渐变

background-image:linear-gradient(angle,color-point1, color-point2,.........);

angle:表示渐变的方向，角度

取值 1.关键字 to top 从下往上

to right 从左往右

to bottom 从上往下

to left 从右往左

2.角度值 0deg to top 从下往上

45deg

90deg to right从左往右

180deg to bottom 从上往下

270deg to left 从右往左

color-point:色标

取值：颜色+以px为单位的数字

颜色+%

5.径向渐变

background-image:radial-gradient(半径 at 圆心x 圆心y，color-point1,color-point2,.........)

半径:px为单位的数字，色标中写具体值半径无效，只有色标中使用%，半径才有效

圆心x 圆心y：圆心所在的位置

取值1. x y 以px为单位的数字

2.x% y%

3.关键字 x left/center/right

y top/center/bottom

6.重复渐变

重复线性渐变

background-image:

repeating-linear-gradient(

to bottom, #000 0px,#ff0 25px, #000 50px);

重复径向渐变

background-image:repeating-radial-gradient(

50px at center center,#000 0px,#0ff 10px,#000 20px,#ff0 25px,#000 30px,#0ff 40px,#000 50px);

7.浏览器兼容问题(ie8.0以下不考虑)

渐变属性，支持低版本浏览器的编写方法

chrome/safari -webkit-

firefox -moz-

IE -ms-

opera -o-

background:-webkit-linear-gradient(top,color-point1,color-point2,.....);

有前缀的方向，直接使用top/right/bottom/left 从哪里开始

没有前缀，要使用to top/to right/to bottom/to left 向哪个方向

三.文本格式化(重点*****)

1.字体属性

1.指定字号大小

font-size

取值，px/pt为单位的数字

rem/em

2.设置字体的类型

font-family

取值：pc中字体库里有的字体，如果有空格，用""

用逗号隔开多个字体类型

font-family:黑体,"mv boli","chiller"；

3.字体加粗

font-weight:

取值，关键字 bold normal lighter bolder

无单位数字，100的整倍数，不能超过1000

4.字体样式

font-style:

取值，italic 斜体

normal 正常

5.小型大写字母

font-variant:small-caps;

6.字体属性简写方式

font:style variant weight size famliy;

最精简的写法font:size family;

day11 css

一.文本格式化（****）

1.字体属性

2.文本属性

1.字体颜色

color:

取值：合法的颜色值

2.文本对齐方式

text-align

设置文本在水平方向的对齐方式(内部对行内，行内块，文本有效，对内部的块级元素无效)

取值：left/center/right/justify 两端对齐

3.行高

定义一行数据的高度

特性：如果行高的高度大于字体本身的大小时

那么该行文本将在指定的行高内，呈垂直居中的方式显示

取值：1.以px为单位的数字，一般，行高的值与容器的高度值相同。

2.无单位的数字(整数和小数都可以)，行高为字号大小的倍数

文字有多行，不建议使用行高，文字会溢出

4.文本线条修饰

text-decoration:

取值：overline 上划线

underline 下划线

line-through 删除线

none 去除所有线条修饰（a标签去掉下划线）

5.首行缩进

text-indent:

取值，以px为单位的数字

6.文本阴影

text-shadow:h-shadow v-shadow blur color;

h-shadow:水平方向偏移量

v-shadow：垂直方向偏移量

blur：模糊度

color：阴影的颜色

练习：

01_ex

定义div，内容随意，有中文

1.设置字体系列，2.设置文字大小

3.加粗并斜体，4所有小写字母转为小型大写字母

5.两端对齐，6文本有下划线，7.首行缩进30px

8.文本垂直居中显示

二.表格

1.表格的常用属性

1.table的样式之前学习的属性，基本都可以用

尺寸，边框，背景，字体，文本，内外边距

table设置边框，只设置最外面的大边框

2.td/th的样式

尺寸，边框，背景，字体，文本，内边距

外边距无效

vertical-align：指定单元格数据的垂直对齐方式

取值：top/middle/bottom

练习

02_ex 创建4*4的表格，宽高400px。内容随意

1.设置每个单元格尺寸为100*100px；

2.设置表格和单元格的边框为1px solid #000

3.尝试给每个td设置上外边距20px

table特殊的表现方式

table是一种特殊的表现方式

实际尺寸是根据内容数据多少决定的

单元格小，内容多，那么自动撑开

内容少，单元格就按尺寸展示

table在浏览器的渲染方式：

3.表格的特有属性

1.边框合并

border-collapse:

取值：separate 默认值，边框分离模式

collapse 边框合并

2.边框边距

border-spacing:

取值：1.只有一个值，同时设置水平和垂直边框边距

2.两个值，第一个设置水平，第二个设置垂直

注意：如果边框是合并状态，此属性无效

必须保证border-collapse:separate

3.标题位置

caption-side

取值：top bottom

4.设置表格显示规则

用来帮助浏览器如果布局一张表格

table-layout

取值：1.auto 默认值，自动布局表格

列的尺寸实际上由内容决定，内容比尺寸大，按内容显示，内容比尺寸小，按尺寸显示

2.fixed 固定表格布局，列的尺寸以设置的为准

自动布局和固定布局的对比

自动布局	固定布局
单元格的大小会自动适应内容	单元格大小取决于设置的值
表格复杂时，加载速度较慢	任何情况下，都会加速加载表格（优点）
自动布局比较灵活（优点）	固定表格布局不够灵活
适用于不确定每列大小的，并且不复杂的表格	适用于确定每列的尺寸的表格

三.定位（**********************）

1.什么是定位

改变元素在页面中的位置

2.分类

1.普通流定位

2.浮动定位

3.相对定位

4.绝对定位

5.固定定位

3.普通流定位（默认文档流）

1.每个元素在页面上都有自己的空间

2.每个元素都是从父元素的左上角开始显示

3.块级元素按照从上到下的方式逐个排列，每个元素单独成行

4.行内元素是多个元素在一行中显示，从左往右逐个排列

4.浮动定位(重点***********)

让块级元素横向显示

float：

取值：1.left左浮动，让元素浮动后停靠父元素的左边，或者挨着左侧已浮动元素

2.right右浮动，让元素浮动后停靠父元素的右边，或者挨着右侧已浮动元素

3.none 默认值，无任何浮动

浮动的特点

1.元素一旦浮动，脱离文档流(不占页面空间，后面未浮动元素上前补位)

2.浮动元素会停靠在父元素的左边/右边，或者其它已浮动元素的边缘

3.父元素横向显示不下所有浮动元素时，最后显示不下的部分会自动换行

4.浮动解决多个块级元素在同一行显示的问题

5.浮动引发的特殊情况

1.浮动元素占位的问题

当父元素显示不下所有浮动元素时，最后的元素会换行

但是，已浮动元素会根据自己的浮动方向占据位置。导致被挤下去的浮动元素，需要在更下方显示

2.元素一旦浮动，如果元素未定义宽度，那么元素的宽度将以内容为准

3.元素一旦浮动，都会变为块级元素

允许设置尺寸，可以设置垂直外边距

4.文本，行内元素，行内块，是不会被浮动元素压在下面的

而是，巧妙的避开，环绕着浮动元素显示

6.清除浮动

元素一旦浮动，会对后续元素带来影响，后续元素会上前补位

如果后续元素不想上前补位，那么可以给后续元素设置清除浮动

clear:

取值：left 清除左浮动的影响

right 清除右浮动的影响

none 不清除

both 清除左和右浮动的影响

7.高度坍塌

块级元素的高度，如果不设置，默认高度是靠内容撑起来的

块级元素内部，所有元素如果都浮动，块级元素认为自己内部没有元素，所有撑不起来。发生了高度坍塌

解决方案：

1.为父元素设置高度，弊端：不是每次都知道高是多少

2.为父元素设置浮动

day12 css

一.显示方式

决定元素在网页中的表现形式

块级，行内，行内块，table

1.语法

display:

取值：1.block 让元素的表现和块级元素一致

2.none 不显示元素，隐藏

3.inline 让元素的表现和行内一致

4.inline-block 让元素的表现和行内块一致

5.table 让元素的表现和table一致

块级元素：独占一行，可以设置尺寸，上下外边距生效

行内元素：共用一行，设置尺寸无效，上下外边距无效

行内块：共用一行，设置尺寸有效，上下外边距有效

table：独占一行，允许设置尺寸，尺寸以内容为准

二.显示效果

visibility

取值：1.visible 默认值，可见的

2.hidden 隐藏，不可见

Q：display: none和visibility:hidden的区别

display: none，隐藏，元素脱离文档流，本身不占据页面空间，后面元素会上来补位

visibility:hidden，隐藏，元素不脱离文档流，在页面不可见，但是占据位置

三.透明度

opacity

取值 0~1 值越小越透明

Q: opacity和rgba的区别

rgba只会改变当前的透明度

opacity，元素内部只要跟元素相关的颜色都会跟着改变透明

四.垂直对齐方式

vertical-align：

使用场合：

1.表格中 table/td

取值：top/middle/bottom

2.图片与文字的排版 img

控制图片与两边文字的垂直对齐方式

取值：取值：top/middle/bottom/baseline(基线，默认值)

通常会将所有的图片垂直对齐方式，更改为非基线以外的方式

五.光标的设置

cursor:

取值：1.default 箭头

2.pointer 小手

3.crosshair +

4.text

5.wait 等待

6.help 帮助

六.列表的样式

1.列表项标识

list-style-type:

取值 1.none

2.disc

3.circle

4.square

2.列表项图像

list-style-image:url(路径);

3.列表项的位置

设置列表项在li的外部还内部

list-style-position:inside/outside（默认值）;

4.简写方式

list-style:type image position;

最常用的写法 list-style:none;去掉列表项

练习，ul>li

七.定位---相对、绝对、固定定位

position:

取值：static 默认，静态（默认文档流定位）

relative 相对定位

absolute 绝对定位

fixed 固定定位

当一个元素被position修饰，并且取值为

relative/absolute/fixed其中一种时，

那么这个元素被称为已定位元素

定位要配合偏移属性使用

当一个元素有position属性，并取值为relative/absolute/fixed

那么这个元素就解锁4个偏移属性，元素距离(方向)有多少px

top: +往下 -往上

right: +往左 -往右

bottom: +往上 -往下

left:+往右 -往左

1.相对定位

相对谁定位，相对自己原来位置偏移某个距离

position:relative;配合4个偏移属性使用

特点：1.不脱离文档流

2.相对定位，如果不写偏移量，效果与没写定位是一样的。不影响任何布局(为了绝对定位做准备)

使用场合：

1.自身元素位置的微调

2.作为绝对定位子元素的已定位祖先级元素

2.绝对定位

position:absolute；配合偏移属性应用

特点：1.绝对定位的元素会相对于，离自己"最近的""已定位的""祖先元素"，去实现位置的初始化

如果没有已定位的祖先元素，相对于body去实现位置的初始化

2.绝对定位，是脱离文档流的，不占据页面空间，后面元素会上前补位。

3.绝对定位的元素，会变成块级元素

3.固定定位

position:fixed；配合偏移量使用

将元素固定在页面上的某个位置，不会随着滚动条发生位置变化，一致固定在可视区域

特点：脱离文档流，位置相对于body初始化

元素不占页面空间

后续元素上前补位

元素变为块级

4.堆叠顺序

1.定位的脱离文档流和浮动的脱离文档流不是一个体系

2.默认，后定位的元素，堆叠顺序高

3.设置堆叠顺序

z-index:无单位数字

4.堆叠顺序对父子级无效，儿子永远在父亲的上面

5.只有已定位元素，有堆叠顺序

八.CSS3 CORE

1.复杂选择器

1.兄弟选择器

兄弟元素:具备相同父级元素的平级元素之间称为兄弟元素

兄弟选择器，只能往后找，不能往前找

相邻兄弟选择器

获取紧紧挨在某元素后面的兄弟元素

选择器1+选择器2{}

通用兄弟选择器

获取元素后所有满足条件的兄弟元素

选择器1~选择器2{}

2.属性选择器

id class name type value style title

允许通过元素所附带的属性及其值来匹配页面元素，很精准

1.[attr] attr表示任意属性

作用：匹配页面中所有带attr属性的元素 [id]{} [class]{}

2.elem[attr]

作用：匹配页面中所有带有attr属性的elem元素 div[id]{}

3.elem[attr1][attr2]...

作用：匹配页面中所有带有attr1和attr2属性的元素

p[title][id]{}

4.[attr=value]

作用：匹配页面中所有带有attr属性并且值为value的元素

5.模糊属性值

[attr^=value] 匹配属性值以value开头的元素

[attr$=value] 匹配属性值以value结尾的元素

[attr*=value] 匹配属性值中，有value的元素

[attr~=value] 匹配属性值中，有value这个独立单词的元素

3.伪类选择器

已经学过的伪类

:link :visited :hover :active :focus

1.目标伪类

让被激活锚点，应用样式

选择器:target{}

2.结构伪类

1.:first-child

匹配的元素是属于其父元素的第一个子元素

2.:last-child

匹配的元素是属于其父元素的最后一个子元素

3. :nth-child(n)

匹配的元素是属于其父元素的第n个子元素，n从1开始

练习：11_ex

创建4*4的表格 400px*400px

通过结构伪类选择器设置如下样式

第一行背景色为#0ff

最后一行背景色为#ff0

第三行第二列背景色为#f00

4.:empty

匹配没有子元素的元素

day13 css

一.复杂选择器

1.:empty

匹配内部没有任何元素的标签

注意：内部不许有空格，文字，元素

2.:only-child

匹配属于其父元素的唯一子元素

<p>

</p>

a:only-child{

background:#ff0;

}

3.否定伪类

:not(selector)

将满足selector条件的元素排除在外

4.伪元素选择器

1. :first-letter或::first-letter

匹配元素的首字符

2. :first-line或: :first-line

匹配元素的首行

首字符和首行发生冲突时，使用首字符样式

3. ::selection 必须是两个：

匹配用户选取内容的样式

注意：只能修改文本颜色，背景颜色

4.伪元素选择器，内容生成

使用 css命令，添加的html元素，称之为伪元素

::before或者:before

匹配到某元素的内容区域之前的部分

添加一个假的元素，元素内容使用content属性

元素的显示方式使用display控制

注意：content中只能添加文本或者url(图片)

::after或者: after

匹配到某元素的内容区域之后的部分

伪元素添加内容，可以解决的问题

1.外边距溢出，解决方案，在父元素的第一个子元素位置处添加空<table></table>

#parent::before{

content:"";

/*这里的table不是指table标签*/

/*指的table这种显示方式*/

display:table;

}

2.解决高度坍塌，在父元素中追加一个空的块级元素，并给这个元素设置clear:both;

#parent:after{

content:"";

display:block;

clear:both;

}

二.弹性布局（重点*************）

1.什么是弹性布局

弹性布局，是一种布局方式

主要解决某个元素中子元素的布局方式

为布局提供了很大的灵活性

2.弹性布局的相关概念

1.容器

要发生弹性布局的子元素，的父元素称为容器

就是设置display:flex那个元素

2.项目

要做弹性布局的子元素们，称之为项目

就是设置了display:flex那个元素的，子元素们

3.主轴

项目们排列方向的一条轴，称之为主轴

如果项目们是按照横向排列，那x轴就是主轴

如果项目们是按照纵向排列，那么y轴就是主轴

项目们排列顺序，主轴的起点和终点

4.交叉轴

与主轴垂直相交一条轴，叫做交叉轴

项目们在交叉轴上的对齐方式，是交叉轴的起点和终点

3.语法

将元素设置成弹性容器之后，他所有的子元素将变为弹性项目

都允许按照弹性布局的方式排列

属性：display:

取值：1.flex 将块级元素设置为容器

2.inline-flex 将行内元素变为容器

特点

1.元素设置为flex容器之后，

项目的float/clear/vertical-align/text-align属性失效

2.项目可以修改尺寸

4.容器的属性

1.主轴的方向

flex-direction:

取值：row，默认值，主轴是x轴，主轴起点是左端

row-reverse, 主轴是x轴，主轴起点是右端

column，主轴是y轴，主轴起点在顶部

column-reverse,主轴是y轴，主轴起点在底部

2.设置项目换行

flex-wrap:

取值：1.nowrap 默认值，空间不够时，也不换行，项目自动缩小

2.wrap 空间不够就换行

3. wrap-reverse 换行，并反转

3.上面两个属性的缩写

flex-direction和flex-wrap的缩写

flex-flow:

取值： direction wrap；

4.定义项目在主轴上的对齐方式

justify-content:

取值：1.flex-start,默认值，以主轴起点对齐

2.flex-end，以主轴终点对齐

3.center 在主轴上居中对齐

4. space-between两端对齐，两端无空白

5.space-around 每个间距大小相同

5.项目在交叉轴对齐

align-items:

取值 1.flex-start 交叉轴起点对齐

2.flex-end 交叉轴终点对齐

3.center; 交叉轴居中对齐

4.baseline 交叉轴基线对齐，就是交叉轴起点

5.stretch 前提，项目不写高。占满交叉轴上所有的空间

5.项目的属性

只能设置在某一个项目上，不影响其他项目和容器的效果

1.order

定义项目排列顺序，值越小，越靠近起点，默认值为0

取值：无单位的整数

2.flex-grow

定义项目的放大比例

如果容器有足够大的剩余空间，项目将按比例放大

取值：无单位整数，默认值0，不放大

3.flex-shrink

定义项目缩小的比例，容器空间不足时，项目该如何缩小

取值：无单位整数，默认值为1。

取值为0，不缩小。取值越大，缩小越快。

4.align-self

定义当前项目在交叉轴上的对齐方式

取值 1.flex-start 交叉轴起点对齐

2.flex-end 交叉轴终点对齐

3.center; 交叉轴居中对齐

4.baseline 交叉轴基线对齐，就是交叉轴起点

5.stretch 前提，项目不写高。占满交叉轴上所有的空间

6.auto 使用容器定义的align-items的值

三.CSS hack

由于不同的浏览器对css的解析认知不同，会导致同一份css在不同浏览器生成的页面效果不同

这种情况，我们开发人员要针对不同的浏览器写不同的css

让我们样式可以兼容不同的浏览器，正确显示效果

针对不同的浏览器写不同的css的过程，就叫做css hack

有些公司，还需要使用css hack

tmooc上有拓展视频

四.转换（重点*************）

1.什么是转换

改变元素在页面中的位置，大小，角度，以及形状

2D转换，只在X轴和Y轴上发生转换效果

3D转换，增加了Z轴的转换效果

2.转换属性

属性:transform

取值：1.none 默认值，无任何转换效果

2.transform-function

表示1个或者多个转换函数。

如果是多个转换函数，中间用空格分开

3.转换原点

transform-origin:

取值：以px为单位数字

关键字x(left/center/right) y(top/center/bottom)

取值的个数

2个值，表示原点在x轴和y轴上的位置

3个值，表示原点在x轴，y轴和z轴上的位置

默认值：原点在元素的中心位置(center center)

总结：学习转换，就是学习transform：后面的转换函数

4.2D转换

1.位移(改变元素的位置)

转换函数：translate()

取值：1. translate(x)指定元素在x轴上的位移距离

+ 元素往右 - 元素往左

2. translate(x，y)指定元素在x轴和y轴上的位移距离

x：+ 元素往右 - 元素往左

y: + 元素往下 - 元素往上

3. translateX (x); 指定元素在x轴上的位移距离

4. translateY (y);指定元素在y轴上的位移距离

day14

一.转换

1.2D转换

1.位移 translate()，改变元素的位置

2.缩放，改变元素的大小

scale(value)

取值：1.取一个值

value>1 x轴和y轴都放大

0<value<1 x轴和y轴都缩小

-1<value<0 x轴和y轴都翻转180度，并缩小

value<-1 x轴和y轴都翻转180度,并放大

2.取两个值

scale(x,y) x设置x轴的比例，y设置y轴的比例

3. scaleX (x) 单独设置x轴

4. scaleY (y) 单独设置y轴

3.旋转，改变元素的角度

rotate(ndeg)

n:+ 顺时针 - 逆时针

坑：d1 先旋转45deg 再位移200px

d2 先位移200px 再旋转45deg

不要写在hover中

注意：

1.旋转原点会影响旋转效果

2.旋转是连同坐标轴一起旋转的，会影响旋转之后的位移方向

4.倾斜

1.skew(x)等同于skewX(x)

让元素向着x轴发生倾斜，实际上改变的是y轴的角度

x取正值 y轴逆时针

x取负值 y轴顺时针

2.skewY(y)

让元素向着y轴发生倾斜，实际上改变的是x轴的角度

y取正值 x轴顺时针

y取负值 x轴逆时针

3.skew(x,y)

练习：

02_ex 创建div 200px*200px 背景随意，鼠标悬停时，该元素向右偏移200px 向下偏移200px 旋蒸135deg .向x轴倾斜45deg。同时放大1.5倍

2.3D转换

3D转换是模拟的

1.透视距离

模拟人的眼睛到3D转换的元素之间的距离，距离不同，看到的效果不同

perspective:距离此属性要加载3D转换元素的父元素上

2.3d旋转

属性transform:

取值

1.rotateX(xdeg)

以x轴为中心轴，旋转元素的角度（老式爆米花机，烤羊腿）

2. rotateY(ydeg)

以y轴为中心轴，旋转元素的角度(旋转木马，旋转门)

3. rotateZ(zdeg)

以z轴为中心轴，旋转元素的角度(电风扇，摩天轮)

4. rotate3D(x,y,z,ndeg);

x，y，z取值为0，代表不参与旋转

取值>0 表示该轴参与旋转

二.过渡（重点******）过渡是动画的前身

1.什么是过渡

让css的值，在一段时间内平缓变化的效果

2.语法

1.指定过渡属性

transition-property

取值：直接写css属性值，多个属性值之间有空格分开

all 所有支持过渡的属性，都参与此次过渡效果

支持过渡的属性

1.颜色属性

2.大多数取值为具体数字的属性

3.阴影

4.转换

5.visibility

2.指定过渡时长

transition-duration

指定多长时间完成此次过渡操作

取值 s/ms为单位的数字 1s=1000ms

3.过渡的时间曲线函数

transition-timing-function

取值

ease，默认值，慢速开始，中间变快，慢速结束

linear 匀速

ease-in 慢慢开始，加速结束

ease-out 快速开始，慢速结束

ease-in-out 慢速开始，慢速结束，中间先加速再减速

4.过渡的延迟时间

transition-delay:

取值 s/ms为单位的数字

5.过渡代码编写的位置

写在原来的选择器中，过渡效果有去有回

写在hover中，过渡效果有去无回

6.过渡的简写形式

transition：property duration timing-function delay;

最简方式 transition:duration;

练习

翻滚吧，亮宝宝 & 爱的魔力转圈圈

03_ex 一个div,向右移动800px并且旋转1080deg

三.动画

1.什么是动画

使元素从一种样式逐渐变为另一种样式

其实就是将多个过渡效果放到一起

2.使用关键帧，来控制动画的每一个状态

关键帧

1.动画执行的时间点

2.在这个时间点上的样式

3.动画的使用步骤

1.使用关键帧声明动画

@keyframes 动画名称{

0%{动画开始时的样式}

....

100%{动画结束时的样式}

}

2.调用动画

/*1.选中你要使用的动画名称*/

animation-name:change;

/*2.设置动画的执行时间*/

animation-duration:10s;

/*3.设置动画的时间曲线函数*/

animation-timing-function

/*4.设置动画的延迟时间*/

animation-delay

3.动画的其他属性

animation-iteration-count

指定动画的播放次数

取值：1.具体次数，数字

2.infinite 无限次播放

animation-direction

指定关键帧的播放顺序

取值：1.normal 默认值，0%~100%

2.reverse 100%~0%

3.alternate 轮流播放

奇数次正着播放，偶数次反着播放

动画的简写方式

animation:name duration timing-function delay count direction;

最简写方式 animation:name duration;

设置动画在播放前和播放后的显示状态

动画在延时的时间内，和播放完成之后的时间，是不显示的

animation-fill-mode:

取值1.backwards;动画播放之前的延迟时间内，动画保持在第一帧上

2. forwards；动画播放完成，将保持在最后一帧的状态

3.both 是backwards和forwards的结合体

4.none.默认值，不填充

指定动画是处于播放还是暂停的状态上

animation-play-state:

取值。1.paused 暂停

2.running 播放

4.动画的兼容性

如果要兼容低版本浏览，需要在动画声明的时候加前缀

@keyframes 动画名称{}

@-webkit-keyframes 动画名称{}

@-ms-keyframes 动画名称{}

@-o-keyframes 动画名称{}

@-moz-keyframes 动画名称{}

三.CSS优化

css优化目的

1.减少服务器端压力

2.提升用户体验

1.CSS优化的原则

尽量的减少http的请求个数

页面的顶部，引入css文件

将css和js文件放到外部的独立文件中

2.CSS代码优化

合并样式(能写群组,就不单写,能用简写方式,就不单独定义属性）

缩小样式文件的大小(能重用就重用)

减少样式重写

避免出现空的href和src

选择更优的样式属性值

代码压缩

四.Bootstrap

1.响应式布局（css3 2010）

1.什么是响应式网页

Responsive web page 响应式/自适应网页

可以根据浏览设备不同(pc,pad,phone)

而自动改变布局，图片，文字效果，不会影响用户浏览体验

2.响应式网页必须做下面几件事

1.布局，不能固定元素宽度，必须是流式布局(默认文档流+浮动)

2.文字和图片大小随着容器的大小改变

3.媒体查询技术

响应式网页存在的问题：代码复杂程度几何性的增加

复杂网页，不适合使用响应式

3.如何测试响应式网页

1.使用真实设备

好处：真实可靠

缺点：成本高，测试任务巨大

2.使用第三方模拟软件测试

好处：不需要太多真实设备，测试方便

坏处：测试效果有限，有待进一步验证

3.使用chrome等浏览器自带的模拟软件

好处：简单方便

坏处：测试效果有限，需要进一步验证

4.编写响应式布局(重点********)

1.手机适配，在meta中声明viewport元标签

在content,编写参数

width=device-width, 设置视口宽度为设备宽度

initial-scale=1.0, 设置视口的宽度能否缩放 1.0不能缩放

maximum-scale=1.0, 允许缩放的最大倍率

user-scalable=0 是否允许用户手动缩放 0 不能

最简洁的写法

2.所有的内容/文字/图片都使用相对尺寸，不使用绝对值

3.流式布局+弹性布局+媒体查询完成响应式布局

4.媒体查询，CSS3 Media Query，做响应式必备技术

Media:媒体，浏览网页的设备

screen(pc/pad/phone)

TV/print

Media Query:可以自动根据当前浏览设备的不同(尺寸，方向，解析额度)，有选择性，执行一部分css样式，忽略掉其他样式

语法总结

@media screen and (min-width:768px) and (max-width:991px){

.content{

background:#000;

color:#fff;

}

作业：

1.使用动画完成时钟效果

2.使用媒体查询完成下面图示

BOOT

day15 bootstrap

https://daneden.github.io/animate.css/

定义好的动画，在项目中直接使用

一.BootStrap

boot给我们封装好很多常用的样式，我们只需要调用类名

但是在项目中，对于很多样式，我们还是需要手写样式和媒体查询

BootStrap内容分为5部分

1.如何使用boot

2.全局css

3.组件

4.js插件

5.定制 sass

6.boot项目

1.如何使用boot

<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../js/jquery.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.min.js"></script>

2.全局CSS样式

container

定宽容器，每种不同分辨率下，给了写死的max-width值

boot支持4种分辨率

xl-lg-md-sm

boot的默认字号大小是16px，1rem=16px

container-fluid

变宽容器，根据不同的设备分辨率，宽度为他的100%

1.按钮相关的class

.btn 基本类。所有的按钮都需要添加class.btn

按钮颜色

btn-success 绿色

btn-danger 红色
btn-warning 黄色

btn-primary 主要的 蓝色
btn-secondary 次要 灰色
btn-info 信息 青色
btn-dark 深色
btn-light 浅色

不同边框的按钮

btn-outline-danger

....

按钮的大小

btn-sm 小按钮

btn-lg 大按钮

btn-block 块级按钮

btn-link 链接

2.图片相关

rounded 圆角

rounded-circle 50%圆角--圆形图片

img-thumbnail 缩略图，有一圈白色边(padding)

img-fluid 响应式图片，图片会缩放，但不会超过原始大小

3.文字相关

text-danger/warning/success/info.... 字体颜色

text-uppercase/lowercase/capitalize大小写，首字母大写

font-weight-bold/light/normal 字体加粗，细，正常

.h1~.h6 不同字体

text-left/right/center/justify 文字水平对齐方式

4.列表相关的class

list-unstyled去掉点，左内边距清0

ul.list-group>li.list-group-item 创建列表组和列表项

列表项颜色 list-group-item-danger/warning/info......

激活项 active

禁用项 disabled

5.table相关的样式

.table 对table本身和table的后代布局

.table-bordered 一个有边框的表格.为自己和后代添加边框

table-danger/warning/success/info 表格颜色

table-striped 隔行变色

table-hover 带鼠标悬停效果的表格

table-responsive-xl/lg/md/sm 响应式表格写在table的父元素上

3.辅助类

1.边框

border/border-0 基本类

border-danger/warning...边框颜色

border-left/top/right/bottom 单边设置

border-left-0 单边框清0

2.浮动

float-xl/lg/md/sm-left/right/none 响应式浮动

清除浮动 clearfix 写在父元素

3.显示

visible/invisible 显示/隐藏

4.背景颜色

bg-danger/warning/success.....

5.圆角

rounded/rounded-0 圆角0.25rem/去掉圆角

rounded-top/right/bottom/left

6.内外边距

m-auto 水平居中

m/mt/mr/mb/ml/mx/my-*-0/1/2/3/4/5 外边距

0 0.25 0.5 1 1.5 3

p/pt/pr/pb/pl/px/py-*-0/1/2/3/4/5 内边距

*:xl/lg/md/sm

mt-lg-3 mt-sm-1

7.尺寸

w-n(n:25/50/75/100)

h-n

4.栅格布局（重点********************************）

1.web页面的布局方式一般三种

table布局	div+css	Boot中的栅格布局
简单，易控制	语义正确，渲染效率高	简单，易控制，语义正确，渲染效率高，支持响应式
语义错误，渲染效率低	控制起来很麻烦	非常复杂的页面不适用

2.栅格使用

1.必须要放在.container或者.container-fluid中

2.每一行都是一个row(弹性，主轴是x，可以换行，左右-15px外边距)

3.在row中声明col占几份

3.响应式栅格

针对不同屏幕需要使用不同的列

一行4列，大屏幕一行四个div 1:1:1:1，中屏幕一行两个div1:1

小屏幕，一行一个div

day16 bootstrap

一.栅格布局

.container--->row--->col

row的直接子元素只能是col

一个row分为12份，使用col-n来控制子元素占地几份

</div>

使用.col类，不添加数字时，自动处理布局

每一个col平均分配空间，col个数可以超过12个

注意：，不同屏幕有向上兼容的问题

col-xl-* 只能在xl屏幕有效

col-lg-* 在xl/lg 有效

col-md-*在xl/lg/md 有效

col-sm-*在xl/lg/md/sm 有效

列偏移

可以通过列偏移指定该列及后面的列向右移动

offset-*-n *: xl/lg/md/sm

栅格嵌套

在col中重新写一个div.row

二.弹性布局

d-block/inline/inline-block/none display所有值

d-*- block/inline/inline-block/none display的响应式

*：xl/lg/md/sm

使用弹性布局，要在父元素上写class d-flex

d-flex/d-inline-flex创建一个弹性容器

1.主轴方向

flex-row/column/row-reverse/column-reverse

响应式设置

flex-*-row/column/row-reverse/column-reverse

*:xl/lg/md/sm

2.项目在主轴上的排列方式

justify-content-start/center/end/between/around

响应式设置

justify-content-*-start/center/end/between/around

boot对弹性布局，做了响应式封装

让开发者非常灵活的做响应式布局

三.表单

1.表单元素的排列方向

form-group 堆叠表单，垂直方向

form-inline 内联表单，水平方向(弹性布局)

2.表单元素的样式class

form-control 是input元素的基本类

块级，w100,字体，背景，边框，过渡

col-form-label 设置输入文本与边框的距离

col-form-label-sm 距离较小

col-form-label-lg 距离较大

对于checkbox的样式

父级.form-check 相对定位，让子元素以父级定位

<input checkbox>的class form-check-input

绝对定位，要和. form-check配合使用

.form-text 块级，有上外边距

四.组件

网页中一些复杂的特殊效果，之前必须使用js、dom、jq

现在boot为我们封装好了很多组件，我们可以直接使用

方便，快捷。但是如果需要个性化的处理，比较繁琐

boot中，大量使用元素的自定义属性，来调用方法

1.下拉菜单

基本结构

<button class="dropdown-toggle"

data-toggle="dropdown"></button>

</div>

.dropdown-toggle 画三角

.dropdown-menu 隐藏

data-toggle="dropdown"自定义属性两个作用

1.当button被点击时，激活事件

2.激活的事件，是以dropdown的方式运行

2.按钮组

外层div中class如下几个值

.btn-group 横向按钮组

.btn-group-vertical 纵向按钮组

可以添加 btn-group-sm/lg调整按钮组大小

3.信息提示框

外层div的class

alert 基本类

alert-danger/warning......提示框颜色

alert-dismissible 为了修饰内部.close

内层 span，取消信息提示框的小叉叉

.close,与父元素的. alert-dismissible配合使用

自定义属性 data-dismiss="alert"

4.导航

1.水平导航

ul.nav .nav定义了弹性，那么对于ul所有的弹性设置都生效，同时设置.nav-justified 作为.nav-item的父级条件

li.nav-item 与父级的.nav-justified配合，让元素等宽显示

a.nav-link 块级，设置了hover等样式

2.选项卡导航

上部分，选项卡导航栏

ul.nav 变成选项卡使用.nav-tabs

li.item

a.link data-toggle="tab" 使用href属性指向下面内容的id。

默认显示：在默认显示的a中添加.active

下部分，选项卡内容

div.tab-content 这个类让子元素隐藏或者显示

子元素div.tab-pane .tab-pane配合父元素的.tab-content让子元素display:none

子元素div要添加id，被上面a的href引用，与每个a标签对应

默认显示：在默认显示的div中添加.active

3.胶囊导航

ul.nav.nav-pills

li.nav-item

a.nav-link data-toggle="pill" href="#内容id"

内容

div.tab-content>div.tab-pane

5.导航栏

最外层div.navbar . navbar-expand-lg/md/sm/xl

作为子元素ul.navbar-nav的后代选择器路径，

构成响应式导航栏

内层ul.navbar-nav 弹性，默认主轴column

如何改变主轴方向，配合父级navbar-expand-lg/md/sm/xl

在屏幕宽度足够的时候，横向显示项目，

在屏幕宽度不够的时候，纵向显示，构成响应式导航栏

li.nav-item

a.nav-link

day17 bootstrap

一.组件

1.导航栏

<div class="navbar navbar-expand-lg bg-dark">
    <ul class="navbar-nav">
        <li class="nav-item ">
            <a class="nav-link" href="#">Tab1</a>
        </li>
    </ul>
</div>

div.navbar-expand-* 配合 ul.navbar-nav

在不同屏幕下，让导航横向或者纵向显示

2.折叠效果

折叠</button>

总结：a标签和button标签都可以绑定，指向元素

a使用的是href="#id"

button使用的是data-target="#id"

3.卡片

<div class="card">
<div class="card-header">

4.手风琴：卡片+折叠

<div id="parent">
    <div class="card">
        <div class="card-header">
            <a class="card-link" data-toggle="collapse" href="#one">卡片1</a>
        </div>
        <div data-parent="#parent" id="one" class=" collapse">
            <div class="card-body">
                Lorem1
            </div>
        </div>
    </div>
</div>

注意事项：

1..collapse不能和.card-body在同一个标签上，

不然会发生隐藏/显示的卡顿

解决方案div.collapse>div.card-body

2.几个折叠部分，可以同时打开，而不能开启一个，其它的都关闭

解决方案，在最外层div上写id="parent"

在所有div.collapse中添加事件的绑定data-parent="#parent"

这样就可以保证在最外层div中，只有一个折叠区域可以打开了

5.折叠导航栏

<div class="navbar navbar-expand-sm bg-dark navbar-dark">
  
  <a href="" class="navbar-brand">Bootstrap中文网</a>

  <button data-toggle="collapse" data-target="#content" class="navbar-toggler">
    <span class="navbar-toggler-icon"></span>
  </button>


<div id="content" class="collapse navbar-collapse">
  <ul class="navbar-nav">
     <li class="nav-item">
       <a href="" class="nav-link">Boot3</a>
     </li>
     <li class="nav-item">
       <a href="" class="nav-link">Boot4</a>
     </li>
     <li class="nav-item">
        <a href="" class="nav-link">less教程</a>
     </li>
     <li class="nav-item">
        <a href="" class="nav-link">Jquery教程</a>
     </li>
     <li class="nav-item">
        <a href="" class="nav-link">网站实例</a>
     </li>
   </ul>
</div>
</div>

1.折叠div的要写div.navbar-collapse

原因：这个div本身有.collapse,作用是隐藏

.navbar-collapse配合父级的navbar-expand-sm

让当前div的display为flex,不再是none，

此div就显示

2.不隐藏的a标签，要写a.navbar-brand

字体变大，上下内边距，右外边距

3.按钮的样式使用button.navbar-toggler。这是boot专门为折叠导航提供的按钮样式，此样式与navbar-expand-sm配合，实现小屏以下按钮显示，小屏以上按钮隐藏

4.最外层div.navbar-dark/light.这个类对当前div没有任何样式的操作.他存在的意义，把内部的按钮和文字，设置成背景的反色。

由于他本身不对当前div有样式修改，所有当前div需要添加对应的背景色bg-dark/light

6.媒体对象

Boot提供了很多类，来处理媒体相关的对象(图片，影音)

<div class="media border p-3">
    <img style="width: 8rem;" class="mr-3 rounded" src="../image/chengliang.jpg"/>
    <div class="media-body">
        <h4>闪闪亮亮</h4>
        <p>180天团淘汰者</p>
    </div>
</div>

7.焦点轮播图(轮播时间需要去修改js的代码)

1.最外层大包裹和轮播图片

<div class="carousel" data-ride="carousel">
    
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="../image/banner1.png"/>
        </div>
        <div class="carousel-item">
            <img src="../image/banner2.png"/>
        </div>
        <div class="carousel-item">
            <img src="../image/banner3.png"/>
        </div>
        <div class="carousel-item">
            <img src="../image/banner4.png"/>
        </div>
    </div>
    
    
</div>

结构

div.carousel 相对定位

>div.carousel-inner w100 溢出隐藏

>div.carousel-item display：none

>img

事件：给最外层div div.carousel添加自定义属性data-ride="carousel"

然后给某一个 div.carousel-item添加类 .active

这样轮播图片就开始运动了

2.录播指示符


<ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
    <li data-target="#demo" data-slide-to="3"></li>
</ul>

结构

ul.carousel-indicators>li

对ul的样式，定位，弹性

.carousel-indicators对后代li的样式

li的宽高，li背景，li的位置

我们可以按照自己的需求，重写这部分样式

.carousel-indicators li{
    width:15px;height:15px;
    background-color:#fff;
    margin-left:6px;
    margin-right:6px;
    border-radius: 50%;
}

此外，.carousel-indicators .active 让当前激活的li变成白色

我们要重写此样式

.carousel-indicators .active{
background-color:#0aa1ed;
}

3.左右箭头

结构

两个a标签

a.carousel-control-prev/next

这个样式设置了a的宽度，背景色，位置

我们需要重写此样式

.carousel-control-prev,
.carousel-control-next{
    width:4%;height:20%;
    background-color:#aaa;
    top:40%;
    border-radius:0.25rem;
}

自定义属性

data-silde="next/prev" 注意要写href="#demo"

8.模态框

模态框modal是覆盖在父窗体上的一个子窗体

模态框可以在不离开父窗体的情况下与用户有一些互动

<div id="mymodal" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"></div>
            <div class="modal-body"></div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

二.其他组件

1.徽章

基本类 badge

颜色 badge-danger/warning/success...

徽章的样式 badge-pill 胶囊

2.巨幕

巨大的内边距，有背景颜色，和圆角

class="jumbotron"

3.分页

ul.pagination>li.page-item>a.page-link

li的修饰类 .active 激活

.disabled 禁用

4.面包屑导航

ul.breadcrumb>li.breadcrumb-item

中间的连接符号需要自己重写样式

.breadcrumb-item + .breadcrumb-item::before{
content:">";
}

5.进度条

div.progress>div.progress-bar+w-50+bg-danger

子div设置w宽度，就是进度条进度

子div设置背景，就是进度的颜色

子div设置条纹 progress-bar-striped

子div设置动画 progress-bar-animated

可以在同一个div.progress中写多个div.progress-bar

bootstrap重点：响应式+栅格布局+SCSS

三.SCSS，动态的样式语言（nodejs 8.11以上）

1.css有以下几个缺点

语法不够强大，没有变量和合理的样式复用机制

导致难以维护

我们要使用动态样式语言，赋予css新的特性

提高样式语言的可维护性

常见的动态样式语言

1.scss/sass (scss兼容sass，scss更接近css语法)

2.stylus

3.Less

day18 bootstrap

一.scss boot的订制

SCSS是一款强化css的辅助工具

它和css的语法很像,在CSS的基础上，添加了变量，嵌套，混合，导入，函数等高级功能。这些拓展命令让css更加强大与优雅

浏览器不能直接解析运行scss文件，需要在项目中把scss转义成css文件。让浏览器解析。

scss可以让css开发更高效

1.SCSS的使用

scss在服务器端使用

1.安装nodejs解释器 v8.11以上

2.在线安装scss

在cmd控制台打印命令

npm install -g node-sass

3.无网络的安装

node-sass -v

4.测试是否安装正确

cmd中打印 node-sass -v 显示版本

2.SCSS文件转换成CSS文件

1.单文件转换

node-sass scss/01.scss css/01.css

scss/01.scss 要转换的scss文件名和目录

css/01.css 转换后的css文件名和目录

保证执行命令的路径是scss/01.scss 的父级

可以在电脑中打开项目的路径，在路径文件夹下

按住shift点击鼠标右键，打开powershell窗口输入上面命令

10:05~10:20休息

2.多文件转换，文件夹转换（一个命令把一个文件夹下所有的.scss都转换）

node-sass scss(文件夹名称) -o css(文件夹名称)

3.单文件监听

node-sass -w scss/01.scss css/01.css

开启，系统会盯着01.scss文件，当01.scss内容发生改变，保存的时候，自动转换为01.css

4.多文件夹监听

node-sass -w scss -o css

3.SCSS基础语法

1.变量

使用$标识变量，变量名可以包含- _,命名规则基本上与css选择器相同，尽量做到见名知意。

总结

1.声明变量时，变量值可以引用其他变量

2.变量声明在{}外，整个scss文件都可以使用这个变量

变量声明在{}内，只用当前样式可以使用此变量

3.变量重复声明，后声明的变量会覆盖之前声明的，尽量保证变量名称不重复

$jd_red:#fff !default;

!default规则：如果此变量在之前已经声明赋值了,那么就使用之前的值，如果此变量之前没生命赋值，就使用现在的值

2.嵌套

#content{
  div.top{
    h1{color:#f00;}
    p{background:#00f;}
  }
  div.bottom{width:100px;}
}

自定转换成

#content div.top h1 { color: #f00; }
#content div.top p { background: #00f; }
#content div.bottom { width: 100px; }

注意：伪类选择器在嵌套的时候，需要添加&代表父元素器，不然会有一个空格，变成后代选择器

a{color:#000;
&:hover{color:#ff0;}
}

群组选择器的嵌套

nav,div,h1{
a{color:#f00;}
}

转换成如下css

nav a, div a, h1 a {color: #f00; }

属性嵌套

div{
border:{style:solid;width:10px;color: #ffff00;}
}

转换成下面样式

div {
  border-style: solid;
  border-width: 10px;
  border-color: #ffff00; }

3.导入

在scss语法中，如果一个scss文件以下划线开头，那么这个文件就是一个局部scss文件

scss文件在转换成css文件的时候，不会把局部文件进行转换

只转换不以下划线开头的文件

一般情况，我们会把局部文件引入到全局文件(不以下划线开头的)中。

导入的语法 @import "dropdown";

文件名叫做 _dropdown.scss

导入的时候，不写_,不写后缀

局部文件被导入后，局部文件中样式，会在全局文件转换的css中生成。同时局部文件声明的变量，可以在全局文件中使用。

4.混合器

把多个选择器都会使用的样式，封装进一个混合器。需要使用的选择器，可以调用这个混合器。实现代码的重用。

另，混合器可以带参数。

关键字：声明混合器 @mixin

调用混合器@include

@mixin my_border($width,$raidus){

border:$width solid #f00;

border-radius:$raidus ;

outline:0;

}

div{@include my_border(5px,5%);}

p{@include my_border(1px,1%);}

h6{@include my_border(2px,2%);}

5.继承

一个选择器，可以继承另一个选择器的所有样式

.my-rounded{

border:1px solid #f00;

border-radius: 5px;

}

.rounded-shadow{

box-shadow: 0 0 10px;

@extend .my-rounded;

}

在转换成css后，继承的表现方式为，群组选择器

.my-rounded, .rounded-shadow {

border: 1px solid #f00;

border-radius: 5px; }

练习：在选择器.my-border中定义1px solid transparent

设置宽度为400px；左外边距20px

在选择器.my-bottom-border中，继承.my-border

并且设置底边框为红色，当鼠标悬停时底边框为蓝色

4.运算

1.数字

加减乘除余

1.加法

+ 除了做加法，还可以字符串拼接

字符串拼接的时候

如果用有引号的字符串去连接无引号的字符串

结果是带引号

如果用无引号字符串去连接有引号的字符串

结果是不带引号

2.减法

由于变量声明的时候可以使用-

系统分不清楚 - 是不是属于变量名称

所以我们写 - 的时候，要在 - 前后加空格

width:$my-width150 - $my-width150;

3.除法

在scss中 / 的作用是分割符

以下情况，我们视为除法

1.如果运算式两边的数字，是变量或者函数的返回值

width:$width/2;

2.被（）包裹时，是除法

(500px/2);

3.运算式是其他算数表达式的一部分

5px+8px/2px

4.在有引号的字符串中使用#{}可以做插值操作

content:"liangliang ate #{50+30} baozis";

2.颜色运算

#rrggbb和rgb(r,g,b)都是分段计算的

红+红绿+绿蓝+蓝

rgba(11,22,33,0.6)+ rgba(22,33,44,0.6)=

rgba(33,55,77,0.6),前后两个透明度，必须相同才能计算

三.函数

1.scss定义了很多函数，有些函数甚至可以直接在css语句中调用

rgba(r,g,b,alpha)

hsl(h,s,l)

h:hue色调取值0~360，3个色段，120一个

s：saturation 饱和度 0.0%~100.0%

l：lightness 亮度 0.0%~100.0%

2.数学函数

round($val) 四舍五入

ceil($val) 向上取整

floor($val) 向下取整

min($v1,$v2.....)

max($v1,$v2.....)

random 随机数

3.字符串函数

unquote($str) 去掉$str的双引号

quote($str) 给$str添加双引号

to_upper_case($str); $str变大写

to_lower_case($str); $str变小写

4.自定义函数

@function get-width($n,$m){

@return $n - $m;

}

练习

定义一个带参数的函数get_mywidth($n)

函数内定义两个变量分为60px和10px

函数返回值为 $n乘以两个变量的最大值，再加上$n乘以俩个变量的最小值。将结果赋值给div的width属性

四.指令

@if(){}

@else if(){}

@else{}

注意：bool值的小括号可以去掉

练习

声明一个带参的函数，函数中判断参数

参数大于1，返回200px

参数等于1，返回100px

参数小于1，返回0

把返回赋值给div的width

阶段3: JS、DOM&BOM、JQUERY、VUE

1.JS

day01 正则

张东

微信: 18301092802

准备:

1. 书: 犀牛书 JavaScript权威指南

2. 微信公众号: 前端大全

3. 上一届的笔记: 打印出来

千万不要记笔记！！！

概述：

JavaScript核心编程: 闭包，面向对象，ES5，ES6，异步编程

DOM: 为网页添加交互行为的一套程序——所有场合使用！

jQuery: DOM的简化版——PC

Vue: 自动化的框架

React:

正课：

1. 正则表达式

2. String中的正则API:

1. 正则表达式:

2. String中的正则表达式:

查找敏感词: 4种:

1. 查找一个固定的敏感词出现的位置

var i=str.indexOf("敏感词",starti)

在str中，从starti位置开始，找下一个敏感词出现的位置

返回值: 如果找到，返回敏感词第一个字的下标

如果没找到，返回-1

问题: 只能查找一个固定的敏感词，不支持正则！

2. 模糊查找一个敏感词的位置:

var i=str.search(/正则/i)

在str中查找符合正则要求的第一个敏感词出现的位置

返回值: 如果找到，返回敏感词第一个字的下标

如果没找到，返回-1

问题: 正则表达式默认区分大小写

解决: 在正则第二个/后加后缀i, 表示ignore

问题: 只能返回位置，不能返回内容

3. 查找敏感词内容

2种:

1. 只查找一个敏感词的内容:

var arr=str.match(/正则/i)

在str中查找第一个敏感词的[内容和位置]

返回值:

如果找到，返回一个数组:

["0":敏感词内容, "index": 下标i ]

如果没找到，返回null

数组:关联数组和索引数组

js底层一切都是关联数组,没有堆和栈

day02 String正则API&FegExp

每个案例三遍:

1. 代码+注释抄一遍

2. 保留注释，删除代码，自己试着把代码填回来

3. 都删掉，尝试将注释和代码一起写回来——自己会了

注释最重要！

正课：

1. String正则API

2. RegExp对象

3. ***Function对象

1. String正则API

查找：4种场景

1. 查找一个固定的关键词出现的位置:

var i=str.indexOf("敏感词",starti)

2. 用正则表达式模糊查找关键词的位置:

var i=str.search(/正则/i)

3. 查找关键词的内容:

1. 只查找第一个关键词的内容:

var arr=str.match(/正则/i)

arr:["0": 关键词内容, "index": 下标i ]

问题: 只能找一个敏感词

2. 查找所有敏感词的内容:

var arr=str.match(/正则/ig) global

arr:[ 敏感词1, 敏感词2, ... ... ]

返回所有找到的敏感词内容的列表

如果找不到返回null

强调: 凡是返回null的函数，都要先判断不是null，再使用。

4. 既查找所有关键词的内容，又能获得每个关键词的位置

reg.exec()

替换: 2种:

1. 简单替换: 将所有敏感词都替换为一致的新值

str=str.replace(/正则/ig,"新值")

2. 高级替换: 根据本次找到的敏感词的不同，动态选择不同的新值替换

str=str.replace(

/正则/ig,

//replace每找到一个敏感词，就自动调用一次回调函数

function(kword){ kword: y c y u

形参kword，自动获得本次找到的敏感词内容

return 返回的新值

kword.toUpperCase()

}// return Y C Y U

)

回调函数callback：咱们负责定义函数，然后将函数交给别的程序去自动执行。

特点: 1. 不一定立刻执行

2. 不止执行一次，可能反复执行

3. 自动传入参数

衍生: 删除敏感词: ——作业:

其实就是将敏感词替换为""

str=str.replace(/正则/ig,"")

切割: 将字符串按指定的分隔符，分割为多段子字符串

如何:

2种:

1. 简单切割: 分隔符是固定不变的

var arr=str.split("分隔符")

固定套路: 打散字符串为字符数组(按""切割)

var arr=str.split("")

2. 复杂切割: 分隔符不固定

var arr=str.split(/正则/)

2. RegExp对象:

什么是: 专门保存一条正则表达式，并提供用正则表达式执行查找和验证操作的方法。

何时: 只要在js中使用正则表达式，都要创建正则表达式对象

如何:

创建: 2种:

1. 用/方式:

var reg=/正则/ig;

问题: 不能在程序运行时，动态拼接正则，只能预先写死正则。

2. 用new:

var reg=new RegExp("正则","ig")

优势: 可在运行时动态拼接正则字符串

功能:

1. 验证:

var bool=reg.test(str)

验证str是否符合reg的格式要求

问题: 并不是完全匹配。只要在str中找到部分内容和reg匹配，就返回true！

解决: 要求从头到尾完整匹配

今后只要做验证，必须前加^，后加$

2. 查找: 查找所有敏感词的内容和位置

var arr=reg.exec(str)

在str中找下一个符合reg要求的敏感词的内容和位置

返回值: 同match不加g时一样

arr:[ "0": 敏感词内容, "index": 下标i ]

3. Function对象:

什么是: 保存一段可重用的代码段的对象，再起一个名字

为什么: 重用一段代码

何时: 只要发现一段代码需要反复使用时，都要定义为一个函数。

如何:

1. 声明方式:

function 函数名(形参列表){

函数体;

return 返回值;

}

var 返回值=函数名(实参列表)

问题: 会被声明提前:

2. 用赋值方式:

var函数名=function (形参列表){

函数体;

return 返回值;

}

day03 Function

正课:

1. Function对象

2. 面向对象

1. Function对象

创建: 3种:

1. 声明方式:

function 函数名(形参列表){

函数体;

return 返回值

}

会被声明提前

2. 赋值方式:

var函数名=function (形参列表){

函数体;

return 返回值

}

不会被声明提前

揭示: 函数其实也是一个对象

函数名其实只是一个简单的变量

3. 用new:

var 函数名=new Function("形参1","形参2",...,"函数体")

重载overload:

什么是: 相同函数名，不同形参列表的多个函数，在调用时可根据传入参数的不同，自动选择匹配的函数执行。

为什么: 减少函数的个数，减轻调用者的负担

何时: 一件事，可能根据传入的参数不同，选择执行不同的操作时

如何:

问题: js语言默认不支持重载的语法
因为js不允许多个同名函数同时存在

如果同时存在，只有最有一个会覆盖之前所有

解决: 用arguments对象变通实现

arguments: 每个函数中自带的接收所有实参值的类数组对象

每个函数: 所有函数中都有arguments对象

自带: 不用自己创建，直接使用

作用: 接收所有实参值

数据结构: 类数组对象——长的像数组的对象

相同: 1. 下标 2. length 3. for循环遍历

不同: 类型不同——类数组对象是对象家孩子，无权使用数组家的API

匿名函数:

什么是: 定义函数时，不起名的函数，称为匿名函数

为什么: 节约内存！

何时: 只要一个函数，只使用一次时，都要用匿名函数，而不是有名称的函数

如何: 2种:

1. 回调函数:

比如: setInterval/setTimeout(function(){...},1000)

arr.sort(function(a,b){return a-b})

str.replace(/正则/ig,function(kw){ ... })

2. 匿名函数自调: 也称为立即调用函数IIF

什么是: 定义一个匿名函数，然后立刻执行

为什么: 临时创建一个函数作用域，避免使用全局变量

何时: 今后所有的js代码，都要放在一个巨大的匿名函数自调中。

(function(){

自己的功能代码

})()

作业:

1. function fun(){

var n=999;

nAdd=function(){ n++ };

return function(){

console.log(n);

}

var getN=fun();

getN()//?

nAdd()

getN()//?

2. function fun(){

for(var i=0,arr=[]; i<3;i++){

arr[i]=function(){ console.log(i); }

}
return arr;

}

var funs=fun();

funs[0]();//?

funs[1]();//?

funs[2]();//?

day04 面向对象

正课:

1. 面向对象:

什么是成员变量：在对象中，函数里面的变量是成员变量

Var lilei={

Sname:lilei,

Sage: 12

Iintr : Function (){

这里面的是成员变量

}

1. 面向对象:

什么是: 程序中都是用对象结构来描述现实中的事物

为什么: 便于大量数据的维护

何时: 所有程序都是用面向对象的思想管理数据和功能

如何: 面向对象三大特点: 封装，继承，多态

1. 封装:

什么是: 创建一个对象结构，保存一个事物的属性和功能

为什么: 便于大量数据的维护

何时: 今后所有数据都是先封装在对象中，再按需使用

如何: 3种:

1. 用{}创建一个对象:

var 对象名={

属性: 属性值,

... : ... ,

功能: function(){

... this.属性名 ...

}

访问对象的成员: 成员=属性+方法

访问属性: 对象名.属性

调用方法: 对象名.方法()

问题: 对象自己的方法内，想访问自己的属性，也不能直接属性，报错：属性未定义

为什么: 对象的属性没有直接保存在一个函数的作用域链中，而引擎不能擅自进入对象中获取数据。

解决一: 对象名.属性/方法

问题: 紧耦合: 对象名发生变化，必须同时改内部的对象名，一旦忘改，就出错！

解决二: 松耦合: 能不能自动获得对象名——this

什么是this: 正在调用当前函数的.前的对象

每个函数与生俱来的关键词，可自动获得.前的对象

鄙视时: this只和调用时.前的对象有关，和保存在哪儿毫无关系！

如果一个函数前没加任何.，默认是window.

总结: 何时: 只要对象自己的方法内，想使用对象自己的属性和其它方法时，都必须用this.

2. 用new: 2步: 同关联数组的创建过程

var obj=new Object(); //obj:{}

obj.属性名=值;

obj.方法名=function(){ ... }

Obj.sname=”li lei”

揭示了: js底层所有对象都是关联数组

vs 关联数组相比:

相同:

1. js中的对象，可随时添加新属性和新方法，而不会报错！

2. 访问对象中不存在的属性，不会报错，而是返回undefined

3. 访问对象中的成员，有两种方式:

简写: 对象名.属性名/方法名()

// ||等效

何时: 如果要访问的属性名是写死的

完整: 对象名["属性名"]/["方法名"] ()

何时: 如果要访问的属性只能在运行时动态获得

4. 对象也可以用for in遍历每个属性

缺点: 一次只能创建一个对象，如果反复创建多个相同结构的对象时，代码会很繁琐。

解决: 构造函数

3. 用构造函数反复创建多个相同结构的对象

什么是构造函数: 专门描述一类对象统一结构的函数

何时: 只要反复创建多个相同结构的对象

如何: 2步:

1. 定义构造函数：

function 类型名(形参1, 形参2, ... ){

this.属性名=形参1;

... = ...;

this.方法名=function(){ ... this.属性名 ...}

}

2. 用构造函数创建多个对象:

用new调用构造函数，创建出规定格式和功能的对象

var 对象名=new 类型名(属性值,属性值,...)

鄙视题: new的原理: 4件事:

1. 创建一片空的存储空间

3. 用新的空对象作为主语调用构造函数

new Student(属性值,...)

=> new.Student(属性值,...) this->new{}

↓

=> this.属性名=形参

↓

=>new{}.属性名=属性值

在new{}中强行添加该新属性，并将属性值保存进对象中——野蛮的强行赋值方式

结果: new{}中就反复添加了规定的新属性和方法

4. 返回新对象的结果

凡是不带前缀的变量，只能在作用域链中查找比如console.log (a)

Day05

正课:

1. OOP

2. ES5

1. OOP

三大特点: 封装，继承，多态

封装:

3. 用构造函数反复创建多个相同结构的对象:

function Student(sname,sage){

this.sname=sname;

this.sage=sage;

this.intr=function(){

console.log(`I'm ${this.sname},I'm ${this.sage}`);

}

//用new创建:

var lilei=new Student("Li Lei",11);

var hmm=new Student("Han Meimei",12);

console.log(lilei);

console.log(hmm);

lilei.intr();

hmm.intr();

问题: 将方法的定义放在构造函数内，会重复创建多个相同函数的副本，浪费内存。且，不便于维护。

解决: 1. 构造函数中不要包含方法定义

2. 将方法定义放在共同的爹中，让所有孩子共用！

继承:

什么是继承: 父对象中的成员，子对象无需重复创建，就可直接使用。

为什么继承: 代码重用，节约内存

何时继承: 多个孩子对象，都拥有相同的方法定义时，就要用继承，将方法保存在爹中，所有孩子自动共用。

如何实现继承: js中的继承都是自动继承原型对象

什么是原型对象: 在一个类型的大家庭中，集中保存所有孩子对象共用的成员的父对象

如何使用原型对象:

创建: 不用自己创建！买一赠一！

当创建构造函数（妈妈）时，自动附赠了一个原型对象（爹）

继承: 不用自己继承, new的第二步

让新创建的子对象，自动继承构造函数的prototype(爹)

向原型对象中添加共有成员: 需要自己做

Student.prototype.intr=function(){ ... }

妈妈的老公

如何使用原型对象中的共有成员:

用子对象调用共有成员:

var lilei=new Student(... ...);

lilei.intr()

//现在lilei里找，如果找到，就先用自己的

//如果没找到，才延_ _proto_ _属性先父对象中查找，只要找到，可直接使用，无需重复创建。

自有属性和共有属性:

什么是自有属性: 保存在子对象本地，仅当前子对象自己所有的属性

什么是共有属性: 保存在父对象中，所有子对象共有的属性

读取属性值: lilei.sname lilei.className

无论自有属性还是共有属性都可用子对象来读取

修改属性时: 如果修改自有属性，可用子对象修改

lilei.sage++;

如果修改共有属性: 只能用原型对象，不能用子对象修改共有属性。

如果强行用子对象修改共有属性，结果：会为当前子对象个人添加一个同名的自有属性。从此，该子对象与其他子对象分道扬镳。—— 错误的效果！

应该: 只要修改共有属性，必须用原型对象亲自改

Student.prototype.className="初三2班"

lilei.__proto__.intr() I'm undefined, I'm undefined

lilei.intr() I'm Li Lei, I'm 11

原型链:

什么是: 由多级原型对象，逐级继承，形成的链式结构

2个作用:

1. 存储着一个对象可用的所有属性和方法

2. 控制着成员的使用顺序: 先自有，再共有

vs 作用域链:

2个作用:

1. 存储着所有不用.就可访问的变量

2. 控制着变量的使用顺序，先局部，后全局

js内置类型: 11种:

Number String Boolean

Array Date RegExp Math

Error

Function Object

global(在浏览器中被更名为window)

自定义继承:

何时: 如果默认的爹不是想要的，可更改

如何: 2种:

1. 仅修改一个对象的父对象:

child.__proto__=father

设置child的爹为father

Object.setPrototypeOf(child, father)
2. 同时更换多个子对象的爹

更换妈妈的老公

Student.prototype=father

讲究时机: 必须在创建子对象之前换！

多态:

什么是: 一个函数在不同情况下表现出不同的状态

包括2种情况:

1. 重载

2. 重写(override):

什么是: 如果子对象觉得从父对象继承来的成员不好用，可在子对象本地创建同名成员，覆盖父对象中的成员。使用时，只要自己有，就先用自己的。

何时: 觉得从父对象继承来的成员不好用

如何: 只要在对象本地定义与父对象中同名的成员，即可。

2. ES5:

ECMAScript 第5个版本

1. 严格模式:

什么是: 比普通js运行机制，要求更严格的模式

为什么: js语言本身具有很多广受诟病的缺陷

何时: 今后所有的js程序，必须运行在严格模式下！

如何:

在当前作用域的顶部写:"use strict";——启用严格模式

规定:

1. 禁止给未声明变量赋值:

2. 静默失败升级为错误:

什么是静默失败: 执行不成功，但还不报错。

ES5中规定，所有静默失败，都升级为报错！

3. 匿名函数自调和普通函数调用中的this，不再指向window！而是this=undefined。

阶段3: JS、DOM&BOM、JQUERY、VUE

1.JS

day01 正则

张东

微信: 18301092802

准备:

1. 书: 犀牛书 JavaScript权威指南

2. 微信公众号: 前端大全

3. 上一届的笔记: 打印出来

千万不要记笔记！！！

概述：

JavaScript核心编程: 闭包，面向对象，ES5，ES6，异步编程

DOM: 为网页添加交互行为的一套程序——所有场合使用！

jQuery: DOM的简化版——PC

Vue: 自动化的框架

React:

正课：

1. 正则表达式

2. String中的正则API:

1. 正则表达式:

2. String中的正则表达式:

查找敏感词: 4种:

1. 查找一个固定的敏感词出现的位置

var i=str.indexOf("敏感词",starti)

在str中，从starti位置开始，找下一个敏感词出现的位置

返回值: 如果找到，返回敏感词第一个字的下标

如果没找到，返回-1

问题: 只能查找一个固定的敏感词，不支持正则！

2. 模糊查找一个敏感词的位置:

var i=str.search(/正则/i)

在str中查找符合正则要求的第一个敏感词出现的位置

返回值: 如果找到，返回敏感词第一个字的下标

如果没找到，返回-1

问题: 正则表达式默认区分大小写

解决: 在正则第二个/后加后缀i, 表示ignore

问题: 只能返回位置，不能返回内容

3. 查找敏感词内容

2种:

1. 只查找一个敏感词的内容:

var arr=str.match(/正则/i)

在str中查找第一个敏感词的[内容和位置]

返回值:

如果找到，返回一个数组:

["0":敏感词内容, "index": 下标i ]

如果没找到，返回null

数组:关联数组和索引数组

js底层一切都是关联数组,没有堆和栈

day02 String正则API&FegExp

每个案例三遍:

1. 代码+注释抄一遍

2. 保留注释，删除代码，自己试着把代码填回来

3. 都删掉，尝试将注释和代码一起写回来——自己会了

注释最重要！

正课：

1. String正则API

2. RegExp对象

3. ***Function对象

1. String正则API

查找：4种场景

1. 查找一个固定的关键词出现的位置:

var i=str.indexOf("敏感词",starti)

2. 用正则表达式模糊查找关键词的位置:

var i=str.search(/正则/i)

3. 查找关键词的内容:

1. 只查找第一个关键词的内容:

var arr=str.match(/正则/i)

arr:["0": 关键词内容, "index": 下标i ]

问题: 只能找一个敏感词

2. 查找所有敏感词的内容:

var arr=str.match(/正则/ig) global

arr:[ 敏感词1, 敏感词2, ... ... ]

返回所有找到的敏感词内容的列表

如果找不到返回null

强调: 凡是返回null的函数，都要先判断不是null，再使用。

4. 既查找所有关键词的内容，又能获得每个关键词的位置

reg.exec()

替换: 2种:

1. 简单替换: 将所有敏感词都替换为一致的新值

str=str.replace(/正则/ig,"新值")

2. 高级替换: 根据本次找到的敏感词的不同，动态选择不同的新值替换

str=str.replace(

/正则/ig,

//replace每找到一个敏感词，就自动调用一次回调函数

function(kword){ kword: y c y u

形参kword，自动获得本次找到的敏感词内容

return 返回的新值

kword.toUpperCase()

}// return Y C Y U

)

回调函数callback：咱们负责定义函数，然后将函数交给别的程序去自动执行。

特点: 1. 不一定立刻执行

2. 不止执行一次，可能反复执行

3. 自动传入参数

衍生: 删除敏感词: ——作业:

其实就是将敏感词替换为""

str=str.replace(/正则/ig,"")

切割: 将字符串按指定的分隔符，分割为多段子字符串

如何:

2种:

1. 简单切割: 分隔符是固定不变的

var arr=str.split("分隔符")

固定套路: 打散字符串为字符数组(按""切割)

var arr=str.split("")

2. 复杂切割: 分隔符不固定

var arr=str.split(/正则/)

2. RegExp对象:

什么是: 专门保存一条正则表达式，并提供用正则表达式执行查找和验证操作的方法。

何时: 只要在js中使用正则表达式，都要创建正则表达式对象

如何:

创建: 2种:

1. 用/方式:

var reg=/正则/ig;

问题: 不能在程序运行时，动态拼接正则，只能预先写死正则。

2. 用new:

var reg=new RegExp("正则","ig")

优势: 可在运行时动态拼接正则字符串

功能:

1. 验证:

var bool=reg.test(str)

验证str是否符合reg的格式要求

问题: 并不是完全匹配。只要在str中找到部分内容和reg匹配，就返回true！

解决: 要求从头到尾完整匹配

今后只要做验证，必须前加^，后加$

2. 查找: 查找所有敏感词的内容和位置

var arr=reg.exec(str)

在str中找下一个符合reg要求的敏感词的内容和位置

返回值: 同match不加g时一样

arr:[ "0": 敏感词内容, "index": 下标i ]

3. Function对象:

什么是: 保存一段可重用的代码段的对象，再起一个名字

为什么: 重用一段代码

何时: 只要发现一段代码需要反复使用时，都要定义为一个函数。

如何:

1. 声明方式:

function 函数名(形参列表){

函数体;

return 返回值;

}

var 返回值=函数名(实参列表)

问题: 会被声明提前:

2. 用赋值方式:

var函数名=function (形参列表){

函数体;

return 返回值;

}

day03 Function

正课:

1. Function对象

2. 面向对象

1. Function对象

创建: 3种:

1. 声明方式:

function 函数名(形参列表){

函数体;

return 返回值

}

会被声明提前

2. 赋值方式:

var函数名=function (形参列表){

函数体;

return 返回值

}

不会被声明提前

揭示: 函数其实也是一个对象

函数名其实只是一个简单的变量

3. 用new:

var 函数名=new Function("形参1","形参2",...,"函数体")

重载overload:

什么是: 相同函数名，不同形参列表的多个函数，在调用时可根据传入参数的不同，自动选择匹配的函数执行。

为什么: 减少函数的个数，减轻调用者的负担

何时: 一件事，可能根据传入的参数不同，选择执行不同的操作时

如何:

问题: js语言默认不支持重载的语法
因为js不允许多个同名函数同时存在

如果同时存在，只有最有一个会覆盖之前所有

解决: 用arguments对象变通实现

arguments: 每个函数中自带的接收所有实参值的类数组对象

每个函数: 所有函数中都有arguments对象

自带: 不用自己创建，直接使用

作用: 接收所有实参值

数据结构: 类数组对象——长的像数组的对象

相同: 1. 下标 2. length 3. for循环遍历

不同: 类型不同——类数组对象是对象家孩子，无权使用数组家的API

匿名函数:

什么是: 定义函数时，不起名的函数，称为匿名函数

为什么: 节约内存！

何时: 只要一个函数，只使用一次时，都要用匿名函数，而不是有名称的函数

如何: 2种:

1. 回调函数:

比如: setInterval/setTimeout(function(){...},1000)

arr.sort(function(a,b){return a-b})

str.replace(/正则/ig,function(kw){ ... })

2. 匿名函数自调: 也称为立即调用函数IIF

什么是: 定义一个匿名函数，然后立刻执行

为什么: 临时创建一个函数作用域，避免使用全局变量

何时: 今后所有的js代码，都要放在一个巨大的匿名函数自调中。

(function(){

自己的功能代码

})()

作业:

1. function fun(){

var n=999;

nAdd=function(){ n++ };

return function(){

console.log(n);

}

var getN=fun();

getN()//?

nAdd()

getN()//?

2. function fun(){

for(var i=0,arr=[]; i<3;i++){

arr[i]=function(){ console.log(i); }

}
return arr;

}

var funs=fun();

funs[0]();//?

funs[1]();//?

funs[2]();//?

day04 面向对象

正课:

1. 面向对象:

什么是成员变量：在对象中，函数里面的变量是成员变量

Var lilei={

Sname:lilei,

Sage: 12

Iintr : Function (){

这里面的是成员变量

}

1. 面向对象:

什么是: 程序中都是用对象结构来描述现实中的事物

为什么: 便于大量数据的维护

何时: 所有程序都是用面向对象的思想管理数据和功能

如何: 面向对象三大特点: 封装，继承，多态

1. 封装:

什么是: 创建一个对象结构，保存一个事物的属性和功能

为什么: 便于大量数据的维护

何时: 今后所有数据都是先封装在对象中，再按需使用

如何: 3种:

1. 用{}创建一个对象:

var 对象名={

属性: 属性值,

... : ... ,

功能: function(){

... this.属性名 ...

}

访问对象的成员: 成员=属性+方法

访问属性: 对象名.属性

调用方法: 对象名.方法()

问题: 对象自己的方法内，想访问自己的属性，也不能直接属性，报错：属性未定义

为什么: 对象的属性没有直接保存在一个函数的作用域链中，而引擎不能擅自进入对象中获取数据。

解决一: 对象名.属性/方法

问题: 紧耦合: 对象名发生变化，必须同时改内部的对象名，一旦忘改，就出错！

解决二: 松耦合: 能不能自动获得对象名——this

什么是this: 正在调用当前函数的.前的对象

每个函数与生俱来的关键词，可自动获得.前的对象

鄙视时: this只和调用时.前的对象有关，和保存在哪儿毫无关系！

如果一个函数前没加任何.，默认是window.

总结: 何时: 只要对象自己的方法内，想使用对象自己的属性和其它方法时，都必须用this.

2. 用new: 2步: 同关联数组的创建过程

var obj=new Object(); //obj:{}

obj.属性名=值;

obj.方法名=function(){ ... }

Obj.sname=”li lei”

揭示了: js底层所有对象都是关联数组

vs 关联数组相比:

相同:

1. js中的对象，可随时添加新属性和新方法，而不会报错！

2. 访问对象中不存在的属性，不会报错，而是返回undefined

3. 访问对象中的成员，有两种方式:

简写: 对象名.属性名/方法名()

// ||等效

何时: 如果要访问的属性名是写死的

完整: 对象名["属性名"]/["方法名"] ()

何时: 如果要访问的属性只能在运行时动态获得

4. 对象也可以用for in遍历每个属性

缺点: 一次只能创建一个对象，如果反复创建多个相同结构的对象时，代码会很繁琐。

解决: 构造函数

3. 用构造函数反复创建多个相同结构的对象

什么是构造函数: 专门描述一类对象统一结构的函数

何时: 只要反复创建多个相同结构的对象

如何: 2步:

1. 定义构造函数：

function 类型名(形参1, 形参2, ... ){

this.属性名=形参1;

... = ...;

this.方法名=function(){ ... this.属性名 ...}

}

2. 用构造函数创建多个对象:

用new调用构造函数，创建出规定格式和功能的对象

var 对象名=new 类型名(属性值,属性值,...)

鄙视题: new的原理: 4件事:

1. 创建一片空的存储空间

3. 用新的空对象作为主语调用构造函数

new Student(属性值,...)

=> new.Student(属性值,...) this->new{}

↓

=> this.属性名=形参

↓

=>new{}.属性名=属性值

在new{}中强行添加该新属性，并将属性值保存进对象中——野蛮的强行赋值方式

结果: new{}中就反复添加了规定的新属性和方法

4. 返回新对象的结果

凡是不带前缀的变量，只能在作用域链中查找比如console.log (a)

Day05

正课:

1. OOP

2. ES5

1. OOP

三大特点: 封装，继承，多态

封装:

3. 用构造函数反复创建多个相同结构的对象:

function Student(sname,sage){

this.sname=sname;

this.sage=sage;

this.intr=function(){

console.log(`I'm ${this.sname},I'm ${this.sage}`);

}

//用new创建:

var lilei=new Student("Li Lei",11);

var hmm=new Student("Han Meimei",12);

console.log(lilei);

console.log(hmm);

lilei.intr();

hmm.intr();

问题: 将方法的定义放在构造函数内，会重复创建多个相同函数的副本，浪费内存。且，不便于维护。

解决: 1. 构造函数中不要包含方法定义

2. 将方法定义放在共同的爹中，让所有孩子共用！

继承:

什么是继承: 父对象中的成员，子对象无需重复创建，就可直接使用。

为什么继承: 代码重用，节约内存

何时继承: 多个孩子对象，都拥有相同的方法定义时，就要用继承，将方法保存在爹中，所有孩子自动共用。

如何实现继承: js中的继承都是自动继承原型对象

什么是原型对象: 在一个类型的大家庭中，集中保存所有孩子对象共用的成员的父对象

如何使用原型对象:

创建: 不用自己创建！买一赠一！

当创建构造函数（妈妈）时，自动附赠了一个原型对象（爹）

继承: 不用自己继承, new的第二步

让新创建的子对象，自动继承构造函数的prototype(爹)

向原型对象中添加共有成员: 需要自己做

Student.prototype.intr=function(){ ... }

妈妈的老公

如何使用原型对象中的共有成员:

用子对象调用共有成员:

var lilei=new Student(... ...);

lilei.intr()

//现在lilei里找，如果找到，就先用自己的

//如果没找到，才延_ _proto_ _属性先父对象中查找，只要找到，可直接使用，无需重复创建。

自有属性和共有属性:

什么是自有属性: 保存在子对象本地，仅当前子对象自己所有的属性

什么是共有属性: 保存在父对象中，所有子对象共有的属性

读取属性值: lilei.sname lilei.className

无论自有属性还是共有属性都可用子对象来读取

修改属性时: 如果修改自有属性，可用子对象修改

lilei.sage++;

如果修改共有属性: 只能用原型对象，不能用子对象修改共有属性。

如果强行用子对象修改共有属性，结果：会为当前子对象个人添加一个同名的自有属性。从此，该子对象与其他子对象分道扬镳。—— 错误的效果！

应该: 只要修改共有属性，必须用原型对象亲自改

Student.prototype.className="初三2班"

lilei.__proto__.intr() I'm undefined, I'm undefined

lilei.intr() I'm Li Lei, I'm 11

原型链:

什么是: 由多级原型对象，逐级继承，形成的链式结构

2个作用:

1. 存储着一个对象可用的所有属性和方法

2. 控制着成员的使用顺序: 先自有，再共有

vs 作用域链:

2个作用:

1. 存储着所有不用.就可访问的变量

2. 控制着变量的使用顺序，先局部，后全局

js内置类型: 11种:

Number String Boolean

Array Date RegExp Math

Error

Function Object

global(在浏览器中被更名为window)

自定义继承:

何时: 如果默认的爹不是想要的，可更改

如何: 2种:

1. 仅修改一个对象的父对象:

child.__proto__=father

设置child的爹为father

Object.setPrototypeOf(child, father)
2. 同时更换多个子对象的爹

更换妈妈的老公

Student.prototype=father

讲究时机: 必须在创建子对象之前换！

多态:

什么是: 一个函数在不同情况下表现出不同的状态

包括2种情况:

1. 重载

2. 重写(override):

什么是: 如果子对象觉得从父对象继承来的成员不好用，可在子对象本地创建同名成员，覆盖父对象中的成员。使用时，只要自己有，就先用自己的。

何时: 觉得从父对象继承来的成员不好用

如何: 只要在对象本地定义与父对象中同名的成员，即可。

2. ES5:

ECMAScript 第5个版本

1. 严格模式:

什么是: 比普通js运行机制，要求更严格的模式

为什么: js语言本身具有很多广受诟病的缺陷

何时: 今后所有的js程序，必须运行在严格模式下！

如何:

在当前作用域的顶部写:"use strict";——启用严格模式

规定:

1. 禁止给未声明变量赋值:

2. 静默失败升级为错误:

什么是静默失败: 执行不成功，但还不报错。

ES5中规定，所有静默失败，都升级为报错！

3. 匿名函数自调和普通函数调用中的this，不再指向window！而是this=undefined。

Day06 ES5 ES6

正课:

1. ES5

2. ES6

1. ES5:

Object.create() 没有构造函数，仅依靠父对象，就能创建子对象。

如何: var child=Object.create(father,{

//为child添加自有属性

//用defineProperties的语法

属性名:{

value:属性值,

writable:true,

enumerable:true,

configurable:false

}

})

1. 创建子对象child

2. 自动设置子对象继承父对象father

3. 为子对象child添加自有属性

// Object.create做的事情

// 01自动创建新的空对象hmm

// 02自动设置hmm继承father

// 03为hmm添加自由属性

var father={

money:100000,

car:"benchi"

};

var hmm=Object.create(father,{

phone:{

value:"iphone",

Writable:true,

enumerable:true,

configurable:false

bao:{

value:"lv",

writable:true,

enumerable:true,

configurable:false

}

});

console.log(hmm)

console.log(hmm.money)

console.log(hmm.car)

call apply bind 换函数中的this

1. call apply 在本次调用时，临时替换函数中的this为指定的对象

calc.call(lilei,10000,1000,2000)

用lilei调用calc，并传入参数10000,1000,2000

//默认this->window

//call将this->lilei

apply只比call多一个功能: 打散数组类型的参数为单个值

2. bind: 永久绑定this和部分参数值:

何时: 只要希望永久绑定this，反复使用

今后，只要回调函数中的this，要更换，都用bind

因为回调函数被调用几次，不确定

如何:

1. 绑定:

var lcalc=calc.bind(lilei,10000);

基于原函数calc，创建一个一模一样的新函数，并永久替换函数中的this为lilei，永久替换函数的第一个参数base为10000，最后将新函数保存到变量lcalc中

2. 调用lcalc: 不用重复传入对象和已经绑定的参数值

lcalc(1000,2000) // Li Lei的总工资是 13000

数组API:

1. 查找元素的位置:

回顾: var i=str.indexOf("关键词",starti)

数组中: var i=arr.indexOf(元素值, starti)

在arr数组中，查找starti位置后的下一个"元素"出现的位置

返回值: 如果找到，返回元素的下标i

如果没找到，返回-1

2. 判断数组是否由规定的内容组成:

1. 判断是否所有元素都符合要求

var bool=arr.every(function(elem, i, arr){

//elem：当前元素值

//i : 当前位置

//arr : 当前数组对象

return 根据elem,i,和arr判断当前元素是否符合要求

})

2. 判断是否包含符合要求的元素

var bool=arr.some(function(elem, i, arr){

return 判断条件

}

只要包含符合条件的元素，就返回true

3. 遍历API: 依次取出数组中的每个元素值，执行相同的操作

1. forEach: 对原数组中每个元素执行相同的操作

arr.forEach(function(elem,i,arr){

//对当前元素执行相同操作

})

2. map: 依次取出原数组中每个元素值，执行相同操作后，放入新数组中返回

var evens=arr.map(

//newArr=[]

for( ... ... ){

function(elem,i,arr){

↓

return 新值

} ↓

//newArr[ 2 4 6 ]

}

//return newArr;

)

结果: evens=newArr=[2 , 4, 6]

遍历索引数组：for forEach

遍历类数组对象：for

遍历对象和关联数组: for in

保护原数组，并生成新数组: map——只有索引数组

4. 过滤和汇总:

过滤: 复制出原数组中符合条件的元素，组成新的子数组返回。原数组保持不变。

var subArr=arr.filter(funtion(elem,i,arr){

return 判断条件

})

结果: filter会拿着回调函数去每个元素上执行一次，只有符合判断条件的元素，才会被复制出来，放入新数组返回

汇总: 对数组中的所有元素进行统计和分析，得出最终结论

var result=arr.reduce(

function(prev, elem, i, arr){

//prev: 是截止目前的临时汇总值

return 截止目前元素的临时汇总值

起始值

)

补: 按值传递: 两个变量间赋值时，其实都是将原变量中的值复制一个副本给对方

1. 如果传递的是原始类型的值: number string bool null undefined

将原始值复制一个副本给对方，修改新变量的值，不影响原变量

2. 如果传递的是引用类型的值: 数组，日期，自定义对象

只是将地址值复制给新变量。形成两个变量用相同的地址指向同一个对象。任何一方修改对象，另一方都会受影响

2. ES6:

let 代替var，用于声明变量:

var的两个问题:

1. 声明提前

2. 没有块级作用域

let的优点:

1. 阻止声明提前

2. 添加块级作用域，让if else if else while for ...都变成了作用域

let的原理:

let a=100;

相当于:

(function(){

var _a=100;

...

})()

参数增强:

1. 默认值default:

何时: 只要一个形参，将来不传值，也希望有一个默认值作为备胎时

1. 定义函数时:

function calc(bonus1,bonus2,base=10000){

}

坑: 有默认值的形参必须放在参数列表末尾！

一般情况下只能有一个

2. 调用时:

calc(5000,6000,4000) base=4000

calc(5000,6000) base=10000

2. 剩余参数rest: 代替arguments

何时: 只要不确定参数的个数时，都用rest

arguments的问题:

1. 不是纯正的数组，无法使用数组家的API

2. 只能接收所有参数，无法有选择的接收参数

rest的优点:

1. 是纯正的数组，可使用数组家所有API

2. 可有选择的接收部分参数

如何:

1. 定义时:

function calc(ename, ...salary){

salary会接住除ename之外的所有剩余参数

且salary是纯正的数组

}

2. 调用时:

除ename外，再传多少个参数都会被salary数组接收

3. 打散spread: 将数组类型的参数，打散为多个值传入函数

何时: 函数希望多个值分别传入，但给定的多个值却放在数组中

如何:

var arr=[2,6,7,1];

Math.max(...arr) //7

在调用函数时...可将数组打散为多个参数值，分别传入

箭头函数: 对一切函数的简化！

如何:

1. 去掉function，变为=>

2. 如果形参列表只有一个形参，可省略()

3. 如果函数体只有一句话，可省略{}

但如果仅有的一句话还是return，则必须省略return

箭头函数的特点: 内外this通用！

如果希望内外this相同时，可改为箭头函数

如果不希望内外this相同时，就不能改箭头函数

比如: 对象的方法，事件处理函数

day 07

正课:

1. ES5

2. ES6

1. ES5

call/apply/bind

什么是: 替换函数中不想要的this为指定的对象

何时: 如果函数执行时，其中的this不是想要的，都要替换this为想要的对象

如何:

1. call/apply

在本次调用函数时，临时替换函数中的this为指定对象

本次调用后，替换失效。

call: 任意函数.call(任意对象, 实参值列表...)

让任何一个对象，可临时调用任何一个不相干的函数，并传入实参值列表。

比如: calc.call(lilei,10000,2000,3000);

用lilei调用calc函数，并传入10000,2000,3000三个参数值。

apply: 如果实参值列表是以数组形式给的，则必须将call

换成apply

如何: var arr=[10000,2000,3000] //实参值列表

calc.apply(lilei, arr)

用lilei调用calc，但是会打散数组参数为单个值

比如: arr=[10000,2000,3000]

calc.apply(lilei, arr )

打散数组 ↓ ↓ ↓

等效于: calc.call(lilei, 10000,2000,3000)

结果: this base bonus1 bonus2

2. bind:

什么是: 基于原函数，创建一个新函数，并永久绑定this

何时: 如果函数中的this，需要反复被替换，就用bind创建一个新的专属的函数。永久绑定this。

如何: var 新函数=原函数.bind(对象, 要绑死的实参值,...)

比如: var calc_l=calc.bind(lilei, 10000)

创建一个和calc一模一样的新函数calc_l，并永久替换calc_l中的this为lilei对象，并永久替换第一个参数base为10000。

好处: 今后反复使用calc_l不用再反复传入lilei和10000.

强调: bind仅创建新函数，不执行函数

要执行函数: calc_l(1000,2000)

//bonus1, bonus2

强调: 用bind创建的新函数中的this，不可能再被别人用call替换。因为bind后的函数中的this已经被替换成固定的对象了。所以再用call/apply已无this可换

总结:

当函数中的this不是想要的，想换成想要的

就用call/apply/bind

1. 当仅临时替换本次调用函数中的this时——call

当实参值列表是数组形式时，必须将call换成apply，自动打散数组为单个值

2. 如果一个函数需要反复替换this为一个指定的对象时，就用bind创建一个专属的新函数，永久绑定this为指定的对象，同时可绑定部分固定的参数值。

数组API:

ES5中为数组扩展了很多新的API

1. 数组中也有indexOf方法，查找一个指定元素的位置

用法同字符串.indexOf完全一样:

var i=arr.indexOf(要找的元素, [开始位置])

// 3 , 5

//从5位置开始找下一个3

在arr数组中，从starti位置开始，查找下一个指定元素的位置i

其中: starti可省略，默认从0位置开始找

如果找到匹配的，返回元素的下标位置

如果没找到，返回-1

比如:

var str="1234321";

// 0123456

console.log(

//在arr中找第一个3的位置

str.indexOf(3/*,0*/),//2

//在arr中从3位置开始找下一个3的位置

str.indexOf(3,3),//4

//在arr中从5位置开始找下一个3的位置

str.indexOf(3,5),//-1 //找不到了

//在arr中找第一个5的位置

str.indexOf(5) //-1 //找不到

);

var arr=[1,2,3,4,3,2,1]

// 0 1 2 3 4 5 6

console.log(

//在arr中找第一个3的位置

arr.indexOf(3/*,0*/),//2

//在arr中从3位置开始找下一个3的位置

arr.indexOf(3,3),//4

//在arr中从5位置开始找下一个3的位置

arr.indexOf(3,5),//-1 //找不到了

//在arr中找第一个5的位置

arr.indexOf(5) //-1 //找不到

);

2. 判断: 判断数组中的元素是否符合要求

arr.every(条件) 判断数组中是否所有元素都符合条件

每个

arr.some(条件) 判断数组中是否包含符合条件的元素

一些

如何: 仅以every为例

var bool=arr.every(function(elem, i, arr){//规定

//elem: 自动获得当前位置上的元素值

//i: 自动获得当前位置下标i

//arr: 自动获得.前的数组对象

return 判断条件

//如果当前元素值elem，符合判断条件要求，返回true

//如果当前元素值elem，不符合判断条件，返回false

})

执行原理: every会自动遍历arr中每个元素，每遍历一个元素，就用回调函数在当前元素上执行一次。每次调用是都会自动给回调函数传入当前元素值、当前位置和当前数组对象。中途every会记录每个元素判断后得到的结果。最后，只有所有元素判断的结果都为true，整体才返回true。只要有一个元素的判断结果返回false，整体就返回false

比如:

var arr1=[1,2,3,4,5];

var arr2=[2,4,6,4,2];

//判断哪个数组全是偶数

console.log(

arr1.every(function(elem){

return elem%2==0

}),//false

arr2.every(function(elem){

return elem%2==0

})//true

);

day 08

正课:

1. ES6

1.ES6:

ECMAScript的第6个版本: 在不改变原理的基础上，尽量简化了代码。

let:

什么是: 专门代替var，用于声明变量用的关键词

何时: 今后所有的var，都用let代替

为什么:

var的两个缺点:

1. 声明提前: 打乱了程序正常执行的顺序

2. 没有块级作用域: 块内的变量很有可能提前到块外部，影响原本正确的外部的程序。

块: if(){ ... }else if(){ ... }else{ ... }

for(){ ... }

while(){ ... } do{ ... }while();

都是块，但都不是作用域

其内部的变量，都会被提前到块外对外部造成不可预期的影响。

比如:

var t=0;

function fun(){

t+=10;//原本就是想对全局t+10

}

fun();

console.log(t); //10

过了一段时间/其它人给函数中添加了一段不会执行的代码:

var t=0;

function fun(){

var t//undefined;

t+=10;//原本就是想对全局t+10

//因为有了局部变量t，就无法修改全局了

var err=false;

if(err){ //if根本没执行

//if不是作用域，拦不住内部的t被提前到外部函数的顶部

var t=new Date();

... ...

}

fun();

console.log(t); //0

结论: 今后所有的var都用let代替

let的两个作用:

1. 阻止声明提前: 在let a之前，不允许使用变量a

在程序中，相同范围内，不允许重复声明两个let a;

2. 让if while for do while块都变成作用域，块内部的变量无法提前到外部，也就不会影响外部。

let的原理: 其实let底层就是一个匿名函数自调

let相当于做了两件事:

1. 用匿名函数自调包裹当前范围内的剩余代码

2. 将let后的变量a，更名为_a

比如:

再比如:

for+let: 会形成闭包

for(let i=0;i<3;i++){

arr[i]=function(){console.log(i)}

//(function(_i){

//arr[_i]=function(){console.log(_i)}

//})(i)

}

箭头函数: 对所有函数定义的简写:

function 函数名(形参列表){ 函数体; return 返回值 }

var 函数名= function (形参列表){ 函数体; return 返回值 }

3句话:

1. 去function，在()和{}之间加=>

(形参列表)=>{ 函数体; return 返回值 }

2. 如果形参列表中只有一个形参，可省略()

形参1=>{ 函数体; return 返回值 }

3. 如果函数体只有一句话，可省略{}

形参1=>一句话

如果仅剩的一句话，还是return，必须去return

省略{}后，结尾的分号，必须省略

箭头函数的双刃剑: 箭头函数中的this，是内外通用的

比如:

var lilei={

sname:"Li Lei",

friends:["tom","jerry","jack","rose"],

intr:function(){

//this->lilei

this.friends.forEach(

function(name){//回调函数

//不加bind，回调函数中的this->window

console.log(`${this.sname} 认识 ${name}`);

}.bind(this) //加上bind才能将函数内部错误的this换成外部正确的this

)

}

如果觉得bind不直观，可改为箭头函数:

var lilei={//对象的{不是作用域！}

sname:"Li Lei",

friends:["tom","jerry","jack","rose"],

intr:function(){//这里的function不能改箭头，一旦改为箭头，this->window

//this->lilei

this.friends.forEach(

//内部的function可改为箭头函数，因为希望和外部的this通用！this->lilei

name=>console.log(`${this.sname} 认识 ${name}`)

)

}

总结: 如果希望内外this一致时，就可改为箭头函数，代替bind

如果不希望内外this相同时，就不可改为箭头函数。比如: 对象中的方法不能改箭头；事件处理函数不能改箭头

for of: 快速遍历一个数组的内容的最简化写法

总结: 遍历一个数组:

1. for循环

for(var i=0;i<arr.length;i++){

arr[i] //获得当前数组元素

}

最灵活的遍历，即可控制遍历的顺序，又可控制遍历的步调

2. forEach简化:

arr.forEach((elem,i)=>{

elem //当前数组元素

})

问题: 只能从头到尾依次遍历每个元素，不能控制顺序（从后向前或从前向后）和步调(2,4,6,... 5,10,15,... )

何时: 如果既关系内容，又关心位置，但不会改变遍历的顺序或步调时

3. for of更简化:

for(var elem of arr){

//of会依次取出索引数组中的每个元素值

elem //当前数组元素

}

问题：只能获得元素内容，无法获得元素位置

所以: 仅关心元素内容时，才用for of

vs for in

1. 使用场合: for of专门遍历索引数组

for in专门遍历关联数组

2. of vs in:

of只取元素值

in 只取属性

比如: var names=["亮亮","然然","东东"]

for(var name of names){

//of依次取出names数组中每个人名保存到前边的变量name中

console.log(name + " - 到!");

}

参数增强:

1. 默认值:

ES6中可以对形参列表中的最后一个形参设置默认值

何时: 如果只有最后一个形参不确定时

如何:

//定义函数find，在arr中查找指定元素出现的位置

//如果不给第三个参数，则默认从0位置开始找

//如果给第三个参数，则从给定的位置向后找

function find(arr,elem,starti){

/*方法一: if判断

if(starti===undefined){

starti=0;

}*/

//方法二: 短路

//starti=starti||0;//0是starti的备胎

//||会自动将前后转为boolean

//如果starti转换后不是false，就首选starti使用。如果starti转换后为false，就用0代替starti；

console.log(`在arr中,从${starti}位置开始，找下一个${elem}出现的位置...`);

}

//方法三: ES6的默认值

function find(arr,elem,starti=0){

//如果没有给starti传参，则自动用0代替！

console.log(`在arr中,从${starti}位置开始，找下一个${elem}出现的位置...`);

}

var arr=[];

find(arr,3);//从0位置开始

find(arr,3,5);//从5位置开始找

2. 剩余参数: 代替arguments

什么是: 让函数可以自动收集结尾多个不确定的参数值

何时: 如果在函数形参的结尾，有不确定个数的参数值传入，则可用剩余参数方式收集

为什么:

arguments: 2大缺点:

1. 不是纯正的数组类型对象，数组家的API一个都不能用

2. 只能收集所有参数值，无法有选择的收集部分参数值

如何: 2步:

1. 在定义函数时，在可以确定的形参后添加"...数组名"

2. 在函数内，"数组名"数组中，就自动收集了除已经确定的形参之外的剩余实参值。

比如：

定义函数时:

function calc(ename,...arr){

调用时:

calc("Li lei",10000,2000,3000);

//...arr[10000,2000,3000]

calc("Han Meimei",5000,1000,2000,3000);

//...arr[5000,1000,2000,3000]

优点: 1. 可有选择的获得部分实参值

2. arr是纯正的数组，数组家的API可以随便用！

3. 打散数组: 代替apply，专门用于打散数组类型的参数

何时: 只要函数需要多个零散的参数值，但给定的参数值却是放在一个数组中传入的，发生不一致，就要打散数组

apply一定有问题:

apply的主要目的是替换this，顺便打散数组

如果只希望打散数组参数，和this无关时，用apply就会很别扭.

比如: Math.max(arr)不支持数组中查找最大的元素

传统: 可用: apply打散数组类型参数为单个值

console.log(Math.max.apply(null,nums));

console.log(Math.max.apply(Math,nums));

console.log(Math.max.apply(nums,nums));

apply的第一个参数即没用，又必须写

解决: 不用apply,用...

如何: console.log(Math.max(...nums))

// 拆

...先将nums数组打散为单个值，再陆续传给max

总结:

1. 如果在定义函数时，形参列表中...arr，是收集剩余参数保存到数组的意思

2. 如果在调用函数时，在实参列表中...arr，作用是相反的，是打散数组为单个值，再传入。

解构:

什么是: 仅提取出一个大对象中的部分成员单独使用

何时: 如果只使用一个大对象中的一小部分成员时

如何: 3种情况:

1. 数组解构: 下标对下标:

var date=[2019,5,5];

/*var y=data[0]

var m=data[1]

var d=data[2]*/

var [y,m,d]=date;

y m d

2. 对象解构: 属性对属性:

比如:

var user={

uid:1001,

uname:"dingding",

set:1,

signin:function(){

console.log("登录...");

signout:function(){

console.log("注销...");

signup:function(){

console.log("注册...");

}

//var {uid:uid,signup:signup}=user;

var {uid,signup}=user;

console.log(uid);

signup();

原理:

3. 参数解构:

什么是: 在向函数中传参时，将一个大的对象，打散后，传递给对应的形参变量.

何时: 多个形参不确定时，又要求按顺序传入时、

为什么:

1. 默认值: 只能应对结尾一个参数不确定时

2. 剩余参数: 虽然可应对多个参数不确定的情况

但无法规定传入参数的顺序

比如:

function calc(ename, base,饭补, 高温,房补)

calc(lilei, 10000, , 200, 600)

calc(hmm, 10000, , , 200)

calc(jack, 10000, , 300, 500)

总结: 当多个形参都不确定时，且每个实参值必须对位传给指定的形参变量时，单靠调整形参的个数和顺序，无法满足所有调用的情况

解决: 参数解构:

如何: 2步:

1. 定义形参时，所有的形参变量都要定义在一个对象结构中

比如:

//1. 定义形参列表时，就用对象结构定义

function ajax({

//与顺序无关

url:url,

type:type,

data:data,//不确定

dataType:dataType//不确定

}){

console.log(`向${url}发送${type}请求`);

if(data!=undefined&&type=="get"){

console.log(`在url结尾拼接参数?${data}`)

}

if(data!=undefined&&type=="post"){

console.log(`xhr.send(${data})`);

}

if(dataType=="json"){

console.log(`JSON.parse(返回结果)`);

}

2. 调用函数传参时，所有实参值，都要放在一个对象结构中整体传入。

比如:

ajax({

url:"http://localhost:3000/products/getProductsByKwords",

type:"get",

data:"kw=macbook i5",

dataType:"json"

});

总结: 参数解构，其实就是对象解构在传参时的应用而已

day 09

正课:

1. ES6

OOP:

1. 对对象直接量的简写: 2处:

1. 如果对象的成员值来自于外部的变量，且属性名和变量名相同时，可只写一个:

比如: user.js

var signin=function(){ 登录... }

var signup=function(){ 注册... }

var signout=function(){ 注销... }

var obj={ signin:signin, signup:signup, signout:signout };

{ signin, signup, signout };

//将三个函数放在一个对象中导出export

module.exports=obj

2. 对象直接量中方法的定义不需要加":function"

为什么: 对象中的方法，不能用箭头函数简写。一旦简写，方法中的this不再指向当前对象，很可能指向全局的window。

比如:

var lilei={

sname:"Li Lei",

intr:function(){//不能改成箭头函数

... this.sname ...

}

解决:

var lilei={

sname:"Li Lei",

intr (){//不要加箭头

//等效于intr:function()，可保持this不变！

... this.sname ...

}

2. class

什么是class:

用途: 描述一类事物统一属性结构和功能的程序结构

本质: 其实就是以前的构造函数+原型对象的整体

为什么: 因为构造函数和原型对象分开的写法不符合封装的含义。

如何: 3句口诀

//1. 用class{}包裹构造函数和原型对象方法

class Student{

//2. 构造函数名提升成类型名，所有构造函数更名为constructor

constructor(sname,sage){

this.sname=sname;

this.sage=sage;

}

//3. 所有方法不再需要prototype前缀，不再需要=function

intr(){

console.log(`I'm ${this.sname}, I'm ${this.sage}`);

}

class的用法和存储结构跟ES5中构造函数创建的对象用法和存储结构是完全相同的

3. class之间的继承:

问题: 两种类型之间存在部分相同的属性结构和方法定义，代码可能出现重复编写。

解决: 定义抽象父类型: 2步:

1. 定义抽象父类型集中定义多个子类型共有的属性和方法

1.1 在父类型的构造函数中仅定义相同部分的属性

1.2 在父类型原型对象中仅定义相同部分的方法

2. 让子类型继承父类型:

2.1 子类型使用extends继承父类型

2.2 子类型构造函数中先用super调用父类型构造函数

比如:

//定义敌机类型

//所有敌机都有名称，速度和分值三个属性

//所有敌机都可以飞行，击落敌机可以得分

//定义蜜蜂类型

//所有蜜蜂都有名称，速度和分值三个属性

//所有蜜蜂都可以飞行，击落蜜蜂可以的奖励

//但是，因为敌机和蜜蜂两种类型拥有部分相同的属性和方法，导致代码重复，不便于日后维护

//所以，应该先定义抽象父类型"敌人类型"，集中保存两种子类型部分相同的属性和方法。

class Enemy{

//抽象父类型构造函数中集中保存所有子类型共有的属性部分

constructor(fname,speed){

this.fname=fname;

this.speed=speed;

}

//抽象父类型原型对象中集中保存所有子类型共有的方法

fly(){

console.log(`${this.fname}以时速${this.speed}飞行`);

}

//子类型必须继承(extends)父类型，才能获得父类型中的方法

class Plane extends Enemy{

//子类型构造函数中:

constructor(fname,speed,score){

//先借用父类型构造函数(super)帮忙添加共有的属性部分

super(fname,speed);//Enemy中的constructor()

//再自己添加本类型自有的独特的属性

this.score=score;

}

//Prototype中：只定义自己类型特有的方法即可，不必定义相同部分的方法。

getScore(){

console.log(`击落${this.fname}得${this.score}分`);

}

class Bee{

constructor(fname,speed,award){

this.award=award;

}

getAward(){

console.log(`击落${this.fname}获得${this.award}奖励`);

}

var f22=new Plane("F22",1000,5);

//表面上f22是Plane一个妈妈创建的，但是其实f22中三个属性:fname和speed是奶奶给的，只有score才是妈妈给的。是两个人合作创建的f22对象。

console.log(f22);

f22.fly();

f22.getScore();

var bee=new Bee("小蜜蜂",50,"1 life");

console.log(bee);

bee.fly();

bee.getAward();

Promise:

什么是: 专门实现异步函数，顺序执行的一种机制

为什么: 避免回调地狱

何时: 多个异步函数，必须顺序执行时

如何:

2步:

1. 定义异步函数内:

function liang(){

return new Promise(function(open){

亮要执行的所有代码(包含异步代码)

//当亮的任务执行完，自动打开open()

//当open()，自动执行下一个then中的函数

})

}

2. 多个支持promise的异步函数，用.then串联起来

liang().then(ran).then(dong).then(function(){结束})

用class对构造函数和原型对象的封

DOM&BOM

day 01

正课:

1. 什么是DOM:

2. DOM Tree:

3. 查找元素:

1. 什么是DOM: document object model

什么是: 专门操作网页内容的一套对象和函数的集合

DOM其实是一个标准: W3C制定的，规定了所有浏览器操作网页内容的API统一标准。

为什么: 1. DOM是操作网页内容的唯一办法！

2. DOM标准几乎所有浏览器100%兼容.

何时: 今后只要操作网页的内容，只能用DOM

包括:

查找元素，修改元素，添加元素，删除元素，事件绑定

2. DOM Tree:

什么是: 内存中保存网页中所有内容的树形结构

网页中的一切内容，在内存中，都是保存在一棵DOM树中

为什么: 网页中的内容是父子级嵌套的包含关系

树形结构是最直观的描述上下级包含关系。

如何:

1. 当浏览器读取到一个html内容时

先在内存中建立一个树根节点: document

document就代表整个网页

document.write("xxx") 向网页中写入一句话

2. 浏览器一边扫描HTML内容，一边在DOM树上创建节点对象

网页中每项内容都是DOM树上的一个节点对象

3. 查找元素: 4种:

1. 不需要查找，就可直接访问的元素:

document

document.documentElement -> <html>

document.head -> <head>

document.body -> <body>

提示: 在控制台中输出元素节点，仅输出DOM树结构，而不是输出节点对象

如果确实需要查看一个元素对象的属性: console.dir(元素)

2. 按节点间关系查找:

节点树: 包含所有网页内容的完整树结构

2大类关系:

1. 父子: 4种:

元素.parnetNode 获得元素的父节点

父元素.childNodes 获得父元素下的所有直接子节点的集合

返回: 多个平级子元素组成的类数组对象

父元素.firstChild 获得父元素下的直接子节点中第一个节点

父元素.lastChild 获得父元素下的直接子节点中的最后一个节点

2. 兄弟: 2种:

元素.previousSibling 获得元素的前一个平级的兄弟节点

前一个兄弟

元素.nextSibling 获得元素的下一个平级的兄弟节点

下一个兄弟

问题: 网页中一切内容都是节点，包括看不见的空格，换行都是节点对象，极大的干扰查找！

解决: DOM出了一种新的树:

元素树: 仅包含元素节点的树结构

优点: 不会受看不见的空字符干扰查找！

2大类关系:

1. 父子: 4种:

元素.parentElement 获得元素的父元素

和parentNode几乎通用

因为能当爹的一定是元素

父元素.children 获得父元素下的所有直接子元素的集合

返回: 多个直接子元素组成的类数组对象

父元素.firstElementChild 获得父元素下的直接子元素中第一个元素

父元素.lastElementChild 获得父元素下的直接子元素中的最后一个元素

2. 兄弟: 2种:

元素.previousElementSibling 获得元素的前一个平级的兄弟元素

元素.nextElementSibling 获得元素的下一个平级的兄弟元素

何时使用按节点间关系查找：如果已经站在DOM树的某个节点上了，想找周围附近的节点时，首选按节点间关系查找，且必须用元素树。不要用节点树。

day 02

正课:

1. 查找

2. 修改

1. 查找: 4种:

1. 不需要查找就可直接获得的元素: 4个

document 根节点对象

document.documentElement 根元素对象<html>

document.head <head>元素对象

document.body <body>元素对象

2. 按节点间关系查找: 2大类关系，6个属性

何时: 已经站在树上的一个节点上了。

1. 父子关系:

元素.parentElement 获得元素的父元素

.parentNode

元素.children 获得元素的所有直接子元素

返回: 所有直接子元素对象组成的类数组对象

元素.firstElementChild 获得元素的第一个直接子元素

元素.lastElementChild 获得元素的最后一个直接子元素

2. 兄弟关系:

元素.previousElementSibling 获得元素的前一个相邻的平级兄弟元素

元素.nextElementSibling 获得元素的后一个相邻的平级兄弟元素

问题: 不可能所有的查找都从body为起点，一旦元素藏的很深，代码会很繁琐

3. 按HTML特征查找:

何时: 首次查找元素时

包括: 4个函数:

1. 按id查找:

var elem=document.getElementById("id")

获得元素按 id

强调: 1. .前的主语必须是document

2. 仅返回一个匹配的元素对象

如果找不到: 返回null

2. 按HTML标签名查找：

var elems=任意父元素.getElementsByTagName("标签名")

获得元素们按标签名

<标签>

强调: 1. .前的主语可以是任意父元素

比如: table.getElementsByTagName("tr")

只查找当前table下的所有tr元素对象

ul.getElementsByTagName("li")

只查找当前ul下的所有li元素对象

2. 返回当前父元素下所有符合条件的元素的类数组对象。如果找不到，返回空的类数组对象([].length=0)

3. 不仅查找直接子元素，且在所有后代中查找

比如：

<ul> ul.getElementsByTagName("li") 8个

<li>

<ul> ul.getElementsByTagName("li") 3个

<li>

</ul>

</li>

<li>

<ul>

<li>

</ul>

</li>

3. 按name属性查找:

只有表单中要将值回发给服务器端的元素，才有name属性。name属性会成为回发服务端时的变量名

比如: <form>

提交时: http://xxxx/接口?uname=xxx&upwd=xxx

何时: 几乎专门用于查找表单中的表单元素

如何:

var elems=document.getElementsByName("name");

强调: 1. .前的主语必须是document

2. 返回多个元素组成的类数组对象

如果找不到，返回[].length=0

比如:

<input type="radio" name="sex" value="1"/>男

<input type="radio" name="sex" value="0"/>女

var elems=document.getElementsByName("sex");

elems:[ <input> , <input> ]

坑:

var txtName=document.getElementsByName("uname")

希望只获得<input>姓名文本框对象

但无论在任何情况getElementsByName都返回一个类数组对象，即使只找到一个元素对象，也必须放在类数组对象中返回。

var elems=document.getElementsByName("uname");

elems: 类数组对象 [ <input> ] != <input>对象

[0]

如果想获得input姓名文本框对象，需要再多写一步下标

var txtName=elems[0];

4. 按class属性查找:

var elems=任意父元素.getElementsByClassName("class名")

强调: 1. .前可以是任意父元素

2. 返回所有符合条件的后代元素的集合

如果找不到返回空集合:[].length=0

3. 不仅查找直接子元素，且在所有后代中查找符合条件的。

比如:

<ul> ul.getElementsByClassName("child") 6个

<ul> ul.getElementsByClassName("child") 3个

</ul>

</li>

<ul>

</ul>

</li>

4. 如果一个元素被多个class修饰，只使用其中一个class就可以找到元素

var elems=父元素.getElementsByClassName("alert")

父元素.getElementsByClassName("alert-danger")

都返回: 类数组对象: [ <div>对象 ].length=1

[0]

如果只想获得唯一的div元素对象:

必须再多写一步下标:

var div=elems[0]

总结: 4种查找方式：

1. 按id查找:

var elem=document.getElementById("id")

2. 按标签名查找：

var elems=父元素.getElementsByTagName("标签名")

3. 按name属性查找：

var elems=document.getElementsByName("name")

4. 按class属性查找:

var elems=父元素.getElementsByClassName("class")

4. 其实js中也可以使用选择器查找元素: 2个函数:

1. 如果确定只找一个元素:

var elem=任意父元素.querySelector("任意复杂选择器")

2. 如果查找多个元素：

var elems=任意父元素.querySelectorAll("任意复杂选择器")

按选择器查找，效率不如按HTML特征查找

总结:

1. 如果仅靠一个条件就可查找到想要的元素:

首选按HTML查找——快

2. 如果查找条件复杂

首选按选择器查找——简单

2. 修改

内容:

1. 获取或修改元素开始标签到结束标签之间的原始HTML片段: 元素.innerHTML

2. 获取或修改元素开始标签到结束标签之间的纯文本内容: 元素.textContent

vs 元素.innerHTML 多干两件事:

1. 去掉所有内嵌标签

2. 将特殊符号翻译为正文

3. 所有表单元素的值，都必须用.value才能获得

样式:

1. 如果修改内联样式:

元素.style.css属性="属性值"

比如: div.style.display="none"; 隐藏

相当于: <div style="display:none">

div.style.display="block"; 显示

相当于:<div style="display:block">

div.style.width="400px" 必须加单位

相当于: <div style="width:400px">

特例: 如果css属性名包含-，则必须去横线，变驼峰

首字母小写，之后每个单词首字母大写

修改元素的背景图片:

div.style.backgroundImage="url(...)"

相当于: <div style="background-image:url(...)">

属性: 3种:

1. HTML标准属性: HTML标准中规定的，所有HTML元素都具有的属性: 比如: title, class, id, value, name ... ...

2种方式修改:

1. 最早的一批核心DOM函数: 4个

1. 获取一个元素指定属性的值:

元素.getAttribute("属性名")

比如: <a href="http://tmooc.cn" target="_blank">

a.getAttribute("href")
-> "http://tmooc.cn"

2. 修改一个元素指定属性的值:

元素.setAttribute("属性名","新值")

比如: a.setAttribute("target","_self")

结果: <a href="http://tmooc.cn" target="_self">

3. 判断是否包含指定属性:

var bool=元素.hasAttribute("属性名")

比如: a.hasAttribute("target") => true

a.hasAttribute("title") => false

4. 移除属性:

元素.removeAttribute("属性名")

比如: a.removeAttribute("target")

结果: <a href="http://tmooc.cn">

问题: 太长！

2. 使用HTML DOM提供的属性:

HTML DOM在核心DOM基础上，对常用的属性和元素对象提供了部分简写的代码

福利: HTML DOM已经将所有标准属性提前定义在了内存中的元素对象上！可直接用元素.属性名获取或修改。

比如: <a href="http://tmooc.cn" target="_blank">

其实: a在内存中:

a:{

id:"",

href:" http://tmooc.cn ",

target:" _blank ",

title:"",

name:""

}

所以: 获取a的href: a.href

修改a的target: a.target="_self"

判断a是否包含title: a.title!=""

移除a的target: a.target="";

特例: class属性

ECMAScript中规定: 所有js对象内部都有一个隐藏的class属性，记录当前对象的类型名: "[object Object]"

class

如果ECMAScript标准中已经提前规定过了class属性另有用途。则DOM标准中不能重复定义class属性

所以DOM标准规定class属性一律更名为className

访问元素的className属性，其实就是在访问<标签 class="">

/所有DOM效果的固定套路:

//1. 查找触发事件的元素

var d2=document.getElementById("d2");

//2. 为元素绑定事件处理函数

d2.onclick=function(){

//3. 查找要修改的元素

var d1=document.getElementById("d1");

var d2=this;

//4. 修改元素

//如果d2的内容是<<，就关闭

if(d2.innerHTML=="<<"){

//d1.style.display="none";

d1.style.width="0px";

d2.innerHTML=">>";

}else{//否则, 就打开

//d1.style.display="block";

d1.style.width="64px";

d2.innerHTML="<<";

}

2. 四大状态属性:

3. 自定义扩展属性:

day 03

正课：

1. 修改:

2. 添加/删除元素:

3. HTML DOM常用对象:

1. 修改:

内容: .innerHTML .textContent .value

属性:

1. 标准属性: 2种:

1. 核心DOM: 4个函数:

.getAttribute() .setAttribute() .hasAttribute()

.removeAttribute();

坑: 核心DOM 仅对字符串类型的属性起作用

2. HTML DOM: 元素.属性名

2. 三大状态属性: disabled selected checked

值都是bool类型，不能用核心DOM函数

只能用.操作:

比如: //想启用按钮

btn.setAttribute("disabled",false) 无效

应该: btn.disabled=false;

再比如: //想判断一个checkbox复选框是否选中:

应该: if(chb.checked==true) 可简写为 if(chb.checked)

补充: CSS中有三大状态伪类:

:checked :selected :disabled

专门选择处于某种状态的元素

3. 自定义扩展属性:

什么是: 开发人员自行添加在元素开始标签中的，HTML标准中没有的属性。

何时: 2个典型的场景

1. 代替id, class和元素选择器，用于选择触发事件的元素

2. 在网页中临时缓存业务数据

如何使用自定义扩展属性:

1. 在html开始标签中手动添加定义扩展属性:

<ANY data-属性名="属性值"

比如: <a href="#" data-trigger="tab"

2. 用js为元素添加自定义扩展属性:

不能用.添加: 因为自定义扩展属性不是标准属性，内存中的元素对象上没有！

只能用核心DOM函数添加
a.setAttribute("data-trigger","tab")

等效于: <a href="#" data-trigger="tab"

3. 读取自定义扩展属性的值:

不能用.来读取自定义扩展属性

因为自定义扩展属性不是标准属性，没有提前定义在内存中的元素对象上

只能用核心DOM的函数来获取自定义属性的值

a.getAttribute("data-自定义属性")

样式:

1. 修改内联样式: 元素.style.css属性名="属性值"

强调: 1. css属性名中如果包含-，必须去横线变驼峰

修改div的z-index为11

div.style.z-index=11;

应该: div.style.zIndex=11;

2. 如果css属性值包含单位，必须添加单位

修改: ul的高:

ul.style.height="106px"

问题: 如果同时修改一个元素的多个css样式属性，代码会很繁琐

解决: 如果批量修改一个元素的多个css样式时，都是先将样式定义在一个css的class中，再在js中只修改class属性即可.

总结:

内容: .innerHTML .textContent .value

属性:

1. 标准属性: 核心DOM四个函数或 . 都行

2. 状态属性: disabled selected checked

只能用.改

3. 自定义扩展属性:

只能用.getAttribute("data-属性名")

.setAttribute("data-属性名",值)

样式:

1. 修改内联样式: 元素.style.css属性名="值"

2. 如果批量修改样式，最好用 .className="xxx"

2. 添加/删除

1. 添加新元素: 3步

1. 创建新的空元素:

var a=document.createElement("a")

结果: <a></a>

2. 为新元素添加必要的属性

a.innerHTML="go to tmooc";

a.href="http://tmooc.cn"

结果: <a href="http://tmooc.cn"> go to tmooc </a>

3. 将新元素挂载到DOM树的指定父元素下:

为什么: 浏览器显示网页内容是根据DOM树上的节点对象画出来的。如果DOM树上的节点不变化，则浏览器不回重绘页面。

要想让浏览器将新元素画出来，只能新元素添加到DOM树的指定位置，改变DOM树，才会触发浏览器的重绘操作。

如何: 3个函数:

1. 追加到指定父元素下的末尾

父元素.appendChild(a)

2. 插入到指定元素之前

父元素.insertBefore(a,child)

将a插入到父元素下的child元素之前

3. 替换现有元素

父元素.replaceChild(a, child)

用a替换父元素下的child元素

优化: 尽量减少操作DOM树的次数，避免重绘

为什么: 每修改一次DOM树，页面会重绘一次

解决: 2种情况:

1. 如果同时添加父元素和子元素到DOM树

应该先在内存中将子元素全部添加到父元素中

最后将整个父元素一次性添加到DOM树上

只会触发一次重绘！

打开新连接的方式

网页跳转

<!DOCTYPE html>

<html>

<head>

<title>打开新链接方式总结</title>

/*打开新链接方式总结：

1. 在当前窗口打开，可后退

2. 在当前窗口打开，不可后退

3. 在新窗口打开，可打开多个

4. 在新窗口打开，只能打开一个

function fn(){

open("http://www.baidu.com" ,"_self");

}

</script>

</head>

<body>

<a href="javascript:fn()">在当前窗口打开，可后退</a>

</body>

</html>

网页的跳转

Day 04

正课：

1. 添加/删除

2. HTML DOM常用对象

3. BOM

4. ***事件

1. 添加/删除：

优化: 尽量减少操作DOM树的次数

1. 如果同时添加父元素和子元素时

应先将子元素都添加到父元素中

最后，再一次性将整个父元素加入DOM树

结果: 浏览器只重绘一次

2. 如果父元素已经在页面上了，要添加多个平级子元素

应先将平级子元素添加到文档片段对象中

最后，再一次性将文档片段对象添加到DOM树

结果: 浏览器也只重绘一次

什么是文档片段: 内存中临时保存多个子元素的虚拟父元素对象

何时使用: 只要向页面中添加多个平级子元素时

如何: 3步:

1. 创建文档片段:

var frag=document.createDocumentFragment();

创建文档片段

2. 将子元素添加到文档片段中

frag.appendChild(child)

3. 将整个文档片段添加到DOM树

父元素.appendChild(frag)

删除元素: 父元素.removeChild(child)

2. HTML DOM常用对象

Image Select/Option Table/... Form/表单元素

Image对象: 就代表页面上一个<img>元素

唯一的简化:

创建一个<img>元素: var img=new Image();

等效于: var img=document.createElement("img")

结果: <img>

Select对象: 代表页面上一个<select>元素

属性:

select.selectedIndex : 获得当前选中项的下标

select.value: 获得select中当前选中项的内容/值

如果选中的option有value，则优先返回value，如果选中的option没有value，则返回innerHTML内容代替

select.options: 获得select下所有的option元素对象组成的集合。

select.options.length 获得select下所有option元素对象的个数

select.length: 等效于select.options.length

比如: 强行select.length=0; 会清空select

Option:代表select元素下的每个option元素对象

简化: 创建:

var opt=new Option(innerHTML, value)

Table对象: 代表页面上一个table元素

Table是个大家族，采用逐级管理的方式:

Table管着行分组：

Table可添加行分组: var thead=table.createTHead();

等效于: var thead=document.createElement("thead")

table.appendChild(thead);

var tbody=table.createTBody()

var tfoot=table.createTFoot();

删除行分组: table.deleteTHead();

table.deleteTFoot();

获取行分组: table.tHead

table.tFoot

table.tBodies[i]

行分组管着行:

行分组可添加行: var tr=行分组.insertRow(i)

在行分组内i位置，添加并插入一个新行

原位置的行不是替换，而是向后顺移一位

固定套路:

1. 末尾追加一个新行

var tr=行分组.insertRow()

2. 在开头插入一个新行:

var tr=行分组.insertRow(0)

行分组可删除行: 行分组.deleteRow(i)

坑: i要求是行在行分组内的相对下标位置

问题: 行在行分组内的相对下标位置无法自动获得

解决: 今后删除行不要用行分组

应该直接用table对象.deleteRow(i)

因为i要求是行在整个表中的下标位置

又因为行在整个表中的下标位置可用tr.rowIndex自动获得，所以，今后删除行的标准写法:

table.deleteRow(tr.rowIndex);

行分组可获取行: 行分组.rows[i]

行管着格:

行可以添加格: var td=tr.insertCell(i)

固定套路: 在行末尾追加新格:

var td=tr.insertCell()

问题: insertCell只能创建td，不能创建th

行可以删除格: tr.deleteCell(i)

行可以获取格: tr.cells[i]

补充: DOM中三大对话框:

alert confirm prompt

警告确认输入

Form对象: 代表页面上一个<form>元素

获取: 也不需要查找，就可直接获得:

浏览器已经将网页中所有form元素保存在了document对象的forms集合中: var form=document.forms[i]

如果网页中只有一个表单，则document.forms[0]

属性: form.elements 获得表单中所有表单元素的集合

form.elements.length 获得表单中表单元素的个数

form.length 等效于 form.elements.length

获得表单中倒数第二个表单元素——提交按钮:

var btnSubmit=form.elements[form.length-2]

表单元素对象: <input> <button> <select> <textarea>

获取: 如果要获取的表单元素有name属性

可用: form.name名

3. BOM: Browser Object Model

什么是: 专门操作浏览器窗口或软件的一套对象和函数

何时: 如果想操作浏览器窗口，或访问浏览器软件相关的配置信息

如何:

包括:

window: 2个角色:

1. 代替ES标准中的global充当全局作用域对象

2. 保存所有除ES外的DOM和BOM的对象和函数库

包括:

全局的BOM函数和属性:

alert() confirm() prompt() window.open() window.close() ... ...

掌控特定功能的对象:

location对象专门掌控地址栏

history对象掌控着前进/后退/刷新

navigator对象掌控着浏览器的配置信息

document对象掌控着网页的所有内容

screen 对象掌控着和显示屏有关的信息

event对象掌控着浏览器中发生的所有事件

window中常用的全局函数或属性:

1. 对话框: alert() confirm() prompt()

2. 窗口大小:

2组:

1. 完整窗口大小: window.outerWidth/outerHeight

2. 文档显示区: window.innerWidth/innerHeight

文档显示区: 浏览器窗口内专门用于显示网页内容有限的白色区域。

3. 打开和关闭窗口:

打开窗口: window.open() 和<a>的用法几乎完全一样

总结: 用程序打开新链接有几种效果:

1. 在当前窗口打开，可后退:

html: <a href="url" target="_self">

js: open("url" , "_self")

2. 在当前窗口打开，禁止后退:

js: location.replace("新url")

用新url代替history中当前旧的url，保持history中只有一条记录。从而禁止后退。

3. 在新窗口打开，可同时打开多个:

html: <a href="url" target="_blank">

js: open("url" , "_blank")

4. 在新窗口打开，只能打开一个:

html: <a href="url" target="自定义窗口名">

js: open("url" , "自定义窗口名")

在浏览器中，每个窗口都有内置的name属性来唯一标识一个窗口

浏览器规定，相同name名的窗口只能打开一个。

其实target属性，是在给新窗口起名

如果target的名字是自定义的名称，则新打开的窗口，只能开一个。不能重复开。

但是，target有两个内置的名称:

_self: 用当前窗口自己的名字，给新窗口，导致新窗口覆盖现有窗口

_blank: 不给新窗口指定任何名称，浏览器会自动随机分配新窗口的名称。导致新窗口的名称不会重复

关闭窗口: window.close()

history: 保存当前窗口打开后，成功访问过的url的历史记录的集合。

何时: 用程序执行前进，后退，刷新

如何: history.go(1) 前进一步

history.go(0) 刷新

history.go(-1) 后退一步

location:

什么是location: 专门保存当前正在打开的url的信息的对象

何时: 1. 获得url地址栏中各个部分的参数时

2. 通过操作地址栏中的地址实现跳转和刷新时

如何:

1. 获得url中的各个部分:

http://localhost:3000/public/products.html#top?kwords=macbook

协议主机端口相对路径锚点查询字符串

location.href 完整url

location.protocol 协议部分

location.host 主机名+端口号: localhost:3000

location.hostname 主机名 localhost

location.port 端口号 3000

location.pathname 相对路径 public/products.html

location.hash 锚点地址 #top

location.search 查询字符串 ?kwords=macbook

想进一步获得变量值: location.search.split("=")[1]

2. 通过操作地址栏实现跳转和刷新:

1. 在当前窗口打开新链接，可后退:

location.href="新url" <==> open("新url","_self")

2. 在当前窗口打开新链接，禁止后退:

location.replace("新url")

3. 刷新当前页面:

location.reload(); <==> history.go(0)

navigator:

什么是: 保存浏览器配置信息的对象

何时: 判断浏览器的名称和版本号

如何:

1. navigator的userAgent属性包含了浏览器的名称和版本号——字符串——没有标准

测试: window 10的 Edge浏览器

Day 05

事件对象e：当事件发生时，浏览器自动创建的，封装事件信息和操作事件的API 的对象；

事件对象—— 01可以封装事件的信息 02操作事件的API的

正课:

1. 事件:

什么是: 浏览器自动触发的或用户手动触发的，页面中元素状态的改变。

事件发生时如何执行一项任务: 绑定事件处理函数

什么是: 当事件发生时自动调用的一个函数

本质: 是元素对象上一个事件名属性

比如: btn.onclick sel.onchange txt.onfocus

何时: 只要希望发生事件时自动执行一项任务

如何:

在事件发生前就提前绑定事件处理函数到元素的事件属性上。

如何绑定: 3种:

1. 在html中绑定:

html中: <ANY onclick="fun()">

js中: function fun(){ ... }

问题: 不符合内容与行为分离的原则，不便于维护

2. 在js中用赋值方式绑定:

js中: 元素对象.onclick=function(){

this->当前触发事件的元素对象本身

}

问题: 一个事件属性，只能绑定一个处理函数

3. 在js中通过添加事件监听对象的方式: ——最灵活

元素对象.addEventListener("事件名",处理函数)

添加事件监听对象

强调: 事件名本来是没有on: click， change， focus

只不过在用.时，为了和其它普通属性区分，才加了on前缀。

原理:

什么是事件监听对象: 一个保存元素+事件名+处理函数一套组合的对象:

比如: btnShoot.addEventListener("click",fun1);

先创建一个事件监听对象:

{

元素: btnShoot,

事件: click,

处理函数: fun1

}

然后，addEventListener会将监听对象添加到浏览器中一个隐藏的事件队列中。

当事件发生时，浏览器会遍历事件队列中的每个监听对象，选择匹配的监听对象中的处理函数执行。

如何从元素上移除一个处理函数:

元素对象.removeEventListener("click",处理函数)

处理函数决不能用匿名函数

强调: 如果一个处理函数有可能被移除，则绑定时，就不能用匿名函数。必须用有名称的函数。移除时，必须使用函数名，找到原函数对象，才能移除。

事件模型: 从点击元素触发事件开始，到事件处理函数执行完，期间所发生的一切事情。

DOM标准规定: 从点击元素触发事件开始，到事件处理函数执行完，期间共经历三个阶段:

1. 捕获阶段: 由外向内，记录各级父元素上的处理函数

2. 目标触发: 先触发最初发生事件的元素上的处理函数

目标元素(target): 最初发生事件的实际想点击的元素

3. 冒泡阶段: 由内向外，依次执行捕获阶段记录的父元素上的时间处理函数。

事件对象:

什么是: 当事件发生时，浏览器自动创建的，封装事件信息和操作事件的API 的对象

何时: 1. 想改变事件默认的执行行为时

2. 获得事件信息时

如何:

创建: 不用自己创建，直接使用

在事件发生时，自动获取事件对象:

事件对象总是作为处理函数的第一个参数传入处理函数中。——信任

如何获取事件对象:

btn.onclick=function(e){ //event的缩写

//当事件发生时，会自动调用处理函数，并自动传入事件对象给形参e

}

事件对象能干什么?

1. 停止冒泡(Propagation): e.stopPropagation()

2. 利用冒泡(事件委托/事件代理)

优化: 尽量减少事件监听对象的个数

因为浏览器触发事件，是在监听队列中遍历查找符合条件的监听对象来触发。

所以，监听对象越多，事件响应就越慢

如何: 当多个平级子元素都需要绑定相同的事件时，只要在父元素上绑定一次事件处理函数。所有孩子就可冒泡共用。

2个难题:

1. this已经不指子元素了，而是指父元素:

因为处理函数是定义在父元素上，且是等到事件冒泡到父元素时才触发。

如何获得实际单击的子元素:

用e.target代替this

目标

e.target可自动获得实际点击的目标子元素

且不随冒泡而改变

总结: this->不求天长地久，只愿曾经拥有

e.target->一旦拥有别无所求

2. 有可能点在正确的子元素上，也有可能点偏，点在不想要的元素上。

解决: 在正式执行操作前，必须先验证e.target是不是想要的。

比如: 验证标签名，验证class, ... ...

补: 如何获取元素的标签名: 元素.nodeName

但nodeName返回全大写的标签名:

BUTTON A IMG LI ... ...

阻止默认行为:

问题: 有些浏览器的某些元素拥有默认的行为，而默认行为不是我们想要的。

比如: <a href="#"> 默认行为会在url地址栏结尾添加#，擅自篡改地址栏。

如何: e.preventDefault();

阻止默认

预告: HTML5拖拽API中，几乎所有函数:

一上来先是两句话:

e.stopPropagation()

e.preventDefault();

获得鼠标的坐标:

事件对象中包含3组坐标:

1. 相对于整个屏幕左上角的坐标:

e.screenX e.screenY

2. 相对于文档显示区左上角的坐标:

e.clientX e.clientY

3. 相对于当前所在元素左上角的坐标:

e.offsetX e.offsetY

Jquery

Day 01

正课:

1. 什么是jQuery

2. 如何使用jQuery

3. 查找元素

4. 修改元素

1. 什么是jQuery:

第三方开发的执行DOM操作的极简化的函数库

第三方: 先下载，才能使用

执行DOM操作: 学jQuery还是在学DOM的增删改查+事件绑定。

极简化: jQuery是DOM操作的终极简化

函数库: jQuery中都是用函数解决一切问题，没有属性。

为什么: 2个原因:

1. 是DOM操作的终极简化: 4个方面

增删改查

事件绑定

动画

ajax

2. 解决了绝大部分兼容性问题:

凡是jQuery让用的，都没有兼容性问题

比如: IE8: 不支持:nth-child(i) 选择器

document.querySelector("xxxx:nth-child(i)")错误

如果使用jQuery: $("xxxx:nth-child(i)") 正确！

原理: jQuery先检查兼容性问题。

如果发现当前浏览器不兼容，会用js模拟出选择器的效果。

CSS选择器:nth-child(i) -> js中的children[i-1]

jQuery的问题:

1. 仅限于PC端

2. 仅仅是对DOM操作的每一步进行的简化。并没有彻底简化开发的步骤。

2. 如何使用jQuery:

下载: jquery.com

1.x: 兼容旧浏览器 1.11.3

未压缩版: 拥有完备的注释，代码格式和见名知义的变量名。——可读性好。问题: 体积大不便于下载和传输。

压缩版: 去掉注释，所有空格/换行等格式，最简化了变量名。——体积极小。问题: 可读性差。——上线后/生产环境中

Webpack工具: 将HTML,CSS,JS代码压缩打包为极简化的代码。

2.x: 不再兼容旧浏览器

3.x: 不兼容旧浏览器，增加了部分新特性

引入: 在需要使用jQuery的页面中先引入jquery.js文件

然后再编写自定义js程序

原理:

引入jquery-1.11.3.js后:

在内存中添加了一种新的类型jQuery，包括两大部分:

1. 构造函数: 创建该类型的子对象，并填充对象的内容

function jQuery(选择器){

//...

}

2. 原型对象: 保存该类型所有的孩子共用的函数

jQuery.prototype:{

//所有jQuery子对象可使用的公共的函数

}

只要想使用jQuery家的简化版API，必须先创建jQuery类型的子对象。又因为jQuery家的函数都是为了操作DOM元素的，所以创建jQuery对象时，都要找到DOM树上的原生DOM元素，保存到jQuery对象中。

比如: var btn1=new jQuery("#btn1")

先在原生DOM树上找到id为btn1的原生DOM按钮。

然后创建jQuery对象，保存找到的这个按钮对象。

但是new jQuery太麻烦，所以jQuery构造函数中，提前包含了return new jQuery，调用jQuery()，就等效于调用new jQuery了，以此省略new:

function jQuery(选择器){

return new jQuery(选择器)

}

所以: var btn1=jQuery("#btn1")

但是jQuery的名字还是长，于是作者: $=jQuery

所以，用$=用jQuery=new jQuery

所以: var btn1=$("#btn1");

因为jQuery对象是jQuery家的孩子，不是DOM家的孩子，所以jQuery对象不能使用原生DOM的API，同理原生DOM的按钮也不能使用jQuery的简化版API，所以变量名必须有所区分，所以习惯上所有jQuery对象的变量都以$开头，比如: var $btn1=$("#btn1")

对jQuery对象，调用简化版函数，jQuery对象会自动翻译为对应的原生函数，自动作用于内部保存的原生DOM对象上，比如: $btn1.click(function(){ ... })

就等效于: btn1.addEventListener("click",function(){ ... })

再比如: 调用$btn1.html()，会被自动翻译为btn1.innerHTML

本质: jQuery对象其实是一个保存多个找到的DOM元素的类数组对象

3. 查找: 2种:

1. 按选择器查找元素:

var $elems=$("任意选择器")

jQuery支持所有CSS3的选择器

同时还扩展了一批新的选择器：

回顾: 子元素过滤: 同CSS

在多个父元素内，选择处在指定位置的子元素

:first-child :last-child :nth-child(i) :only-child

新: 基本过滤/位置过滤: jQuery新增的

先将符合条件的所有元素取出来，放在一个大的集合中，再按元素在集合中的顺位编号选择指定的元素

:first :last :even :odd :eq(i) :gt(i) :lt(i)

偶数奇数等于大于小于

新: 内容过滤: 用元素的内容中的文本关键词作为查询条件:

1. :contains(关键词): 只要元素的内容中包含"关键词"，就选中该元素

2. :has(选择器): 只要当前元素的内容中包含符合"选择器"条件的子元素，就选中

新: 可见性过滤: 选择那些可见的或不可见的元素

:hidden 匹配看不见的隐藏元素

只能匹配两种: display:none 和 input type="hidden"

不能匹配两种: visibility:false 和 opacity:0

:visible 匹配看的见的元素

新: 表单过滤: 专门查询表单中的表单元素的选择器

:input 选择所有表单元素: input select textarea button

vs input 仅选择input元素

每种type都对应一种选择器:

:text :password :checkbox :radio :file ... ...

2. 按节点间关系查找元素:

比如: $elem.next() 获得当前元素的下一个兄弟元素

$elem.nextAll() 获得当前元素之后所有的兄弟元素

4. 修改:

内容: 3种:

1. 原始的HTML片段: .innerHTML => .html()

2. 如果想去内嵌的标签或特殊符号: .textContent => .text()

3. 表单元素的值: .value => .val()

属性:

1. HTML标准属性:

2. 三大状态属性: checked selected disabled

$elem.prop("状态",bool)

3. 自定义扩展属性:

样式: .style.css属性=值 => $elem.css("css属性名","值")

福利: 不用写单位——仅jq有

问题: 一次只能改一个css属性:

解决: 同时修改多个css属性:

$elem.css({

"css属性1": 值1,

... : ... ,

})

jQuery函数的特点: 3个:

1. 自带遍历效果: 对jQuery对象整体调用函数，等效于自动对内部保存的多个原生DOM对象，分别调用函数。

比如: 页面上三个button，每个按钮都要绑定单击事件:

//用DOM做

var btns=document.getElementsByTagName("button");

for(var btn of btns){//只能遍历

btn.onclick=function(){ ... }

}

//用jQuery做，不用遍历，只要对整体调用一次click()

var $btns=$("button");

$btns.click(function(){ ... })

等效于自动: btns[0].onclick=function(){ ... }

btns[1].onclick=function(){ ... }

btns[2].onclick=function(){ ... }

2. 一个函数两用: 调用一个函数时，如果不给新值，自动执行获取值的操作。如果给了新值，自动切换为更新的操作。

比如: DOM获取或修改一个按钮的内容:

获取: btn.innerHTML

修改: btn.innerHTML=新值

jQuery中:

获取: btn.html()

修改: btn.html(新值)

3. 几乎所有函数都返回正在遍历的jQuery对象，便于重复使用

比如: $("ul>li:first").css(...) //return $("ul>li:first")

可继续对$("ul>li:first")继续执行操作

比如: 可直接跟.html()，继续访问第一个li的内容

链式操作: 将多个操作通过.连接起来连续调用，称为链式操作。

前提: 必须对每一步函数调用的返回值了如指掌

优点: 减少变量的使用，减少查找的次数，优化程序

补: var bool=$elem.is("选择器")

判断当前元素是否满足选择器的条件要求

返回bool值: 如果elem元素的特征满足选择器的要求，就返回true，否则返回false。

Day 02

正课:

1. 修改

2. 按节点间关系查找

3. 添加/删除/替换/克隆

4. 事件绑定

1. 修改:

内容:

1. 原始HTML片段内容:

.innerHTML -> .html([新内容]) 两用

2. 纯文本内容(去内嵌标签):

.textContent -> .text([新内容]) 两用

3. 表单元素的值:

.value -> .val([新值]) 两用

属性:

1. HTML标准属性: 2种:

1. 核心DOM:

元素.getAttribute()

元素.setAttribute()

↓

$元素.attr("属性名"[,新值]) 两用

2. HTML DOM:

元素.属性名=值

property

↓

$元素.prop("属性名"[,新值]) 两用

无论attr还是prop都可同时修改多个属性:

$元素.attr|prop({

属性名:值,

... : ... ,

})

2. 状态属性: disabled checked selected

不能用核心DOM的getAttribute()或setAttribute()访问

自然也就不能用$元素.attr()访问

只能用.访问: chb.checked=true;

而在jquery中只能用: $元素.prop()

3. 自定义扩展属性:

只能用核心DOM的getAttribute()和setAttribute()访问

自然也能用jQuery的$元素.attr()

但是，不能用.访问: ANY.data-trigger=值

自然也不能用jQuery的$元素.prop()访问

样式:

elem.style.css属性 -> $元素.css()

问题: 只能一个一个的修改css属性，无法快速简介的批量修改。

解决: 只要批量修改样式，都用class属性

jQuery: $元素.addClass("类名") 添加class

$元素.removeClass("类名") 移除class

$元素.hasClass("类名") 判断是否包含class

比DOM的 className="类名"是覆盖，无法只精确修改某一个class。

而addClass和removeClass()，可精确修改某一个class，而不影响其它class。

另外: $元素.toggleClass("类名")

自动判断是否包含指定"类名"，自动在有和没有这个类名之间来回切换

比如一个按钮在有class down和没有class down之间来回切换:

//如果当前按钮没有class down,就添加down

if(!$(this).hasClass("down")){

$(this).addClass("down");

}else{//否则，就移除down

$(this).removeClass("down");

}

其实最简单的写法: $(this).toggleClass("down");

2. 查找:

1. 按选择器查找:

2. 按节点间关系查找:

两大类关系

1. 父子关系

元素.parentNode|parentElement 父元素

jq -> $元素.parent();

元素.children 所有直接子元素

jq -> $元素.children(["选择器"]);

如果没有选择器，就获得所有直接子元素

如果提供了选择器，就仅获得符合选择器要求的部分直接子元素

jq -> $元素.find("选择器")

在元素的所有后代中查找符合选择器要求的

强调: 必须写选择器

元素.firstElementChild 第一个直接子元素

jq-> $元素.children().first()

元素.lastElementChild 最后一个直接子元素

jq-> $元素.children().last()

2. 兄弟关系

元素.previousElementSibling 前一个兄弟

jq->$元素.prev()

扩展: jq -> $元素.prevAll(["选择器"])

选择当前元素之前所有兄弟元素(符合条件的)

元素.nextElementSibling 后一个兄弟

jq->$元素.next()

扩展: jq -> $元素.nextAll(["选择器"])

选择当前元素之后所有兄弟元素(符合条件的)

扩展:

jq->$元素.siblings(["选择器"])

选择除当前元素之外无论前后的所有兄弟元素(符合条件的)

3. 添加/删除/替换/克隆:

1. 添加元素:

jq: 2步:

1. 用html片段创建新元素:

var $elem=$(`html片段`)

2. 将新元素添加到DOM树

末尾追加: 父元素.appendChild(新元素)

jq -> $父元素.append($新元素)

扩展: 开头追加: $父元素.prepend($新元素)

中间插入: 父元素.insertBefore(新元素, child)

jq -> $child.before($新元素)

扩展: 在当前元素后插入新元素: $child.after($新元素)

问题: 要么返回父元素，要么返回旧的子元素，无法在调用后继续利用链式操作，对新元素做后续连续操作。

解决: 其实以上API都有一对儿:

比如: $父元素.append($新元素)

$新元素.appendTo($父元素)//return $新元素

.对新元素继续操作

再比如: $父元素.prepend($新元素)//return $父元素

$新元素.prependTo($父元素)//return $新元素

.对新元素继续操作

2. 删除: $元素.remove();

3. 替换:

父元素.replaceChild(新元素, 旧元素)

jq-> $旧元素.replaceWith($新元素)//return $旧元素

$新元素.replaceAll($旧元素)//return $新元素

.对新元素继续操作

4. 克隆: var $新元素=$元素.clone();

4. 事件绑定:

标准事件绑定:

DOM: 元素.addEventListener("事件名",处理函数)

元素.removeEventListener("事件名",处理函数)

jq: addEventListener->on

removeEventListener -> off

$元素.on("事件名",处理函数)

$元素.off("事件名",处理函数)

简写的事件绑定: 仅限于最常用的21种事件

$元素.事件名(function(e){

e.stopPropagation();

e.preventDefault();

var $this=$(this);

var $tar=$(e.target)

... ...

})

事件代理:

DOM:父元素.addEventListener("click",function(e){

var tar=e.target;

if(tar是xxxx){

正式的逻辑

}

})

jq: 2处简写:

1. this又回来了！

2. 不用写if了！

$父元素.on("click","选择器条件",function(e){

//自动if($tar.is("选择器条件"))

//自动保证所有进入function的元素都是符合选择器条件的。

var $tar=$(this);

... ...

})

什么是DOM对象：就是js对象，使用js的方式获取到的元素就是js对象，也就是dom对象；

Jq与js的联系：jq对象就是js对象的一个集合，伪数组，里面存放了一大堆的js对象

Day 03

正课:

1. 事件

2. 动画

3. 类数组对象操作

4. 添加自定义函数

5. 封装自定义插件

1. 事件:

页面加载后执行:

问题: 浏览器加载HTML和js是顺序加载

必须保证js在HTML加载后执行，才能保证所有的查找都能找到想要的元素。

但是<script>可能被放在开头，也可能被放在结尾

如何保证无论<script>放在网页开头和放在结尾，都能正常执行呢？

解决: 不要将js代码直接放在<script>内

window有一个事件: load，会在整个网页加载完成后，自动执行。所有js代码都应该放在window.onload=function(){}中，在页面加载后自动执行。

强调: window.onload=functio(){}无论写在哪儿，都只能在整个窗口内容加载完才自动执行

问题: window.onload有两个缺点:

1. =是赋值覆盖的意思，如果同时出现多个window.onload=function(){ ... }，结果只有最后一个会覆盖之前所有。

解决: $(window).load(function(){ ... })

//addEventListener() 可反复加多个

2. window.onload需要等待所有页面内容(html,css,js,图片)加载完成才执行。——慢, 晚

其实大多数情况下，用户急于使用功能，而无所谓图片内容和网页美观。

解决: 其实在window.onload之前还有一个事件会提前触发: DOMContentLoad——只等待HTML和JS加载完，无需等待CSS和图片。——快，早！

但是DOMContentLoad事件有兼容性问题，只能用jQuery方式绑定: $(document).ready(function(){ ... })

当网页就绪自动执行

所以，放在$(document).ready(function(){...})中的代码会在DOM内容加载后就提前触发。无需等待CSS和图片。

总结: jQuery中所有代码都要放在$(document).ready()中

简化: $(document).ready(function(){...})

$().ready(function(){ ... })

$(function(){ ... })

总结: jQuery中所有代码都要放在$(function(){ ... })中

除非必须依赖css和图片的jq代码才必须在window.load中执行。但是很少。

鼠标事件:

mouseover mouseout —— 即使父子元素也当做独立的元素看待，从父元素进入子元素，同样会触发父元素的mouseout事件，与现实不符。

解决: jQuery 用 mouseenter mouseleave 代替

优点: 认为进入子元素，并没有离开父元素

简写: 如果同时绑定mouseenter和mouseleave时

其实只要绑定一个hover函数即可:

$元素.mouseenter(function(){ ... })

.mouseleave(function(){ ... })

$元素.hover(

function(){ ... }, //-> mouseenter

function(){ ... } //-> mouseleave

)

模拟触发: 即使没有点击按钮，也可执行按钮的单击事件处理函数

如何: $元素.事件名() //手动调用指定元素上的事件处理函数

2. 动画:

1. 简单动画: 固定的三种动画效果

1. 显示隐藏: $元素.show() $元素.hide() $元素.toggle()

问题/优点: 本质其实是用display:block和display:none来实现的瞬间显示隐藏。

解决: 加参数: 动画持续时间

$元素.show(2000) $元素.hide(2000)

2. 上滑下滑: $元素.slideUp()

$元素.slideDown()

$元素.slideToggle() 切换

3. 淡入淡出: $元素.fadeIn()

$元素.fadeOut()

$元素.fadeToggle();

问题:

1. 效果固定的，无法修改

2. 都是用js程序和定时器模拟的动画效果——效率低

总结: 将来能用css做的动画，首选css——效率高，可维护

特别推荐: $元素.show() $元素.hide() $元素.toggle()

不包含动画效果，仅简化display操作

比如: $元素.css("display","block")

.show()

$元素.css("display","none")

.hide()

$元素.toggle() 自动在显示和隐藏之间来回切换

2. 万能动画: 对任意css属性应用动画效果

$元素.animate({

//目标样式

css属性:值,

... : ... ,

}, 动画持续时间ms)

让{}里的css属性，在规定的时间ms内，从当前值缓慢过渡到目标值

问题: 1. 也是用js和定时器模拟的，效率低

2. 功效类似于css的transition，还不如transition

相同: 凡是单个数值的属性: 都支持

width, height, left, top, padding, margin ...

不同: CSS中的transition支持颜色动画

也支持CSS3变换

jq中的animate不支持颜色动画

也不支持CSS3变换

排队和并发:

排队变化: 多个css属性，先后按顺序变化

如何: 对同一个元素反复调用多次动画函数，多个动画函数的效果是排队顺序执行的。

比如: $s2.animate({left:400},2000)

.animate({top:300},2000)

本质:

所有的元素都有一个动画队列:

调用动画函数，并不是立刻执行动画的意思，仅仅是将动画效果加入队列中等待顺序执行。

并发变化: 多个css属性，同时变化

如何: 放在一个animate中的多个css属性默认并发同时变化

动画结束后自动执行:

jQuery中所有动画函数都是定时器模拟的，所以都是异步的。主程序中其它函数是不会等动画执行完才执行的。

解决: 如果希望在动画接收后才自动执行一项任务，可用动画函数提供的回调函数参数

如何: 每个动画函数，都有最后一个参数，是一个回调函数。放在回调函数中的代码，一定会在动画结束后才自动执行

停止动画: $元素.stop()

坑: .stop()默认只停止队列中当前正在播放的动画，后续动画依然继续播放。

解决: .stop(true) 停止当前动画，并清空队列

选择器: :animated 匹配正在播放动画的元素

3. 类数组对象操作:

jQuery的$()查询后的结果就是一个类数组对象

但是在js中类数组对象很受歧视，数组家的函数，都用不了。

jQuery中为类数组对象提供了两个最常用的函数:

$(...).each() 类似于 js中的数组的forEach

遍历集合中的每个元素，执行相同的操作

如何: 遍历一个ul下的所有li

$("ul>li")//返回类数组对象

//.forEach(function(elem, i , arr){ ... })

.each(function(i, elem){

elem->每个li ...

$(elem)->jq的$li

})

$(...).index() 类似于js中的数组的indexOf

查找集合中是否包含指定的元素，以及在什么位置

如何: 在一批元素中查找一个指定元素的位置

比如: 查找一个$li在ul下所有li中是第几个

var i=$("ul>li").index($li)

可简写: 如果是在同一个父元素下找li的位置

var i=$li.index(); //自动就在当前里的父元素内查找

4. 添加自定义函数:

何时: 当jQuery中提供的函数不够用时

如何: 向jQuery的原型对象中添加新函数，所有jQuery对象都可以使用。

比如: 为所有jQuery对象添加一个函数: sum() 能对找到的所有元素的内容自动求和。

1. 先在jQuery原型对象中添加自定义的共有函数

//jQuery.prototype.sum=function(){

jQuery.fn.sum=function(){

//遍历将来调用sum()的点前的jQuery查找结果集合中的每个元素，并计算内容的和

var $elems=this; //直接拿到$("ul>li") jq对象，不需要$()

var total=0;

$elems.each(function(i, elem){//elem取出的是$elems中保存的一个一个的DOM对象

var $el=$(elem);

total+=parseInt($el.html())

})

//返回计算结果

return total;

}

2. 在任意jQuery对象上调用

var 内容的和=$("ul>li").sum()

5. 封装jQuery自定义组件:

官方组件库: jQuery UI

如何:

1. 引入jQuery UI的css

2. 按组件的要求编写HTML内容

3. 引入jQuery.js和jQuery UI.js

4. 编写自定义代码，找到组件的父元素，对父元素调用一次组件函数。

jQueryUI的原理: 侵入性: 在程序员不知情的情况下，自动添加样式和行为。

如果自己封装了插件，自己用，jQueryUI方式一定是简单

如果考虑可维护性和灵活性，jQueryUI封装的太死了，不便于维护。

jQuery组件是一套可重用的CSS样式和js功能的集合

为什么: 重用！

何时: 当发现很多网页中都需要一个小功能时，就要将这个功能的样式和行为封装为一个组件，将来反复使用

如何:

定义组件:

0. 前提: 已经用原始的CSS，DOM，jq实现了。只不过暂时没有分离出来。所以定义jQuery组件其实仅是一个提取的过程

1. 向jQuery的原型对象中添加自定义的组件函数

1.1 为组件的HTML元素添加样式

自动在各个元素上侵入class

1.2 为组件的HTML元素添加行为

2. 将原来写好的CSS代码提取到专门的css文件中独立存储

使用组件: 和使用jQuery UI组件的用法完全一样

Day 04

jQuery中的$()共可以做几件事？

$("选择器") 查找DOM元素，保存进jQuery对象中

$(this|e.target) 将DOM元素，封装为jQuery对象

$(`html片段`) 创建新元素

$(function(){ ... }) 绑定事件，DOM内容加载后就提前触发

鄙视: 如何避免组件间样式冲突

不好的做法: 改名

因为项目中要求描述一个事物或一种功能，必须用统一的名称。

好的做法: 在所有的样式类前加上统一的前缀

正课:

1. ajax

2. *****跨域

1. ajax

$.ajax({

url:"服务端接口地址", //http://localhost:3000/users/login

type:"get|post",

data: { uname: "dingding", upwd: "123456" },

//"uname=dingding&upwd=123456",

//如果返回json，需要自动JSON.parse()转为js对象

dataType:"json", //如果不写需要自己手动调用JSON.parse()

//onreadystatechange =function(res){ ... }//在响应回来后，处理响应结果

success: function(res){

//res是JSON.parse()已经翻译过的可直接使用的js对象/数组

}

})

2. *****跨域:

浏览器同源(origin)策略: 也称禁止跨不同源头访问资源

强调: 仅限于ajax

浏览器规定发送ajax请求时，只有相同域名的客户端和相同域名的服务端之间才能发送请求:

比如: 学子商城项目:

客户端:

http://localhost:3000/index.html

index.js

$.ajax()

请求↓ ↑响应成功

服务端:

http://localhost:3000/index

跨域: 从一个域名下的网页，向另一个域名下的服务端发送ajax请求——受浏览器的同源策略控制，禁止发送的

比如:

1. 域名不同:

http://www.a.com/index.html -> http://www.b.com

2. 子级域名不同:

http://oa.tedu.cn/index.html -> http://hr.tedu.cn

3. 端口号:

http://localhost:5500/index.html -> http://localhost:3000

4. 协议不一样:

http://localhost/index.html -> https://localhost

:80 :443

5. 即使同一台机器，域名和IP之间互相访问

http://localhost/index.html -> http://127.0.0.1

域名 IP

以上5种情况，都会报ajax请求错误:

CORS...Access-Control-Allow-Origin

但是，现实中，随处可见跨域请求:

手机都能看天气和股票

淘宝可跟踪所有快递公司的物流信息

一定可以跨域请求: 如何跨域

1. CORS方式: 仅服务端改代码，就可跨域

同源策略的本质: 其实可以发送ajax请求

也可以正常执行服务端的程序

也可以顺利返回正确的结果

但是，浏览器经过检查数据的来源，发现和当前网页的来源不一致，所以，到手的数据不让用！

如何: 其实就是在服务器端返回响应的响应头中伪装成指定的源头

//res.send(result); //不要用res.send了

res.send其实是一种简写:

等效于:

res.writeHead()+res.write(JSON.stringify(result))+res.end()

想跨域，就不要用简写的res.send()

自己在服务端写三步：

res.writeHead(200,{

"Access-Control-Allow-Origin":"http://127.0.0.1:5500"

});

res.write(JSON.stringify(result));

res.end();

这样返回的数据，就被伪装成来自127.0.0.1:5500的，就可以通过浏览器的同源策略检查，可正常使用

2. JSONP方式: JSON with padding

填充式JSON

方案一: 用<script src="服务端接口地址"代替$.ajax发送请求。

服务端: 将要发送的数据填充在一条js语句中

res.write(`document.write("${weather}")`)

客户端: <script src="服务端接口地址"

并能够收到服务端返回的js语句字符串:

document.write("${weather}")

问题: 要在客户端执行的js语句，在服务端写死了，众口难调。

方案二: 提前在客户端定义一个函数，用于处理服务端返回的请求，服务端仅使用函数名拼接一条函数调用的js语句

客户端: function show(weather){

任意js语句

}

服务端: res.write(`show("${weather}")`)

问题: 本该定义在客户端的函数名，在服务端是写死的，众口难调

方案三: 用请求参数，将函数名传递给服务器

客户端: <script src="http://localhost:3000?callback=show"

服务端: 接收客户端传来的名为callback的参数中保存的函数名

将callback函数名动态拼接到要返回的函数调用语句中

问题: <script是在页面中写死的，只能在页面加载过程中执行一次。无法按需反复执行，比如每次单击按钮时，随时发送请求。

方案四: 每次单击按钮时动态创建<script元素

客户端:

$("button").click(function(){

//不要用$("<script>")动态创建<script>元素

//浏览器会强行将<script>解析为标签

//退一步，用核心DOM

var script=document.createElement("script");

script.src=`http://localhost:3000?callback=doit`;

document.body.appendChild(script);

})

问题: 每次单击时都会创建<script，反复单击会导致<script堆积

解决: 在回调函数结尾:

删除body最后一个<script>

function doit(weather){
alert(weather);

//回调函数结尾: 删除用过的<script>

$("body>script:last").remove();

}

jQuery对jsonp方式跨域进行了终极的简化:

$.ajax({

url:

type:

data:

dataType:"jsonp"

success:function(){

... ...

}

})

VUE

安装服务器脚手架

npm i express-generator -g 安装服务器脚手架

express --no-view server 不带模板引擎

npm install 安装依赖

Day 01

正课:

1. 什么是Vue

2. 如何使用Vue

3. MVVM

4. 绑定语法

5. 指令

1. 什么是Vue:

渐进式的基于MVVM的执行数据操作的纯前端js框架

渐进式: 可以逐步在项目中使用Vue框架

可以和现有传统技术很好的结合

全家桶: 如果要使用一种框架，就只能使用框架的所有技术。不能和其它技术混搭。

基于MVVM？

执行数据操作的: 终极简化对网页执行的数据操作: 增删改

纯前端js框架: 不要nodejs，仅靠浏览器就可运行项目

2. 如何使用:

官网: cn.vuejs.org

下载: 版本: 2.6

2种:

1. 下载vue.js文件，引入网页中——前三天

开发版: 体积大，可读性好，带错误提示

生产版: 体积小，可读性差，去掉了所有错误提示

2. 脚手架代码——最后一天做项目

如何引入:

如何使用:

3大步:

1. 定义页面的HTML内容:

要求: 必须包含在一个<div id="app"></div>内

必须用{{变量}}标记处，要使用数据的位置

如有事件处理函数，就用@click绑定事件处理函数

比如: <div id="app">

<button @click="add">click me({{n}})</button>

2. 在自定义程序中先定义页面所需的所有数据。

要求: 必须包含在一个data:{}对象中

比如: 页面上有一个{{n}}，表示一处n需要发生变化，所以

var data={ n:0; }

3. 创建new Vue()对象示例，将数据和页面元素绑定起来

var vm=new Vue({

el:"#app",

data: data,

//结果: data中的变量是什么值，页面中就显示什么值

//data中的变量被改成什么值，页面中就自动变成什么值

//如果需要事件处理函数，都要定义在methods:{}中

methods:{

add:function(){//当单击按钮时，自动触发add函数

this.n++; //修改data中的n+1，页面上的n自动跟着变化

}

})

事件: 2步:

1. 在页面的html元素上用@click="add" 绑定事件处理函数

2. 事件处理函数，不要定义在new Vue的外边

应该定义在new Vue中专门的methods属性内:

new Vue({

el:"#app",

data: data,

methods:{

add:function(){

this.变量++

}

})

总结: 页面需要什么，Vue就定义什么

比如: <button @click="add">click me(0)</button>

new Vue({ ↑ ↑

add:function(){} {{n}}

<button @click="sub">- <span>1 <button @click="add">+

new Vue({ ↑ ↑ ↑

sub:function(){} {{n}} add:function(){}

3. MVVM模式:

传统的DOM:

HTML: 只负责静态内容，不会自动变化

CSS: 只负责静态样式，不会自动变化

JS: 即要负责内容的变化，又要负责样式的变化

问题: 1. 步骤繁琐且重复: 查找，绑定，遍历，替换，拼接字符串

2. 不便于维护：jQuery中，如果页面结构或内容发生变化，则js中选择器和HTML片段都要跟着修改

现代框架: MVVM模式

1. 界面/视图View: 包括静态的HTML+CSS

2. 数据模型Model: 页面中所需的所有数据的整体

3. 控制器/视图模型ViewModel: 自动将数据模型Model中的变量，填充到界面中所需的位置

总结: 什么是M V VM模式: 页面需要什么，模型就定义什么。

视图模型会自动将模型中的数据填充到页面中。且模型数据发生变化时，视图模型会自动更新页面。

优点: 1. 没有任何重复的代码

2. 界面和模型松耦合，界面变化，不需要修改模型，甚至不需要修改ViewModel控制器。——及其便于维护

ViewMode的原理:

当new Vue将模型对象和页面元素绑定在一起时，内部自动构建两大子系统:

1. 响应系统:

自动将data中的每个变量变成访问器属性

今后，所有对变量的读写，自动都被访问器接管，由访问器属性代为执行。

比如：修改变量的值时，自动调用变量的set方法，修改实际的变量值。

而每个变量的set方法，当变量发生改变时，都会自动发送通知：xxx变量的值变成xxx了

通知是交给另一子系统，虚拟DOM树的

2. 虚拟DOM树：

当new Vue()创建对象时，会扫描el:"#app"指向的父元素div，及其子元素。然后，仅找到可能发生变化的元素，保存在一个简化版的虚拟DOM树结构中：

比如：

var virtualDOM={

element: div, //<div id="#app"

id:"#app",

children:[

{

element: button, //<button>click me({{n}})

innerHTML: "click me {{n}}",

@click:"add"

//其它可能变化的元素

]

}

什么是虚拟DOM树: 仅保存可能变化的元素的简化版树结构对象，同时预先封装了要对元素执行的DOM操作。

当响应系统发来某变量被修改的通知后，虚拟DOM树先遍历自己内部的元素，找到受这个被修改变量影响的元素。然后自动调用预先定义好的DOM操作，更新实际DOM树上的元素。其余未受变量影响的元素，保持不变。

虚拟DOM树的优点:

1. 仅包含可能变化的元素，内容精简，便于快速遍历，查找变化的内容。

2. 封装了DOM操作，自动执行DOM操作，无需开发人员重复编码。

this: 凡是进入new Vue中的，无论是data中的变量，还是methods中的方法，都被打散，直接隶属于new Vue，变为相邻的平级成员。所以，在方法中想访问data中的数据，必须加this.

4. 绑定语法:

{{ }} 学名: 插值(Interpolation)语法

什么是: 专门用于将一个变量的值自动插入到页面的指定位置

何时: 凡是页面上可能发生变化的地方，都用{{}}

如何:

基本用法: {{变量名}}

结果: 运行时: 会被自动替换为变量的值

扩展: {{一切合法的有返回值的js表达式}}

比如: 算术计算、方法调用、对象属性、三目运算...

但是，不能写没有返回值的:

if else for while 程序结构

比如: <h1>空气质量: {{pm25<100?"好":

pm25<200?"中":

pm25<300?"差":

"活不了了！"}}

执行时，vue会拿着data中的数据变量pm25，到{{}}中执行js表达式，比较每个判断条件，选择一个符合条件的值返回，作为替换{{}}位置的值。

5. 指令：directive

什么是: 为HTML增加新功能的专门的属性

为什么: HTML本身不具备程序该有的功能

一个程序基本的功能:

变量:

判断:

循环:

何时: 只要想在html中使用类似变量，判断，循环等程序的功能时，就用指令:

Vue中共定义了13种指令:

1. v-bind:

什么是: 专门用于绑定属性值的指令

何时: 只要一个属性值可能根据变量的值自动变化时

为什么: {{}}只能用于绑定元素内容(innerHTML)中的值

不能用于动态绑定属性值

如何:

<ANY v-bind:属性="任意合法的js表达式"

可省略v-bind

比如: <img :src="pm25<100?'img/1.png':

pm25<200?'img/2.png':

'img/3.png' "

执行时: Vue会拿着data中的pm25变量，到有:的属性中执行三目运算，选择其中一个符合条件的字符串，作为替换src属性值的路径。

2. v-if v-else-if v-else

多个元素，根据条件不同，选其一显示

只有符合条件的元素才显示

不符合条件的同组其他元素默认隐藏

如何:

//如果pm25<100

<img v-if="pm25<100" src="img/1.png"

<span></span>之间绝对不能插入其它无关元素

//否则如果pm25<200

<img v-else-if="pm25<200" src="img/2.png"

//否则

<img v-else src="img/3.png"

原理: 其实所有带v-if v-else-if v-else的元素都没有在页面上。而是根据条件，动态决定临时添加哪个元素到页面

——靠添加删除DOM元素的方式控制元素的显示

强调: 之间不能插入其它无关的元素

3. v-show

根据条件决定当前一个元素是显示还是隐藏

如何: <ANY v-show="条件">

当条件满足时，当前元素就显示

当条件不满足时，当前元素就不显示

比如: <button v-show="i<count" @click="next">下一页</button>

问题: 如果用在多个元素控制显示隐藏，则必须把条件反复写在每个元素上

vs v-if:

v-show采用display:none/block方式控制显示隐藏，不修改DOM树上的节点——效率高

v-if 采用动态添加删除元素的方式控制显示隐藏——效率低

4. v-for:

遍历数组中每个元素

每遍历一个数组元素就自动创建一个HTML元素

并且在HTML元素中还可绑定遍历出的数组元素内容

何时: 根据数组反复生成多个相同结构的元素时

如何:

1. 只需要写一个要生成的元素作为模板

2. 在要重复生成的元素上加v-for

比如:

data中: tasks:["吃饭","睡觉","打亮亮","再吃饭"]

<ul>

</ul>

5. 事件绑定:

v-on:click="处理函数"

@click="处理函数"

强调: 1. 处理函数必须写在new Vue中的methods中

2. 处理函数中的this不再指向当前按钮对象，而是指整个vue对象

3. 处理函数中要操作data中的变量必须加this.

6. v-html v-text:

代替{{}}绑定元素的内容

{{}}的问题: 2个

1. 始终保持变量中的字符串原始样子输出

即使绑定HTML片段，也只能原样显示

解决: 用v-html代替{{}}

2. 如果new Vue加载慢时，客户会短暂看到{{}}

解决: 用v-text代替{{}}

因为v-text是属性，即使慢，暂时绑定不出来，页面上也不会出现绑定语法。

缺点: 对字符串拼接和过滤器支持不好

7. v-cloak:

专门用于在new Vue加载慢时，暂时隐藏元素

如何: 2步:

1. 在要隐藏的元素上添加v-cloak属性，不用给值

2. 手动在网页顶部提前定义[v-cloak]{display:none}

原理: 当new Vue加载完之后，自动查找所有v-cloak属性，并移除。

8. v-once:

仅在页面加载时绑定一次变量值。之后，即使变量发生变化，也不更新页面

如何: <ANY v-once>

原理: 所有要更新的元素都保存在虚拟DOM树中

标有v-once的元素，在首次绑定后，就从虚拟DOM树中移除。下次即使变量再变化，扫描虚拟DOM树，找不到标有v-once的元素了。

9. v-pre:

万一内容中包含{{}}，但不想被vue编译时，可用v-pre阻止编译内容:

如何: <ANY v-pre>

<body>

<h3 v-if="flag">这是用v-if控制的元素</h3>

<h3 v-show="flag">这是用v-show控制的元素</h3>

</div>

// 创建 Vue 实例，得到 ViewModel

var vm = new Vue({

el: '#app',

data: {

flag: false

methods: {

/* toggle() {

this.flag = !this.flag

} */

}

});

</script>

</body>

<body>

<h3 v-if="flag">这是用v-if控制的元素</h3>

<h3 v-show="flag">这是用v-show控制的元素</h3>

</div>

// 创建 Vue 实例，得到 ViewModel

var vm = new Vue({

el: '#app',

data: {

flag: false

methods: {

/* toggle() {

this.flag = !this.flag

} */

}

});

</script>

</body>

总结:

1. 元素内容随变量自动变化: {{}}

2. 元素的属性值随变量自动变化: :属性="变量/js表达式"

3. 多个元素，多选一显示时: v-if v-else-if v-else

4. 只有一个元素控制显示隐藏时: v-show

5. 反复生成多个相同结构的元素时: v-for

6. 只要绑定事件: @事件名="处理函数"

7. 只要绑定的内容是HTML片段时: v-html

8. 代替{{}}绑定普通元素内容时: v-text ——避免短暂看到{{}}

9. 希望所有{{}}的元素，在new Vue加载完之前暂时隐藏: v-cloak

10. 希望仅在首次加载时，绑定一次变量值，之后页面不随变量改变而改变: v-once

Day 02

正课:

1. ***双向绑定

2. 绑定样式

3. 计算属性

4. 自定义指令

5. 过滤器

1. 双向绑定:

问题: 用: 只能进行单向绑定(Model（data）->View(html))

如果用:绑定表单元素的值，则用户修改表单元素的内容，无法自动修改data中的模型变量。意味着vue中永远拿不到用户在界面中修改的新值。

解决: 今后凡是绑定(可输入，可选择的)表单元素，必须用双向绑定，才能在界面修改时，自动更新data中的数据

双向绑定: 既能Model（data）->View(html)

data中变化，页面自动跟随变化

又能View(html) -> Model（data）

页面中变化，data中的变量自动跟随变化

如何: v-model:value="变量"

简写: 因为几乎所有表单元素都用value属性控制元素的内容或值，所以，几乎所有v-model都绑定value属性，所以可简写为: v-model="变量"

其它表单元素的双向绑定:

1. radio:

特殊在: value任何情况下是固定的

变的是checked属性，也就是选中与不选中状态

比如: 性别:

<input type="radio" name="sex" v-model="sex" value="1" checked >男

<input type="radio" name="sex" v-model="sex" value="0" checked >女

data:{

sex:1 0

}

是v-model="sex"将data中的sex和页面中的radio元素绑定

绑定时: 用data中sex的值和每个radio的提前写死的value做比较。如果那个radio的value值刚好等于data中sex的值就选中

其余不选中

修改时: 用当前选中的radio的写死的value，反向赋值回data中的sex上

2. select:

特殊: 每个option的value都是提前写死的

变得只是option的selected属性，变的只是选中的option是哪个。

比如:

</select>

data:{

city:"bj.png"

}

其实: v-model="city" 其实仅仅起到一个绑定连接的作用

不具体绑定某一个属性

绑定时: 用data中city变量的值和每个option中的写死的value做比较。如果data中city变量的值等于option中写死的value的值，则当前option就选中。其余option就不选中

修改时: 用当前选中项的写死的value，反向更新会data中的city变量

原理: v-model="city"其实，不具体绑定修改元素某个属性的值。而是为元素添加修改事件，比如onchange, oninput等。在事件处理函数中修改new Vue对象中的模型变量的值。进一步触发模型变量的set方法，触发通知，引起其他使用该变量的元素的状态的改变。

3. checkbox:

单选时，变化的只是checked属性

何时: 如果希望用checkbox控制一个bool类型的变量值时

如何: <input type="checkbox" v-model="isAgree">同意

data: { isAgree:false }

绑定时: 根据isAgree的值，决定checkbox的checked状态

修改时: onchange=function(){ vm.isAgree=this.checked}

用当前checkbox的checked状态，更新data中的isAgree

双向绑定中可用watch机制，实时获得修改的新变量值:

何时: 只要希望边修改边实时执行操作时

如何:

data: { kwords:"" }

watch:{

kwords:function(){

//执行操作

}

只要通过任何手段修改一次kwords变量的值，都会立刻触发一次kwords()函数，执行一次操作。

2. 绑定样式:

绑定style内联样式: 2种:

1. 将整个style属性值当做一个大的字符串去绑定

问题: 如果使用style绑定样式，说明经常会单独修改一个样css属性值。而如果style是一个字符串，非常不便于程序仅修改其中一个css属性。

解决: style支持对象形式绑定

2. 以对象形式绑定style

2步:

1. 在data中定义一个内嵌对象结构，保存style中每个css属性

比如: 希望div#pop的位置上下左右变化，可定义对象:

data:{

popStyle:{

left:"100px",//必须带单位

top:"50px"

}

2. 在HTML元素的style上，用冒号绑定data中的样式对象，比如：

运行时: new Vue()会自动将

popStyle:{

left:"100px",//必须带单位

top:"50px"

}

转化为字符串: "left:100px; top:50px"

结果还是: style="left:100px; top:50px"

说明: 如果div中还有部分固定的内联样式，可将普通style和:style同时使用。比如:

运行时: 先将:style中的对象编译为字符串，再和固定不变的普通style内容合并到一个style中。

结果: <div id="pop" style="width: 100px; height: 100px; left: 100px; top: 50px;"></div>

绑定class: 2种方式:

1. 以字符串绑定class——不好

2. 以对象方式绑定class

2步:

1. data中定义个对象，包含所有要显示的class作为属性名。用true/false控制哪个class应用，哪个class不用。

比如: data:{

phoneClass:{

vali_info:true,//默认启用

vali_success:false,//验证通过启用

vali_fail:false//验证失败才启用

}

2. html中用:class，绑定data中的对象

比如: <span :class="phoneClass">1[3-9]\d{9}</span>

结果: new Vue()自动将phoneClass中，所有标记为true的class名，拼接为字符串，替换元素中class的内容，应用指定的class。比如

phoneClass:{

vali_info:true,

vali_success:true,

vali_fail:false

}

会被翻译为"vali_info vali_success"

最终: <span class="vali_info vali_success"

其实: :class="对象"中变化的类名，也可以和其他固定不变的类名同时存在:

比如: <span class="vali" :class="phoneClass">

结果: 先翻译: phoneClass为:

"vali_info vali_success"

再和class="vali"组合形成一个class

最终: <span class="vali vali_info vali_success"

3. 计算属性:

什么是: 属性的值不是实际存在的，每次加载时都需要动态计算出来

何时: 只要想使用的值，不是现成的，需要动态计算才能获得

如何: 2步:

1. 在new Vue中定义计算属性的逻辑

new Vue({

el:"#app",

data:{ 变量1, 变量2, ... },

computed:{

汇总的属性名(){

return 汇总结果

}

})

比如: 定义计算属性，动态计算购物车中商品的总价:

data:{

cart:[

{pname:"iphonex",price:5566,count:2},

{pname:"iphonexs",price:8888,count:3},

{pname:"iphonexs max",price:9999,count:1}

]

computed:{

total(){

console.log("计算了一次总价");

//先定义变量

var sum=0;

//遍历cart中每个商品

for(var p of this.cart){

//每遍历一个商品，就就计算小计，并汇总到结果中

sum+=p.price*p.count;

}

return sum;

}

2. 在页面元素中，使用绑定语法，直接绑定计算属性的函数名:

<ANY>{{汇总的属性名}}</ANY>

不要加()

比如: <td>总价:¥{{total.toFixed(2)}}</td>

原理: 当在绑定语法中发现模型变量时，先在data中找。如果data中没有，就会进入computed中查找。如果找到computed中的计算属性，就调用计算函数，然后将返回的结果，替换回页面中需要绑定的位置。

vs 普通函数:

1. 用法: 绑定函数的返回值: {{函数名()}}

绑定计算属性: {{属性名}} //不用加()

2. 重复计算:

如果多次绑定函数的返回值，绑定几次，就重复调用函数执行几次。效率低。

如果多次绑定计算属性，无论绑定多少次，只在第一次绑定时执行一次计算，然后，将计算结果立刻缓存在vue中。当下次再绑定时，直接取出缓存的值使用。避免重复计算——效率高。

3. 使用场景:

如果更关心函数的返回值用于显示时，首选计算属性

如果不关系返回值，而是更关系执行过程时，首选普通函数

4. 自定义指令:

如果希望给HTML元素添加13种指令之外的新功能，就可自定义指令。

如何:

1. 创建: 一个名为v-focus的指令

Vue.directive("focus",{//强调: 不要加v-前缀

inserted(dom_elem){

dom_elem.DOM函数()

}

})

2. 使用:<ANY v-focus></ANY>

原理:

当new Vue()时，Vue框架会扫描原始DOM中的元素

只要发现带自定义指令的元素，就触发自定义的inserted()函数，对当前DOM元素，执行预先定义好的DOM操作。

5. 过滤器:

什么是: 对data中原始值进行再加工，然后再显示的一种特殊的函数。

何时: 只要data中的值不能直接显示给人看时

比如: 性别:0,1 时间/日期的毫秒数

如何:

1. 创建过滤器函数：比如，创建将性别0和1转为女和男的过滤器

Vue.filter(

"sexFilter", //过滤器函数名

function(oldValue){//过滤器函数本身

//至少有一个形参接收来自data中变量的原始值

//对原始值加工后返回新值

return oldValue==1?"男":"女";

//必须有返回值

}

)

2. 在绑定语法中使用过滤器

<h1>性别:{{sex|sexFilter}}</h1>

其中: 使用|将过滤器函数连接到sex原始变量的后边。

执行时，sex的值，自动传给过滤器sexFilter的函数的形参oldValue，经过过滤加工，将返回的新值显示到绑定位置。

其实，过滤器可以带参数，来选择不同的返回值样式：

比如：定义可根据语言选择返回不同语言性别的过滤器

Vue.filter(

"sexFilter",

function(oldValue,lang="cn"){//en cn

if(lang=="cn"){//如果传入cn或不传入，则默认都返回中文的男女

return oldValue==1?"男":"女"

}else{//否则，返回英文的男女。

return oldValue==1?"Male":"Female"

}

)

使用带参数的过滤器:

<h1>性别:{{sex|sexFilter("en")}}</h1>

<h1>性别:{{sex|sexFilter("cn")}}</h1>

<h1>性别:{{sex|sexFilter}}</h1>

强调: 虽然定义形参lang时，lang处于第二个形参，但是使用过滤器时，因为原始值自动占了第一个形参oldValue，所以，自定义传入的实参值cn或en，就可直接作为第一个实参传入。实际给的确实第二个形参lang。

总结:

var vm=new Vue({

el:"#app",//引入html元素，形成虚拟DOM树

data:{ //保存页面需要的所有模型变量

//页面中有几处变化，data中就要有几个变量支持

uname:,

sex:,

popStyle:{

css属性: 属性值,

... : ...

}

phoneClass:{

样式类: true,

... : ...

}

methods:{ //所有函数

处理函数(){

this->new Vue()

this.变量

自定义函数(){ ... }

watch:{ //所有对data中变量的监听函数

变量名(){ //变量名要和data中的某个变量同名

}

computed:{//计算属性

total(){

return

}

})

Day 03

正课：

1. Axios

2. 组件

3. 组件化开发

4. SPA

1. Axios:

什么是: 基于promise的专门发送ajax请求的函数库

为什么: 在vue中发送ajax请求

1. 自己写ajax四步/五步: 代码重复严重

2. jQuery中$.ajax(): 大材小用，得不偿失。

jQuery不是专门执行ajax请求的。而是执行所有DOM操作的函数库。包含大量的DOM操作的函数。而在vue中其实只需要$.ajax()，其余函数根本用不上。

3. Vue框架自带ajax请求的模块: vue-resource: 只能在vue中使用。

4. Vue官方推荐: axios

可在任何位置发送ajax请求

index.html ->

new Vue() ->

node.js index.js ->

何时: 今后，只要在vue中发送ajax请求，都用axios

如何:

1. 引入axios.js

2. 发送请求:

get方式:

axios.get("url",{

params:{

请求参数: 参数值

}

}).then(function(返回结果result){

result.data 才是服务器返回的结果

})

比如: 用id查询一个商品

axios.get("/products/getById",{

params:{

lid:5

}

})

//http://localhost:3000/products/getById?lid=5 ->

// { lid:5, title: macbook, subtitle: 优惠酬宾, ... } <-

.then(function(result){

var product=result.data;

})

2. 组件:Component

什么是: 拥有专属的HTML，CSS，JS和数据的可重用的页面独立区域。

为什么: 可重用

何时: 只要发现页面中一个独立的功能/区域反复被使用，都要封装为组件。

如何:

1. 封装组件:

Vue.component("组件名",{

template:`HTML片段`, //代替了以前的el

//<button>-</button><span>{{n}}</span><button>+<bu

data:function(){

return {//相当于以前的data

n:1

}

其余成员和new Vue中完全一样

methods:{

事件处理函数

watch:{

对变量实时监控

computed:{

计算属性

}

})

比如: //创建一个名为my-counter的组件

//将来反复在主页面中使用

Vue.component("my-counter",{

template:`<div>

</div>`,

data:function(){

return { n:1 }

methods:{

sub(){ this.n--; },

add(){ this.n++; }

}

})

2. 反复使用组件: 组件其实就是一个可重用的自定义HTML标签而已。

<组件名></组件名>

比如: <my-counter></my-counter>

原理:

Vue.component()将组件模板添加到Vue大家庭中备用。

new Vue()扫描DOM树时，发现自定义标签，就在Vue家里找到同名组件，用template替换页面的自定义标签。

同时调用组件的data()函数，为此处的一个组件示例下一个专属的蛋（数据data对象{n:1}）

将来，每替换一个自定义标签，说明组件被使用了一次，就会自动调用一次data()函数，返回一个专属的数据对象给当前组件专门使用。

3. 组件化开发:

什么是: 将来所有的网页都是由组件组成的。拿到网页后先划分组件。再分别编写每个组件的HTML，CSS和Vue代码。最后再拼接到一起

为什么: 可多人团队协作开发

调试方便，组件之间互不影响

何时: 今后所有网页必须都用组件化开发。

如何:

1. 拿到页面后，先划分组件

2. 创建组件: Vue.component() 同上

3. 在主页面中引入组件: <todo>同上

4. new Vue()

问题: 用Vue.component()创建的组件可以出现在页面的任何位置，不受限制

解决: 限制子组件必须出现在规定的父组件内才有意义

如何: 3种组件:

1. new Vue({ el:"#app" }) —— 根组件

通常只有在项目唯一的首页上才只有一个new Vue()

2. Vue.component() —— 全局组件

可出现在页面的任何位置

3. 子组件: 被限制在一个固定父组件内使用的组件

何时: 今后只要一个组件，有明确的使用范围，不能乱放时，都要定义成子组件

如何: 2步:

1. 创建子组件: 与创建全局组件内容相同，但降级为普通对象定义格式:

比如: todo-item必须属于todo-list下才有意义:

var todoItem={

template:`<li>

1 - 吃饭 <button>x</button>

</li>`

};

强调: 子组件名必须用驼峰命名！因为之后会被自动翻译为-分隔，比如: todoItem -> Vue -> todo-item

2. 在父组件中添加components属性，包含子组件对象

比如: var todoList={

template:`<ul>

<todo-item></todo-item>

</ul>`,

components:{ todoItem } //强调，这里必须和上一步定义子组件时的变量名保持一致。

}

结果: <todo-item>就只能在<todo-list>下使用

组件间传递数据:

父->子:

1. 子: 为组件定义自定义属性，将来用于从父对象中绑定获得父对象中的变量。

var 子={

template:`... `,

data(){

//仅限于子组件自己使用的内部变量

//定义自定义属性

props:[ "tasks" ]

}

2. 父: 通过绑定子组件的自定义属性，将自己的变量交给子组件

<子 :tasks="tasks"></子>

孩子的兜 <-- 爹的变量

4. SPA: Single Page Application

单页面应用

什么是: 一个应用程序虽然有很多界面，但是只有一个完整的物理页面.html文件。

我们看到的“界面”，其实都是一些较大的组件

通过对地址栏中的相对路径判断，动态决定替换成哪种组件。

为什么:

多页面	单页面
一个应用中包含多个.html	一个应用中只有一个.html
每切换一次页面，都会重新发送请求——请求次数多	所有组件都是在首页第一次加载时，已经全部加载过来了。每切换一次页面，不需要向服务器重新发起页面请求。只是在客户端本地挑选匹配的组件替换页面内容而已。——请求次数少
每次切换页面时，都要重建整棵DOM树——效率低	每次切换界面时，不需要整棵重建DOM树，只要替换局部的节点对象即可。——效率高
对于共用的资源，每次切换页面，都要重复请求。	每次切换界面时，因为<head>中的引用没变，所以不会重复请求共享的资源。

如何实现单页面应用:

1. 划分"页面"组件: —— 组件结构图

2. 创建组件: 同创建普通组件

3. 定义唯一的完整的.html页面

引入公共的资源:

...

引入vue.js和vue-router.js

引入所有组件对象的所在的js文件备用

<my-header/>页头组件，所有页面共用

<router-view/>临时占位，将来会根据路由地址不同，动态选择不同的组件template替换<router-view>所在位置。

4. 定义路由字典:

路由字典是保存所有相对地址和对应组件配对儿信息的数组。

var routes=[

{path:"/",component:index},

{path:"/details/:lid",component:details,props:true},

{path:"/products",component:products},

{path:"*",component:{

template:`<div><h2 style="color:red">404:Not found——东哥写的，不是报错</h2></div>`

}},

];

5. 将路由字典加入路由器中

var router=new VueRouter({routes})
6. 将路由器放入new Vue()中

var vm=new Vue({

el:"#app",

data:{},

router

})

运行时:

http://127.0.0.1:5500#/

http://127.0.0.1:5500#/details

http://127.0.0.1:5500#/products

强调: vue路由才用锚点地址#/xxx来识别不同路径。必须加#

跳转:

2种:

1. 写死的链接: 所有a都换成<router-link

<router-link :to="/details"></router-link>

最终会被翻译回: <a href="#/details"></a>

2. 用程序跳转: 登录成功后跳转回首页

this.$router.push("/地址")

url地址传参:

1. 路由字典中:

var routes=[

{path:"/details/:lid", component: details, props:true}

] //让lid自动传给props中同名的变量

强调:

1. 凡是带参数的地址，访问时必须带参数才能进入。如果不带参数，会跳转到404

2. 在目标组件对象中定义同名props属性

var details={

...

props:[ "lid" ]

}

3. 在跳转时传参：

/details/5 //没有: ,没有?, 没有变量名=

Day 04

正课:

1. 脚手架

2. ***VUE/组件的生命周期

1. 脚手架:

什么是: 已经具有核心功能的半成品项目代码

我们只要在规定位置填入个性化定制的功能即可

为什么: 简化开发

如何:

1. 安装脚手架的工具命令:

npm i -g @vue/cli 电脑安装完命令后：直接创建 vue create 文件夹名字

2. 用命令反复创建脚手架:

cd 要保存项目的文件夹完整路径

比如: cd C:\xampp\htdocs\dd\6_VUE\day04

用vue命令工具，创建一个项目的脚手架代码

1. Your connection to the default npm registry seems to be slow.

Use https://registry.npm.taobao.org for faster installatio

n? (Y/n) n

2. ? Please pick a preset: (Use arrow keys)

default (babel, eslint)

> Manually select features

3. ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)

>(*) Babel 将脚手架中浏览器不认识的一切东西翻译为浏览器认识的。必选相当于翻译官

( ) TypeScript 更严格的javascript，ng框架使用

( ) Progressive Web App (PWA) Support

(*) Router 必选

(* ) Vuex 为下一阶段做登录/购物车做准备

( ) CSS Pre-processors

( ) Linter / Formatter 代码格式检查工具，要求过于变态

( ) Unit Testing

( ) E2E Testing

4. Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

history模式可去掉地址栏中的#

但需要服务端同步配置重定向，才能让客户端支持

所以，学习时，不用启用history

5. Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)

In dedicated config files

> In package.json //在package.json一个文件中，保存所有配置信息

6. Save this as a preset for future projects? (y/N) N

是否保存以上配置步骤的选项为今后所有项目的默认配置。不保存。因为不同项目需要的组件可能不一样。

3. 运行脚手架项目: npm run serve

临时启动一个简易版的调试服务器来宿主html,css,js

将脚手架中浏览器不认识的代码编译为浏览器认识的代码

在默认: http://localhost:8080/

打开浏览器在地址栏中: http://localhost:8080/

问题: npm run serve仅临时编译代码，并运行，不产生最终编译结果。就不能部署上线。

解决: npm run build

将脚手架中浏览器不认识的代码编译为浏览器认识的代码

将编译后的代码压缩为统一的文件。

将来: 往新浪云上拷贝时，只拷贝dist/中的内容即可。

4. 服务端项目配置:

1. cors:

origin: 以前是http://127.0.0.1:5500

现在要改为http://localhost:8080

credentials:true 允许接收客户端带来的身份信息

5. 客户端vue项目配置:

1. axios:

问题: 默认不带axios

解决: 安装: 在xz_vue/内，运行npm i -s axios 或者 npm install axios -S

问题: 将来我们希望在所有Vue组件内，使用axios

this.axios.get("url",{params:{参数:值}})

解决: 在main.js中，将axios对象添加到Vue的原型对象中。

在mian.js中配置axios

//mian.js是根组件 new Vue，所有所需的模块和对象都要在new Vue之前配置好

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

//手动引入-------这个是需要亲自手动添加的，其他代码，脚手架自带

import axios from 'axios' //引入axios文件

Vue.prototype.axios=axios //所有组件都是Vue.prototype的孩子

axios.defaults.withCredentials=true //让axios的请求携带验证信息到服务端（钥匙）

Vue.config.productionTip = false

new Vue({

router,

store,

render: h => h(App)

}).$mount('#app')

正课:

1. 脚手架

2. 组件的生命周期

1. 脚手架:

什么是: 前人总结的包含优秀开发经验的半成品项目

为什么: 避免重复劳动

何时: 今后只要使用框架开发，都用脚手架代码

如何: 2步:

1. 安装命令行工具——用于生成脚手架代码的工具

npm i -g @vue/cli

2. 用命令行工具生成脚手架代码——创建项目

vue create 项目名

babel: js代码翻译工具

将浏览器不认识的新标准的js代码，翻译为浏览器认识的ES5的等效代码，比如

ES6中也定义了模块：

抛出模块: export default { ... }

等效于node中的module.exports={ ... }

引入模块: import from "模块名"

等效于node中的require("模块名")

浏览器不认识，只能请babel翻译为ES5的等效代码。

结果: 在当前运行命令的目录创建了一个项目文件夹，其中包含了脚手架代码

测试: cd 项目名进入项目文件夹
npm run serve

1. 启动临时开发服务器（development Server），宿主编译后的静态页面

2. 编译(compile / build)脚手架代码中浏览器不认识的内容为认识的内容

3. 在脚手架代码中填写个性化的内容

问题: 脚手架代码不包含axios

解决: 安装和配置axios

1. 在项目本地安装axios: npm i -save axios

2. 将axios对象放入vue的原型对象中:

main.js是整个vue项目的唯一根组件new Vue

所有需要的模块或对象，都要在new Vue之前配置好

坑: axios默认不带钥匙到服务器，也就无法打开自己的柜子，访问自己的信息。

解决: 在main.js中要求axios必须携带钥匙

axios.defaults.withCredentials=true;

2. 组件的生命周期:

什么是: 一个组件的加载过程

包括: 4个阶段:

1. 创建: create 创建组件对象和模型数据对象data:

相当于: Vue.component("",{

data(){ return { ... } }

})

2. 挂载: mount 扫描页面构建虚拟DOM树，并首次绑定数据到页面指定位置。

相当于: Vue.component("",{

data(){ return { ... } },

template:"#tplXXX" //虚拟dom树

})

3. 更新: update 当模型变量被更改时，自动触发

4. 销毁: destroy 当主动调用销毁方法销毁组件时自动触发

如果希望在生命周期的不同阶段自动执行一项任务，就要绑定生命周期钩子函数:

包括: 4个阶段，包括8个钩子函数

1. create：前 beforeCreate(){ ... }

后 created(){ //有data，没有虚拟DOM树

//ajax请求为了初始化data，此时已经有data对象了，所以已经可以发送ajax请求

this.axios.get("url",{

params:{ 参数 }

}).then(res=>{

this.模型变量=res.data.属性名

this.products=res.data;

})

//暂时不能执行DOM操作，比如让元素获得焦点

}

2. mount: 前 beforeMount(){ ... }

后 mounted(){//即有data，又有DOM树

//也可以写ajax请求

//可以执行DOM操作

}

了解:

3. update: 前 beforeUpdate(){ ... }

后 updated(){ ... }

4. destroy: 前 beforeDestroy(){ ... }

后 destroyed(){ ... }

<template><template>标签，html5中专门用于为框架/组件保存一段影藏的模板片段，相当于<div style=”display:none”></div>

第四阶段

Day 01

今天学习的内容

程涛 taonetwork2018

1:第四阶段课程简介

vue移动端组件库和项目 6day

html5新特性(视频/绘图) 7day

微信公众平台 --小程序 6day

混编 1day

2:vue UI 组件库

vue 当前很火前端框架，用户数众多

vue 开始针对pc端用户而不是针对移动设备开发

国内团队:饿了么[MintUI/ElementUI],滴滴打车,MUI...

MintUI 针对移动端开发组件库

ElementUI 针对PC端用户开发组件库

2.1:补充知识点:PC端项目和移动端项目

-区别:屏幕宽度

PC端: w > 992px

移动端: w < 992px

-区别:操作方式

PC端: 鼠标和键盘

移动端: 手指

-区别:事件

PC端: keyup/keydown/click/blur/..

移动端: touchstart/touchmove/touchend/tap/longtap

2.2:vue ui mint-ui组件使用

下载安装提供二种方式

(1)方式一:(学习)

mint-ui官方网站下载 css/js/fonts 加载当前html文件中

(2)方式二:

vue cli 脚手架工具当下载配置使用[录像]

下载指令 npm i mint-ui -S

2.3:vue cli 脚手架

-vue cli 如何生成

1:vue cli 创建项目 (?)

2:vue cli 开发自动化工具生成 webpack (?)

-vue cli 目录结构

package.json 配置信息

-vue cli 启动项目

npm run serve

#注意启动目录

..vue_app_00/npm run serve

2.4:将mint-ui引入脚手架 main.js

(1)按需引入

(2)完成引入

import Vue from 'vue'

import MintUI from 'mint-ui' #完整引入mint-ui库组件

import 'mint-ui/lib/style.css' #单独引入样式文件

import App from './App.vue'

Vue.use(MintUI) #将mint-ui库所有组件注册

#vue实例对象中

new Vue({

el: '#app',

components: { App }

})

2.5:第一个mint-ui组件 Toast

简短消息提供框

示例:1:创建组件 src/components/Exam01.vue 空

2:指定路径 src/router.js /Exam01

3:执行组件在浏览器地址栏输入

http://127.0.0.1:8080/#/Exam01

-基本用法

this.$toast({})

参数:

message:提示消息文本的内容

position:位置 top;bottom;middle

duration:持续时间(单位毫秒) 3000 ; -1不关闭

className:类名为其添加样式

.mytip{

background:#fff !important;

color:red !important;

font-size:12px !important;

}

iconClass:图标类名

示例:Exam01.vue

2.6:提示框中可以显示图标

https://www.iconfont.cn/ 阿里妈妈专业图标网站

(1)下载图标

-将图标加入购物车

-点击购物车,下载代码

(2)将图标应用当前项目

-在src创建目录font 上目录用于保存字体图标文件

-main.js 引入字体图标文件css文件

import "./font/iconfont.css"

-应用方法

-iconClass:"iconfont icon-gao"

#注意:字体图标可以修改大小

#修改 src/font/iconfont.css

# .iconfont {

font-family: "iconfont" !important;

font-size: 16px;

}

2.6:弹出式交互提示框

标准语法: this.$messagebox({})

title 提示框的标题 String

message 提示框的内容 String

showConfirmButton 是否显示确认按钮 boolean

showCancelButton 是否显示取消按钮 boolean

示例:创建

组件: src/components/ExamMessageBox02.vue

路径: /ExamMessageBox02

2.7:表单输入域:表单编辑器

<mt-field label="用户名" placehodler="请输入用户"

v-model="uname"></mt-field>

type 输入框类型 text/number/url/date/password...

label 标签

placeholder 占位符

readonly 只读

attr: 设置原生属性

state 校验状态 error;success;warning

示例:创建

组件: src/components/ExamField03.vue

路径: /ExamField03

2.8:使用mint-ui 完成淘宝登录

练习:分析功能

1:第一个输入域

[请输入手机号码]

[手机号/邮箱/会员名]

2:[帐户密登录]

-创建组件 Login.vue /Login

作业1:完成Login04.vue 登录组件

-用户名和短信切换

-密码框显示与隐藏

-按钮提示文字切换

Day 02

今天学习内容

1:复习昨天重点知识

2:作业仿淘宝登录

3:今天的目标

mint-ui组件库官方网站:

http://mint-ui.github.io/#!/zh-cn

3.1:mint-ui 组件库-表单

-开关组件

<mt-switch v-model="val1">开关</mt-switch>

val1:true

-单选框列表

<mt-radio

title="单选框列表"

v-model="val2"

:options="['选项a','选项b','选项c']">

</mt-radio>

-复选框列表

<mt-checklist

title="复选框表"

v-model="val3"

:options="['选项A','选项B','选项C']">

</mt-checklist>

3.2:mint-ui 组件库-面板--(重点)

面板,可切换显示子页面

<mt-tab-container v-model="active"> 父元素(面板)

<mt-tab-container-item id="tab1"> 子面板1

<mt-cell v-for=""></mt-cell> 单元格

</mt-tab-container-item>

<mt-tab-container-item id="tab2"> 子面板2

<mt-cell v-for=""></mt-cell> 单元格

</mt-tab-container-item>

<mt-tab-container-item id="tab3"> 子面板3

<mt-cell v-for=""></mt-cell> 单元格

</mt-tab-container-item>

</mt-tab-container>

注意:改变active值与子面板id一致即显示对应子面板

练习: 在data中保存数组件,

(1)list["美食","购物","休闲"]

(2)依据数组值创建三个mt-button

(3)点击按钮完成子面板切换

(4)当前被点击文字高亮

3.4:mint-ui 组件库-面板--(重点)

底部选项卡,点击tab会切换显示页面,

<mt-tabbar v-model="selected" fixed>

<mt-tab-item id="外卖">

外卖

</mt-tab-item>

<mt-tab-item id="订单">

外卖

</mt-tab-item>

</mt-tabbar>

- fixed 固定在页面底部

-value 返回当前选中tab-item的id

3.5:微信

(1)创建components/weixin/Home.vue 全局组件

(2)从上到下设计每一个组件

(3)最上面子组件 components/weixin/common/TitleBar.vue

(4)简洁示例 F.vue父 S.vue子元素

Day 03

今天学习的内容

1:复习上周重点

2:今天的目标

2.1:mint-ui组件库;综合应用微信

2.2:网页结构分析

2.3:创建项目目录

weixin 项目目录

common 子组件

json 数据文件

Home.vue 入口组件

2.4:顶部标题栏

-将标题栏创建成一个子组件作为Home.vue一部分

-分析分为二个部分左侧文字右侧两张图片

-使用弹布局由于标题栏固定，定位方式 fixed

-common/TitileBar.vue

注意:左侧文字右侧图片两张点击事件由父元素

2.5:消息面板创建

-Message.vue 消息子组件

负责消息外观设计:

左侧:图片

左侧:标题和子标题

右侧:时间

-MessageList.vue 消息列表子组件

负责加载数据 weixin/json/messagelist.json

创建循环

并且在循环调用Message.vue 子组

-Home.vue 调用MessaeList.vue 子组件

2.6:底部导航栏 tabbar

-图片 ic_weixin_normal.png/ic_weixin_selected.png

-tabbar中图片创建单独组件

-子件组TabBarIcon.vue 图片显示与切换样式

-在Home.vue 创建 tabbar中间图片TabBarIcon.vue

3:项目阶段:学子商城

-用户登录(**)

-商品列表

-商品详情

-购物车(*****)

作业:

(1)复习weixin 项目(重点)

(2)用户登录组件 Login.vue

(3)session 百度搜索

(4)mysql 查询SQL SELECT

Day 04

今天学习的内容

1:复习昨天的重点

2:今天的目标

2.1:weixin完成--(重点)

2.2:学子商城--登录

用户输入用户名和密码点击提交按钮,

如果格式出错提示:用户名格式不正确密码格式不正确

用户不存在提示:用户名或密码不正确

正确跳转商品主页

2.3:学子商城--数据库-加密

t_login[id/uname/upass]

id INT PRIMARY KEY AUTO_INCREMENT,

uname VARCHAR(255)

upass VARCHAR(32)

2.3:学子商城--数据库

由于用户登录密码要求安全度比较高，习惯加密保存

示例:

tom/123

t_login

id uname upwd

1 tom 123 #错误保存方式

解决思路:

将密码:123 原先密码 -> 加密技术 ->x93k3s82820sk202jd98i

id uname upwd

1 tom 202cb962ac59075b964b07152d234b70 #正确

解决办法: md5(); 加密函数 32位

md5(123) => 202cb962ac59075b964b07152d234b70

常规安全思路:

(1)用户密码8位以上:数字/小写字母/大写字母/特殊字符

(2)多次加密

如何登陆:

(1)用户输入用户名和密码 tom/123

(2)node.js 接收用户 tom/123

(3)将用户输入123加密 #判断方式密码比较密码 52

md5(123) =>202cb962ac59075b964b07152d234b70

(4)sql语句完成登录验证

SELECT id FROM t_login WHERE uname = ? AND upwd = md5(?)

(5)数据库表

id uname upwd

1 tom 202cb962ac59075b964b07152d234b70 #正确

2.4:项目目录结构

2.5:学子商城--cors 跨域

vue-cli 脚手架 8080 Login.vue

vue-server-app node.js服务器 3000

#以上程序在执行由于8080访问另一个程序3000

#跨域访问

解决方案:

(1)jsonp

(2)cors 第三方模块安装配置node.js即可

-下载cors

-在node.js 服务器配置:哪个程序可以跨域访问当前node.js

const cors = require("cors");

server.use(cors({

origin:[允许跨域请求程序地址],

credentials:true # 是否验证

}));

示例:允许脚手架8080跨域访问 node.js

const cors = require("cors");

server.use(cors({

origin:["http://127.0.0.1:8080","http://localhost:8080"],

credentials:true # 是否验证

}));

2.6:学子商城--session-cookie

session对象:原理

在服务端保存用户专有数据对象.[uid]

由于session对象保存服务器端安全性高

-session对象:当用户访问网站第一个网页，就创建session

对象(session开始)中间用户可以打开多个网页(会话中),

当用户关闭浏览器(会话结束)一旦会话结束，会话对象中保存

数据也就丢失.

session对象作用:用于保存用户登录凭证,通常凭证用户编号

-在项目添加 session 功能

(1)将数据保存session对象中

req.session.uid = 1;

(2)从session对象中获取数据

var uid = req.session.uid;

2.7:在项目如何添加session功能

(1)引入模块

const session = require("express-session");

(2)配置模块

server.use(session({

secret:"128位字符串", #128位字符串

resave:true, #每次请求是否更新数据

saveUninitialized:true #保存初始化数据

}));

(3)当用户登录成功，将用户uid 保存session对象

req.session.uid = 1;

(4)其它模块读取session中uid [购物车/订单]

var uid = req.session.uid;

常见概念上错误

哪个是服务器/哪个是脚手架/node_modeuls在哪里

每个程序有自己独立node_modeuls 相互没关系

2.8:学子商城--用户登录

src/components/xz/Login.vue 登录组件[参考淘宝登录]

1:用户名输入框/密码输入框/登录按钮

2:占位符

3:外观样式参考淘宝登录

4:用户名和密码必须通过正则表达式验证 messagebox

5:发送ajax请求 axios 验证

src/components/xz/Home.vue 商城首页

2.9:ajax 库axios

#兼容性不错

(1)设置请求服务器原始路径(基础路径)

http://127.0.0.1:3000/login

http://127.0.0.1:3000/cartlist

http://127.0.0.1:3000/cartRemove

...

axios.defaults.baseURL = "http://127.0.0.1:3000/";

.get("login");

.get("carlist");

.get("cartRemove");

(2)设置跨域请求保存session值

axios.defaults.withCredentials=true

作业:学子商城用户登录组件Login.vue

404 错误发送的请求地址服务器没有地址错误

{path:'/',redirect:"/XZHome"}, //redirect 重定向

Day 05

今天学习的内容

1:复习昨天的内容

2:今天的目标

2.1:session

2.2:session:会话

会话指操作过程:

-会话开始:当用户打开网站一个网页

-会话中:中间用户可以打开此网站多个网页

-会话结束:当用户关闭浏览器

2.3:session对象 [会话对象]

session对象是在当前会话保存数据专用对象

在当前会话中所有网页中共享此数据

当会话结束结束:session 对象保存数据也丢失

2.4:session对象工作原理

-当会话开始在服务器端创建session对象

-为了保存数据安全性,服务器会将session对象中数据加密保存

-将session id值发送客户端浏览器cookie保存

-cookie保存session id 做为用户凭证

-如果会话结束 session对象失效/对应cookie失效

2.5:node.js在程序如何启session

-引入模块

const session = require("express-session")

-配置模块

server.use(session({

secret:"128位字符串", #自定义字符串

resave:true, #每次请求更新数据

saveUninitialized:true #保存初始化数据

}));

-在项目登录时将用户id 保存session

req.session.uid = 2; #正确

req.session.id = 2; #错误

-其它的功能直接读取id 即可作为用户登录成功凭证

示例:显示购物车,谁购物车 var uid = req.session.uid;

#注意:将数据保存至session坑名称

保存数据名称不要叫id原因 session对象有一个属性id

2.6:脚手架配置

axios 默认情况下发送ajax跨域请求丢失session

axios.defaults.withCredentials=true

发送ajax请求基础路径

axios.defaults.baseURL="http://127.0.0.1:3000/"

示例:登录

this.axios.get("login");

2.7:出错调试

1:F12->查看控制台->如果有错读错误理解问题原因

2:F12->NETWORK->

Header

Response

3:一行一行调试

handler for "click": "ReferenceError: n is not defined"

原因:n没有定义

net::ERR_CONNECTION_RESET

原因: node.js 服务器出错停止工作

解决:查看node.js 控制台窗口读取出错信息

Error: connect ECONNREFUSED 127.0.0.1:3306

原因:mysql停止工作没有启动或者出错

2.8:完成学子商城--用户登录-组件跳转

this.$router.push("组件路径")

示例:

登录成功/Home

this.$router.push("/Home");

2.9:完成学子商城--商品列表-分页

-数据库

xz_laptop[lid/title/price]

-app.js

/product

参数: pno页码=1 ;pageSize页大小=4

sql: SELECT lid,title,price FROM xz_laptop LIMIT ?,?

第一问号:查询起始行数 (pno-1)*pageSize; 页码减一乘以页大小

第二问题:一次查询几行 pageSize

json: {code:1,msg:"查询成功",data:result}

-xz/product.vue

2.10:完成学子商城--商品列表-分页

-当组件创建成功后加载第一页数据

created()

(1)发送ajax请求服务器 /product?pno=1

(2)服务器返回第一页数据{code:1,msg:"成功",data:[]}

(3)获取数据并且创建循环显示内容

-当用户点击"加载更多" 加载下一页数据

click

(1)加载更多:数据追加

2.11:创建xz/Home.vue 组件

-子标题组件

-分隔块

-面板

-tabbar

作业:学子商城tabbar完成

今天学习的内容

1:复习昨天的重点

2:今天的目标

2.1:完成weixin--面板

<mt-tab-container v-model="active">

<mt-tab-container-item id="message">

</mt-tab-container-item>

</mt-tab-container>

2.2:完成weixin--底部导航条

<mt-tabbar v-model="active" fixed>

<mt-tab-item id="message">

图片:子组件

文字

</mt-tab-item>

</mt-tabbar>

2.3:完成weixin--底部导航条--按钮上显示图片子组件

TabBarIcon.vue

-focused:false 当前按钮是否是焦点

-selectedImage: 选中显示图片

-normalImage: 默认显示图片

2.4:修改tabbar默认样式

/*修改tabbar 默认文字颜色*/

.mint-tabbar>.mint-tab-item{

color:#999999;

}

/*修改tabbar 选中文字颜色*/

.mint-tabbar>.mint-tab-item.is-selected{

color:#45c018;

}

#注意：vue事件有一些修饰符 native:原生事件

如果自定义属性直使用事件绑定即可,如果调用组件库中组件

直接绑定失败情况,清加修饰符 native 启动原生事件绑定

父元素给子元素绑定事件 native

#注意:去除默认边框

-App.vue 根组件它的内补丁影响我们组件

-normalize.css->n.css 通用样式文件

public/index.html

2.4:学子商城--登录--分析

用户打开登录网页输入用户名和密码点击提交按钮

-格式出错提示:用户名格式不正确

-用户不存在提示:用户名或密码不正确

-正确跳转商品主页

2.5:学子商城--登录--[后端程序]服务器-数据库

-进入xz库 USE xz;

-创建表用户登录表

xz_login [id 编号/uname 用户名/upwd 密码]

id INT PRIMARY KEY AUTO_INCRMENET

uname VARCHAR(50),

upwd VARCHAR(32),

通用功能:密码内容需要加密后保存不是原文件保存

1 tom 123 原文

1 tom sd09234ksd90239epsd093kds0923 密文

为什么密码需要加密保存防止工作人员泄密

解决思路:将密码加密处理

解决方法:md5() 单向加密算法加密结果32位密码

"123" => 202cb962ac59075b964b07152d234b70

常规问题:

-md5单向加密没有解密算法

-md5多次加密 md5(md5('123'))

-更有效方法强化用户密码难:

8位以上/数字/大写/小写/特殊符号

如何登录流程

(1)用户输入用户名和密码 tom/123将数据发app.js

(2)app.js 接收用户输入 tom/123

(3)app.js 将用户输入123加密与数据密码比较

SELECT id FROM xz_login WHERE name = ?

AND upwd = md5(?);

数据库 xz_login

1 tom 202cb962ac59075b964b07152d234b70

(4)pool.query(sql,[uname,upwd],(err,result)=>{

if(err)throw err;

if(result.length==0){

res.send({code:-1,msg:"用户名或密码错误"});

}else{

res.send({code:1,msg:"登录成功"});

}

})

-添加测试数据

2.6:学子商城--登录--[后端程序]服务器-app.js

(1)加载第三方模式

express web服务器

mysql mysql驱动模块

cors 跨域脚手架8080 app.js 3000

express-session session

#下载 npm i mysql express express-session cors

#必须联网完成以上操作

(2)配置第三方模式

-mysql 创建连接池 [必须条件]

-配置跨域 cors 指定哪个程序可以跨域访问服务器

origin:["http://127.0.0.1:8080","http://localhost:8080"]

-配置session

secret:"安全字符串", #加密字符串

resave:true, #每次请求保存session数据

saveUninitialized:true #保存初始化数据

(3)处理用户登录任务

server.get("/login",(req,res)=>{

-参数 uname/upwd

-sql SELECT id FROM xz_login WHERE uname = ?

AND upwd = md5(?)

-json {code:1,msg:"登录成功"}

});

测试:

(1)启动node app.js

(2)打开浏览器在地址栏输入

http://127.0.0.1:3000/login?uname=tom&upwd=123

按回车

http://127.0.0.1:3000/login?uname=tom&upwd=122

按回车

2.7:学子商城--登录--[前端程序]脚手架

-src/components/xz/Login.vue

-创建输入框用户名密码提交按钮 (mint-ui)

-为提交按钮绑定点击事件

(1)获取用户名和密码

(2)正则表达式验证是否有误显示短消息

(3)发送ajax请求

2.8:session-会话-(前端后端程序)

(1)session一个用户操作过程

-会话开始:当用户打开某个网站第一个网页

-会话中:中间用户可以打开此网站多个网页

-会话结束:当用户关闭浏览器

(2)session对象(在服务器为了保存此次会话专有数据对象)

session对象是保存当前会话中使用数据,在当前会话

中所有网页可以共享此数据，但是当会话结束session数据

失效

为什么使用session 对象,项目中有一些数据必须保存

session对象比如:当前登录用户编号 uid

解决问题:

作业1:完成学子商城用户登录组件

HTML5

Day01

今天学习的内容

1:复习上周重点

2:今天的目标

2.1:html5新特性--视频音频

-常见属性

controls 是否显示播放控件 <video controls >

autoplay 是否自动播放 <video autoplay> 兼容性太差

loop 是否循环播放

muted 是否静态播放

poster 在播放视频之前是否显示广告图片

preload 预加载方式(策略)

none:不预加载任何数据

metadata:仅预加载元数据

(视频时长;视频第一个画面;视频高度宽度)

auto:预加载元数据，还加载一定时长视频

2.3:html5新特性--视频高级特性--事件

-canplaythrough 当前视频加载结束可以播放事件

duration 获取视频时长

-ended 视频播放结束触发事件

-timeupdate 视频正在播放

currentTime 当前播放时间点

2.4:html5新特性--视频高级特性--样式

video 样式 object-fit

fill: 默认 "填充" 将视频拉伸操作填满父元素(变形)

contain: "包含" 保持原有视频尺寸，父元素留有空白区域

conver: "覆盖" 保持原有视频尺寸, 宽度或高度至少有一

个与父元素一致(裁切)

2.5:html5新特性--音频

基础知识: x.mp3 x.wav ...

特性1:默认audio不可见，如果添加controls属性可见

特性2:属性方法事件大多数与视频相同

练习:创建复选框实现控制背景音乐播放练习

当选中复选框播放背景音乐 a3.play()

当清空复选框暂停播放 a3.pause()

cb.change = function(){this.checked==true}

2.6:html5新特性--在网页上绘图--(重点)

-网页绘制三种技术

(1)svg: 2D矢量图用线段组成图形

特点:可以无限放大或缩小不会失真,颜色不够丰富

(2)canvas:2D位图用像素点组成图形

特点:不可以放大或缩小，颜色细腻

(3)webgl:3D位图

尚未纳入 H5标准

2.7:html5新特性--在网页上绘图--canvas

(重点-工作流程-坐标系-单词多)

-坐标系

-工作流程

(1)通过标签创建画布

注意事项:画布宽度和高度只能通过js 或者标签属性来赋值

但是不能使用css赋值(出现变形)

(2)通过js程序获取画布

var c3 = document.getElementById("c3");

(3)通过画布元素获取画布中指定画笔对象[上下文对象]

var ctx = c3.getContext("2d");

#2d平面图形

-绘制矩形

ctx.strokeRect(x,y,w,h); 绘制空心矩形

x,y 矩形左上角位置

w,h 短形宽度和高度

ctx.strokeStyle = "#fff"; 设置空心边框样式

ctx.lineWidth = 1; 设置空心边框宽度

ctx.fillRect(x,y,w,h); 绘制实心矩形

ctx.fillStyle = "#fff"; 设置实心填充样式

*ctx.clearRect(x,y,w,h); 清除一个矩形范围内所有元素

练习1:绘制左右移动空心矩形

06_rect_exam.html

练习2:绘制柱状销售统计图

07_rect_exam.html

-绘制文字(字符串)

var str = "石家庄"

ctx.font = "19px SimHei"; 字体与大小

ctx.fillText(str,x,y); 绘制文本

ctx.textBaseline = ""; 指定文本基线

["alphabetic","top","bottom"]

str:绘制文本

x,y:文本左上角位置

作业1:薪水统计图[柱状统计图]

var sales = [

{m:"一月",s:3000},

{m:"二月",s:3200},

{m:"三月",s:3400},

...

{m:"十二月",s:5400}

];

|| &&

web笔记全的更多相关文章

web前端全栈学习之路
web前端全栈学习之路 --- 陆续更新中一.HTML相关 1.HTML常用标签:http://www.cnblogs.com/wyb666/p/8733699.html 2.HTML5基础: 3. ...
Linux一键安装web环境全攻略phpstudy版
此教程主要是应对阿里云Linux云服务器ecs的web环境安装,理论上不限于阿里云服务器,此教程对所有Linux云服务器都具有参考价值. 写这篇文章的目的:网上有很多关于Linux一键安装web环境全 ...
Web前端/全栈核心(html5/css3/js/vue/react/angular/es6/node)观看笔记
a标签中的超链接,需要加 http:// 否则会出现页面找不到. iframe中添加a标签,a标签中的target属性可以控制即将打开的页面,在那个位置显示. _blank 在新窗口中打开被 ...
Java WEB 笔记
1. 部署并启动 tomcat 服务器 1). 解压 apache-tomcat-version 到一个非中文目录下 2). 配置一个环境变量,JAVA_HOME(指向 JDK 安装目录)或 JRE_ ...
Java入门学习笔记(全)
JAVA https://zhuanlan.zhihu.com/p/21454718 引用部分实验楼代码,侵删先通读文档再亲自试标程复习时自己再批注 1.a = b += c = -~d a = ...
Java Web笔记（2）
学习笔记,狂神说java,链接:https://www.bilibili.com/video/av68833391 5.Maven 我为什么要学习这个技术? 在Javaweb开发中,需要使用大量的ja ...
Java Web 笔记(1)
JavaWeb 学习笔记,狂神说java,链接:https://www.bilibili.com/video/av68833391 Java Web 1.基本概念 1.1.前言 web开发: web, ...
Java Web 笔记（杂）
Java Web 概述什么是Java Web 在Sun的Java Servlet 规范中,对Java Web 应用做了这样的定义: "Java Web" 应用由一组Servlet ...
linux学习笔记全-如何学习linux？
简介今天整理文件整理出了好多年前学习linux的笔记就整理下发布在博客上怕文件形式会误删. linux入门基础对于新手而言不推荐看书!!不推荐看书!!(大牛跳过)先看视频看linuxcast的视频 ...

随机推荐

FM
1.FM (因子分解机) 2.FM的作用: (1)特征组合是许多机器学习建模过程中遇到的问题,如果对特征直接进行建模,很可能会忽略掉特征与特征之间的关联信息,因此,可以通过构建新的交叉特征这一特征组合 ...
RestTemplate 发送post请求
springboot使用restTemplate post提交值 restTemplate post值 post提交有 FormData和Payload 两种形式: 第一种是formdata形式,在h ...
UML建模重点圈划
面向对象的特征 *P9*>封装性>继承性>多态性>传递性建模语言的三个类别 *P14*> - 非形式化的.半形式化的和形式化的 UML 特点*15*主要有三个特点:&g ...
BZOJ 1112: [POI2008]砖块Klo Splay + 性质分析
Code: #include<bits/stdc++.h> using namespace std; #define setIO(s) freopen(s".in",& ...
[NOIP2014]飞扬的小鸟[DP]
[NOIP2014]飞扬的小鸟 ——!x^n+y^n=z^n 题目描述: Flappy Bird 是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度,让小鸟顺利通过画 ...
Spring Security 3.1 中功能强大的加密工具 PasswordEncoder
Spring Security 3.1 中功能强大的加密工具 PasswordEncoder 博客分类: security spring springsecurity 好吧,这种加密机制很复杂,还是 ...
（转）使用windows server2008 创建 Hyper-V虚拟机
转:https://jingyan.baidu.com/article/7c6fb42833ad4980652c904f.html Hyper-v是微软提供的虚拟机,利用server 2008搭建hy ...
pandas 之dataFrame 数据显示不完全的解决方案
对于这种省略部分,可以使用set_option进行设置,就可以看到了. # 显示所有行(参数设置为None代表显示所有行,也可以自行设置数字) pd.set_option('display.max_c ...
第九届ECNU Coder K.计软联谊
题目链接:http://acm.ecnu.edu.cn/contest/16/problem/K/ 题目: K. 计软联谊 Time limit per test: 7.0 seconds Time ...
Openstack_SQLAlchemy 修改数据库的表结构
目录目录前言更改数据库的方法为数据库添加一张或多张新表删除一张或多张表为旧表添加一个字段为旧表更新一个字段为旧表初始化一条新的记录最后前言 SQLAlchemy 的使用方法和相关基 ...

web笔记全

1、项目流程与数据库

Mysql

Javascript基础

Day01

Day02

Day03

Day04

Day05

Day06

Day07

Day08

Day09

Nodejs

阶段2: HTML、AJAX、CSS、BOOT

HTML

day01 HTML

day02 图像&列表&表格

day03 列表表单

day04 表单控件

AJAX

day05 ajax

day06 ajax

CSS

day08 css

day09 css

day10 css

day11 css

day12 css

day13 css

day14

BOOT

day15 bootstrap

day16 bootstrap

day17 bootstrap

day18 bootstrap

阶段3: JS、DOM&BOM、JQUERY、VUE

1.JS

day01 正则

day02 String正则API&FegExp

day03 Function

day04 面向对象

阶段3: JS、DOM&BOM、JQUERY、VUE

1.JS

day01 正则

day02 String正则API&FegExp

day03 Function

day04 面向对象

day 07

day 08

day 09

DOM&BOM

day 01

Jquery

web笔记全的更多相关文章

随机推荐

热门专题