2022.4.24
1、用户确认框：var bool=confirm("提示文字");
true->点击了确认 false->点击了取消
2、百度地图：简单
1、打开百度，搜索百度地图开放平台，打开这个网站
2、右上角注册/登录：百度账号
3、拉到最下面：认证成为开发者
4、来控制台->应用管理->我的应用->创建应用：名称随意->应用类型：浏览器端->白名单写一个*
5、恭喜你获取到了密钥
6、鼠标放到导航条的开发文档上->点击JavaScriptAPI->点击示例DEMO->选择你喜欢的地图，梭他的代码。记得把该改的地方修改一下，千万别忘了密钥
7、老版地图可以混合，新版地图也可以混合
百度地图其实对于别的公司来说基本没啥用：主要用于展示自己所在的位置
2022.4.25
1.BOM：浏览器对象模型，专门用语操作浏览器的：：常用对象：history、location、navigator、screen、event
**个人觉得重要的只有2个：window（定时器）、event
1.Window对象：扮演着两个角色
1.代替了全局对象global
2.widow-》当前窗口
2.*打开新连接的方式：提升用户体验，
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","自定义/随便");
*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=,top=,left="
关闭窗口：window。close();newW.close();
改变小窗口的位置：newW.moveTo(x,y);
改变小窗口的大小：newW.resizeTo(newWidth,newHeight)
问题：每个人的电脑的分辨率是不一样的，固定写就不合适
获取浏览器大小：outerWidth/outerHeight
**获取浏览器文档显示区域大小；innerWidth/innerHeight
获取屏幕大小：screen.width/height
*****扩展：获取鼠标的x/y轴的坐标
事件函数的第一个形参会自动接住事件对象e-》event
获取鼠标的坐标：
鼠标相当于屏幕的位置：e.screenX/Y
鼠标相当于body的位置：e.clientX/Y
***鼠标相当于网页的位置：e.pageX/Y
****定时器：网页就变得好玩了
周期性：每过一段时间就会执行一次
开启：timer=setinterval(function(){
操作
},间隔毫秒数)
关闭：clearInterval(timer);
一次性：等待一段时间后，执行一次就会停止
开启：timer=setTimeout(function(){
操作
},间隔毫秒数)
关闭：clearTimeout(timer);
两者没有任何区别，甚至可以互换，
面试题
循环，函数，定时器，都可以反复执行，他们的区别在哪里
循环：一旦打开页面瞬间就结束了
函数：调用几次就执行几次，或用户触发几次就执行几次
定时器：每过一段时间就会执行一次
BOM常用对象：window、screen（我们不做桌面应用）、history、location、navigator、event...
1、history：保存当前窗口的打开【过】的url历史记录 - 和浏览器的历史记录不是同一个东西
作用：浏览器自带
前进：history.go(1);
后退：history.go(-1);
刷新：history.go(0);
2、***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"); - 不会产生历史记录
3、navigator：保存了浏览器的相关信息 - 以前他很棒，js可以判断出浏览器的版本号和名称：
为什么现在不行了：
1、随着JS的发展，很多的兼容的地方，前辈们提供了兼容API
2、现在流行趋势：是移动端（IOS+Andriod），根本没有老IE，不必考虑兼容问题。
navigator.userAgent：会得到一个字符串，作用：理解为是js版本的css hack（专门为老IE准备的写兼容的地方）
4、*****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;//第二次小三上位，主流也能支持
有了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
2022.4.27
1、学习原因：
1、前端招聘要求 - 熟悉 或 了解一门服务器端语言者优先
2、对于我们前端来说。了解服务器的机制，更好更快的进行前端开发
扩展：
全栈工程师 - 客户端（PC+移动端+小程序+app） + 服务器端（php+node.js） + 数据库（MySQL+mongoDB）
技术类发展：
全栈 - 涉及多个领域，但是每个领域都会用，不必精通 -> 架构师 -> 项目经理 -> 技术总监
专家 - 精通单个领域 -> 能创造全球能火的东西，vue
销售类发展：
产品 -> 产品经理 -> 产品总监
教育类：
创业类：最不推荐
可能直接成为全栈的语言：
1、java语法 - 不包含移动端（安卓）
2、javascript语言
客户端 - 开发根本
服务器端 - node.js 历史上第一次一门语言就可以通吃前后端
数据库 - MySQL+mongoDB
移动端 - 网页/app(跨所有平台)/小程序/公众号 - 只需要一个前端，学习一点点ios和andriod的语法就可以混合开发 - 市场上还有很多的混合开发框架
server：2天
MySQL一天 + PHP一天
对服务器的掌握 - 入门（以后你自学也能学懂）
最终目的：登录 + 注册 + 搭配上3天ajax完成【全栈】一条龙开发：增删改查
小项目：图书/金夫人/咖啡管理系统
基本内容： 服务器概念： 简单来说就是一个电脑 生活中：微机 商业/国家中：小型机（大概造价几十万，好的上百万）、中型机、大型机、超级计算机
拥有服务器的方式：
1、买 - 对小公司遭不住
2、买一套配置较好的微机 - 别的行业的公司还不错
3、租云服务器端 - 腾讯云/阿里云/新浪云/百度云... - 配置自选，价格高，配置好
对于开发人员来说：
硬件服务器 - 电脑
软件服务器 - 中间件（软件可以将你的电脑变成一台服务器，其他人都可以来访问）
软件架构：服务器很重要
C/S - Client（客户端）/Server（服务器端）
举例：
大型网络游戏
优点：
用户体验感较好
运行稳定
对带宽的要求低
缺点：
占硬盘空间，吃配置
更新过于麻烦 - 服务器端/客户端都要更新
B/S - Browser（浏览器端）/Server（服务器端）
举例：
网页游戏
云平台
优点：
几乎不占硬盘，不吃配置，云服务器运算
更新简单 - 服务器端更新，不需要客户端更新
缺点：
带宽要求高
体验感相对较差 - 越来越好
但是以前的单机游戏还真的没有服务器 - 卖DLC
XAMPP软件 - 中间件
安装步骤：双击->一路往下冲
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：
最初是由MySQL AB推出
瞬间爆火 - 免费、简单、开源
开源的好处：
公司：免费聘请民间大佬为你测试、开发、优化
个人：查看、修改、添加源代码 - 开挂
爆火的网站架构：LAMP - Linux系统 + Apache + MySQL + PHP - 这四个都是免费的，让中小型公司的老板非常的舒服
企业级网站架构：Linux系统（AIX） + javaEE + Oracle + weblogic - 一套架构起码上百万 - 安全性极高
MySQL AB后期被sun公司收购
sun公司后期被Oracle收购
三个明星产品：
Oracle
MySQL - 社区版（免费）和商业版（收费）
java
为什么叫mariaDB?
1、MySQL的作者受到了排挤、并不关注、不重视
2、MySQL的作者就自己出来重新做了原滋原味的MySQL，但是名字不能再叫mysql，版权问题
3、MySQL的作者就用了自己女儿的名字来命名了MariaDB
MySQL基本内容：
访问：2种
1、图形化界面 - 傻瓜式
要求：同时打开apache和mysql
访问：127.0.0.1:端口号/phpmyadmin
localhost:端口号/phpmyadmin
有的同学可能打不开
2、*****命令行方式：复杂，多，但是这样才能学到真正的SQL语句
如何进入数据库：
1、打开cmd
2、输出cmd的命令：进入到d:/xampp/mysql/bin
3、登录：mysql -uroot -p 直接回车，别加分号
4、退出：exit
5、学习SQL语句：关系型数据库的SQL语句是公用的
1、数据库：
创建：CREATE DATABASE IF NOT EXISTS 数据库名称 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;
查：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个语句
2022.4.28
1、PHP：最简单的一门语言
火爆架构：LAMP
php文件后缀名.php
1、*****如何运行php文件：
打开apache，将你的项目/文件放到htdocs文件中，打开浏览器输入：127.0.0.1，打开你需要的文件
建议把整个htdocs文件夹直接拖到你的编辑器里
特殊：其实php文件也支持编写前端代码（HTML/CSS/JS）和PHP代码，以后我们上网的时候，看到网页的后缀是.php也不要奇怪
PHP和JS语法非常相似，但是做的事儿一定不一样：
js - 客户端脚本语言（特效）
php- 服务器端脚本语言（和数据库打交道，沟通） - 比JS更严格
2、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、全栈开发：
1、前端->后端：
1、前端暂时只有一种方式可以将消息发送请求到服务器端：表单 - 明天ajax也可以
<form action="xx.后端路径" method="get/post">
<input name="" value="" /> - 如果是用户来输入则不需要写value，用户来选择需要把value提前写好
<提交按钮>
</form>
2、后端要接收住前端传来的数据
$变量=$_GET/POST/REQUEST["前端传来的input的name的值"]; - 到底是GET/POST需要沟通|看开发文档
REQUEST - 请求：前端发送到后端，不管是GET还是POST都能接住
GET - 大小有限2kb，不安全 - 搜索框
POST - 没有大小限制，安全的 - 注册/登录
2、后端<->数据库
1、创建和数据库的连接对象：
$conn=mysqli_connect("hostname","username","userpwd","dbname");
hostname - 主机号
username - 数据库用户名
userpwd - 数据库密码
dbname - 数据库名称
举例：
$conn=mysqli_connect("127.0.0.1","root","","h52201");
1.5、设置中文编码
mysqli_query($conn,"SET NAMES utf8");
2、创建SQL语句
$sql="INSERT/DELETE/UPDATE/SELECT";
3、哪个数据库要执行啥子sql语句，会得到一个结果
$result=mysqli_query($conn,$sql);
//增删改：结果都是布尔值：成功为true，失败为false
//查：返回的是一个我们都不认识的结果集：
解决：
while(($row=mysqli_fetch_*row|*assoc|array($result))!=null){
var_dump($row);//每一行要做什么操作看你自己
echo "<br>";
}
4、断开和数据库的连接
mysqli_close($conn);
form表单： - 隐藏作用域：给后端判断我们条件表单不同做不同的操作
2022.2.29
面试：同步交互与异步交互
同步：前端在向后端发起请求，直到服务器端进行响应的全过程，我们用户是不能做其他事情的（等）
比如：网址请求，表单请求 - 同步交互
异步：前端在向后端发起请求，直到服务器端进行响应的全过程，我们用户是可以做其他事情的（不等）
比如：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-urlencoded")
xhr.send("key=value&...");
4、创建监听事件：
xhr.onreadystatechange=()=>{
if(xhr.readyState==4&&xhr.status==200){
xhr.responseText;//把PHP输出在页面上的东西就会拿回前端 - 难在拿到数据后你要干什么
}
}
