절차지향 자판기를 객체 지향자판기로 만들어보다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// [1]물 - 700원 [2] 콜라 - 1500원 [3] 주스 - 2000원
let waterPrice = 700;
let cokePrice = 1500;
let juicePrice = 2000;
let reMoney = 0; // 거스름 돈
class Machine {
// 구조
constructor(money, water, coke, juice) {
this.money = parseInt(prompt("돈을 넣어주세요."));
this.menu = prompt("원하는 제품을 선택해주세요. [1]물 - 700원 [2] 콜라 - 1500원 [3] 주스 - 2000원")
this.water = water; // 물의 재고
this.coke = coke; // 콜라의 재고
this.juice = juice; // 주스의 재고
}
// 함수
exportProduct() {
// 4-1) 사용자가 넣은 돈만큼 돈통이 채워진다.
if (this.menu == "3" || this.menu == "주스" || this.menu == "juice") {
if (this.money >= juicePrice) {
reMoney = this.money - juicePrice // 사용자의 거스름돈
this.juice-- // 재고 -1
alert(`주스 나왔습니다. 거스름돈: ${reMoney}`)
console.log(this.money);
}
else {
alert("금액이 부족합니다.")
}
}
else if (this.menu == 2 || this.menu == "콜라" || this.menu == "coke") {
if (this.money >= cokePrice) {
reMoney = this.money - cokePrice // 사용자의 거스름돈
this.coke-- // 재고 -1
alert(`콜라 나왔습니다. 거스름돈: ${reMoney}`)
console.log(this.money);
}
else {
alert("금액이 부족합니다.")
}
}
else if (this.menu == 1 || this.menu == "물" || this.menu == "water") {
if (this.money >= waterPrice) {
reMoney = this.money - waterPrice // 사용자의 거스름돈
this.water-- // 재고 -1
alert(`물 나왔습니다. 거스름돈: ${reMoney}`)
console.log(this.money);
}
else {
alert("금액이 부족합니다.")
}
}
}
changes() {
let money1000 = parseInt(reMoney / 1000)
let money500 = parseInt((reMoney % 1000) / 500)
let money100 = parseInt(((reMoney % 1000) % 500) / 100)
alert(`거스름돈 1000원 ${money1000}장, 500원 ${money500}개, 100원 ${money100}개입니다.`)
}
}
const gjMachine = new Machine(0, 5, 10, 7)
gjMachine.exportProduct()
gjMachine.changes()
const bsMachine = new Machine(0, 5, 10, 7)
bsMachine.exportProduct()
bsMachine.changes()
</script>
</body>
</html>클래스 내부에서 객체를 만들때 constructor 함수를 쓰는데 함수 안에서 this의 역할은 구별?하는 역할로 생각하면 편하다.
입력값을 객체로 써야할 땐 입력문을 value에 넣으면 된다.
'Front-End > 5. 프로그래밍 패러다임' 카테고리의 다른 글
| Ex06_map.html (0) | 2023.07.04 |
|---|---|
| Ex05_순수함수html (0) | 2023.07.04 |
| Ex04_객체지향자판기수출.html (0) | 2023.07.04 |
| Ex02_절차지향자판기.html (0) | 2023.07.04 |
| Ex01_객체지향.html (0) | 2023.07.03 |
