본문 바로가기

DEVELOPMENT/JavaScript

 (5)
[JavaScript] 이벤트 - 이벤트 객체, this 키워드 이벤트 이벤트(event)는 웹 브라우저와 사용자 사이에 상호작용이 발생하는 특정 시점을 의미한다. 자바스크립트로 이벤트 종류에 따른 제어 작업을 할 수 있다. 1. 이벤트 종류 구분 이벤트 설명 마우스 이벤트 onclick 마우스로 클릭하면 발생한다. ondblclick 마우스로 빠르게 두 번 클릭하면 발생한다. onmouseover 마우스 포인터를 올리면 발생한다. onmouseout 마우스 포인터가 빠져나가면 발생한다. onmousemove 마우스 포인터가 움직이면 발생한다. onwheel 마우스 휠(wheel)을 움직이면 발생한다. 키보드 이벤트 onkeypress 키보드 버튼을 누르고 있는 동안 발생한다. onkeydown 키보드 버튼을 누른 순간 발생한다. onkeyup 키보드 버튼을 눌렀다가..
[JavaScript] 문서 객체 모델 - DOM, Node , 폼(form) DOM 문서 객체 모델(DOM, Document Object Model)은 웹 브라우저에 표시되는 문서를 자바스크립트가 이해할 수 있도록 객체화한 모델 구조이다. DOM은 트리 구조로 생성되는데, 이를 DOM 트리라고 한다. DOM 트리는 document 객체 하위에 HTML 태그 요소, 속성, 텍스트, 주석 등이 트리 형태로 구성되는데, 이들을 각각 노드(node)라고 한다. 각 노드는 부모, 자식, 형제 관계가 형성된다. *DOM 트리를 구성하는 노드 타입 타입 설명 문서 노드(Node.DOCUMENT_NODE) 최상위 document 객체의 노드 타입 요소 노드(Node.ELEMENT_NODE) h1, p 태그와 같은 요소의 노드 타입 속성 노드(Node.ATTRIBUTE_NODE) href, sr..
[JavaScript] 객체 - 객체 특성, 표준 내장 객체, 브라우저 객체 모델 객체 객체는 키와 값으로 구성된 속성들의 집합을 의미하는 자료형이다. 객체는 {}를 이용해 생성할 수 있는데, 이런 방법을 리터럴(literal) 방식으로 객체를 생성했다고 표현한다. 그리고 속성이 한 개도 없는 객체를 빈 객체라고 한다. 객체는 데이터의 종류를 가리지 않으므로 모든 자료형의 데이터를 값으로 가진다. 예를 들어, 배열, 숫자, 논리 데이터를 한 객체의 속성으로 추가할 수 있으며, 또 다른 객체나 함수가 들어갈 수도 있다. 객체 접근 방법 객체는 대괄호 연산자나 마침표 연산자로 접근할 수 있다. 객체["키"] = 값; 객체.키 = 값; 객체 속성 추가 또는 삭제하기 객체의 속성에 접근해서 새로운 값을 할당할 때, 존재하지 않는 키라면 새로운 속성이 추가된다. 그리고 delete 키워드로 속..
[JavaScript] 함수 - 함수 정의, 스코프, 함수 호이스팅, 즉시 실행 함수 함수 정의 1. 함수 선언문 *형식 function 함수명(){} *함수 정의, 호출 // 함수 정의 function gugudan(){ for(let i = 1; i
[JavaScript] 기초 문법 - 변수와 상수, 자료형, 객체, 연산자, 조건문, 반복문 변수와 상수 자바스크립트에서 데이터를 저장할 수 있는 공간을 변수와 상수 변수라고 한다. 변수는 변할 수 있는 데이터를 저장하는 공간이고, 상수 변수는 재할당할 수 없는 데이터를 저장하는 공간이다. 1. var var num; // 변수 선언 var num = 10 + 20; // 변수 초기화 2. let let num = 10 + 20; (1) 변수명 중복이 불가능하다. (2) 호이스팅되지 않는다. +) 호이스팅(hoisting)은 var 키워드로 변수를 선언하고 할당했을 때, 변수 선언을 자바스크립트의 스코프(scope) 맨 위로 올려서 실행하는 것을 말한다. (3) 스코프의 범위가 다르다 3. const 변수를 선언할 때 사용하는 키워드로 const 도 있다. 변수명을 중복으로 선언하는 것과 호이스..

티스토리툴바