NOTE

console.log("파이썬 프린트네, 로그 남겨줌")

const a = 5; // 상수(constant) 선언
let a = 5;   // 변수(variable) 선언, 이후 변경 가능

/* 걍 쓰면 되는 파이썬 찬양하라 */

var a = 5; // 과거의 값을 안없애나? 여튼 쓸일 없음

ALWAYS const SOMETIMES let NEVER var

리스트만들기

const week = ["mon", "tue", "wed", "thu", "fri", "sat"];

//Get item from Array
console.log(week);

//Add one more day to the array
week.push("sun");
console.log(week)

딕셔너리 만들기

const player = {
    name: "amy",
    points: 373737,
    fat: true
};

console.log(player);
// {name: 'amy', points: 373737, fat: true}
// 추가, 변경
player.lastname = "lee"
player.points = player.points - 373736

console.log(player);
// {name: 'amy', points: '1', fat: true, lastname: 'lee'}

함수만들기

function sayHello(name, age){
    console.log("Hello!", name, "I'm", age ,"years old");
}

sayHello("amy", 20);
sayHello("jimmy", 11);
sayHello("hoit", 73);

함수 조건 걸기

const player = {
    name: "nico",
    sayHello: function(otherName){
        console.log("hello!" , otherName , "nice to meet you");
    },
}

console.log(player.name);
player.sayHello("lynn");

console.log => console창에 로그 남기기

다중 함수

const calculator = {
    plus: function (a, b) {
        return(a + b);
    },
    minus: function(a, b) {
        return(a - b);
    },
    times: function(a, b) {
        return(a * b);
    },
    divide: function(a, b) {
        return(a / b);
    },
    power: function(a , b) {
        return(a ** b);
}
};

console.log(calculator.minus(3, 5));

prompt => 팝업으로 입력 받음. but 자바스크립트를 멈추게함, 안예쁘고 별로임 오래된 방식

console.log(typeof age); //age의 데이터 타입
console.log(parseInt(age)) // age 숫자로 바꿔줌

조건문

const age = parseInt(prompt("how old are you?"));
//팝업을 띄워 값을 입력받고 정수인지 확인

if(isNaN(age)){ //매개변수가 숫자인지 검사하는 함수 Not a Number
    console.log("Please write a number");
} else {
    console.log(age)
    console.log("Thank you writing your age.");
}

and = &&
or = ||

파이썬 == -> 자스 ===

const age = parseInt(prompt("how old are you?"));

if(isNaN(age)){
    console.log("Please write a number");
} else if (age < 18) {
    console.log("You are too young.");
} else if ( age >= 18 && age <= 50) {
    console.log("you can drink.")
} else{
    console.log("you are too old.");
}

"title"아이디를 가진 것에서 element가져오기

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

console.dir(title);

title.innerText = "Got you!";

css 처럼 안에 element 가져오기

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

console.log(title);
// 만약 같은 이름의 dic가 여러개일 경우 첫번째 element만 가져옴

const title = document.querySelectorAll(".hello:first-child h1"); 

// 다가져오기

클릭이벤트

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


function handleTitleClick() {
    console.log("title was clicked!");
}

title.addEventListener("click", handleTitleClick);//()넣을 필요 없음

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


function handleTitleClick() {
    title.style.color = "pink";
}

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

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

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

1. addEventListenr(유저 행동 감지, 함수 이름);
2. 함수생성

마우스 온 & 마우스 오프 색 바꾸기

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

function handleTitleClick() {
    if(h1.style.color === "pink"){
        h1.style.color = "violet";
    } else {
        h1.style.color = "pink";
    }
}

h1.addEventListener("click", handleTitleClick)

👇👇👇 개선안

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

function handleTitleClick() {
    const currentColor = h1.style.color;
    let newColor;
    if(currentColor === "pink"){
        newColor = "violet";
    } else {
        newColor = "pink";
    }
    h1.style.color = newColor;
}
h1.addEventListener("click", handleTitleClick)

변수 설정해서 더 가독성 있게 만들어줌

일부 설정은 두고 특정 설정만 바꾸기

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

function handleTitleClick() {
    const clickedClass = "active"
    if(h1.classList.contains(clickedClass)){
      // h1.class중에 clickedclass를 가지고 있는가
        h1.className = "";
    } else {
        h1.className = clickedClass;
    }
}

h1.addEventListener("click", handleTitleClick)

class.list.기능들

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

function handleTitleClick() {
    const clickedClass = "active"
    if(h1.classList.contains(clickedClass)){
        h1.classList.remove(clickedClass);
    } else {
        h1.classList.add(clickedClass);
    }
}

h1.addEventListener("click", handleTitleClick)
//classList의 font는 유지한 채 active css만 추가했다가 지워주는 기능

위 기능을 아래 기능으로 구현!!
귀찮은 건 이미 다 구현해놨구만
toggle => 스위치 온오프 처럼 리스트에 넣었다 뺐다

function handleTitleClick() {
    h1.classList.toggle("active");
    }

form 안에 넣으면 값입력, 요구 글자수 설정을 html로 가능. form안의 button을 누르면 자동으로 submit됨(enter도)
제출될 때마다 새로고침됨

<form id="login-form">
        <input 
        required
        maxlength="15"
        type="text" 
        placeholder = "What is you name?"
        />
        <button>Log In</button>
    </form>