day1
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、定时器：需要先等待一段时间才会执行
day2
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由哪些部分组成
一定由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、获取鼠标的坐标
day3
*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)
day4
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/微博/游戏
优点：几乎不占硬盘
更新简单 - 只需要更新服务器端
缺点：带宽要求高
体验感越来越棒了 - 云平台游戏（根本不关心你电脑的配置如何，也不需下载，打开即玩，但是带宽要求高）
day5
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：理论上来说完全一样，但是操作却不同，不需要学习，也不需要记忆，面向百度开发
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);
解决：php提供了一套方法
while(($row=mysqli_fetch_row|assoc|array($result))!=null){
var_dump($row);
echo "<br>";
}
4、断开和数据库的连接
mysqli_close($conn);
