文章目录
- 108、初识正则表达式
- 109、元字符-基本元字符
- 110、元字符-边界符
- 111、元字符-限定符
- 112、元字符-特殊符号
- 113、正则表达式-exec捕获
- 114、正则表达式的两大特性
- 115、正则与字符串方法
- 116、案例-密码强度验证
- 117、this指向
- 118、改变this指向
- 119、ES6定义变量
- 120、案例-块级作用域
- 121、ES6的箭头函数
- 122、ES6的解构赋值
- 123、ES6的对象简写
- 124、ES6展开运算符
- 125、ES6模块化语法
- 126、初识面向对象
- 127、创建对象的方式
- 128、构造函数注意问题
- 129、面向对象的原型
- 130、选项卡-面向对象
- 131、ES6-class
- 132、面向对象继承
- 133、继承案例
- 134、ES6继承
- 135、初识前后端交互
- 136、ajax(async javascript and xml)
- 139-140、请求方式
- 141-142、封装
- 144、前后端交互案例
- 144、回调地狱
- 145、promise基础语法
- 146、promise封装ajax
- 148、async和await语法
- 150-151、fetch
- 152-154、**大案例**
- 155、cookie
- 156-158、jsonp
- 159、再谈函数
- 160、闭包
- 161、闭包的应用
108、初识正则表达式
mytext.onblur = function()
onblur 失去焦点执行一次
检测mytext里面有没有包含abc
109、元字符-基本元字符
\d 一位数字(0-9)
\D 一位非数字
\s 一位空白 (空格 缩进 换行)
\S 一位非空白
\w 字母、数字、下划线
\W 非字母、数字、下划线
. 任意内容(换行不是)
.\转义字符
110、元字符-边界符
^ 开头
& 结尾
var reg = /^a\dc&/
111、元字符-限定符
- 0~多次
- 1~多次(适用于exec测试)
? 0~1次
{n} 指定次数
{n,m} 大于等于n小于等于m次
112、元字符-特殊符号
| 或
() 合起一个整体
[ ] 代表一个,只要包含一个就true
- 一个区间,a-z,A-Z,0-9
[ ^ abc ] 取反,不是abc的就是true
113、正则表达式-exec捕获
/g 标识符,使exec可以捕获多次
/i 标识符,忽略大小写
114、正则表达式的两大特性
懒惰 解决方法:使用标识符g
贪婪 解决方法:用?
115、正则与字符串方法
replace search march
search无法用g搜索全局,若搜索不到则输出-1
116、案例-密码强度验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
display: flex;
justify-content: center;
}
.da{
border: 2px solid black;
width: 400px;
height: 100px;
}
.xiao{
width: 360px;
height: 40px;
}
.box{
width: 400px;
display: flex;
justify-content: center;
}
.level{
display: flex;
justify-content: space-between;
}
.small{
width: 50px;
height: 20px;
border: 2px solid black;
}
.active{
background-color: red;
}
</style>
</head>
<body>
<div class="da">
<div class="box"><input type="text" class="xiao"></div>
<div class="level">
<div class="ruo small">弱</div>
<div class="zhong small">中</div>
<div class="qiang small">强</div>
</div>
</div>
<script>
var oinput=document.querySelector('input')
var osmall=document.querySelectorAll(".small")
var reg1=/\d/
var reg2=/[a-z]/i
var reg3=/[!@#$%^&*()]/
oinput.oninput=function(){
console.log(this.value)
var kong = 0
if(reg1.test(this.value)) kong++
if(reg2.test(this.value)) kong++
if(reg3.test(this.value)) kong++
for(var i=0;i<osmall.length;i++){
osmall[i].classList.remove("active")
if(i<kong){
osmall[i].classList.add("active")
}
}
}
</script>
</body>
</html>
117、this指向
谁调用我我指向谁
118、改变this指向
call 执行函数,并改变this执行为函数的第一个参数,支持多个参数
aplly 执行函数,并改变this执行为函数的第一个参数,支持两个参数,第二个参数是一个数组
bind 执行函数,并改变this执行为函数的第一个参数,不会自动执行函数
119、ES6定义变量
let const var
120、案例-块级作用域
121、ES6的箭头函数
()在只有一个变量的时候可以省略
{ } 在只有一句代码或只有返回值的时候可以省略
没有arguments
箭头函数没有this
122、ES6的解构赋值
123、ES6的对象简写
124、ES6展开运算符
…复制
125、ES6模块化语法
126、初识面向对象
127、创建对象的方式
字面量 内置构造函数
128、构造函数注意问题
1、首字母大写
2、构造函数不写return
129、面向对象的原型
用ele指box下的小class,而非在document大层面上寻找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<h1></h1>
<ul></ul>
</div>
<script>
var data = {
title: '课程',
list: ['数学', '语文']
}
function CreateList(select, data) {
this.ele = document.querySelector(select)
this.title = data.title
this.list = data.list
this.render = function () {
var h1 = this.ele.querySelector('h1')
var ul = this.ele.querySelector('ul')
h1.innerHTML = this.title
ul.innerHTML = this.list.map(item => `<li>${item}</li>`).join('')
}
}
var obj1 = new CreateList('.box', data)
obj1.render()
</script>
</body>
</html>
130、选项卡-面向对象
131、ES6-class
132、面向对象继承
133、继承案例
134、ES6继承
function Person(name,age){
this.name = name
this.age = age
}
Person.prototype.say = function(){
console.log("hello")
}
function Student(name,age,classroom){
Person.call(this,name,age)
this.classroom = classroom
}
Student.prototype = new Person()
var obj = new Student("kerwin",100,"1班")
135、初识前后端交互
136、ajax(async javascript and xml)
所拥有的优点:
1.不需要插件支持原生js就可使用
2.用户体验好,无需刷新页面就可以更新数据
3.减轻服务端和带宽的负担
缺点
搜索引擎容易搜索不到
ajax状态码:
readyState0:表示未初始化完成,也就是open方法还没有执行
readyState1:表示配置信息已经完成,也就是执行完open之后
readyState2:表示send方法已经执行完成
readyState3:表示正在解析响应内容
readyState==4:表示响应内容已经解析完毕,可以在客户端使用了
# 137、Ajax案例
```js
<script>
ajax({
url:"http://localhost:300/users",
method:"GET",
async:true
data:{
username:"kerwin",
password:"123"
}
headers:{}
success:function(res){
console.loh(res)
}
error:function(err){
console.log(err)
}
})
</script>
139-140、请求方式
get 偏向获取数据
post 偏向提交数据
put 偏向更新
delete偏向删除信息
patch偏向部分修改
141-142、封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//请求服务端
//1、创建XHR(对象) new XMLHttpRequest()
var xhr = new XMLHttpRequest()
//2、配置 open(请求方式,请求地址,是否异步)
//localhost本机域名 127.0.0.1 本机ip
xhr.open('GET','ip地址')
//3、拨出 send
xhr.send()
//4、接受数据,注册一个事件
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
console.log("数据解析完成",xhr.responseText/*拿内容*/)
}
}
</script>
</body>
</html>
144、前后端交互案例
准备json文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" name="" id="mytext">
<button id="myadd">add</button>
<ul class="list"></ul>
<script type="module">
import ajax from './util.js'
class TodoList{
constructor(select){
this.list = document.querySelector(select)
this.listdata = []
this.init()
}
init(){
this.getList()
}
getList(){
ajax({
url:'',
success:function(res){
this.listdata=res
},
Error:function(){
}
})
}
}
var obj = new TodoList('.list')
</script>
</body>
</html>
144、回调地狱
<script>
//tiechui已经登录
ajax({
url:"http://localhost3000/news",
data:{
author:"tiechui"
},
success:function(res){
console.log(res[0])
ajax({
url:"http://loclhost:3000/comments",
data:{
},
success:function(res){//二层的回调地狱,代码维护性不好
newsId:res[0].id
}
})
}
})
</script>
145、promise基础语法
<script>
var q = new Promise(function(resolve,reject){
//放异步
settimeout(()=>{
//成功兑现承诺
resolve()
//失败拒绝承诺
//reject()
},2000)
})
//pending 执行中
//fulfilled 兑现承诺
//reject 拒绝承诺
//q是promise对象
q.then(function(){
//兑现承诺,这个函数被执行
}).catch(function(){
//拒绝承诺,这个函数被执行
})
146、promise封装ajax
<script>
function pajax(){
var q = new Promise(function(resolve,reject){
ajax({
success:function(res){、
resolve(res)
},
error:function(err){
reject(err)
}
})
})
return q
}
</script>
148、async和await语法
asnyc function fn(){
const res = new Promise(function(resolve,reject){
ajax({
url:'',
success(res){
resolve(res)
}
})
})
}
150-151、fetch
152-154、大案例
155、cookie
156-158、jsonp
sonp是json的一种“使用方式”,可以让王爷从别的域名(网站)那获取资料,即跨域读取数据
同源策略:同域名 同端口号 同协议
不符合同源策略,浏览器为了安全,会阻止请求
解决:
1、cors 有后端设置,Access-Control-Allow-Origin:*
2、jsonp:前后端必须协作
const script = document.creatElement('script')
script.src='./kerwin.txt'
document.body.appendChild(script)
159、再谈函数
160、闭包
函数内部返沪i一个函数,被外界所引用
这个内部函数就不会被销毁回收
内部函数所用到的外部函数的变量也不会被销
毁
优点:
让临时变量永驻内存
缺点
内存泄漏(解决 func=null)
<script>
function outer(){
var name="kerwin"
return function(){
return name+"1111111"
}
}
var func=outer()
console.log(func())
</script>
161、闭包的应用
1.记住列表的索引
<script>
var oli = document.querySelectorAll('li')
for(var i=0;i<oli.length;i++){
oli[i].onclick=(function(index){
return function(){
console.log(11111,index)
}
})(i)//匿名自执行函数
}
</script>
2.jsonp案例优化–函数防抖