JavaScript On The Browser

document : 접근할 수 있는 HTML을 보여주는 객체

document.title : HTML에서 정한 head의 title을 보여준다.

document.title = 'test'를 통해 문서의 title이름 변경 가능

 

특정한 무언가를 가져오려면~

특정 HTML내용 변경!

자바스크립트로 HTML에 접근하기

 

document.getElementById("~"); : tag의 id명으로 내용을 가져올 수 있다.

const title = document.getElementById"title");

title.innerText = 'Got you!';

처럼 사용시 대상(element)을 정의해 가져와 줘야한다.

element.innerText : element 안에서 사용자에게 '보여지는 text 값'들만 가져오거나 설정 가능

                                적힌 text만 보이므로 태그를 이용하더라도 태그까지 text로 출력

element.innerHTML : element 안의 HTML이나 XML을 가져오거나

                                    태그와 함께 입력하여 내용을 직접 설정 가능

                                    태그 내용을 토대로 text를 꾸며 출력

element.className : 지정된 class값으로 대입하면 class 전체가 변경

                                   하나의 클래스를 조작하고 싶을 대 사용

element.classList : node의 클래스를 다룰 수 있도록 제공되는 기능

                               하나의 클래스만 조작 가능

                                add, remove, contains, toggle 등의 함수 사용 가능

         - 사용 방식 : element.classList.item(index); //class item 하나씩 선택

                              element.classList.add('이름'); //class 추가

                              element.classList.remove('이름'); //class 제거

                              element.classList.contains('이름'); //있으면 true, 없으면 flase

                              element.classList.toggle('이름'); //있으면 class 제거, 없으면 class 추가

                              (navbar 등을 나타났다 사라지게 할 수 있다.)

                              element.classList.repalce('이름'); //class 교체

getElemntById() : 하나의 값인 id를 통해 하나의 값을 반환

getElementsByClassName() : 많은 element를 가져올때 씀(array 반환)

getElementsTagName() : name을 할당 가능(array 반환)

querySelectior : 배열이 아닌 한가지만 가져올 수 있다.

                          element를 CSS방식으로 검색 가능 (사용법이 간단해 주로 사용)

                          ex) class이름이 hello인 자식 테그 h1을 가져오고 싶을 때

                                 document.querySelector(".hello h1");

                           여러개의 같은 class이름이 있을 땐, 가장 첫번째 것을 가져온다.

                           모든 것을 가지고 오고 싶을 땐 querySelectiorAll을 사용

 

querySelector("#hello"); = getElementById("hello"); 이지만 querySelectior는 하위 요소를 따로 가져올 수 있다.

querySelector(".hello:first-child h1"); 같은 class 이름의 태그가 많을 땐, 이런식으로 자식 순서대로 불러올 수 있다.

 

console.dir(title); => object로 된걸 보여 준다.

title.style.color = "blue"; -> title의 style영역의 color를 적용해 글자 색상을 바꿔준다.

 

Events

click event (listen for cilck)

먼저 자바스크립트로 가져와 읽게 해주고 무엇을 했을 때 무엇이 발생하도록 event를 만들어주고

그 event를 listen하게 해준다.

 

cost title = document.querySelector("div.hello:first-child h1");

function handleTitleClick() {

     console.log("title was clicked!");

     title.style.color = "blue"; }

title.addEventListener("click", handleTitleClick); (title에 click 이벤트가 발생하면 함수를 실행)

 

 console.dir(title)처럼 console.dir로 출력했을때 property들을 볼 수 있는데 그중 on이 앞에 붙은 것들이 event listener들이다.

 

const title = document.getElementById("title");

 

function handleMouseEnter() { title.innerText = "mouse is here!"; }

function handleMouseLeave() { title.innerText = "mouse is gone!"; }

 

title.addEventListener("mouseenter", handleMouseEnter);

title.addEventListener("mouseleave", handleMouseLeave);

 

이것을

title.onmouseenter = handleMouseEnter;

title.onmouseleave = handleMouseLeave;

로 변경 가능

addEventListener를 선호하는 이유는 removeEventListener를 통해 제거 가능하기 때문이다.

 

document가 JavaScript에서 기본적으로제공되듯이 window도 기본적으로 제공

function handleWindosResize() {

  document.body.style.backgroundColor = "tomato";

  // window객체에서 불러오는 리스너는 위의 정의해놓은 title과는 달라

  // HTML자체의 title에 적용 될것이다.

  //document객체에서 div를 따로 가지고 올 순 없다.

  콘솔 창에서 document.div를 처보면 body와 다르게 안나올 것이다.

    -> body, head, title 이런것을은 중요하기 때문에 존재하는 것이고,

        나머지 element들은 querySelector나 getElementById 등으로 찾아와야 한다.

}

window.addEventListener("resize", handleWindosResize);

resize는 창의 크기에 따라 적용되는 리스너이다.

function handleWindowCopy() {

  alert("copier now!");

}

window.addEventListener("copy", handleWindowCopy)

윈도우객체 즉, 창 전체에 작용할 것이고

그 창에서 복사가 되면 'copier now!'라는 경고창이 뜰 것이다.

 

function handleWindowOffline() {

  alert("SOS no WIFI");

}

function handleWindowOnline() {

  alert("ALL GOOD WORKING");

}

window.addEventListener("offline", handleWindowOffline);

window.addEventListener("online", handleWindowOnline);

와이파이가 연결됐는지 아닌지에 따라 경고창을 띄어준다.

Event CSS in JavaScript

const title = document.getElementById('title');

function handleTitleClick() {

  if (title.style.color === "blue") {

    title.style.color = "tomato";

  } else {

    title.style.color = "blue";

  }

}

title.addEventListener("click", handleTitleClick);

를 좀더 깨끗하게 만들려면

function handleTitleClick() {

  const cureentColor = title.style.color;

  let newColor;

  if (cureentColor === "blue") {

    newColor = "tomato";

  } else {

    newColor = "blue";

  }

  title.style.color = newColor;

}

이렇게 반복하는 글들을 변수로 만들어 줄여줄 수 있다. 

바뀌지 않는 절대값을 const로 할당해주고 let으로 상태에 따라 바뀌는 값을 let으로 할당해 준다.

 

하지만 이러한 것은 CSS파일에서도 사용 가능하다.

element가 섞이는 것을 선호하지 않으면 CSS에서만 사용하는 경우도 다수

 

그래서 색을 주는 것을 CSS로 주고 동적으로의 변화는 JavaScript로 준다면

CSS에서 id가 title인 h1태그를 기본 색을 blue로 바꾼뒤 .active로 바꿀색을 입력 후

자바스크립트로 이름이 active인 class를 생성하게 만들어 주면 된다.

그럼 처음 상태는 파란색인 상태이고 클릭시 class네임이 없는 상태니 class가 추가 되어

tomato색으로 바뀌고 다시 클릭 하면 class네임이 있는 상태이니 원래 상태인 blue색으로 돌아간다.

 

+ class명을 변수로 정의해 넣어 주면 JavaScript가 오류를 알려줘 보다 쉽게 고칠 수 있다.

const title = document.getElementById('title');

function handleTitleClick() {

  const clickedClass = "cliked"

  if (title.className === clickedClass) {

    title.className = "";

  } else {

    title.className = clickedClass;

  }

}

title.addEventListener("click", handleTitleClick);

그럼 전보다 덜 햇갈리게 사용 가능하다.

 

하지만 class가 이미 있는 상태로 시작된다면...?

이미 있는 class명을 cliked로 바꿔버리니 계속 추가해 줘야한다.

 

className은 이전에 있는 calss들은 상관하지 않고 모든것을 교체해버리고

classList는 class들을 목록으로 작업할 수 있게끔 허용해준다.

 

그중 contains는 우리가 명시한 class가 HTML element의 class에 포함되어 있는지 말해준다.

그러니 다른 class가 있더라도 그대로 두고 새class를 추가해 다룰 수 있도록 해준다.

const title = document.getElementById('title');

function handleTitleClick() {

  const clickedClass = "cliked"

  if (title.classList.contains(clickedClass)) {

    title.className = "";

  } else {

    title.className = clickedClass;

  }

}

title.addEventListener("click", handleTitleClick);

classList에 clickedClass가 포함왜 있다면 이라는 if함수를 사용하는 것이다.

 

그리고 보다 편하게

const title = document.getElementById('title');

function handleTitleClick() {

  const clickedClass = "cliked"

  if (title.classList.contains(clickedClass)) {

    title.classList.remove(clickedClass);

  } else {

    title.classList.add(clickedClass);

  }

}

title.addEventListener("click", handleTitleClick);

remove와 add 함수를 통해 보기 편하게 관리 가능 하다.

 

 

이를 한번에 쉽게 해주는 함수가 있는데,,,

toggle함수는 class name이 존재하는지 확인을 해준다.

그리고 만약 존재하지 않는 다면 추가해 준다.

이는 지금 작성한 if함수의 내용과 같은 내용!!

그리고 toggle시엔 한번만 사용하므로 class name을 바로 적어주면 된다!

그러니 const로 정의 할 필요도 없닷

const title = document.getElementById('title');

function handleTitleClick() {

  title.classList.toggle("clicked");

}

title.addEventListener("click", handleTitleClick);

불을 껐다 크는 것처럼! 폰 화면 버튼을 누르는 것처럼! 작동 가능!

navbar사용시 썼던 함수~!

 

// 그냥 toggle자체를 알았던것 보다 배로 이해가 가는 듯