본문 바로가기
웹개발/JavaScript

[자바스크립트] 알림창 띄우기, 이벤트리스너

by 철없는민물장어 2023. 1. 16.
728x90
반응형

자바스크립트로 HTML을 조작할 수 있다.

<h4>안녕하세요</h4>

안녕하세요 라고 적힌 글을 

자바스크립트를 이용해서 조작 해 보자.

 

 


<h4 id="hello">안녕하세요</h4>
    
    <script>
        
        document.getElementById('hello').innerHTML='안녕안하세요';
        document.getElementById('hello').style.background='red';
        
        }
    </script>

id를 hello로 만들어 준 뒤,

아래에 script 태그를 열어

document.getE... 블라블라 적어주면 된다.

innerHTML으로 내용을 안녕안하세요 로 바꾸고, style.background를 red로 설정했더니 잘 적용된 모습이다.

 


버튼을 누르면 나타나는 알림창 만들기
    <div class="alert-box" id="alert">
     알림창 
     <button class="btn" onclick="document.getElementById('alert').style.display='none';">닫기</button>
    </div>
    <button class="btn" onclick="document.getElementById('alert').style.display='block';">버튼</button>
알림창

버튼을 누르면 알림창이 열리고, 알림창에 있는 버튼을 누르면 다시 알림창이 없어진다.

 

이번에는 script 태그를 열지 않고, onclick 속성으로 바로 자바스크립트를 작성했다.

 

 


function 이용하기
    <button class="btn" onclick="alertBtnOpen();">버튼</button>

    
    <script>

        function alertBtnOpen(){
            document.getElementById('alert').style.display='block';
        }
    </script>

script태그 안에 function을 선언 해 두고 사용할 수 있다

 


이벤트리스너 사용하기
    <div id="alert" class="alert"> 알림창</div>
    <button id="btn"> 버튼임 </button>
    
    <script>
        document.getElementById('btn').addEventListener('click',function(){
            document.getElementById('alert').style.display='block';
        })
    </script>

onclick 속성을 사용하지 않고,

addEventListener를 이용할 수 있다.

 

클릭 > click

호버 > mouseover

스크롤 > scroll

키 입력 > keydown 등등 수십가지가 있다.


(추가)

지금까지 getElementById를 사용했는데

이 외에도

ByClassName('클래스명')

ByClassName('클래스명')[0] => '클래스명'을 가진 0번째 요소

ByTagName

ByName 

등등 있다.

728x90
반응형

댓글