html_pr09) app.js Code Review

https://mywebproject.tistory.com/107

HTML 훈련 - (9)GitHub Dropdown Menu

 

 

var dropdownMenu = document.querySelector(".dropdown-menu")
var dropdownButton = document.querySelector(".dropdown-button")

dropdownButton.addEventListener("click", function(event) {
  if (this.active) {
    dropdownMenu.classList.remove("active")
  } else {
    dropdownMenu.classList.add("active")
  }

  this.active = !this.active
})

dropdownButton.active = false

 

 

 

1. querySelector

 

 

REFERENCE

https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector

Document.querySelector() - Web API | MDN

 

document.querySelector(".dropdown-menu")

 

클래스를 만족하는 첫 번째 요소 검색

 

 

제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 element를 반환

 

제공한CSS 선택자 를 만족하는 첫 번째 element 객체. 결과가 없다면 null.

선택자를 만족하는 모든 요소의 목록이 필요하다면 querySelectorAll()을 대신 사용한다.

 

 

CSS 구문을 따르지 않는, 예컨대 콜론이나 공백을 포함한 선택자나 ID를 사용해야 하면

반드시  백슬래시("\")를 사용해 해당 문자를 이스케이프해야 한다.

 

 

 

** 심화 선택자

var el = document.querySelector("div.user-panel.main input[name=login]");

 

 "user-panel main"인 <div>(<div class="user-panel main">) 안의,

이름이 "login"인 <input> 중 첫 번째 요소 선택.

 

 

** querySelector 는 특정 name 이나 id 를 제한하지않고

css선택자를 사용하여 요소를 찾을 수 있음.

 

document.querySelector("#id")	id 선택자
document.querySelector(".class")	class 선택자

 

 

 

 

 

cf.       

querySelectorAll()

• querySelect 과 동일하게 작동하지만, 해당 선택자에 해당하는 모든 요소를 가져옵니다.

 

• 반환객체는 nodeList 이기 때문에 for문을 사용해야함.

for( var i = 0; i < 변수명.length; i++ ){
	var item = 변수명.item(i);
    }

 

• 또한 (',') 을 사용하면  여러요소를 한번에 가져올수있음.

 

 

 

2. addEventListener

 

REFERENCE

https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

EventTarget.addEventListener() - Web API | MDN

 

addEventListener() 메서드는 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정한다.

- 일반적인 대상은 Element, Document, Window임

 

 

EventTarget의 주어진 이벤트 유형에, 

EventListener를 구현한 함수 또는 객체를 이벤트 처리기 목록에 추가해 작동함.

 

 

 

 

3. .classList

 

 

REFERENCE

https://developer.mozilla.org/ko/docs/Web/API/Element/classList

 

 

The Element.classList is a read-only property

that returns a live DOMTokenList collection

of the class attributes of the element.

 

 

>> 프로퍼티(Property) & 메서드(Method)

에 대한 내용을 아래 포스팅에 정리해두었다.

 

https://mywebproject.tistory.com/113

javascript) 프로퍼티(property) vs 메서드(method)

 

 

+) 자바스크립트 객체의 구성에 대해 다음 포스팅에 추가로 정리해두었다.

 

https://mywebproject.tistory.com/115

javascript) 객체(object)의 구성

 

 

 

4. this 변수

 

 

REF: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

this - JavaScript | MDN

 

this

A function's this keyword behaves a little differently in JavaScript compared to other languages.

It also has some differences between strict mode and non-strict mode.

 

 

the value of this is determined by how a function is called (runtime binding). 

 

자바스크립트 내에서 this는 '누가 나를 불렀느냐'를 뜻한다.

즉, 선언이 아닌 호출에 따라 값이 달라진다.

 

단독으로 쓴 this = global object

함수 안에서 this =  함수의 주인에게 바인딩 (=window객체)

메서드에서의 this = 해당 메서드를 호출한 객체로 바인딩

 

+) 화살표함수 (=>) 사용시

화살표 함수는 전역 컨텍스트에서 실행되더라도

this를 새로 정의하지 않고, 바로 바깥 함수나 클래스의 this를 쓸 수 있음.

 

 

setTimeout(() => {
      console.log(this);
      }

 

 

 

REFERENCE

[JS] 자바스크립트에서의 this

 

---

 

 

style.css 코드 리뷰는 아래 포스팅으로.

https://mywebproject.tistory.com/108

html_pr09) style.css Code Review

 

 

---

REFERENCE (style.css / app.js)

https://github.com/rohjs/bugless-101/tree/master/html-practice/09-github-dropdown-menu