deal with JavaScript in front end

Author: DavidingPlus

前端/JavaScript/07【DOM】/DOM.md

@@ -109,7 +109,7 @@ var scrollTop = window.scrollY || document.documentElement.scrollTop;
 </html>
 ```
 
-![](mark-img/ee10e3c3552940359198256a6304d806.png)
+![](https://img-blog.csdnimg.cn/direct/479d86a97548457f8edba3dbb3b8cd5f.png)
 
 # 十、识别用户浏览器品牌
 
@@ -191,7 +191,7 @@ history.go(-1);	// 等同于 history.back();
 </html>
 ```
 
-<img src="mark-img/1fdace562f72414c8a3839383e14be69.gif" style="width:50%;" />
+<img src="https://img-blog.csdnimg.cn/direct/64cbee73ee87449980b1c3df92068a4f.png" style="width:50%;" />
 
 # 十二、Location对象
 
@@ -477,7 +477,7 @@ DOM 元素都有 `offsetTop` 属性，表示此元素到定位祖先元素的垂
 </html>
 ```
 
-<img src="mark-img/e37cf208422d4177afb2f4691e141232.gif" style="width:80%;" />
+<img src="https://img-blog.csdnimg.cn/direct/cf4d3d8bdb18452c84c1319e4c22116e.png" style="width:80%;" />
 
-<img src="mark-img/2491bae6d5f747f995cc22476b14513e.gif" style="width:80%;" />
+<img src="https://img-blog.csdnimg.cn/direct/d0cad3cca6e04ef09cc1c49d5f2306e8.png" style="width:80%;" />
 

前端/JavaScript/08【BOM】/BOM.md

@@ -958,23 +958,23 @@ console.log(obj);	// fun { a: 3, b: 5 }
 
 **【第一步：函数体内会自动创建出一个空白对象】**
 
-![](mark-img/734f6064b1274f0ba011d8a7a8e7dfd4.png)
+![](https://img-blog.csdnimg.cn/direct/5e395094543a4eb4ae61ff6dac073edd.png)
 
 **【第二步：函数的上下文（this）会指向这个对象】**
 
-![](mark-img/2346ce01c7264015a9890fd2317e01e1.png)
+![](https://img-blog.csdnimg.cn/direct/7012d7cbfc684f659bec17d87b0691d4.png)
 
 **【第三步：执行函数体中的语句】**
 
 > 之后这个对象就不再是空对象了。
 
-![](mark-img/image-20220211181748464.png)
+![](https://img-blog.csdnimg.cn/direct/0eb03ca94ca1462e89dd0a15663960c8.png)
 
 **【第四步：函数会自动返回上下文对象，即使函数没有 return 语句】**
 
 > 执行结果为：{a: 3, b: 5}
 
-![](mark-img/3aab18d93cc04d0a82ce3db482135cd1.png)
+![](https://img-blog.csdnimg.cn/direct/31d09ff702594b41b6e9192953e900bc.png)
 
 【案例】
 
@@ -1098,15 +1098,15 @@ say();
 
 # 九、类与实例
 
-<img src="mark-img/0c5272275c614edaa9bb5698780bffff.png" style="width:60%;" />
+<img src="https://img-blog.csdnimg.cn/direct/fa02cda6b88041a28c70bb6f349d25dd.png" style="width:60%;" />
 
 【类好比是 “蓝图”】
 
 如同 “蓝图” 一样，类只描述对象会拥有哪些属性和方法，但是并不具体指明属性的值。
 
 【实例是具体的对象】
 
-<img src="mark-img/ac0233152c1c4be08ac08fefa0a77e73.png" style="width:60%;" />
+<img src="https://img-blog.csdnimg.cn/direct/0d966eddfca848e09e6f4adde374db19.png" style="width:60%;" />
 
 【构造函数和 “类”】
 
@@ -1130,7 +1130,7 @@ prototype 属性值是个对象，同时该对象默认拥有 constructor 属性
 
 > constructor：制造商
 
-<img src="mark-img/52a1d4d63a1f469eb4c3ef508e2de141.png" style="width:50%;" />
+<img src="https://img-blog.csdnimg.cn/direct/5322febe554a416486ac0a47ae734127.png" style="width:50%;" />
 
 ```javascript
 function sum(a, b) {
@@ -1156,7 +1156,7 @@ true
 
 ## 10.2 构造函数的prototype是实例对象的原型
 
-<img src="mark-img/2d1fb514299f49e69428be08ea7d9b07.png" style="width:60%;" />
+<img src="https://img-blog.csdnimg.cn/direct/adf875daf34446298a47d1d1c12146e8.png" style="width:60%;" />
 
 `People.prototype` 是 `xiaoming` 的原型。
 
@@ -1195,7 +1195,7 @@ var xiaoming = new People('小明', 12, '男');
 console.log(xiaoming.nationality);	// 中国
 ```
 
-<img src="mark-img/332b6b06736d4a59b6f2df9a7f42d52e.png" style="width:60%;" />
+<img src="https://img-blog.csdnimg.cn/direct/667ae6851e8b4cddb8959d4c1c01d4ea.png" style="width:60%;" />
 
 【遮蔽效应】
 
@@ -1217,7 +1217,7 @@ tom.nationality = '美国';
 console.log(tom.nationality); // 美国
 ```
 
-<img src="mark-img/eb7937d314024951922741fe0b0a3d97.png" style="width:60%;" />
+<img src="https://img-blog.csdnimg.cn/direct/1bc6a0f28f1e4ed58bc882006fad5c0d.png" style="width:60%;" />
 
 ## 10.4 hasOwnProperty
 
@@ -1259,15 +1259,15 @@ function People(name, age, sex) {
 }
 ```
 
-<img src="mark-img/faf93b02816b4912a72ca2f09ad4760a.png" style="width:60%;" />
+<img src="https://img-blog.csdnimg.cn/direct/79a08d422e504f30ade5b5c4317cdc4c.png" style="width:60%;" />
 
 把方法直接添加到实例身上的缺点：每个实例和每个实例的方法函数都是内存中不同的函数，造成了内存的浪费。
 
 解决办法：将方法写到 prototype 上。
 
 ## 11.2 方法要写到prototype上
 
-<img src="mark-img/a2ddf61a4d254ed59ee4a5b34b23001a.png" style="width:60%;" />
+<img src="https://img-blog.csdnimg.cn/direct/ac0247768b794cc18d7a4e1c4c98ceef.png" style="width:60%;" />
 
 ```javascript
 function People(name, age, sex) {
@@ -1304,7 +1304,7 @@ Object 可以看做是所有对象的构造函数。
 
 所以，People.prototype 这个对象可以看做是 Object new 出来的。
 
-<img src="mark-img/29344d84587445a3a94a354a95e998d0.png" style="width:60%;" />
+<img src="https://img-blog.csdnimg.cn/direct/510e2223bd8b47beb17e150c91ea046d.png" style="width:60%;" />
 
 ```javascript
 function People() {
@@ -1321,17 +1321,17 @@ console.log(Object.prototype.__proto__);	// null
 
 任何数组实际上都是可以看做是 Array 这个构造函数 new 出来的。
 
-<img src="mark-img/4605f0ce53db4bf6a87dbb9032487e24.png" style="width:60%;" />
+<img src="https://img-blog.csdnimg.cn/direct/0c1f0d8a42994cf5b3bf9fdb77c857ea.png" style="width:60%;" />
 
 # 十三、继承
 
 ## 13.1 两个无关类
 
-<img src="mark-img/image-20220211233520473.png" style="width: 50%;" />
+<img src="https://img-blog.csdnimg.cn/direct/e6342561c8014bf1b95a9d57c29927e6.png" style="width: 50%;" />
 
 ## 13.2 两个有关类
 
-<img src="mark-img/image-20220211233716935.png" style="width:50%;" />
+<img src="https://img-blog.csdnimg.cn/direct/f20e9a9c6fb94249a40d5fc9f52a0f88.png" style="width:50%;" />
 
 ## 13.3 People类和Student类的关系
 
@@ -1347,7 +1347,7 @@ console.log(Object.prototype.__proto__);	// null
 - People 是 “父类”（或 “超类”、“基类”），Student 是 “子类”（或 “派生类”）
 - 子类丰富了父类，让类描述得更加具体化、更细化
 
-<img src="mark-img/image-20220211234613187.png" style="width:50%;" />
+<img src="https://img-blog.csdnimg.cn/direct/4732b119f09f42a894de41080215fc9d.png" style="width:50%;" />
 
 ## 13.5 JavaScript中如何实现继承
 
@@ -1357,7 +1357,7 @@ console.log(Object.prototype.__proto__);	// null
 
 ## 13.6 通过原型链实现继承
 
-<img src="mark-img/image-20220212014641115.png" style="width: 60%;" />
+<img src="https://img-blog.csdnimg.cn/direct/9a35d8e861c54c5aa2d699c9192c6c2b.png" style="width: 60%;" />
 
 **原理：子类构造函数的 prototype 直接指向父类的实例！**
 
@@ -1509,19 +1509,19 @@ jerry.sleep();
 </html>
 ```
 
-<img src="mark-img/231234234123.gif" style="width:60%;" />
+<img src="https://img-blog.csdnimg.cn/direct/f3cbe5db7f0147d2b2b4aeb6bf3b150b.png" style="width:60%;" />
 
 ## 14.2 小案例：炫彩小球
 
 【Ball 类】
 
-<img src="mark-img/image-20220212122635036.png" style="width:50%;" />
+<img src="https://img-blog.csdnimg.cn/direct/f57f97b9f6ff45889d7f34814d087689.png" style="width:50%;" />
 
-<img src="mark-img/image-20220212122701973.png" style="width:50%;" />
+<img src="https://img-blog.csdnimg.cn/direct/0ddbfbdf45034801a933e1f878781dae.png" style="width:50%;" />
 
 **如何实现多个小球动画？**
 
-<img src="mark-img/image-20220212122934563.png" style="width:50%;" />
+<img src="https://img-blog.csdnimg.cn/direct/56db9d5b9cd2444cb71ca2f320193858.png" style="width:50%;" />
 
 ```html
 <!DOCTYPE html>
@@ -1638,7 +1638,7 @@ jerry.sleep();
 </html>
 ```
 
-<img src="mark-img/124123412341234123.gif" style="width:60%;" />
+<img src="https://img-blog.csdnimg.cn/direct/21c942be75e442f79c3086d8b3052945.png" style="width:60%;" />
 
 # 十五、包装类
 
@@ -1674,7 +1674,7 @@ console.log(e.__proto__ == String.prototype);	// true
 
 a、b、c 是基本类型值吗？它们和普通的数字、字符串、布尔值有什么区别？
 
-<img src="mark-img/image-20220212162000631.png" style="width:30%;" />
+<img src="https://img-blog.csdnimg.cn/direct/503c97eb7c8349b08184ac6154492991.png" style="width:30%;" />
 
 ## 15.2 总结
 
@@ -1714,7 +1714,7 @@ console.log(Math.round(3.98));	// 4
 console.log(Math.round(3.49));	// 3
 ```
 
-<img src="mark-img/image-20220212163342374.png" style="width:60%;" />
+<img src="https://img-blog.csdnimg.cn/direct/4176ee31c85d4c45836be0f51106552f.png" style="width:60%;" />
 
 ```javascript
 var a = 3.7554;

前端/JavaScript/09【面向对象】/面向对象.md

@@ -12,15 +12,15 @@
 
 用一个例子快速演示正则表达式基本使用方法：检查某个字符串是否是 6 位数字。
 
-<img src="mark-img/aa5d6527508a43c89ee6c78b2cb7f871.png" style="width:60%;" />
+<img src="https://img-blog.csdnimg.cn/direct/e9b2c29413fc4e179d71ee9fc476a6c3.png" style="width:60%;" />
 
 ## 1.2 正则表达式“按位”描述规则
 
 正则表达式“按位”描述规则，是指它是一位一位的描述字符串的构成形式。
 
 比如检查字符串是不是这样的：以字母 m 开头，然后是 3 个数字，最后以字母 n 结尾。
 
-<img src="mark-img/4a95ab2cbdb34d6aa24b656d5691dd48.png" style="width:80%;" />
+<img src="https://img-blog.csdnimg.cn/direct/318bb20c509042b9bca5729412bccd59.png" style="width:80%;" />
 
 # 二、正则表达式的使用
 
@@ -140,7 +140,7 @@
 
 【修饰符的使用】
 
-<img src="mark-img/fabf0d79776d42b58d8b3da8b634d312.png" style="width:67%;" />
+<img src="https://img-blog.csdnimg.cn/direct/7e462c04924e4577bb762d9f5188328d.png" style="width:67%;" />
 
 # 三、正则表达式的应用
 
@@ -184,9 +184,9 @@ var result1 = regexp.exec(str);
 
 `exec()` 方法最有趣的是，有 `g` 修饰符的正则表达式将自动成为“有状态”的，这意味着可以对单个字符串中的多次匹配结果进行逐条的遍历。
 
-![](mark-img/f97bf3980d2648c993c22cb49441c27c.png)
+![](https://img-blog.csdnimg.cn/direct/66e0e204dc8b4c61b25b371d9379fd77.png)
 
-![](mark-img/b297c3f4de234e5fa3d1a209d3a47df0.png)
+![](https://img-blog.csdnimg.cn/direct/227a052d8faa46e9b79f208d4a51282d.png)
 
 ## 4.5 字符串的相关方法
 

前端/JavaScript/10【正则表达式】/正则表达式.md

@@ -247,7 +247,7 @@ console.log(i);		// 报错
 </html>
 ```
 
-<img src="mark-img/1.gif" alt="1" style="width: 50%;" />
+<img src="https://img-blog.csdnimg.cn/direct/d6255e8a6bd44cf58f1914bfd919c180.png" alt="1" style="width: 50%;" />
 
 无论点击谁都是 3，这是因为 var 没有块级作用域，三个点击事件函数中的 i 都是同一个全局变量，最终 i 都为 3 了，所以固然都输出 3。
 
@@ -300,7 +300,7 @@ console.log(i);		// 报错
 </html>
 ```
 
-<img src="mark-img/1-16471758864061.gif" alt="1" style="width:50%;" />
+<img src="https://img-blog.csdnimg.cn/direct/a0a93c6c570440a2b9ea09d191d4d235.png" alt="1" style="width:50%;" />
 
 - 使用 let
 
@@ -348,7 +348,7 @@ console.log(i);		// 报错
 </html>
 ```
 
-<img src="mark-img/1-16471758864061.gif" alt="1" style="width:50%;" />
+<img src="https://img-blog.csdnimg.cn/direct/a0a93c6c570440a2b9ea09d191d4d235.png" alt="1" style="width:50%;" />
 
 # 二、模板字符串
 
@@ -529,7 +529,7 @@ console.log(info);
 </html>
 ```
 
-<img src="mark-img/image-20220315130229559.png" alt="image-20220315130229559" style="width:50%;" />
+<img src="https://img-blog.csdnimg.cn/direct/553b384ed6ba4244bb34b03c4f1ddf7d.png" alt="image-20220315130229559" style="width:50%;" />
 
 # 三、箭头函数
 
@@ -734,7 +734,7 @@ adder();		// 指向 undefined（非严格模式下指向 window）
 </body>
 </html>
 ```
-<img src="mark-img/1-16473495911521.gif" alt="1" style="width:20%;" />
+<img src="https://img-blog.csdnimg.cn/direct/ac5766cc152349dbab0f106cfd14cc8c.png" alt="1" style="width:20%;" />
 
 ```html
 <!DOCTYPE html>
@@ -789,7 +789,7 @@ adder();		// 指向 undefined（非严格模式下指向 window）
 </body>
 </html>
 ```
-<img src="mark-img/2.gif" alt="2" style="width:20%;" />
+<img src="https://img-blog.csdnimg.cn/direct/6f8d770c98714dfd94c90a66460e8d84.png" alt="2" style="width:20%;" />
 
 ```html
 <!DOCTYPE html>
@@ -847,7 +847,7 @@ adder();		// 指向 undefined（非严格模式下指向 window）
 </html>
 ```
 
-<img src="mark-img/2-16473496264402.gif" alt="2" style="width:20%;" />
+<img src="https://img-blog.csdnimg.cn/direct/4f8ffd73b8924e2aa59d4764b49136a7.png" alt="2" style="width:20%;" />
 
 # 四、解构赋值
 

前端/JavaScript/11【ES6基础入门】/ES6基础入门.md

@@ -186,7 +186,7 @@ console.log([...document.querySelectorAll('p')].push);
 </body>
 ```
 
-<img src="mark-img/image-20230126230622456.png" alt="image-20230126230622456" style="width:30%;" />
+<img src="https://img-blog.csdnimg.cn/direct/25eb4e904346498e8b7d2956bdde1309.png" alt="image-20230126230622456" style="width:30%;" />
 
 # 三、对象展开运算符
 
@@ -779,7 +779,7 @@ console.log(m2, m2 === m);
 </html>
 ```
 
-<img src="mark-img/image-20220327154158420.png" alt="image-20220327154158420" style="width:50%;" />
+<img src="https://img-blog.csdnimg.cn/direct/eeb51668da314106aba6aded1a602b01.png" alt="image-20220327154158420" style="width:50%;" />
 
 # 五、Iterator 遍历器与 for...of 循环