# 노드(node) HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장합니다. HTML DOM은 노드들을 정의하고, 그 사이의 관계를 설명해주는 역할을 합니다. HTML 문서의 정보는 노드 트리라고 불리는 계층적 구조에 저장됩니다. 노드 트리는 노드들의 집합이며 노드 간의 관계를 보여줍니다. 노드 트리는 최상위 레벨인 루트 노드로부터 시작하여, 가장 낮은 레벨인 텍스트 노드까지 내려갑니다. HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있습니다. ● 노드 종류 1. 문서 노드(document node) : 문서 전체를 나타내는 노드 2. 요소 노드(element node) : HTML 요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드입니다. 3. 속성 노드(a..
# 문서 객체 모델(Document Object Model) XML이나 HTML문서에 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. HTML 문서 ● document 웹 페이지 그 자체를 의미합니다. 웹페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 document 객체로부터 시작해야 합니다. 메소드 getElementsByTagName() 해당 태그 이름의 요소를 모두 선택합니다. getElementById() 해당 아이디의 요소를 선택합니다. (id는 중복xx) getElementsByClassName( 해당 클래스에 속한 요소를 모두 선택합니다. getElementsByName() 해당 name 속성값을..
# 브라우저 객체 모델(Brower Object Model) 웹 브라우저에 구현된 JavaScript 객체 모델을 의미하며 window 객체의 프로퍼티로 조회할 수 있습니다. ● window 현재 웹브라우저의 창이나 탭을 표현하기 위한 객체들이며, 웹 브라우저는 window 객체를 이용하여 브라우저 창을 표현하게 됩니다. setTimeout() 일정 시간이 지난 후 매개변수로 제공된 함수를 실행합니다. (한 번) setInterval() 일정 시간마다 매개변수로 제공된 함수를 실행합니다. clearTimeout() 일정 시간 후 setTimeout()에서 실행된 함수를 중지합니다. clearInterval() 일정 시간마다 setInterval()에서 실행된 함수를 중지합니다. 예시 1) 예시 2) se..
● Math 객체 Math 객체는 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 자바스크립트 표준 내장 객체입니다. min() 인수로 전달 받은 값 중에서 가장 작은 수를 리턴합니다. 인수를 전달되지 않으면 Infinity를 리턴합니다. 또한, 인수 중에서 비교할 수 없는 값이 포함되어 있으면 NaN을 리턴합니다. max() 인수로 전달 받은 값 중에서 가장 큰 수를 리턴합니다. 인수가 전달되지 않으면 -Infinity를 리턴합니다. 또한, 인수 중에서 비교할 수 없는 값이 포함되어 있으면 NaN을 리턴합니다. round() 인수로 전달 받은 값을 소수점 첫번째 자리에서 반올림하여 그 결과를 리턴합니다. floor() 인수로 전달 받은 값과 같거나 작은 수 중에서 가장 큰 정수를 리턴합니다. ..
# 객체(Object) 키(key)와 값(value)으로 구성된 프로퍼티(property)들의 집합입니다. 프로퍼티의 값은 자바스크립트에서 사용할 수 있는 모든 값을 담을 수 있습니다. * 프로퍼티(property) 프로퍼티 키(이름)와 프로퍼티 값으로 구성됩니다. 프로퍼티는 프로퍼티 키로 유일하게 식별할 수 있습니다. 프로퍼티 키는 프로퍼티를 식별하기 위한 식별자이며 프로퍼티 값으로 사용할 수 있는 값은 빈 문자열을 포함하는 모든 문자열 또는 symbol 값입니다. ex) const dog = { name: '덜라', family: '사모예드', age: 1, weight: 9.0, play: function(){ console.log('뛰어놉니다.'); } } console.log(dog.name) ..
# 사용자 정의 함수(function) 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미합니다. 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있습니다. ● 함수 표현하는 방법 1. 함수 선언식 함수명(); function 함수명(){ 실행문; } 예시 ) 사용자 정의함수 - 1 function func1(){ console.log('func1 함수가 호출되었습니다.'); } 2. 함수 표현식 const 변수명 = function(){ 실행문; }; 변수(); 예시 1) const Hello1 = function(){ console.log('Hello 실행되었습니다.') }; 예시 2) * 함수 표현식과 함수 선언의 차이점 -> 호이스팅(hoisting) 함수 표현식은 ..
# 배열(array) 배열은 이름과 인덱스로 참조되는 정렬된 값의 집합입니다. 배열을 구성하는 각각의 값을 배열 요소라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스라고 합니다. ● 자바스크립트 배열의 특징 1. 배열 요소의 타입이 고정되어 있지 않습니다. 따라서 같은 배열에 있는 배열 요소끼리의 타입이 다를 수 있습니다. 2. 배열 요소의 인덱스가 연속적이지 않아도 되며, 특정 배열 요소가 비어 있을 수 있습니다. ex) let arr = new Array(); arr[0] = 10; arr[1] = 30; arr[5] = 70; 3. 자바스크립트의 배열은 Array 객체로 다뤄집니다. ● 배열을 만드는 방법 1. let 배열 이름; // 배열의 선언 배열 이름 = [요소1, 요소2, 요소3, 요소..
4. continue 문 반복 중인 루트 내에서 사용하여 해당 루프의 나머지 부분을 건너뛰고, 다음 조건식의 판단으로 넘어가게 합니다. 보통 반복문 내에서 특정 조건에 대한 처리를 제외하고자 할 때 사용합니다. for(let i=1; i
# 제어문 프로그램의 순차적인 흐름을 제어해야 할 때 사용하는 실행문을 의미합니다. ● 반복문 프로그램 내에서 같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 실행문입니다. 1) while문 2) for문 1. while 문 특정 조건식이 참인 동안 계속해서 주어진 실행문을 반복합니다. while(조건식){ 조건식의 결과가 참인 동안 반복될 실행문; } 예시 1) 예시 2) 예시 3) 2. do ~ while 문 while문은 루트에 진입하기 전에 먼저 조건식부터 검사를 합니다. 하지만 do ~ while문은 먼저 루프를 한 번 실행한 후에 조건식을 검사합니다. do { 조건식의 결과가 참인 동안 반복될 실행문; } while(조건식); 예시 ) 3. for 문 for문 while문과 달리 자체적..
# 제어문 프로그램의 순차적인 흐름을 제어해야 할 때 사용하는 실행문을 의미합니다. ● 조건문 프로그램 내에서 주어진 조건문의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문입니다. 1) if문 : 범위에 대한 조건식을 사용할 때 유리 2) switch문 : 특정 값과 일치하는 값을 찾을 때 유리 1. if 문 조건식의 결과가 참(true)이면 주어진 실행문을 실행하고, 거짓(false)이면 아무것도 실행하지 않는 문장입니다. if(조건식){ 조건식의 결과가 차일 때 실행할 문장; ... } 예시) 2. if ~ else 문 if 문과 같이 사용할 수 있는 else문은 if문의 조건식의 결과가 거짓(false) 일 때 실행문을 실행합니다. if(조건식){ 조건식의 결과가 참일 때 실행할 문장; }e..
