문서 객체 모델 (DOM) 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 DOM 트리 웹 문서에 있는 요소들 간의 부모, 자식 관계를 계층 구조로 표시한 것 나무 형태가 되기 때문에 “DOM 트리“라고 함. 노드(node) : DOM 트리에서 가지가 갈라져 나간 항목 루트 노트(root node) : DOM 트리의 시작부분(html) DOM 을 구성하는 원칙 모든 HTML 태그는 요소(element)노드 웹 문서의 텍스트 내용은 요소 노드의 자식 노드인 텍스트(text) 노드 태그의 속성은 요소 노드의 자식 노드인 속성(attribute) 노드 주석은 주석(comment)노드 DOM 요소 접근/속성 가져오기 getElementById("id..
객체(object)란? 프로그램에서 인식할수 있는 모든 대상 객체는 크게 자바스크립트 객체와 사용자 정의 객체로 나뉜다. 자바스크립트 객체 : 자바스크립트 안에 미리 객체로 정의해 놓은 것(ex. DOM, Date 등) 사용자 정의 객체 : 필요할 때마다 사용자가 직접 만드는 객체 var now = new Date(); // Date 인스턴스 만들고 변수에 저장 document.write("현재 시각은 " + now.toLocaleString()); // Date 객체의 메서드 사용 프로퍼티(property)와 메서드(method) 프로퍼티 : 객체의 특징이나 속성 메서드 : 객체에서 할 수 있는 동작 Array 객체 (내장 객체) var numbers = new Array(); // 배열의 크기 지정X..
함수 동작해야 할 목적대로 명령을 묶어 놓은 것 ex) alert() 함수 만드는 법 // 함수 선언(기본형) function 함수명() { 명령 } // 함수 호출(기본형) 함수명 () or 함수명 (변수) function addNum() { var n1 = 2; var n2 = 3; var sum = n1 + n2; alert(sum); } addNum(); 익명 함수 일반적으로 아는 function 함수 자체가 식이므로 함수를 변수에 할당할 수도 있고, 매개변수로 사용 가능 var sum = function(a, b){ retun a + b; } document.write(sum(1, 3)); 즉시 실행 함수 식 형태로 선언하기 때문에 함수 선언 끝에 세미콜론(;) 붙임 (function(){ 명령..
변수 var 변수 기본적으로 변수를 사용할 때 사용하는 방법이다. 스코프에 따라 지역 변수와 전역 변수로 나뉨. 호이스팅 및 재선언/재할당 가능 var year, are; // 여러 변수 한번에 선언 가능 year = 2023; // 변수에 값 할당 let 변수 블록({}) 안에서만 사용할 수 있다. 재할당만 가능 function calc(n) { sum = 0 for(let i = 0; i < n + 1; i++) { sum += i; } } calc(10); console.log(sum); // 55 const 변수 변하지 않는 값을 선언할 때 사용 재선언, 재할당할 수 없음 const pai = 3.14; 구조분해 할당 객체의 경우 const object = { a: 1, b: 2 } const {..