BOM PHP

卿久
129 阅读14分钟

一、BOM的对象：window、screen、history、location、navigator、event

1、history：保存当前窗口的历史记录（历史url）

作用：
  前进：history.go(1);
  后退：history.go(-1);
 *刷新：history.go(0);
复制代码

2、***location：保存当前窗口的正在打开的url

*（1）常识：一个url由5部分组成

    例：
http://127.0.0.1:8020/bom02/new/01-3.html
https://www.baidu.com/s?
wd=178&rsv_spt=1&rsv_iqid=0xd702eab1000426fa&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&rqlang=cn&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&oq=178%2526lt%253B&rsv_btype=t&inputT=204&rsv_t=8b56iJOG%2B6b45FILzCXex%2FpEHFfVJ6HMrt%2FXQdYMKdOy%2B8bu9OZqejCb14LrHOIywVaU&rsv_sug3=7&rsv_sug1=4&rsv_sug7=100&rsv_pq=a3ee42be00024fae&rsv_sug2=0&rsv_sug4=981
	
协议：http/https（请求响应模式）/ftp（传输文件）/ws（广播收听模式：直播） - 网页的功能不同
主机号/域名：www.baidu.com/127.0.0.1 - 主机号不方便记忆所以多半都会购买域名，而且127.0.0.1只能访问自己
端口号：:8020 - 默认端口：http - 80 https - 443，默认端口可以省略不写
文件的相对路径：new/01-3.html  /s -百度加密了
查询字符串：?wd=178&rsv_spt=1... - 表单提交到服务器的东西 - 请求消息

一般来说一个网址一定由5部分：
		协议://域名:端口号/文件路径?查询字符串

目的：1、常识
     2、学习服务器端的时候有好处
复制代码

（2）属性：不需要记忆，直接用console.log(location)可以查看到有哪些属性 作用：获取：协议、域名、端口号、文件路径、查询字符串

（3）API：跳转 location="新url" location.href="新url" location.assign("新url");

	 以上三个操作功能相同都是跳转页面，意味着以后不一定非要用a标签跳转

	 替换后禁止后退：location.replace("新url")

	 刷新：location.reload();
复制代码

3、navigator：保存了当前浏览器的信息（浏览器的名称/版本号）

属性：navigator.userAgent;

根据字符串截取出浏览器名称&版本号：本来的目的是为了做兼容，但是没用
因为所有的API前辈们都已经设置好了兼容
复制代码

4、******event：事件对象

事件：多半用户触发 或 浏览器自动触发的操作

（1）*绑定事件：3种
	1、在HTML元素上绑定
		<elem on事件名="js语句"></elem>

		缺点：
		  1、没有实现JS与HTML的分离 - 要HTML（内容）/CSS（样式）/JS（行为）分离
		  2、无法动态绑定事件 - 一次只能绑定一个元素
		  3、无法同时绑定多个函数对象

	2、*使用JS的事件属性绑定：
		elem.on事件名=function(){
			js语句
		}
		
		优：1、实现JS与HTML的分离
		    2、动态绑定事件
		缺：1、无法同时绑定多个函数对象 - 算不上是缺点，为什么不写一起

	3、使用JS的API绑定事件：
		主流：elem.addEventListener("事件名",callback)
		老IE：elem.attachEvent("on事件名",callback);
		兼容：if(elem.addEventListener){
			 elem.addEventListener("事件名",callback)
		      }else{
			 elem.attachEvent("on事件名",callback);
		      }

		优：1、实现JS与HTML的分离
		    2、动态绑定事件
		    3、同时绑定多个函数对象
		缺：需要处理兼容性问题
                    
                    
复制代码

二、事件周期：

主流：3个

	1、捕获阶段：由外向内，记录着要执行的事件
	2、目标触发：当前点击的元素优先出发
	3、冒泡触发：由内向外的冒泡触发事件
   老IE：2个
	没有捕获阶段
复制代码

三、*****获取到事件对象event：

主流：事件函数中传入一个形参e，就可以自动接住事件对象event
老IE：window.event;
兼容：event;不光老IE可用，主流浏览器也可以使用 - 小三上位
复制代码

获取到了事件对象event就可以做很多很多的操作了：

1、*获取鼠标的位置

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;不光老IE可用，主流浏览器也可以使用 
以后事件之中可以不用使用this了
复制代码

4、*阻止浏览器的默认行为：

哪些：比如：F5带来的刷新，F12带来的控制台，右键带来的菜单框，F11全屏，a自带跳转，submit自带提交...
主流：e.preventDefault();
    老IE：e.returnValue=false;
兼容：if(e.preventDefault){
	e.preventDefault()
	}else{
	       e.returnValue=false;
	     }		
		
新事件：
	1、鼠标右击：window.oncontextmenu
	2、键盘事件：window.onkeydown
复制代码

5、*获取键盘的键码

	e.keyCode;//不需要记忆，直接输出查看 或 百度 keyCode表
复制代码

总结：bom重点：

1、定时器
2、location跳转
3、event对象：
（1）写出知道的绑定事件的方式：3种
（2）事件：主流3种 老IE2种
（3）如何阻止冒泡
（4）事件委托
（5）阻止浏览器的默认行为
（6）获取键盘键码
（7）获取鼠标的坐标
复制代码

扩展：*****客户端存储技术 - 以前使用cookie（缺点：大小有限2kb，30天必死），HTML5提出了一个新概念webStorage：2种（优：大小有限8mb，生命周期无限，缺点：老IE不支持）

1、localStorage：本地级 - 浏览器关闭甚至电脑关闭，第二天打开依然存在
2、sessionStorage：会话级 - 浏览器一旦关闭自动死亡
作用：
  1、数据可以跨页面传输
  2、皮肤、主题
  3、浏览器的历史记录

语法：类似于对象：
	添加：xxxxStorage.属性名="值";
	获取：xxxxStorage.属性名;
	删除：xxxxStorage.removeItem("属性名");//只会删除这一个
	清空：xxxxStorage.clear();//删除所有

一、MYSQL:

1.可能直接成为全栈的语言：

1、java语言 - 不包含移动端（安卓）
2、javascript语言
客户端 - 开发根本
服务器端 - node.js 历史上第一次一门语言可以通吃前后端
数据库 - 两个
移动端 - 网页/APP/小程序/公众号（跨所有平台的IOS/Andriod）
    
以前想要开发移动端：至少3个人 - 前端工程师/IOS工程师/Andriod工程师
现在诞生一些混合开发的框架：比如：uniapp、h5+puls、jQueryMobile...
  只需要一个前端工程师学习一点点原生IOS、Andriod的语法就可以一个人开发出跨平台项目了
复制代码

2.基本内容：

服务器端概念：

简单来说就是一台PC机
生活中使用的是 微型机
商业/国家中使用 小型机（大概造价几十万，好的就上百万） 中型机 大型机 超级计算机（国家：天河一/二号、神威太湖之光）

拥有服务器的方式：
	1、买 - 对小型公司遭不住
	2、买一台配置好一点的微机 - 对于小型公司推广有用，但是一天同时的访问不能太大
	3、租云服务器端 - 腾讯云/阿里云/新浪云/百度云... - 配置自选的，价格不定

对于开发人员来说
硬件服务器 - PC机
软件服务器 - 中间件（软件可以将你的电脑变为一个台服务器，其他人可以访问）

软件架构：服务器重不重要
C/S - Client客户端/Server服务器端
	举例：QQ
	      大型网络游戏
	优点：用户体验较好
	      运行稳定
	      对带宽的要求低
	缺点：占硬盘空间
	      更新过于复杂 - 服务器和客户端都要更新
       
B/S - Browser浏览器端/Server服务器端
	举例：网页版QQ
	      网页游戏
	优点：几乎不占硬盘
	      更新简单 - 只需要更新服务器端
	缺点：体验感相对较差（越来越好的）
	      对带宽的要求较高
复制代码

XAMPP软件 - 中间件

 安装步骤：双击 -> 一路点下去
Apache - 用于运行PHP环境的服务，点击start
	 出现错误：
		1、直接弹出一个警告框，你的电脑里缺少api-ms-win-crt-conio-l1-1-0.dll文件
		   解决：粘贴到c:/windows/sysWow64/里面
		2、错误日志：error：apache shutdown unexpectedly - 端口号被占用了
		   解决：打开：D:\xampp\apache\conf\httpd.conf文件
			 查找：ctrl+F：listen 80
			 随意换为4位数
			 建议：你能用默认端口就不要去修改他，好处：不需要写出来
		3、切忌安装时一定要安装在盘符下，不可以安装在某个文件夹内
		4、如果以上三种解放方案都不行，说明系统问题-重装系统
复制代码

TOMCAT - 用于运行java环境的服务

如果你的apache成功开始，恭喜你，你的服务器已经开启了（私网）

如何访问apache服务器：其实apache控制着一个文件夹：D:\xampp\htdocs
	打开浏览器：
		127.0.0.1:端口号
		localhost:端口号
		主机号：代表自己的电脑

搭建一个自己的服务器端应用：
	把你的任意一个项目 - 复制到D:\xampp\htdocs，把之前的东西删掉

其他人也可以来访问了：
	打开cmd：iconfig
	将你的ipv4发送到群里，让别人来访问
	172.168.20.xxx

添加网页小图标：
	随便一张图片：名字改为：favicon.ico
	放到D:\xampp\htdocs

修改顶级域名：- 假象（没花钱，只有自己用）
	打开C:\Windows\System32\drivers\etc\hosts
	问题1：系统文件不允许你保存，另存为到桌面，拖进去覆盖掉
	问题2：你打开是个白板，没有任何代码
复制代码

3、MySQL - 数据库产品

关系数据库 - 以表格为主

Oracle - Oracle（甲骨文）
	主要应用于【企业级】开发市场
MySQL - Oracle（甲骨文）
	主要应用于【互联网】开发市场 - 中小型公司的首选
sql server - 微软
	大学讲课
复制代码

非关系型数据库 - 没有固定格式的

是一种运动 - 反关系型数据库
主流产品 - mongoDB
复制代码

MySQL

最开始是由MySQL AB推出
瞬间爆火 - 免费 简单 开源（源代码开放）
开源的好处：
	公司：免费聘请民间大佬为你做测试、开发
	个人：查看、修改、添加源代码 - 开挂
爆火的网站架构：LAMP - Linux + Apache + MySQL + PHP - 这四个都是免费的 - 非常让中小型公司满意
企业级架构：Linux(AIX) + JavaEE + Oracle + weblogic - 一套架构搭建下来少说上百万 - 安全性高（银行、公安局、医院...）
MySQL AB后期被sun公司收购
	sun公司 - 明星产品java
sun后期被oracle公司收购了
	三个明星产品：
		oracle
		mysql - 社区版（免费）和商业版（收费）
		java

为什么现在叫MariaDB?
1、MySQL的作者就受到了排挤、并不重视、关注
2、MySQL的作者就自己出来重做原滋原味的MySQL，但是名字不能再叫MySQL了，版权问题
3、MySQL的作者就以自己女儿的名字来命名的MariaDB
 
复制代码

4.MySQL基本内容

访问：

1、图形化界面（更简单更方便） - 傻瓜操作
   要求：同时打开mysql和apache
   访问：127.0.0.1:端口号/phpmyadmin
	 localhost:端口号/phpmyadmin

	 有的同学可能打不开

2、*****命令行方式 - 复杂很多，但是才能学到真正的SQL语句
	如何进入数据库：
		必须打开mysql
		1、打开cmd
		2、输入：cd 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 - 时间戳（标识：唯一不重复的）

创建数据库表：
	CREATE TABLE 表名(
			字段名 数据类型,
			    ...
			);

举例：
CREATE TABLE user(
		id INT PRIMARY KEY AUTO_INCREMENT,
		name VARCHAR(30),
		pwd VARCHAR(30),
		email VARCHAR(30),
		vip VARCHAR(1)
	);

主键约束：PRIMARY KEY
主键自增：AUTO_INCREMENT
复制代码
（3）*****数据：4句以后最常用的操作
1、增：INSERT INTO 表名 VALUES(字段值,...);
   举例：INSERT INTO user VALUES(0,"小明","123123","xm@qq.com","1");

2、删：DELETE FROM 表名 WHERE id=几;
   举例：DELETE FROM user WHERE id=3;

3、改：UPDATE 表名 SET 字段名=字段值,... WHERE id=几;
   举例：UPDATE user SET name="雍燕",email="yongyan@qq.com" WHERE id=4;					

4、查：3种语法：
  SELECT * FROM 表名;//获取此表所有的数据
  SELECT * FROM 表名 WHERE id=几;//获取id为几的那一条数据
  SELECT 字段名,... FROM 表名;//获取此表所有的对应的字段值
疑惑：
为什么要大写：MySQL约定：SQL语句要尽量的大写 - 这些语句以后都会放到脚本语言（php）之中
    
复制代码

二、PHP

 PHP：最简单的一门后端语言 ：\
  火爆架构：LAMP\
     php文件后缀名.php
1、如何运行php文件：
***打开apache，并且将你的项目放到htdocs文件夹中
    打开浏览器输入：127.0.0.1:端口号，打开你需要的文件
  
特殊：其实PHP文件也支持前端代码和PHP代码，以后我们上网时，看到网页后缀.php也不必惊讶 - 比js严格
复制代码

2、PHP语法基础：

（1）输出方式：

1、echo(想要输出的内容); 或 echo 想要输出的内容; - 只能输出4种标准类型，不能输出别的

2、var_dump(想要输出的内容);//输出数据类型和值

缺点：1、输出的太过完整，以后PHP只要输出在页面上的东西，都会被前端使用ajax拿走
     2、复合类型暂时也只能用var_dump输出 - 以后不会再用了
	
复制代码
（2）变量和常量：
       *1、变量：值可以改变
	   语法：$变量名=值;
	   注意：使用时$也不能省略

	2、常量：值一旦创建，不可以改变
	   语法：const 常量名=值;
复制代码
（3）*数据类型：

四种标准/基础类型：

整型：Int
浮点型：Float/Double
布尔：Boolean
字符串：String - 不太一样

单引号：直接放纯文本
双引号：支持放入变量
    
例如：echo "我的名字叫{$name}今年{$age}岁喜欢{$hobby}";
复制代码

两种复合类型：

1、Array - 数组
   创建：
      （1）直接量：$arr=[值1,....]; - 索引数组
      （2）内置函数：$arr=array( - hash数组。其实就是对象
					"key"=>value,
					...
				 )

		   访问：$数组名[下标/"自定义"]

		   遍历：循环

2、Object - 面向对象
	两种特殊类型：
		（1）Resource - 资源类型：连接上数据库才会看到
		（2）Null - 释放内存
			"" - 有值，值为空
			null - 没有
复制代码
（4）运算符：除了一个不同：字符串的拼接使用的是 “ .”
（5）分支、循环、函数：与js完全一样
（6）API：理论上完全一样，但是操作却不同，不需要做任何的记忆，百度搜索

3、全栈：

（1）前端->后端：
前端需要发起请求：
1、表单请求 提交
	注意：
	1、input必须添加name属性，甚至有的input/textarea/select*option还要添加value属性
	2、form表单必须添加action="服务器端文件的路径";
	3、method到底用get还是post，和后端沟通（安全性为主）
	只负责发送，不负责保存

2、服务器端 需要接收住 前端传来的 请求消息
		语法：$_GET/POST/REQUEST["input的name的值"];

		REQUEST->请求：能接住一切请求不管是get还是post
复制代码
（2）后端<->数据库：PHP自带操作MySQL数据的API，只需要学习4句话
 1、创建出连接数据库对象
$conn=mysqli_connect("hostname","username","userpwd","dbname");
例如：
$conn=mysqli_connect("127.0.0.1","root","","books");

1.5、立马为数据库传输设置中文编码
mysqli_query($conn,"SET NAMES utf8");

2、创建SQL语句：
$sql="INSERT/DELETE/UPDATE/SELECT";

3、某个数据库要执行某个操作
$rs=mysqli_query($conn,$sql);
//$rs：增删改，是一个布尔值，true->成功，false->失败
	查：是一个我们都不认识的结果集：解决将不认识结果集变为我们认识的数据
	mysqli_fetch_row($rs)//一次只能得到一行的数据，是一个索引数组
	*mysqli_fetch_assoc($rs)//一次只能得到一行的数据，是一个hash数组  
解决固定套路：
	while(($row=mysqli_fetch_assoc($rs))!=null){
		$row;//当前行数据，做什么操作就看你了
		}

4、断开和数据库的连接
	mysqli_close($conn);
复制代码

扩展：

<input type="hidden" name="hide" value="登录" /> -
隐藏作用域，不是给用户看/输入，提交时用户后端判断执行不同代码的
复制代码

三、 同步交互和异步交互：

同步：客户端向服务器端发送请求直到服务器端进行响应的全过程，用户只能等待 - 不严格的说法：整个页面都会刷新一下

举例：1、网址提交     2、表单提交
复制代码

异步：客户端向服务器端发送请求直到服务器端进行响应的全过程，用户不必等待 - 不严格的说法：局部页面会进行刷新

举例：1、ajax

    异步的技术：

    例如：	
    定时器：就算定时器里面的操作在耗时，也不会影响后续代码，用户也能看到后续代码的效果
复制代码

1、*****ajax：asynchronous javascript and xml：直译：异步的javascript和xml

好处：1、不会让用户等待
      2、不会刷新页面也能和服务器端进行交互（比表单强）
      3、将服务器端的数据获取到前端页面
复制代码

使用步骤：4步

1、创建ajax核心对象xhr
   var xhr=new XMLHttpRequest();

2、创建和服务器端的连接
   xhr.open("GET/POST","xx.php");

3、向服务器端发送请求消息
   xhr.send()

	特殊：
	  1、GET方式，xhr.send失效，还不能省略，必须写为xhr.send(null)，请求消息需要拼接到url?后面
		xhr.open("GET","xx.php?key=value&key=value...");
		xhr.send(null);

	  2、POST方式，xhr.send可用，在之前设置请求头部
		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放在页面上的东西 - 服务器端响应的消息
	}
   }   
复制代码

ajax就是固定的方法：难就难在拿到数据后要干什么

avatar
文章
阅读
粉丝