BOM
一、Browser Object Model：浏览器对象模型
专门用于操作浏览器的：常用对象：history、location、navigator、screen、event
个人觉得重要的只有2个：window（定时器）、event
(一)window对象
1、代替了全局对象global
2、window->当前窗口
(二)*打开新链接的方式：
1、在当前窗口打开，可以后退
HTML：<a href="url">内容</a>
JS：open("url","_self");
2、在当前窗口打开，禁止后退：以电商网站来说，付款过后，禁止后退
history：保存当前窗口的打开过的url(历史记录)，有了历史浏览器才可以前进和后退
location：保存当前窗口正在打开的url
JS：location.replace("新url"); - 替换掉当前网址，网址变化了，网页一定也会变化，
但是替换不是跳转，不会产生历史记录
3、新窗口打开，可以打开多个
HTML：<a href="url" target="_blank">内容</a>
JS：open("url","_blank");
4、新窗口打开，只能打开一个：以电商网站来说，结账页面理论来说只能打开一个
HTML：<a href="url" target="自定义/随便">内容</a>
JS：open("url","自定义/随便");
每个窗口的底层都有一个name名称，如果_self找到当前窗口的名称，如果_blank随机出不重复的新名称
自定义：判断有没有这个窗口已经打开了，如果已经打开了，则替换此窗口
*a标签的用途：
1、跳转：<a href="网址">内容</a>
2、锚点：<a name="name名">内容</a>
3、下载：<a href="xx.zip/rar/exe">内容</a>
4、打开图片/文本：<a href="xx.图片后缀/txt">内容</a>
5、直接书写js：<a href="javascript:js语句;">内容</a>
window别的属性和方法：
打开小窗口：var newW=open("url","target/自定义","width=,height=,left=,top=");
关闭窗口：window.close(); newW.close();
改变小窗口的位置：newW.moveTo(x,y);
改变小窗口的大小：newW.resizeTo(newWidth,newHeight);
问题：每个人的电脑的分辨率是不一样的，固定写1920和1080不合适
获取浏览器大小：outerWidth/outerHeight
*获取浏览器文档显示区域大小：innerWidth/innerHeight
获取屏幕大小：screen.width/height
*****扩展：获取鼠标的x/y坐标：
事件函数的第一个形参会自动接住事件对象e->event
获取鼠标的坐标：
1、鼠标相当于屏幕的位置：e.screenX/Y
2、鼠标相当于body的位置：e.clientX/
*3、鼠标相当于网页的位置：e.pageX/Y
(三)*****定时器：网页变得好玩了
1、周期性：每过一段时间就会执行一次
开启：timer=setInterval(callback,间隔毫秒数);
停止：clearInterval(timer);
2、一次性：等待一段时间，只会执行一次就结束了
开启：timer=setTimeout(callback,间隔毫秒数);
停止：clearTimeout(timer);
两者没有任何区别，甚至可以互换，你喜欢哪个就用哪个
面试题：循环、函数、定时器，都可以反复执行，他们的区别在哪里呀？
循环：一旦开页面，几乎瞬间就结束了
函数：调用几次就执行几次，或 用户触发几次就执行几次
定时器：每过一段时间就会执行一次
二、BOM常用对象：
window、screen（我们不做桌面应用）、history、location、navigator、event...
（一）history：
定义：保存当前窗口的打开【过】的url历史记录 - 和浏览器的历史记录不是同一个东西
作用：浏览器自带
前进：history.go(1);
后退：history.go(-1);
刷新：history.go(0);
（二）***location：保存当前窗口【正在】打开的url
***常识：一个网址由哪几部分组成？ - 原因我们马上快接触后端了，了解了url对前后端开发有帮助
协议://域名:端口号/文件相对路径?查询字符串
http://127.0.0.1:8020/bom02/new/01-3.html
https://www.baidu.com/s?wd=abc&rsv_spt=1&rsv_iqid=0xd83b315200019706&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_sug3=3&rsv_sug1=2&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=862&rsv_sug4=862
协议：http/https/ftp...
域名：域名：www.baidu.com，域名是要花钱买的，底层就是一个主机号
端口号：默认端口：http-> 80 https->443 默认端口可以省略不写
文件相对路径：百度加密了
查询字符串：?后面的东西，前端传到后端的东西，以我们现在的了解（表单提交的东西、以后ajax也可以）。
属性：
1、location的属性可以获取到当前url的各个部分，不需要记忆，只需要console.log(location);
- 三阶段：location.search
方法：
跳转：
*location="新url"
location.href="新url"
location.assign("新url")
刷新：location.reload();
跳转后，禁止后退：location.replace("新url"); - 不会产生历史记录
（三）navigator：保存了浏览器的相关信息
- 以前他很棒，js可以判断出浏览器的版本号和名称：
为什么现在不行了：
1、随着JS的发展，很多的兼容的地方，前辈们提供了兼容API
2、现在流行趋势：是移动端（IOS+Andriod），根本没有老IE，不必考虑兼容问题。
navigator.userAgent：会得到一个字符串，作用：理解为是js版本的css hack（专门为老IE准备的写兼容的地方）
（四）*****event：事件：用户来触发的或浏览器自动触发的
1、绑定事件：3种
（1）在HTML上面用HTML属性绑定事件：
<elem on事件名="js语句"></elem>
缺点：
1、无法动态绑定事件
2、不符合内容与行为分离的原则
3、无法使用多个函数对象
*（2）在js中使用事件处理属性：
elem.onclick=function(){
操作
}
优点：
1、动态绑定事件
2、符合内容与行为分离的原则
缺点：无法使用多个函数对象 - 为什么不把多个函数合成一个呢，我个人觉得不算缺点
（3）绑定事件的API：
主流：elem.addEventListener("事件名",callback);
老IE：elem.attachEvent("on事件名",callback);
兼容：
if(elem.addEventListener){
elem.addEventListener("事件名",callback);
}else{
elem.attachEvent("on事件名",callback);
}
优点：
1、动态绑定事件
2、符合内容与行为分离的原则
3、可以使用多个函数对象
缺点：
1、老IE不支持，有兼容性问题
2、事件周期：从事件开始触发，一直到事件结束的全过程
主流：3个
1、捕获阶段 - 从外向内的，记录着哪些事件要执行
2、目标触发 - 你真正触发的元素，会优先执行
3、冒泡阶段 - 由内向外，冒泡执行
老IE：2个
没有捕获阶段
面试题：事件的触发的顺序，可不可以修改？
答：可以！但是只有主流可以，elem.addEventListener("事件名",callback,true);
一旦第三个参数为true，在捕获阶段之前提前执行。
老IE不可以，因为老IE没有第三个参数，也没有捕获阶段
3、*****如何获取事件对象event
主流：事件处理函数的第一个形参会自动得到event对象
老IE：event;
兼容：event;//第二次小三上位，主流也能支持
4.有了event对象我们可以干什么？
（1）*获取鼠标的坐标： - 实用
e.screen/client/pageX|Y
（2）*阻止冒泡：- 笔试面试
主流：e.stopPropagation();
老IE：e.cancelBubble=true;
兼容：
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}
3、*****事件委托（利用冒泡） - 超级实用
什么是：多个子对象都用了同一个事件，把事件绑定在父元素身上
为什么：代码优化！创建的事件监听对象越多，性能越差，希望绑定的事件越少越好
获取目标元素：实际触发事件的元素
当前元素：this - 水性杨花：不同场景，指向不同的角色
主流：e.target;
老IE：e.srcElement;
兼容：e.srcElement;//第三次小三上位
4、*阻止浏览器的默认行为：实用
F5能刷新
F12能查看控制台、源代码
右键会有一个弹出框
每个键盘按键都可以阻止默认行为
a标签默认会跳转
submit按钮默认会提交 - 都可以阻止
主流：e.preventDefult();
老IE：e.returnValue=false;
兼容：if(e.preventDefult){
e.preventDefult();
}else{
e.returnValue=false;
}
新事件：
右键：window.oncontextmenu
键盘：window.onkeydown/keypress/keyup
5、*获取键盘的键码：- 并不重要，我们不做游戏开发，我们是应用程序
e.keyCode; - 不需要记忆，百度或console输出看
JS一共分三部分：ES+BOM(event面试必备)+DOM
Server
一、基本内容：
服务器概念：
简单来说就是一个电脑
生活中：微机
商业/国家中：小型机（大概造价几十万，好的上百万）、中型机、大型机、超级计算机
拥有服务器的方式：
1、买 - 对小公司遭不住
2、买一套配置较好的微机 - 别的行业的公司还不错
3、租云服务器端 - 腾讯云/阿里云/新浪云/百度云... - 配置自选，价格高，配置好
对于开发人员来说：
硬件服务器 - 电脑
软件服务器 - 中间件（软件可以将你的电脑变成一台服务器，其他人都可以来访问）
软件架构：服务器很重要
C/S - Client（客户端）/Server（服务器端）
举例：
大型网络游戏
优点：
用户体验感较好
运行稳定
对带宽的要求低
缺点：
占硬盘空间，吃配置
更新过于麻烦 - 服务器端/客户端都要更新
B/S - Browser（浏览器端）/Server（服务器端）
举例：
网页游戏
云平台
优点：
几乎不占硬盘，不吃配置，云服务器运算
更新简单 - 服务器端更新，不需要客户端更新
缺点：
带宽要求高
体验感相对较差 - 越来越好
二、AMPP软件 - 中间件
安装步骤：双击->一路往下冲
APACHE -> 用于运行PHP的服务，保证apache能够成功运行
出现错误：
1、直接弹出了一个警告框：你的电脑里缺少api-ms-win-crt-conio-l1-1-0.dll文件
解决：粘贴到C:\Windows\SysWOW64
2、错误日志：error：apache shutdown unxxxx - 端口号被占用了
解决：点击config按钮，选择第一项可以修改http的默认端口号，选择第二项可以修改https的默认端口号
TOMCAT -> 用于运行java的服务
如果你的apache成功开启了，恭喜你，你的服务器已经开启了（私网/局域网）
如何访问apache服务器，其实apache服务控制着一个文件：D:\xampp\htdocs
打开浏览器：
127.0.0.1:端口号
localhost:端口号 - 这两种方式只有自己可以用
主机号：只有自己可以用
其他人也可以来访问：
打开cmd输入ipconfig,查看ipv4发给对方
192.168.20.xx:端口号
在服务器上搭建一个自己的项目：
把你做过任意一个项目：复制d:/xampp/htdocs
添加网页小图标：随便一张图：名字必须改为：favicon.ico
放到d:/xampp/htdocs
三、MySQL - 数据库产品
（一）分类
关系型数据库 - 以表格为主
Oracle - Oracle（甲骨文）
主要应用于【企业级】开发市场，企业级：大公司、国企（银行、警察局）、事业单位，不差钱的公司，安全性非常高 - 收费
MySQL - Oracle（甲骨文）
主要应用于【互联网】开发市场 - 中小型公司的首选 - 免费的
sql server - 大学讲课：微软
非关系型数据库 - 没有固定的格式
是一种运动 - 反关系型数据库
mongoDB - 主流产品：以JSON格式为主
（二）MySQL基本内容
访问：2种
1、图形化界面 - 傻瓜式
要求：同时打开apache和mysql
访问：127.0.0.1:端口号/phpmyadmin
localhost:端口号/phpmyadmin
2、*****命令行方式：复杂，多，但是这样才能学到真正的SQL语句
如何进入数据库：
1、打开cmd
2、输出cmd的命令：进入到c:/xampp/mysql/bin
3、登录：mysql -uroot -p 直接回车，别加分号
4、退出：exit
5、学习SQL语句：关系型数据库的SQL语句是公用的
1、数据库：
创建：CREATE DATABASE IF NOT EXISTS 数据库名称 CHARACTER SET utf8
CREATE DATABASE IF NOT EXISTS h52201LZY CHARACTER SET utf8;
查看：SHOW DATABASES;
切换：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 stu(
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(30),
pwd VARCHAR(6),
email VARCHAR(30),
vip VARCHAR(1)
);
主键约束：PRIMARY KEY - id不会重复
主键自增：AUTO_INCREMENT - 每次会自动+1
3、*****数据：
增：INSERT INTO 表名 VALUES(字段值,...);
举例：INSERT INTO stu VALUES(0,"周鸿奥","321321","zha@qq.com","0");
删：DELETE FROM 表名 WHERE id=几; - 一旦删除就回不来了
举例：DELETE FROM stu WHERE id=5;
改：UPDATE 表名 SET 字段名=字段值,...WHERE id=几;
举例：UPDATE stu SET name="周鸟奥",pwd="123123",vip="1" WHERE id=6;
UPDATE book SET vip="1" WHERE id=0;
查：3种语法：
1、SELECT * FROM 表名; - 得到这个表里面所有的数据
2、SELECT name,pwd FROM 表名; - 得到这个表里面的用户名和密码
3、SELECT name,pwd FROM 表名 WHERE id=几; - 只会得到这个id的用户名和密码
疑惑：
1、为什么要大写：MySQL的约定，SQL语句要大写 - 这些语句以后都会放到后端脚本语言（php/node/c#/jsp）中运行
2、以后是不会用cmd来录入数据的：不可能，以后必然是全栈操作，必须记住4个语句
四、PHP：最简单的一门语言
php文件后缀名：.php
（一）*****如何运行php文件
打开apache，将你的项目/文件放到htdocs文件中，打开浏览器输入：127.0.0.1，打开你需要的文件
建议把整个htdocs文件夹直接拖到你的编辑器里
特殊：其实php文件也支持编写前端代码（HTML/CSS/JS）和PHP代码，以后我们上网的时候，看到网页的后缀是.php也不要奇怪
PHP和JS语法非常相似，但是做的事儿一定不一样：
js - 客户端脚本语言（特效）
php- 服务器端脚本语言（和数据库打交道，沟通） - 比JS更严格
（二）PHP语句基础：
1、输出方式：
1、*echo(想要输出的内容) 或 echo 想要输出的内容; -
类似document.write输出在页面上支持标签的
只能四种标准类型，不能输出别的类型
2、var_dump(想要输出的内容) - 类似document.write输出在页面，但是输出的非常的详细，
查看到数据类型和值
能输出一切类型，但是太详细，以后直接放在PHP页面上输出的内容都会被前端拿走
2、变量和常量：
*1、变量：值可以改变
语法：$变量名=值;
注意：使用$也不能省略
2、常量：一旦创建不允许修改
语法：const 常量名=值;
3、*数据类型：
四种标准/原始/基本/值类型：
Int - 整型
Float/Double - 浮点型
布尔 - Bool
字符串 - 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、分支：完全一样
6、循环：完全一样
7、函数：完全一样
8、API：理论上完全一样的，JS有的，PHP也有，但是写法却不相同，我们不需要做任何记忆，面向百度开发
9、全栈开发：
前端->后端
后端<->数据库
Ajax
一、面试：同步交互与异步交互
同步：前端在向后端发起请求，直到服务器端进行响应的全过程，我们用户是不能做其他事情的（等）
比如：网址请求，表单请求 - 同步交互
异步：前端在向后端发起请求，直到服务器端进行响应的全过程，我们用户是可以做其他事情的（不等）
比如：Ajax
不严格的定义：网页不是完整的刷新，只是局部发生了变化，异步交互
以前的异步代码：定时器
Ajax：asynchronous javascript and xml - 直译：异步的javascript和xml
作用：和服务器端进行交互，向服务器端发起异步请求 - 把服务器端的数据拿回前端
二、语法：固定步骤：4步
1、创建出ajax核心对象XMLHttpRequest->简称XHR核心对象(属性和方法)
var xhr=new XMLHttpRequest();
2、建立和服务器端的连接
xhr.open("GET/POST","xx.php");
3、向服务器发送请求
xhr.send(null);
特殊：
1、如果你是GET请求，那么你的send方法会失效，但是还不能省略，必须写为：
xhr.open("GET","xx.php?key=value&...");
xhr.send(null);
2、如果你是POST请求，那么你的send方法可用，但是必须加上设置请求头部：必须写为：
xhr.open("POST","xx.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoed")
xhr.send("key=value&...");
4、创建监听事件：
xhr.onreadystatechange=()=>{
if(xhr.readyState==4&&xhr.status==200){
xhr.responseText;//把PHP输出在页面上的东西就会拿回前端 - 难在拿到数据后你要干什么
}
}
