리터럴 객체
- const 이름 = {
key : "value" (변수 추가)
메서드 이름: function() { }
메서드 이름() { }
} - 메서드 속성 선언 이후 추가시
객체이름.변수이름 =
객체이름.메서드 이름 = function(){ }
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
// 객체 정의 선언
const rect = {
width : 10,
height : 5,
// getArea : function() {
// return this.width * this.height;
// }
getArea() {
return this.width * this.height; // this 생략X
}
}
// rect 객체에 getCircum()메소드를 동적으로 추가
// rect.getCircum = function() {
// }
rect.getCircum = function() {
return (parseInt(this.width) + parseInt(this.height) )*2;
}
function proc1() {
// 객체 사용
// let vw = rect.width;
// let vh = rect.height;
// let va = rect.getArea();
// 출력
printRect('result1');
}
console.log(rect);
function proc2() {
rect.width = prompt("너비 입력");
rect.height = prompt("높이 입력");
// 객체 사용
// let vw = rect.width;
// let vh = rect.height;
// let va = rect.getArea();
// 출력
printRect('result2');
}
function proc3() {
// name 속성은 rect객체에 선언 되지 않은 속성
// 동적으로 필요 시 추가가 가능하다
rect.name = prompt("이름 입력"); // 이름이 없어도 동적으로 추가됨
rect.color = prompt("색 입력");
// 객체 사용
// let vw = rect.width;
// let vh = rect.height;
// let va = rect.getArea();
// 출력
printRect('result3');
}
const printRect = res => {
let disp = '';
let rname = '';
let rcolor = '';
if (typeof rect.name != 'undefined') {
rname = rect.name;
}
if (typeof rect.color != 'undefined') {
rcolor = rect.color;
}
disp += `이름 : ${rname} <br>`;
disp += `색상 : ${rcolor} <br>`;
disp += `너비 : ${rect.width} <br>`;
disp += `높이 : ${rect.height} <br>`;
disp += `넓이 : ${rect.getArea()} <br>`;
disp += `둘레 : ${rect.getCircum()} <br>`;
document.getElementById(res).innerHTML = disp;
}
</script>
</head>
<body>
<div class="box">
<h3>
리터럴 객체 생성<br> const rect = { key : "value" }
</h3>
<input type="button" value="확인" onclick="proc1()"> <br> <br>
<div id="result1"></div>
</div>
<div class="box">
<h3>
리터럴 객체 생성<br> const rect = { key : "value" }<br>가로세로를 입력받음
</h3>
<input type="button" value="확인" onclick="proc2()"> <br> <br>
<div id="result2"></div>
</div>
<div class="box">
<h3>
리터럴 객체 생성<br> const rect = { key : "value" }<br>name과 color를 추가
</h3>
<input type="button" value="확인" onclick="proc3()"> <br> <br>
<div id="result3"></div>
</div>
</body>
</html>객체 const 밖에서 속성을 선언하는 것도 가능하다
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
// 객체 정의 선언
const rect = {
}
// rect객체 밖에서 속성들을 동적으로 추가
// rect.width = 5;
// rect.height = 4;
rect.getCircum = function() {
return (parseInt(this.width) + parseInt(this.height) )*2;
}
function proc1() {
// 메서드 안에서도 속성 추가 가능
rect.width = 5;
rect.height = 4;
rect.name = "네모";
rect.getArea = function(){
return this.width * this.height;
}
// 출력
printRect('result1');
}
console.log(rect);
const printRect = res => {
let disp = '';
let rname = '';
let rcolor = '';
if (typeof rect.name != 'undefined') {
rname = rect.name;
}
if (typeof rect.color != 'undefined') {
rcolor = rect.color;
}
disp += `이름 : ${rname} <br>`;
disp += `색상 : ${rcolor} <br>`;
disp += `너비 : ${rect.width} <br>`;
disp += `높이 : ${rect.height} <br>`;
disp += `넓이 : ${rect.getArea()} <br>`;
disp += `둘레 : ${rect.getCircum()} <br>`;
document.getElementById(res).innerHTML = disp;
}
</script>
</head>
<body>
<div class="box">
<h3>
리터럴 객체 생성<br> const rect = { key : "value" }
</h3>
<input type="button" value="확인" onclick="proc1()"> <br> <br>
<div id="result1"></div>
</div>
</body>
</html>객체생성자함수
- function 객체이름(변수){
this.변수 = 변수
this.함수 = function(){ }
} - 나중에 동적으로 속성 추가시
객체이름.변수 =
객체이름.메서드 이름 = function(){ }
객체이름.prototype.메서드이름 = function() { } // 함수로 선언했을 때만 가능
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function Rect(width, height) {
this.width = width;
this.height = height;
this.getArea = function(){
return this.width * this.height;
}
// this.getCircum = function(){
// return (parseInt(this.width)+parseInt(this.height))*2;
// }
}
// 함수 선언 후 동적으로 추가
Rect.prototype.getCircum = function() {
return (parseInt(this.width)+parseInt(this.height))*2;
}
const proc1 = () => {
// 객체 생성
const p1 = new Rect(2,3);
// name 속성을 동적으로 추가 - p1객체만 사용, 다른 객체는 사용 불가
p1.name = "네모";
console.log(p1);
//getCircum()를 동적으로 추가 - p1객체만 사용
// p1.getCircum = function() {
// return (parseInt(this.width)+parseInt(this.height))*2;
// }
printRect('result1', p1);
}
const proc2 = () => {
// 객체 생성
const p2 = new Rect(5,8);
p2.name="사각형";
console.log(p2);
printRect('result2', p2);
}
const printRect = (result, p) => {
disp = `너비 : ${p.width} <br>
높이 : ${p.height}<br>
이름 : ${p.name}<br>
면적 : ${p.getArea()} <br>
둘레 : ${p.getCircum()}`;
document.getElementById(result).innerHTML =disp;
}
</script>
</head>
<body>
<div class="box">
<h3></h3>
<input type="button" value="확인" onclick="proc1()"> <br> <br>
<div id="result1"></div>
</div>
<div class="box">
<h3></h3>
<input type="button" value="확인" onclick="proc2()"> <br> <br>
<div id="result2"></div>
</div>
</body>
</html>함수에 변수를 직접 입력하지 않고 undefined인지 확인하고 직접 대입받는 형식도 가능
예시
if(typeof width == 'undefined'){
this.width = prompt("너비 입력");
} else{
this.width = width;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function Rect(width, height) {
if(typeof width == 'undefined'){
this.width = prompt("너비 입력");
} else{
this.width = width;
}
if(typeof height == 'undefined'){
this.height = prompt("높이 입력");
}else {
this.height = height;
}
this.getArea = function(){
return this.width * this.height;
}
// this.getCircum = function(){
// return (parseInt(this.width)+parseInt(this.height))*2;
// }
}
// 함수 선언 후 동적으로 추가
Rect.prototype.getCircum = function() {
return (parseInt(this.width)+parseInt(this.height))*2;
}
const proc1 = () => {
// 객체 생성
const p1 = new Rect();
// name 속성을 동적으로 추가 - p1객체만 사용, 다른 객체는 사용 불가
p1.name = "네모";
console.log(p1);
//getCircum()를 동적으로 추가 - p1객체만 사용
// p1.getCircum = function() {
// return (parseInt(this.width)+parseInt(this.height))*2;
// }
printRect('result1', p1);
}
const proc2 = () => {
// 객체 생성
const p2 = new Rect(5,8);
p2.name="사각형";
console.log(p2);
printRect('result2', p2);
}
const printRect = (result, p) => {
disp = `너비 : ${p.width} <br>
높이 : ${p.height}<br>
이름 : ${p.name}<br>
면적 : ${p.getArea()} <br>
둘레 : ${p.getCircum()}`;
document.getElementById(result).innerHTML =disp;
}
</script>
</head>
<body>
<div class="box">
<h3></h3>
<input type="button" value="확인" onclick="proc1()"> <br> <br>
<div id="result1"></div>
</div>
<div class="box">
<h3></h3>
<input type="button" value="확인" onclick="proc2()"> <br> <br>
<div id="result2"></div>
</div>
</body>
</html>
'웹프로그래밍 > HTML CSS JavaScript' 카테고리의 다른 글
| [JavaScript] Date 객체, setInterval (+window.onload) (0) | 2024.05.08 |
|---|---|
| [JavaScript] Array객체 (0) | 2024.05.08 |
| [JavaScript] 배열 / 함수 / confirm() (0) | 2024.05.07 |
| [JavaScript] 출력/변수/입력 (0) | 2024.05.01 |
| [CSS] 레이아웃과 flex (0) | 2024.04.30 |
