1. 드롭다운 목록 활용하기
🐰 드롭다운 목록은 select 태그로 구현
드롭 다운 목록을 선택했을 때(값이 변경 되었을 때) 어떤 것을 선택했는지 출력
<head>
<script>
document.addEventListener('DOMContentLoaded', function () {
const select = document.querySelector('select');
const p = document.querySelector('p');
select.addEventListener('change', (event) => {
const options = event.currentTarget.options; // option을 배열로 반환
const index = event.currentTarget.options.selectedIndex;
// 선택한 index 추출
console.log(options)
p.textContent = `선택: ${options[index].textContent}`;
// 선택한 option 태그를 추출
})
});
</script>
</head>
<body>
<select>
<option>떡볶이</option>
<option>순대</option>
<option>오뎅</option>
<option>튀김</option>
</select>
<p>선택: 떡볶이</p>
</body>💡 글자 입력 양식의 change 이벤트
- 입력 양식은 값이 변경될 때 change 이벤트를 발생.
- 글자 입력 양식은 입력 양식을 선택(focus 상태)해서 글자를 입력하고, 선택을 해제(blur)할 때 change 이벤트를 발생함
- 따라서 사용자가 입력하는 중에는 change 이벤트가 발생 x
💡 selectedIndex : 선택한 option의 index 반환
💡 multiple select 태그 : select 태그에 multiple 속성을 부여하면 ctrl이나 shift를 누르고 복수의 항목을 선택 가능
<head>
<script>
document.addEventListener('DOMContentLoaded', function () {
const select = document.querySelector('select');
const p = document.querySelector('p');
select.addEventListener('change', (event) => {
const options = event.currentTarget.options; // option을 배열로 반환
// console.log(options)
const list = []
for (const option of options) { // options에는 forEach() 메소드가 없어서 for문을 돌림
//console.log(option.selected)
if (option.selected) { // selected 속성 확인
list.push(option.textContent);
}
}
p.textContent = `선택: ${list.join(',')}`
})
});
</script>
</head>
<body>
<select multiple>
<option>떡볶이</option>
<option>순대</option>
<option>오뎅</option>
<option>튀김</option>
</select>
<p></p>
</body>
2. 체크 박스 활용
🐰 체크박스의 체크 상태를 확인할 때는 입력양식의 checked 속성을 사용
체크 상태일때만 타이머를 증가시키는 프로그램
<head>
<script>
document.addEventListener('DOMContentLoaded', function () {
const input = document.querySelector('input');
const h1 = document.querySelector('h1');
let count = 0
let timerId;
input.addEventListener('change', (event) => {
console.log(event.currentTarget.checked);
if (event.currentTarget.checked) { //체크 상태
timerId = setInterval(() => {
h1.textContent = `${count++}초`
}, 1000)
} else { // 체크 해제 상태
clearInterval(timerId)
}
});
});
</script>
</head>
<body>
<input type="checkbox">
<span>타이머 활성화</span>
<h1></h1>
</body>
3. 라디오 버튼 활용
🐰 라디오 버튼은 name 속성이 동일하면 하나만 선택할 수 있음
🐰 체크박스와 마찬가지로 checked 속성 사용
<head>
<script>
document.addEventListener('DOMContentLoaded', function () {
// 문서 객체 추출하기
const output = document.querySelector('#output');
const radios = document.querySelectorAll('[name=pet]');
// 모든 라디오 버튼에
radios.forEach((radio) => {
// 이벤트 연결
radio.addEventListener('change', (event) => {
const current = event.currentTarget;
if (current.checked) {
output.textContent = `좋아하는 애완동물은 ${current.value}이시군요!`;
}
});
});
});
</script>
</head>
<body>
<h3># 좋아하는 애완동물을 선택해주세요</h3>
<label><input type="radio" name="pet" value="강아지">
<span>강아지</span></label>
<label><input type="radio" name="pet" value="고양이">
<span>고양이</span></label>
<label><input type="radio" name="pet" value="햄스터">
<span>햄스터</span></label>
<label><input type="radio" name="pet" value="기타">
<span>기타</span></label>
<hr>
<h3 id="output"></h3>
</body>
💡 name 속성이 없는 라디오 버튼
- 버튼을 여러 개 선택할 수 있다. 한 번 선택하고 나면 취소할 수도 없음
4. 기본 이벤트 막기
🐰 기본 이벤트 : 어떤 이벤트가 발생했을 때 웹 브라우저가 기본적으로 처리해주는 것
🐰 기본 이벤트를 제거할 때는 event 객체의 preventDefault() 메소드를 사용
이미지 마우스 오른쪽 버튼 클릭 막기
웹 브라우저는 이미지에서 마우스 오른쪽 버튼을 클릭하면 컨텍스트 메뉴 contextmenu를 출력
<head>
<script>
document.addEventListener('DOMContentLoaded', function () {
const imgs = document.querySelectorAll('img');
imgs.forEach((img) => {
img.addEventListener('contextmenu', (event) => {
event.preventDefault(); // 컨텍스트 메뉴를 출력하는 기본 이벤트 제거
});
});
});
</script>
</head>
<body>
<img src="http://placebear.com/300/300" alt="">
</body>
체크 때만 링크 활성화 하기
<head>
<script>
document.addEventListener('DOMContentLoaded', function () {
let status = false;
const checkbox = document.querySelector('input');
checkbox.addEventListener('change', (event) => {
status = event.currentTarget.checked;
});
const link = document.querySelector('a');
link.addEventListener('click', (event) => {
if (!status) {
event.preventDefault(); // status가 false가 아니면 링크의 기본 이벤트 제거.
}
});
});
</script>
</head>
<body>
<input type="checkbox">
<span>링크 활성화</span>
<br>
<a href="http://naver.co.kr">네이버</a>
</body>
5. 참가신청 명단
1) 새 노드 추가하고 표시하기
-> input 태그에 문자열을 입력하고 [신청] 버튼을 클릭하면, nameList에 문자열이 추가
2) 추가시 맨위로 가도록 변경
<head>
<link rel="stylesheet" href="./css/name_list.css">
<script>
document.addEventListener('DOMContentLoaded', function () {
const input = document.querySelector('#userName');
const btn = document.querySelector('button');
const list = document.querySelector('#nameList');
btn.addEventListener('click', function (event) {
// 기본 이벤트(submit) 막기
// event.preventDefault();
// 1. input 태그에 있는 문자열을 들고와서 새로운 요소 만들기
const name = document.createElement('p');
name.textContent = input.value;
// del 키워드 추가
const delBtn = document.createElement('span');
delBtn.textContent = 'X';
delBtn.setAttribute('class','del');
// 새로 생성된 요소에 이벤트를 추가할 경우에는 생성될 때 마다 이벤트를 등록해야 함.
delBtn.addEventListener('click', function () {
if (confirm("삭제하시겠습니까?")) {
// '현재 노드(this)의 부모 노드(= p태그)의 부모 노드'를 찾아 '현재 노드의 부모 노드' 삭제
this.parentNode.parentNode.removeChild(this.parentNode);
}
})
name.appendChild(delBtn);
// 2. nameList에 새로운 요소 추가하기
// list.appendChild(name);
list.insertBefore(name, list.childNodes[0]); // p 요소를 #nameList 맨 앞에 추가하기
// 3. input 태그에 있는 문자열 제거하기
input.value = ''; //텍스트 필드 지우기
});
});
</script>
</head>
<body>
<div id="container">
<h1>참가 신청</h1>
<form action="">
<input type="text" id="userName" placeholder="이름" required>
<button>신청</button>
</form>
<hr>
<div id="nameList"></div>
</div>
</body>
[ 내용참고 : IT 학원 강의 및 책 '혼자 공부하는 자바스크립트' ]
'Programming Language > JavaScript' 카테고리의 다른 글
| [JavaScript] 회원가입 예제 (0) | 2024.04.05 |
|---|---|
| [JavaScript] 주문서 작성 (0) | 2024.04.05 |
| [JavaScript] 키보드 이벤트 및 관련 속성, 이벤트 발생 객체 - 리스너를 외부로 빼낸 경우 와 글자입력 양식 이벤트 (0) | 2024.04.03 |
| [JavaScript] 이벤트 핸들러 등록과 제거 (0) | 2024.04.02 |
| [JavaScript] 글자·스타일·속성 조작하기, 문서 객체 생성·이동·제거하기 (0) | 2024.04.02 |