事件对象:
就是用来存储事件相关的信息
事件对象存储信息有:
事件的类别,如: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后面
同步和异步概念:
同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任务
异步: 不受当前任务的影响,两件事情同时进行,做一件事情时,不影响另一件事情的进行。
编程中:异步程序代码执行时不会阻塞其它程序代码执行,从而提升整体执行效率。