JS 기초편(3)

개요: 필자가 공부하면서 정리한 게시물이다.

 

 

 

document라는 object를 통해 html 코드를 불러올 수 있다. title은 현재 승호인데 gg 하면 일시적으로 title 변경이 가능하다. 

이외에도 document.body , document.head 등 을 통해 불러올 수 있다. 

 

 <h1 id="title">승호얌</h1>

id를 title 지정한 부분을 getElementById를 통해 위와 같이 불러올 수 있다. 

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

console.log(title);

js에서도 이렇게 불러올 수 있다.! 

console.dir(title);

h1 태그에서 가져올 수 있는것들이다. 즉 dir은 요소 내부를 불러오는것이다. 

 

title.innerText="d";

이때 js에서 저 코드를 통해 문자를 변형할 수 있다. 즉 js에서 html코드를 변경할 수 있다는 것이다!! 

 

const hellos=document.getElementsByClassName("abc");

hellos.innerText="dd";

다음과 같이 class로 불러오면은 변경이 불가능하다. 왜냐하면 id와 다르게 class는 배열을 불러오기 때문이다.

const title1=document.getElementsByTagName("h1");

이때 tag는 anchor, div, section, button 같은걸 불러올때 사용한다. 

const title1=document.querySelector(".abc h1");

console.log(title1);

querySelector를 통해 불러오면 잘 불러 올 수있다. 이것은  element를 CSS 방식으로 검색할 수 있다. 

즉 abc클래스에 h1태그를 불러오는 것이다. 

 

   <div class="abc">

      <h1>승호얌</h1>

    </div>

    <div class="abc">

      <h1>승호얌2</h1>

    </div>

    <div class="abc">

      <h1>승호얌3</h1>

    </div>

const title1=document.querySelector(".abc h1");

console.log(title1);

첫번째 문구만 뜬다. 왜냐하면 querySelector자체가 첫번째 문구만 가져오기 때문이다. 

const title1=document.querySelectorAll(".abc h1");

console.log(title1);

All로 하면 모두가 뜬다. 

const title1=document.querySelector("#a");

아이디는 해당 아이디에 앞에 #을 붙여주면 된다. 참고로 id로 불러오면 딱 거기까지 이다. 뒤에 있는 태그들은 불러올 수 없다. 

const title1=document.querySelector(".abc:first-child h1");

이렇게 응용할 수 있다. 

const title1=document.querySelector("div.abc:first-child h1");

div 내부에 있다면 위와 같이 불러올 수 있다. 

title1.style.color="red";

h1 태그 색을 red로 바꿀 수 있다. 근데 All로 하면 오류가 뜬다. 즉 1개밖에 안되는거 같다.

 

function handleTitleClick(){

    console.log("title was clciked");

}

title1.addEventListener("click",handleTitleClick);

addEventListener를 통해 click 이벤트를 만들어 다음과 같이 연동을 하면 된다. 그럼 title1 첫번째 h1태그에서 마우스를

누르면 다음과 같이 된다. 저때 handleTitleClick() 이렇게 작성하면 안된다. 우린 그저 js에 함수만을 넘겨줘야 되기때문이다. 

function handleTitleClick(){

    console.log("title was clciked");

    title1.style.color="blue";

}

클릭하면 블루로 변한다!! 

 

console.dir를 통해 요소를 보면 앞에 on이 붙어있는데 event를 부여할 수 있는것이다. 

 

function handleMouseEnter(){

    console.log("mouse is click");

}

title1.addEventListener("mouseenter",handleMouseEnter);

마우스를 올려놓는 이벤트이다. 

 

function handleTitleClick(){

   

    title1.style.color="blue";

}

title1.addEventListener("click",handleTitleClick);

function handleMouseEnter(){

    title1.innerText="바뀜";

}

title1.addEventListener("mouseenter",handleMouseEnter);

function handleMouseLeave(){

    console.log("mouse is click");

}

title1.addEventListener("mouseleave",handleMouseLeave);

다음과 같이 활용할 수 있다. 

 

title1.addEventListener("mouseleave",handleMouseLeave);

title1.onmouselinstenr=handleMouseLeave;

둘이 같은 표현이다. 후자가 더 나은거 같다. 

 

document에서 body,head,title 은 중요해서 언제둔 호출이 가능하지만 나머는 querySelector등으로 통해 불러와야 된다. 

 

function handleWindowResize(){

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

}

window.addEventListener("resize", handleWindowResize);

window 즉 화면의 크기가 변경될 때 red가 된다. 

 

function handleWindowCopy(){

    alert("ㅎㅇ");

}

window.addEventListener("copy", handleWindowCopy);

화면상에서 ctrl+c 하면 알림창에 ㅎㅇ가 뜬다. 

function handleWindowOffline(){

    alert("no wifi");

}

function handleWindowOnline(){

    alert("yes wifi");

}

window.addEventListener("offline", handleWindowOffline);

window.addEventListener("online", handleWindowOnline);

다음과 같이 와이파이 이벤트도 있다. 

(f12 (개발자도구) -> Network -> No throttling 이라고 써있는 부분을 클릭하면 쭉 목록이 나오면서 offline이 있습니다. 그걸 누르면 현재 브라우저 자체에서 네트워크가 offline으로 설정되어 와이파이 끊겼을 시 코드가 작동되는 것을 볼 수 있습니다.
그리고 다시 기본 설정이었던 no throttling 을 클릭하면 와이파이 연결 시 코드가 작동되는 것을 볼 수 있습니다.)

 

const h1=document.querySelector("div.abc:first-child h1");

function handleTitleClick(){

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

        h1.style.color="tomato";

    }else{

        h1.style.color="blue";    }

}

h1.addEventListener("click",handleTitleClick);

첫번째 클릭 블루 두번째 클릭 토마토 로 바뀐다. 

const h1=document.querySelector("div.abc:first-child h1");

function handleTitleClick(){

    const currentColor=h1.style.color;

    let newColor;

    if(currentColor=="blue"){

        newColor="tomato";

    }else{

        newColor="blue";

       }

       h1.style.color=newColor;

}

h1.addEventListener("click",handleTitleClick);

let과 const 변수를 써서 변형시켜봤다. 

 

.active{

    color:tomato;

}

const h1=document.querySelector("div.abc:first-child h1");

function handleTitleClick(){

   h1.className="active";

}

h1.addEventListener("click",handleTitleClick);

다음과 같이 css에다 active 클래스를 부여하고 JS에서 h1의 클래스네임을 active로 하면

클릭했을시 원래색에서 토마토 색으로 변한다. 

function handleTitleClick(){

   if(h1.className=="active"){

    h1.className="";

   }

   else{

    h1.className="active";

   }

}

이렇게 원래꺼랑 바뀐거랑 클릭해서 번갈아하면서 할 수 있다. 

const h1=document.querySelector("div.abc:first-child h1");

function handleTitleClick(){

    const clickedClass="clicked";

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

    h1.classList.remove(clickedClass);

   }

   else{

    h1.classList.add(clickedClass);

   }

}

h1.addEventListener("click",handleTitleClick);

개선한 코드로 기존 클래스코드를 지우지 않고 계속 새로운 클래스를 추가하고 지울 수 있다. 강추!! 

const h1=document.querySelector("div.abc:first-child h1");

function handleTitleClick(){

   

    h1.classList.toggle("clicked");

    /*const clickedClass="clicked";

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

    h1.classList.remove(clickedClass);

   }

   else{

    h1.classList.add(clickedClass);

   }*/

}

h1.addEventListener("click",handleTitleClick);

근데 toggle을 쓰면 5줄을 한줄로 줄일 수 있다!!!! 이게 더 강추!!

toggle은 h1의 classList에 clicked class가 이미 있는지 확인해서 만약에 있다면 toggle이 clicked를 제거한다. 

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

 

즉 스마트폰에 달린버튼을 하나 누르면 꺼주고 또 누르면 켜준다는 개념이다.