Bom
BOM概述：Browser Object Model - 浏览器对象模型：专门为操作浏览器准备的一些对象，没有任何标准，不像DOM由W3C制定标准，所以存在很大的兼容性问题，使用率相对DOM较少
BOM有哪些对象：window、history、navigator、location、screen、event
个人认为重要的只有两个对象：window、event
window对象：在浏览器中扮演着两个角色：
-
代替了Global，充当全局对象 - 保存着全局变量和全局函数
-
指代当前窗口本身
-
*打开网页的新方式：
-
跳转用不用a标签无所谓
-
有点点用：提升用户的体验感，前端是距离用户最近的，多为用户做考虑
-
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>
- 属性和方法：
打开新窗口：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
- 定时器：等待一段时间才会执行的代码，可能会反复执行，也可能只会执行一次
两种：
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由哪些部分组成 www.baidu.com/s?ie=utf-8&… 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();
event：事件对象
什么是事件：用户触发的 或 浏览器自动触发 的
绑定事件：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 - 麻烦
事件周期：3个阶段
- 捕获阶段：记录要执行的事件有哪些，由外向内
- 目标触发阶段：目标元素：实际触发事件的元素
- 冒泡执行阶段：由内向外的冒泡执行
如何获取事件对象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); - 一般出现在游戏开发
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
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=几;
疑惑：
- 为什么SQL语句要大写：约定，可以不遵守，放到PHP中为了一眼找到SQL语句
- 这些语句以后绝对不可能用cmd来运行，以后会在后端脚本php语言中运行
php
PHP：最简单的一门语言
爆火架构：LAMP
php文件，后缀.php
如何运行php
打开apache，将你的项目/文件夹放到htdocs里面，在用浏览器输入127.0.0.1，打开你需要运行的文件
特殊：其实php文件也支持前端代码（HTML+CSS+JS）和php代码，以后我们上网的时候，发现网页的后缀，不是.html也不必惊讶
任何一门语言，万变不离其宗，js（客户端：特效）和php（服务器端：沟通）都是一个脚本语言
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、表单请求/提交
注意：
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，都能接住
- 后端<->数据库：
php自带操作mysql的API，只需要学习4.5句话完毕
1、创建和数据库的连接对象
$conn=mysqli_connect("hostname","username","userpwd","dbname");
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);
