1、BOM概述：Browser Object Model - 浏览器对象模型：专门为操作浏览器准备的一些对象，没有任何标准，不像DOM由W3C制定标准，所以存在很大的兼容性问题，使用率相对DOM较少
BOM有哪些对象：window、history、navigator、location、screen、event
个人认为重要的只有两个对象：window、event
2、window对象：
在浏览器中扮演着两个角色：
1、代替了Global，充当全局对象 - 保存着全局变量和全局函数
2、指代当前窗口本身
3、打开网页的新方式：
知道了：1、跳转用不用a标签无所谓
2、有点点用：提升用户的体验感，前端是距离用户最近的，多为用户做考虑
3、a标签的作用
1、当前页面打开，可以后退：
HTML：<a href="url">内容</a>
JS：open("url","_self");
2、当前页面打开，禁止后退：何时：电商网站：结账过后不允许后退了
HTML：做不了
JS：history：当前窗口的历史记录，只有当前窗口有了历史记录才能前进后退
location：当前窗口的正在打开的url网址，提供一个方法：
location.replace("新url"); - 不叫作跳转，叫做替换，当时网址被替换了，页面也会跳转，但是不会产生历史记录
3、在新窗口打开，可以打开多个
HTML：<a href="url" target="_blank">内容</a>
JS：open("url","_blank");
4、在新窗口打开，只能打开一个：
何时：电商网站：购物车跳转到结账页面，结账页面只允许打开一个
HTML：<a href="url" target="自定义name">内容</a>
JS：open("url","自定义name");
其实在每一个窗口的底层都有一个名字name，_self指向的自己当前的名字
_blank始终会得到一个新名字
如果自定义名称，那么浏览器会发现这个窗口已经打开过了，那再次打开时，会把原来的窗口给替换掉
扩展：a标签的作用
1、跳转
2、锚点
3、下载：<a href='xx.rar/zip/exe'>文字</a>
4、打开：<a href='xx.txt/图片后缀'>文字</a>
5、运行js - a标签不需要绑定事件：<a href='javascript:js代码;'>文字</a>
4、属性和方法：
打开新窗口：var 新窗口=open("url","target/自定义","width=,height=,left=,top=");
特殊：1、没有加第三个参数的时候，我们的新窗口会和浏览器融为一体
2、添加上第三个参数的时候，我们的新窗口就会脱离浏览器独立存在，而且可以把他保存起来
关闭窗口：window/新窗口.close();
移动窗口：新窗口.moveTo(x,y);
修改窗口的大小：新窗口.resizeTo(newW,newH);
获取屏幕的大小：screen.width/height
获取浏览器的完整大小：outerWidth/Height
获取浏览器文档显示区域的大小：innerWidth/Height
扩展：event对象可以获取鼠标的位置：2步
1、在你的事件处理函数中的第一个形参会自动获取到事件对象event
2、获取鼠标的位置：
获取鼠标相对于屏幕的坐标：e.screenX/Y
获取鼠标相当于文档显示区域的坐标：e.clientX/Y
获取鼠标相当于网页的坐标：e.pageX/Y
5、定时器：
等待一段时间才会执行的代码，可能会反复执行，也可能只会执行一次
两种：
1、周期性定时器
开启：timer=setInterval(回调函数,延时);
停止：clearInterval(timer);
2、一次性定时器
开启：timer=setTimeout(回调函数,延时);
停止：clearTimeout(timer);
特殊：1、不管是一次性还是周期性，底层其实都是一样的，甚至两者可以互换
2、一次性<=>周期性
面试题：
函数和循环和定时器，都可以反复执行代码，区别在哪里？- 时机
1、函数：要么程序员调用几次执行几次，要么用户触发几次执行几次
2、循环：几乎是一瞬间就完毕了
3、定时器：需要先等待一段时间才会执行
1、history：保存着当前窗口的历史记录 - 浏览器自带此功能
前进：history.go(1);
后退：history.go(-1);
刷新：history.go(0);
2、navigator：保存着当前浏览器的基本信息（浏览器名称以及版本号）
通过js判断用户打开的是什么浏览器 - 相当于js版本的css hack（专门为老IE准备），对不同的浏览器可以执行不同的操作
就一个属性：navigator.userAgent;
见：03.html - 说白就是想办法拿到你想要的部分
不重要 - 现在大部分的操作前辈们都提供了兼容的方式，不需要自己判断浏览器是什么
3、location：保存着当前窗口的正在打开url
知道：1、常识：一个url由哪些部分组成 <https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E7%A2%89%E5%A0%A1%E5%95%A6&fenlei=256&rsv_pq=c4aa123e001170d6&rsv_t=e860GzuTAOhvsNAJlqpqWOqgcsjzPtFxZboY5eyJI1dpBhBE6sqLqUDY2Iw&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=10&rsv_sug1=3&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&prefixsug=%25E7%25A2%2589%25E5%25A0%25A1%25E5%2595%25A6&rsp=4&inputT=3405&rsv_sug4=3404>
<http://127.0.0.1:8020/bom02/new/03%E5%88%A4%E6%96%AD%E6%B5%8F%E8%A7%88%E5%99%A8%E4%BB%A5%E5%8F%8A%E7%89%88%E6%9C%AC%E5%8F%B7.html>
一定由5份组成：
1、协议：http/https
2、主机号/域名：但是域名是需要花钱购买的，白嫖就只能用主机号
3、端口号：默认端口可以省略不写，http默认为80，https默认为443
4、文件的相对路径：百度加密了
5、查询字符串/请求消息：客户端向服务器端发起的请求消息：表单提交带来的东西
协议名://主机号|域名:端口号/文件的相对路径?查询字符串
而且，location对象就可以获取到这5部分：不需要记忆，直接console.log(location)输出进行观察
2、可以干什么：跳转页面
location="新url"
location.href="新url"
location.assign("新url")
跳转页面，禁止后退：location.replace("新url") - 不会产生历史记录
刷新：location.reload();
4、event：事件对象
什么是事件：用户触发的 或 浏览器自动触发 的
1、绑定事件：3种
1、在HTML标签上添加事件属性
<elem on事件名="js代码"></elem>
缺点：1、不符合我们内容html与样式css与行为js的分离
2、一次只能绑定一个元素，不能动态绑定事件
3、一个事件只能放入一个事件处理函数
2、在js中，使用事件处理函数属性绑定事件：
elem.on事件名=function(){
}
优点：1、符合我们内容html与样式css与行为js的分离
2、动态绑定事件
缺点：一个事件只能放入一个事件处理函数，我个人觉得不算缺点，你为什么不把代码放到一起？
3、绑定事件的API
主流：elem.addEventListener("事件名",callback);
老IE：elem.attachEvent("on事件名",callback);
兼容：if(elem.addEventListener){
elem.addEventListener("事件名",callback);
}else{
elem.attachEvent("on事件名",callback);
}
优点：1、符合我们内容html与样式css与行为js的分离
2、动态绑定事件
3、一个事件只能放入多个事件处理函数
缺点：不兼容老IE - 麻烦
4、事件周期：3个阶段
1、捕获阶段：记录要执行的事件有哪些，由外向内
2、目标触发阶段：目标元素：实际触发事件的元素
3、冒泡执行阶段：由内向外的冒泡执行
5、如何获取事件对象event：
主流：事件处理函数的第一个形参会自动获得
老IE：window.event;
兼容：e=event;
第二次小三上位：window.event，主流也支持
只有你获取到了事件对象event才可以做后续5个操作：
1、获取鼠标的坐标
2、阻止冒泡：- 不要用，用了就不能利用冒泡了，鄙视/面试
主流：e.stopPropagation();
老IE：e.cancelBubble=true;
兼容：if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}
3、利用冒泡：也叫做事件委托：多个子元素都共有一个事件，把事件绑定在父元素身上，通过利用冒泡，点击儿子，父元素的事件也会触发
为什么：绑定的时间越多，创建的事件监听对象也就越多，网站性能就会越低下
何时：任何一个功能都要做成事件委托
当前元素：this -> 水性杨花（在不同的场景，指向的人是不一样的）
学会找到目标元素：永远是你事件触发的元素
主流：e.target;
老IE：e.srcElement;
兼容：var target=e.srcElement;
第三次小三上位：e.srcElement，主流也支持！
4、组织浏览器的默认行为：- 看你需不需要阻止
比如：阻止右键(window.oncontextmenu)会弹出一框框，阻止键盘事件window.onkeydown（F12 、F5...）...
主流：e.preventExtensions();
老IE：e.returnValue=false;
兼容：if(e.preventExtensions){
e.preventExtensions();
}else{
e.returnValue=false;
}
5、获取键盘键码：不需要记忆，直接console.log(e.keyCode); - 一般出现在游戏开发
1、学习的原因：
1、前端的招聘要求 - 熟悉 或 了解一门服务器端语言者优先
2、对于我们前端来说，了解服务器端的机制，更好更快的进行前端开发 扩展：
全栈工程师：客户端（PC+移动端+小程序） + 服务器端（php+node.js） + 数据库（MySQL+mongoDB）
技术类发展：
全栈 - 涉及多个领域，每个领域都会用，但是不必精通 -> 架构师 -> 项目经理 -> 技术总监CTO
专家 - 某个领域很强的，无敌：有创造的能力，vue的创造者
销售类发展：
产品 -> 产品经理 -> 产品总监
创业类：HTML + CSS
教学类：
可能成为全栈的语言：
1、java语言 - 不包含移动端（不包含ios）
2、javascript语言
客户端 - 开发根本
服务器端 - node.js 历史上第一次一门语言可以通吃前后端
移动端 - 网页/app/小程序/公众号（ios+andriod没落了：正是因为前端的崛起：一个前端可以跨平台开发 - 诞生了一个技术混合开发：uniapp框架）
数据库 - MySQL、mongoDB
server：2天
MySQL一天 + PHP一天
对服务器端的掌握 - 入门
最终目的：
全栈开发：登录+注册+搭配上3天ajax完成全栈一条龙：对网页进行增删改查
小项目：图书/金夫人/咖啡管理系统
2、基本内容：
服务器概念： 简单来说就是一台电脑
生活中：微机
商业/国家：小型机（造价几十万，好的上百万）、中型机、大型机、超级计算机
拥有服务器的方式：
1、买 - 配置较好的微机：中小型公司
2、租一台云服务器 - 腾讯云/阿里云/百度云/新浪云... - 配置自己选择，价格好商量，按年收费
3、买一台小型机 - 对小公司遭不住
对于开发人员来说
硬件服务器 - 电脑
软件服务器 - 中间件（软件可以将你的电脑变成一台服务器：别人可以来访问）
软件架构：
C/S：clinet客户端/server服务器端
举例：QQ/微博/大型网络游戏
优点：用户体验感较好
运行稳定
对带宽要求低
缺点：占硬盘空间
更新过于麻烦 - 服务器端和客户端都要更新
B/S：browser浏览器端/server服务器端
举例：网页版QQ/微博/游戏
优点：几乎不占硬盘
更新简单 - 只需要更新服务器端
缺点：带宽要求高
体验感越来越棒了 - 云平台游戏（根本不关心你电脑的配置如何，也不需下载，打开即玩，但是带宽要求高）
XAMPP软件 - 中间件
安装：双击->一路往下冲
Apache - 用于运行PHP的环境
出现错误：
1、直接弹出一警告框：你的电脑里缺少api-ms-win-crt-conio-l1-1-0.dll文件
解决：粘贴到C:/windows/sysWow64
2、错误日志：error:apache shutdown .... - 你的端口号被占用了
修改：点击apache 对应的 config按钮，前两个选项：第一个选项把所有的80可以换成别的，第二选项把所有的443换成别的
能不改，就不改 - 默认端口可以省略不写
3、如果以上两个操作都不行，再看看你的安装路径是不是有错，必须在装载：盘符:/xampp
4、如果以上3个操作都不行，重装系统
TOMCAT - 用于运行java的环境
如果你的apache 成功运行了，恭喜你，你的服务器已经开启了（私网/局域网）
如何访问Apache服务呢（网站）？其实apache服务器控制这一个文件夹：d:/xampp/htdocs
自己访问：
打开浏览器：输入
127.0.0.1:端口号
localhost:端口号
主机号只有自己可用
其他人也可以来访问：
打开cmd输入ipconfig，把ipv4给对方就可以了
192.168.30.5
在服务器上搭建一个自己的项目
把自己做的做过的任意一个项目：全部复制到d:/xampp/htdocs
添加网页小图标：
任意图片，放到d:/xampp/htdocs，名字改为favicon.ico
修改顶级域名 - 假象（没花钱，只有自己可以用）
C:\Windows\System32\drivers\etc\hosts文件
在最后添加一句话127.0.0.1 www.daiyue.com
问题1：保存时，系统文件，不允许修改，另存为到桌面，拖进去覆盖它
问题2：打开是一个白板，把代老湿提供的覆盖过去
MySQL - 数据库产品：2大类
关系型数据库 - 以表格为主
Oracle - Oracle（甲骨文）
主要应用于【企业级】开发市场：大公司、国企、事业单位：警察局、医院...（不差钱） - 优势：安全性高 缺点：收费的
MySQL - Oracle（甲骨文）
主要应用于【互联网】开发市场 - 优势：免费、简单、开源 - 中小型企业 sqlserver - 微软：大学讲课
非关系型数据库 - 没有固定的格式
是一种运动 - 反关系型数据库
主流产品 - mongoDB，以JSON格式为主
MySQL
最初是由MySQL AB软点化公司推出
瞬间爆火 - 免费、简单、开源
个人：修改、查看、添加、删除源代码 - 开挂、私服
公司：免费聘请民间大佬帮你做测试，帮你升级，帮你维护
开源项目几乎不会赚钱：只能等你赞助
爆火的网站架构：LAMP - Linux系统 + Apache + MySQL + PHP - 这四个都是免费的，让中小公司的老板非常happy，只需支付员工费+场地费+水电气费
企业级网站架构：Linux(AIX) + JavaEE + Oracle + weblogic - 一套架构下来起码上百万 - 安全性高
MySQL AB被sun公司收购了
sun公司后期又被oracle公司收购了
oracle不会被收购，大佬，三款明星产品：
oracle
mysql - 社区版（免费）和商业版（收费）
java
为什么叫MariaDB？
MySQL的作者在oracle公司受到了歧视排挤，并不重视
MySQL的作者就自己出来重新做了原滋原味的MySQL了，但是名字不能再叫mysql，因为版权问题
用了自己小女儿的名字命名
go语句诞生原因之一，就是因为使用java底层的2句代码，被告了，赔偿了2个亿
b c
c++ c#
python java
巨蟒 sun：太阳
皮同
希腊过来的一个词 太阳神阿波罗
阿波罗杀了皮同
MySQL基本内容：
访问：2种
1、图形化界面（更加简单更美观）方式 - 傻瓜式操作
要求：同时打开mysql和apache
访问：127.0.0.1:端口号/phpmyadmin localhost:端口号/phpmyadmin
有的同学可能打不开
2、命令行方式：复杂很多，但是只有这样你才能学到真正的技术：SQL语句
如何进入数据库：
1、打开cmd
2、输入cmd的命令，进入到d:/xampp/mysql/bind
1、输入：盘符: 回车
2、输入：cd xampp/mysql/bind
3、登录：mysql -uroot -p 回车不要加分号
4、退出：exit
5、SQL语句：关系型数据库SQL语句互通
1、数据库：
查看数据库：SHOW DATABASES;
创建数据库：CREATE DATABASE IF NOT EXISTS 数据库名称 CHARACTER SET utf8;
切换数据库：USE 数据库名称;
2、数据表：只教你如何创建数据表
数据库的数据类型：
数值：Int - 整型
Float/Double - 浮点型
Decimal - 精确值
字符串：
Char - 长度固定的
Varchar - 长度可变的
日期：
Date - YYYY/MM/DD
Datetime - YYYY/MM/DD hh:mm:ss
Timestamp - 时间戳（标识：唯一不重复 - id也可以）
创建数据表：
CREATE TABLE 表名(
字段名 数据类型,
...
);
举例：CREATE TABLE user(
id int PRIMARY KEY AUTO_INCREMENT,
name varchar(30),
pwd varchar(6),
email varchar(30),
vip varchar(1)
);
PRIMARY KEY：主键约束：绝对不会重复
AUTO_INCREMENT：主键自增：每次都会+1
3、数据/记录：
增：INSERT INTO 表名 VALUES(字段值,...);
举例：INSERT INTO USER VALUES(0,"张颜","123456","zy@qq.com","0");
删：DELETE FROM 表名 WHERE id=几; - 一旦删除数据就不回再回来了
改：UPDATE 表名 SET 字段名=字段值,... WHERE id=几;
查：3种语法：
SELECT * FROM 表名;
SELECT 字段名,字段名,... FROM 表名;
SELECT * FROM 表名 WHERE id=几;
疑惑：
1、为什么SQL语句要大写：约定，可以不遵守，放到PHP中为了瞬间一眼找到SQL语句
2、这些语句以后绝对不可能用cmd来运行，以后会在后端脚本php语言中运行
1、PHP：最简单的一门语言
爆火架构：LAMP
php文件，后缀.php
1、如何运行php
打开apache，将你的项目/文件夹放到htdocs里面，在用浏览器输入127.0.0.1，打开你需要运行的文件
特殊：其实php文件也支持前端代码（HTML+CSS+JS）和php代码，以后我们上网的时候，发现网页的后缀，不是.html也不必惊讶
任何一门语言，万变不离其宗，js（客户端：特效）和php（服务器端：沟通）都是一个脚本语言
2、PHP的语法基础
1、输出方式：
1、echo(想要输出的内容); 或者 echo 想要输出的内容;
echo只能输出4种标准类型，不能输出别的类型
2、var_dump(想要输出的内容)
var_dump可以输出一切数据类型，显示很详细，正是因为显示的太过详细，其实要不得，php输出在页面上的东西，某一天都会被前端用ajax拿走拿到前端去
2、变量和常量：
1、变量：值可以变化的数据
语法：$变量名=值;
注意：使用时$不能省略
2、常量：值一旦创建了，不允许修改
语法：const 常量名=值;
3、数据类型：
四种标准/基本/原始类型：
整型：Int
浮点型：Float/Double
布尔：Boolean
字符串：String - 有区别
单引号 - 只能放入纯文本
双引号 - 支持放入变量 - 类似js模板字符串
echo "{$name}今年{$age}岁,喜欢{$hobby}";
两种复合类型：
Array - 数组：保存多个相关数据
创建：
1、直接量：$arr=[值1,...] - 索引数组
2、内置对象：$arr=array( - hash数组：其实就是对象
key=>value,
...
)
访问：$数组名[下标]
遍历：循环
Object - 面向对象，不需要
两种特殊类型：
Resource - 资源类型
Null - 空，释放内存
"" - 有，值为空
null- 不存在
4、运算符：几乎和js一致，除了字符串拼接.，意味着php的API调用方法绝对不可能用.
5、分支：完全一样！if分支 switch分支 三目 都支持
6、循环：完全一样！
7、函数：完全一样！
8、所有的API：理论上来说完全一样，但是操作却不同，不需要学习，也不需要记忆，面向百度开发
上午练习：快速的熟悉php的语法
1、99乘法表 - php的循环和变量的拼接
2、计算标准体重 和 根据分数送礼物 - php的分支，php没有弹出框，服务器端的语言，本身是不支持浏览器操作的，是我们大发善心，借给他浏览器，让他在浏览器上可以显示输出内容
3、找出1-100之间所有的质数 - 逻辑提升
3、全栈开发：前端=>PHP<=>数据库
1、前端->后端
前端需要发起请求
1、表单请求/提交
注意：
1、input必须添加name属性，甚至有的input（radio、checkbox、select&option）可能还要添加value
2、form表单必须添加action="服务器端文件的路径";
3、method到底是用get还是post，和后端进行沟通/看开发文档
get->得到，只要跟安全性不挂钩的时候，大小有限制2kb：搜索框（把东西拿出来）
post->发送，只要跟安全性挂钩的时候，优先使用，举例：登录/注册（把东西放进去）
下周一新的请求方法：ajax：发送请求+可以把后端的东西拿回来
2、后端 需要接收住 前端传来的 请求消息
语法：$变量=$_GET/POST/REQUEST["input的name的值"]
REQUEST - 请求：不管前端是GET还是POST，都能接住
2、后端<->数据库：php自带操作mysql的API，只需要学习4.5句话完毕
1、创建和数据库的连接对象
$conn=mysqli_connect("hostname","username","userpwd","dbname");
我们班的固定：
$conn=mysqli_connect("127.0.0.1","root","","h52202");
1.5、为此数据库设置中文编码
mysqli_query($conn,"SET NAMES utf8");
2、创建SQL语句：你要干什么
$sql="INSERT/UPDATE/DELETE/SELECT";
3、数据库要执行SQL语句
$result=mysqli_query($conn,$sql);
//增删改：true->执行成功 false->执行失败
//查：返回的是一个我们都不会认识的结果集对象
解决：php提供了一套方法
while(($row=mysqli_fetch_row|assoc|array($result))!=null){
var_dump($row);//拿到了数据要干什么？
echo "<br>";
}
4、断开和数据库的连接
mysqli_close($conn);
