너굴 개발 일지

TIL_210514_자바스크립트 이용한 form,input 태그 활용 예제 본문

JavaScript

TIL_210514_자바스크립트 이용한 form,input 태그 활용 예제

너굴냥 2021. 5. 14. 17:59

목차

자바스크립트를 이용한 <select><option>태그에 이벤트 발생시키기 예제

자바스크립트를 이용한 checkbox를 이용해 <input value> 값을 다른 <input value>로 넣어주기 예제

자바스크립트를 이용한 회원가입 정보 화면에서 입력 요구사항 만족하지 않을 시 alert 알림창 띄우기

자바스크립트를 이용한 checkbox 값을 읽어서 합계금액을 출력하기

자바스크립트를 이용한 브라우저 정보 불러오기

자바스크립트를 이용한 현재 시간 나타내는 창 만들기

window.open()

자바스크립트를 이용한 해당 문서 정보 출력

location.replace("url");

자바스크립트를 이용한 페이지 접속시 새로운 팝업창 띄우기 예제

<input onkeydown>

자바스크립트를 이용한 숫자 맞추기 프로그램

 

 

 

 

<select name="~~" onchange="display"></select>

onchange : select에서 무언가를 선택했을 때(바뀌었을 때) 발생시키는 이벤트

 

자바스크립트를 이용한 <select><option>태그에 이벤트 발생시키기 예제

더보기 
#container {
	width:500px;
	margin:10px auto;
}
form fieldset{
	margin-bottom:25px; 
 }
 form legend{
	font-size:15px;
	font-weight:600; 
 }

label.reg {
	font-size:14px;
	width:110px;
	color:#390;
	font-weight:bold;		
	float:left;
	text-align:right;
	margin-right:10px;
 }	 
 form ul li{
	list-style:none; 
	margin: 15px 0;	
	font-size:14px;	
 }
 #selectAll {
	 cursor:pointer;
 }
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>수강신청하기</title>
	<link rel="stylesheet" href="css/getForm.css">
</head>
<body>
	<div id="container">
		<h1>수강신청</h1>
		
		<form name="testForm" action="#">
			<fieldset>
				<legend>신청인</legend>
				<ul>
					<li>
						<label class="reg" for="userName">이름</label>
						<input type="text" id="userName" name="userName" maxlength="50"/>
					</li>
					<li>
						<label class="reg" for="major">학과</label>
						<select name="major" id="major" onchange="displaySelect()">
							<option>---- 학과 선택 ----</option>
							<option value="archi">건축공학과</option>
							<option value="mechanic">기계공학과</option>
							<option value="indust">산업공학과</option>
							<option value="elec">전기전자공학과</option>
							<option value="computer">컴퓨터공학과</option>
							<option value="chemical">화학공학과</option>
							
						</select>
					</li>
				</ul>
			</fieldset>
			
			<fieldset>
				<legend>과목선택</legend>
				<p>이달에 신청할 과목을 선택하세요</p>
				<input type="radio" name="subject" value="speaking" />회화
				<input type="radio" name="subject" value="grammer" />문법
				<input type="radio" name="subject" value="writing" />작문
			</fieldset>
			
			<fieldset>
				<legend>메일링</legend>
				<p>메일로 받고 싶은 뉴스 주제를 선택하세요</p>
				<input type="checkbox" name="mailing1" value="news" />해외 단신
				<input type="checkbox" name="mailing2" value="news" />5분 회화
				<input type="checkbox" name="mailing3" value="pops" />모닝 팝스
			</fieldset>
		</form>
	</div>
	
	<script src="js/getForm.js"></script>
</body>
</html>
var selectMenu = document.testForm.major;

function displaySelect(){
	var selectedText = selectMenu.options[selectMenu.selectedIndex].innerText;
	
	alert("["+selectedText+"]를 선택하였습니다");
}

학과 option 태그 클릭시 자바스크립트 alert 알림창 뜸
알림창 클릭시 학과에 선택된 과가 있는 것을 확인

 

 

자바스크립트를 이용한 <input value> 주문정보 체크시 배송 정보 동일하게 입력하기

자바스크립트 addEventListener()를 이용해 checkbox 클릭시 먼저 입력한 정보들이 다른 input 태그의 value값에 저장되는 것을 볼 수 있음

더보기 
* {
	margin:0;
	padding:0;
	box-sizing: border-box;
}
ul {
	list-style: none;
}
legend {
	font-size:1.2em;
	font-weight:bold;
	margin-left:20px;
}

form {
	width:520px;
	height:auto;
	padding-left:10px;
	margin:50px auto;
}
fieldset {
	border:1px solid #c0c0c0;
	padding:30px 20px 30px 30px;
	margin-bottom:35px;
}

.field {
	float:left;
	width:60px;
	font-weight:bold;
	font-size:0.9em;
	line-height: 55px;
	text-align:right;
	margin-right:15px;
}

.input-box {
	width:350px;
	height:35px;
	border:1px solid #aaa; /*solid : 두께있는선*/
	border-radius:5px;	/* 테투리 모서리 라운딩 처리*/
	padding:5px;		/*안쪽 패딩 (텍스트와 인풋 창 간격)*/
	margin:10px 0;	
	float:left;			/*왼쪽 정렬*/
}

.order {
	width:100%;
	padding:20px;
	border:1px solid #aaa;
	background:#e9e9e9;
	font-size:1em;
	font-weight:bold;
}

var check = document.querySelector("#shippingInfo");

check.addEventListener("click", checkFunction);	// 클릭이벤트는 체크박스 선택, 해제 상관없이 클릭하면 무조건 적용
function checkFunction(){	
	if(check.checked == true){ // 체크박스의 checked 속성값이 true (체크박스 해제가 아닌 선택 클릭했다면)
		 document.querySelector("#shippingName").value = document.querySelector("#billingName").value;
		 document.querySelector("#shippingTel").value = document.querySelector("#billingTel").value;
		 document.querySelector("#shippingAddr").value = document.querySelector("#billingAddr").value;
	}else{
		 document.querySelector("#shippingName").value = "";
		 document.querySelector("#shippingTel").value = "";
		 document.querySelector("#shippingAddr").value = "";
	}
	 
// 이렇게 작성해도 가능
//	 var sName = document.querySelector("#shippingName");
//	var sTel = document.querySelector("#shippingTel");
//	var sAddr = document.querySelector("#shippingAddr");
//	
//	sName.value = document.querySelector("#billingName").value;
//	sTel.value = document.querySelector("#billingTel").value;
//	sAddr.value = document.querySelector("#billingAddr").value;
	
}
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>결제하기</title>
	<link rel="stylesheet" href="css/order.css">
</head>

<body>
	<div id="container">
		<form action="#" name="order">
			<fieldset>
				<legend>주문정보</legend>
				<ul>
					<li>
						<label class="field" for="billingName">이름</label>
						<input type="text" class="input-box" id="billingName" name="billingName" />
					</li>
					
					<li>
						<label class="field" for="billingTel" >연락처</label>
						<input type="tel" class="input-box" id="billingTel" name="billingTel" />
					</li>
					
					<li>
						<label class="field" for="billingAddr">주소</label>
						<input type="text" class="input-box" id="billingAddr" name="billingAddr" />
					</li>
				</ul>
			</fieldset>
		</form>
		
		<form action="#" name="ship">
			<fieldset>
				<legend>배송정보</legend>
				<ul>
					<li>
						<input type="checkbox" id="shippingInfo" name="shippingInfo" />
						<label>주문정보와 배송정보가 같습니다.</label>
					</li>
					<li>
						<label class="field" for="shippingName">이름</label>
						<input type="text" class="input-box" id="shippingName" name="shippingName" />
					</li>
					
					<li>
						<label class="field" for="shippingTel" >연락처</label>
						<input type="tel" class="input-box" id="shippingTel" name="shippingTel" />
					</li>
					
					<li>
						<label class="field" for="shippingAddr">주소</label>
						<input type="text" class="input-box" id="shippingAddr" name="shippingAddr" />
					</li>
				</ul>
			</fieldset>
			<button type="submit" class="order">결제하기</button>
		</form>
	</div>
	<script src="js/order-result.js"></script>
</body>
</html>

 

자바스크립트를 이용한 회원가입 정보 화면에서 입력 요구사항 만족하지 않을 시 알림창 띄우기

더보기 
#container{
	width:600px;
	margin:0 auto;
}
ul {
	list-style:none;
}
ul li {
	clear:both;
}
.field {
	float:left;
	width:100px;
	font-weight:bold;
	font-size:0.9em;
	line-height: 55px;
	text-align:right;
	margin-right:15px;
}
input[type="text"], input[type="password"], input[type="email"] {
	float:left;
	width:350px;
	height:35px;
	border:1px solid #aaa;
	border-radius:5px;
	padding:5px;
	margin:10px 0;
	float:left;	
}

.r {
	line-height:55px;
}

#buttons > li {
	display:inline-block;
}
button {
	width:250px;
	height:50px;
	margin-right:10px;
	border:1px solid #ccc;
	background:#eee;
	font-size:0.9em;
}
var userId = document.querySelector("#user-id"); // id가 user-id인 태그 자체 , 뒤에 value를 붙이면 해당 태그의 value 값이 온다
var userPwd1 = document.querySelector("#user-pwd1");
var userPwd2 = document.querySelector("#user-pwd2");

userId.onchange = checkId;
userPwd1.onchange = checkPw;
userPwd2.onchange = comparePw;

function checkId(){
	if(userId.value.length < 4 || userId.value.length > 15){
		alert("아이디의 길이는 4~15자 사이입니다");
		userId.value = "";	// 잘못 입력하였으므로 입력값을 초기화 시킴
		userId.focus();
	}
}

function checkPw(){
	if(userPwd1.value.length <8){
		alert("비밀번호는 8자 이상이어야 합니다");
		userPwd1.value = "";
		userPwd1.focus();
	}
}

function comparePw(){
	if(userPwd1.value != userPwd2.value){
		alert("입력한 비밀번호가 불일치 합니다");
		userPwd2.value = "";
		userPwd2.focus();
	}
}
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="css/register.css">
	<title>회원 가입</title>
</head>

<body>
	<div id="container">
		<form action="" id="register">
			<ul id="user-info">
				<li>
					<label class="field" for="user-id">아이디</label>
					<input type="text" id="user-id" placeholder="4~15자리의 영문과 숫자를 입력해주세요" required="required" />
				</li>
				
				<li>
					<label class="field" for="email">이메일</label>
					<input type="email" id="email" required="required" />
				</li>
				
				<li>
					<label class="field" for="user-pwd1">비밀번호</label>
					<input type="password" id="user-pwd1" placeholder="8자리의 영문과 숫자 조합을 입력해주세요" required="required" />
				</li>
				
				<li>
					<label class="field" for="user-pwd2">비밀번호 확인</label>
					<input type="password" id="user-pwd2" placeholder="비밀번호를 다시 한번 입력해주세요" required="required" />
				</li>
				
				<li>
					<label class="field">메일링 수신</label>
					<label><input type="radio" value="yes" name="mailing" />예</label>
					<label><input type="radio" value="no" name="mailing" />아니오</label>
					<!-- 체크박스나 라디오 타입의 태그는 사용자에게 보여지는 글씨들이 있기에 글씨 css 적용 위해선 input마다 label 처리 -->
				</li>
			</ul>
			
			<ul id="buttons">
				<li><button type="submit">가입하기</button></li>
				<li><button type="reset">취소</button></li>
			</ul>
		</form>
	</div>
	<script src="js/register-result.js"></script>
</body>
</html>

시작화면에서 아이디를 4자 미만이나 15자 초과로 작성하면 경고창이 뜬다
비밀번 또한 입력란과 확인란의 내용이 다르면 경고창이 뜬다

 

 

querySelectorAll()

해당 코드를 모두 가져오는 자바스크립트 메소드

 

자바스크립트를 이용한 checkbox 값을 읽어서 합계금액을 출력하기

더보기 
#container {
  width:400px;
  margin:0 auto;
}
fieldset {
  margin-bottom:20px;
  border:1px solid #eee;
}
#total {
  border:none;
  font-size:16px;
  font-weight:bold;
}

var price = 24000;

var sideMenu = document.querySelectorAll(".checkbx");
var total = document.querySelector("#total");

for(var i=0;sideMenu.length;i++){
	sideMenu[i].onclick = totalPrice;		// checkbx 클릭할때마다 totalPrice() 실행
}

function totalPrice(){
	if(this.checked == true){
		price += parseInt(this.value); 	// 문자열에서 숫자 타입으로 변경
	}else{
		price -= parseInt(this.value); 	
	}
	total.value = price +"원";
}
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>연습문제 1</title>
	<link rel="stylesheet" href="css/sol-1.css">
</head>
<body>
	<div id="container">
    <h1>피자 주문</h1>
		<form>
      <fieldset>
        <legend>사이즈</legend>
        <p>Large - 24000 원 </p>
      </fieldset>
      <fieldset>
        <legend>추가 주문 </legend>        
          <label><input type="checkbox" name="pickle" class="checkbx" value="800">피클(800원)</label>
          <label><input type="checkbox" name="chilly" class="checkbx" value="300">칠리 소스(300원)</label>
          <label><input type="checkbox" name="deeping" class="checkbx" value="200">디핑 소스(200원)</label>
          <label><input type="checkbox" name="stick" class="checkbx" value="4800">치즈스틱(4개, 4800원)</label>
          <label><input type="checkbox" name="salad" class="checkbx" value="2400">콘 샐러드(2400원)</label>        
      </fieldset>
      <fieldset>
        <legend>합계</legend>
        <input type="text" id="total" name="total" class="price" readonly>
      </fieldset>
		</form>	
	</div>

	<script src="js/sol-1.js?ver=1"></script>
</body>
</html>

시작화면
체크하면 추가된 합계금액이 출력되며 체크박스 해제시 차감된 금액 출력

 

자바스크립트를 이용한 브라우저 정보 불러오기

더보기 
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8" />
	<title>browser 객체</title>   
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="css/browser.css">  
</head>
<body>
	<script>
		document.write("browser 코드명 : " + navigator.appCodeName + "<br />");
		document.write("browser 종류 : " + navigator.appName + "<br />");
		document.write("browser 버전 : " + navigator.appVersion + "<br />");
		document.write("browser 플랫폼 : " + navigator.platform + "<br />");
		document.write("browser 에이전트 : " + navigator.userAgent + "<br />");
	</script>
</body>
</html>

 

자바스크립트를 이용한 현재 시간 나타내는 창 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>현재 시각은?</title>
  <style>
    #current {
      margin-top:20px;
    }
    .display {
      font-size:26px;
      font-weight:bold;
      color:blue;
      text-align:center;
    }
  </style>
</head>
<body>
	<div id="current" class="display"></div>
	<script>
		setInterval(displayNow, 1000);			// (호출할 함수명, 대기시간=>1000일경우 1/1000초 단위)
		function displayNow(){
			var date = new Date();
			document.querySelector("#current").innerHTML = date.toLocaleTimeString();
		}
	</script>

</body>
</html>

사진으로 나타나진 않지만 해당 코드 실행시 시간이 계속 흐른다

 

window.open("대상", "새창이름", "가로크기,세로크기")

새로운 창을 띄우는 자바스크립트 함수

 

위의 예제를 이용하여 a 페이지에서 (현재시간을 알려주는)b페이지로 이동

더보기 
browserCheck.html 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>브라우저 체크</title>
</head>
<body>
	<script src="js/sol-1.js"></script>
</body>
</html>
window.onload = window.open("current.html","","width=300, height=100");
// open("대상", "새창이름", "가로크기,세로크기");
// 두번째 인자는 필수값 (내용없으면 공백으로 만들기)
// 세번째 인자는 가로 세로 한 묶음!

current.html 코드는 위에 나와있어서 생략했다

해당 코드를 실행하면 browserCheck.html에서 sol-1.js가 실행되는데 자바스크립트에서 current.html을 새창으로 띄우는 window.open() 메소드를 사용했기에 새로운 창이 생성된다

 

 

자바스크립트를 이용한 해당 문서 정보 출력

더보기 
#container {
  width:500px;
  margin:10px auto;
}
#display {
  margin-top:10px;
  padding:10px;
  border:1px solid #222;
  box-shadow: 1px 0 1px #ccc;			
}
p {
  font-size:1em;
}
button {
  margin-top:20px;
  text-align:center;
}
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>location Object</title>
	<link rel="stylesheet" href="css/location.css">
</head>
<body>	
	<div id="container">
		<script>
			document.write("이 문서의 위치(URL) : " + location.href + "<br />");
			document.write("이 문서의 호스트 : " + location.host + "<br />");
			document.write("이 문서의 프로토콜 : " + location.protocol);
		</script>
	</div>		
</body>
</html>

 

 

 

location.replace("url");

현페이지에서 변경이 되기에 뒤로 가기 버튼이 활성화되지 않음 (location.href와는 다름)

 

자바스크립트를 이용한 현페이지에서 새로운 페이지로 변경하기 ( 이동과 다른 개념)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>한 페이지를 다른 페이지로 변경</title>
</head>
<body>
	<h1>현재 페이지</h1>
	<button onclick="location.replace('https://www.naver.com')">네이버로 이동</button>
</body>
</html>

 

 

자바스크립트를 이용한 페이지 접속시 새로운 팝업창 띄우기 에제

더보기 
popup-result.html
<!DOCTYPE html>

<html lang="ko">
<head>
    <meta charset="utf-8" />
    <title>location 객체</title>   
    <link rel="stylesheet" href="css/popup.css">     
</head>
<body>
 	<div>
 		<h1>공지사항</h1>
 		<p>팝업(새창)에 표시되는 내용</p>
 		<p>팝업(새창)에 표시되는 내용</p>
 		<p>팝업(새창)에 표시되는 내용</p>
 		<p>팝업(새창)에 표시되는 내용</p>
 		<button>자세히 보기</button>
 		<p id="close">
 			<a href="javascript:window.close()">창닫기</a>
 		</p>
 	</div>
</body>
</html>

window.onload = openPopup;

function openPopup(){
	var newWin = window.open("popup-result.html", "", "width=200, height=200");
	if(newWin==null){
		alert("팝업이 차단되었습니다. 해제하고 새로고침(F5)를 눌러주세요");
	}
}
main.html
<!DOCTYPE html>

<html lang="ko">
<head>
    <meta charset="utf-8" />
    <title>팝업 창 표시하기</title>    
 </head>
<body>
	<p>이 문서가 열리면 자동으로 팝업(새창)이 표시됨</p>
	<script src="js/popup-result.js"></script>
</body>
</html>

main.html 실행시 main.html 창이 뜨고 팝업창인 popup-result.html 새창을 띄우는 자바스크립트를 이용하였다

 

 

 

<input onkeydown>

input 태그에서 키보드가 눌려졌을 때를 의미하는 속성으로 눌려졌을 때 자바스크립트 함수 호출하는 예제는 다음과 같다

더보기 
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>keycode</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <style>
      #wrapper {
        width:300px;
        margin:0 auto;
        text-align: center;
      }
      input {
        width:100px;
        margin:10px 20px;
      }
      p#keyCodeValue {
        font-size:26px;
        color:blue;
      }
    </style>
  </head>
  <body>
  	<div id="wrapper">
  		<p>텍스트 필드에 키보드 값 입력</p>
  		<form action="">
  			<input onkeydown="keyHandler(event); event.preventDefault()" />
  		</form>
  		<p>눌린 키 : <span id="codeValue"></span></p>
  		<p>눌린 키 코드 : <span id="KeycodeValue"></span></p>
  	</div>
  	<script>
  		function keyHandler(evt){	// evt : event 객체 (이벤트 발생에 대한 모든 내용)
  			var code = evt.code;
  			var keyCode = (evt.keycode) ? evt.keycode : evt.which;
  			
  			document.querySelector("#codeValue").innerText = code;
  			document.querySelector("#KeycodeValue").innerText = keyCode;
  		}
  	</script>
  </body>
</html>

 

위와 같이 입력창에 키보드를 누르면 해당하는 값과 코드를 나타낸다 

 

자바스크립트를 이용한 숫자 맞추기 프로그램

더보기 
<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>숫자 맞히기</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">    
	<link rel="stylesheet" href="css/finding.css">
</head>
<body>
	<div id="wrapper">
		<h1>숫자 맞히기 게임</h1>
		<p>1에서 10 사이의 수를 입력하세요.</p>
		<form action="">
			<label><input type="text" id="try" autocomplete="off" autofocus></label>
			<!-- autocomplete : 자동완성 기능 off시 사용하지 않음  -->
			<input type="button" value="확인" id="check" class="btn btn-1" onclick="finding()">
			<input type="button" value="다시" id="reset" class="btn btn-2" onclick="window.location.reload()">
		</form>
		<div id="display" class="output"></div>
		<div id="counter" class="footer"></div>
	</div>
	<script src = "js/upanddown-result.js"></script>
</body>
</html>
var count = 0; // 시도횟수

var randomNumber = Math.floor(Math.random()*10) + 1; // 컴퓨터의 무작위 수 

document.querySelector("#try").onkeydown = function(e){
	if(e.keyCode == 13 || e.witch == 13 ){		// 13 : enter 키값
		finding();		// 컴퓨터값과 사용자 입력값 비교
	}
}

function finding(){
	var userNumber = document.querySelector("#try").value;
	
	if(userNumber >= 1 && userNumber <= 10){
		if(randomNumber>userNumber){
			document.querySelector("#display").innerHTML = "UP!";
		}else if(randomNumber<userNumber){
			document.querySelector("#display").innerHTML = "DOWN!";
		}else{
			document.querySelector("#display").innerHTML = "정답입니다!";

		}
		document.querySelector("#try").value="";
		count++;
		document.querySelector("#counter").innerHTML = "시도횟수 : " + count;
	}else{
		alert("1에서 10 사이의 숫자를 입력해주세요");
	}
	
}

 

js 파일에서 document.querySelector("#try").onkeydown 코드는 id="try"인 태그에 키보드를 눌렀을 때 (html 파일을 보면 id="try"는 input 태그)

해당 함수가 실행되는 것을 볼 수 있음

 

'JavaScript' 카테고리의 다른 글

[JavaScript] Iterable, Iterator 그리고 Generator  (0) 2023.07.23
[JavaScript] Symbol을 사용하는 이유  (0) 2023.07.20
TIL_210517_자바스크립트 슬라이드 쇼 예제  (0) 2021.05.17
TIL_210513_자바스크립트  (0) 2021.05.13
TIL_210512_JavaScript 기초, 문법 및 예제  (0) 2021.05.12
'JavaScript' Related Articles more