1. Dom 에 대하여 설명하시오.
문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다.
DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현된다.
W3C DOM 표준은 세 가지 모델로 구분된다.
-
Core DOM : 모든 문서 타입을 위한 DOM 모델
-
HTML DOM : HTML 문서를 위한 DOM 모델
-
XML DOM : XML 문서를 위한 DOM 모델
2. Bom 에 대하여 설명하시오.
자바스크립트를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있다. 이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)이다.
브라우저 객체 모델(BOM)은 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델은 아니다. 하지만 이 모델은 자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공한다.
자바스크립트에서는 이러한 BOM 모델의 객체들을 전역 객체(global object)로 사용할 수 있다.
- Window 객체
window 객체는 웹 브라우저의 창(window)을 나타내는 객체로, 대부분의 웹 브라우저에서 지원하고 있다.
자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 된다.
window 객체의 메소드는 전역 함수이며, window 객체의 프로퍼티는 전역 변수가 된다.
문서 객체 모델(DOM)의 요소들도 모두 window 객체의 프로퍼티가 된다.
3. 자바스크립트에서 객체를 만드는 방법을 설명하시오.
자바스크립트의 기본 타입(data type)은 객체(object)이다.
객체란 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합이다.
프로퍼티의 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메소드(method)라고 한다.
- 문법
객체이름.프로퍼티이름
또는
객체이름["프로퍼티이름"]
var person = {
name: "홍길동", // 이름 프로퍼티를 정의함.
birthday: "030219", // 생년월일 프로퍼티를 정의함.
pId: "1234567", // 개인 id 프로퍼티를 정의함.
fullId: function() { // 생년월일과 개인 id를 합쳐서 주민등록번호를 반환함.
return this.birthday + this.pId;
}
};
person.name // 홍길동
person["name"] // 홍길동- 객체의 메소드 참조
객체이름.메소드이름()
var person = {
name: "홍길동",
birthday: "030219",
pId: "1234567",
fullId: function() {
return this.birthday + this.pId;
}
};
person.fullId() // 0302191234567
person.fullId; // function () { return this.birthday + this.pId; } 4. new Grade(국,영,수)를 코딩 하시오.(생성자 함수를 짜시오)
function Grade(Kor, Eng, Math) {
this.Kor = Kor;
this.Eng = Eng;
this.Math = Math;
this.Sum = function () {
let sum = this.Kor + this.Eng + this.Math;
return sum;
}
this.Avg = function () {
let avg = this.Sum()/3;
return avg;
}
}
const grade = new Grade(30, 60, 90);
console.log(grade.Sum());
console.log(grade.Avg());5. 아래 코드에 대하여 10초 후에 사진이 변화 하도록 하시오.
var str = "";
str += "<p id='jsTitle'> javascript & node.js </p>";
str += "<img id='logoImg', src='./img/logo.png',";
str += "width='170', height='67', tempData='logoImg'>";
document.body.innerHTML = str;
var titleNode = document.getElementById("jsTitle");
titleNode.innerHTML = "<h1>JS & node</h1>";
var logoNode = document.getElementById("logoImg");
logoNode.setAttribute("src", "./img/arm_mbed.png");
logoNode.setAttribute("width", 297);
logoNode.setAttribute("height", 124);window.onload = function () {
let str = "";
str += "<img id = 'logoImg', src = 'logo.png', "
str += "width='170', height='67', tempData='logoImg'>";
document.body.innerHTML = str;
let logoNode = document.getElementById("logoImg");
let changeImg = setInterval(() => {
logoNode.setAttribute("src", "arm_mbed.png");
document.body.appendChild(logoNode);
}, 3000);
}