5강 (자바스크립트 이벤트리스너)
getElementsByClassName에 대해서
div안에 p태그를 원래 id를 주었는데 class로 바꾸어주면 밑에 보이는게
getElementsByClassName로 들어가고 심지어 button에도 똑같은 클래스 이름이 있다 그래서 getElementsByClassName.('title1')를 의미해주고 위에서 몇 번째 인지를 명확하게 표시해 주어야 한다 [0] 이렇게 말이다. 이런식으로 class로 들어가도 된다.
addEventListener
button에 닫기라는 것에 id를 추가한 뒤에 addEventListener 를 부여해 주어야 한다 그리고 click, finction() {
}
이렇게 가야 한다 사진을 보고 참고하자.
이렇게 실행을 시켜주는 방법이 있다.
또 다른 이벤트 방식
또, click이 아닌 mouseover를 써 주는 방식도 있다.
콜백에 대해서.
콜백은 코드를 순차적으로 실핼할 때 가끔보임.
(click, function(){}) 이것은 콜백함수이다. 중요!
6강 (서브메뉴 만들어보기와 classList 다루기)
부트스트랩 사용
HTML, CSS, JS를 편리하게 부트스트랩을 이용하여 복사 붙혀넣기로 만들었다.
버튼을 눌렀을 때 열리고 닫히히는 코드
아직까진 이해가 잘 되지 않는다. 하지만 해석하자면 html 문법에 class를 주고
[0]번 째 이벤트를 주어 클릭을 하면 보이는 식이다 ClassList.add를 주면 누르고 닫히는 게 안 되고, 누르는 것만 된다. 그래서 add 대신 toggle를 써 주면 열리고 닫히고가 되는 것이다.
querySelector
getElementById()
getElementsByClassName()
말고 더 간편하게 쓸 수 있는 언어 이다.
document.querySelector 를 써주면 다를게 없다는 것이다.
하지만 중복되는 class가 있으면 무조건 위에만 읽는 다는 것이다 그래서,
querySelectorAll() 를 써주면 된다는 것이다. 그리고 써주고 [몇 번째]
인지도 명확하게 써 주면 된다.
querySelector 활용해보기
위에 보면 원랜 querySelector 가 아니였는데, 더 좋은 이해를 돕기 위해
querySelector를 넣었다 근데 처음엔 오류가 뜬다 이유는 (클래스네임)을 넣었는데, 이러면 안된다. querySelector 쓰려면 class는 .~ 그리고 id는 #~ 이렇게 넣어줘야 적용이 된다는 것이다.
느낀점
점점 어려워지고 복잡해 지고 있는데, 이해는 그래도 얼추되서 정리를 하고 응용을 한 번 해 봐야겠다는 생각이 든다.
