본문 바로가기
✨ Front-end/자바스크립트(JS)

[JavaScript] getElementById와 addEventListener(이벤트리스너)

by 환풍 2023. 2. 12.
728x90
반응형

자바스크립트란?

자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어이다.
스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행된다.

 

HTML과 CSS, JS를 이용해 버튼을 만들어 간단한 alert 기능을 구현해보았다.

 

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
    <table>
        <tr>
            <td>
                <div class="alert-box" id="alert"><p>알림</p></div>
            </td>
        </tr>
        <tr>
            <td>
                <button onclick="alertOpenClose('block');" id="b1">버튼</button>
                 <button onclick="alertOpenClose('none');" id="b1">닫기</button>
            </td>
        </tr>
        
    </table>
    
</div>
<button class="ev" id="close">EventListener를 이용해서 닫음</button>
 
 
<hr>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
cs

 

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.container{
   
    
    padding: 10px;
}
table{
    margin: 0 auto;
    
}
p{
    text-align: center;
    font-size: 20px;
    font-weight:bold
}
.alert-box{
    background-color: skyblue;
    padding: 20px;
    color: white;
    border-radius: 5px;
    display: none;
}
#b1{
    padding: 5px;
    
    
}
.ev{
    
    width: fit-content;
    margin: auto;
    display: block;
    padding: 20px;
    font-size: 20px;
    font-weight: bold;
}
cs

 

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// function alertOpen(){
 //     document.getElementById('alert').style.display='block';
// }
 
// function alertClose(){
 //     document.getElementById('alert').style.display='none';
// }
 
//function 활용해서 파라미터 추가해 하나로 출력하기
 function alertOpenClose(oC){
     document.getElementById('alert').style.display = oC;
 }
alertOpenClose('block');
alertOpenClose('none');
        
// 닫기버튼 이벤트리스너로 만들기.
 //function은 콜백함수이다. 
 document.getElementById('close').addEventListener('click',function(){
     document.getElementById('alert').style.display='none';
 })
cs

2번째 줄은 document.getElementByID에 있는 id 값을 ~~로 바꾸어라 라는 의미이다.

즉, id값으로 alert로 받아온 css의 style에 display 속성을 block으로 바꾸는 것이다.

 

이와 같은 방법으로 버튼을 만들어 alert의 열고 닫기를 구현해보았고, 이벤트리스너로도 만들어보았다.

18번째 줄의 이벤트리스너의 'click'을 누르면 그 앞에있는 document.getElementById('close')를 실행하라는 의미이다.

실행은 function() 뒤에 19번째 줄부터 시작하는 코드가 도와준다.

 

 

728x90
반응형
저작자표시 비영리 변경금지

'✨ Front-end > 자바스크립트(JS)' 카테고리의 다른 글

[JavaScript] 상품 리스트 만들어보기  (0) 2023.02.20
[JavaScript] jQuery 이용해서 이미지 슬라이드 만들기 (캐러셀)  (0) 2023.02.19
[JavaScript] 타이머 예제 setInterval, clearInterval, timeOut  (1) 2023.02.19
[JavaScript] if문으로 HTML 배경 Dark, White모드 만들기  (0) 2023.02.19
[JavaScript] classList와 jQuery 사용 방법  (0) 2023.02.19

관련글

댓글

티스토리툴바