BOM
Browser Object Model - 浏览器对象模型
专门为操作浏览器准备的一些对象，没有任何标准，不像DOM由W3C制定标准，所以存在很大的兼容性问题，使用率相对DOM较少
BOM的对象：*window、history、navigator、location、screen、*event
window对象
在浏览器中扮演着两个角色：
1、代替了Global，充当全局对象 - 保存着全局变量和全局函数
2、指代当前窗口本身
打开网页的新方式
当前页面打开，可以后退
HTML：<a href="url">内容</a>
JS：open("url","_self");
当前页面打开，禁止后退
例：电商网站：结账过后不允许后退了
HTML：做不了
JS：
history：当前窗口的历史记录，只有当前窗口有了历史记录才能前进后退
location：当前窗口的正在打开的url网址，提供一个方法：
location.replace("新url"); - 叫做替换，当时网址被替换了，页面也会跳转，但是不会产生历史记录
在新窗口打开，可以打开多个
HTML：<a href="url" target="_blank">内容</a>
JS：open("url","_blank");
在新窗口打开，只能打开一个
例：电商网站：购物车跳转到结账页面，结账页面只允许打开一个
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
定时器
等待一段时间才会执行的代码，可能会反复执行，也可能只会执行一次
两种：
1、周期性定时器
开启：timer=setInterval(回调函数,延时);
停止：clearInterval(timer);
2、一次性定时器
开启：timer=setTimeout(回调函数,延时);
停止：clearTimeout(timer);
特殊：1、不管是一次性还是周期性，底层其实都是一样的，两者可以互换
2、一次性 < = > 周期性
函数和循环和定时器，都可以反复执行代码，区别在哪里？
时机！
1、函数：要么调用几次执行几次，要么用户触发几次执行几次
2、循环：几乎是一瞬间就完毕了
3、定时器：需要先等待一段时间才会执行
history
保存着当前窗口的历史记录 - 浏览器自带此功能
前进：history.go(1);正整数数字
后退：history.go(-1);负整数数字
刷新：history.go(0);
navigator
保存着当前浏览器的基本信息（浏览器名称以及版本号）
通过js判断用户打开的是什么浏览器 - 相当于js版本的css hack（专门为老IE准备），对不同的浏览器可以执行不同的操作
属性：navigator.userAgent;
不重要 - 现在大部分操作都提供了兼容的方式，不需要自己判断浏览器是什么
location
保存着当前窗口的正在打开url
跳转页面location="新url"
location.href="新url"
location.assign("新url")
跳转页面，禁止后退：location.replace("新url") - 不会产生历史记录
刷新：location.reload();
event事件对象
什么是事件：用户触发的 或 浏览器自动触发的
绑定事件：3种
在HTML标签上添加事件属性
<elem on事件名="js代码"></elem>
缺点：1、不符合html与css与js的分离
2、一次只能绑定一个元素，不能动态绑定事件
3、一个事件只能放入一个事件处理函数
在js中使用事件处理函数属性绑定事件
elem.on事件名=function(){}
优点：1、符合html与css与js的分离
2、动态绑定事件
~~缺点~~：一个事件只能放入一个事件处理函数，但可以把代码放到一起，所以也不算缺点
绑定事件的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个阶段
1、捕获阶段：记录要执行的事件有哪些，由外向内
2、目标触发阶段：目标元素：实际触发事件的元素
3、冒泡执行阶段：由内向外的冒泡执行
获取事件对象event
主流：事件处理函数的第一个形参会自动获得
老IE：window.event; 主流也支持！
兼容：e=event;
获取到了事件对象event才可以做后续5个操作：
获取鼠标的坐标
获取鼠标相对于屏幕的坐标：e.screenX/Y
获取鼠标相当于文档显示区域的坐标：e.clientX/Y
获取鼠标相当于网页的坐标：e.pageX/Y
阻止冒泡：
一般不要用，用了就不能利用冒泡了
主流：e.stopPropagation();
老IE：e.cancelBubble=true;
兼容：if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}
利用冒泡：【事件委托】
多个子元素都共有一个事件，把事件绑定在父元素身上，通过利用冒泡，点击子元素，父元素的事件也会触发
绑定的事件越多，创建的事件监听对象也就越多，网站性能就会越低下
何时：任何一个功能都要做成事件委托
当前元素：this （在不同的场景，指向的人是不一样的）
找到目标元素：永远是事件触发的元素
主流：e.target;
老IE：e.srcElement; 主流也支持！
兼容：var target=e.srcElement;
阻止浏览器的默认行为
例：阻止右键弹框(window.oncontextmenu)，阻止键盘事件window.onkeydown（F12 、F5...）...
主流：e.preventExtensions();
老IE：e.returnValue=false;
兼容：if(e.preventExtensions){
e.preventExtensions();
}else{
e.returnValue=false;
}
获取键盘键码
e.keyCode
直接输出可查
MySQL
图形化界面
要求：同时打开mysql和apache
访问：127.0.0.1:端口号/phpmyadmin
localhost:端口号/phpmyadmin
命令行方式
进入数据库
1、打开cmd
2、输入cmd的命令，进入到d:/xampp/mysql/bind
1、输入：盘符: 回车
2、输入：cd xampp/mysql/bin
3、登录：mysql -uroot -p 回车
4、退出：exit
操作：增删改查
SQL语句：关系型数据库SQL语句互通
数据库
查看数据库：SHOW DATABASES;
创建数据库：CREATE DATABASE IF NOT EXISTS 数据库名称 CHARACTER SET utf8;
切换数据库：USE 数据库名称;
数据表
数据库的数据类型
数值：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
数据/记录
增：INSERT INTO 表名 VALUES(字段值,...);
例：INSERT INTO USER VALUES(0,"XX","123456","xx@qq.com","0");
删：DELETE FROM 表名 WHERE id=几; - 一旦删除数据就不会再回来了
改：UPDATE 表名 SET 字段名=字段值,... WHERE id=几;
查：3种语法：
SELECT * FROM 表名;
SELECT 字段名,字段名,... FROM 表名;
SELECT * FROM 表名 WHERE id=几;
PHP
如何运行php
打开apache，将项目/文件夹放到htdocs里面，再用浏览器输入127.0.0.1，打开需要运行的文件
特殊：其实php文件也支持前端代码（HTML+CSS+JS）和php代码
PHP的语法基础
输出方式
1、echo(内容) 或者 echo 内容;
echo只能输出4种标准类型，不能输出别的类型
2、var_dump(内容)
var_dump可以输出一切数据类型，显示很详细，正是因为显示的太过详细，其实不太好
php输出在页面上的东西，都会被前端用ajax拿走拿到前端去
变量和常量
1、变量：值可以变化的数据
语法：$变量名=值;
注意：使用时$不能省略
2、常量：值一旦创建了，不允许修改
语法：const 常量名=值;
数据类型
四种标准/基本/原始类型：
整型：Int
浮点型：Float/Double
布尔：Boolean
字符串：String - 有区别
单引号 - 只能放入纯文本
双引号 - 支持放入变量 - 类似js模板字符串
例：echo "{$name}今年{$age}岁,喜欢{$hobby}";
两种复合类型：
Array - 数组：保存多个相关数据
创建：
1、直接量：$arr=[值1,...] - 索引数组
2、内置对象：$arr=array( - hash数组：其实就是对象
key=>value,
...
)
访问：$数组名[下标]
遍历：循环
Object - 面向对象，不需要
两种特殊类型：
Resource - 资源类型
Null - 空，释放内存
运算符
几乎和js一致，除了字符串拼接.，意味着php的API调用方法绝对不可能用 .
分支
和js完全一样！if分支 switch分支 三目 都支持
循环
和js完全一样！
函数
和js完全一样！
API
和js理论上完全一样，但是操作却不同。
全栈开发
前端->后端
前端需要发起请求
1、表单请求/提交
注意：
1、input必须添加name属性，甚至有的input（radio、checkbox、select&option）可能还要添加value
2、form表单必须添加action="服务器端文件的路径";
3、method到底是用get还是post，和后端进行沟通/看开发文档
get->得到，只要跟安全性不挂钩的时候，大小有限制2kb，例：搜索框（把东西拿出来）
post->发送，只要跟安全性挂钩的时候，优先使用，例：登录/注册（把东西放进去）
2、后端 需要接收住 前端传来的 请求消息
语法：$变量=$_GET/POST/REQUEST["input的name的值"]
REQUEST - 请求：不管前端是GET还是POST，都能接住
后端<->数据库
php自带操作mysql的API
1、创建和数据库的连接对象
$conn=mysqli_connect("hostname","username","userpwd","database name");
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){
拿到了数据要操作
}
4、断开和数据库的连接
mysqli_close($conn);
