전체 글 111

TIL 31일차_함수와 클로저

이벤트리스너에 매개변수 전달하기 이벤트리스너로 함수를 실행하고자 할때, 원하는 매개변수를 넣는 방법! 함수에 바로 매개변수를 넣어서 이벤트리스너에 할당하면 함수가 바로 실행되므로 다른방법이 필요하다. 바로 익명함수! 익명함수를 사용하면 쉽게 해결할 수 있다. //아래의 함수를 이벤트 리스너에 할당하자. function test(user) { console.log(user.age); } //이벤트리스너에 함수가 할당되지 않고, 바로(클릭과상관없이) soon.age값이 바로 콘솔에 찍힌다. aElement.addEventListener('click', test(soon)); //이벤트리스너에 함수가 할당되어 정상적으로 작동! aElement.addEventListener('click&#..

TIL 30일차_논리연산자

논리연산자 ( with shortcut circuit) 이미지출처: mdn 논리연산자 이를 토대로, 단락평가(Shortcut circuit)를 할 수 있다. 논리 표현식을 좌측부터 평가하므로, 아래 규칙에 따라 단락(short-circuit) 평가를 수행한다. (거짓 표현식) && expr은 거짓 표현식으로 단락 평가됩니다. (참 표현식) || expr은 참 표현식으로 단락 평가됩니다. "단락"이란, 위 규칙에서 expr을 평가하지 않는다는 뜻이다. 단락 평가가 발생하는 원인은 첫 번째 피연산자를 평가한 순간 이미 연산자의 결과가 정해지기 때문이다. 예를들어 return order = order || 1 여기서 order값이 참이면 order값을 그대로 쓰고, order값이 거짓이면 1을 리턴하게된다. ..

TIL 29일차_ HTML개념&append()

HTML 개념과 append와 appendChild의 차이 HTML은 무엇인지 말로 설명할 수 있도록 해보자. HTML (Hyper Text Markup Language) 하이퍼텍스트는 뭐고, 마크업 언어는 또 뭐야? 하이퍼텍스트 하이퍼텍스트는 참조(하이퍼링크)를 통해 독자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트이다. 기존의 문서가 순차적이면서 서열형 구조라면, 하이퍼텍스트는 링크에 따라 그 차례가 바뀌는 임의적이면서 나열형인 구조를 가진다. 즉, 출판된 책처럼 작가의 의도대로 사용자가 따라가는 것이 아닌, 하이퍼링크로 연결된 문서들을 어떠한 행위(클릭)에 따라 자유롭게 이동할 수 있다. 이런 하이퍼텍스트의 등장은 검색엔진과 더불어 정보습득의 새로운 장을 인류에게 가져다 주었다. 웹이라는..

TIL 28일차_DOM 가운데배치, 키로 함수 실행

DOM_엘리먼트 가운데배치 & 엔터키로 함수실행하기 엘리먼트 정 가운데에 배치하기 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute와 top,left 속성으로 해당엘리먼트의 위치를(정확히는 왼쪽위 꼭짓점을) 부모엘리먼트의 중앙에 위치시켜 놓은 뒤 transform속성을 입력해준다. transform: translate(-50%, -50%의 의미는 다음과 같다. height: 90vh; width: 90vw; margin-top: -45vh; margin-left: -45vw; 즉, 해당 엘리먼트의 너비와 높이의 50%만큼을 다시 left,top쪽으로 당겨준다. 이렇게하면 top과botto..

TIL 27일차_DOM 모든 자식노드 삭제하기

Remove All children 모든 자식노드를 삭제하는 방법들 const parent= document.querySelector(".parent"); while (parent.firstChild) { parent.removeChild(parent.firstChild); } const parent= document.querySelector(".parent"); while (parent.hasChildNodes()){ parent.removeChild(parent.firstChild)}; const parent= document.querySelector(".parent"); parent.querySelectorAll('*').forEach(n => n.remove());

TIL 26일차_DOM이해하기

DOM 이해하기 DOM (Document Object Model, 문서객체모델) BOM (Browser Object Model, 브라우저 객체모델) DOM을 이해하기 앞서, BOM부터 알아보자. BOM은 Browser Object Model(브라우저 객체모델)이며, 웹 브라우저와 관련된 객체들의 집합을 말한다. 이 BOM을 이용해서 브라우저저와 관련된 기능들을 구성하는데, DOM은 이 BOM 중 하나이다. BOM의 최상위 객체는 window이며, DOM은 이 window 객체의 하위 객체이기도 하다. DOM 그럼 문서객체모델은 정확히 뭘까? 문서객체는 html문서의 태그들을 JavaScript가 이용할수 있는 객체로 만든 것을 말한다. 모델은 문서객체를 인식하는 방식이라고 해석할 수 있다. 정리하면, D..