Front-End/JavaScript 13

[JavaScript] AND, OR 연산자 정리 (Feat. null 병합 연산자)

Boolean true? false?False(Falsy) - `false`, `null`, `undefined`, `NaN`, `0`, `""`Ture(Truthy) - 나머지 값들 ! `{}`, `[]` 빈 객체, 배열도 포함AND 연산자왼쪽 값이 ture이면 오른쪽 값을 리턴하고, 왼쪽 값이 false이면 왼쪽 값을 리턴console.log(true && true) // true (오른쪽 값 리턴)console.log(true && false) // false (오른쪽 값 리턴)console.log(false && true) // false (왼쪽 값 리턴)console.log(false && false) // false (왼쪽 값 리턴) OR 연산자왼쪽 값이 ture이면 왼쪽 값을, 왼쪽 값이 f..

[JavaScript] 이벤트 핸들링 (등록, 삭제, 브라우저 기본 동작 제어)

이벤트 핸들러 등록HTML의 속성이나 DOM 프로퍼티를 활용해 이벤트를 등록하는 방법 외에 `Element.addElementListener('type', 'handler')`를 통해서 이벤트 핸들러를 등록 가능하다.// HTML 속성 사용 예시Click// DOM 프로퍼티 사용 예시Click이벤트 핸들러 삭제`addEventListener` 메소드를 활용하여 이벤트 핸들러를 등록했다면, `Element.removeEventListener('type', 'handler')`를 통해서 이벤트 핸들러 삭제 가능하다.브라우저 기본 동작브라우저 기본 동작인 마우스 오른쪽을 클릭하면 상황에 맞는 메뉴 창이 뜨거나, `input`태그에 커서를 두고 키보드 키를 누르면 해당 값이 입력되는 것을 `preventDefa..

[JavaScript] DOM트리와 요소 다루기

window 객체`window` 객체는 브라우저 창을 대변하면서 자바스크립트에서 최상단에 존재하는 객체이다.어느 곳에서나 항상 접근할 수 있는 객체이기에 전역 객체, Global Object라 하며, 어떤 프로퍼티나 메소드를 사용하든 전역 객체 내부의 것이기 때문에 앞에 `window.` 생략할 수 있다.DOMDOM이란 Document Object Model의 약자로 문서 객체 모델이다.웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것이며, 객체를 노드(Node)라는 용어로 표현하고, 태그는 요소 노드, 문자는 텍스트 노드로 구분된다.자바스크립트로 태그 선택 방법메소드결과`document.getElementById('id')`id에 해당하는 태그 하나`document.getElementByCl..