BOM

history

保存了当前窗口的历史记录

前进 history.go(1)
后退 history.go(-1)
刷新 history.go(0)

location

保存了当前窗口正在打开的url

一个url由5部分组成

协议：http/https/ftp/ws
- http/https 请求响应模式，https安全性更高
- ftp 传输文件
- ws 广播收听模式（直播）
主机号/域名 127.0.0.1/www.baidu.com
- 主机号不便于记忆，企业会选择购买域名
端口号
- http 80
- https 443
文件的相对路径
查询字符串：表单提交到服务器内容，请求信息

属性

url5部分相关，使用console.log(location)控制台查找使用

API

跳转
- location="新url"
- location.href="新url"
- location.assign("新url")
替换后禁止后退 location.replace("新url")
刷新 location.reload()

navigator

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

navigator.userAgent根据字符串截取浏览器名称、版本号：本身目的是做兼容，但未使用，因为API都已经设置好兼容

<script>
        var str=navigator.userAgent;
        var browser,version;

        //判断浏览器类型
        if(str.indexOf("OPR")!=-1){
            browser="opera";
        }else if(str.indexOf("Chrome")!=-1){
            browser="Chrome";
        }else if(str.indexOf("Safari")!=-1){
            browser="Safari";
        }else if(str.indexOf("Firefox")!=-1){
            browser="Firefox";
        }else if(str.indexOf("MSIE")!=-1){
            browser="IE";
        }

        //找版本号
        if(browser=="OPR"){
            var i=str.indexOf("OPR")+4;
            version=str.substr(i,4);
        }else{
            var i=str.indexOf(browser)+browser.length+1;
            version=str.substr(i,4);
        }

        console.log(str)
        document.write("<h1>浏览器："+browser+"</h1>");
        document.write("<h1>版本号："+version+"</h1>");
    </script>

event

事件：由用户触发或浏览器自动触发的事件

绑定事件

1.直接在html元素上绑定 <elem on事件名="js语句"></elem>

缺点：
- 没有实现js与html的分离
- 无法动态绑定事件
- 无法同时绑定多个函数对象

2.使用js的事件属性绑定 elem.on事件名=function(){js语句}

优点：
- js与html的分离
- 动态绑定事件
缺点：无法同时绑定多个函数对象

3.使用js的API属性绑定 elem.addEventListener("事件名",function(){})

优点：
- js与html的分离
- 动态绑定事件
- 同时绑定多个函数对象
缺点：兼容性问题
- IE elem.attachEvent("on事件名",function(){})

if(elem.addEventListener){
    elem.addEventListener("事件名",function(){})
}else{
    elem.attachEvent("on事件名",function(){})
}

事件周期

主流
- 捕获阶段：由外向内，记录着要执行的事件
- 目标触发阶段：当前点击的元素优先触发
- 冒泡触发：由内向外
老IE 和主流相比无捕获阶段
- 目标触发阶段：当前点击的元素优先触发
- 冒泡触发：由内向外

获取到事件对象event

主流事件函数中传入参数e，就可以自动接住对象event
老IE window.event
兼容 window.event
应用

获取鼠标的位置 e.screen/client/page
阻止冒泡

主流：e.stopPropagation()
老IE：e.cancelBubble=true

兼容：

if(e.stopPropagation){
    e.stopPropagation();
}else{
    e.cancelBubble=true;
}

事件委托/利用冒泡优化，每绑定一个事件，就相当于创建了一个事件监听对象，创建对象越多，网页效率越低下

=>把事件都绑定在自己的父元素上：获取目标元素：触发的元素

老IE e.srcElement
主流 e.target
兼容 target=e.srcElement

组织浏览器的默认行为

老IE e.returnValue=false
主流 e.preventDefault()

兼容

if(e.preventDefault){
    e.preventDefault();
}else{
    e.returnValue=false;
}

获取键盘的键码 e.keyCode

服务器

概念：生活中使用的是微型机。商业/国家中使用小型机、中型机、大型机、超级计算机（国家：天河一/二号、神威太湖之光）

硬件服务器： PC机
软件服务器：中间件（软件可以将你的电脑变为一个台服务器，其他人可以访问）

软件架构：

C/S Client客户端/Server服务器端

举例：QQ、大型网络游戏
优点：
- 用户体验较好
- 运行稳定
- 对带宽的要求低
缺点：
- 占硬盘空间
- 更新过于复杂 - 服务器和客户端都要更新

B/S Browser浏览器端/Server服务器端

举例：网页版QQ、网页游戏
优点：
- 几乎不占硬盘
- 更新简单：只需要更新服务器端
缺点：
- 体验感相对较差
- 对带宽的要求较高

MySQL数据库

关系型数据库 以表格为主

Oracle 主要用于企业级开发市场
MySQL 主要用于互联网开发市场
sql server 微软 非关系型数据库 没有固定格式 mongoDB
网站架构（LAMP）：Linux + Apache + MySQL + PHP
企业级架构：Linux(AIX) + JavaEE + Oracle + weblogic

访问

图形化界面（更简单、方便）

要求：同时打开MySQL和Apache
访问：
- 127.0.0.1:端口号/phpmyadmin
- localhost:端口号/phpmyadmin

命令行方式cmd D:\

cd D:\xampp\mysql\bin
（登录）mysql _uroot _p
（退出）exit

SQL语句

数据库的数据类型

数值：Int整形、Float/Double浮点型、DECIMAL精确值
字符串：CHAR长度固定、VARCHAR长度可变
日期：
- DATE yyyy/mm/dd
- DATETIME yyyy/mm/dd hh:mm:ss
- TIMESTAMP 时间戳（标识：唯一不重复的）

数据库

创建数据库 CREATE DATABASE IF NOT EXISTS 数据库名称 CHARACTER SET utf8;
查看数据库 SHOW DATABASES;
切换数据库 USE 数据库名称
删除数据库

数据表 CREATE TABLE 表名(字段名数据类型，...);

//创建user表
CREATE TABLE user(
    id INT PRIMARY KEY AUTO_INCREMENT,
    //PRIMARY KEY主键约束
    //AUTO_INCREMENT主键自增
    name VARCHAR(30), 
    pwd VARCHAR(30), 
    email VARCHAR(30), 
    vip VARCHAR(1), 
);

数据：增删改查

增 INSERT INTO 表名 VALUES(字段值,...);

INSERT INTO user VALUES(0,"Tony","123123","tony@163.com","1");

删 DELETE FROM 表名 WHERE id=几;
改 UPDATE 表名 SET 字段名=字段值,... WHERE id=几;
查
- 获取此表所有数据：SELECT * FROM 表名;
- 获取id为几的那条数据：SELECT * FROM 表名 WHERE id=几;
- 获取此表所有的对应字段值：SELECT 字段名,... FROM 表名;

PHP

PHP运行：打开apache，项目放入htdocs文件夹运行

PHP文件支持前端代码和PHP代码

语法

输出

输出标准类型 echo 输出 echo(输出)
输出数据类型和值 var_dump(输出);

变量和常量

变量 $变量名=值;
- 输出：echo $变量名
常量 const 常量名=值;
- 输出：echo 常量名

数据类型

4种标准/基础类型
- 整型Int
- 浮点型Float/Double
- 布尔Boolean
- 字符串 '纯文本' "变量"

echo "我的名字叫{$name}今年{$age}岁喜欢{$hobby}"

2种复合类型
- Array 数组
  - 创建直接量法$arr=[值1,...] 索引数组
  内置函数法$arr=array("key"=>value,...); hash数组
  - 访问 $数组名[下标/"自定义"]
  - 遍历
- Object
2种特殊类型
- Resource 资源类型
- Null 空，无内容用于释放内容

运算符 .拼接
分支、API相同

全栈

前端 -> 服务器端

表单请求：提交

input必须添加name属性，有的input还必须添加value（单选/多选/hidden、select/option）
form表单必须添加action="服务器文件路径"
只负责发送，不负责保存

服务器端

需要接收住前端传来的请求信息

$_GET/POST/REQUEST["input的name值"];REQUEST可以接住所有请求

服务器端 <-> 数据库

创建出连接数据库对象 $conn=mysqli_connect("hostname","username","userpwd","dbname"); 设置中文编码 mysqli_query($conn,"SET NAMES utf8");
创建SQL语句 $sql="INSERT/DELETE/UPDATE/SELECT";
某个数据库要执行某个操作 $rs=mysqli_query($conn,$sql);

增/删/改都会得到bool值，成功true/失败false
查会得到一个不认识的结果集while(($row=mysqli_fetch_row/assoc($rs))!=null){$row}
- row 得到索引数组
- assoc 得到hash数组

断开和数据库的连接 mysqli_close($conn);

ajax

同步：客户端向服务器端发送请求，直到服务器端进行响应的全过程，用户只能等待【页面刷新】
同步：客户端向服务器端发送请求，直到服务器端进行响应的全过程，用户不需要等待【局部页面刷新】

ajax：asynchronous JavaScript and xml（异步的JavaScript和xml）

优点：
- 用户不用等待
- 不刷新页面，也能和服务器端进行交互
- 将服务器数据获取到前端页面

使用步骤

创建ajax核心对象xhr var xhr=new XMLHttpRequest();
创建和服务器端的连接 xhr.open("GET/POST","xx.php");
向服务器端发送请求消息 xhr.send();

GET方式：xhr.send失效，但不能省略，必须写为xhr.send(null)，请求消息需要拼接到url?后面

xhr.open("GET","xx.php?key=value&key=value...");
xhr.send(null);

POST方式：xhr.send可用，在之前设置请求头部

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("key=value&...");

绑定监听状态改变事件 xhr.onreadystatechange=()=>{if(xhr.readyState==4&&xhr.status==200）{xhr.responseText;}}

扩展

事件

oncontextmenu 鼠标右击事件
onkeydown 键盘点击事件

//阻止右键菜单
window.oncontextmenu=e=>{
    e=event;
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue=false;
    }
}

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

js基础学习5

BOM