자바스크립트 기본 끄적끄적2

자바스크립트에서 html에 있는 요소를 가져올 수 있나 확인하기 위해서 log로 document를 확인해보면 html에 접근할 수 있다는 것을 확인해볼 수 있다.

자바스크립트에서 html에 접근하기 위해서 h1에 id를 넣어줬다.

js파일로 넘어가서 html을 수정해볼 것이다.

//js
const title = document.getElementById("title");
console.log(title);
//<h1 id="title">This works</h1> 로 나오고 아래를 추가하게되면 This works가 its from JS!로 바뀐다.

//위에 확인 후 추가
title.innerHTML = "its from JS!"

id를 title로 지정해주었으므로 document 객체의 getElementById의 title을 log로 출력하면 <h1>의 라인을 출력해준다.

title.innerHTML에 넣고 싶은 문구를 넣게 되면 <h1>에 들어있던 This works가 its from JS!로 변경되어있는 것을 확인할  수 있다.

아예 바뀌는 것은 아니고 처음 로딩될 때는 This works였다가 js파일에 접근 후 its from JS!로 변경되는 것이다.

(딜레이를 사용하면 확인할 수 있지만 딜레이를 거는 것을 아직 모름)

 

위와 같이 html을 변경할 때 사용하는 것을 DOM이라고 하고

DOM(Document Object Module)은 문서 객체 모델이라는 뜻으로 html에 접근할 때 사용되는 인터페이스다.

 

console.dir(title);을 사용하면 크롬 콘솔 창에서 title.으로 사용할 수 있는 것들이 쭉 하고 나올 것이다.

VScode에서는 console.log(title);을 사용해도 확인할 수 있다.

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

title.innerHTML = "its from JS!"
title.style.color = "blue";
document.title = "let's play javascript";

dir혹은 log로 title을 확인했을 때 style을 확인할 수 있다.

style.color로 글자 색도 수정해보고 document에 있는 title(변수 title과는 전혀 다른 것)을 사용해서 크롬 페이지의 메인 제목이 바뀌는 것도 확인할 수 있다.

 

//js
const title = document.querySelector("#title");
title.innerHTML = "its from JS!"
title.style.color = "blue";
document.title = "let's play javascript";

document.querySelector()를 많이 쓰게 될 것인데 이 선택자는 css 선택자와 비슷하다.

querySelector는 노드의 첫 번째 자식을 반환한다 라고 나오는데 이는 document에 가서 모든 자식들 중에서 ()에 해당하는 것을 찾는다는 뜻이다.

id를 찾을 때는  # 을 class를 찾을 때는 . 을 사용한다. 

id로 지정했는데 .을 사용하면 찾을 수 없으므로 null이 뜨게 된다.

---

자바스크립트는 html과 css만 바꾸기 위해 만들어진 것이 아니다.

웹사이트에서 발생하는 동작들인 이벤트를 만들기 위해 쓰인다.

//js
const title = document.querySelector("#title");

function handleResize(){
    console.log("window resize!!");
}

//window.addEventListener("resize", handleResize());
window.addEventListener("resize", handleResize);

먼저 윈도우창에 접근하기 위해서 window. 을 사용했다.

window에서 addEventListener(event가 추가되길 듣고 있다 라고 생각하면 쉬운 거 같다.)를 사용한 뒤 "resize"라는 이벤트를 생성할 것이다.

함수로 handleResize를 생성했다.

여기서 가장 중요한 것은 window. 쪽에 마지막에 handleResize함수를 호출할 때 ()가 있는 것과 없는 것의 차이이다.

()가 있는 것은 지금 바로 당장 실행하겠다는 의미이고, 없는 것은 이벤트 발생 시 호출하겠다는 의미이다.

그래서 각각의 결과를 실행해보면 ()가 있을 때는 새로고침 시 콘솔 창에 window resize!! 가 뜬다.

하지만 ()가 없을 때는 윈도우 크기를 조절할 때마다 log가 찍히게 된다.

 

//js
const title = document.querySelector("#title");

function handleResize(event){
    console.log(event);
}

window.addEventListener("resize", handleResize);

argument에 들어간 event는 resize에서보다 form이나 click등에서 많이 쓰이지만 여기서 한번 써보자면

윈도우 창의 크기가 변하는 event가 발생할 때마다 호출되는 이벤트 객체들이 출력된다. (path, size 등이 출력된다.)

나중에 더 자세히 공부해보자

 

클릭이벤트를 진행해보기 위해서 처음에 사용했던 title을 이용해보자

//js
const title = document.querySelector("#title");

function handleClick(){
    title.style.color = "blue";
}

title.addEventListener("click", handleClick);

이제 window가 아닌 title을 바꿀 것이기 때문에 window에서 title로 변경해줬다.

그리고 handleClick으로 변경해준다. 항상 함수명은 다른 사람이 봤을 때 파악할 수 있게 하는 것이 중요하다.

title이 클릭되었을 때 색갈이 변경되도록 할 것이기 때문에 title.style.color를 변경해준다.

확인해보면 클릭 시 파란색으로 바뀐다.

 

한번 클릭하면 그 상태 그대로이기 때문에 if else문을 추가해준다.

//js
const title = document.querySelector("#title");

function handleClick(){
    if(title.style.color === "white"){
        title.style.color = "blue";
    }
    else{
        title.style.color = "white";
    }
}

title.addEventListener("click", handleClick);

나는 클릭했을 경우 white면 blue로 아니면 white로 변경되게 작성하였다.

하지만 처음에 클릭했을 때 반응이 없다.

왜 그런가 했더니 처음 실행 시 title.style.color의 값이 없기 때문에, 타이틀을 한번 클릭을 해야 title.style.color가 white라는 값이 생성된다.

//js
const title = document.querySelector("#title");

const titleColor = "white";
title.style.color = titleColor;
function handleClick(){
    title.style.color === "white" ? title.style.color = "blue" : title.style.color = "white";
}

title.addEventListener("click", handleClick);

그래서 변수로 titleColor를 생성해서 base 컬러로 white를 지정해줬다.

if else는 3항 연사자로 바꿔서 해보았다.

이렇게 하니 정상 작동되었다.

강의에서는 변수명과 방식을 살짝 다르게 하였는데 그 방식을 따라 하도록 노력해야겠다.

 

<강의 코드>

//js
const title = document.querySelector("#title");

const BASE_COLOR = "rgb(52, 73, 94)";
const OTHER_COLOR = "#7f8c8d";

function handleClick(){
    const currentColor = title.style.color;

    if(currentColor === BASE_COLOR){
        title.style.color = OTHER_COLOR;
    }else{
        title.style.color = BASE_COLOR;
    }

}
function init(){
    title.style.color = BASE_COLOR;
    title.addEventListener("click", handleClick);
}
init();

 

 

HTML JavaScript DOM event MDN을 인터넷에 쳐보면 다양한 event들을 확인해 볼 수 있다.

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

이벤트 참조 | MDN

기능 중에 온라인, 오프라인 기능을 확인해보자

//js
function handleOffline(){
    console.log("offline");
}

function handleOnline(){
    console.log("connect");
}

window.addEventListener("offline", handleOffline);
window.addEventListener("online", handleOnline);

코드를 작성 후 와이파이를 껐다가 키면 정상적으로 로그가 찍히는 것을 볼 수 있다!

---

위와 같은 코딩 방식은 좋지 않은 코딩 방식이라고 한다.

css는 css 쪽에서 html은 html에서 수정하는 게 좋고 js에서는 스타일보다는 로직을 처리하는 게 좋은 코드라고 한다.

아래부터는 좋은 코딩 방식으로 수정해보도록 한다.

/* css */
body{
    background-color: yellowgreen;
}

h1{
    color: white;
}

.clicked{
    color: blue;
}

우선 지정했던 색깔은 css파일에서 등록 후 clicked 클래스를 생성해줬다.

clicked는 class로 생성할 것이기 때문에 .(콤마)를 앞에 찍어준다.

clicked 클래스는 클릭 시 변경될 색깔이므로 blue를 넣어준다.

 

//js
const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handleClick(){
    const currentClass = title.className;
    //console.log(currentClass);
    if(currentClass !== CLICKED_CLASS){
        title.className = CLICKED_CLASS;
    }else{
        title.className = "";
    }
}

function init(){
    title.addEventListener("click", handleClick);
}
init();

js에서는 clicked 클래스를 가져올 변수를 생성한다.

클릭 이벤트 실행 시 class의 이름이 어떻게 바뀌는지 알아보기 위해 먼저 className의 로그를 찍어보았다.

로그에서 빈칸만 나오는 것을 확인할 수 있다. (클릭 시 기본 className이 비어있으니 빈칸으로 나온다.)

if문으로 넘어가면 currentClass(현재 클래스 네임)이 CLICKED_CLASS(css에서 만든 clicked 클래스)와 다르면 title.className에 clicked 클래스를 넣어줄 것이다 라는 코드를 작성했다.

현재는 className이 비어있으므로 clicked와는 다르므로 클릭 시 title이 파란색으로 바뀌게 된다.

else에는 다시 className을 빈칸으로 바뀌게 해 주면 된다.

---

className이 있었을 경우 그리고 다른 방법도 알아보자

우선 className이 있었을 경우 html과 css코드이다. (h1의 transition은 색갈이 바뀌는 애니메이션 기능이다.)

/* css */
body{
    background-color: yellowgreen;
}

h1{
    color: white;
    transition: color 1s ease-in-out;
}

//추가된코드
.btn{
    cursor: pointer;
}

.clicked{
    color: blue;
}

이렇게 btn을 추가하고 나면 처음에는 title에 마우스 커서를 올리면 모양이 바뀌지만 클릭 한 뒤에는 바뀌지 않게 된다.

chrom의 console창 옆에 elements라는 버튼을 누르면 h1에서 class가 btn에서 btn clicked로 바뀌고 더 이상 if문의 조건에 맞지 않기 때문에 작동하지 않는 것이다.

class에 btn도 있고 clicked도 있게 하려면 어떻게 해야 할까?

MDN 사이트(위의 event 찾아보는 사이트)에서 className을 찾으면 살펴보기에 classList가 있다.

classList의 Method에 아래와 같은 설명을 볼 수 있다.

지금까지 해왔던 부분을 add와 remove로 더 쉽게 표현할 수 있는 method이다.

//js
//변경 전
if(currentClass !== CLICKED_CLASS){
    title.className = CLICKED_CLASS;
}else{
    title.className = "";
}

//변경 후
if(currentClass !== CLICKED_CLASS){
    title.classList.add(CLICKED_CLASS);
}else{
    title.classList.remove(CLICKED_CLASS);
}

if문을 classList의 method로 위와 같이 변경할 수 있다.

하지만 위처럼 변경해도 클릭 후 작동하지 않는 것은 그대로이다.

왜냐면 currenteClass가 clicked 상태가 아니기 때문이다.

그럼 이제 class에 clicked가 존재하는지 확인하기 위해서는 MDN의 method에서 contain을 보자.

그러면 contain을 사용해서 class에 clicked가 들어가 있는지 아닌지 확인할 수 있다.

//js
const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handleClick(){
    const hasClass = title.classList.contains(CLICKED_CLASS);
    //console.log(currentClass);
    if(!hasClass){
        title.classList.add(CLICKED_CLASS);
    }else{
        title.classList.remove(CLICKED_CLASS);
    }
}

function init(){
    title.addEventListener("click", handleClick);
}
init();

currentClass대신 class를 가지고 있는지 확인하기 때문에 hasClass라는 변수명으로 class에 clicked가 있는지 확인하는 코드를 넣어줬다.

class에 clicked가 있으면 true 없으면 false이므로 if문에는 !hasClass를 넣어줬다.

그러면 false이면 classList에 clicked를 추가, true면 제거하도록 작성했다.

이제 실행해보면 h1에 btn과 btn clicke로 바뀌는 것을 확인 가능하고 페이지도 정상적으로 작동하는 것을 확인할 수 있다.

 

!가 나중에 볼 때 헷갈릴 것 같으면 if문을 아래와 같이 수정해놔도 좋다.

//js
if(hasClass){
    title.classList.remove(CLICKED_CLASS);
}else{
    title.classList.add(CLICKED_CLASS);
}

 

method에 위의 것들을 모두 통합해주는 게 toggle이다.

toggle을 사용해 코드를 짜면 정말 짧아진다.

//js
const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handleClick(){
    title.classList.toggle(CLICKED_CLASS);
}

function init(){
    title.addEventListener("click", handleClick);
}
init();

toggle을 사용하면 훨씬 코드가 간단해지지만 공부를 할 때는 하나씩 다 써보고 가장 나중에 간편한 것을 쓰는 것이 훨씬 도움되는 것 같다.

코드를 작성할 때는 쭉 작성 후 살펴보며 간단하게 수정 가능한 것들을 수정하는 것도 좋은 것 같다.(개인적인 생각)

처음부터 간편한 것을 사용하다 보면 이게 어떤 코드들이 이 method하나로 정리되는 것인지 모를 것 같다.

여태 무작정 코드만 따라 하고 짧은 코드들은 오 이걸 쓰면 이렇게 짧아지네 하고 넘어갔지 안 썼을 경우는 어떻게 코딩하는지 그냥 넘어가서 발전이 없었던 것 같다.

기본을 탄탄히 하자.