<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href = "../css/mystyle.css" type="text/css">
<script>
//객체 정의(전역 : proc1,2 동시 사용 가능) --------------------
var rect = { //함수 안에서 var를 쓰면 지역변수 안쓰면 전역변수 이다.
width : 10,
height : 9,
getArea : function(){
return this.width * this.height;
},
getCircum : function() {
return (this.width + this.height) * 2;
}
}
function proc1(){
//-----------------------------------------------
//객체 사용
str = "가로:" + rect.width + "<br>";
str += `세로: ${rect.width} <br> `;
area = rect.getArea()
str += "면적 : " + area + "<br>";
//dulre = rect.getCircum();
str += "둘레 : " + rect.getCircum() + "<br>";
document.getElementById('result1').innerHTML = str;
}
function proc2(){
//객체 사용
//가로, 세로 값을 입력 받는다
garo = parseInt(prompt("가로 입력.."));
sero = parseInt(prompt("세로 입력.."));
rect.width = garo;
rect.height = sero;
//name속성 추가
rect.name = "네모";
// 면적 둘레 구하기 - str출력 내용속에서 직접호출
//면적 둘레 구하기
rect.getArea()//면적
rect.getCircum()
//출력 내용
str = "이름 : " + rect.name + "<br>";
str += "가로:" + rect.width + "<br>";
str += `세로: ${rect.width} <br> `;
str += "면적 : " + rect.getArea() + "<br>";
//dulre = rect.getCircum();
str += "둘레 : " + rect.getCircum() + "<br>";
document.getElementById('result2').innerHTML = str;
}
</script>
</head>
<body>
<div class = "box">
객체 생성-리터럴<br>
rect(사각형)정의<br>
속성 : width, height<br>
메소드 : 면적 구하기, 둘레 구하기<br>
new를 이용하여 객체를 생성하지 않는다<br>
rect.width rect.height<br>
rect.getArea(), rect.getCircum()<br>
<br>
<button type = "button" onclick="proc1()">확인</button>
<div id = "result1"></div>
</div>
<div class = "box">
객체 생성-리터럴<br>
rect(사각형)정의<br>
객체는 동적으로 속성이나 메소드를 추가할 수 있다<br>
<br>
<button type = "button" onclick="proc2()">확인</button>
<div id = "result2"></div>
</div>
</body>
</html>
신입 개발자 입니다!!!