Document

• document는 브라우저에 존재하는 object
• document는 나의 web site를 의미한다. document는 일종의 object처럼 웹사이트를 구성하기 위해 작성해 놓은 html 항목들을 불러오는데, JS는 브라우저에서 이를 수정하거나 추가할 수 있는 것이다. 이는 매우매우 강력한 기능이다.
• 콘솔창에서 document.~에 대해서 탐구해보자!!
• dir 함수는 객체의 속성을 계층구조로 출력한다.
• console.log()와 console.dir()의 차이점 log 함수로 document.body 객체를 출력하면 태그내용이 나오고 dir 함수로 document.body 객체를 출력하면 객체의 속성이 출력된다.

Searching for Elements

• 원하는 값을 불러오는 방법에는 여러가지 있다.
• getElementById >> 하나의 값
• getElementsByClassName >> 배열
• getElementsByTagName . . . >> 배열
• 위에서 id 빼고는 배열을 가져오기 때문에 title.innerText 와 같은 방법은 사용할 수 없다.
• Id를 가진 태그의 하위 태그를 선택하고 싶을 때 위의 방법으로는 한계가 있다.
• 이때 사용하는 게 querySelector/querySelectorAll

	const title = document.querySelector(".hello h1");   
	// .hello는 className표시, id를 쓰고 싶으면 #idName
	console.log(title);    // => 콘솔창에 출력은 <h1>Grab me!</h1> 요렇게...

• .hellos h1 마치 css 선택자 처럼 원하는 요소를 선택 가능
• console.log((title.innerText = "히힛")); 화면에 글자가 히힛으로 바뀐다
• 단 hello라는 class를 가진 h1태그가 여러개인 경우 querySelectorAll을 써야 한다.
  All을 쓰지 않으면 첫번째 1개만 가지고 옴
• 선택자가 id인 경우엔 #hello

	const title = document.querySelector(".hello h1");
	title.innerText = "Hello!!"

• 위의 코드처럼 쓸 경우 첫번째 것만 가져오기 때문에 첫번째 것만 Hello로 바뀜
• querySelectorAll을 쓰면 innerText가 바뀌지 않음 배열이라서 오류가 나는 것 같다.
  아마도...

Events

• 지금 js파일이 있기 때문에 js를 통해 html의 내용을 가져올 수 있는 거임
• document가 html이 js파일을 load하기 때문에 존재 → 그 다음에 browser가 우리가 document에 접근할 수 있게 해줌
• element의 내부를 보고 싶으면 console.dir()
  기본적으로 object로 표시한 element를 보여줌(전부 js object임)
  그 element 중 앞에 on이 붙은 것들은 event임
• event란? 어떤 행위를 하는 것, 모든 event는 js가 listen할 수 있음
• eventListener : event를 listen함 → js에게 무슨 event를 listen하고 싶은 지 알려줘야 함
• title.addEventListener("click") : 누군가가 title을 click하는 것을 listen할 거임 → 무언가를 해줘야함. 즉, addEventListener(”이벤트”, 실행할 함수)

	const title = document.querySelector("div.hello:first-child h1");
	function handleTitleClick(){
		title.style.color = "blue";
	}

	title.addEventListener("click", handleTitleClick);

	//click하면 handleTitleClick이라는 function이 동작하길 원함
	//그래서 handle~ 함수에 () 를 안넣은 것임. 중요!!!
	//즉, js가 대신 실행시켜주길 바라는 것임!

• function이 js에게 넘겨주고 유저가 title을 click할 경우에 js가 실행버튼을 대신 눌러주길 바라는 것임( 직접 handleTitleClick(); 이렇게 하는 것이 아니라)
• 함수에서 ()이 두 괄호를 추가함으로써 실행버튼을 누를 수 있는 거임
• listen하고 싶은 event를 찾는 가장 좋은 방법은, 구글에 찾고 싶은 element의 이름, 예를들어 h1 html element mdn을 검색.
• 우리는 javascript의 element를 원하니, 링크에 Web APIs라는 문장이 포함된 페이지를 찾아야함. 왜냐면 이건 JS관점의 HTML Heading Element란 의미.
• 너무 복잡하면 element를 console.dir로 출력해서 on~ 이라고 적혀있는걸 사용하면 됨.

	 function handleMouseEnter() {
		 title.innerText = "Mouse is here!"
	 }
	 function handleMouseLeave() {
		 title.innerText = "Mouse is gone!"
	 }
 
	 title.addEventListener("mouseenter", handleMouseEnter);
	 title.addEventListener("mouseleave", handleMouseLeave);

• 하지만 대부분의 경우에는 style은 CSS를 통해 변경되어야 함.
• title.onclick = handleMouseEnter;
  title.addEventListener(“mouseenter” , handleMouseEnter);
• 위에 두 코드는 동일하나 addEventListener를 선호하는 이유는
• removeEventListener을 통해서 event listener을 제거할수있기 때문이다.
• document에서 body, head, title 은 중요해서 언제든
  ex) document.body 로 가져올수있지만
• div나 h1 등 element 들은 querySelector나 getElementById등으로 찾아야한다.
  ex) document.querySelector(“h1”);
• window는 기본으로 제공된다!!

	function handleWindowResize(){
		document.body.style.backgroundColor = “tomato”;
	}
	function handleWindowCopy(){
		alert(“copier”);
	}
	window.addEventListener(“resize”, handleWindowResize);
	window.addEventListener(“copy”, handleWindowCopy);

• H1을 클릭할 때마다 색이 바뀌도록 해보자!!

	const h1 = document.querySelector("div.hello:first-child h1");
	function handleTitleClick() {
	    const currentColor = h1.style.color;
	    let newColor; //const는 변할 수 없으니 변경이 가능한 let을 쓰자
	                  // 지금 newColor는 비어있는 let변수이다. 
	    if (currentColor === "blue") {
	        newColor = "tomato";
	    } else {
	        newColor = "blue";
	    }
	    h1.style.color = newColor;
	}

	h1.addEventListener("click", handleTitleClick);

• 강의 댓글의 질문과 답 중에서 나도 궁금했던 점들이 잘 정리 되어있어서 가져와 보았다.

1번 질문 : 왜 currentColor를 const로 받을까 첨부터 let변수로 하면 안돼는지?
답 : 아마 질문하신 의도가 newColor라는 변수 선언 없이 currentColor를 애초에 let으로 설정해두고 조건에 따라 변한 색을 currentColor에 저장하면 안되는지에 대한 것 같습니다.
보통 헷갈리지 않고 변수를 활용하기 위해서 '원래 어떤 색이었는지'와 '새로 적용해줘야 할 색이 무엇인지'처럼 의미의 차이가 확연한 경우 다른 변수로 저장해두는 것이 보통입니다.
또한 기존의 색을 const로 설정해두면 값이 변하지 않기 때문에, 만일 그 색이 필요해서 찾아보거나 활용하게 될 때 믿을 수 있는 값을 얻을 수 있겠죠. 단지 영상에 나온 코드에서 사용하려면 let potato = h1.style.color;로 선언해두고 potato를 계속 활용할 수도 있겠지만, 일반적으로 코드를 작성할 때 니코쌤이 했듯이 변수가 가지는 의미에 따라서 나눠서 선언하는 방식이 바람직하다고 할 수 있을 것 같습니다!

2번 질문 : 왜 계속 색이 바뀌는 거지?
답 : 함수 내에서 선언된 변수는 함수 밖에서는 존재하지 않습니다. 그렇기 때문에 const currentColor로 변수 선언을 하더라도, 함수가 호출될 때 마다 새로운 값을 받을 수 있습니다.

• 스타일은 CSS가 있으니 굳이 JS에서 스타일을 할 필요가 없다. HTML은 뼈대, CSS는 스타일, JS는 상호작용!!!

CSS in JavaScript

• 그렇다면 앞에 했던 ‘클릭할 때마다 색을 바꾸기’를 다시 해보자

	/*CSS*/
	h1 {
	    color: cornflowerblue;
	}

	.clicked {
	    color: tomato;
	}

 	 //JS
	const h1 = document.querySelector("div.hello:first-child h1");

	function handleTitleClick() {    
	    // h1.className은 getter이면서 setter 
	    // 즉, 현재의 class를 얻어올 수도 있지만 class를 변경할 수도 있다.
	    // getter(획득자) setter(설정자)
	    if (h1.className === "clicked") {
	        h1.className = "";
	    } else {
	        h1.className = "clicked";
	    }
	}

	h1.addEventListener("click", handleTitleClick);

• 위는 CSS, 아래는 JS
• 근데 조금 문제가 있는 active는 우리가 지어준 이름이다. raw value라고 하는데, 이름을 바꾸다가 에러가 발생할 수도 있다. const로 지정해라.

	function handleTitleClick() {
			const clickedClass = "clicked"; 
			if(h1.className === clickedClass) {
				h1.className = "";
			} else {
				h1.className = clickedClass;
			}
	}

• 이렇게 작성하면 에러가 발생할 수 있는 부분을 축소한다.
• 그런데, html의 h1에 sexy-font라는 class name이 있었다면?
• js를 실행하니 교체되었다. 최초의 class name이 사라졌고, 원래 있던 class name을 간직하고 싶은데 이건 어떻게 해야하는가?
• const clickedClass = "clicked 원래클래스";에 추가하면 되긴 하는데 좋은 방법은 아니다. class를 추가할 때마다 js랑 css에서 업데이트를 계속 해야하니까.
• 그렇다면 원래 classname을 삭제하지 않고 clicked class를 변경하려면?
• classList 우리가 class들의 목록으로 작업할수 있게끔 허용해준다.

	function handleTitleClick() {    
	    const clickedClass = "clicked";
	    if (h1.classList.contains(clickedClass)) {
        //contains은 우리가 명시한 class가 HTML element의 class에 포함되어 있는지 말해준다
	    //위의 조건은 h1의 class에 clickedClass가 포함되어 있니?
	       h1.classList.remove(clickedClass) //포함되어 있다면 제거해줘!
	    } else {
	        h1.classList.add(clickedClass) // 없다면 더해줘!
	    }
	}
	//add와 remove로 classname을 더하고 뺄 수 있다. 전체를 교체하지 않고!!!

Toggle

• toggle은 토큰이 존재하면 토큰제거
  토큰존재 하지않으면 토큰 추가

	function handleTitleClick() {        
	    h1.classList.toggle("clicked");
	}
	//위에 5줄의 코드가 toggle 덕분에 이렇게 한 줄이 되었다. 

• toggle은 h1의 classList에 clicked class가 이미있는지 확인하여
• 만약있다면 toggle 이 clicked를 제거해준다
  만약 class name이 존재하지 않는다면 toggle은 classname 추가

• 만약 처음부터 toggle의 기능을 공부하고 썼다면 음.. 이런게 있군하고 넘어갔을 것이다.
• class를 지정하고 if문, 함수 등을 써보면서 코드가 구동이 되는 성취감을 느껴보고, 길어지고 반복되는 코드를 줄이고 싶어지고, 드디어 이런 혁명적인 toggle을 넣고 충격을 받으면서 시간은 걸렸지만 기초부터 확실하게 차근차근 공부하는 기분이다.!!
• 힘들지만... 뿌듯하네..