이벤트 리스너
코드를 입력하세요
지금까진 버튼의 안에 자바스크립트를 길게 짰는데 이것도 좀 더러워보입니다.
그게 보기싫으면 이벤트리스너 문법 사용하면 됩니다.
그럼 html 안에 자바스크립트 안적고도 똑같이 개발진행할 수 있습니다.
이벤트 리스너는 이렇게 사용합니다.
document.getElementById('어쩌구').addEventListener('click', function(){
//실행할 코드
});
이렇게 작성하면 'id가 어쩌구인 요소를 클릭하면 안의 코드를 실행해주세요~' 라는 뜻입니다.
이거 쓰면 버튼 같은 곳에 onclick 넣을 필요가 없겠군요 ㄷㄷ
<div class="alert-box" id="alert">
<p id="title">알림창임</p>
<button id="close"> 닫기 </button>
</div>
Q. alert 박스 내부에 닫기버튼이 있습니다.
이걸 누르면 alert 창이 닫히도록 하려면 어떻게 기능개발을 해야할까요?
onclick 말고 addEventListener를 써봅시다.
더 배워볼 개념 1. event
이벤트 리스너를 배웠는데 이벤트가 뭐냐고요?
유저가 웹페이지 접속해서 클릭, 스크롤, 키보드입력, 드래그 등을 할 수 있는데 이걸 전문용어로 이벤트라고 부릅니다.
어떤 요소 클릭시엔 click 이벤트
마우스갖다대면 mouseover 이벤트
스크롤하면 scroll 이벤트
키입력하면 keydown 이벤트
... 몇십가지가 있습니다.
그리고 이벤트가 일어나길 기다리는 친구가 이벤트 리스너입니다.
이벤트 리스너는 이벤트가 일어나면 내부 코드를 실행해주는 고마운 기본 문법입니다.
그럼 이벤트 리스너 쓰면 다양한 이벤트도 체크가능하겠군요?
예시를 보도록 합시다.
셀렉터로찾은요소.addEventListener('mouseover', function(){
실행할코드
});
▲ 이러면 셀렉터로찾은요소에 마우스를 스윽 갖다대면 특정 코드를 실행해줍니다.
셀렉터로찾은요소.addEventListener('scroll', function(){
실행할코드
});
▲ 이러면 셀렉터로찾은요소가 스크롤되면 특정 코드를 실행해줍니다. (당연히 그 요소에 스크롤바가 있어야됨)
셀렉터로찾은요소.addEventListener('keydown', function(){
실행할코드
});
▲ 셀렉터로찾은요소에 키보드로 글자를 입력하면 특정 코드를 실행해줍니다. (그 요소가 글자를 입력할 수 있는 input 이런거여야 합니다)
이벤트 종류는 수십가지가 있습니다.
https://developer.mozilla.org/en-US/docs/Web/Events
▲ 이벤트 목록인데 이런거 미련하게 외우지 마시고 필요할 때 찾아쓰십시오.
버튼누르면 등장하는 서브메뉴를 만들며
자바스크립트로 class 탈부착하는 문법을 배워봅시다.
Bootstrap 설치해서 쓸 것임
Bootstrap css 파일을 설치해놓으면
버튼, 탭, 메뉴 같은걸 복붙식으로 개발할 수 있습니다.
css 짜기 귀찮으니 설치해봅시다.
구글에 bootstrap 검색하면 나오는 맨 첫 사이트 들어가보면 되겠습니다.
그리고 get started 버튼 누르면 됩니다.
1. 우선 우측 위에서 버전이 5.X 버전인지 확인한 후에
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
2. css 파일은 <head> 태그 안에,
3. js 파일은 <body>태그 끝나기 전에 붙여넣으면 설치 끝입니다.
https://getbootstrap.com/docs/5.1/getting-started/introduction/#starter-template
모르겠다면 그냥 starter template 항목에 있는 예제코드로 html파일 내용을 갈아치우면 설치됩니다.
갈아치웠으면 css 파일도 <link>태그로 잘 넣으셈
Navbar 만들기
Bootstrap을 설치해놨으면
그 사이트에서 원하는 웹 UI 검색해서 복붙하면 웹페이지 개발 끝입니다.
버튼같은거 검색해서 예제코드 붙여넣어보셈
하지만 우린 상단 메뉴부터 만들어봅시다.
상단메뉴 이름은 Navbar 입니다.
그거 하나 맘대로 복사붙여넣기 해보면 되는데
근데 그냥 이거 복사붙여넣기 하십시오
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
이러면 상단바 제작 끝입니다.
그럼 이제 버튼 누르면 등장하는 서브메뉴를 만들어봅시다.
저런 UI 어떻게 만든다고 했습니까
1. 미리 html css로 디자인 해놓고 숨기든가 함
2. 버튼누르면 보여줌
이러면 끝이라 미리 디자인부터 합시다.
디자인은 그냥 Bootstrap 홈페이지에서 list group 찾아서 <nav>밑에 복붙하면 될듯요
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
서브메뉴의 html css 디자인 완성
하지만 이번엔 class 탈부착식으로
버튼 누르면 보여달라고 코드짭시다.
어쩌구.style.display = 'block'
이렇게 해도 되겠지만 지겨우니까 이번엔 class 탈부착식으로 구현해봅시다.
.list-group {
display : none
}
.show {
display : block
}
css 파일 열어서 평소에 .list-group 붙은 요소는 숨겨놓도록 합시다.
그리고 거기에 show라는 클래스를 부착하면 보여주는 식으로 개발해봅시다.
이제 버튼누르면 <ul class="list-group"> 에다가 show라는 클래스 부착하라고 코드짜면 서브메뉴 UI 완성임
왜 이따구로 class를 부착해서 만드냐고요?
나중에 display : block 말고 다른 스타일도 동시에 주고 싶을 경우 유용해서 그렇습니다.
버튼 클릭시 저기에 클래스명을 추가해주세요
버튼 눌렀을 때 show 라는 클래스를 저기에 추가해봅시다.
class명을 원하는 요소에 추가하는 법은
셀렉터로찾은요소.classList.add('클래스명') 이렇게 쓰면 됩니다.
class명을 원하는 요소에서 제거하는 법은
셀렉터로찾은요소.classList.remove('클래스명') 이렇게 쓰면 됩니다.
당연히 구글 검색해봐야 알지 생각해서 나오는 것들이 아닙니다.
document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
document.getElementsByClassName('list-group')[0].classList.add('show');
});
▲ 그래서 class="navbar-toggler" 가진 요소 클릭하면
class="list-group"인 요소에 show라는 클래스명 추가하라고 코드를 짰습니다.
이제 버튼누르면 서브메뉴가 잘 보이는군요.
버튼 한 번 더 누르면 숨기기
버튼을 한 번 더 누르면 서브메뉴를 숨기고 싶은겁니다.
그럼 당연히 노예 컴퓨터에게 이렇게 명령내리면 됩니다.
"버튼 한 번 더 누르면 show 클래스를 제거해주세요"
근데 이건 나중에 if문, 변수문법을 배우면 직접 만들어볼 수 있기 때문에
좀 쉬운 방법을 먼저 알려드리자면
document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
document.getElementsByClassName('list-group')[0].classList.toggle('show');
});
.classList.toggle() 쓰면
- 클래스명이 있으면 제거하고
- 클래스명이 없으면 붙여줍니다.
그래서 왔다갔다하는 UI 만들 때 유용하게 쓰면 되겠습니다.
코린이