야식 주문 프로그램 만들기
in Programming on JavaScript
◇ JS 실습 포스팅 시리즈 ◇
- 입력 데이터 출력 실습
- n초 마다 사진 바꾸기
- 버튼위에 마우스 올려 사진 바꾸기
- 버튼위에 마우스 올려 사진 바꾸기2
- 자식창에서 부모창 정보 수정 하기
- 야식 주문 프로그램 만들기 - 현재 글
아래와 같이 야식 주문 프로그램을 만들어 보자. 데모는 이 링크 를 클릭하세요. html/css 에 대한 설명은 많이 생략하고 js에 대한 설명만 써보도록 한다. 일단 해야할 것은 다음과 같다.
1. n초마다 사진 바뀌게 하기
2. 현재 시간 출력하기
3. 메뉴와 수량 선택시 세금 봉사료 총합계에 즉시 반영하기
4. 입력정보 확인하기
5. 주문완료 버튼 누르면 팝업으로 주문정보 띄우기
사실 1,2번은 저번 포스팅에서 다뤘던 내용이다. 아주 가볍게 짚고 넘어갈 것이다.
1. n초마다 사진 바뀌게 하기
- changePic() 이라는 함수를 setInterval에 넣어 일정 시간 마다 반복하게 한다.
- changePic() 안에 사진 이름들을 배열에 넣고, 전역변수 i를 이용해 배열에 접근하게 한다.
- 한 번 실행될 때 마다 i가 증가하고, pics[i%3]에서 배열에 접근하는 인덱스를 0,1,2의 값만 가지게 한다.
- 사용할 키 함수는 다음과 같다.
// 함수명에 ()붙이면 안된다. 초는 milliseconds 사용한다.
setInterval(changepic,2000);
setAttribute("src","사진 주소");
document.getElementById();
실제 코드
window.onload = function(){
setInterval(changePic,2000); //2초마다 changePic 함수를 실행해주세요
}
i=1;
function changePic(){
var pics = ["돈가스.jpg","샐러드.jpg","빵.jpeg"]; // 사진 이름을 배열에 넣기
var pic = document.getElementById("pic");
//setAttribute("src","사진주소")
pic.setAttribute("src",pics[i%3]);
i++; // 함수가 실행될 때마다 1씩 증가한다.
}
2. 현재 시간 출력하기
- Date 라는 js 내장 객체로 시간을 불러온다.
var today= new Date();
- 이 객체와 함께라면 현재 시간을 쉽게 출력할 수 있다! getHours(), getMinutes(), getSeconds() 로 시 분 초를 표시할 수 있다.
- 1초마다 정보를 갱신하면 되니까 setInterval 함수를 사용한다.
window.onload = function(){
setInterval(changeTime,1000); //1초마다 changeTime 함수를 실행해주세요
}
function changeTime(){
var today= new Date();
var hr = today.getHours();
var min = today.getMinutes();
var sec = today.getSeconds();
var text = hr+"시"+min +"분" + sec+"초";
var time = document.getElementById("time");
time.placeholder= text;
}
3. 메뉴 선택 시 바로 금액에 반영하기
- 전역변수로 menulist와 menuqty를 선언해준다. menulist에는 메뉴 이름이, menuqty에는 메뉴 수량이 들어갈 것이다.
- 아래와 같이 menulist[0]은 menuqty[0]과 매치되고, menulist[1]은 menuqty[1]과, menulist[2]는 menuqty[2]와 매치된다.
- 사용할 키 함수는 다음과 같다.
document.getElementsByClassName("menu");
obj.onchange = 함수명; //()빼고
obj.onkeyup = 함수명; //()빼고
split(" ")[index]; // 띄어쓰기 기준으로 나누어서 배열에 저장한다.
- confirmEvent 함수에서 menulist 의 요소에서 onchange 이벤트가 발생하면 calcpay를 실행하게 한다. 또한 menuqty 의 요소에서 onkeyup 이벤트가 발생하면 calcpay를 실행하게 한다.
var menulist;
var menuqty;
window.onload = function(){
menulist = document.getElementsByClassName("menu")
menuqty = document.getElementsByClassName("cnt")
confirmEvent();
}
function confirmEvent(){
for(var j=0; j < menulist.length; j++){
menulist[j].onchange = calcPay; //메뉴를 바꿨을 때 일어나는 이벤트
menuqty[j].onkeyup = calcPay; //키보드에서 손 뗐을 때 발생하는 이벤트
}
}
- calcpay에서는 이벤트가 생길 때 마다 계산을 해서 tax, tip, total의 값을 업데이트 해준다.
- menulist 에 각각 element들은 “빵 5000” “샐러드 6000” 이런식으로 저장되어있다. 가격 계산시, 우리는 뒤에 값이 필요하다. 그 값은 split(“ “)[1]을 이용해 얻어올 수 있다.
function calcPay(){
var totalPrice = 0;
var tax = document.getElementById("tax");
var tip = document.getElementById("tip");
var total = document.getElementById("sum");
for(var j=0; j<menulist.length;j++){
var price = menulist[j].value.split(" ")[1]; //value에서 금액만 가져옴
var ea = menuqty[j].value; //수량 가져오기
totalPrice += price*ea;
}
tax.value= totalPrice*0.02;
tip.value = totalPrice*0.05;
total.value = totalPrice + totalPrice*0.02 +totalPrice*0.05;
}
4. 입력정보 확인하기
- 사용자가 입력한 정보가 형식에 맞는지 확인한다.
- 키 함수
trim(); //앞뒤에 있는 white space를 제거해준다.
trim().length; //length();가 아니다.
isNaN() // Not a Number인지 확인해주는 함수
- 주소와 주문자 이름을 입력했는지, 전화번호가 숫자이고 11자리가 맞는지를 체크한다.
function confirmInput(){
var name = document.getElementById("name");
var phone=document.getElementById("phone");
var address =document.getElementById("address");
if(name.value.trim().length ==0){
alert("주문자 이름을 입력해주세요")
name.focus();
return;
}
if(isNaN(phone.value) || phone.value.trim().length!=11){
alert("제대로 입력하세요 번호")
name.focus();
return;
}
if(address.value.trim().length ==0){
alert("주문자 주소를 입력해주세요")
name.focus();
return;
}
createOrder();
}
5. 주문 완료 정보창 띄우기
- id로 element의 value값을 불러와 string 에 다 연결해 준다. 그리고 alert창에 보여주면 끝.
- 혹시 주문하기 전 일수도 있으니까 확인하고 띄어준다.
function createOrder(){
var bill = '';
var orderList='';
var check = false;
var orderTime = document.getElementById("time").value;
var name = document.getElementById("name").value;
var phone = document.getElementById("phone").value;
var address = document.getElementById("address").value;
var tax = document.getElementById("tax").value;
var tip = document.getElementById("tip").value;
var total = document.getElementById("sum").value;
var menulist = document.getElementsByClassName("menu");
var menuqty = document.getElementsByClassName("cnt");
for(var j=0;j<menulist.length;j++){
if(menuqty[j].value !="" || menuqty[j].value !=0){
orderList += "\n"+menulist[j].value.split(" ")[0] + " " + menuqty[j].value + "인분"
check = true;
}
}
bill +="* 주문시간 :" + orderTime + "\n";
bill +="* 주문자 :" + name + "\n";
bill +="* 주문 메뉴 :" + orderList + "\n";
bill +="* 폰 :" + phone + "\n";
bill +="* 주소 :" + address + "\n";
bill +="* 세금 :" + tax + "\n";
bill +="* 봉사료 :" + tip + "\n";
bill +="* 총 결제금액 :" + total + "\n";
if(!check){
alert("주문한 내역이 없습니다")
return;
}
alert(bill);
//form.reset();을 하면 form에 입력되었던 정보가 다 사라진다.
document.getElementById("inputForm").reset();
}
끝!
전체 코드
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title>homeWork</title>
<style media="screen">
h1{
text-align: center;
}
div.wrapper{
width: 1000px;
margin : 0 auto;
height : 400px;
border: thin solid black;
}
th{ text-align: right }
tr:last-child {
text-align: center;
}
#pic{
float: left;
width: 490px;
margin-left: 10px;
height: inherit;
}
div.inp{
float: left;
width: 500px;
height: inherit;
background-color: pink;
padding: 10px;
box-sizing: border-box;
}
input.cnt {width: 30px;}
#address{
width : 350px;
}
#tax, #tip, #sum{
text-align: right;
}
</style>
<script>
var menulist;
var menuqty;
window.onload = function(){
//하려고 해서 ()를 뺴야한다.
setInterval(changeTime,1000);//함수 이름만
setInterval(changePic,2000);
menulist = document.getElementsByClassName("menu")
menuqty = document.getElementsByClassName("cnt")
confirmEvent();
document.getElementById("done").onclick = confirmInput;//리턴타입을 받을게 아니라, 클릭하면 함수가 실행되게 하려고 하기 때
}
//
// var orderList = [];
// for (var count =0; count < menulist.length ; count ++){
// if(menuqty[count].value !=0){
// var orderList = menulist[count].value;
// var orderCount = menuqty[count].value;
// alert(orderList + "를" +orderCount +"인분 선택했음")
// }
// }
//주문 완료 버튼을
function createOrder(){
var bill = '';
var orderList='';
var check = false;
var orderTime = document.getElementById("time").value;
var name = document.getElementById("name").value;
var phone = document.getElementById("phone").value;
var address = document.getElementById("address").value;
var tax = document.getElementById("tax").value;
var tip = document.getElementById("tip").value;
var total = document.getElementById("sum").value;
var menulist = document.getElementsByClassName("menu");
var menuqty = document.getElementsByClassName("cnt");
for(var j=0;j<menulist.length;j++){
if(menuqty[j].value !="" || menuqty[j].value !=0){
orderList += "\n"+menulist[j].value.split(" ")[0] + " " + menuqty[j].value + "인분"
check = true;
}
}
bill +="* 주문시간 :" + orderTime + "\n";
bill +="* 주문자 :" + name + "\n";
bill +="* 주문 메뉴 :" + orderList + "\n";
bill +="* 폰 :" + phone + "\n";
bill +="* 주소 :" + address + "\n";
bill +="* 세금 :" + tax + "\n";
bill +="* 봉사료 :" + tip + "\n";
bill +="* 총 결제금액 :" + total + "\n";
if(!check){
alert("주문한 내역이 없습니다")
return;
}
alert(bill);
document.getElementById("inputForm").reset();
}
function changeTime(){
var today= new Date();
var hr = today.getHours();
var min = today.getMinutes();
var sec = today.getSeconds();
var text = hr+"시"+min +"분" + sec+"초";
var time = document.getElementById("time");
time.placeholder= text;
}
i=1;
function changePic(){
var pic = document.getElementById('pic')
var pics = ["돈가스.jpg","샐러드.jpg","빵.jpeg"]
pic.setAttribute("src",pics[i%3])
i++;
}
//메뉴를 변경하거나 수량을 벼경했을 때 계산할 수 있도록 이벤트 걸기
function confirmEvent(){
for(var j=0; j < menulist.length; j++){
menulist[j].onchange = calcPay; //메뉴를 바꿨을 때 일어나는 이벤트
menuqty[j].onkeyup = calcPay;
}
}
function calcPay(){
var totalPrice = 0;
var tax = document.getElementById("tax");
var tip = document.getElementById("tip");
var total = document.getElementById("sum");
for(var j=0; j<menulist.length;j++){
var price = menulist[j].value.split(" ")[1];
//value에서 금액만 가져옴
var ea = menuqty[j].value; //수량 가져오기
totalPrice += price*ea;
}
tax.value= totalPrice*0.02;
tip.value = totalPrice*0.05;
total.value = totalPrice + totalPrice*0.02 +totalPrice*0.05;
}
function confirmInput(){
var name = document.getElementById("name");
var phone=document.getElementById("phone");
var address =document.getElementById("address");
if(name.value.trim().length ==0){
alert("주문자 이름을 입력해주세요")
name.focus();
return;
}
if(isNaN(phone.value) || phone.value.trim().length!=11){
alert("제대로 입력하세요 번호")
name.focus();
return;
}
if(address.value.trim().length ==0){
alert("주문자 주소를 입력해주세요")
name.focus();
return;
}
createOrder();
}
</script>
</head>
<body>
<h1>[야식, 먹지말고 개발에 양보하세요]</h1>
<div class="wrapper">
<img id= "pic" src = "돈가스.jpg">
<div class="inp">
<form id ="inputForm" class="" action="" method="get" >
<table>
<tr><th>
<label>현재 시간 :</th><td><input id="time" type="text" placeholder="time" readonly></label></td></tr>
<tr><th><label>이 름 :</th><td><input id="name" type="text" value="" ></label></tr>
<tr><th rowspan="3">야 식 메 뉴 :</th><td><select class = "menu">
<option value = '돈 7000' >돈가스 1인분 7000원</option>
<option value = '샐 6000' >샐러드 1인분 6000원</option>
<option value = '빵 5000' >빵 10조각 5000원</option></select>
<input type="number" class= "cnt" name="" value="">개
</td></tr><tr><td><select class="menu">
<option value = '돈 7000' >돈가스 1인분 7000원</option>
<option value = '샐 6000'>샐러드 1인분 6000원</option>
<option value = '빵 5000' >빵 10조각 5000원</option></select></select> <input class= "cnt" type="number" name="" value="">개
</td></tr><tr><td><select class="menu">
<option value = '돈 7000 '>돈가스 1인분 7000원</option>
<option value = '샐 6000' >샐러드 1인분 6000원</option>
<option value = '빵 5000' >빵 10조각 5000원</option></select> <input class= "cnt" type="number" name="" value="">개</td>
</tr>
<tr><th><label>주 소 :</th><td><input id = "address" type="text" value="" ></label><br></tr>
<tr><th><label>전 화 번 호 :</th><td><input type="text" id = "phone" value="" placeholder="01012345678"> </label><br></tr>
<tr><th><label>세 금 :</th><td><input id = "tax" type="number" value="0" disabled>원</label><br></tr>
<tr><th><label>봉 사 료:</th><td><input id="tip" type="number" value="0" disabled>원</label><br></tr>
<tr><th><label>총 합 계:</th><td><input id="sum" type="number" value="0" disabled>원</label><br></tr>
<tr><td colspan="2"><input type="button" id="done" name="" value="주문 완료">
<input type="button" name="" value="취소"><td></tr>
</table>
</form>
</div>
</div>
</body>
</html>
