Learn & Record
JavaScript (참가신청 최종, 주문 프로그램, 회원가입) 본문
1. 참가신청 최종
- 화살표 함수와 일반 함수는 this가 다름
- this를 사용하려면 이벤트 리스너의 콜백 함수에서 화살표 함수를 사용하지 않거나
- this대신 event.currentTarget을 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./css/name_list.css">
<script>
document.addEventListener('DOMContentLoaded', function() {
const btn = document.querySelector('button')
const userName = document.querySelector('#username')
const nameList = document.querySelector('#nameList')
btn.addEventListener('click', function (event){
// 기본 이벤트 (submit) 막기
event.preventDefault(); // submit 방지
// 1. 새로운 요소를 만들고, input 태그에 있는 문자열을 추가
// createElement() : 새로운 요소를 만듬
const item = document.createElement('p'); // 새 p 요소 만들기
item.textContent = userName.value;
const del = document.createElement('span')
del.textContent = "X"
del.setAttribute('class', 'del')
// 2. nameList에 새로 만든 요소 추가하기
// nameList.appendChild(item); // p 요소를 element
item.appendChild(del)
nameList.insertBefore(item, nameList.childNodes[0]); // p요소를 #nameList 맨 앞에 추가하기
// 새로 생성된 요소에 이벤트를 추가할 경우에는 생성될 때 마다 이벤트를 등록해야 함
del.addEventListener('click', function(event) {
if (confirm('삭제하시겠습니까?')) {
event.currentTarget.parentNode.parentNode.removeChild(event.currentTarget.parentNode);
}
})
// 3. input태그에 문자열 제거하기
userName.value = ''; // 텍스트 필드 지우기
})
})
</script>
</head>
<body>
<div id="container">
<h1>참가 신청</h1>
<form action="">
<input type="text" id="username" placeholder="이름" required>
<button id="upLoad">신청</button>
</form>
<hr>
<div id="nameList"></div>
</div>
</body>
</html>
2. 주문 프로그램
- 1) id값 또는 class 값을 요소에 접근 방법
- id 값이나 class 값을 사용해 폼 요소에 접근하는 방법은 DOM의 다른 요소에 접근하는 것과 같음
- querySelector() 함수나 querySelectorAll() 함수를 사용해서 특정 id값이나 class 값을 가진 요소에 접근 할 수 있음
- 텍스트 필드에 있는 값을 가져오기 위해서는 텍스트 필드에 접근하는 소스 뒤에 value속성을 붙임
console.log(document.getElementById('billingName').value)
console.log(document.querySelector('[name=billingName]').value)
- 2) name 값을 사용해 폼 요소에 접근하기
- 폼 요소에 id나 class 속성이 없고 name 속성만 있다면 name 식별자를 사용해 폼 요소에 접근할 수도 있음
- id나 calss 속성은 웹 개발에 css를 사용하기 시작하면서부터 등록했지만,
- name 속성은 자바스크립트에서 폼 요소를 구별하고 접근할 수 있도록 HTML 초기부터 사용하는 방법
- 이 방법을 사용하려면 <form> 태그에 name 속성이 저장되어 있어야 하고,
- <form> 태그 안에 포함된 폼 요소에도 name 속성이 있어야 함
- name 속성을 사용해 폼 요소에 접근하려면 form의 name 값부터 폼 요소의 name값까지 계층을 따라 하나씩 지정
- 폼 안에 있는 텍스트 필드에 접근하려면 <form>의 name 값과 텍스트 필드의 name 값을 사용
- submit시에 input의 name은 서버로 전송. 하지만 form의 name은 서버로 전송되지 않음
console.log(document.order.billingName.value)
- 3) 폼 배열을 사용해 폼 요소에 접근하기
- document의 속성 중 forms 속성은 문서 안에 있는 <form> 태그를 모두 가져와 배열 형태로 반환
- 이 방법은 폼 요소에 id나 class 속성도 없고 name 속성도 없을 때 유용
- <form> 태그 안에 포함된 요소에 접근하려면 elements 속성을 사용
- 해당 폼 안에 있는 모든 폼 요소를 가져오는 속성
- 인덱스 번호로 접근
console.log(document.forms[0].elements[1].value)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./css/order.css">
<script>
document.addEventListener('DOMContentLoaded', function () {
const check = document.querySelector('#shippingInfo') // 체크박스 id는 shippingInfo
let status = false;
check.addEventListener('change', function(event) { // check 요소에 clcik 이벤트가 발생했을 때 함수
// status = event.currentTarget.checked;
// if (status) {
// document.querySelector('#shippingName').value = document.querySelector('#billingName').value;
// document.querySelector('#shippingTel').value = document.querySelector('#billingTel').value;
// document.querySelector('#shippingAddr').value = document.querySelector('#billingAddr').value;
// }
if (check === 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 = ''
}
})
});
</script>
</head>
<body>
<!-- 배송 정보 자동으로 입력하기 1 -->
<div id="container">
<form 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="text" 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 name="ship">
<fieldset>
<legend> 배송 정보</legend>
<ul>
<li>
<input type="checkbox" id="shippingInfo" name="shippingInfo">
<label class="check">주문 정보와 배송 정보가 같습니다</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="text" 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>
</form>
<button type="submit" class="order">결제하기</button>
</div>
</body>
</html>
3. 회원가입 프로그램
- 1) 회원 가입 페이지 입력 값 검증하기
- [가입하기] 버튼을 클릭하면 아이디 글자 수 확인하기
- 2) 비밀번호 확인하기
- 비밀번호 필드에 입력한 내용의 글자 수가 8자리 이상인지 확인
- 비밀번호 확인 필드에 입력한 값이 비밀번호의 필드 값과 같은지 확인
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./css/register.css">
<script>
document.addEventListener('DOMContentLoaded', function () {
const btnSubmit = document.querySelector('.btn.btnBlack'); // 가입하기 버튼
const userId = document.getElementById('user-id'); // 아이디 필드
const frmRegister = document.getElementById('register') // 폼태그
const pw1 = document.querySelector('#user-pw1') // 비밀번호 필드
const pw2 = document.querySelector('#user-pw2') // 비밀번호 필드
btnSubmit.addEventListener('click', function () {
const idLength = document.querySelector('#user-id').value.length
console.log(idLength)
if (idLength < 4 || idLength > 15) {
// userId 필드 내용의 길이가 4미만이거나 15 보다 더 큰 경우 실행
alert('4~15자리로 입력하세요.'); // 오류 메시지 출력
/*
select() : 사용자가 기존에 입력한 값을 선택
focus() : 사용자가 기존에 입력한 값을 지우고 새로운 값을 입력하도록 텍스트 필드에 커서를 가져다 놓음
*/
userId.select()
return;
}
frmRegister.submit();
})
pw1.addEventListener('change', function () {
if (pw1.value.length < 8) {
alert('비밀번호는 8자리 이상이어야 합니다.')
pw1.value=''; // 비밀번호 필드 지움
pw1.focus(); // 비밀번호를 다시 입력할 수 있도록 포커싱
}
})
// pw2 요소에 change 이벤트가 발생했을 때 실행
pw2.addEventListener('change', function () {
if (pw1.value != pw2.value) { // pw1과 pw2가 값이 틀리면 실행
alert('비밀번호가 다릅니다.')
pw1.focus(); // 비밀번호를 다시 입력할 수 있도록 포커싱
}
});
//
const btnTrans = document.querySelector('span.trans');
btnTrans.addEventListener('click', function (e) {
if (pw1.getAttribute('type') == 'password') {
pw1.setAttribute('type', 'text')
e.currentTarget.textContent = '패스워드로 변환';
}
else {
pw1.setAttribute('type', 'password')
e.currentTarget.textContent = '문자로 변환';
}
})
})
</script>
</head>
<body>
<div id="container">
<h1>회원 가입</h1>
<form action="#" id="register">
<ul id="user-info">
<li>
<label for="user-id" class="field">아이디</label>
<input type="text" name="user-id" id="user-id" placeholder="4~15자리로 입력" required>
</li>
<li>
<label for="email" class="field">이메일</label>
<input type="email" name="email" id="email" required>
</li>
<li>
<label for="user-pw1" class="field">비밀번호</label>
<input type="password" name="user-pw1" id="user-pw1" placeholder="8자리 이상" required>
<span class="trans">문자로 변환</span>
</li>
<li>
<label for="user-pw2" class="field">비밀번호 확인</label>
<input type="password" name="user-pw2" id="user-pw2" required>
</li>
<li>
<label class="field">메일링 수신</label>
<label class="r"><input type="radio" value="yes" name="mailing">예</label>
<label class="r"><input type="radio" value="no" name="mailing">아니오</label>
</li>
</ul>
<ul id="buttons">
<li>
<input type="button" class="btn btnBlack" value="가입하기">
</li>
<li>
<input type="reset" class="btn btnGray" value="취소">
</li>
</ul>
</form>
</div>
</body>
</html>
공부 과정을 정리한 것이라 내용이 부족할 수 있습니다.
부족한 내용은 추가 자료들로 보충해주시면 좋을 것 같습니다.
읽어주셔서 감사합니다 :)
'Dev > HTML CSS JS' 카테고리의 다른 글
'Dev/HTML CSS JS' Related Articles
more
