小白入门之前端网页技术JavaScript

亦凉 2021-07-17 01:59 470阅读 0赞

### 文章目录 ###

*   *  静态网页和动态网页
     *   *  动态网页
         *  网页是如何和后端交互的呢？
     *  JS概述
     *   *  什么是JS
         *  名词解释
         *  特点和优势
         *  入门案例
     *  HTML中引入JS
     *   *  通过script标签引入JS代码
         *  通过script标签引入外部的JS文件
     *  JS语法
     *   *  注释
         *  基本数据类型
         *  复杂数据类型
         *  JS的变量
         *  JS的运算符
     *  JS语句
     *   *  if..else语句
         *  switch…case语句
         *  循环语句
     *  JS数组
     *   *  JS数组的声明方式
         *  数组需要注意的细节
         *  数组的常见操作
     *  JS函数
     *   *  方式一：通过function关键字声明函数
         *  方式二：通过函数直接量声明函数
     *  JS对象
     *   *  内置对象
         *  自定义对象
     *  DOM树的作用
     *   *  组成
         *  DOM树结构
         *  Document对象
         *  dom.html
         *  总结
     *  console调试网页
     *   *  Chrome
         *  log
         *  warn
         *  table

## 静态网页和动态网页 ##

### 动态网页 ###

我们有了html超文本标记语言实现了网站页面展现，展现文字、表格、图片、超链接等，有了css样式表实现了页面的美化，这些技术实现了静态网页。

日常展现是已经足够了，但是如果我们要做个注册功能呢？如论坛，我们注册个论坛来发文章，聊天。这就带来一个问题，信息如何根据不同的使用者，展现不同的内容呢？再如我注册登录和你注册登录，我们在网站上显示的登录名称就不同。这html+css就无能为力了，它们无法实现，那谁能办到呢？这时javascript就派上用场了。它能实现浏览器用户和后台服务器进行交互。注册、登录、添加商品到购物车、下订单对它而言都是小菜一碟。有了javascript的加入，实现页面和后台系统的交互，实现用户信息的注册，实现用户的登录，实现个性化的数据展现，功能强大不老少。业界把这样的网页称为动态网页，把这样的网站称为动态网站。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8GoCFcXD-1622526184986)(RackMultipart20210601-4-1vdjb36\_html\_683b0f623d6265f.png)\]][img-8GoCFcXD-1622526184986_RackMultipart20210601-4-1vdjb36_html_683b0f623d6265f.png]

简而言之，静态网站只能看，不同浏览者看到内容一致不能变化；动态网站可以读写数据，内容根据不同浏览者展示不同的信息。

### 网页是如何和后端交互的呢？ ###

动态网站的软件架构是怎样的呢？

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-br6P2qaO-1622526184994)(RackMultipart20210601-4-1vdjb36\_html\_a71a298b5faabd1f.png)\]][img-br6P2qaO-1622526184994_RackMultipart20210601-4-1vdjb36_html_a71a298b5faabd1f.png]

用户访问页面，页面触发事件创建XHR对象，进行ajax请求，请求访问服务器端，请求被web中间件拦截并进行处理，由控制层框架springmvc中的controller进行接收，controller请求业务层spring框架的service服务，service请求持久层mybatis框架的mapper映射，mapper访问数据库。操作完数据库，返回结果，mybatis封装成java对象传回service，service把java对象传回controller，controller把java对象又转换为json字符串，然后传回浏览器，浏览器传回给调用者XHR，XHR调用回调方法callback，callback进行json字符串的解析，从中拿到要展现的数据，通过javascript处理，最终回显到页面上。

可以看到这个调用过程是非常复杂的，跨越网络，跨域多个服务器，很多技术应用其中，而这一切的始作俑者是谁呢？谁让这一切成为可能，它就是javascript，它实现了用户的请求和响应，实现了数据的动态展现，使早期静态的网站走向了动态的网站。

## JS概述 ##

### 什么是JS ###

JavaScript 是 web 前端开发者必学的三种语言之一：

*  HTML 定义网页的内容 H5
 *  CSS 规定网页的布局 CSS3
 *  JavaScript 实现网站的交互 ES6

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它们根本没有关系，java是强语言几乎无所不能，而javascript是脚本语言，只局限于浏览器。

JavaScript遵循ECMA国际组织颁布的ECMAScript标准。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript 的第六版，简称为ES6。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。很多js相关技术都遵循这个标准，如目前最受欢迎的Vue。

微软出了符合规范类似javascript的称为js，但一般开发者忽略它们的差异，全称就习惯叫javascript，简称就习惯叫js。

全称JavaScript，是一种弱类型语言，同其他语言一样，有它自身的语法，数据类型，表达式，算术运算符等。

JS是一门 **基于对象** 和 **事件驱动** 的 **脚本语言** ，通常用来提高网页与用户的交互性。

### 名词解释 ###

基于对象：它不仅可以创建对象,也能使用现有的对象。JS没有类的概念，也没有编译的过程。是一边解释一边执行。

事件驱动：在JS中，大部分情况下都是通过事件触发驱动函数执行的，从而实现特定的功能。（比如点击div将内容替换为时间、当鼠标滑过元素，元素就有翻转的动态。）

脚本语言：在网络前端开发环境下，用于嵌入在客户端浏览器中的一段小程序。

### 特点和优势 ###

特点：

(1)JS是一门直译式的语言，直接执行的就是源代码.

是一边解释一边执行，没有编译的过程（不像Java需要提前编译为class文件再运行）.

(2)JS是一门弱类型的语言,没有严格的数据类型.

优势：

(1)良好的交互性

(2)一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)

(3)跨平台性(Java语言具有跨平台性,是因为有虚拟机)

只要有浏览器的地方都能执行JS

### 入门案例 ###

<head>
        <title>hello</title>
    	<meta charset="utf-8"/>
    	<script>/* JS代码 */ alert(100); function fn(){ alert("111"); } </script>
    </head>
    <body>
    	<a href="#" onclick="fn();">鼠标点击事件...</a>
    </body>

## HTML中引入JS ##

### 通过script标签引入JS代码 ###

<head>
    	<meta charset="utf-8"/>
    	<script>/* JS代码 */ function fn(){ alert("JS的第1种引入方式"); } </script>
    </head>
    <body>
    	<div id="div1" onclick="fn();">Hello JavaScript</div>
    </body>

### 通过script标签引入外部的JS文件 ###

创建1.js文件

function fn(){ 
    	alert("JS的第2种引入方式");
    }

在html中引入文件

<head>
    	<meta charset="utf-8"/>
    	<script src="1.js"> </script>
    </head>
    <body>
    	<div id="div1" onclick="fn();">Hello JavaScript</div>
    </body>

注意：不要同时通过一个script标签引入JS代码和JS文件，会导致代码不会执行！比如：

## JS语法 ##

### 注释 ###

单行注释： //注释内容

多行注释： /\* 注释内容 \*/

### 基本数据类型 ###

包括:number/string/boolean/null/undefined

(1) 数值类型-number

在JS中，数值类型只有一种，就是浮点型。

在JS中，需要时会自动的进行数据类型的转换，比如：在显示和处理的时候，浮点型和整型会自动的转换。

2.4+3.6=6;
    
    Infinity ： 正无穷大
    
    -Infinity ： 负无穷大
    
    NaN : Not a Number 非数字， 和任何值都不相等，包括它本身

(2) 字符串类型-string

在JS中，字符串是基本数据类型。

在JS中，字符串直接量是通过单引号或者双引号引起来。

var str1 = "Hello…";
    
    var str2 = 'CGB2103…';;
    
    alert(str1);

(3) 布尔类型-boolean

值为true或者是false；

var s1 = false;
    
    console.log(s1);

(4) undefined

值只有一个就是undefined。表示变量没有初始化值。

比如：

a) var num; alert(num);//声明了变量但是没有为变量赋值，该变量的值就是undefined。
    
    b) 或者访问一个对象上不存在的属性时，也是undefined。
    
    c) 或者访问数组中一个没有的元素的位置时，该位置处的值也是undefined.

(5) null

值也只有一个，就是null。表示空值或者不存在的对象。

### 复杂数据类型 ###

函数、数组、对象（自定义对象、内置对象、DOM对象、BOM对象…）

### JS的变量 ###

js是弱类型语言，所有类型的变量都是用var关键字定义。并且参数的类型可以随时转换。

javascript没有类似采用静态语言类型，如java的变量类型是编译期就确定的；而它采用了动态类型，也就是说在编译期类型不确定，运行时会动态根据变量的赋值来决定它的类型，这点比较灵活。这也是双刃剑，编译期就难以检查出其赋值的错误。

练习:变量交换

(1) 在JS中是通过 var 关键字来声明一个变量

var a=1; alert(a);
    
    var x=true; alert(x);
    
    var y=10.8; alert(y);

(2) 在JS中声明的变量是不区分类型的， 可以指向任意的数据类型。

var a = 1;
    a=true;
    a=100;
    alert(a);//100
    
    function x(){ 
    	var m = 10;
    	alert("局部变量:"+m);
    	alert("全局变量:"+a);
    }
    alert("局部变量2:"+m);//局部变量失效,报错

### JS的运算符 ###

JS中的运算符和Java中的运算符大致相同

算术运算符: +，-，\*，/，%，++，–

赋值运算符: =，+=，-=，\*=，/=，%=

比较运算符: ，!=，=，!==，>，>=，<，<=

位运算符: & ， |

逻辑运算符: && ，||

前置逻辑运算符: ! (not)

三元运算符: ? :

常见运算符测试

var a = 3;
    var b = 1;
    console.log(a+b);//4
    a+=4;
    console.log(a+b);//8
    //a+=4;
    console.log(a==b); //true
    console.log(a==="3"); //false 如果两边比较的值不是同一种数据类型，===直接返回false，如果是同一种数据类型，==和===没有区别！
    console.log("1"=="1"); //true //由于JS中字符串是基本数据类型，比较字符串相等通过 == 进行！
    var a = 1;
    alert(a++);//1
    alert(++a);//3
    alert(++a+a+++a);//4+4+5
    alert(a>3?10:8);
    var b = 10;
    alert(a>b?a:b);//求两个数里的大数
    var c = 8;
    var d = a>b?(a>c?a:c):(b>c?b:c);
    alert(d);//三个数里的大值

typeof运算符: 用于返回变量或者表达式 的数据类型

var i = 3;
    console.log(typeof i);//number
    i=true;
    console.log(typeof i);//boolean
    i="hello";
    console.log(typeof i);//string
    console.log(typeof 123+"abc");//numberabc
    console.log(typeof (123+"abc"));//string

## JS语句 ##

JS中的语句和Java中的语句用法也大致相同

### if…else语句 ###

### switch…case语句 ###

var day = 3;
    switch( day ){ 
    	case 1: 
    		alert("今天是星期一");
    		break;
    	case 2: 
    		alert("今天是星期二");
    		break;
    	case 3: 
    		alert("今天是星期三");
    		break;
    	case 4: 
    		alert("今天是星期四");
    		break;
    	case 5: 
    		alert("今天是星期五");
    		break;
    }

### 循环语句 ###

for(var i=0;i<5;i++){ 
    	alert( i );
    console.log(i);
    }
    var i=0;
    while(i<5){ 
    alert(i);
    i++;
    }
    var sum = 0;
    for( var i=1; i<=100; i++ ){ 
    	sum += i; //sum = sum+i;
    }
    console.log(sum );
    //没有增强for循环

注意： JS中的语句，判断条件可以不是boolean类型，因为JS中会自动进行数据类型的转换。

## JS数组 ##

JS数组用于在单个的变量中存储多个值(其实就是一个容器)。

JS中的数组可以存储例如：数值、字符串、布尔值、undefined、null、对象、函数等

### JS数组的声明方式 ###

var arr1 = new Array();//声明一个空数组
    var arr2 = new Array("abc", "hello", true);//声明一个具有初始值的数组
    alert(arr2.length);//3
    var arr4 = [];//声明一个空数组
    alert(arr4.length);//0
    arr4 = ["abc", "hello", true];//声明一个具有初始值的数组
    alert(arr4);

### 数组需要注意的细节 ###

(1)JS数组中可以存放任意的数据类型

(2)JS中的数组长度可以被改变

var arr1 = [];//声明一个空数组
    console.log( arr1.length ); //此时数组长度为 0
    arr1.length = 10;
    console.log( arr1.length ); //此时数组长度为 10
    arr1[99] = "abc";
    console.log( arr1.length ); //此时数组长度为 100
    arr1.length = 0;
    console.log( arr1.length ); //此时数组长度为 0

### 数组的常见操作 ###

length属性  --  获取数组的长度，还可以改变数组的长度
    var a = [1,2,3];  
    alert(a.length);  
    
    var arr = [123, "abc", false, new Object() ]
    //遍历数组
    for( var i=0; i< arr.length; i++ ){ 
    	console.log( arr[i] ); 
    }
    //for..in
    for(var i in a){ 
    	console.log("i:::"+i);
    }
    //循环接收用户输入，将数据存储在数组中，直至输入‘exit’结束
    c();
    function c(){ 
    	var a=[];
    	for(;;){ 
    		var x=prompt("请输入整数:");
    		a[a.length]=x; 
    		if(x=="exit"){ 
    			break;
    		}
    	}
    	console.log(a);
    }

## JS函数 ##

函数就是一个具有功能的代码块, 可以反复调用

函数就是包裹在花括号中的代码块，前面使用了关键词 function

### 方式一：通过function关键字声明函数 ###

声明：function 函数名称([参数列表]){  函数体 }
    调用: 函数名称([参数列表]);
    案例：
    function a(){  //无参函数定义
    	var a = [1,2,3,4,5]; //定义数组
    	var sum =0; //定义变量
    	for (var i = 0; i <a.length; i++) { 
    		if(a[i]%2==0){ 
    			sum+=a[i];
    		}
    	}
    	alert(sum);
    }
    a();//函数调用
    function b(x,y){ //定义含参函数
    	alert(x+y);
    }
    b(1,"2");//函数调用
    b(1,2);//函数调用

### 方式二：通过函数直接量声明函数 ###

声明：var 函数名称 = function([参数列表]){  函数体 }
    调用: 函数名称([参数列表]);
    案例：
    // fn2(); //这种方式定义的函数还未加载就调用,会报错.方式1没问题
    var fn2 = function(){  //定义无参函数
    	alert(100);
    }
    fn2();  //函数调用
    
    var fn3 = function(x,y){   //定义含参函数
    	alert(x*y);
    }
    fn3(0.32,100);//函数调用
    fn2("王海涛");参数个数不匹配，王海涛undefined
    var e = function(x,y){  //定义有返回值含参函数
    	return x-y;
    }
    alert("函数返回值:::"+ e(1.1,10.9) ); //函数调用

注意: 在JS中调用函数时, 传递的参数个数如果与声明的参数个数不相同, 也不会报错。

但是最好按声明的个数来传递, 因为个数不符, 可能会引发一些问题！！！

## JS对象 ##

利用function关键字声明对象，用new关键字创建对象。

### 内置对象 ###

String/Array/Number/Math/JSON…

Window对象–代表浏览器中一个打开的窗口,了解一下即可，很多被UI替代

window.onload() 		    在浏览器加载完整个html后立即执行!
    window.alert("text") 				提示信息会话框
    window.confirm("text") 			确认会话框
    window.prompt("text") 			键盘输入会话框
    window.event						事件对象
    window.document					文档对象

Document对象–代表整个HTML文档，可用来访问页面中的所有元素

document.write()               	动态向页面写入内容
    document.getElementById(id)  		获得指定id值的元素
    document.getElementsByName(name)	获得指定Name值的元素

学会简单使用，后期被jQuery封装，在后期被Vue框架封装

### 自定义对象 ###

(1)方式一：

1.  声明对象：function Person()\{\}
2.  创建对象：var p1 = new Person();
3.  设置属性：p1.name = "张飞"; p1.age = 18;
4.  设置方法：p1.run = function()\{ alert(this.name+" : "+this.age); \}
5.  访问p1对象：

/* 自定义对象*/
    function Person(){  } /* 定义对象*/ 
    var p1 = new Person(); /* 创建对象*/
    p1.name="张三";
    p1.age=20;
    console.log(p1);  
    p1.say = function(){  /* 定义函数*/
    console.log("haha");
    }
    p1.say(); /* 函数调用*/
    上面展示了js的强大！js的牛掰之处就在于，它的属性可以边写边创建，非常灵活，而java不行，必须先定义。

上面展示了js的强大！js的牛掰之处就在于，它的属性可以边写边创建，非常灵活，而java不行，必须先定义。

(2)方式二:

var p2 = { 
    		"pname":"李四",
    		"page":100,
    		"psay":function(){ 
    			/* this使用p2里定义的 */
    			console.log(this.pname+this.page);
    		}
    	}
    	console.log(p2);
    	p2.psay();  /* 函数调用*/

## DOM树的作用 ##

### 组成 ###

*  ECMAScript描述了javascript语言的语法和基本对象
 *  文档对象模型DOM（Document Object Model）与HTML网页API接口
 *  浏览器对象模型BOM（Browser Object Model），与浏览器进行交互的API接口

核心对象有：window浏览器窗口，navigator浏览器信息，location浏览器当前地址信息，history浏览器历史信息，screen用户屏幕信息。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YMZBuK5C-1622526185003)(RackMultipart20210601-4-1vdjb36\_html\_7c541c1bae188940.png)\]][img-YMZBuK5C-1622526185003_RackMultipart20210601-4-1vdjb36_html_7c541c1bae188940.png]

DOM非常重要，实际开发更多通过js操作DOM对象实现对html页面的操作，BOM也用，比较少用。所以学习重点放在DOM上。

### DOM树结构 ###

DOM 是一项 W3C (World Wide Web Consortium) 标准，DOM（Document Object Model）文档对象模型为JS操作html文档所提供的一套API，通过这套API可以很方便的对html元素进行访问及增删改查操作。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mw8l1nxY-1622526185008)(RackMultipart20210601-4-1vdjb36\_html\_1b9343e8dd3a0f7a.png)\]][img-mw8l1nxY-1622526185008_RackMultipart20210601-4-1vdjb36_html_1b9343e8dd3a0f7a.png]

### Document对象 ###

--获取对象: window.document
    --调用方法: 
    		getElementById("元素的id的属性的值")--返回1个元素
    		getElementsByName("元素的name属性的值")--返回多个元素(用数组)
    		getElementsByClassName("元素的class属性的值")--返回多个元素(用数组)
    		getElementsByTagName("元素的标签名的值")--返回多个元素(用数组)
    write()--向文档写 HTML 表达式 或 JavaScript 代码
    title--返回网页的标题
    id--设置或返回元素的id
    innerHTML--设置或返回元素的内容

### dom.html ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>DOM解析</title>
    
    		
    		<script>
    			function a(){ 
    				/* 按id获取,返回1个 */
    				var x = document.getElementById("div1");
    				x.innerHTML="<h1>你好div</h1>";
    				
    				/* 按name属性值获取,返回多个*/
    				var y = document.getElementsByName("div2"); 
    				console.log(y);//NodeList
    				y[0].innerHTML="hello js...";
    				
    				/* 按class属性值获取,返回多个*/
    				var z = document.getElementsByClassName("span1");
    				console.log(z);//HTMLCollection
    				z[0].innerText="<p>我变了</p>"
    				
    				/* 按照标签名获取,返回多个 */
    				var m = document.getElementsByTagName("div");
    				console.log(m);//HTMLCollection
    				m[1].style.fontSize=30+"px";
    			}
    		</script>
    	</head>
    	<body>
    		<div id="div1" onclick="a();">我是div1</div>
    		<div name="div2"  onclick="a();">我是div2</div>
    		<span class="span1">我是span1</span>
    		<span class="span1">我是span2</span>
    		<a name="div2" id="a1">我是a</a>
    
    		
    <a href="#" onclick="method();">单击触发js</a>
    		<a href="#" ondblclick="method2();">双击触发js</a>
    		<a href="#" onmouseenter="method3();">滑过触发js</a>
    		<a href="#" onmouseleave="method4();">滑走触发js</a>
    <button onkeydown="alert(1);">点我</button>
    	</body>
    </html>

### 总结 ###

获取页面元素的4种方式:

*  getElementsByTagName 标签名称，得到数组
 *  getElementsByName name属性，得到数组
 *  getElementsByClassName class属性，得到数组
 *  getElementById id属性，单个值

注：dom树在描述标签时除id方式，其它都是以数组形式体现，哪怕是一个元素。

## console调试网页 ##

### Chrome ###

专业人用专业的工具，浏览器调试谷歌、火狐最佳，使用F12打开调试窗口。也可以快捷键打开：ctrl+shift+i。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QK9Qms9o-1622526185011)(RackMultipart20210601-4-1vdjb36\_html\_dce9447ed4ea7532.png)\]][img-QK9Qms9o-1622526185011_RackMultipart20210601-4-1vdjb36_html_dce9447ed4ea7532.png]

*  支持自动补全，提示下，按tab键补全
 *  清除日志
 *  Console控制台菜单

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6y32hLZF-1622526185013)(RackMultipart20210601-4-1vdjb36\_html\_1faab11e37410c47.png)\]][img-6y32hLZF-1622526185013_RackMultipart20210601-4-1vdjb36_html_1faab11e37410c47.png]

### log ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ApmBOpKD-1622526185014)(RackMultipart20210601-4-1vdjb36\_html\_452ff1cab3407fbf.png)\]][img-ApmBOpKD-1622526185014_RackMultipart20210601-4-1vdjb36_html_452ff1cab3407fbf.png]

### warn ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qynkg3CR-1622526185016)(RackMultipart20210601-4-1vdjb36\_html\_12bf66c013182cde.png)\]][img-qynkg3CR-1622526185016_RackMultipart20210601-4-1vdjb36_html_12bf66c013182cde.png]

### table ###

以表格形式展现：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eEb87EdJ-1622526185019)(RackMultipart20210601-4-1vdjb36\_html\_d037d642cdad2159.png)\]][img-eEb87EdJ-1622526185019_RackMultipart20210601-4-1vdjb36_html_d037d642cdad2159.png]

[img-8GoCFcXD-1622526184986_RackMultipart20210601-4-1vdjb36_html_683b0f623d6265f.png]: /images/20210716/818be6cd09bb4187af108a9035882457.png
[img-br6P2qaO-1622526184994_RackMultipart20210601-4-1vdjb36_html_a71a298b5faabd1f.png]: /images/20210716/88d5038812bf417faf9c0a0a4a5b22dc.png
[img-YMZBuK5C-1622526185003_RackMultipart20210601-4-1vdjb36_html_7c541c1bae188940.png]: /images/20210716/f6691b5dc6114db399d9d4c367413d9d.png
[img-mw8l1nxY-1622526185008_RackMultipart20210601-4-1vdjb36_html_1b9343e8dd3a0f7a.png]: /images/20210716/95424fc4526040aaa96b17273f683eef.png
[img-QK9Qms9o-1622526185011_RackMultipart20210601-4-1vdjb36_html_dce9447ed4ea7532.png]: /images/20210716/f4bed375fae84e7f8cd468c55cd003d6.png
[img-6y32hLZF-1622526185013_RackMultipart20210601-4-1vdjb36_html_1faab11e37410c47.png]: /images/20210716/28836cf313184354927af73eb76dd362.png
[img-ApmBOpKD-1622526185014_RackMultipart20210601-4-1vdjb36_html_452ff1cab3407fbf.png]: /images/20210716/ff775709023a4a17a8d008441edb4347.png
[img-qynkg3CR-1622526185016_RackMultipart20210601-4-1vdjb36_html_12bf66c013182cde.png]: /images/20210716/35cbd480b10c47559b123ec5d58bbdf3.png
[img-eEb87EdJ-1622526185019_RackMultipart20210601-4-1vdjb36_html_d037d642cdad2159.png]: /images/20210716/4b46c009d1f646a880e03e92619c8499.png