JavaScript入门学习第五周

daybreak
183 阅读5分钟

一、BOM 对象

1、history对象

保存当前窗口中的历史记录（打开过的地址）

1）、前进

  • history.go(正数);正数为几就前进几步

2）、刷新

  • history.go(0);

3）、后退

  • history.go(负数);负数为几就后退几步

2、location对象

保存当前窗口中正在打开的王者

1）、网址的组成

  1. 协议：http、https、ftp、ws;
  2. 域名/主机号：域名需要购买，没有购买就是主机号；
  3. 端口号：默认端口号可以不写，http默认443，https默认80；
  4. 文件的相对路径：一般情况下都会加密；
  5. 查询字符串：表单中get方式提交显示出来的东西。

2）、属性和API

（1）、属性

获取到一个url的各个部分，直接输出location

（2）、功能-跳转

  1. location="url";
  2. location.href="url";
  3. location.assign("url");
  4. location.replace("url");跳转后禁止后退，不会产生记录；
  5. location.reload();刷新

3、navigator对象

保存浏览的基本信息，通过js来判断打来的浏览器是什么浏览器，并且判断版本号，类似于CSS hack，但是CSS hack只能操作浏览器；

1）、属性

navigator.userAgent;浏览器相关信息的字符串；

2）、真正的功能

判断浏览器是什么，根据不同的浏览器执行不同的操作，是js版本的CSS hack，但用法繁琐，现在不需要了。

4、event对象（事件对象）

由用户触发或浏览器自动触发

1）、绑定事件

（1） HTML页面上绑定事件

<elem on事件名="js语句"></elem>

缺点
  1. 不符合内容（HTML）与行为（js）的分离
  2. 无法动态绑定事件（一次只能绑定一个元素）
  3. 无法绑定多个函数对象

（2） js中使用元素的事件处理函数属性

elem on事件名=function（）{}

优点
  1. 符合内容（HTML）与行为（js）的分离
  2. 动态绑定事件
缺点
  1. 无法绑定多个函数对象

（3） 使用专门的事件API绑定事件

优点
  1. 符合内容（HTML）与行为（js）的分离
  2. 动态绑定事件
  3. 同时绑定多个函数对象
缺点

兼容问题老IE不支持

兼容语法
if(elem.addEventListener){
    elem.addEventListener("事件名",callback);
else{
     elem.attachEvent("on事件名",callback);
     //老IE同时绑定多个班上对象，最下面的先执行
     }

2）、事件周期

从事件发生到所有事件处理函数执行完毕的全过程

（1）、主流

  1. 捕获阶段：记录要发生的事件有哪些
  2. 目标优先触发：目标元素，当前点击事件实际发生事件元素
  3. 冒泡触发：向上触发记录着的事假

（2）、老IE

两个阶段，没有捕获阶段

3）、获取事件对象event

（1）、主流

会自动作为事件处理的第一个形参传入

（2）老IE

e=event;

（3）兼容

let e=event;

3）、获取事件对象event

（1）、阻止冒泡

兼容写法
if(e.stopPropagation){
    e.stopPropagation();
    }else{
    e.cancelBubble=ture;
}

（2）、利用冒泡/事件委托

优化

如果多个子元素定义了相同的或相似的操作，最好只用父元素定义一次

原因

每次绑定一个时间函数，其实都是创建了一个时间对象，创建的事件对象越多，网页效率越低下，认识了一个目标元素：target，点击哪个就是哪个；

语法

e.srcElement;

（3）、阻止浏览器的默认行为

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

（4）、获取键盘上的键码

e.keyCode;

4）、客户端储存计算

  • cookie：被淘汰
  • webstorage:H5提出的新特征，2中
  1. localStorage:本地级，永久存在
  2. lsessionStorage:回话级，浏览器一关，数据死亡

（1）、作用

跳转页面后或关闭浏览器后，依然存在

添加：xxxxStorage.属性名=值；
获取：xxxxStorage.属性名；
清空：xxxxStorage.clear()；//全部
删除：xxxxStorage.removeItem("属性名")；

二、MySQL

1、命令运行方式

1）、进入数据库

  1. 打开：cmd；
  2. 输入：cmd的命令，进入到d:/xampp/mysql/bin
  3. 登录：MySQL-urood-p回车
  4. 退出：exit
  5. 学习SQL语句，关系型数据SQL语句是公用的

2）、数据库

  • 创建：CREATE DATABASE IF NOT EXISTS
  • 数据名称：CHARACTER SET utf8
  • 查看：SHOW DATABASS
  • 切换：USE 数据名称

3）、数据表

（1）数据库的数据类型

数值
  • 整型：Int
  • 浮点型：Float/Double
  • 精确值：Decimal
字符串
  • 长度固定：CHAR
  • 长度可变：VARCHAR
日期
  • DATE-YYYY/MM/DD
  • DATETIME-YYYY/MM/DD hh:mm:ss
  • TIMESTAMP:时间戳（标识：唯一不重复，id也可以）

（2）、创建数据表

  • CREATE TABLE 表名（字段名 数据类型（长度），...）；
  • 主键约束（不可重复）：PRIMARY KEY
  • 主键自增（自动加一）：AUTO_INCREMENT

4）、数据

  • 增：INSERT INTO 表名 VALUES(字段值，...);
  • 删：DELETE FROM 表名 WHERE id=n;//删了就找不回来了
  • 改：UPDATE 表名 SET 字段名=字段值，... WHERE id=n;
  • 查:
  1. SELECT*FROM 表名；//得到此表所有数据
  2. SELECT*FROM 表名 WHERE id=n；//得到此表id=n的所有数据
  3. SELECT 字段名，... FROM 表名 WHERE id=n；//得到此表id=n中想要的字段

5）SQL语句大写

是MySQL的约定。SQL语句尽量大写，后面会放在脚本语言中，便于分辨

三、PHP语法基础

1、输出方式

  1. echo:想要输出的内容，只能输出4中标准类型
  2. var_dump:想要输出的内容，什么都能输出

2、变量

  1. 变量：变量名=值；使用是变量名=值；使用是不能少
  2. 常量：const 常量名=值；

3、数据类型

1）、四种标准/基本/原始属性

  1. 整型：Int
  2. 浮点型：Float/Doble
  3. 布尔：Boolean
  4. 字符串：String;单引号：只能放存文本；双引号：支持变量；

2）、两种复合类型

  1. 数组：Array
  • 直接量：$arr=[值，...]//索引数组
  • 内置函数：$arr=arry(key=>value,...)//hash数组
  1. object:面向对象
  2. 两种特殊类型
  • Resource:资源类型，连接数据库才会看到
  • null：空：释放内存

4、后端 <=> 数据库

  1. 创建出连接数据库的对象 $conn=mysqli_connect("hose","user","pwd","db");

  2. 立马为创建的数据库连接设置中文编码 mysqli_query($conn,"SET NAME utf8");

  3. 创建SQL语句 #sql="INSERT/DELETE/UPDETA/SELECT";

  4. 某个数据要执行某个SQL语句时 $rs=mysqlo_query($conn,$sql);

  • 增、删、改：结果为布尔值，true为成功，false为失败；
  • 查：得到了一个我们不认识的对象
mysqli_fetch_row(不认识的结果集）//一次一行，是一个数组
mysqli_fetch_assco(不认识的结果集）//一次一行，是一个对象
mysqli_fetch_array(不认识的结果集）//一次一行，是一个索引数组和hash数组
固定套路
while(($row =mysqli_fetch_xxxx($rs))!=null){
    var_dump($row);
}
  1. 断开和数据库的连接 mysqli_close($conn)

5、扩展

多个表单想要提交到同一个PHP中，但邮箱分开功能

<input type="hidden" name="自定义" value="自定义">

四、Ajax

1、概念

1）、同步交互

向服务器发起请求时，直到服务器端进行响应的全过程，用户是不可以做其他的事的（需要用户等待）

2）、异步交互

向服务器发起请求时，直到服务器端进行响应的全过程，用户是可以做其他的事的（不需要用户等待）

2、Ajax

  • 全称：asynchronaus javascript and xml；异步的js和xml，属于前端技术
  • 不严格的定义：页面不会完整的刷新，只会导致局部页面发生改变
  1. 定时器：定时器里面的内容再耗时也不会卡住后续代码
  2. ajax：再不刷新页面下和服务器做交互，可以将服务器端的数据放到前端

3、如何使用

  1. 创建ajax的核心对象XMLHttpRequest; let xhr=new XMLHttpRequest();

  2. 建立和服务器端的连接 `xhr.open("GET/POST","相对路径"）；

  3. 向服务器发出请求消息 xhr.send();

  • GET请求:xhr.send();会失效，但是不能省略，必须写为xhr.send(null);请求消息需要放到url后面添加？key=value&key=value...;
xhr.open("GET","url?key=value&key=value..."
xhr.send(null)
  • POST请求：xhr.send();可用，但是必须在之前加上一句话设置请求头部
xhr.open("POST","url");
xhr.setRequeatHeader("Content-Type","application/x-www-from -urlencoded");
xhr.send("key=value&key=value...");
  1. 绑定状态监听事件
xhr.onredaystatechang=()=>{
    if(xhr.redayState==4&&xhr.status==200){
        xhr.responseText;//拿到数据了，后续干什么看自己
        }
}

五、如何使用XML和JSON文件

1、如何使用XML

  1. 创建.xml文件
  2. 必须写上声明标签：<? xml version="1.0" encoding="utf-8" ?>
  3. 必须放上一个根标签，可以双标签，没有任何定义标签，所有标签全部都可以用，但是需要自己定义
  4. 想放什么标签，放什么标签

1) 、前端获取xml文件

  1. url写上"xx.xml"
  2. xhr.responseXML,获取xml文件和dom差不多
  3. 可以使用"使用核心DOM"去找出自己想要的部分

2、JSON

  • JSON全称：JavaScript object Notation：js对象表示法
  • 作用：数据格式类似于xml
  • 好处：比xml更简洁、更快、更容易解析，一个优秀的数据格式能激发提升程序员的开发效率

1)、那些事JSON字符串

  1. '[]'
  2. '{}'
  3. '[{}]'
  4. '{"":[],...}

2)、PHP如何将数据转为JSON字符串

  1. echo JSON_encode（$arr）;
  2. jsonText=JSON.stringjfy(jsonBbj);

3)、前端依然使用ajax获取响应数据

xhr.responseText;//json字符串

4）、把json字符串转为json对象

  1. eval("("+xhr.responseText+")");

  2. JSON.parse(xhr.responseText);

avatar
文章
阅读
粉丝