js的一些基础

Posted 2021-03-07 bahkkba

事件对象：

就是用来存储事件相关的信息

事件对象存储信息有：

事件的类别，如：click，keydown等等

点击事件的位置

点击的哪一个键

等等

用于阻止事件流，用于阻止浏览器默认动作（表单提交、a标签跳转等）

ie 678

通过关键词event获取

标签对象.onclick = function() {

window.event // 关键词 里面存放了事件相关的信息

}

主流

标签对象.onclick = function(evt) { // 实战工作event - evt -> e

evt

}

作用

监听表单提交

阻止浏览器默认动作

阻止事件流

记录鼠标位置

事件委托

通过js给页面新增的标签/元素/节点，要注意默认没有任何事件，需要单独设置

可以使用事件委托将事件委托给父元素注册

正则

是什么

又成规则表达式，描述了匹配字符串的规则

由我们自己来书写 “规则”，专门用来检测 字符串 是否符合 “规则” 使用的

我们使用一些特殊的字符或者符号定义一个 “规则公式”，然后用我们定义好的 “规则公式” 去检测字符串是不是合格

能干嘛

对表单域项目(用户名、密码、邮箱、qq号码、手机等等)进行验证

内容替换、获取

网络爬虫（一个网站到另一个网站的页面上去获取对方的相关信息）

最最最常用：表单验证

var regexp = /正则表达式/可选修饰符

var regexp = new RegExp（“正则表达式”，可选修饰符）

语法：正则.test（字符串）

返回：判断正则表达式是否匹配成功 成功-true，失败-false

语法：正则.exec（字符串）

返回：匹配符合正则表达式条件的数据 成功-数组，失败-null

元字符

. ： 匹配非换行的任意字符

： 转译符号，把有意义的 符号 转换成没有意义的 字符，把没有意义的 字符 转换成有意义的 符号

s ： 匹配空白字符（空格/制表符/...）

S ： 匹配非空白字符

d ： 匹配数字

D ： 匹配非数字

w ： 匹配数字字母下划线

W ： 匹配非数字字母下划线

限定符

* ： 前一个内容重复至少 0 次，也就是可以出现 0 ～ 正无穷 次

+ ： 前一个内容重复至少 1 次，也就是可以出现 1 ～ 正无穷 次

? ： 前一个内容重复 0 或者 1 次，也就是可以出现 0 ～ 1 次

{n} ： 前一个内容重复 n 次，也就是必须出现 n 次

{n,} ： 前一个内容至少出现 n 次，也就是出现 n ～ 正无穷 次

{n,m} ： 前一个内容至少出现 n 次至多出现 m 次，也就是出现 n ～ m 次

^ ： 表示开头

$ ： 表示结尾

 

() ： 限定一组元素

[] ： 字符集合，表示写在 [] 里面的任意一个都行

[^] ： 反字符集合，表示写在 [^] 里面之外的任意一个都行

- ： 范围，比如 a-z 表示从字母 a 到字母 z 都可以

| ： 或，正则里面的或 a|b 表示字母 a 或者 b 都可以

i ： 表示忽略大小写

这个 i 是写在正则的最后面的

/w/i

就是在正则匹配的时候不去区分大小写

g ： 表示全局匹配

这个 g 是写在正则的最后面的

/w/g

就是全局匹配字母数字下划线

es6

声明变量

var 变量名 = 变量值; //声明变量，函数作用域

let 变量名 = 变量值; //声明变量，块级作用域（ps. 作用域内不能重复定义）

const 变量名 = 变量值; //声明常量 (ps. 不能修改)

解构赋值

let [变量1=默认值1，....，变量n=默认值n] = [值1，....，值n];

let {键1:变量1=默认值1，....，键n:变量n=默认值n} = {键1:值1，....，键n:值n}; 键和变量名一样，可简写

模板语法

通过反引号包住大段html

通过${变量名}包裹变量（可选）

箭头函数

(参数1,...,参数n) => {}

 

set（去重） 和 map

 

class类

 

json 格式

将 对象或数组格式的字符串转换为 原格式，语法：JSON.parse(字符串格式的数组或对象)

将 数组和对象转换为 字符串 语法：JSON.stringify（数组或对象）

this具体应用

A普通函数调用 this => window对象 function 函数名() 函数名()

B对象函数调用 this => 对象 var obj = {属性名:function(){}}

C事件处理函数调用 this => 事件源对象（你操作了谁）

D定时器调用 this => window对象

E箭头函数中调用 this => 父function中的this 父没有就是window对象

F bind/apply/call 你指定的

面向对象

是一种编程思想

面向过程：就是将一个项目功能，分成若干个小功能或者子功能，然后从前向后一步步实现，最终完成项目。

面向对象：就是将项目功能拆分成一个个小对象，每个小对象独立完成一个功能，可以通过“调用”多个对象实现项目功能（封装）。

特性

封装：功能封装，便于后期调用，维护

为了增加构造函数为成员的控制，会通过修饰符让一些数据不能被外部修改

继承：减少了代码的冗余，省略了很多重复代码

通过继承可以给构造函数添加成员，例如：创建好构造函数，去继承一个已经存在的对象

继承单个成员：构造函数.prototype.成员名称 = 值;

继承多个成员：构造函数.prototype = 对象;

多态：不同的子类根据具体状况可以实现不同的方法，光有父类定义的方法不够灵活

调用

var 变量名 = new Object();

变量名.键 = 值;

创建

function 函数名() {

创建对象

返回对象

推荐首字母大写 例如系统构造函数

通过this.键 = 值 添加成员

不需要返回对象 后期通过new 关键词创建即可

}

原型

就是js给函数提供的一个功能空间，来存放公共数据

好处：减少内存空间的浪费占用

怎么存：构造函数名.prototype.成员 = 值 或 构造函数名.prototype = 值

对象怎么读：对象.成员 （先去自己里面找，找不到原型对象中找也就是公共空间）

? 对象.__ proto__.成员

原型链

多个原型对象的集合

使用对象属性先用自己，找不到

.__proto__查找， 找不到

再去 .__proto__ 里面找

一直找到 Object.prototype 里面都没有，那么就会返回 undefiend

 

php简介

是什么：就是一个语言

能干吗：可以写动态网页

有点：和java比开发快，节约成本

运行环境

WAMP架构

LAMP架构

操作系统不同：window、linux

搭建运行环境

手动搭建：Apache、mysql、PHP

自动搭建（一键安装包）：phpstudy、wampserver

配置项目

<VirtualHost _default_:80>

ServerName 网址（去修改host文件 声明网址对应哪一台服务器）

DocumentRoot "项目存放目录"

<Directory "项目存放目录">

Options +Indexes +FollowSymLinks +ExecCGI

AllowOverride All

Order allow,deny

Allow from all

Require all granted

</Directory>

</VirtualHost>

是什么：就是一个语言

能干吗：可以写动态网页

有点：和java比开发快，节约成本

WEB相关概念

什么是服务器：没有显示器的主机，放在机房

IP地址

计算机一个唯一的标识，通过这个标识/编号可以相互访问

域名/网址：方便用户记忆，但最终还是走ip

DNS域名服务器：其实就是一个文件，记录网址对应哪一个ip地址

端口号：门牌号，计算机有很多软件，通过端口号可以明确交给哪一个处理

web服务器几乎都是：80

MySQL：3306

 

PHP语法

声明变量 $变量名 = 变量值;

判断 if(条件){}elseif (条件) {} .... else {}

循环while for do...while

循环foreach（$数据 as $键=>$值） {}

函数 function 函数名($形参1,...,$形参n) {}

 

MySQL数据库

作用：用来存放网站数据

navicat是什么：就是管理数据库的软件

navicat快捷键

关闭窗口 ctrl+w

设计表：ctrl + d

执行sql语句：ctrl +q

增：insert into 表名 (字段名....) values （值....）

删：delete from 表名 [where 条件]

改：update 表名 set 字段名=字段值,....字段名n=值n [where条件]

查：select * from 表名 [where条件]

PHP操作数据库

连接数据库：$pdo = new PDO(‘mysql:dbname=数据库名‘, ‘账号‘, ‘密码’)

增删改 $rs = $pdo->exec（SQL语句） // result rs 返回受影响的行数

查：

$pdoStatement = $pdo->query(SQL语句)

$data = $pdoStatement->fetch（PDO::FETCH_ASSOC）

$datas = $pdoStatement->fetchAll（PDO::FETCH_ASSOC）

输出语句

var_dump（数据或变量名）

echo ‘<pre>‘; print_r（数据或变量名）

echo 用来输出基本类型数据

基本类型输出用echo

复杂数据类型print_r或var_dump 打印数据类型用var_dump 不用数据类型print_r

echo ‘<pre>‘; print_r（数据或变量名）

echo 用来输出基本类型数据

基本类型输出用echo

复杂数据类型print_r或var_dump 打印数据类型用var_dump 不用数据类型print_r

接口

就是一个文件，可以是js/php/json等 只要返回json数据（就是js大括号对象）

1-数据角度：可以实现网站数据动态化，2-功能角 笑话接口等

1-自己写，2-去百度接口平台

 

cookie

取：document.cookie

存：

document.cookie = ‘键1=值1； expires=时间’

....

document.cookie = ‘键n=值n； expires=时间’

var d = new Date()

d.setTime( d.getTime() + 3600*1000*24*天数)；

d.toUTCString()

h5存储

localStorage.setItem(键，值)

localStorage.getItem/removeItem(键)

sessionStorage.setItem(键，值)

sessionStorage.getItem/removeItem(键)

都是存储网站数据，从而减轻后端压力，加快网站访问速度。

区别

1性能2存储空间3存储时间

 

http

什么是http：就是一个协议/规则

作用：客户端如何请求服务端，服务端如何响应给客户端

请求（request）

响应（response）

请求：请求行、请求头、请求体

响应：响应行、响应头、响应体

 

AJAX

异步请求（ajax）：允许客户端和服务端 无刷新通信的技术。

特点：不用刷新页面

好处：减轻服务器压力，用户体验度更好

// 步骤1：创建ajax对象：

var xhr = new XMLHttpRequest();

 

// 步骤2：时时监听ajax状态

xhr.onreadystatechange = fn

 

// 步骤3：创建HTTP请求头

xhr.open（请求类型POST/GET，请求地址URL，[异步true或者同步false]）

 

// 注：POST请求必须设置请求编码，不然后端无法解析获取数据

xhr.setRequestHeader( "content-type", "application/x-www-form-urlencoded" );

 

// 步骤4：发送请求

xhr.send（POST请求则为POST请求数据/GET请求则null）

function fn() {

//只要ajax状态改变就打印

if (xhr.readyState == 4 && xhr.status == 200) {

alert(xhr.responseText);

}

}

比如走http协议，也就是通过web服务器来访问

get请求 参数在地址栏 格式 ：xxx.后缀?键1=值1&...&键n=值n

post请求 参数 send(键1=值1&...&键n=值n)

post请求 xhr.setRequestHeader 必须在 xhr.open后面

 

 

同步和异步概念：

同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任务

异步: 不受当前任务的影响，两件事情同时进行，做一件事情时，不影响另一件事情的进行。

编程中：异步程序代码执行时不会阻塞其它程序代码执行,从而提升整体执行效率。