'WEB' 카테고리의 글 목록 (13 Page)

1. HTML에 이미 존재하는 JAVASCRIPT 가져오는 방법

1) getElementById(id)

; 한번에 하나의 객체만

<!DOCTYPE html>

<html>

<head>

<title>INDEX</title>

window.onload = function(){

//문서객체가져오기

var header1 = document.getElementById('header1');

var header2 = document.getElementById('header2');

//문서객체 변경

header1.innerHTML = 'innerHTML Header1';

header2.innerHTML = 'innerHTML Header2';

};

</script>

</head>

<body>

<h1 id="header1">Header1</h1>

<h1 id="header2">Header2</h1>

</body>

</html>

2) 한번에 여러개 객체 가져오기

- getElementsByName(name) : 태그의 name속성이 name과 일치하는 문서객체를 배열로 가져옴.

- getElementsByTagName(tagName) : tagName과 일치하는 객체를 배열로 가져옴.

<!DOCTYPE html>

<html>

<head>

<title>INDEX</title>

window.onload = function(){

//문서객체가져오기

var header = document.getElementsByTagName('h1');

//문서객체 변경

header[0].innerHTML = 'innerHTML Header1';

header[1].innerHTML = 'innerHTML Header2';

};

</script>

</head>

<body>

<h1>Header1</h1>

<h1>Header2</h1>

</body>

</html>

for 문으로 변경 . 변경 시 for in 을 사용하면 안된다. 다른 속성값을 모두 가져오기 때문에 .

<!DOCTYPE html>

<html>

<head>

<title>INDEX</title>

window.onload = function(){

//문서객체가져오기

var header = document.getElementsByTagName('h1');

//문서객체 변경

for(var i=0; i<header.length; i++){

header[i].innerHTML = 'innerHTML Header'+ (i+1);

}

};

</script>

</head>

<body>

<h1>Header1</h1>

<h1>Header2</h1>

</body>

</html>

for in 을 사용하면

<!DOCTYPE html>

<html>

<head>

<title>INDEX</title>

window.onload = function(){

//문서객체가져오기

var header = document.getElementsByTagName('h1');

var output = '';

//문서객체 변경

for(var i in header){

output += i + '<br>';

}

document.body.innerHTML = output;

};

</script>

</head>

<body>

<h1>Header1</h1>

<h1>Header2</h1>

</body>

</html>

문서 객체 이외의 속성에 접근하여 출력한다.

저작자표시

'WEB > Javascript' 카테고리의 다른 글

14. 이벤트 (0)	2013.04.16
13.DOM - 문서객체 스타일 조작 및 제거 (0)	2013.04.16
11. DOM - 객체생성 (0)	2013.04.15
10.브라우저 객체 모델과 html페이지 실행순서 (0)	2013.04.15
9. 생성자함수와 prototype (0)	2013.04.15

1. 용어 : 태그, 문서객체, 노드

태그 : HTML, BODY,..

문서객체 : 태그를 자바스크립트에서 이용할수 있는 객체로 만드는 것

예) var header = document.getElementById('header');

- 요소노드 : HTML 태그

- 텍스트노드 : 요소노드 안에 있는 글자

2. 문서객체 만들기

- createElement(tagName) : 요소노드 생성

- createTextNode(text) : 텍스트 노드 생성

1)텍스트노드를 갖는 문서객체 생성

예)

<!DOCTYPE html>

<html>

<head>

<title>INDEX</title>

window.onload = function(){

//변수 선언

var header = document.createElement('h1');

var textNode = document.createTextNode('Hello DOM');

//노드를 연결

header.appendChild(textNode);

document.body.appendChild(header);

}

</script>

</head>

<body>

</body>

</html>

2) 텍스트 노드를 갖지 않는 노드 생성

예)

- 대표적 태그 : img

<!DOCTYPE html>

<html>

<head>

<title>INDEX</title>

window.onload = function(){

//변수 선언

var img = document.createElement('img');

//속성 지정.

img.src = 'image/001.jpg';

img.width = 100;

img.height = 200;

//노드를 연결

document.body.appendChild(img);

}

</script>

</head>

<body>

</body>

</html>

3) 문서 객체 속성 메서드

- setAttribute(name, value) : 객체의 속성 지정

- getAttribute(name) : 객체의 속성 가져옴

예)

<!DOCTYPE html>

<html>

<head>

<title>INDEX</title>

window.onload = function(){

//변수 선언

var img = document.createElement('img');

//속성 지정.

img.setAttribute('src', 'image/001.jpg');

img.setAttribute('width', 100);

img.setAttribute('height', 200);

img.setAttribute('data-property', 350);

//노드를 연결

document.body.appendChild(img);

}

</script>

</head>

<body>

</body>

</html>

4) innerHTML 이용 문서객체 만들기

예)

<!DOCTYPE html>

<html>

<head>

<title>INDEX</title>

window.onload = function(){

//변수 선언

var output = '';

output += '<ul>';

output += ' <li>javascript</li>';

output += ' <li>jQuery</li>';

output += ' <li>Ajax</li>';

output += '</ul>';

//노드를 연결

document.body.innerHTML=output;

}

</script>

</head>

<body>

</body>

</html>

저작자표시

'WEB > Javascript' 카테고리의 다른 글

13.DOM - 문서객체 스타일 조작 및 제거 (0)	2013.04.16
12. DOM - 문서 객체 가져오기 (0)	2013.04.16
10.브라우저 객체 모델과 html페이지 실행순서 (0)	2013.04.15
9. 생성자함수와 prototype (0)	2013.04.15
8. 객체지향- 함수를 사용한 객체생성 예제 (0)	2013.04.15

1. 브라우저 객체 모델 : BOM(Browser Object Model)

2. html페이지 실행순서

- window객체의 onload이벤트 속성

- html 페이지에 존재하는 태그가 화면에 올라가는 순간이 load가 완료되는 순간.

- 페이지 실행 순서

1) 웹브라우저는 위에서 아래로 태그를 차례대로 실행하고 화면에 출력한다.

alert창을 먼저 보인다.

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

alert("hello world!");

</script>

</head>

<body>

<h1>hello world.1</h1>

<h1>hello world.2</h1>

</body>

</html>

2) alert창을 body 중간에 넣는다.

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<h1>hello world.1</h1>

alert("hello world!");

</script>

<h1>hello world.2</h1>

</body>

</html>

; 한문장 나오고 alert창 나옴.

3) 스크립트를 마지막으로

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<h1>hello world.1</h1>

<h1>hello world.2</h1>

</body>

alert("hello world!");

</script>

</html>

;

위에서 부터 순차적으로 ..!!

4) onload 이벤트 사용 시

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

window.onload = function(){

alert("hello world!");

}

</script>

</head>

<body>

<h1>hello world.1</h1>

<h1>hello world.2</h1>

</body>

</html>

; 태그가 다 올라온 다음 onload 의 내용이 실행된다. !!

저작자표시

'WEB > Javascript' 카테고리의 다른 글

12. DOM - 문서 객체 가져오기 (0)	2013.04.16
11. DOM - 객체생성 (0)	2013.04.15
9. 생성자함수와 prototype (0)	2013.04.15
8. 객체지향- 함수를 사용한 객체생성 예제 (0)	2013.04.15
7. 객체지향 (0)	2013.04.15

1. 생성자함수는 new키워드를 사용해 객체를 생성할수 있는 함수를 의미한다.

일반적으로 함수이름은 대문자로 시작한다.

function makeStudent(name,kor, eng){

var willReturn = {

name : name,

kor : kor,

eng : eng,

//method

getSum:function(){

return this.kor + this.eng;

},

getAvg:function(){

return this.getSum() / 2;

},

toString : function(){

return this.name + '\t' + this.getSum() + '\t' + this.getAvg();

}

};

return willReturn;

}

var students = [];

students.push(makeStudent('john', 100, 100) );

students.push(makeStudent('tom', 100, 80) );

students.push(makeStudent('mike', 70, 100) );

var output ="이름\t총점\t평균\n";

for( var i in students ){

output += students[i].toString() + "\n";

}

alert(output);

</script>

; 일반함수 와 동일하다.

2. prototype

- 속성은 다른값을 가지지만 메서드는 동일하다. 객체를 생성할때마다 동일한 함수가 계속 생성될것이다.

100개 객체를 생성하면 100개의 동일한 메서드가 생성된다.( 메모리 비효율적 )

- 생성자함수를 통해서 생성된 객체가 가지는 공통 공간

동일한 메서드는 프로토타입 공간으로 이동한다.

- 자바스크립트의 모든 함수는 prototype 객체를 가지고 있다.

function Student(name,kor, eng){

this.name = name;

this.kor = kor;
this.eng = eng;

}

Student.prototype.getSum = function(){

return this.kor + this.eng;

};

Student.prototype.getAvg = function(){

return this.getSum() / 2;

};

Student.prototype.toString = function(){

return this.name + '\t' + this.getSum() + '\t' + this.getAvg();

};

</script>

저작자표시

'WEB > Javascript' 카테고리의 다른 글

11. DOM - 객체생성 (0)	2013.04.15
10.브라우저 객체 모델과 html페이지 실행순서 (0)	2013.04.15
8. 객체지향- 함수를 사용한 객체생성 예제 (0)	2013.04.15
7. 객체지향 (0)	2013.04.15
6. 함수( 익명의 함수, 선언적함수, 가변인자 함수 등 생성법 ) (0)	2013.04.15

1.

var students = [];

students.push({

name:'john',

kor:100,

eng:100

});

students.push({

name:'tom',

kor:90,

eng:90

});

students.push({

name:'mike',

kor:80,

eng:100

});

</script>

; 개별적으로 객체를 만드는 것은 반복적인 행위를 하는 것이다.

아래와 같이 변경해서

function makeStudent(name,kor, eng){

var willReturn = {

name : name,

kor : kor,

eng : eng,

//method

getSum:function(){

return this.kor + this.eng;

},

getAvg:function(){

return this.getSum() / 2;

},

toString : function(){

return this.name + '\t' + this.getSum() + '\t' + this.getAvg();

}

};

return willReturn;

}

var students = [];

students.push(makeStudent('john', 100, 100) );

students.push(makeStudent('tom', 100, 80) );

students.push(makeStudent('mike', 70, 100) );

var output ="이름\t총점\t평균\n";

for( var i in students ){

output += students[i].toString() + "\n";

}

alert(output);

</script>

; 생성자함수와 동일하다.

저작자표시

'WEB > Javascript' 카테고리의 다른 글

10.브라우저 객체 모델과 html페이지 실행순서 (0)	2013.04.15
9. 생성자함수와 prototype (0)	2013.04.15
7. 객체지향 (0)	2013.04.15
6. 함수( 익명의 함수, 선언적함수, 가변인자 함수 등 생성법 ) (0)	2013.04.15
5. 반복문 ( while, do while, for, for in, 중첩반복문 ) (0)	2013.04.15

New

WEB

12. DOM - 문서 객체 가져오기

'WEB > Javascript' 카테고리의 다른 글

11. DOM - 객체생성

'WEB > Javascript' 카테고리의 다른 글

10.브라우저 객체 모델과 html페이지 실행순서

'WEB > Javascript' 카테고리의 다른 글

9. 생성자함수와 prototype

'WEB > Javascript' 카테고리의 다른 글

8. 객체지향- 함수를 사용한 객체생성 예제

'WEB > Javascript' 카테고리의 다른 글

+ Recent posts

티스토리툴바