js가 어떻게 동작하는지 매일 가볍게 보고 모던 JS와 같이 정리를 하려고 한다!
인간 JS 엔진되기 - 함수와 함수 호출의 차이
js에서는 함수를 인자로 작성할 수가 있다 여기서 함수이름만 적는지 함수()를 적는지 헷갈릴 수 있다!!
함수에서 함수를 인자로 작성할 때는 고차 함수가 아니라면 함수 선언을 적어줘야한다!
const add = (a, b) => a + b; function calculator(func, a, b) { return func(a, b); } calculator(add, a, b);왜 함수 인자로는 고차함수가 아니라면 함수 선언만 적을까?
이건 생각보다 너무 간단하게 이해하고 넘어갈 수 있었다
바로 add는 함수 선언이라 바로 작동을 안하지만 add()를 해버려민 바로 작동해버려서!
calculator(add(), a, b); ==> calculator(undefined + undefined, a, b);
라고 생각하면 편하다!
document.querySelector('#header').addEventListener('click', add);add 함수가 눌린 뒤에 실행이 되어야하기 때문에 바로 작동 안되게 여기서도 함수 선언만 작성했다!
고차함수 일때는 함수선언 방식이 달라지기 때문에 주의하자!
const onClick = () => {
return () => {
console.log('hello');
}
}
document.querySelector("#header").addEventListener("click", onClick());여기서 보면 onClick함수는 리턴 값이 또 다른 함수이다! 이때는 함수를 부를때 onClick이 아닌
onClick()으로 불려야함
정리하면 함수의 리턴값을 보고 내가 이 함수를 인자로 사용할때 함수 선언을 어떻게 작성할지 적어주면 된다!
모던 JS 정리 - DOM을 집중적으로!
js가 돌아가는 플랫폼은 Host라고 불린다, 호스트는 웹서버, 심지어 커피머신도 됨!
이때 이 플랫폼은 해당 플랫폼에 특정되는 기능을 제공 -> 이걸 호스트 환경이라고 함!
호스트 환경은 ECMA Script에 더해서 플랫폼에 특정되는 객체와 함수를 제공
웹 브라우저는 웹페이지를 제어하기 위한 수단을 제공 하는 등
호스트 환경 - 웹 브라우저의 경우
최상단 window라고 불리는 루트 객체가 있다 -> 2가지 역할을 함!
1. 자바스크립트의 전역 객체!
2. 브라우저 창을 대변하고 이를 제어할 수 있는 기능을 제공
function sayHi() {
alert("안녕하세요!");
}
window.sayHi();
alert(window.innerHeight); // 창 내부 높이DOM이란
js를 웹에서 응용해서 사용하기 위해서는 무조건 알고 넘어가야할 개념이다!
DOM(Document Object Model) 웹페이지 내 모든 컨텐츠를 객체로 나타냄
document 객체가 존재하는데 이건 모든 페이지의 기본 진입점 역할을 한다!
페이지 내 무엇이든 변경 가능하고 원하는거 추가 삭제도 가능하다
document.body.style.background="red";
setTimeout(() => (document.body.style.background=""), 1000); // 1초 뒤 배경 색 없애기DOM트리 정리
html을 지탱하는건 결국 tag다! -> 왜나면 모든 모양이 태그로 되어있기 때문!
Dom에서는 html을 보고 트리 형태로 나타낸다 -> 그리고 이걸 전부 객체로 보기 때문에
태그를 접근하고 조작이 가능해진다!
<!DOCTYPE HTML>
<html>
<head>
<title>사슴에 관하여</title>
</head>
<body>
사슴에 관한 진실.
</body>
</html>이렇게 되어있으면 DOM트리에서는 엔터를 친것과, 주석도 전부 각각의 노드로 표현된다
문자는 텍스트 노드가 됨
DOM 탐색하기
document 객체에서부터 무조건 시작 진입접이라고 생각하면 편하다!
<. html > -> document.documentElement
<. body > -> document.body
차고로 브라우저에서 DOM을 읽어야 객체로 인식하고 무엇이들 할거기 때문에 아직 안읽었으면 즉
script를 너무 위에 적어버리면 안 읽은 해당 부분은 null로 인식해버린다!
<html>
<head>
<script>
alert( "HEAD: " + document.body ); // null, 아직 <body>에 해당하는 노드가 생성되지 않았음
</script>
</head>
<body>
<script>
alert( "BODY: " + document.body ); // HTMLBodyElement, 지금은 노드가 존재하므로 읽을 수 있음
</script>
</body>
</html>