学习JavaScript的第五周

兔不理
238 阅读3分钟

一、history对象

1.概念：保存当前窗口的历史记录（打开过的url）

2.使用：

前进：history.go(1);

后退：history.go(-1)

刷新:history.go(0)

二、location对象

1.概念：保存当前窗口正在打开的url

2.常识：url网址由5部分组成：协议://域名|主机号:端口号/文件的相对路径?查询字符串

3.属性和API

  • 1.属性：获取到一个url的各个部分，输出location查看

  • 2.功能：跳转

1.location="url"

2.location.href="url

3.location.assign("url")

4.跳转后禁止后退

location.replace("新url")

5.刷新

location.reload()

三、navigator对象：保存浏览器的基本信息

1.属性：navigator.userAgent;

2.功能:判断浏览器是什么对不同浏览器执行不同的操作

四、event对象

1.事件对象：用户触发的或浏览器自动触发

2.绑定事件：

（1）在html页面上绑定事件

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

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

（2）在js中使用元素的时间处理函数属性

elem.on事件名=function(){}

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

主流：elem.addEventListener("事件名",callback);
老IE：elem.attachEvent("on事件名",callback);
兼容：if(elem.addEventListener){
			elem.addEventListener("事件名",callback);
			    }else{
			elem.attachEvent("on事件名",callback);//老IE如果同时绑定了多个函数对象，反而最下面的函数最先执行
			      }

3、事件周期

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

  • 主流：1、捕获阶段：记录要发生的事件有哪些2、目标优先触发：目标元素->当前点击的实际发生事件的元素3、冒泡触发：向上出发所有记录着的事件

4.获取事件对象

elem.on事件名=e=>{e->event};

作用：

1.获取鼠标的坐标/位置

2.阻止冒泡

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

3.事件委托

e.srcElement;

4.阻止浏览器的默认行为

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

5.获取键盘的键码

e.keyCode

客户端存储计算

1.localStorage-本地：永久存在

2.sessionStorage-会话级：只要浏览器一关就没有了

3.使用

1.添加：

xxxxStorage.属性名=值;

2.获取

xxxxStorage.属性名

3.清空

xxxxStorage.clear();

4.删除

xxxxStorage.removeItem("属性名");

五、MySQL-数据库产品

1.关系型数据库

2.非关系型数据库

  • 访问

1.图形化界面

访问：127.0.0.1:端口号/phpmyadmin

2.命令行方式

进入数据库

（1）打开cmd

（2）输入cmd的命令，进入到d:/xampp/mysql/bin

（3）登入 mysql-uroot-p

(4)退出 exit

3.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 - 时间戳

3.创建数据表

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

4.数据

增：

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

删：

DELETE FROM 表名 WHERE id=几;

改：

UPDATE 表名 SET 字段名=字段值,... WHERE id=几;

查：

1、SELECT * FROM 表名; - 得到此表里面所有数据
2、SELECT * FROM 表名 WHERE id=几; - 得到此表里面id=几的这个人的所有数据
3、SELECT 字段名,... FROM 表名 WHERE id=几; - - 得到此表里面id=几的这个人的想要的字段

六、PHP

1.语法基础

  • 输出方式：
  1. echo 想要输出的内容

2.var_dump(想要输出的内容)

  • 变量和常量
  1. 变量

$变量名=值;

2.常量

const 常量名=值

  • 数据类型

1.标准类型

整型：Int

浮点型：Float/Double

布尔:Boolean

字符串：String 单引号只能放入纯文本，双引号支持变量

2.复合类型

1.Array-数组

创建：

1.直接量

$arr=[值1,...];

2.内置函数

$arr=array( key=>value, ... );

访问：

$数组名[下标];

遍历：循环

  • object 面向对象

  • 特殊类型

1.Resource-资源类型

2.null-空

七、全栈开发

1.后端接住前端传来的信息

$_GET/POST/REQUEST["input的name的值"]

2.后端<->数据库

  • 创建数据库对象

$conn=mysqli_connect("hostname","username","userpwd","dbname");

  • 创建数据库设置中文编码

mysqli_query($conn,"SET NAMES utf8");

  • 创建SQL语句

$sql="INSERT/DELETE/SELECT/UPDATE";

  • 对某个数据库执行某个SQL语句

$rs=mysqli_query($conn,$sql);

固定套路： 增、删、改、查结果为布尔值，查得到一个结果集对象

API

mysqli_fetch_row(不认识的结果集);

mysqli_fetch_assoc(不认识的结果集);

mysqli_fetch_array(不认识的结果集);

while(($row=mysqli_fetch_xxx($rs))!=null){
			var_dump($row);
			echo "<br>";
						}
  • 断开和数据库的链接

mysqli_close($conn);

八、ajax

1.使用

1.创建ajax的核心对象

var xhr=new XMLHttpRequest();

2.建立和服务器端的连接

xhr.open("GET","xx.php")

3.向服务器端发送请求信息

xhr.send();

4.绑定状态监听事件

xhr.onreadystatechange=()=>{
	if(xhr.readyState==4&&xhr.status==200){
	xhr.responseText;
	}
		}

九、XML:配置文件|数据格式

1.使用

  • 创建.xml文件

  • 必须写上声明标签

<?xml version="1.0" encoding="utf-8"?>

  • 写一个根标签

2.获取XML：

  • url写"xx.xml"

  • xhr.responseXML获取响应的xml文件

十、JSON：JavaScript object Notation

1.JSON字符串

如：'[1,2,3,4]' '{"key":value,...}' '[{},{},{},{}]' '{"names":[],"ages":[],...}'

2.PHP如何将数据变为JSON

echo JSON_encode($arr);

var jsonTxt=JSON.stringify(jsonObj);

3.前端使用ajax获取响应数据

xhr.responseText;

4.把json字符串变为json对象

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

（2）JSON.parse(xhr.responseText);

avatar
文章
阅读
粉丝