Front-End/Javascript
Javascript
개발하는 구름이
2023. 4. 29. 23:45
# Javascript 코드 위치
- style과 마찬가지로 HTML보다 미리 불러와서 처리하도록 구현
- style보다는 아래 배치
- 체크박스는 onclick으로 하면 정확하게 캐치가 안되서 oninput,onchange를 사용 (onchange를 더 선호)
자바스크립트를 쓰고 싶다면 HTML 내부에 <script> 태그를 생성해야 한다
type을 어떻게 설정하느냐에 따라 다른 언어로 인식(기본값 = text/javascript)
아래는 자바스크립트를 사용한 예제 1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript 폼 최종 처리 코드</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
<link rel="stylesheet" type="text/css" href="css/load.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/commons.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/test.css">
<script type="text/javascript">
function memberIdCheck(){
var memberIdInput = document.querySelector("[name=memberId]");
var memberId = memberIdInput.value;
var memberIdRegex = /^[a-z][a-z0-9]{7,19}$/;
memberIdInput.classList.remove("valid", "invalid");
if(memberIdRegex.test(memberId)) {
memberIdInput.classList.add("valid");
}
else {
memberIdInput.classList.add("invalid");
}
}
function memberPwCheck(){
var memberPwInput = document.querySelector("[name=memberPw]");
var memberPw = memberPwInput.value;
var memberPwRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$])[A-Za-z0-9!@#$]{8,16}$/;
memberPwInput.classList.remove("valid", "invalid");
if(memberPwRegex.test(memberPw)) {
memberPwInput.classList.add("valid");
}
else {
memberPwInput.classList.add("invalid");
}
}
//어떻게 하면 기존 코드를 활용해서 최소한의 코드로 검사를 할 것인가?
//[1] 아이디 검사를 실시
//[2] 비밀번호 검사를 실시
//[3] valid 클래스가 붙은 입력창의 개수를 세어서 원하는 숫자면 전송
// - (추가) 여러 개를 선택하려면 document.querySelectorAll("선택자");
function formCheck(){
memberIdCheck();
memberPwCheck();
var list = document.querySelectorAll(".form-input[name].valid");
//console.log(list);
return list.length == 2;
}
</script>
</head>
<body>
<form action="https://www.naver.com" onsubmit="return formCheck();">
<div class="container-500">
<div class="row center">
<h1>폼 검사 예제</h1>
</div>
<div class="row">
<label>아이디</label>
<input type="text" name="memberId" class="form-input w-100"
onblur="memberIdCheck();">
<div class="valid-message">아이디 통과</div>
<div class="invalid-message">아이디 오류</div>
</div>
<div class="row">
<label>비밀번호</label>
<input type="text" name="memberPw" class="form-input w-100"
onblur="memberPwCheck();">
<div class="valid-message">비밀번호 통과</div>
<div class="invalid-message">비밀번호 오류</div>
</div>
<div class="row">
<button type="submit" class="form-btn positive w-100">등록</button>
</div>
</div>
</form>
</body>
</html>2
//onload 대신 addEventListener 함수를 사용하면
//여러 개를 덮어쓰기 없이 추가 가능
//- ("이벤트 이름",함수를 매개변수로 사용)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
<link rel="stylesheet" type="text/css" href="css/load.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/commons.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/test.css">
<script type="text/javascript">
//독립형 자바스크립트 템플릿
window.addEventListener("load", function(){
//var redBtn = document.getElementById("red-btn");
var redBtn = document.querySelector("#red-btn");
redBtn.addEventListener("click", function(){
var target = document.querySelector("#target");
target.style.color = "red";
});
document.querySelector("#orange-btn")
.addEventListener("click", function(){
var target = document.querySelector("#target");
target.style.color = "orange";
});
document.querySelector("#yellow-btn")
.addEventListener("click", function(){
var target = document.querySelector("#target");
target.style.color = "yellow";
});
document.querySelector("#green-btn")
.addEventListener("click", function(){
var target = document.querySelector("#target");
target.style.color = "green";
});
document.querySelector("#blue-btn")
.addEventListener("click", function(){
var target = document.querySelector("#target");
target.style.color = "blue";
});
});
</script>
</head>
<body>
<div class="container-600">
<div class="row">
<h1 id="target">Hello Javascript</h1>
</div>
<div class="row">
<button type="button" id="red-btn" class="form-btn neutral">빨강</button>
<button type="button" id="orange-btn" class="form-btn neutral">주황</button>
<button type="button" id="yellow-btn" class="form-btn neutral">노랑</button>
<button type="button" id="green-btn" class="form-btn neutral">초록</button>
<button type="button" id="blue-btn" class="form-btn neutral">파랑</button>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
<link rel="stylesheet" type="text/css" href="css/load.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/commons.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/test.css">
<script type="text/javascript">
//독립형 자바스크립트 템플릿
//목표 : .confirm-link를 누르면 확인창 출력 후 확인 클릭 시 이동(취소 시 차단)
window.addEventListener("load", function(){
// (주의)
//- 독립형 스크립트에서는 이벤트 방지가 return flase가 아니다.
//- 실제 이벤트 정보가 담긴 객체를 사용하여 차단 처리
//- 함수에 매개변수를 선언하면 자동으로 클릭 이벤트 정보가 담김
//- return flase대신 e.preventDefault() 사용
document.querySelector(".confirm-link")
.addEventListener("click",function(e){
//return flase;//안됨
//console.log(e);
//e.preventDefault(); //차단 명령 (지정되어있는 명령)
var choice = window.confirm("정말 이동하시겠습니까?");
if(choice == false){
e.preventDefault();
}
});
});
</script>
</head>
<body>
<div class="container-600">
<div class="row center">
<h1>제목</h1>
</div>
<div class="row">
<a href="http://www.google.com" onclick="return flase">클릭안됨</a>
</div>
<div class="row">
<a href="https://www.google.com" class="confirm-link">클릭안됨</a>
</div>
</div>
</body>
</html>