정규표현식
- 문자열에서 특정 문자 조합을 찾기 위한 패턴이다.
# 정규 표현식 표기방법
/ 정규 표현식 패턴/
# test()
정규표현식에 대입한 문자열이 패턴에 적합하면 true, 적합하지 않으면 false를 리턴한다.
- 정규표현식을 사용해서 회원가입 페이지를 만들어보기.
- 완성코드
더보기
HTML 파일 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<script src="./js/regist.js"></script>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function sample6_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ''; // 주소 변수
var extraAddr = ''; // 참고항목 변수
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
addr = data.jibunAddress;
}
// 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
if(data.userSelectedType === 'R'){
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
extraAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if(data.buildingName !== '' && data.apartment === 'Y'){
extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if(extraAddr !== ''){
extraAddr = ' (' + extraAddr + ')';
}
// 조합된 참고항목을 해당 필드에 넣는다.
document.getElementById("sample6_extraAddress").value = extraAddr;
} else {
document.getElementById("sample6_extraAddress").value = '';
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('sample6_postcode').value = data.zonecode;
document.getElementById("sample6_address").value = addr;
// 커서를 상세주소 필드로 이동한다.
document.getElementById("sample6_detailAddress").focus();
}
}).open();
}
</script>
</head>
<body>
<h2>회원가입</h2>
<form action="/regist" name="regform" id="regform" method="post" onsubmit="return sendit()">
<input type="hidden" name="ssncheck" id="ssncheck" value="n">
<p>아이디: <input type="text" name="userid" id="userid" maxlength="20"></p>
<p>비밀번호: <input type="password" name="userpw" id="userpw" maxlength="20"></p>
<p>비밀번호 확인: <input type="password" name="userpw_re" id="userpw_re" maxlength="20"></p>
<p>이름: <input type="text" name="name" id="name" maxlength="10"></p>
<p>휴대폰번호: <input type="text" name="hp" id="hp" maxlength="20"></p>
<p>이메일: <input type="email" name="email" id="email" maxlength="50"></p>
<p>성별: <label for="male">남자</label><input type="radio" name="gender" id="gender" value="남자" checked><label for="female">여자</label><input type="radio" name="gender" id="gender" value="여자"></p>
<p>주민등록번호: <input type="text" name="ssn1" id="ssn1" maxlength="6" class="ssn"> - <input type="password" name="ssn2" id="ssn2" maxlength="7" class="ssn"> <button type="button" onclick="checkSSN()" id="checkbtn">주민등록번호 검증</button></p>
<p>우편번호 <input type="text" name="zipcode" maxlength="5" id="sample6_postcode" placeholder="우편번호"> <button type="button" onclick="sample6_execDaumPostcode()">우편번호 찾기</button></p>
<p>주소: <input type="text" name="address1" id="sample6_address" placeholder="주소"></p>
<p>상세주소: <input type="text" name="address2" id="sample6_detailAddress" placeholder="상세주소"></p>
<p>참고항목: <input type="text" name="address3" id="sample6_extraAddress" placeholder="참고항목"></p>
<p><button type="submit">가입완료</button> <button type="reset">다시작성</button></p>
</form>
</body>
</html>
JavaScipt 파일 코드
isSsnCheck = false;
window.onload = function(){
const ssn1 = document.getElementById('ssn1');
ssn1.addEventListener('keyup', () => {
if(ssn1.value.length >= 6){
document.getElementById('ssn2').focus();
}
})
const ssn = document.querySelectorAll('.ssn');
ssn.forEach((s) => {
// console.log(s);
s.addEventListener('input', () => {
document.getElementById('ssncheck').value = 'n';
})
})
}
function checkSSN(){
const ssn1 = document.getElementById('ssn1');
const ssn2 = document.getElementById('ssn2');
const ssn = ssn1.value + ssn2.value;
const key = [2, 3, 4, 5, 6, 7, 8, 9, 2, 3, 4, 5];
let total = 0;
for(let i=0; i<key.length; i++){
total += parseInt(ssn[i] * key[i]);
}
let result = total % 11;
result= 11 - result;
if(result >= 10) result = result % 10;
if(result == ssn[12]){
alert('유효한 주민등록번호입니다.');
document.getElementById('ssncheck').value = 'y'
}else{
alert('유효하지 않은 주민등록번호입니다.');
}
}
function sendit(){
const userid = document.getElementById('userid');
const userpw = document.getElementById('userpw');
const userpw_re = document.getElementById('userpw_re');
const name = document.getElementById('name');
const hp = document.getElementById('hp');
const email = document.getElementById('email');
const ssncheck = document.getElementById('ssncheck');
const checkbtn = document.getElementById('checkbtn');
const expIdText = /^[A-Za-z]{4,20}$/;
const expPwText = /^(?=.*[A-Za-z])(?=.*[!@#$%^&*+-])(?=.*[0-9]).{4,20}$/; // (): 필수로 들어가야 함
const expNameText = /^[가-힣]+$/;
const expHpText = /^\d{3}-\d{3,4}-\d{4}$/;
const expEmailText = /^[A-Za-z0-9\-\.\_]+@[A-Za-z0-9\-]+\.[A-Za-z]+$/;
if(!expIdText.test(userid.value)){
alert("아이디는 4자이상 20자이하의 영문자로 입력하세요");
userid.focus();
return false;
}
if(!expPwText.test(userpw.value)){
alert('비밀번호는 4자이상 20자이하의 영문자, 숫자, 특수문자를 1자이상 꼭 포함해야 합니다.');
userpw.focus();
return false;
}
if(userpw.value != userpw_re.value){
alert('비밀번호와 비밀번호 확인이 일치하지 않습니다.');
userpw_re.focus();
return false;
}
if(!expNameText.test(name.value)){
alert('이름은 한글로 입력하세요');
name.focus();
return false;
}
if(!expHpText.test(hp.value)){
alert('휴대폰번호는 010-0000-0000 형식으로 입력해주세요');
hp.focus();
return false;
}
if(!expEmailText.test(email.value)){
alert('이메일 형식이 일치하지 않습니다.');
email.focus();
return false;
}
if(ssncheck.value == 'n'){
alert('주민등록번호 유효성검사를 해주세요.');
checkbtn.focus();
return false;
}
return true;
}
- 아이디, 비밀번호 부분
더보기
HTML
<p>아이디: <input type="text" name="userid" id="userid" maxlength="20"></p>
<p>비밀번호: <input type="password" name="userpw" id="userpw" maxlength="20"></p>
<p>비밀번호 확인: <input type="password" name="userpw_re" id="userpw_re" maxlength="20"></p>
JavaScript
function sendit(){
const userid = document.getElementById('userid');
const userpw = document.getElementById('userpw');
const userpw_re = document.getElementById('userpw_re');
const expIdText = /^[A-Za-z]{4,20}$/;
const expPwText = /^(?=.*[A-Za-z])(?=.*[!@#$%^&*+-])(?=.*[0-9]).{4,20}$/;
if(!expIdText.test(userid.value)){
alert("아이디는 4자이상 20자이하의 영문자로 입력하세요");
userid.focus();
return false;
}
if(!expPwText.test(userpw.value)){
alert('비밀번호는 4자이상 20자이하의 영문자, 숫자, 특수문자를 1자이상 꼭 포함해야 합니다.');
userpw.focus();
return false;
}
if(userpw.value != userpw_re.value){
alert('비밀번호와 비밀번호 확인이 일치하지 않습니다.');
userpw_re.focus();
return false;
html 코드에서는 아이디에 타입을 text로 주고 id와 name을 설정하고, 길이를 20으로 제한해 줬다.
비밀번호도 id와 name을 설정, 길이를 20으로 하고 타입을 password로 준다. (password로 주면 보이지 않음 *으로 나타남)
비밀번호 확인은 비밀번호와 id, name만 다르게 설정하고 나머지는 같게 설정을 한다.
javascript에서 id로 각각 불러와준 후 정규표현식으로 설정을 해준다.
아이디 = /^[A-Za-z]{4,20}$/ => ^ 는 시작하는 문자를 이야기하고 [] 안에는 사용할 수 있는 문자를 넣는 것이다. 대문자와 소문자를 같이 사용할 경우 []를 따로 사용하지 않고 한 번에 이어서 넣어준다. {} 안에는 문자의 수를 넣어주는 것이다.(4 ~ 20자로 설정을 한 것임. 단, 띄어쓰기를 하면 안 됨.) 마지막으로 $는 끝을 의미한다.
비밀번호 = /^(?=.*[A-Za-z])(?=.*[!@#$%^&*+-])(?=.*[0-9]).{4,20}$/ => ?= 는 반드시 [] 안에 문자를 포함해야 한다는 의미이고, .은 임의의 한자리 수를 표현하며(개행문자 제외), * 은 앞에 문자가 0개 또는 0개 이상인 경우를 뜻한다. 즉 [A-Za-z] 에서 1가지 문자가 반드시 포함되어야 한다는 의미이다.
뒤에 나오는 특수문자, 숫자도 동일한 의미를 갖는다.
마지막으로 조건문으로 정규표현식과 불러온 id의 값이 맞지 않으면 false을 리턴하는 방식으로 완료가 된다. 이 때 test를 사용하여 비교하면 된다.
추가적으로 비밀번호 확인은 정규표현식을 사용하지 않고, 조건문으로 비밀번호와 비교만 해주면 된다.
- 이름, 휴대폰 번호, 이메일 부분
더보기
HTML
<p>이름: <input type="text" name="name" id="name" maxlength="10"></p>
<p>휴대폰번호: <input type="text" name="hp" id="hp" maxlength="20"></p>
<p>이메일: <input type="email" name="email" id="email" maxlength="50"></p>
JavaScript
const expNameText = /^[가-힣]+$/;
const expHpText = /^\d{3}-\d{3,4}-\d{4}$/;
const expEmailText = /^[A-Za-z0-9\-\.\_]+@[A-Za-z0-9\-]+\.[A-Za-z]+$/;
if(!expNameText.test(name.value)){
alert('이름은 한글로 입력하세요');
name.focus();
return false;
}
if(!expHpText.test(hp.value)){
alert('휴대폰번호는 010-0000-0000 형식으로 입력해주세요');
hp.focus();
return false;
}
if(!expEmailText.test(email.value)){
alert('이메일 형식이 일치하지 않습니다.');
email.focus();
return false;
}
HTML은 아이디, 비밀번호와 비슷한 형식으로 작성을 한다. type값을 넣고, name, id, maxlength를 넣어준다.
JavaScript에는 정규표현식과 조건문을 활용한다.
이름에서는 /^[가-힣]+$/ => [가-힣]은 한글의 범위이고, +는 앞에 문자가 한 개 이상인 경우를 의미한다. 따라서 한글을 한 글자 이상 적어야 한다는 의미이다.
휴대폰번호에서는 /^\d{3}-\d{4}-\d{4}$/ => \d는 숫자([0-9])를 의미한다. 따라서 처음 문자열에는 길이 3만큼 숫자를 넣고 두 번째, 세 번째는 길이 4만큼 숫자를 넣어주라는 의미이다.
이메일에서는 /^[A-Za-z0-9\-\.\_]+@[A-Za-z0-9\-]+\.[A-Za-z]+$/ => 특수 문자나 기호를 사용하고 싶을 때는 앞에 \를 붙여주면 된다. +는 최소한 한 개 이상이라는 의미로 @와 .을 적어줘야 한다는 의미이다.
그럼 이제 조건문을 활용하여 정규표현식에 적합하지 않았을 때 false 를 반환하게 만들면 된다.
- 주민등록번호 부분
더보기
HTML
<input type="hidden" name="ssncheck" id="ssncheck" value="n" /><p>
<p>주민등록번호: <input type="text" name="ssn1" id="ssn1" maxlength="6" class="ssn"> - <input type="password" name="ssn2" id="ssn2" maxlength="7" class="ssn"> <button type="button" onclick="checkSSN()" id="checkbtn">주민등록번호 검증</button></p>
JavaScript
window.onload = function(){
const ssn1 = document.getElementById('ssn1');
ssn1.addEventListener('keyup', () => {
if(ssn1.value.length >= 6){
document.getElementById('ssn2').focus();
}
})
const ssn = document.querySelectorAll('.ssn');
ssn.forEach((s) => {
// console.log(s);
s.addEventListener('input', () => {
document.getElementById('ssncheck').value = 'n';
})
})
}
function checkSSN(){
const ssn1 = document.getElementById('ssn1');
const ssn2 = document.getElementById('ssn2');
const ssn = ssn1.value + ssn2.value;
const key = [2, 3, 4, 5, 6, 7, 8, 9, 2, 3, 4, 5];
let total = 0;
for(let i=0; i<key.length; i++){
total += parseInt(ssn[i] * key[i]);
}
let result = total % 11;
result= 11 - result;
if(result >= 10) result = result % 10;
if(result == ssn[12]){
alert('유효한 주민등록번호입니다.');
document.getElementById('ssncheck').value = 'y'
}else{
alert('유효하지 않은 주민등록번호입니다.');
}
}
const ssncheck = document.getElementById('ssncheck');
if(ssncheck.value == 'n'){
alert('주민등록번호 유효성검사를 해주세요.');
checkbtn.focus();
return false;
}
return true;
HTML에서 주민등록번호 입력 부분과 주민등록번호 유효성 확인 버튼, type을 히든으로 태그를 하나 만들어준다.
JavaScript에서 주민등록번호 앞자리의 값이 조건(6자리)에 맞으면 뒷자리로 넘어갈 수 있도록 addEventListener()를 사용해 focus()를 사용해 주고, 뒷자리까지 모두 입력하면 주민등록번호 유효성 검사 버튼을 눌러 유효성 검사를 해준다. 이때 유효성 검사는 예전에 만들었던 예제를 참고하였다. 유효성 검사를 마치고 유효한 주민등록번호면 ssncheck를 y로 바꿔준다.
이때 만약 주민등록번호 앞이나 뒷자리를 바꾸면 다시 유효성검사를 하게끔 만들기 위해서 querySelectAll()을 사용하여 class가 ssn인 값을 불러준다. 그리고 forEach()를 사용하여 모두 확인하며 addEventListener()에 input() 액션으로 값이 입력되거나 바뀌면 ssnchek를 n으로 바꿔준다.
이런 식으로 주민등록번호 입력칸을 만들었다.
- 우편번호 부분
더보기
HTML
<p>
우편번호
<input type="text" name="zipcode" maxlength="5" id="sample6_postcode" placeholder="우편번호"/>
<button type="button" onclick="sample6_execDaumPostcode()">
우편번호 찾기
</button>
</p>
<p>
주소:
<input type="text" name="address1" id="sample6_address" placeholder="주소"/>
</p>
<p>
상세주소:
<input type="text" name="address2" id="sample6_detailAddress" placeholder="상세주소"/>
</p>
<p>
참고항목:
<input type="text" name="address3" id="sample6_extraAddress" placeholder="참고항목"/>
</p>
JavaScript
<script>
function sample6_execDaumPostcode() {
new daum.Postcode({
oncomplete: function (data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ""; // 주소 변수
var extraAddr = ""; // 참고항목 변수
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === "R") {
// 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else {
// 사용자가 지번 주소를 선택했을 경우(J)
addr = data.jibunAddress;
}
// 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
if (data.userSelectedType === "R") {
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if (data.bname !== "" && /[동|로|가]$/g.test(data.bname)) {
extraAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if (data.buildingName !== "" && data.apartment === "Y") {
extraAddr +=
extraAddr !== ""
? ", " + data.buildingName
: data.buildingName;
}
// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if (extraAddr !== "") {
extraAddr = " (" + extraAddr + ")";
}
// 조합된 참고항목을 해당 필드에 넣는다.
document.getElementById("sample6_extraAddress").value = extraAddr;
} else {
document.getElementById("sample6_extraAddress").value = "";
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById("sample6_postcode").value = data.zonecode;
document.getElementById("sample6_address").value = addr;
// 커서를 상세주소 필드로 이동한다.
document.getElementById("sample6_detailAddress").focus();
},
}).open();
}
</script>
우편번호 부분은 HTML로 작성만 해주고 JavaScript부분은 인터넷에 '다음 우편번호 서비스'를 검색하면 제공하는 코드를 사용하였다. 코드를 복사 붙여 넣기 하고, id나 calss 등 알맞게 바꿔주면 적용된다.
- 결과
더보기
웹페이지 화면
주민등록번호
양이 좀 많아서 사진을 다 넣지않고 중요하다고 생각하는 주민등록번호 부분만 넣게 되었다.
왼쪽을 보면 type='hidden'에 value값이 n에서 y로 바뀌는 것을 알 수 있다. 바뀐 후 다시 input의 값을 변경하면 n으로 바뀐다!
이벤트(Event)
- 웹브라우저가 알려주는 HTML 요소에 대한 사건이 발생하는 것으로, 웹페이지에 사용된 JavaScript는 발생한 이벤트에 반응하여 특정 동작을 수행한다.
- JavaScript는 비동기식 이벤트 중신의 프로그래밍 모델이다.
<!-- 이벤트 예시 -->
<input type='button' onclick='sendit()' value='확인'>
------ ------- --------
이벤트타겟 이벤트타입 이벤트리스너
<button type='button' onclick='sendit()'>확인</button>
------ ------- --------
이벤트타겟 이벤트타입 이벤트리스너
이벤트 타겟(Event Target)
- 이벤트가 일어날 객체를 의미한다.
이벤트 타입(Event Type)
- 발생한 이벤트의 종류를 나타내는 문자열로 이벤트명이라고도 부른다.
- 키보드, 마우스, HTML DOM, window 객체 등 처리하는 이벤트를 제공한다.
더보기
결과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<script>
window.onload = function () {
const text = document.getElementById("text");
text.innerHTML =
"<strong style='color: green; margind: 50px 50px;'>문서 로드</strong>";
};
function chageText(el) {
// el = document.getElementById('p');
el.innerHTML = "<strong style='color: red;'>클릭! 색 바뀐다.</strong>";
}
</script>
</head>
<body>
<h2>이벤트 타입</h2>
<p id="text"></p>
<p id="p" onclick="chageText(this)">클릭!</p>
<!-- this는 자기자신 -->
</body>
</html>
여기서 이벤트 타입은 onclick이 되는 것이다. 클릭을 함으로써 이벤트가 발생한 것이라고 보면 될 것 같다.
이벤트 리스너(Event Listener)
- 이벤트가 발생했을 때 그 처리를 하는 함수로 이벤트 핸들러라고도 부른다.
- 지정된 타입의 이벤트가 특정 요소에서 발생하면 웹브라우저는 그 요소에 등록된 이벤트리스너를 실행한다.
// 이벤트 등록
객체.addEventListener(이벤트타입, 이벤트리스너);
// 이번트 제거
객체.removeEventListener(이벤트타입, 이벤트리스너);더보기
결과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트 리스너</title>
<script>
let btn;
window.onload = function(){
btn = document.getElementById('eventBtn');
btn.addEventListener('click', clickBtn);
btn.addEventListener('mouseover', mouseOverBtn);
btn.addEventListener('mouseout', mouseOutBtn);
const delbtn = document.getElementById('delBtn');
delbtn.addEventListener('click', delEvent);
}
function clickBtn(){
document.getElementById('text').innerHTML = '<strong>버튼을 클릭했어요.</strong>';
}
function mouseOverBtn(){
document.getElementById('text').innerHTML = '<strong>버튼위에 커서가 올라갔어요.</strong>';
}
function mouseOutBtn(){
document.getElementById('text').innerHTML = '<strong>버튼 밖으로 커서가 나갔어요.</strong>';
}
function delEvent(){
btn.removeEventListener('click', clickBtn);
btn.removeEventListener('mouseover', mouseOverBtn);
btn.removeEventListener('mouseout', mouseOutBtn);
document.getElementById('text').innerHTML = '<strong></strong>';
}
</script>
</head>
<body>
<h2>이벤트 리스너</h2>
<p><button id="eventBtn">이벤트 버튼</button> <button id="delBtn">이벤트 삭제 버튼</button></p>
<p id="text"></p>
</body>
</html>
위를 보면 btn 이라는 객체를 만들어 사용하게 만들었다. btn을 밖에 만들어 준 이유는 delEvent에 사용하기 위함.
먼저 window.onload로 웹페이지에 요소들을 사용할 수 있게 만들어주고, id를 사용해 버튼을 불러왔다.
그리고 addEventListener의 이벤트 타입들을 이용해서 변화가 생기게 만들어주었다. HTML에서 이벤트 객체의 액션이 이행되면 이벤트 리스너 함수가 사용되어 각각의 행동들이 이뤄진다.
삭제 버튼에는 remove를 사용하여 이벤트를 삭제해 주었다.
이벤트 객체(Event Object)
- 특정 타입의 이벤트와 관련이 있는 객체로 이벤트리스너가 호출할 때 인수로 전달된다.
- 이벤트 객체는 해당 타입의 이벤트에 대한 상세 정보를 저장하고 있다.
- 모든 이벤트 객체는 이벤트의 타입을 나타내는 type 프로퍼티와 이벤트 대상을 나타내는 target 프로퍼티를 가지고 있다.
// 이벤트 객체 예시
button type=button onclick='sendit()'>완료</button>
<script>
function sendit(e){
....
// e.target = button
// e.type = click
}더보기
결과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트 객체</title>
<script>
window.onload = function(){
const btn = document.getElementById('btn');
btn.addEventListener('click', clickBtn);
}
function clickBtn(e){
console.log(e);
console.log(e.target); // target은 button 객체
console.log(e.target.id);
console.log(e.target.value);
console.log(e.type);
}
</script>
</head>
<body>
<h2>이벤트 객체</h2>
<button type="button" id="btn" value="확인">확인</button>
</body>
</html>
위에서 e는 이벤트 객체이고, target은 button 객체를 의미한다. addEventListener의 click 액션이 이행되면 이벤트리스너인 clickBtn 함수가 실행되고 이벤트 객체 e의 target으로 button 객체를 불러온다.
더보기
결과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>이벤트 객체</title>
<script>
let btn;
window.onload = function () {
const btn1 = document.getElementById("btn1");
const btn2 = document.getElementById("btn2");
const btn3 = document.getElementById("btn3");
btn1.addEventListener("click", clickBtn);
btn2.addEventListener("click", (e) => {
console.log("버튼 2이 눌렸어요");
});
btn3.addEventListener("click", (e) => {
console.log(e.target.value);
});
};
function clickBtn(e) {
switch (e.target.id) {
case "btn1":
console.log("버튼 1이 눌렸어요.");
break;
// case 'btn2':
// console.log('버튼 2가 눌렸어요.');
// break;
}
// console.log(e.target.value);
}
</script>
</head>
<body>
<h2>이벤트 객체</h2>
<button type="button" id="btn1" value="버튼 1이 눌렸어요.">버튼1</button>
<button type="button" id="btn2" value="버튼 2가 눌렸어요.">버튼2</button>
<button type="button" id="btn3" value="버튼 3이 눌렸어요.">버튼3</button>
</body>
</html>
여기서는 2가지 방법으로 버튼이 눌리면 console창에 띄워보았다.
첫 번째는 버튼을 누르는 액션을 취하면 이벤트리스너인 clickBtn 함수로 넘어가서 swich-case를 사용하여 console 창에 문구를 띄웠다.
두 번째는 버튼을 누르면 이벤트리스너를 화살표 함수로 하여 코드수를 낭비하지 않고 만들었다.
마지막은 두 번째와 같은 방식이지만 button객체의 value값에 문구를 넣어두고 console창에 value값을 띄우는 방식으로 만들었다.
'Web > javascript' 카테고리의 다른 글
| Node.js buffer, stream, pipe (0) | 2024.04.25 |
|---|---|
| Node.js (비)동기, Promise, JSON, fetch, module, import... 등 (0) | 2024.04.23 |
| Node.js 이터레이터, 이터러블, 스프레드 연산자 (0) | 2024.04.23 |
| JavaScript 제어문, 배열, 배열 반복, 함수, 객체1 (0) | 2024.04.16 |
| JavaScript 변수, 데이터 타입, 타입변환 함수, 연산자 (1) | 2024.04.15 |