객체지향자판기를 여러 언어로 만들기 위해 문자가 들어가는 부분을 바꾸는 클래스를 새로 만들다.
<!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>
class Machine {
constructor(money, water, coke, juice, lang){
this.money = parseInt(prompt(lang.msg1))
this.menu = prompt(lang.msg2)
this.water = water;
this.coke = coke ;
this.juice = juice;
this.lang = lang; // 새로운 매개변수에 대한 초기화
}
exportProduct(){
console.log('export Product Function')
if (this.menu == 1) {
this.money = this.money - 700
this.water--;
alert(this.lang.msg3)
} else if (this.menu == 2) {
this.money -= 1500;
this.coke--;
alert(this.lang.msg4)
} else if (this.menu == 3) {
this.money -= 2000;
this.juice--;
alert(this.lang.msg5)
}
}
changes(){
// if 잔돈 1700
let price1000 = parseInt(this.money/1000)
let price500 = parseInt((this.money%1000)/500)
let price100 = parseInt(((this.money%1000)%500)/100)
alert(this.lang.changeMsg(price1000, price500, price100))
}
}
/* 한국어로 된 안내 문구를 넣어 줄 것
1. '돈을 넣어주세요'
2. '무엇을 드시겠습니까? [1]물 - 700원 [2] 콜라 - 1500원 [3] 주스 - 2000원'
3. '물 나왔습니다!'
4. '콜라 나왔습니다~'
5. '주스 나왔습니다~'
6. `잔돈입니다~ 천원짜리 ${price1000}장, 오백원짜리 ${price500}개, 백원짜리 ${price100}개입니다.`
*/
class korMsg {
constructor(){
this.msg1 = '돈을 넣어주세요';
this.msg2 = '무엇을 드시겠습니까? [1]물 - 700원 [2] 콜라 - 1500원 [3] 주스 - 2000원';
this.msg3 = '물 나왔습니다!';
this.msg4 = '콜라 나왔습니다~';
this.msg5 = '주스 나왔습니다~';
}
// 변수가 있어서 함수로 처리
changeMsg(price1000, price500, price100){
return `잔돈입니다~ 천원짜리 ${price1000}장, 오백원짜리 ${price500}개, 백원짜리 ${price100}개입니다.`
}
}
class engMsg {
constructor(){
this.msg1 = 'Insert your coin plz';
this.msg2 = 'What do you want? [1] water - 700won [2] coke - 1500won [3] juice - 2000won';
this.msg3 = 'here your water!';
this.msg4 = 'here your coke~';
this.msg5 = 'here your juice~';
}
// 변수가 있어서 함수로 처리
changeMsg(price1000, price500, price100){
return `here your 1000won ${price1000}, here your 500won ${price500}, here your 100won${price100}.`
}
}
// const krMachine = new Machine(0,5,10,7, new korMsg())
// krMachine.exportProduct()
// krMachine.changes()
const engMachine = new Machine(0, 5, 10, 7, new engMsg())
engMachine.exportProduct()
engMachine.changes()
</script>
</body>
</html>
기존의 machine 클래스에 언어(lang)를 새롭게 매개변수로 받아야하기 때문에 변수 초기화하는 this.lang = lang을 추가한다. 이제 글자가 들어가는 부분에 알맞은 메시지를 출력하게하면 된다.
'Front-End > 5. 프로그래밍 패러다임' 카테고리의 다른 글
| Ex06_map.html (0) | 2023.07.04 |
|---|---|
| Ex05_순수함수html (0) | 2023.07.04 |
| Ex03_객체지향자판기.html (0) | 2023.07.04 |
| Ex02_절차지향자판기.html (0) | 2023.07.04 |
| Ex01_객체지향.html (0) | 2023.07.03 |
