html_pr12) app.js Code Review

https://mywebproject.tistory.com/122

HTML 훈련 - (12) Gmail Inbox

 

 

 

var inboxCheckboxes = document.querySelectorAll(".inbox-checkbox")
var inboxStars = document.querySelectorAll(".inbox-star")

inboxCheckboxes.forEach(function(item) {
  item.addEventListener("click", toggle)
  item.active = false
})

inboxStars.forEach(function(item) {
  item.addEventListener("click", toggle)
  item.active = false
})

function toggle() {
  if (this.active) {
    this.classList.remove("active")
  } else {
    this.classList.add("active")
  }

  this.active = !this.active
}

 

Analysis

var inboxCheckboxes = document.querySelectorAll(".inbox-checkbox")
var inboxStars = document.querySelectorAll(".inbox-star")

 

변수 선언 부분.

전부 querySelecor을 이용하여 html 문서의 태그를 선택자로 지정함.

 

 

예>  .feed-user-profile button

feed-user-profile 이라는 클래스를 가진 요소 중 button태그만 지정.

 

 

 

예> .feed-footer button:last-child

 

feed-footer 이라는 클래스를 가진 요소 중 button태그의 last-child만 지정 (가상클래스)

즉, button요소의 마지막 자식요소.

 

 

 

___

 

 

inboxCheckboxes.forEach(function(item) {
  item.addEventListener("click", toggle)
  item.active = false
})

 

forEach()

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Array.prototype.forEach() - JavaScript | MDN

forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행

 

즉, 한 함수를 배열 요소에 다 실행시키는 것.

 

 

예제

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

 

 

app.js에서는 querySelectorAll을 통해 '배열'의 형태로 변수를 저장했으므로

inboxCheckboxes.forEach(function(item) {

위와 같이

 

배열(변수)명.forEach(함수명( ) 으로 나타낸 것.

 

 

__

 

자바스크립트 화살표함수 (=>)

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

화살표 함수 - JavaScript | MDN

화살표 함수 표현(arrow function expression)은 전통적인 함수표현(function)의 간편한 대안.

 

<규칙>

• this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없습니다.
• new.target키워드가 없습니다.
• 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다.
• 생성자(Constructor)로 사용할 수 없습니다.
• yield를 화살표 함수 내부에서 사용할 수 없습니다.

 

 

 

---

 

 

 

https://mywebproject.tistory.com/114

javascript) 자바스크립트 ' this '

 

javascript에서 this의 쓰임에 대해서 위 포스팅에 정리해두었다.

 

- 추후 수정 예정임.

 

 

단독으로 쓴 this = global object

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

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

 

 

followButton.addEventListener("click", function() {
  if (this.following) {
    this.innerHTML = "Follow"
    this.classList.remove("following")
  } else {
    this.innerHTML = "Following"
    this.classList.add("following")
  }
  this.following = !this.following
})
followButton.following = false

 

여기에서는 매서드에서 사용한 것이므로, 

해당 메서드를 호출한 객체인 followButton으로 바인딩된다.

 

 

 

 

https://mywebproject.tistory.com/115

javascript) 객체(object)의 구성 + JSON / AJAX

객체에 대한 내용은 위 포스팅에 정리해두었다.

 

 

 

❗ 객체의 생성

 

 

• constructor 를 이용하여 생성
• 객체 리터럴을 이용 - JSON(Java-Script Object Notation) 이용

-> JSON 방식을 이용하면 객체리터럴이기에 단일 객체로만 활용됨.

cf> constructor 를 이용하면 동일한 구성을 가진 객체를 여러개 만들어 낼수 있음.

 

 

 

 

 

💡 JSON이란?

 

JavaScript Object Notation)은 속성-값 쌍(attribute–value pairs / array data types (or any other serializable value))

또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해

인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷.

 

 

인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있음.

자료의 종류에 큰 제한은 없으며, 특히 컴퓨터 프로그램의 변수값을 표현하는 데 적합함.

 

 

비동기 브라우저/서버 통신 (AJAX)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷.

 

 

 

 

---

 

 

 

** 심화 선택자

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);
    }

 

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

 

 

---

 

• addEventListener

 

REFERENCE

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

EventTarget.addEventListener() - Web API | MDN

 

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

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

 

 

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

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

 

 

 

target.addEventListener(type, listener[, options]);

 

 

 

type에는 "click"과 같이 이벤트 유형이 들어가야한다.

 

javascript에서의 이벤트 유형은 아래 문서에 나와있다.

 

Event reference

https://developer.mozilla.org/ko/docs/Web/Events

이벤트 참조 | MDN

 

 

 

 

---

 

REFERENCE (style.css / app.js)

https://github.com/rohjs/bugless-101/tree/master/html-practice/12-gmail-inbox

 

 

김버그의 HTML&CSS는 재밌다 - 구름EDU

 

강의내용 (X)
github 코드 위주로 작성하였습니다.

추후 비공개 처리 예정,