지난번에 이어 JavaScript 복습하기!
그 중에서 JavaScript 에서 중요한 EventListener 파트에 대해 공부할 예정이다
Alert 2개 만들기
[1] 각각의 함수 만들기
- 어려우면 한글로 먼저 따라써보기
- p태그를 어떻게 지정해야할지 몰라 헤맸는데, id를 부여해주면 해결되는 문제였다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!-- UI 만드는 법 : 1. 미리디자인해놓고 숨김 2. 버튼 누르거나 하면 보여줌 -->
<div class="alert-box" id="alert">
<p id="title">Alert 박스</p>
<button onclick="alertToggle('none')">닫기</button>
</div>
<button onclick="alertId()" >아이디</button>
<button onclick="alertPassword()">비밀번호</button>
<script>
// 참고
// class selector를 이용하기
// 인덱싱가능(class 중 2번째거 찾기)
// document.getElementsByClassName('alert-box')[2].inner~
function alertId() {
// 제목바꾸기
document.getElementById('title').innerHTML = '아이디를 입력하세요'
// 열기
alertToggle('block')
// document.getElementById('alert').style.display = 'block'
}
function alertPassword() {
document.getElementById('title').innerHTML = '비밀번호를 입력하세요'
alertToggle('block')
}
//alert 상태를 변경하는 함수
function alertToggle(arg) {
document.getElementById('alert').style.display = arg
}
</script>
</body>
</html>
[2] 파라미터 활용하기
- 개인적으로는 글이 길어지면 파라미터도 길어져 가시성은 좀 아쉬움
- 상황에 맞게 활용해야 할 듯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!-- UI 만드는 법 : 1. 미리디자인해놓고 숨김 2. 버튼 누르거나 하면 보여줌 -->
<div class="alert-box" id="alert">
<p id="title">Alert 박스</p>
<button onclick="alertToggle('none')">닫기</button>
</div>
<button onclick="alertChange('아이디를 입력하세요')" >아이디</button>
<button onclick="alertChange('비밀번호를 입력하세요')">비밀번호</button>
<script>
function alertChange(arg) {
// 제목바꾸기
document.getElementById('title').innerHTML = arg
// 열기
document.getElementById('alert').style.display = 'block'
}
//alert 상태를 변경하는 함수
function alertToggle(arg) {
document.getElementById('alert').style.display = arg
}
</script>
</body>
</html>
[3] addEventListener 사용하기
- Event 종류에는 click 외에도 keydown, scroll, mouseover 등 다양한게 있다
- getElement 를 이용해 얻은 요소에 특정 event가 발생하면 function부분을 실행한다.
document.getElementById('close').addEventListener('click', function(){
document.getElementById('alert').style.display = 'none'
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!-- UI 만드는 법 : 1. 미리디자인해놓고 숨김 2. 버튼 누르거나 하면 보여줌 -->
<div class="alert-box" id="alert">
<p id="title">Alert 박스</p>
<button id="close">닫기</button>
</div>
<button onclick="alertChange('아이디를 입력하세요')" >아이디</button>
<button onclick="alertChange('비밀번호를 입력하세요')">비밀번호</button>
<script>
document.getElementById('close').addEventListener('click', function(){
document.getElementById('alert').style.display = 'none'
})
// event에는 click 외에도 keydown, scroll, mouseover 등 다양한게 있음
function alertChange(arg) {
// 제목바꾸기
document.getElementById('title').innerHTML = arg
// 열기
document.getElementById('alert').style.display = 'block'
}
</script>
</body>
</html>
- Vue에서는 v-on으로 간편하게 사용할 수 있는 EventListener
- Vue를 한창하다가 오랜만에 JS에서 EventListener를 사용하니까 조금 헷갈렸다!
'개발새발개발 > JavaScript' 카테고리의 다른 글
| JavaScript - AlertBox 만들기 3편(jQuery 라이브러리와 설치법) (1) | 2024.12.14 |
|---|---|
| JavaScript - Alert Box 만들기 1편(요소 선택 및 변경, Alert 1개 만들기) (1) | 2024.12.12 |
댓글