[Memo] #3 Javascript on the Browser | 바닐라 JS로 크롬 앱 만들기

💛 3.0 document Object

html의 elment는 js를 통해서

console.dir
// doucuemnt 확인 가능

console에 document 입력시 해당 정보를 콘솔창에서 볼 수 있음

 

document : HTML을 가르키는 객체임

• 안에 많은것이 들어 있음
• document.title

object의 값도 바꿀수 있음(update)

ex) document.title=”HI”

JS 에서 HTML을 읽어올 뿐만 아니라 변경이 가능!!

JS는 이미 HTML에 연결이 되어 있음

Document가 html 웹사이트를 말함

document.body

….

SUPER COOL~~~

 

---

💛 3.1 HTML in Javascript

 

🔶매우 * 13 자주 사용 할 거임!! getElementById()

document.getElementById()

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

console.dir(title);

🔶! 주의!!!!!

<!-- <script src="script2.js"></script>-->
    <h1 id="title">
        HERE Grab me!
    </h1>
    <script src="script2.js"></script>

• 이게 script를 상단에서 넣어주면 null로 오게됨
• html은 위에서부터 아래로 읽으면서 내려옴

js를 html를 표현하는 object를 보여줌

title.innerText ="Got you";

→ 이너 텍스트 변경 해줌

 

---

💛3.2 Searching For Elements

 

access html code our javascript

awesom!!!!

 

most of time ID (# 아이디만 가지고 사용하는 것) is not useing!!

보통 classname을 사용하거나 둘 다를 사용하기 때문!!

 

 

🔶자주 발생하게 되는 에러

Uncaught TypeError

• 코드 내에 어떤 값이 null (아무것도 없다는 뜻) 이라는 거임

아무것도 없는 것에 innertext로 접근하려고 해서 에러가 뜨는 거임

 

 

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

console.log(hellos);

 

!!!! 쿼리 셀렉터 : 엘리먼트를 CSS 방식으로 접근 할 수 있음

니코가 좋아하는 querySelector!!

• 쿼리 셀렉터는 단 하나의 엘리먼트를 리턴 해줌

const title3_1 = document.querySelector(".hello11 h4");
console.log(title3_1);

querySellectorAll - 조건에 부합하는 모든것을 가지고 옴

// 아래 두개는 같은 결과를 얻음
const title4_1 = document.querySelector("#test");
const title4_2 = document.getElementById("test");

 

 

---

 

💛3.3 Events

🔶 console.dir()

const title5_1 = document.querySelector("div#first:first-child h2");
console.dir(title5_1);

 

object의 결과로 나오게되는 on으로 시작하는 항목들이 이벤트임

onclick…. onfocus

 

 

🔶 JS obejct

• js 객체 내부에 있는 속성들의 값을 바꿀 수 잇음

 

js는 이벤트를 listen 하고 있음

addEventListener

const title5_1 = document.querySelector("div#first:first-child h2");
// console.dir(title5_1);
title5_1.style.color = "white";

function handleTitleClick(){
    console.log("title was clicked");
    title5_1.style.color = "red";

}

title5_1.addEventListener("click", handleTitleClick);

 

 

 

---

💛 3.4 Events Part Two

🔶 MDN : Mozilla Developer Network

https://developer.mozilla.org/en-US/docs/Web/API/HTMLHeadingElement

JS 관점의 HTML Heading Element

function handleMouseEnter(){
    title5_1.innerText  = "Mouse is here!"

}

function handleMouseLeave(){
    title5_1.innerText ="Mouse is Gone!";

}

title5_1.addEventListener("click", handleTitleClick);
title5_1.addEventListener("mouseenter", handleMouseEnter)
title5_1.addEventListener("mouseleave", handleMouseLeave)

onclick… onmouseenter… onmouseleave

 

 

---

💛 3.5 More Events

🔶 Event 를 사용하는 2가지 방법

 

• title.addEventListener()를 해주고, click을 넘겨주는거

→ title.onClick()으로 바꿀 수 있음

//title5_1.addEventListener("click", handleTitleClick);
title5_1.onclick = handleTitleClick;
// title5_1.addEventListener("mouseenter", handleMouseEnter)
title5_1.onmouseenter = handleMouseEnter;
// title5_1.addEventListener("mouseleave", handleMouseLeave)
title5_1.onmouseleave = handleMouseLeave;

but !!! 니꼬는 addEventListener()를 선호함

→ .removeEventListener를 사용할 수 있기 때문에

 

• window event

function handleWindowResize(){
    document.body.style.backgroundColor = "tomato";
}

window.addEventListener("resize", handleWindowResize);

 

 

document.body / document.head / document.title 은 중요하니 존재

나머지 element 들은 querySelector나 getElementById 등으로 찾아와야 함

 

 

---

💛3.6 CSS in Javascript

 

function handleTitleClick(){
    // console.log("title was clicked");
    // title5_1.style.color = "red";
    const currentColor = title5_1.style.color;
    let newColor;
    console.log(title5_1.style.color);

    if(currentColor === "red"){
        newColor = "green";
    }else {
        newColor  = "red";
    }
    title5_1.style.color = newColor;
}

 

 

 

---

 

 

💛 3.7 CSS in Javascript part two

function handleTitleclick2(){
    // title5_1.className= "active";
    // console.log("test!!");
    const currentClassName = title5_1.className;
    const cilckedClass = "active"
    let titleClass;
    if(currentClassName === cilckedClass){
        titleClass = "";
    }else {
        titleClass = cilckedClass;
    }
    title5_1.className = titleClass;
}

 

 

---

 

💛 3.8 CSS in Javscript part three

🔶 .contains / .remove / .add

function handleTitleclick3(){
    const cilckedClass = "active"
    if(title5_1.classList.contains(cilckedClass)){
        title5_1.classList.remove(cilckedClass);
    }else {
        title5_1.classList.add(cilckedClass);
    }
}

 

 

🔶 toggle

토클 함수는 class name이 존재하는지 확인을 할 거임!!!

• class name이 존재하면 class name을 제거
• class name이 존재하지 않으면 class name을 추가

function handleTitleclick4(){
    title5_1.classList.toggle("active");
}

위와 똑같이 작동하는 코드임!

 

본 포스팅은 nomadcoder '바닐라 JS로 크롬 앱 만들기' 강의를 들으며 메모한 글 입니다.