html_pr11) app.js Code Review

https://mywebproject.tistory.com/118

 

 

 

 

var followButton = document.querySelector(".feed-user-profile button")
var likeButton = document.querySelector(".feed-footer button:first-child")
var commentButton = document.querySelector(".feed-footer button:last-child")
var feedComment = document.querySelector(".feed-comment")

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

likeButton.addEventListener("click", function() {
  if (this.following) {
    this.innerHTML = "10 Likes"
    this.classList.remove("active")
  } else {
    this.innerHTML = "11 Likes"
    this.classList.add("active")
  }
  this.following = !this.following
})
likeButton.following = false

commentButton.addEventListener("click", function() {
  if (this.active) {
    feedComment.classList.remove("active")
  } else {
    feedComment.classList.add("active")
  }
  this.active = !this.active
})
commentButton.active = false

 

 

 

Analysis

 

 

var followButton = document.querySelector(".feed-user-profile button")
var likeButton = document.querySelector(".feed-footer button:first-child")
var commentButton = document.querySelector(".feed-footer button:last-child")
var feedComment = document.querySelector(".feed-comment")

 

변수 선언 부분.

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

 

 

예>  .feed-user-profile button

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

 

 

 

예> .feed-footer button:last-child

 

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

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

 

 

<div class="feed-footer">

    <button type="button">
        10 Likes
    </button>
        
    <button type="button">
        0 Comments
    </button>

</div>

여기서는 button의 마지막 자식요소에 적용된다. 즉, 0 comments 부분.

 

 

https://mywebproject.tistory.com/86

html) 가상 요소(Pseudo-element)와 가상클래스(Pseudo-class)

 

가상요소와 가상클래스에 대해 정리한 글이다.

 

 

가상 클래스

선택한 요소가 특별한 상태여야 만족할 수 있음.
예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있음.


syntax>

selector:pseudo-class { property: value; }

예제>

button:hover { color: blue; }

대표적인 가상 클래스 예.

:link	방문 안한 링크
:visited	방문한 링크
:active	링크 누를때
:hover	링크에 마우스 올릴때
:focus	요소가 포커스될때 (키보드 or 문자입력양식)
:first-child	요소의 첫번째 자식요소
:first-line	블록 요소 문단의 첫번째 줄
:first-letter	블록 요소 첫줄에 첫번째 문자
:before	요소 내용 앞에 추가할 태그 지정 (content 속성 필요)
:after	요소 내용 뒤에 추가할 태그 지정 (content 속성 필요)

 

---

 

 

 

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가 사용)을 대체하는 주요 데이터 포맷.

 

 

 

 

---

 

 

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

 

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

 

 

---

 

• 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

 

 

 

 

**********************************

 

 

 

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

https://mywebproject.tistory.com/119?category=875337 

html_pr11) style.css Code Review

 

 

---

 

REFERENCE (style.css / app.js)

https://github.com/rohjs/bugless-101/blob/master/html-practice/11-feed/app.js