본문 바로가기
기록(노트)

자바스크립트:함수 객체 생성자함수까지 실습

하리보쮈리 2023. 4. 6. 15:54 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체 생성자 함수 실습</title>
<link rel="icon" href="data:,">
</head>
<body>	
	<h2>실습1</h2>
	실습. 사람의 이름, 키, 몸무게를 입력받아  체중체크 객체를 생성하고 
	사람 별로 정상체중을 확인하는 메소드를 만들고 호출하시오.<br>
	정상체중 예시) (키 - 100) * 0.9 <br>
	체중미달 예시) (키 - 100) * 0.9 - 5 <br>
	체중초과 예시) (키 - 100) * 0.9 + 5 <br>
	호출 예시) hongGilDongA = new CheckWeight('홍길동A', 172, 73);
	출력 예시) 정상체중입니다, 체중미달입니다, 체중초과입니다.
	<script>
		/*
		function CheckWeight(name, height, weight){
			this.name = name;
			this.height = height;
			this.weight = weight;
			this.getName = function(){
				return this.name;
			};
			this.setName = function(name){
				this.name = name;
			};
			this.setHeight = function(height){
				this.height = height;
			}
			this.getHeigth = function(){
				return this.height;
			}
			this.setWeight = function(weight){
				this.weight = weight;
			}
			this.getWeight = function(){
				return this.weight;
			}
			this.getResult = function(){
				let maxWeight = (this.height - 100) * 0.9 + 5;
				let minWeight = (this.height - 100) * 0.9 - 5;
				let result = `${this.name}`;
				if(this.weight > maxWeight){
					result = `${result}님 체중초과입니다.`
				}else if(this.weight < minWeight){
					result = `${result}님 체중미달입니다.`
				}else{
					result = `${result}님 정상체중입니다.`
				}
				return result;
			}
		}
		*/
		class CheckWeight {
			constructor(name, height, weight){
				this.name = name;
				this.height = height;
				this.weight = weight;
			}
			getName(){
				return this.name;
			}
			setName(name){
				this.name = name;
			}
			setHeight(height){
				this.height = height;
			}
			getHeigth(){
				return this.height;
			}
			setWeight(weight){
				this.weight = weight;
			}
			getWeight(){
				return this.weight;
			}
			getResult(){
				let maxWeight = (this.height - 100) * 0.9 + 5;
				let minWeight = (this.height - 100) * 0.9 - 5;
				let result = `${this.name}`;
				if(this.weight > maxWeight){
					result = `${result}님 체중초과입니다.`
				}else if(this.weight < minWeight){
					result = `${result}님 체중미달입니다.`
				}else{
					result = `${result}님 정상체중입니다.`
				}
				return result;
			}
		}
		

		var hongGilDongA = new CheckWeight('홍길동A', 172, 69);
		var hongGilDongB = new CheckWeight('홍길동B', 172, 72);
		console.dir(hongGilDongA)
		console.dir(hongGilDongB)
		console.log(hongGilDongA.getResult());   

function TestScore(name, kor, eng){
            this.name = name;
            this.kor = kor;
            this.eng = eng;
            this.setName = name => this.name = name;
            this.getName = () => this.name;
            this.setKor = kor => this.kor = kor;
            this.getKor = () => this.kor;
            this.setEng = eng => this.eng = eng;
            this.getEng = () => this.eng;
        }

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체 생성자 함수 실습</title>
<link rel="icon" href="data:,">
</head>
<body>	
	<h2>실습1</h2>
	실습. 사람의 이름, 키, 몸무게를 입력받아  체중체크 객체를 생성하고 
	사람 별로 정상체중을 확인하는 메소드를 만들고 호출하시오.<br>
	정상체중 예시) (키 - 100) * 0.9 <br>
	체중미달 예시) (키 - 100) * 0.9 - 5 <br>
	체중초과 예시) (키 - 100) * 0.9 + 5 <br>
	호출 예시) hongGilDongA = new CheckWeight('홍길동A', 172, 73);
	출력 예시) 정상체중입니다, 체중미달입니다, 체중초과입니다.
	<script>
		/*
		function CheckWeight(name, height, weight){
			this.name = name;
			this.height = height;
			this.weight = weight;
			this.getName = function(){
				return this.name;
			};
			this.setName = function(name){
				this.name = name;
			};
			this.setHeight = function(height){
				this.height = height;
			}
			this.getHeigth = function(){
				return this.height;
			}
			this.setWeight = function(weight){
				this.weight = weight;
			}
			this.getWeight = function(){
				return this.weight;
			}
			this.getResult = function(){
				let maxWeight = (this.height - 100) * 0.9 + 5;
				let minWeight = (this.height - 100) * 0.9 - 5;
				let result = `${this.name}`;
				if(this.weight > maxWeight){
					result = `${result}님 체중초과입니다.`
				}else if(this.weight < minWeight){
					result = `${result}님 체중미달입니다.`
				}else{
					result = `${result}님 정상체중입니다.`
				}
				return result;
			}
		}
		*/
		class CheckWeight {
			constructor(name, height, weight){
				this.name = name;
				this.height = height;
				this.weight = weight;
			}
			getName(){
				return this.name;
			}
			setName(name){
				this.name = name;
			}
			setHeight(height){
				this.height = height;
			}
			getHeigth(){
				return this.height;
			}
			setWeight(weight){
				this.weight = weight;
			}
			getWeight(){
				return this.weight;
			}
			getResult(){
				let maxWeight = (this.height - 100) * 0.9 + 5;
				let minWeight = (this.height - 100) * 0.9 - 5;
				let result = `${this.name}`;
				if(this.weight > maxWeight){
					result = `${result}님 체중초과입니다.`
				}else if(this.weight < minWeight){
					result = `${result}님 체중미달입니다.`
				}else{
					result = `${result}님 정상체중입니다.`
				}
				return result;
			}
		}

		var hongGilDongA = new CheckWeight('홍길동A', 172, 69);
		var hongGilDongB = new CheckWeight('홍길동B', 172, 72);
		console.dir(hongGilDongA)
		console.dir(hongGilDongB)
		console.log(hongGilDongA.getResult());   
		console.log(hongGilDongB.getResult());   
		
	</script>

	<h2>실습2</h2>
	실습. 사람의 이름, 국어점수, 영어점수를 입력받아  학생 점수객체를 생성하고
	 학생의 평균을 확인하는 메소드를 만들고 호출하시오.<br>
	출력예시)<br>
	getTestInfo() 호출시<br> 
	이름: 홍길동<br>
	국어: 100점<br>
	영어: 80점<br>
	getTestAvg() 호출시<br> 
	이름: 홍길동, 평균점수: 90점
	
	<script>
		function TestScore(name, kor, eng){
			this.name = name;
			this.kor = kor;
			this.eng = eng;
			this.setName = name => this.name = name;
			this.getName = () => this.name;
			this.setKor = kor => this.kor = kor;
			this.getKor = () => this.kor;
			this.setEng = eng => this.eng = eng;
			this.getEng = () => this.eng;
			
			this.getTestInfo = () => {
				let result = ``
				result += `이름: ${this.name}\n`;
				result += `국어: ${this.kor}점\n`;
				result += `영어: ${this.eng}점\n`;
				return result;
			}
		}


		TestScore.prototype.getTestAvg= function() {
			let avg = (this.kor + this.eng)/2;
			let result = `이름: ${this.name}, 평균점수: ${avg}점`;
			return result;
		}

		var kimMinSu = new TestScore("김민수",80,90);
		var hongGilDongB = new TestScore("홍길동",100,80);
		//kimMinSu.setKor(90);
		let result = kimMinSu.getTestInfo();
		let result2 = hongGilDongB.getTestInfo();
		console.log(kimMinSu.getTestAvg());
		console.log(hongGilDongB.getTestAvg());
		console.log(hongGilDongB.getTestInfo == kimMinSu.getTestInfo);
		console.log(hongGilDongB.getTestAvg == kimMinSu.getTestAvg);

		//const arrFn = () => this;
		//console.log(arrFn());

		
		

		// 실습. Array에 getSum를 선언하고 [100,200,300]의 배열 요소들의 합산을 반환하는 getSum() 메소드를 호출하시오.
		const arr1 = [100,200,300];
		const arr2 = [10,20,30];
		const arr3 = [1,2,3];
		const arr4 = [1000,2000,3000];
		
		console.log(arr1.getSum());
		
	</script>
	<h1>this</h1>
	- 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다.<br>
	- 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 
	  바인딩할 객체가 동적으로 결정 <br>
	<script>
		function thisFn(){
			return this;
		}
		let resultThis1 = thisFn();
		console.log(resultThis1);
		function thisFn2(){
			function thisFn(){
				console.log(this);
			}
			thisFn();
		}
		thisFn2();
		function ThisFn3(){
			this.name='이름';
			this.getThis = () => console.log(this);
		}
		const thisFn3 = new ThisFn3();
		thisFn3.getThis();
		function ThisFn4(){
			this.name='이름';
			this.getThis = function(){
				console.log(this);
				return function(){
					console.log(this);
				}
			}
		} 
		const thisFn4 = new ThisFn4();
		const subGetThisFn = thisFn4.getThis();
		subGetThisFn();
	</script>
</body>
</html>
40a1c555b84ff992.html
6KB

'기록(노트)' 카테고리의 다른 글

자바스크립트:클로저(Closure)/내장객체(시간,날짜)  (0) 2023.04.16
이게 뭐임? 데이스베이스인듯  (0) 2023.04.14
데이터베이스 쿼리 실행 할때 처리 과정  (0) 2023.04.04
JDBC(Java Data Base Connectivity) 프로그램 순서 7단계  (0) 2023.04.03
자바스크립트 함수  (0) 2023.04.03

'기록(노트)' Related Articles

티스토리툴바