js) 여러 함수 및 dir, document

const age = prompt("How old are you?");
console.log(typeof "15", typeof parseInt("15"));

prompt 입력창을 띄워주지만 구방식이라 요즘엔 안쓴다
typeof 타입형을 판단해 출력
parseInt 문자열을 int형으로 바꿔준다

 

const age = parseInt(prompt("How old are you?"));
console.log(age);

입력을 int로 바꿔서 해준다.

 

const age = parseInt(prompt("How old are you?"));
console.log(isNaN(age));

 

isNaN()은 is Not a Number 이란 뜻

 

논리 연산자

and: &&
or: ||

 

document, dir

document는 이미 존제하는 객체
document를 하면 html에서 내가 정의한 항목들이 뜬다.
document는 html을 의미하고 js에서 html을 변경할 수 있다.

 

document.getElementById("title")

id가 title인 태그를 가져온다.

 

console.dir(title);

dir는 element를 더 자세히 보여준다.

 

title.innerText = "hello"

이렇게하면 title 태그의 문자가 hello로 바뀐다.

 

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

console.log(title);

hello 클래스의 h1 태그를 가져온다, 많으면 첫번째꺼만 가져온다

 

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

이렇게하면 모두 가져온다.

id로 검색하려면 #hello로 해주면된다.

 

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

이렇게하면 class hello를 가진 div 내부의 first-child인 h1을 찾아오는것

 

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

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

title.addEventListener("click", handleTitleClick)

클릭 이벤트 function 뒤에 ()를 안하면 함수를 js에 넘겨주고 유저가 클릭하면 js가 실행 버튼을 대신 눌러주는 것이다.