하욤 오랜만입니다.
저는 취업해서 자바스크립트를 다루는 업무를 맡게 되어 열심히 공부중인데요,,
아직 신입인지라 공부시간을 많~이 주셔서 (이거 지금은 아님. 지금은 바쁨...............) 회사에서 js 실습을 풀었습니다. ^^ 새 언어 익히는 덴 실습이 최고.
이 게시물은 실습을 하며 짠 코드를 정리하기 위함임니더
실습 문제는 아래 링크에서 제시된 예제인데, 음료수 자판기 기능을 구현하는 것이다.
https://kim-coffee.tistory.com/20
[실습예제] 자바스크립트(JavaScript)로 자판기(vending machine) 만들기
2019/10/08 - [JavaScript/초보자를 위한 자바스크립트] - 초보자를 위한 자바스크립트 커리큘럼 2019/10/02 - [JavaScript/초보자를 위한 자바스크립트] - 1. 초보자를 위한 '자바스크립트는 무엇인가?' (feat.프
kim-coffee.tistory.com
금액 버튼을 누르는 행위 = 동전을 투입하는 행위이라서 투입 금액에 플러스되고, 투입 금액으로 살 수 있는 음료 버튼의 글자 색이 빨간색으로 바뀐다.
그리고 음료 버튼을 누르는 행위 = 구매 행위이다. 구매하면 투입 금액이 음료 가격만큼 차감되고, 구매 내역에 구매한 음료 이름과 금액이 아래로 추가된다.
screen )
vending machine.html
<body>
<div class="menu">
<input type="button" id="700" value="커피(700원)" onclick="buyDrink(id, value)">
<input type="button" id="1000" value="옥수수수염차(1000원)" onclick="buyDrink(id, value)">
<input type="button" id="500" value="물(500원)" onclick="buyDrink(id, value)">
</div>
<div class="coin">
<input type="button" id="price1" value="1000원" onclick="varBring(id)">
<input type="button" id="price2" value="500원" onclick="varBring(id)">
<input type="button" id="price3" value="100원" onclick="varBring(id)">
</div>
현재 금액 :
<span id="result">0원</span>
<br/>
<br/>
구매 내역 :
<ul id="buyList">
</ul>
</body>
이 프로그램은 주로 태그의 속성값을 사용해서 js로 데이터를 처리한다.
onclick값으로 들어갈 함수의 매개변수로 태그의 id, value 를 넣을 수 있다는 것에 감격했다.
자바스크립트는 정말 유연한 언어인 것 같다..
vending machine.js
- 투입 금액을 현재 금액에 더하는 함수
function varBring(a) { // 투입금액을 현재 금액에 더함함
const insertedCoin = document.getElementById(a).value;
let idResult = document.getElementById("result").innerText;
let insertedCount = parseInt(idResult.slice(0,-1));
insertedCount += parseInt(insertedCoin.slice(0,-1));
idResult = insertedCount.toString() + '원';
document.getElementById("result").innerText = idResult;
colorChange(insertedCount);투입 금액이 적혀진 버튼을 누르면 실행되는 함수이다.
금액 버튼의 id를 이용해 누른 버튼의 투입 금액을 가져와서 parseInt 메서드로 형변환 -> 현재 금액에 더해주고 -> 맨 끝에 '원' 붙여서 다시 문자열로 형변환 기능을 수행한다.
- 현재 금액에 따라 뽑을 수 있는 음료 색깔 표시하는 함수
function colorChange(total) { // 현재 금액에 따라 뽑을 수 있는 음료 표시
const tea = document.getElementById('1000');
const coffee = document.getElementById('700');
const water = document.getElementById('500');
console.log("colorChange 호출!!", total);
if (total >= 1000) {
tea.setAttribute('class', 'done');
coffee.setAttribute('class', 'done');
water.setAttribute('class', 'done');
}
else if (total >= 700) {
coffee.setAttribute('class', 'done');
water.setAttribute('class', 'done');
}
else if (total >= 500) {
water.setAttribute('class', 'done');
}
console.log('색작업 완료!')머릿속의 알고리즘대로 단순하게
금액이 투입될 때마다 현재 금액의 토탈을 보고 살 수 있는 음료의 버튼 글자 색을 변경해주는 함수이다.
element.setAttribute('attributename', 'attributevalue') 메서드는 선택한 요소의 속성값을 추가한다.
class 이름이 done 인 요소의 글자 색을 변경할 것이기 때문에 이 메서드를 썼당
vending machine.css
.done {color: red;}이렇게 !!!!!
vending machine.js
- 버튼의 글자 색상 원상복구하는 함수
function removeClass() { // 색상 원상복구
$.each(['1000', '700', '500'], function(index, value) {
document.getElementById(value).classList.remove('done');
})
}만약 음료를 구매해서 현재 금액이 줄어들었다면, 현재 금액보다 높은 금액인 음료의 버튼 색상은 다시 검정색으로 원상복구되어야 할 것이다. 그러기 위해서 금액을 투입할 때 모든 버튼 글자 색을 초기화하고, 다시 현재 금액보다 높은 금액의 음료 색을 바꾸는 식으로 짰는데 .. 이게 점점 음료 가짓수가 많아지면 비효율적일 것 같다.
다른 로직을 한 번 생각해봐야지
어쨌든 모든 버튼의 글자 색을 일괄 초기화하기 위해 jQuery의 each 메서드를 사용했다.
each() 메서드는 배열, Map, 그리고 객체를 매개변수로 받아, 마치 반복문처럼 그 요소들을 검사하고 반복할수 있도록 하는 기능을 가진다.
그러니까 each 메서드의 첫 번째 매개변수인 ['1000, '700', '500] 을 0번째 인덱스부터 끝까지 반복하며 콜백함수를 실행한다.
document.getElementById('1000').classList.remove('done');
document.getElementById('700').classList.remove('done');
document.getElementById('500').classList.remove('done');
즉, 이렇게 세 줄이 실행되는거죱
- 음료 구매했을 경우 실행되는 함수
function buyDrink(b, dValue) { // 음료 구매
const insertedCoin = parseInt(document.getElementById('result').innerText.slice(0,-1));
const drinkPrice = parseInt(b);
let exchange = 0
try {
exchange = insertedCoin - drinkPrice
if (exchange < 0) {
alert("돈이 모자랍니다! 바보!");
}
else {
document.getElementById("result").innerText = exchange.toString() + '원';
alert(dValue + '구매 완료!');
addList(dValue);
}
}
catch (err) {
alert(err.name); // ReferenceError
alert(err.message); // lalala is not defined
alert(err.stack); // ReferenceError: lalala is not defined at ... (호출 스택)
}
removeClass();
colorChange(exchange);
}음료를 구매하기 위해 음료 버튼을 누르면 실행되는 함수이다.
이 부분은 예외처리 말고 딱히 특별할 거 없으니 패쓰.
vending machine.css
.coin {margin-top: 25px;}
div.menu::before {content: 'Menu : '; font-size: 20px;}
div.coin::before {content: 'amount : '; font-size: 20px;}
input {margin-left: 15px;}
.done {color: red;}div 왼쪽에 글자 넣기 위해서 ::before 이라는 가상요소를 사용한 거 기억하기~
사실 음료사면 아래에 구매한 음료 리스트업해주는 함수도 있는데,
그건 혹시나 어케 짜야 되는지 궁금한 사람들을 위한 숙제,,^^
감질맛이 있어야 공부가 잘되죠
이렇게 내 첫 자바스크립트 프로그램이 완성되었다.. 자바스크립트가 웹에 있어선 절대적이고 막강하다는 것을 알게 되었던 실습이었따. 비록 지금은 기능이나 코드가 조잡하지만 계속 다루다보면 내 웹사이트가 언젠가 사용자랑 대화도 할 수 있지 않을까?