僻嘶 发表于 2025-11-10 03:50:20

前端三剑客——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>
   
</head>
<body>
<ul>
    <li >1</li>
    <li id="f2">点我</li>
    <li>3</li>
    <li>4</li>
    <li >5</li>
</ul>

</body>
</html>  事件操作
基于本地存储实现任务列表<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   
</head>
<body>

   
      <input type="text" name="content" value="">
      <button>添加</button>
   
   
      <ol ></ol>
      
   



</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().then(res=>console.log(res)).catch(error=>console.error)                   //(2) ['success1', 'success2']

Promise.all().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().then(res => console.log(res)).catch(err => console.log(err));
Promise.race().then(res => console.log(res)).catch(err => console.log(err));

//success3
//success1  Async/await  Javascript中用于处理异步操作的操作对象    本质上还是Promise
//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请求方法

  请求与响应流程

  常见的响应状态码



 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

吉娅寿 发表于 2025-11-27 01:12:02

分享、互助 让互联网精神温暖你我

蔬陶 发表于 2025-12-9 16:16:57

感谢分享，学习下。

郜庄静 发表于 2025-12-17 16:39:54

不错，里面软件多更新就更好了

少屠 发表于 2025-12-17 20:42:33

喜欢鼓捣这些软件，现在用得少，谢谢分享！

官厌 发表于 2025-12-21 21:25:40

鼓励转贴优秀软件安全工具和文档！

孜尊 发表于 2026-1-17 02:32:32

新版吗？好像是停更了吧。

瞧厨 发表于 2026-1-18 11:20:08

前排留名，哈哈哈

眩疝诺 发表于 2026-1-19 12:15:46

收藏一下   不知道什么时候能用到

喳谍 发表于 2026-1-19 22:37:43

东西不错很实用谢谢分享

秦晓曼 发表于 2026-1-20 15:41:09

用心讨论，共获提升！

董绣梓 发表于 2026-1-25 07:34:11

鼓励转贴优秀软件安全工具和文档！

涅牵 发表于 2026-1-29 07:48:54

前排留名，哈哈哈

忆雏闲 发表于 2026-2-2 03:54:08

收藏一下   不知道什么时候能用到

劳暄美 发表于 2026-2-3 07:10:04

喜欢鼓捣这些软件，现在用得少，谢谢分享！

艾曼语 发表于 2026-2-7 22:18:57

谢谢分享，试用一下

费卿月 发表于 2026-2-9 01:32:26

用心讨论，共获提升！

百杲憔 发表于 2026-2-9 03:19:04

前排留名，哈哈哈

姥恫 发表于 2026-2-9 05:37:23

这个有用。

滥眩 发表于 2026-2-9 05:39:09

懂技术并乐意极积无私分享的人越来越少。珍惜
页: [1] 2
查看完整版本: 前端三剑客——javascript-BOM-DOM-http协议-异步