学JavaScript，我的一些笔记

知识点：

对象

对象的概述

对象其实是一组“键值对（key-value）”的集合，是一种无序的复合数据的集合

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-clpmC9JU-1657526592054)(C:\Users\han\AppData\Roaming\Typora\typora-user-images\image-20220711123510919.png)]

• 大括号：定义一个对象
• person：定义的对象被赋值给person，则person将指向这个对象
• name：‘henry’:键值对（key:value）键值之间用：隔开；
• age：也是一对键值对
• 一个对象中可以包含多个键值对，没给键值对之间要用，隔开，最后一个键值对 对，没有要求.

方法：对象的每一个键名又称为“属性”，他的键值可以使任何数据类型，当他是函数的时候，我们把这个属性称为“方法”，它可以像函数那样调用

let person = {
  name: 'henry',
  age: 18,
  run: function() {
    console.log('running');
  }
}

person.run();

DOM：文档对象模型，可以将web页面与脚本或编程语言连接起来

访问DOM选择器查询方法

自定义对象的属性操作

遍历对象的属性

用for……in或者借助object.keys 来实现

上面例子的，用for……in遍历对象的各个属性

let person = {
  name: 'henry',
  age: 18,
}

for (let key in person) {
  console.log('键名：' + key + '；键值：' + person[key]);
}

用object.keys遍历属性

由于object.keys方法返回的是一个由对象中所有的属性名组成的e数组，我们可以借助这一点去遍历

let person = {
  name: 'henry',
  age: 18,
}

let keys = Object.keys(person);

for (let i = 0; i < keys.length; i++) {
  console.log('键名：' + keys[i] + '；键值：' + person[keys[i]]);
}

对象的继承

Object是JavaScript提供的基本对象，JavaScript的所有的其他对象都继承自object对象，即那些对象都是object的实例，keys是object对象的一个静态方法

JSON

JSON 是一种轻量级的文本数据交换格式，他用JavaScript的语法书写，但独立于这种语言，可以认为是编程语言间用于传递数据而约定的数据格式

JSON 格式和JavaScript对象的转换

1. JSON.parse():JSON格式=>javascript对象

   // 一个 JSON 字符串
   const jsonStr =
     '{"sites":[{"name":"Runoob", "url":"www.runoob.com"},{"name":"Google", "url":"www.google.com"},{"name":"Taobao", "url":"www.taobao.com"}]}';
   
   // 转成 JavaScript 对象
   const obj = JSON.parse(jsonStr);
   

   2.JSON.stringify(): jsvascript对象=>JSON格式

   现在是把上面得到的object转换成JSON 格式

   const jsonStr2 = JSON.stringify(obj)；
   

   MAP和Object很相似，都可以保存键值对，但是他们仍有些重要的区别

   1. 一个object的键通常是字符串，但一个Map的键可以是任意值，包括函数、对象、基本类型、因此MAP会方便很多

   2. MAP中的键值是有序的，而添加到对象中的键则不是

   3. MAP的键值对个数可以直接获取，object则要借助object.keys（）等计算获取

   4. MAP可以直接进行迭代，object则要借助object.keys()等

   5. map不存在键名和原型键名冲突问题，可以直接覆盖，object则不行

      其实从某种程度上说，map比object更灵活方便，但是考虑到map不能直接转成JSON 格式进行通讯，所以我们可以把MAP作为object的补充来使用

内置对象

1.Math对象

Math也是JavaScript的一个原生对象，他能提供各种数学功能，该对象不是构造函数，不能生成实例，所有的属性和方法都必须在math对象上使用

math对象的静态属性，可以提供一些数字常数

2.storage对象：

storage接口用于脚本在浏览器保存数据，两个对象部署了这个接口，window.sessionStorage和Window.localStorage

sessionStorage保存的数据用于浏览器的一次性对话，当会话结束（通常是窗口关闭）数据被清空，localStorage保存的数据会长期存在，下一次访问这个网站的时候，网页可以直接读取以前保存的数据。

读取数据：getItem

window.localStorage.getItem('myLocalStorage');

清除缓存

window.localStorage.clear();

DOM：

DOM操作部分

1. 创建标签节点：document.createElement(tagName)这个方法用于创建一个由标签名tagName指定的HTML元素，也就是上节课说的元素（标签）节点。
   如果想要创建一个div的话，那么可以使用

const div = document.createElement(‘div’);

2. document.createTextNode(string)
   如果想继续在div内部添加纯文本内容，可以继续使用创建本文本的方法，

const div = document.createElement(‘div’);
const txt = document.createTextNode(‘优课达-学的比别人好一点’);

3. 添加新节点:
   appendChild(newNode) 我们可以在该节点中插入儿子节点
   inserBefore（newNode，referceNode）是在某个儿子节点之前添加
   newNode 表示新的节点，referceNode表示目标节点，也就是新节点插入到目标节点之前
4. setAttribut是可以设置样式的（除了style之外，所有的HTML属性都是可以设置的）
5. classList能获取DOM上的所有的类，他还给我们添加了基础操作的增删改查方法
6. outerHTML：整个DOM 的HTML代码
7. innerHTML DOM 内部的HTML代码
8. innertext DOM内部纯文本内容
9. 鼠标经过和鼠标移开的状态变化 mouseover：鼠标悬停，mouseout：鼠标移开
   示例：

const logo = document.querySelector('.logo');
// 鼠标放置事件
logo.addEventListener('mouseover', function() {
  // 处理放置事件
  this.src = './images/2.png';
});

// 鼠标离开事件
logo.addEventListener('mouseout', function() {
  // 处理离开事件
  this.src = './images/1.png';
});

DOM事件

我对他的理解就是：触发-响应机制，就是可以发生一些特定的交互，之所以方便是因为，我们可以一个或者多个事件处理程序，

鼠标事件：

click：点击事件

dblclick：双击事件

点击事件：

举个栗子：打印一下DOM事件对象，这个事件对象会通过回调函数参数传递给我们

const h = document.querySelector("h1");
h.addEventListener("click", function (e) {
  console.log(e);
});

这个h通过选择器h1（标签选择器）获取了dom元素，，然后给h添加一个点击事件，点击的效果就是输出这个事件

绑定事件：addEventLIstener(eventName,callback)绑定eventName事件
这个写法，比起

有利于文件的分离
比起dom.onclick = function () {}; 只能添加一个点击事件，这个可以多个

具体的一些事件：

mousedown：在元素上按下鼠标按钮

mouseup:在元素上释放任意鼠标按钮

input：输入框事件，没输入一次，就触发一次，输入的内容有变化，就会触发这个事件

键盘事件

keydown：键盘按下事件

keyup:键盘释放事件

视图事件：

scroll：文档滚动事件

resize:窗口放缩事件

资源： load：资源加载成功的事件

移动事件：

mousemove:鼠标移动事件

mouseenter：指针移动到有事件监听的元素上

mouseleave：指针移除元素范围外

mouseover：指针移动到有事件监听的元素或者他的子元素上

mouseout：指针移除元素，或者他的子元素上

提示：

1.圣诞老人往右移动，就是修改style.left

2.圣诞老人说的话 透明度变成不透明的，就是修改style.opacity

const santa = document.querySelector('.santa.santa--walk');
const speak = santa.querySelector('.hukidashi.hukidashi--speak');

santa.addEventListener('mouseover', function() {
  santa.style.left = '100px';//圣诞老人全部出来
  speak.style.opacity = 1;
});

santa.addEventListener('mouseout', function() {
  santa.style.left = '30px';//圣诞老人出来一半
  speak.style.opacity = 0;
});

表单元素事件：

这个能让我们捕捉表单元素的状态变化和内容值的修改

例如：焦点事件：获取焦点和失去焦点两个事件

const nick = document.querySelector('input.nick');
nick.addEventListener('focus', function() {
  console.log('获取焦点');
});

nick.addEventListener('blur', function() {
  console.log('失去焦点');
});

会发现点击输入框就会打印“获取焦点”，点击其他的区域，就会显示“失去焦点”

可以用于手机号码的校验，要是11位数，就可以，不是11位数的话，会显示手机号码的格式不对

步骤：

1.监听mobile-input 和input事件

2.在监听回调里面判断input.value的值，如果不是空或者11位就会显示错误信息

3.错误信息放置在

,提示手机号码格式错误

对于元素表单，有两种事件可以监听，就是input 和change

滚动事件

冒泡、捕获、委托

冒泡：举个栗子：点赞的功能。就是先是点击事件，点击之后触发了监听事件。冒泡找到了其父节点，出发父节点的监听事件，依次冒泡直到html根元素为止.这样会导致除了点赞，还会发生其他的事情，跳转页面

阻止冒泡：e.stopPropagation()这样就不会发生跳转了，冒泡事件被阻止了

捕获：捕获和冒泡是完全相反的，冒泡是从当前元素沿着祖先节点往上冒泡，捕获是从HTML根节点开始依次到当前元素

委托：给dom元素添加一个事件 dom.addEventListener(‘click’, () => {} )

网络

什么协议：

协议，就是通信计算机双方共同遵从的一组约定，遵守这个约定，计算机之间从能相互通信交流

URL

URL的组成部分：协议类型+域名+路径+参数

(1) 协议类型与域名之间要用://分隔

(2) 路径以单斜杠/开头，中间每层的分隔符也是单斜杠/

(3) 路径与参数之间要用？分隔，，多个参数之间要用&分隔，参数名=参数值的格式表示

路径的两个选择：

1. 相对路径

   注意自己写的时候，相对路径一定要以/开头，但是收到别人以/开头的路径时，不一定是相对路径，要确认清楚

2. 默认路径，有时候我们点一个网址能打开，没有输入路径，其实，表示网站的默认页面，那么服务器就会返回一个默认的页面给浏览器

   API+GET请求

   API可以快速的调用某个程序

​ fetch可以调用API

所谓的API，本质上就是一个URL，开头也是HTTP，只是返回的内容有明显的区别，

API 返回的数据统称为数据，我们可以用fetch去获取这部分数据

post请求

post请求的优点：URL不会暴露我们的信息，一旦发送请求，立即会销毁，别人无法通过你的报文获取你的信息

传递的数据长，post理论上可以发送无穷的信息，图片文件都是通过这个发送的

缺点：不方便信息共享，需要分享一个链接，URL分享给朋友，post请求，参数无法分享，（因为URL不携带任何的页面信息，只有URL的实际地址）

get和post的使用场景

• 如果你的程序是通过用户输入查询的检索的时候，一般用GET，便于分享
• 你的信息是比较敏感的，就用post，比较安全

get是得到的意思，post是发送的意思，要是得到就用get，更多的是发送，就用post

在用post的时候，要加一个参数method

fetch(
  'https://www.fastmock.site/mock/b73a1b9229212a9a3749e046b1e70285/f4/f4-11-4-1',
  {
    method: 'POST'
  }
)

Chrome Network

步骤：右击检查，开发者工具选择network面板，再次刷新

1. Headers:可以看到请求地址、请求类型、请求状态码
2. Preview可以看到返回值的情况

可以看到网络请求的万里行，可以看到参数，可是看到application的配置，可以提高开发效率和排查问题