이전글[자바스크립트] DOM 노드 ID, 태그명, name 속성으로 탐색하기DOM 객체 innerHTML 속성DOM 객체에는 innerHTML이란 속성이 존재합니다. 이 속성은 DOM 요소에 대응되는 태그의 내부 HTML을 가리킵니다. 예를 들어 다음과 같은 HTML 소스가 있다고 가정합니다. Dom여기서 body의 innerHTML은 Dom 입니다.그리고 h1 태그의 innerHTML 값은 Dom 입니다.innerHTML 속성을 통한 DOM 조작하기innerHTML 속성은 내부 HTML을 문자열로 가지고 있기 때문에 DOM을 쉽게 조작할 수 있습니다.다음글[자바스크립트] DOM 객체 스타일(style) 변경하기
JavaScript
2018. 5. 31. 17:44
[자바스크립트] DOM 노드 ID, 태그명, name 속성으로 탐색하기
DOM 노드 ID, 태그명, name 속성으로 탐색하기이전글[자바스크립트] DOM이란? DOM 개념 및 자바스크립트 DOM 다루기DOM 노드 ID, 태그명, name 속성으로 탐색하기이전시간에는 간단하게 노드를 생성하고 특정 태그의 자식태그로 추가하는것을 해봤습니다. 이번글에서는 특정 노드를 id값, name 속성, 태그명으로 탐색하는 방법을 알아보겠습니다.노드 탐색(검색)하기아래 그림과 같은 DOM 구조에서 IMG 태그를 찾는 방법을 알아보겠습니다. Dom 탐색 메서드노드를 탐색하기 위해서는 다음과 같이 document객체의 메서드들을 이용합니다.메서드명설명getElementById(요소의 id)태그의 id 속성의 값을 통해 탐색합니다. id는 유일해야 하므로 최초에 검색된 하나만을 리턴합니..
JavaScript
2018. 5. 31. 17:40
[자바스크립트] DOM이란? DOM 개념 및 자바스크립트 DOM 다루기
DOM(Document Object Model, 문서 객체 모델) 이란?DOM은 문서 객체 모델이라는 뜻으로 HTML이나 XML 같은 문서의 요소(태그)들을 조작 가능하도록 객체화시킨 것입니다. 또한 이렇게 객체화 시켜놓았기에 DOM은 자바스크립트 API를 이용해 조작할 수 있습니다. 브라우저는 HTML 문서를 로드하고 처리할 때 문서 객체 모델(DOM)을 생성합니다.DOM은 트리 형태의 자료구조를 가지며, DOM을 구성하는 요소로는 요소노드, 텍스트노드, 속성노드 등이 있습니다. 요소 노드는 , , 같은 일반적인 태그를 말하고, 텍스트 노드는 요소 노드 안에 들어있는 텍스트들을 말합니다.예를 들어 피콜로 서점와 같은 요소가 있다면 가 요소노드이며 "피콜로 서점"이 텍스트 노드입니다.DOM 생성 과정위..
JavaScript
2017. 11. 13. 23:30
[자바스크립트] Date 객체
Date 객체날짜와 시간을 다루는 객체입니다.생성자new Date()기본 생성자로 현재 시간에 대한 날짜 객체를 반환합니다.new 키워드 없이 Date() 함수로 실행시키는 경우 무조건 현재 시간을 반환합니다.var date = new Date(); //Mon Jan 02 2017 20:20:16 GMT+0900 (대한민국 표준시)new Date(milliseconds)1970년 1월 1일 자정(UTC) 에서 milliseconds 지난 만큼의 날짜에 대한 객체를 반환합니다.한국의 경우 UTC 에서 9시간을 더해야 하므로 1970년 1월 1일 09시 00분에서 시작합니다.var date = new Date(60000); //Thu Jan 01 1970 09:01:00 GMT+0900 (대한민국 표준시) ..
JavaScript
2017. 11. 13. 19:28
[자바스크립트] Number 객체
Number 객체기본 숫자값을 감싸는 래퍼(wrapper) 객체로 숫자를 제어할 때 사용합니다.만약 생성자로 사용하지 않고(new) 단순히 함수로서 사용할 경우 문자열을 기본 숫자값으로 바꾸어 주며 숫자가 아닌경우 NaN을 반환합니다.생성자var num = new Number(3); //3의 값을 갖는 객체 생성var num = new Number('3'); //3의 값을 갖는 객체 생성var num = new Number(3.33); //3.33의 값을 갖는 객체 생성var num = new Number('sad'); //숫자가 아닌 경우 NaN을 반환상수Number.MAX_VALUE //표현 가능한 가장 큰 숫자Number.MIN_VALUE //표현 가능한..
JavaScript
2017. 11. 13. 00:02
[자바스크립트] Infinity 와 NaN
Infinity 와 NaN자바스크립트에서 Infinity와 NaN은 미리 정의된 변수입니다.Infinity는 양의 무한대이며 NaN은 숫자가 아닌 값(Not a Number)을 표현합니다.ECMA Script3 까지는 이 변수들의 값을 수정할 수 있었지만 ES5 부터 수정할 수 없는 읽기전용 상수로 바뀌었습니다.Infinity자바스크립트에서 표현할 수 있는 양의 수를 넘는 무한대를 나타내는 값입니다.또는 어떤 수를 0으로 나누었을때 나오는 값이기도 합니다.3 / 0 //Infinity자바나 C같은 언어의 경우 어떤 수를 0으로 나누게 되면 예외가 발생하게 되지만 자바스크립트에서는 Infinity로 나타내게 됩니다.Infinity의 경우 양의 무한대를 뜻하고 -Infinity는 음의 무한대를 뜻합니다.같..
JavaScript
2017. 11. 12. 18:00
[자바스크립트] String 객체
String 객체문자열 객체입니다.생성자new String("문자열"); //"문자열" 값을 담은 String 객체 생성String("문자열"); //"문자열" 기본 문자열 값 반환var str = "문자열"; //리터럴 자체도 문자열 객체로 취급 속성var str = "문자열"; //또는 var str = new String("문자열");str.length //3 문자열의 문자 개수 반환메서드charAt(n)n번째에 위치에 있는 문자를 추출합니다.주의!) 위치의 index는 0부터 시작합니다.var str = new String("문자열");str.charAt(0); //"문"str.charAt(1); //"자"str.charAt(2); //"열"charCodeAt(n)n번째에 위치에 있는 문자의 인코..
JavaScript
2017. 11. 12. 12:00
[jQuery] proxy 함수
jQuery - proxy 함수proxy 함수는 특정한 문맥(context)을 갖는 함수를 리턴해 줍니다.문맥이란 어떤 함수의 환경(특히 함수가 가지는 데이터(변수)의 스코프)을 의미합니다.Context(문맥)자바스크립트는 자바와 C언어 같은 스택기반 언어가 아니기 때문에 변수가 갖는 스코프가 사용되는 시점에 따라 달라집니다.특히 this 키워드는 쓰이는 곳에 따라 그 의미가 달라지는데 그 유형은 다음과 같습니다.함수에서의 this함수 안에서의 this는 전역객체인 window객체를 가리킵니다.메서드로서의 this메서드로서의 this는 자신이 속한 인스턴스(객체)를 가리킵니다.jQuery 이벤트 리스너 안에서의 thisjQuery 이벤트 리스너 안에서의 this는 이벤트가 발생한 요소객체를 가리킵니다.이..
JavaScript
2017. 11. 12. 05:00
[자바스크립트] arguments 객체
arguments 객체자바스크립트에서는 함수를 호출할 때 내부적으로 arguments 객체가 생성됩니다.arguments 객체는 호출할때 넘겨준 인자값들을 가지고 있습니다.이 정보는 실제로 넘겨받은 매개변수와 별개로 갖게 되는 정보입니다.var arguFunc = function(first, second){ console.log(first); console.log(second); console.log(arguments[0]); console.log(arguments[1]);}arguFunc("첫번째 인자", "두번째 인자");출력결과첫번째 인자두번째 인자첫번째 인자두번째 인자그리고 인자값이 없는 경우 비어있는 arguments 객체가 생성됩니다.또한 arguments 객체는 배열처럼..
JavaScript
2017. 11. 11. 22:07
[자바스크립트] 타이머 함수
타이머 함수타이머 함수는 일정시간마다 혹은 지정한 시간에 특정 함수를 실행할 수 있도록 하는 함수입니다.타이머 함수의 경우 setTimeout()과 setInterval() 두 가지가 있고 각 함수에 맞는 타이머 취소 함수가 있습니다.사실 타이머 함수는 Window 객체의 메서드이므로 어디서나 사용 가능한 전역 함수입니다.함수매개변수설명setTimeout(Function, millisecond)Function - 특정 시간이 되면 실행시킬 함수millisecond - 실행시킬 시간지금 시점으로 몇 밀리초 후에 실행할 것인지를 지정하며 밀리초(1/1000) 단위입니다.일정 시간 후 지정한 함수를 한 번 실행합니다.setInterval(Function, millisecond)Function - 특정 시간이 ..
