react로 프로젝트를 하다보니 javascript에 대한 이해가 좀 부족한 것 같아서 관련 문법 정리해보려고 한다.
- 메뉴바 만들기 (toggle)
bootstrap사이트에서 기본 레이아웃은 가져옴
버튼을 클릭하면 아래 li의 메뉴바가 나타났다 없어졌다 하게 만들 것임.
getElementsByClassName로 클래스네임을 불러줌. 이때 인덱스를 지정해줘야 해당 인덱스 번호의 클래스 네임을 가진 것을 불러옴. 그리고 click으로 이벤트를 지정한 다음 불러올 함수를 적어주면 됨. 이때 불러올 함수를
list-group의 클래스이름을 가진 항목에 show이름을 가진 클래스 이름을 부착해줄 줄 것임. classList를 사용해줌. classList.add('show')로 클래스 네임을 부착해줌.
(classList: 엘리먼트의 클래스 목록에 접근하는 방식을 대체하는 간편한 방법이다.)
- classList 메소드 : add, remove, item, toggle, contains, replace 등
그런데 나는 버튼을 누르면 메뉴바를 보였다 안보였다 하게 하고 싶으니 toggle 메소드를 사용할 것이다.
toggle : 하나의 인수만 있을 때: 클래스 값을 토글링한다. 즉, 클래스가 존재한다면 제거하고 false를 반환하며, 존재하지 않으면 클래스를 추가하고 true를 반환한다.
두번째 인수가 있을 때: 두번째 인수가 true로 평가되면 지정한 클래스 값을 추가하고 false로 평가되면 제거한다.
<css>
.list-group {
display: none;
}
.show {
display: block;
}
<javascript>
<button class='navbar-toggler' type='button'>
<span class="navbar-toggler-icon"></span>
</button>
<ul class="list-group">
<li>메뉴1 </li>
<li>메뉴2 </li>
<li>메뉴3 </li>
</ul>
<script>
document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
document.getElementsByClassName('list-group')[0].classList.toggle('show');
});
</script>이것을 querySelector를 이용해서 할 수도 있음
querySelector()
querySelectorAll()
document.querySelectorAll('.list-group')[1]이 때 인덱스 필수로 넣어야함. 괄호 안에 css 문법 그대로 사용가능
class면. id면 #
그런데 이렇게 되면 맨 위에 하나만 찾아줌. 따라서 All을 붙여서 해당 클래스 이름인 항목을 다 찾아주면 됨.
그렇데 이렇게 사용하면 문법이 너무 길어짐. html 조작문법을 쉽게 바꿔주는 라이브러리들이 있음 jQuery, React, Vue등
- jQuery로 만들기
jQuery cdn - minified - script 복사 - 복붙한 다음부터 사용 가능
거의 모든 자바스크립트 라이브러리는<body>태그 끝나기 전에 넣는 것을 권장
<script>
$('navbar-toggler').on('click', function(){
document.getElementsByClassName('list-group')[0].classList.toggle('show');
});
</script>1) 내용 바꿀 때 비교
1 : document.querySelector('.hello').innerHTML = '바보'
2 : $('.hello').html('바보')2) 스타일 바꿀 때 비교
$('.hello').css('color','red')3) class 탈부착
$('.hello').addClass('show') 더할때
$('.hello').removeClass('show') 제거할때
$('.hello').toggleClass('show') 토글
4) 이벤트 리스너
간단한 UI용 애니메이션 편리하게 작성 가능
(hide, fadeout, slideup)
<button id='test-btn'>버튼</button>
document.querySelector('#test-btn').addEventListener()
$('#test-btn').on('click',function() {})
5) 장점 : 한번에 바꾸기 쉬움 /
그냥 쌩 자바스크립트는 인덱스를 사용해줘야하는데 jQuery는 한줄이면 됨.
<p class='hello'>안녕</p>
<p class='hello'>안녕</p>
<p class='hello'>안녕</p>
document.querySeletorAll('.hello')[0].innerHTML = '바보';
document.querySeletorAll('.hello')[1].innerHTML = '바보';
document.querySeletorAll('.hello')[2].innerHTML = '바보';
$('.hello').html('바보'); 6)주의 사항
$로 찾으면 jQuery 함수만 붙일 수 있음. querySelector로 찾으면 자바스크립트 함수만 붙일 수 있음.
