Front-End/5. 프로그래밍 패러다임
Ex02_절차지향자판기.html
이뮨01
2023. 7. 4. 17:11
객체지향 자판기를 만들기 전 절차지향으로 만들어보는 자판기를 만들다.
<!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. 자판기 객체 생성 (돈통, 물, 콜라, 주스)
let machine = {
money: 0,
water: 5,
coke: 10,
juice: 7
}
// 두번째 자판기 생성 바뀌는 것: 머신 이름
let machine2 = {
money: 0,
water: 10,
coke: 20,
juice: 14
}
// 2. 사용자에게 돈을 입력받아준다. ("돈을 넣어주세요.")
let inputMoney = parseInt(prompt("돈을 넣어주세요."))
// 3. 사용자에게 제품을 입력받아준다.
let wantProduct = prompt("원하는 제품을 선택해주세요. [1]물 - 700원 [2] 콜라 - 1500원 [3] 주스 - 2000원")
// [1]물 - 700원 [2] 콜라 - 1500원 [3] 주스 - 2000원
let waterPrice = 700;
let cokePrice = 1500;
let juicePrice = 2000;
let reMoney = 0;
const 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}개입니다.`)
}
// 4. 제품을 꺼내주는 함수를 생성 exportProduct
const exportProduct = () => {
// 4-1) 사용자가 넣은 돈만큼 돈통이 채워진다.
if (wantProduct == "3" || wantProduct == "주스" || wantProduct == "juice") {
if (inputMoney >= juicePrice) {
reMoney = inputMoney - juicePrice // 사용자의 거스름돈
machine.money += juicePrice // 자판기의 이익
machine.juice-- // 재고 -1
alert(`주스 나왔습니다. 거스름돈: ${reMoney}`)
console.log(machine.money);
}
else{
alert("금액이 부족합니다.")
}
}
else if (wantProduct == 2 || wantProduct == "콜라" || wantProduct == "coke") {
if (inputMoney >= cokePrice) {
reMoney = inputMoney - cokePrice // 사용자의 거스름돈
machine.money += cokePrice // 자판기의 이익
machine.coke-- // 재고 -1
alert(`콜라 나왔습니다. 거스름돈: ${reMoney}`)
console.log(machine.money);
}
else{
alert("금액이 부족합니다.")
}
}
else if (wantProduct == 1 || wantProduct == "물" || wantProduct == "water") {
if (inputMoney >= waterPrice) {
reMoney = inputMoney - waterPrice // 사용자의 거스름돈
machine.money += waterPrice // 자판기의 이익
machine.water-- // 재고 -1
alert(`물 나왔습니다. 거스름돈: ${reMoney}`)
console.log(machine.money);
}
else{
alert("금액이 부족합니다.")
}
}
}
exportProduct(wantProduct)
changes()
// 4-2) 사용자가 어떤 제품을 선택했느냐에 따라 다르게 적용
</script>
</body>
</html>자판기의 객체부분을 constructor로 만들고 exportProduct( ), changes( )를 클래스 안의 함수로 넣어주면 된다.