본문 바로가기

웹 프로그래밍/JavaScript7

자바스크립트 배열 배열의 선언 1 2 3 4 5 6 7 8 9 10 11 12 var emptyArr = []; console.log(emptyArr[1]); // undefined console.log(emptyArr.length); // 0 var arr = [1, 2, 3, "hello", null, true, []]; console.log(arr[1]); // 2 console.log(arr[4]); // null console.log(arr.length); // 7 console.log(typeof arr); // object r new Array() 문으로 선언할 수도 있지만, 보통은 배열 리터럴로 대괄호({})를 사용해서 배열을 선언합니다. 배열은 대괄호 내에 접근하고자 하는 원소에 배열 내 위치 인덱스 값을.. 2019. 8. 2.
Browser Event, Event object, Event handler Event브라우저에는 많은 이벤트가 발생한다.브라우저 화면의 크기를 마우스로 조절할 때도, 스크롤을 할 때도, 마우스로 이동하거나 무언가를 선택할 때도 이벤트가 발생한다.이벤트를 브라우저가 발생시켜주기때문에 우리는 그때 어떤 일을 하라고 할 일을 등록할 수가 있다.즉, HTML엘리먼트별로 어떤 이벤트(주로 키보드나 마우스 관련)가 발생했을 때 특정 행위를(어떤 일) 하고 싶다면, 대상엘리먼트를 찾고 어떤 일을 등록하면 된다.그것을 자바스크립트로 구현할 수 있다. 이벤트 등록 이벤트 등록 표준방법이다.addEventListener 함수를 사용할 수 있다.1234var el = document.querySelector(".outside");el.addEventListener("click", function(.. 2019. 2. 7.
DOM과 querySelector 1. DOM브라우저에서는 HTML코드를 DOM(Document Object Model)이라는 객체형태의 모델로 저장한다.그렇게 저장된 정보를 DOM Tree라고 한다.결국 HTML element는 Tree 형태로 저장된다. 복잡한 DOM Tree를 탐색하기 위해 JavaScript로 탐색알고리즘을 구현하면 너무 힘들다.그래서 브라우저에서는 DOM(document object model)이라는 개념을 통해서, 다양한 DOM API(함수 묶음정도)를 제공하고 있다.브라우저는 DOM Tree를 찾고 조작하는 걸 쉽게 도와주는 여러가지 메소드를(DOM API)를 제공한다. 2. getElementById()ID 정보를 통해서 찾을 수 있다.3. querySelector()노드의 하위 트리에서 첫 번째로 일치하는.. 2019. 2. 7.