前端三剑客——javascript-BOM-DOM-http协议-异步
大纲：
1.BOM（浏览器对象模型）
window对象
location对象
本地存储
2.DOM（文档对象模型）
元素操作（直接获取/间接获取）
事件操作
--静态绑定事件
--动态绑定事件（事件监听器）
3.js异步
Promise
Async/await
4.HTTP协议
URL地址解释
HTTP协议概述
常见HTTP请求方法
请求与响应流程
请求与响应的结构
常见的响应状态码
BOM（浏览器对象模型）
window 当前网页创建的超全局对象
//window
//浏览器窗口显示内容区域的高宽
console.log(innerWidth);
console.log(innerHeight);
//浏览器窗口的整体高宽
console.log(outerHeight);
console.log(outerHeight);location 地址栏对象
//location 地址栏对象
/**
* location.assign(url) : 跳转
* location.reload() ： 刷新
*///location 地址栏对象
/**
* location.assign(url) : 跳转
* location.reload() ： 刷新
*/
//location.assign(url) 跳转到指定url地址
location.assign('https://www.cnblogs.com/guohan222/p/19185633');
//location.reload() 刷新
setInterval(function () {
location.reload();
},2000)本地存储
//本地存储
/**
* 根据 域名/IP:端口 不同对数据进行分开存储在浏览器中 同一域名不同端口存储的数据也不同
* localStorage: 永久存储
* sessionStorage: 会话存储(关闭浏览器后数据清除)
*
*
* localStorage和sessionStorage方法一样
* 增:
* localStorage.setItem(‘属性’，‘值’)
* localStorage.属性 = 值
*
* 删:
* localStorage.removeItem('属性') 指定删除
* localStorage.clear() 全部删除
*
* 改:
* localStorage,属性 = 值
*
* 查:
* localStorage.getItem('属性')
* localStorage.属性
*///本地存储
/**
* 根据 域名/IP:端口 不同对数据进行分开存储在浏览器中 同一域名不同端口存储的数据也不同
* localStorage: 永久存储
* sessionStorage: 会话存储(关闭浏览器后数据清除)
*/
//localStorage 永久存储
//添加数据到本地存储中
localStorage.setItem('name', 'guohan');
localStorage.age = 22;
//在本地存储中删除数据
//指定删除
localStorage.removeItem('name');
//全部删除
localStorage.clear();
//修改本地存储中的数据
localStorage.name = 'gh';
//获取本地存储中的数据
console.log(localStorage.getItem('name'));
console.log(localStorage.age);
DOM（文档对象模型）
元素操作（直接获取/间接获取）
//DOM文档对象模型
/**
* 元素的获取
* 直接获取
* 通过css样式选择器获取单一元素: document.querySelector('选择器')
* 通过css样式选择器获取多个元素（数组）: document.querySelectorAll('选择器')
* 通过id属性值获取单一元素: document.getElementById('id属性值')
* 通过标签获取多个元素（数组）: document.getElementsTagName('标签')
* 通过class属性值获取多个元素（数组）: document.getElementsByClassName('class属性值')
*
* 间接获取
* 获取此元素的子元素: .children
* 获取此元素的第一个/最后一个子元素: .firstElementChild / .lastElementChild
* 获取子元素的父级元素: .parentElement
* 获取元素的下一个/上一个兄弟元素: .nextElementSibling / .previousElementSibling
*
*/方法演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器*/
.f1 {
background-color: #0a53be;
}
/*id选择器*/
#f2 {
background-color: #3f51b5;
}
</style>
</head>
<body>
<ul>
<li class="f1">1</li>
<li id="f2"><a href="">点我</a></li>
<li>3</li>
<li>4</li>
<li class="f1">5</li>
</ul>
<script>
//直接获取
//获取单一元素
//通过css样式选择器获取
var l1 = document.querySelector('.f1');
//后代选择器
var l2 = document.querySelector('#f2 a');
console.log(l1);
console.log(l2);
//修改元素样式
l1.style.backgroundColor = 'red';
//通过id获取
var l21 = document.getElementById('f2');
console.log(l21);
//直接获取body元素
var body = document.body
console.log(body);
//获取多个元素(以数组形式展示)
//通过css样式选择器获取
var set = document.querySelectorAll('.f1')
console.log(set)
//通过元素的标签类型获取
var tag = document.getElementsByTagName('li')[4]
console.log(tag)
//通过元素的class属性值获取
var cls = document.getElementsByClassName('f1')
console.log(cls)
//间接获取
//获取ul标签下的子元素
var ul = document.getElementsByTagName('ul')[0];
console.log(ul.children);
//获取ul标签下的第一个子元素
var firstLi = ul.firstElementChild
console.log(firstLi);
//获取ul标签下的最后一个子元素
var lastLi = ul.lastElementChild
console.log(lastLi);
//最后一个子元素的上一个兄弟元素
var siblingLi = lastLi.previousElementSibling;
console.log(siblingLi);
//第一个子元素的下一个兄弟元素
var nextLi = firstLi.nextElementSibling;
console.log(nextLi);
//li标签的父级元素
var parent = nextLi.parentElement;
console.log(parent);
</script>
</body>
</html>事件操作
（给HTML元素静态的绑定事件）
基于本地存储实现任务列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.todolist {
width: 750px;
margin: 40px auto;
box-shadow: 5px 5px 20px #aaa;
}
.todolist .add {
text-align: center;
padding: 20px 0;
}
.todolist .playlist {
width: 500px;
margin: 0 auto;
}
.playlist span {
float: left;
}
.playlist button {
height: 23.33px;
float: right;
margin-left: 10px;
}
input[name="content"] {
height: 20px;
width: 250px;
}
</style>
</head>
<body>
<div class="todolist">
<div class="add">
<input type="text" name="content" value="">
<button class="btn" style="height: 26px">添加</button>
</div>
<div class="playlist">
<ol class="tell"></ol>
<div style="clear:both"></div>
</div>
</div>
<script>
var ipt = document.querySelector('input[name="content"]');
var btn = document.querySelector('.btn');
var tell = document.querySelector('.tell');
var data = [];
//基于本地存储获取之前数据
if (localStorage.work) {
data = JSON.parse(localStorage.work);
show();
}
//展示数据
function show() {
//页面展示
let tellContent = "";
for (let i = 0; i < data.length; i++) {
content = data[i];
tellContent += `
<li>
<span>${content}</span>
<button onclick="delet(${i})">删除</button>
<button onclick="displacement(['↓',${i}])">↓</button>
<button onclick="displacement(['↑',${i}])">↑</button>
</li>`;
}
tell.innerHTML = tellContent;
//本地存储
localStorage.setItem('work', JSON.stringify(data));
}
//添加数据
btn.onclick = () => {
data.push(ipt.value);
show();
ipt.value = "";
}
//删除数据
function delet(index) {
data.splice(index, 1);
show();
}
//移动任务
function displacement([param, index]) {
if (param === "↑") {
if (index === 0) {
return;
}
let num = data[index - 1];
data[index - 1] = data[index];
data[index] = num;
show();
} else if (param === "↓") {
if (index === data.length - 1) {
return;
}
let num = data[index + 1];
data[index + 1] = data[index];
data[index] = num;
show();
}
}
</script>
</body>
</html>（给HTML元素动态的绑定事件）事件监听器 .
//事件监听器 .addEventListener()
/**
* 给DOM元素动态绑定事件，响应交互的方法
* 格式
* Element.addEventListener('eventType',handlerFunction(e){})
*
* eventType: 事件类型如click（简而言之代替了onclick）
* handlerFunction: 事件处理函数
* e: 即event事件
*
* 相较于直接写静态事件绑定好处
* 1.js代码不存在于HTML标签里
* 2.同一个按钮添加多个事件（比如点击事件和键盘事件）
* 3.可临时禁用某个按钮功能 Element.removeEventListener('eventType',handlerFunction(e){})
*
*/
//案例: Form表单提交
/**
* 表单提交围绕三大场景
* 1.表单提交 form.submit()
* 2.重置 form.reset()
* 3.事件监听 form.addEventListener('eventType',handlerFunction(e){})
*
* e.preventDefault(): 阻止浏览器对表单的自动提交防止跳过非法检测
* e.target: 指向触发此事件的HTML中的元素
*/基于本地存储实现任务列表优化版.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.todolist {
width: 750px;
margin: 40px auto;
box-shadow: 5px 5px 20px #aaa;
}
.todolist .add {
text-align: center;
padding: 20px 0;
}
.todolist .playlist {
width: 500px;
margin: 0 auto;
}
.playlist span {
float: left;
}
.playlist button {
height: 23.33px;
float: right;
margin-left: 10px;
}
input[name="content"] {
height: 20px;
width: 250px;
}
</style>
</head>
<body>
<div class="todolist">
<div class="add">
<input type="text" name="content" value="">
<button class="btn" style="height: 26px">添加</button>
</div>
<div class="playlist">
<ol class="tell"></ol>
<div style="clear:both"></div>
</div>
</div>
<script>
var ipt = document.querySelector('input[name="content"]');
var btn = document.querySelector('.btn');
var tell = document.querySelector('.tell');
var data = [];
//基于本地存储获取之前数据
if (localStorage.work) {
data = JSON.parse(localStorage.work);
show();
}
//展示数据（优化）
function show() {
//页面展示
tell.innerHTML = '';
data.forEach((content, index) => {
//创建li标签
const li = document.createElement("li");
//创建span标签并填充数据,添加到li标签里
const span = document.createElement("span");
span.innerText = content;
li.appendChild(span);
//创建删除按钮并板顶一个事件监听器取代之前的onclick,添加到li标签里
const deleterBtn = document.createElement("button");
deleterBtn.innerText = "删除";
deleterBtn.addEventListener("click", function () {
delet(index);
})
li.appendChild(deleterBtn);
//创建上移按钮并板顶一个事件监听器取代之前的onclick,添加到li标签里
const upBtn = document.createElement("button");
upBtn.innerText = "↑";
upBtn.addEventListener("click", function () {
displacement([upBtn.innerText, index]);
})
li.appendChild(upBtn);
//创建下移按钮并板顶一个事件监听器取代之前的onclick,添加到li标签里
const downBtn = document.createElement("button");
downBtn.innerText = "↓";
downBtn.addEventListener("click", function () {
displacement([upBtn.innerText, index]);
})
li.appendChild(downBtn);
tell.appendChild(li);
})
//本地存储
localStorage.setItem('work', JSON.stringify(data));
}
//添加数据
btn.addEventListener("click", () => {
data.push(ipt.value);
show();
ipt.value = "";
});
//删除数据
function delet(index) {
data.splice(index, 1);
show();
}
//移动任务
function displacement([param, index]) {
if (param === "↑") {
if (index === 0) {
return;
}
let num = data[index - 1];
data[index - 1] = data[index];
data[index] = num;
show();
} else if (param === "↓") {
if (index === data.length - 1) {
return;
}
let num = data[index + 1];
data[index + 1] = data[index];
data[index] = num;
show();
}
}
</script>
</body>
</html>
js异步操作
Promise Javascript中用于处理异步操作的操作对象
//js异步解决方案1：Promise : 代表异步操作最终的结果以及结果值的对象，简单来说是js中用于处理异步操作的对象
/**
* promise三种状态
* pending
* fulfilled
* rejected
*
* 异步格式：
* var promise = new Promise(function(resolve,reject){
* if(异步操作成功){
* resolve(value);
* }else{
* reject(error);
* }
* })
*
* //.then()和.catch() : promise状态发生改变触发
* promise.then(res=>console.log(res)).catch(err=>console.log(err));
*
* //Promise.all([]) :
* 将多个Promise实例包装成一个Promise实例
* 所有都成功时:返回一个结果数组
* 只要有一个失败时:返回最先被reject状态的值
*
* //Promise.race([]):
* 将多个Promise实例包装成一个Promise实例
* 不管状态是否是成功还是失败,哪个结果获得的快就返回哪个结果
* @type {Promise<unknown>}
*///基本格式与promise。then()和，catch()
var promise = new Promise(function(resolve,reject){
// resolve('ab');
reject('aa');
});
//promise状态发生改变就会触发
promise.then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
//Promise.all([])
let promise1 = new Promise(function (resolve, reject) {
resolve('success1');
})
let promise2 = new Promise(function (resolve, reject) {
resolve('success2');
})
let promise3 = new Promise(function (resolve, reject) {
reject('bad');
})
Promise.all([promise1, promise2]).then(res=>console.log(res)).catch(error=>console.error) //(2) ['success1', 'success2']
Promise.all([promise1, promise2,promise3]).then(res=>console.log(res)).catch(err=>console.log(err)); //bad
//Promise.race([])
let promise1 = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('success1');
}, 1000);
})
let promise2 = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('success2');
}, 2000);
})
let promise3 = new Promise(function (resolve, reject) {
setTimeout(function () {
reject('success3');
}, 200);
})
Promise.race([promise1, promise2]).then(res => console.log(res)).catch(err => console.log(err));
Promise.race([promise1,promise2, promise3]).then(res => console.log(res)).catch(err => console.log(err));
//success3
//success1Async/await Javascript中用于处理异步操作的操作对象 本质上还是Promise await相当于.then()
//js异步解决方案2： Async/await ：本质上还是Promise
/**
* 格式：
* async function f1(){
* return ???;
* 等同于:
* // return Promise.resolve('abc');
* // return new Promise((resolve,reject)=>resolve('abc'))
* }
*
*
* // async 函数的核心作用就是自动将函数返回值包装成 Promise—— 如果函数本身已经返回 Promise，再加 async 就是 “多此一举”，完全没必要。
* 例如:
* function f1(){
* return new Promise((resolve,reject)=>{
* setTimeout(()=>{resolve('111')},2000)
* })
* }
*
*
* //遇到await会阻塞后面代码等执行完成后再执行后面代码
* 如果结果状态是reject则后面代码不执行 得加try{}catch(e){}才能接收到reject状态并执行catch里面的代码
*
*
* @returns {Promise<unknown>}
*///初识async
async function f1(){
return 'abc';
// 本质上是自动包装成Promise对象:
// async 函数的核心作用就是自动将函数返回值包装成 Promise—— 如果函数本身已经返回 Promise，再加 async 就是 “多此一举”，完全没必要。
// return Promise.resolve('abc');
// return new Promise((resolve,reject)=>{resolve('abc')})
}
console.log(f1()); // Promise{<fulfilled>: 'abc'}
//与await结合 且结果状态是resolve
function f1(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{resolve('111')},2000)
})
}
async function f2(){
return '222'
}
async function f3(){
let a1 = await f1();
let a2 = await f2();
let a3 = '333';
console.log(a1);
console.log(a2);
console.log(a3);
}
f3()
//与await结合 且结果状态是reject则后面代码不执行 得加try{}catch(e){}才能接收到reject状态并执行catch里面的代码
function f1() {
return new Promise((resolve,reject) => {
setTimeout(() => {
reject('111')
}, 2000)
})
}
async function f2() {
return '222'
}
async function f3() {
try {
let a1 = await f1();
let a2 = await f2();
let a3 = '333';
console.log(a1);
console.log(a2);
console.log(a3);
} catch (e) {
console.log(e);
}
}
f3()
HTTP协议
URL地址解释
HTTP协议概述
常见HTTP请求方法
请求与响应流程
请求与响应的结构
常见的响应状态码
浙公网安备 33010602011771号