BOM的其他对象：history、location、navigation、event
history对象
保存当前窗口的历史记录(打开过的url)
前进：history.go(1);
后退：history.go(-1);
刷新：history.go(0);
location对象
保存当前窗口【正在打开】的url
常识：一个url网址由哪些部分组成
协议：https/http/ftp/ws
域名/主机号：域名是需要购买的，在没有购买的都是主机号访问
端口号：默认端口可以省略不写，https默认是443
http默认是80
文件的相对路径：一般都是有加密隐藏的
查询字符串：get表单提交提示出来的东西
属性和API
1属性：获取到一个url的各个部分，不要记忆直接输出location对象查看
2功能：跳转3种
1.location="url"
2.location.href="url"
3.location.assige=("url");
4.跳转后禁止后退：location.replace("新url")
5.刷新：location.reload();
navigation对象：
保存浏览器的基本信息，通过js来判断打开的浏览器是什么浏览器并且判断版本号，类似 css hack(但是css hack 只能操作IE浏览器)
event对象：事件对象
事件：用户触发的或浏览器自动触发
1.绑定事件：3种
1.在HTML页面上绑定事件
<elem on事件名="js语句"></elem>
缺点：1.不符合内容（HTML）与行为（JS）的分离
2.无法动态绑定事件（一次只能绑定一个元素）
3.无法同时绑定多个函数对象
2.在js中使用元素的事件处理函数属性
elem on事件名=function(){}
优点：1.符合内容（html）与行为（js）的分离
2.动态绑定事件
缺点：无法同时绑定多个函数对象
3.使用专门的事件API绑定事件
优点：1.符合内容（HTML）与行为（JS）的分离
2.动态绑定事件
3.同时绑定多个函数对象
缺点：兼容问题---老IE不兼容，麻烦
主流：elem.addEventListener("事件名",callback);
老IE：elem.attachEvent("on事件名",callback);
兼容：if (elem.addEventListener){
elem.addEventListener("事件名",callback);
}else{
elem.attachEvent("on事件名",callback);
}
2.事件周期：从事件发生到所有事件处理函数执行完毕的全过程
主流：3个阶段
1.捕获阶段：记录要发生的事件有哪些
2.目标优先触发：目标元素-->当前点击的实际发生事件的元素
3.冒泡触发：向上出发所有记录着的事件
3.获取事件对象event
主流：会自动作为事件处理函数的第一个参传入
elem on事件名=e=>{e->event}
老IE：event
兼容：
var e=event;
获取到事件对象event，我们可以干什么
1.获取鼠标的坐标位置
2.组织冒泡--笔试面试
主流：e.stopPropagation();
老IE：e.cancelBubble=true();
兼容：if (e.stopPrpagation){
e.stopPrpagation();
}else{
e.cancelBubble=true;
4.利用冒泡/事件委托：
优化：如果多个子元素定义了相同 或 相似的操作，最好只能父元素定义一次
为什么：每次绑定一个事件函数，其实都是创建了一个事件对象，创建的事件对象越多，网页效率越低下
淘汰了this：水性杨花，当前元素
认识一个目标元素target：你点击的哪一个，他永远就是那一个，不会变化
主流：e.target;
老IE：e.srcElement;
兼容：e.srcElement;//不光老IE可用，主流也可以用
5.阻止浏览器的默认行为：a标签默认会跳转页面，右键自带一个弹出框，F12自带一个开发者工具，F5自带刷新功能，submit按钮默认提交。。。
主流：e.preventDefault();
老IE：e.returnValue=false;
兼容：if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}
新事件：oncontextmenu - 右键事件
onkeydown - 键盘事件
6.获取键盘的键码：e.keyCode;
客户端存储计算：
cookie：被淘汰
webstorage：HTML5提出的一个新特性：2种
1、localStorage - 本地级：永久存在
2、sessionStorage - 会话级：只要浏览器一旦关闭，数据就会死亡
作用：跳转页面后，甚至关闭页面后，数据依然存在
如何使用：不需要创建，浏览器js解释器自动创建，我们直接使用
1、添加：xxxxStorage.属性名=值;
2、获取：xxxxStorage.属性名
3、清空：xxxxStorage.clear();//全部
4、删除：xxxxStorage.removeItem("属性名");
MySQL
1、history：当前窗口的历史记录：
前进：history.go(正数)
后退：history.go(负数)
刷新：history.go(0)
2、location：
常识：一个url的组成部分
协议://域名:端口号/文件相对路径?查询字符串
属性：location直接输出就能看到各种属性，分别能够得到url的每一个部分
跳转：location="url";
跳转后禁止后退：location.replace("新url");
3、navigator：navigator.userAgent;//获取到当前浏览器的基本信息，截取出需要的部分 - 本意是为不同的浏览器可以执行不同的操作，但是前辈已经提供好了兼容的方法
4、event：事件对象
1、新的绑定事件
if(elem.addEventListener){
elem.addEventListener("事件名",callback)
}else{
elem.attachEvent("on事件名",callback)
}
2、事件的生命周期：
3个：1、捕获阶段 2、目标触发 3、冒泡触发
3、获取到事件对象event：
event;
获取到e过后可以干什么？
1、获取鼠标的位置
e.screen/client/pageX|Y
2、阻止冒泡
if(e.stopPropagation){
e.stopPropagation
}else{
e.cancelBubble=true;
}
3、事件委托：优化：提升性能，事件统一的绑定在父元素上
父.on事件名=function()=>{
//问题：this->父？
//解决：目标元素target：e.srcElement; - 代替this，有时候需要判断一下target是什么标签或者是什么class
}
4、阻止浏览器的默认行为：
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
}
5、获取键盘的键码：e.keyCode - 不需要记忆，直接输出看看你点的这个按键的键码是多少
5、客户端的存储技术：作用：跳转页面还能保存住数据
cookie：被淘汰了：缺点：1、大小有限2kb 2、使用非常的麻烦繁琐
webStorage：优点：1、大小有限8mb 2、使用非常的简单
缺点：1、老IE不支持
分为：2部分
1、localStorage：永久存在 - 也可以自己设定时间
2、sessionStorage：浏览器一旦关闭数据就会死亡
操作：
1、添加数据：xxxStorage.setItem("属性名",值) === localStorage.属性名=值
2、获取数据：xxxStorage.getItem("属性名") === localStorage.属性名
3、删除数据：xxxStorage.removeItem("属性名");
4、清空数据：xxxStorage.clear();
SQL语句：
1、创建数据库：CREATE DATABASE IF NOT EXISTS 数据库名 CHARACTER SET utf8;
2、切换数据库：USE 数据库名;
3、查看数据库：SHOW DATABASES;
4、创建数据表： CREATE TABLE 表名( 字段名 数据类型, ... );
主键约束：PRIMARY KEY
主键自增：AUTO_INCREMENT
5、数据：
增：INSERT INTO 表名 VALUES(字段值,...);
删：DELETE FROM 表名 WHERE id=几;
改：UPDATE 表名 SET 字段名=字段值,... WHERE id=几;
查：SELECT * FROM 表名;
SELECT * FROM 表名 WHERE id=几;
SELECT name,pwd FROM 表名 WHERE id=几;
PHP：最简单的一门语言
火爆架构：LAMP php文件后缀名.php
1、如何运行php文件：
打开apache，将你的项目/文件放到htdocs文件夹中，打开浏览器输入：127.0.0.1，打开你需要的文件
特殊：其实php文件也支持前端代码和php代码，以后我们上网的时候，看到网页的后缀.php也不必奇怪 - 比js严格
2、php语法基础：
1、输出方式：
1、echo(想要输出的内容); 或 echo 想要输出的内容; - 类似document.write输出在页面上
echo只能输出4种标准类型，不能输出别的类型
2、var_dump(想要输出的内容); - 类似document.write输出在页面上，但是输出的非常详细，查看到数据类型和值
var_dump可以输出一切数据类型，但是以后不会用到太多，太过详细了
2、变量和常量
*1、变量：值可以改变
语法：$变量名=值;
注意：使用时$也不能省略
2、常量：一旦创建后，值不能修改了
语法：const 常量名=值;
3、*数据类型：
四种标准/基本/原始类型：
整型：Int
浮点型：Float/Double
布尔：Boolean
字符串：string - 有区别
单引号 - 只能放入纯文本
双引号 - 支持变量，类似js中模板字符串
echo "我的名字叫{$name}今年{$age}岁喜欢{$hobby}";
两种复合类型：
1、Array - 数组
创建：
1、直接量：$arr=[值1,...]; - 索引数组
2、内置函数：$arr=array( - hash数组
key=>value,
...
);
访问：$数组名[下标];
遍历：循环
2、Object - 面向对象，不需要用到面向对象开发
两种特殊类型：
1、Resource - 资源类型，连接上数据库才会看到
2、null - 空，释放内存
"" - 有，值为空
null - 不存在
4、运算符：几乎和js一致，唯独字符串拼接.，意味着php想要调用方法绝对不可能用.
5、分支：完全一样：if...else switch...case... 甚至三目依然可用
6、循环：完全一样
7、函数：完全一样
8、API：理论上完全一样的，但是操作却不同，不需要做任何学习和记忆，面向百度开发
全栈开发：
1、前端->后端：
前端需要发起请求：
1、表单请求、提交
注意：
1、input必须添加name属性，甚至有的人(radio、checkbox)可能还要添加value
2、form表单必须添加action="服务器端的文件的路径";
3、method到底用get还是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","","h52107");
1.5、立马为创建的数据库连接设置中文编码
mysqli_query($conn,"SET NAMES utf8");
2、创建SQL语句：
$sql="INSERT/DELETE/UPDATE/SELECT";
3、某个数据要执行某个SQL语句 - 执行
$rs=mysqli_query($conn,$sql);
//增、删、改：结果是一个布尔值，true代表执行成功，false执行失败
//查：问题：得到了一个我们谁都不认识的结果集对象
解决：php提供了一套API帮我们把不认识的结果集变成认识的对象
mysqli_fetch_row(不认识的结果集);//一次只会拿到一行数据，是一个数组
mysqli_fetch_assoc(不认识的结果集);//一次只会拿到一行数据，是一个对象
mysqli_fetch_array(不认识的结果集);//一次只会拿到一行数据，既可以用索引下标也可能有hash下标
固定套路：
while(($row=mysqli_fetch_xxx($rs))!=null){
var_dump($row);
echo "<br>";
}
4、断开和数据库的连接
mysqli_close($conn);
扩展：多个表单想要提交到同一个php，但是又想区分开功能：需要用到一标签
<input type="hidden" name="自定义" value="自定义">
原生的ajax：
异步交互：客户端向服务器端发起请求直到服务器响应的全过程，用户是不必等待的 - 技术/代码：定时器、ajax
同步交互：客户端向服务器端发起请求直到服务器响应的全过程，用户是需要等待的 - 技术/代码：表单提交、a标签跳转
不严格定义：页面不会完整刷新，局部改变
如何使用：
1、创建xhr核心对象
var xhr=new XMLHttpRequest();
2、建立和服务器端的连接
xhr.open("method","url");
3、向服务器端发起请求消息
GET：xhr.open("get","url?key=value&...");
xhr.send(null);
POST：xhr.open("POST","url");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("key=value&...");
4、绑定状态监听事件：
xhr.onreadystatechange=()=>{
if(xhr.readyState==4&&xhr.status==200){
xhr.responseText;
//接住服务器端响应的消息：php就放在页面上输出的内容就是响应消息
}
}
XML
1、HTML、XHTML、DHTML、XML分别是什么？
HTML - 网页
XHTML - 更严格的网页
DHTML - 动态特效的网页：并不是新技术、新概念，现有技术的整合统称：HTML+CSS+JS(DOM) - 离线网页也就有动态特效
XML - 配置文件 | 数据格式
2、如何使用xml，其实就是一个后缀.xml的文件
1、创建.xml文件
2、必须写上声明标签：<?xml version="1.0" encoding="utf-8"?>
version - 版本：目前的版本只有1.0 和 1.1 但1.1升级并不理想，没有人使用，以后都不必在学了，已经淘汰了
encoding - 编码格式
3、必写写上一个根标签，而且只能写一个根标签（双标签），没有任何的预定义标签，所有的标签全都自定义
<root></root>
4、里面你随意。想放什么标签就放什么标签
开发中：正常来说后端会想办法将数据库的数据整理为一个xml格式
前端：依然使用ajax去获取xml：
1、url 写 "xx.xml";
2、xhr.responseXML 获取响应的xml文件，跟DOM差不多
3、可以使用【核心DOM】去找到自己需要的部分
JSON：javascript Object Notation：js对象表示法，本身就是js的一部分
作用：数据格式 类似于 XML
好处：比XML 更简洁、更快、更容易解析 - 一个优秀的数据格式能极大的提升程序员的开发效率
1、哪些属于JSON字符串：后端把数据库的数据取出来整理为一个JSON字符串：
1、'[1,2,3,4]'
2、'{"key":value,...}'
3、'[{},{},{},{}]'
4、'{"names":[],"ages":[],...}'
2、PHP如何将数据变为JSON字符串：
echo JSON_encode($arr);
var jsonTxt=JSON.stringify(jsonObj);//node.js以后你想要穿衣服就靠它
3、前端依然使用ajax获取响应数据：
xhr.responseText;//json字符串
把json字符串变为json对象 - 脱衣服：2种
eval("("+xhr.responseText+")");
*JSON.parse(xhr.responseText);
