반응형
SMALL

생성자 함수

자바스크립트에서 메소드와 속성변수로 구성된 함수.

자바스크립트는 클래스가 없다.

때문에 개발자가 직접 생성자 함수를 제작해서 new를 이용해 객체를 생성한다.

관례적으로 생성자 함수는 첫 글자를 대문자로 쓰는 파스칼 표기법을 따른다.

 

<생성자 함수 형식>

function 생성자함수명( [매개변수1] ){
   this . 속성변수명 = 데이터1;
   this . 메소드명 = function( [매개변수2] ){
       실행코드;
       [return [데이터2]; ]
    }
};

또는 메소드 대신 생성자함수명.prototype. 메소드명 = function(~)~ 형태 사용.

생성자함수는 메모리공간에 올라가 객체화되고, 객체화 후에 메소드와 속성변수를 호출할 수 있다.

 

<예제1> 생성자 함수를 이용하여 3명의 학생의 성적을 출력해라.

1. Sungjuk 라는 이름의 생성자 함수 선언


  

    
    
    
    
  
<html>

<head>

	<meta charset="UTF-8">

	<script>

    //----------------------------------------------

    //생성자 함수 선언

    //----------------------------------------------

    function Sungjuk(s_no, s_name, kor, eng, mat){

   		

        //속성변수 선언

        this.s_no = s_no;

		this.s_name = s_name;

		this.kor = kor;

		this.eng = eng;

		this.mat = mat; 	

        

        //메소드 선언

        this.getS_no = function(){

			return this.s_no;

		}



		this.getS_name = function(){

			return this.s_name;

		}



		this.getTot = function(){

			var tot = this.kor + this.eng + this.mat;

			return tot;

		}



		this.getAvg = function(){

			var avg = this.getTot()/3;

			avg = Math.round(avg);

			return avg;

		}	

	}

	</script>	

</head>

 

2. Sungjuk1,2,3 라는 이름의 생성자 함수 객체화


  

    
    
    
    
  
var sungjuk1 = new Sungjuk(1,"김솨솨",90,99,100);

var sungjuk2 = new Sungjuk(2,"전뫄뫄",99,88,77);

var sungjuk3 = new Sungjuk(3,"윤봐봐",100,22,11);

 

3. Sungjuk 객체의 메소드를 호출하여 얻은 데이터를 출력

<1>sungjuk 이란 변수 선언
<2>Sungjuk 이란 생성자함수를 메모리 공간에 올려 객체화
<3>메모리 공간에 올려진 Sungjuk이란 생성자 함수를 (1,90,20,77) 형식으로 호출
<4>Sungjuk 객체의 메모리 위치 주소값을 리턴하여 sungjuk 변수에 저장


  

    
    
    
    
  
	//김솨솨

    document.write("학번 : " + sungjuk1.getS_no() + "<br>" );

	document.write("이름 : " + sungjuk1.getS_name() + "<br>" );

	document.write("총점 : " + sungjuk1.getTot() + "<br>" );

	document.write("평균 : " + sungjuk1.getAvg() + "<br><br>" );

	//전뫄뫄

	document.write("학번 : " + sungjuk2.getS_no() + "<br>" );

	document.write("이름 : " + sungjuk2.getS_name() + "<br>" );

	document.write("총점 : " + sungjuk2.getTot() + "<br>" );

	document.write("평균 : " + sungjuk2.getAvg() + "<br><br>" );

	//윤봐봐

	document.write("학번 : " + sungjuk3.getS_no() + "<br>" );

	document.write("이름 : " + sungjuk3.getS_name() + "<br>" );

	document.write("총점 : " + sungjuk3.getTot() + "<br>" );

	document.write("평균 : " + sungjuk3.getAvg() + "<br><br>" );

결과창

 

<예제2> 랜덤으로 200개의 성적을 만들어 평균을 내고 등수로 내림차순 해라.

-> Sungjuk 이름의 생성자 함수를 만들어서 Array 객체 안에 저장 후 평균에 따라 내림차순 정렬

 

1. Sungjuk 라는 이름의 생성자 함수 선언(위 예제 1번과 동일)


  

    
    
    
    
  
<html>

<head>

	<meta charset="UTF-8">

	<script>

    //----------------------------------------------

    //생성자 함수 선언

    //----------------------------------------------

    function Sungjuk(s_no, s_name, kor, eng, mat){

   		

        //속성변수 선언

        this.s_no = s_no;

		this.s_name = s_name;

		this.kor = kor;

		this.eng = eng;

		this.mat = mat; 	

        

        //메소드 선언

        this.getS_no = function(){

			return this.s_no;

		}



		this.getS_name = function(){

			return this.s_name;

		}



		this.getTot = function(){

			var tot = this.kor + this.eng + this.mat;

			return tot;

		}



		this.getAvg = function(){

			var avg = this.getTot()/3;

			avg = Math.round(avg);

			return avg;

		}	

	}

	</script>	

</head>

[생성자 함수] 속성변수 선언 형식은 this.속성변수명 = 데이터 이다.

[생성자 함수] 메소드 선언 형식은 this.메소드명 = function(~) {실행구문} 이다.

 

바디로 넘어가서 다시 스크립트를 연다.

 

2. Sungjuk 객체의 메모리 위치 주소값을 저장할 Array 객체 생성

-> 일단 Sungjuk 객체를 200개 만들기 전에 이것들을 넣어줄 집부터 만들어주자.

-> Array 객체는 빈집으로 만들어준다.


  

    
    
    
    
  
<body>

	<script>

    //Array 객체 생성

	var sungjuks = [];

 

3. Sungjuk 객체를 생성하고 반복문을 이용해서 200개 생성 후 Array 객체에 저장하기

-> 김뫄뫄씨 뒤에 숫자를 붙여서 구분해보자.

-> 점수 범위는 0~100사이로 설정해준다.


  

    
    
    
    
  
	//------------------------------------------

	//200개의 Sungjuk 객체를 생성하여 Array 객체에 저장하기

	//------------------------------------------

	for (var i=1; i<=200; i++){

		

		//랜덤한 국어점수 영어점수 수학점수 구하기

		var kor_tmp = Math.ceil( Math.random()*100 );

		var eng_tmp = Math.ceil( Math.random()*100 );

		var mat_tmp = Math.ceil( Math.random()*100 );



		//Sungjuk 객체를 생성하여 Array 객체에 저장하기

		sungjuks.push(   new Sungjuk(i+3, "전동순" +i, kor_tmp, eng_tmp, mat_tmp)   );

	}

꼭 Sungjuk 객체는 반복문 안에 생성해야 한다. 200개를 일일히 만드는 것과 다름이 없기 때문이다.

 

4. Array 객체 안의 배열변수에 저장된  Sungjuk 객체의 순서를 평균에 따라 내림차순으로 바꾸기

-> 즉, 평균이 높은 Sungjuk 객체의 메모리 위치 주소값을 맨 앞 배열변수로 옮기는 작업

-> i번째 배열변수의 평균과 j번째 배열변수의 평균 두개를 비교해서 j가 크면, 저장된 메모리 위치 주소값을 바꾼다.

-> 알맹이를 바꿔서 큰 것이 i로 가게 한 뒤 다시 다른것과 비교한다. 이러한 과정이 계속해서 반복되면 내림차순이 된다.


  

    
    
    
    
  
	//------------------------------------------

	//평균에 따라 내림차순으로 바꾸기

	//------------------------------------------

    

    //a번째와 a-1번째 비교

    for( var i=0; i<sungjuks.length-1 ; i++){

		for( var j=i+1; j<sungjuks.length ; j++){  //i보다 +1로 겹치지 않게

			

			//i번째 배열변수에 저장된 Sungjuk 객체의 평균 얻기

			var avg1 = sungjuks[i].getAvg();

			//j번째 배열변수에 저장된 Sungjuk 객체의 평균 얻기

			var avg2 = sungjuks[j].getAvg();

			

			//i번째 < j번째 이면, 서로의 값을 바꾸기

            if (avg1<avg2){

				var tmp = sungjuks[i];

				sungjuks[i] = sungjuks[j];

				sungjuks[j] = tmp;

			}

		}

	}

 

5. Array 객체를 넣을 table 생성


  

    
    
    
    
  
	document.write("<hr>학생성적<hr>");

	document.write("<table border=1 cellspacing=0 cellpadding=5>" );

	document.write("<tr><th>등수<th>학번<th>학생명<th>총점<th>평균" );

 

6. 반복문 사용해서 Sungjuk 객체의 값들 출력하기

-> 평균이 같으면 같은 등수로 두기

-> 평균을 비교해서 나보다 크면 rank 변수 안의 데이터 1 증가

-> 평균이 나와 같으면 그냥 건너뛰기

-> 나와 같은 등수가 많을수록 내 다음 랭크는 여러번 지나치기 때문에 차이가 벌어진다.


  

    
    
    
    
  
	//-----------------------------

	//평균이 같으면 같은 등수로 두기

	//-----------------------------

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

		//등수를 저장할 변수를 선언하고 0 저장.

		var rank = 0;



		//i번째 Sungjuk 객체의 평균 얻기.

		var avg1 = sungjuks[i].getAvg();



		//i번째 Sungjuk 객체의 평균과 다른 Sungjuk 객체의 평균을 비교해서

		//i번째  Sungjuk 객체의 평균보다 큰 놈이 있다면 rank 변수 안의 데이터 1 증가시키기

		for( var j=0; j<sungjuks.length ; j++){

			//만약 나의 평균이면 그냥 건너 뛰기

			if(i==j){continue;}

			//j번째 Sungjuk 객체의 평균 얻기

			var avg2 = sungjuks[j].getAvg();

			//i번째 Sungjuk 객체의 평균보다 j번째 Sungjuk 객체의 평균이 크면

			//rank 변수 안의 데이터 1 증가하기

			if (avg1<avg2){rank++;}

		}

 

7. 반복문 사용해서 Sungjuk 객체의 평균값이 같으면 같은 색으로 지정하기

-> 평균 점수별로 삽입할 배경색을 저장할 변수 선언하기


  

    
    
    
    
  
		var bgcolor = "white";

		

		if(avg1>=100){bgcolor="blue";}

		else if(avg1>=90){bgcolor="gray";}

		else if(avg1>=80){bgcolor="red";}

		else if(avg1>=70){bgcolor="yellow";}

		else if(avg1>=60){bgcolor="purple";}

		else{bgcolor="lightblue";}

8. <tr>, <td> 태그 생성한 후 sungjuk들 출력하고 테이블 닫기.

-> 6번 for 문이 여기서 닫히는 것.


  

    
    
    
    
  
		//<tr> 태그 출력

		document.write("<tr bgcolor = "+ bgcolor + ">");



			



		//<td> 태그와 i번째 Sungjuk 객체의 등수, 학생번호, 학생명, 총점, 평균 출력

		document.write("<td>" + (rank+1) );

		document.write("<td>" + sungjuks[i].getS_no() );

		document.write("<td>" + sungjuks[i].getS_name() );

		document.write("<td>" + sungjuks[i].getTot() );

		document.write("<td>" + sungjuks[i].getAvg() );



}   //6번 for문 닫힘



		document.write("</table>" );

        

	</script>

</body>

</html>

결과창

반응형
LIST
저작자표시 비영리 변경금지

'[ javascript ]' 카테고리의 다른 글

[java script 개념] 자바 스크립트 기본 개념 정리  (0) 2020.08.16
[Event 객체] 웹에서 발생하는 모든 움직임 : event 객체 종류 정리, 클릭, 키보드 번호  (0) 2020.08.15
[DOM 객체] 유효성체크 : 회원가입창에 입력된 데이터 관리하기  (0) 2020.08.13
[Window 객체] 브라우저 창을 움직이는 객체 : 페이지 이동, 카운트다운 출력하기  (0) 2020.08.12
[java script 함수] 내장함수 - 입력창 : prompt( ), alert(), confirm(), 로그인창 만들기  (1) 2020.08.11
히앤님의 개발 세상초보 개발자. 인생게임 수동모드로 진행중입니다 :D
반응형
SMALL

+ Recent posts

반응형
LIST

티스토리툴바