[JS 클론코딩] 노마드코더 JS크롬앱만들기

코딩/HTML\CSS\JS

[JS 클론코딩] 노마드코더 JS크롬앱만들기

낫띵온미 2022. 11. 7. 00:06

console.log("str");
- console에 괄호 안의 내용 출력
MDN
- Mozilla Developer Network

VS Code 단축키

다중선택

Alt + Click
Shift + Alt + 드래그
Alt + Click -> Shift + 방향키

변수

const a : 상수, 변경 불가 //default
let a : 변경 가능 //업데이트가 필요한 경우
var : 구버전, 변경에 대한 규칙X, 비추천

데이터 타입

boolean : true, false
null :없다, 비어있음을 명시
undefined : 정의되지 않음

배열

const name = [1 ,null ,true ,"hi" ];

데이터 타입 상관X
.push() : 배열 추가

오브젝트

const player = {
    name: "kai",
    points: 10,
    hansome: true,
    fat: "never",
 };
 
console.log(player);
console.log(player.name);
console.log(player["name"]);

//update
player.fat=false;
player.lastName="kim";
console.log(player);
console.log(player.fat);

오브젝트만의 규칙 적용 (: ,)
리스트와 달리 의미를 가짐
object는 const이지만 내부의 속성은 업데이트 가능
외부에서 수정/추가 가능

JavaScript에서 HTML 읽어오기

<!DOCTYPE html>
<html>
    <head>
        <meta setchar="utf-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge"/>
        <meta name="viewprot" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>Momentum App</title>
    </head>
    <body>
        <div class="Hello">
            <h1 class="Hi" id="title">Grab me!</h1>
        </div>
        <script src="script.js"></script>
    </body>
</html>

1. document.getElementById()

const title = document.getElementById("title")
console.log(title)
console.log(title.id)
console.log(title.textContent)

2. document.getElementsByClassName()

const His = document.document.getElementsByClassName("Hi")
console.log(His)
//배열의 형태로 읽어옴
//console.log(His.id)

3. document.querySelector()

- 다수가 있을 경우 첫번째 것만

- querySelectorAll() : 배열의 형태로 모두 가져옴

- class는 . 으로, id는 #으로

const title = document.querySelector(".Hello h1")
console.log(title.id);
console.log(title.textContent);

Events

<!DOCTYPE html>
<html>
    <head>
        <meta setchar="utf-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge"/>
        <meta name="viewprot" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>Momentum App</title>
    </head>
    <body>
        <div class="Hello">
            <h1>Click!</h1>
        </div>
        <script src="script.js"></script>
    </body>
</html>

1. HTML element 가져오기

2. addEventListener(event, function)

event : "click"...
title.dir에서 on- 으로 시작하는 것들

const title = document.querySelector("div.Hello:first-child h1")
console.log(title)
console.dir(title)

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

function handleMounsEnter(){
    title.innerText = "Mouse is here!";
}

function handleMounsLeave(){
    title.innerText = "Mouse is gone!";
}

//if user click, excute hadleTitle Click
title.addEventListener("click", handleTitleClick);
title.addEventListener("mouseenter", handleMounsEnter);
title.addEventListener("mouseleave", handleMounsLeave);