배열(Array) 자바스크립트에서 배열은 이름과 인덱스로 참조되는 정렬된 값의 집합으로 정의된다. 배열을 구성하는 각각의 값을 배열 요소element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 한다. 배열 생성 배열 요소의 타입이 고정되어 있지 않다. 배열 요소의 인덱스가 연속적이지 않아도 되며, 따라서 특정 배열 요소가 비어 있을 수도 있다. Array객체로 다룬다. const arr1 = new Array(); arr1[1] = 10; arr1[3] = '이십'; console.log(arr1); //다차원배열 let arr = [[0,1], [2,3], [4,5], [6,7]] 자바스크립트는 내장된 데이터 타입으로 다차원 배열을 제공하지 않는다. 자바스크립트에서는 모든 것..

문서 객체 모델(DOM) HTML에 접근하기 위한 모델(인터페이스)이며, HTML을 컨트롤하기 위한 방법 그 자체를 기술한 것이다. 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. 우리는 이 DOM으로 모든 HTML요소 및 속성, CSS스타일을 변경할 수 있으며, 이벤트를 추가하고, 이벤트에 반응할 수 있다. DOM은 W3C의 표준 객체 모델이다. DOM에 접근해 보자 문서가 로드될 때(모든 DOM을 사용할 수 있게 되는 때) 실행되는 함수를 정의하였다. 새로운 H1 element를 생성하고, element에 text를 추가하며, H1을 이 문서의 트리에 추가한다. 브라우저는 HTML문서를 로드한 후 해당 문서에 대한 모델을 메모리에 생성한다. 이 때 생성된 객체들의 구조를 D..

this 자바의 this와는 다르게 클래스에 종속되지 않으며 자바스크립트에서의 this는 함수의 호출방식에 따라 가져오는 객체가 달라지므로 this의 사용 위치가 중요하다. 기본적으로는 최상위객체인 window를 가리킨다. console.log(this); // window function test1(){ console.log("test1 ", this); // test1 window function test2(){ console.log("test2 ", this); // test2 window } test2(); } test1(); 함수 안에서의 this 함수 안에서의 this는 함수의 주인에게 바인딩된다. 아래의 예시에서 this.num의 this는 window객체를 가리킨다. var num = 0;..

타이머 Window 객체의 메서드 중 하나이며 익명, 기명함수를 통해 값을 제어한다. 일정시간이 지난 뒤 함수를 호출하거나, 특정 함수를 지속적으로 반복하여 실행할 때 사용한다. ms단위를 사용한다. setTimeout / clearTimeout 지정한 시간 이후, 단 한번만 지정된 콜백함수 호출 clearTimeout을 통해 setTimeout 호출 취소 See the Pen Untitled by magic (@mag11c) on CodePen. setInterval / clearInterval 지정된 시간 간격마다 지정된 함수를 반복적으로 호출 및 호출취소 See the Pen Untitled by magic (@mag11c) on CodePen.

목차 이벤트(Event) 사용자가 버튼을 눌렸을 때, 웹 페이지가 로드될 때, 특정 영역에 마우스가 올라갔을 때 등등등. 이벤트의 요소는 다양하다. 이 이벤트들은 DOM요소와 관련이 깊다. ​이벤트가 발생하면 무언가가 이를 감지할 수 있어야 하며, 그에 대응하는 반응을 하여야 한다. 이를 위해 이벤트는 일반적으로 함수에 연결되며 그 함수는 이벤트가 발생하기 전에는 실행되지 않다가 이벤트가 발생되면 실행된다. ​이 함수를 이벤트 핸들러라 하며 이벤트에 대응하는 처리를 기술한다. 이벤트리스너와 이벤트핸들러 이벤트 핸들러는 addEventListener() 메서드를 사용하지 않고 이벤트와 함수를 연결하는 것이다. 이벤트 종류 UI Event Event 설명 load 웹, 스크립트 페이지 로드 완료시 unloa..

객체(Object) 생성자를 통해 객체를 만들 수 있으며, 객체를 직관적으로 선언하여 사용할 수 있다. Key, Value로 구성된 속성(프로퍼티)들의 집합이다. 자바스크립트의 함수를 프로퍼티에 사용할 수 있으며, 객체 내부에 선언된 함수를 메서드라 한다. 자바스크립트의 객체는 프로퍼티와 그 객체에 관련된 동작(메서드)를 모두 포함할 수 있다. 프로토타입 객체의 프로퍼티와 메서드를 상속받는 것이 가능하다. var obj2 = { prop1: "this", // 프로퍼티 prop2: "is", // 프로퍼티 prop3: "property", // 프로퍼티 hello: function () { // 행동을 정의하는 메서드 console.log("메서드"); } } obj2.hello(); >> 메서드 객체 ..

[ JavaScript ] JavaScript란? 객체(Object) 기반의 프로그래밍 언어이다. HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있다. (HTML은 웹의 '뼈대', CSS는 뼈대의 '디자인', 자바스크립트는 '뇌' 라고 생각하자) Node.js와 같은 프레임워크를 사용하면 서버영역에서도 사용할 수 있다. 자바스크립트는 1995년에 넷스케이프(Netscape)의 브렌던 아이크(Brendan Eich)에 의해 만들어졌다. 처음에는 모카(Mocha)라는 이름으로 개발되었으나, 그 후에 라이브스크립트(LiveScript), 최종적으로는 자바스크립트(JavaScript)라는 이름으로 변경됐다. 1996년에 넷스케이프(Netscape)는 자바..

See the Pen Untitled by magic (@mag11c) on CodePen.