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





2. html페이지 실행순서


- window객체의 onload이벤트 속성

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

- 페이지 실행 순서



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

alert창을 먼저 보인다.

<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">

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>

<meta charset="EUC-KR">

<title>Insert title here</title>


</head>

<body>

<h1>hello world.1</h1>

<script type="text/javascript">

alert("hello world!");

</script>

<h1>hello world.2</h1>

</body>

</html>
; 한문장 나오고 alert창 나옴.


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

<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>


</head>

<body>

<h1>hello world.1</h1>

<h1>hello world.2</h1>

</body>


<script type="text/javascript">

alert("hello world!");

</script>

</html>


;

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


4) onload 이벤트 사용 시 

<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">

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키워드를 사용해 객체를 생성할수 있는 함수를 의미한다.

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



<script type="text/javascript">

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 객체를 가지고 있다. 


<script type="text/javascript">

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. 

<script type="text/javascript">

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>

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


아래와 같이 변경해서

<script type="text/javascript">

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

1. 객체와 배열은 유사하다. 


배열은 인덱스로 접근하지만 객체는 키로 접근한다.


생성>

<script type="text/javascript">

var product = {

name : 'abcd',

type : 'bag',

made : 'korea'

}

</script>


객체요소접근방법>

  1. product['name'] --> 'abcd'
    product['type'] --> 'bag'
    ...
  2. product.name --> 'abcd'
    product.type --> 'bag'
    ...
; 식별자가 아닌 문자를 키로 사용할 경우는 [ ]를 사용한다. 
; product['made in'] 




2. 객체의 내부 값 --> 속성


name, type, made, ...  :  속성


객체의 속성 중 함수자료형인 경우를 메서드라고 한다.


예)

var person = {

name : '홍길동',

eat : function (food){ }

};


person.eat();





3. 객체 내 반복문 사용 시 for in 사용.


예)

<script type="text/javascript">

var product = {

name : 'abcd',

type : 'bag',

made : 'korea'

}

var output ='';

for(var key in product){

output += '* ' + key + ' : ' + product[key] + '\n';

}

alert(output);

</script>






4. in, with 


in

예)

<script type="text/javascript">

var student = {

name: 'mike',

kor : 100,

mat : 85,

eng : 90

}

var output ='';


output += "'name' in student: " + ('name' in student) + "\n";

output += "'sex' in student: " + ('sex' in student);

alert(output);

</script>



; name은 존재하기 때문에 true, sex은 없으므로 false.



with 

예)


<script type="text/javascript">

var student = {

name: 'mike',

kor : 100,

mat : 85,

eng : 90

}

var output ='';


output += "name: " + student.name + "\n";

output += "kor: " + student.kor + "\n";

output += "mat: " + student.mat + "\n";

output += "eng: " + student.eng + "\n";

alert(output);

</script>

를 


<script type="text/javascript">

var student = {

name: 'mike',

kor : 100,

mat : 85,

eng : 90

}

var output ='';


with(student){

output += "name: " + name + "\n";

output += "kor: " + kor + "\n";

output += "mat: " + mat + "\n";

output += "eng: " + eng + "\n";

}

alert(output);

</script>







5. 속성 추가 및 제거


예) 추가

<script type="text/javascript">

var student = {};

student.name ='홍길동';

student.kor =80;

student.eng =70;

student.mat =60;

</script>


예) 메서드 추가

<script type="text/javascript">

var student = {};

student.name ='홍길동';

student.kor =80;

student.eng =70;

student.mat =60;

student.sum = function(){

var output = 0;

for( var key in this ){

if( key != 'name' ){

output += this[key];

}

}

return output;

}

alert(parseInt(student.sum()));

</script>


예) 속성 제거

delete( student.kor);




저작자표시

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

9. 생성자함수와 prototype  (0) 2013.04.15
8. 객체지향- 함수를 사용한 객체생성 예제  (0) 2013.04.15
6. 함수( 익명의 함수, 선언적함수, 가변인자 함수 등 생성법 )  (0) 2013.04.15
5. 반복문 ( while, do while, for, for in, 중첩반복문 )  (0) 2013.04.15
4. 조건문( if, switch,삼항연산자,짧은 조건문 )  (0) 2013.04.15

1. 익명 함수의 형식


var 함수 = function(){ };


예) 익명의 함수

<script type="text/javascript">

var 함수 = function(){

alert("alert");

}

alert(함수);

</script>





2. 선언적 함수


function 함수(){


}



3. 익명의 함수와 선언적 함수의 차이


<script>

func();

var func = function() {  a.. };

var func = function() {  b.. };

</script>

이경우 오류가 발생한다. 함수 선언전에 호출하기 때문에.


<script>

func();

function func() { a.. };

function func() { b.. };

</script>

이 경우는 오류없이 실행된다. 






4. 가변인자 함수


매개변수의 개수가 변할수 있는 함수.

자바스크립트는 내부에 자동으로 변수 arguments 를 갖는다.


예)

<script>

function sumAll(){

alert( typeof(arguments) + ":" + arguments.length );

}


sumAll(1,2,3,4,5,6);

</script>





예) 합을 구하기.

<script type="text/javascript">

function sumAll(){

var sum = 0;

for( var i in arguments ){

sum+=arguments[i];

}

alert( "합:" + sum );

}


sumAll(1,2,3,4,5,6);

</script>





예) 매개변수 수에 따라 분기하여 로직 처리.

<script>

function funA(){

var len = arguments.length;


if( len == 0 ){


}else if ( len == 1 ) {


}...

}

</script>



5. 함수를 매개변수로 받는 함수


예) 익명의 함수를 매개변수로

<script type="text/javascript">

function callFunc(func){

for(var i=0;i<5;i++){

func();

}

}


callFunc(function(){

alert("call!");

});

</script>


alert창 5번 호출.


예) 선언적함수를 매개변수로

<script type="text/javascript">

function callFunc(func){

for(var i=0;i<5;i++){

func();

}

}

function procFunc(){

alert("call!!");

}

callFunc(procFunc);

</script>




6. 함수를 리턴하는 함수

예)

<script type="text/javascript">

function outerFunc(name){

var output = "Hello " + name + " !!";

return function(){

return output;

};

}

var first = outerFunc("JavaScript");

var second = outerFunc("JQuery");

alert( first() );

alert( second() );

</script>







저작자표시

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

8. 객체지향- 함수를 사용한 객체생성 예제  (0) 2013.04.15
7. 객체지향  (0) 2013.04.15
5. 반복문 ( while, do while, for, for in, 중첩반복문 )  (0) 2013.04.15
4. 조건문( if, switch,삼항연산자,짧은 조건문 )  (0) 2013.04.15
3. 자료형 변환  (0) 2013.04.15

+ Recent posts

티스토리툴바