노마드코더 바닐라 JS로 크롬앱 만들기 준비

13465 단어 노마드코더CSS공부코딩바닐라jshtml

개념수업을 앞부분에 쭈루룩 해주셨는데 프로젝트에 과제에 개인공부에 치여 3일동안 나눠서 개념수업을 들었다.

본격 크롬앱 만들기전까지 준비완료!

들어가기 전에 CSS, HTML JAVASCRIPT로 연습을 살짝 맛봤다.

-document

자바스크립트에서 HTML로 접근할 수 있는 방법으로 body, title, head같은 중요 요소들은 직접 가져오고
태그나 아이디, 클래스 같은 요소들은 getElementById(), getElementsByClassName(), querySelector() 등의 메소드를 이용해서 요소를 가져올 수 있다.

특히, querySelector() 메소드는 CSS방식으로 element를 가져올 수 있는데, id="hello"인 경우
document.getElementById("hell"); == document.querySelector("#hello"); 라고 볼 수 있다.

-JavaScript

  1. find element
  2. listen event
  3. react event

강의 때 배운 거 조금 활용해보기 (코드가 점점 간단해지는 순서로!....그만큼 편한게 많다는 뜻이겠쥬)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css" /> 
    <title>Momentum</title>
</head>
<body>
    <div class="hello">
        <h1>Good to see you!</h1>
    </div>
    <script src="app.js"></script>
</body>
</html>

app.js

const test = document.querySelector(".hello h1");

function titleClick(){
    if(test.className=="active"){
        test.className="";
    }else{
        test.className="active";
    }
}

test.addEventListener("click", titleClick);

style.css

body{
    background-color: beige;
}

h1{
    color: blue;
}

.active{
    color: tomato;
}

원래는 h1태그에 class명도 없고 파란색이지만 클릭하면 class="active"가 생기면서 색깔 바뀐다 두둥
넘나 기본이라서 올리기그랬지만,,

위에서 오타오류를 줄이기위해 const로 변수에 저장했다.



const test = document.querySelector(".hello h1");

function titleClick(){
    const activeClass = "active";
    if(test.className==activeClass){
        test.className="";
    }else{
        test.className=activeClass;
    }
}

test.addEventListener("click", titleClick);

아래처럼 h1태그에 클래스명이 이미 존재할 때 버그가 생길 수 있다. 그럴때는 className대신 classList를 써서 add와 remove를 사용한다.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css" /> 
    <title>Momentum</title>
</head>
<body>
    <div class="hello">
        <h1 class="im-font">Good to see you!</h1>
    </div>
    <script src="app.js"></script>
</body>
</html>

app.js

const test = document.querySelector(".hello h1");

function titleClick(){
    const activeClass="active"
    if(test.classList.contains(activeClass)){
        test.classList.remove(activeClass);
    }else{
        test.classList.add(activeClass);
    }
}

test.addEventListener("click", titleClick);

im-font 옆에 이쁘게 잘 자리잡았다.

이코드도 쓰다보면 너무 길고 귀찮으니까 한줄로 줄이는 방법이 있다.
바로 toggle!

const test = document.querySelector(".hello h1");

function titleClick(){
   test.classList.toggle("active");
}

test.addEventListener("click", titleClick);

결과는 위에 그림과 같이 잘 나온다
Next.js 에서 window 접근하기
F \ # 탐험 여행 (5): F \ # 함수 식 프로 그래 밍 이해 (중)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage