19강 / 간혹 쓰는 Switch 문법
if else 문법 대신 쓸 수 있는 switch 라는 문법이 있다.
if else로도 모든걸 할 수 있지만 좀 더 간단하게 적고 싶을 때 switch를 어쩌다 한 번 쓰는데
어떻게 쓰는지 알아보자.
switch 사용법
let a = 2 + 2;
switch (a){
case 3 :
alert('변수가 3이네요');
break
case 4 :
alert('변수가 4네요');
break
}switch의 소괄호엔 조건식이 아니라 검사해볼 변수를 넣으면 된다.
그리고 변수가 3일 때 코드 실행해주세요~ 라고 코드짜고 싶으면
case 문법 저렇게 사용하면 된다.
그리고 코드실행을 끝내고 싶으면 break라는걸 추가해주면 된다. 그럼 switch 중괄호를 탈출해준다.
let b = 2 + 5;
switch (b){
case 3 :
alert('변수가 3이네요');
break
case 4 :
alert('변수가 4네요');
break
default :
alert('다 아니네')
}else같은걸 쓰고 싶으면 default : 추가해주면 된다.
그러면 case에 해당되는게 하나도 없을 때 안에 있는 코드를 실행해준다.
if로도 모든걸 만들 수 있는데 switch를 쓰는 이유는
변수값에 따른 조건분기를 만들고 싶을 때 조금 더 간편하게 적을 수 있어서 그렇다.
if else보다 괄호가 적으니까! 그 이유밖에 없다.
그래서 배운 기념으로 간단한 심리테스트 게임
<div id="quiz">
<h4>물에 빠지면 누구먼저 구할 것임?</h4>
<button>와이프</button>
<button>부모님</button>
<button>키우던 개</button>
</div>
<script>
document.querySelector('#quiz').addEventListener('click', function(e){
switch (e.target.innerHTML){
case '와이프':
alert('와이프를 좋아하시네요');
break
case '부모님':
alert('효자네요');
break
case '키우던 개':
alert('역시 사람보단 동물이 더 낫죠');
break
}
});
</script>심리테스트 게임을 만들어봤다.
이런 식으로 변수 하나의 값에 따라서 각각 다른 기능을 실행하고 싶을 때 쓰면
깔끔해보일 수 있다.
전체 코드
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="./index.css" />
<title>Level3</title>
</head>
<body>
<div id="quiz">
<h4>물에 빠지면 누구먼저 구할 것임?</h4>
<button>와이프</button>
<button>부모님</button>
<button>키우던 개</button>
</div>
<script src="./index.js"></script>
</body>
</html>index.js
document.querySelector("#quiz").addEventListener("click", function (e) {
switch (e.target.innerHTML) {
case "와이프":
alert("와이프를 좋아하시네요");
break;
case "부모님":
alert("효자네요");
break;
case "키우던 개":
alert("역시 사람보단 동물이 더 낫죠");
break;
}
});20강 / (실전) 웹개발 기능대회 예제
Q1. 만들 HTML파일은 위 사진과 비슷한 레이아웃을 구성해야합니다.
- 디자인 잘했는지 평가는 안하니 Bootstrap 사용하면 빠를듯
- 상품목록은 .json 파일로 제공되는데 그 파일에 있는 데이터를 박아넣으셔야합니다.
- ajax get 요청으로도 로컬 json파일에 있는 데이터를 가져올 수 있습니다.
(json 데이터파일){ "products": [ { "id": 0, "title": "식기세척기", "brand": "세척나라", "photo": "pr1.jpg", "price": 10000 }, { "id": 1, "title": "원목 침대 프레임", "brand": "침대나라", "photo": "pr2.jpg", "price": 20000 }, { "id": 2, "title": "천연 디퓨저 세트", "brand": "향기나라", "photo": "pr3.jpg", "price": 30000 }, { "id": 3, "title": "시원한 서큘레이터", "brand": "바람나라", "photo": "pr4.jpg", "price": 40000 } ] }
Q2. 상품 검색 기능이 필요합니다.
- 상단
<input>에 검색어를 입력하면 그 글자가 제목, 업체명에 들어있으면 그 상품만 보여줘야합니다.- 찾은 글자에 노란색 배경을 입혀보는 것도 좋겠군요
Q3. 위 사진 처럼 장바구니로 상품을 드래그할 수 있게 만들어야합니다.
- 상품을 드래그해서 검은 박스에 놓으면 카드가 하나 생성됩니다.
- 담기버튼눌러도 똑같이 카드 생성해주면 됩니다.
- 이미 있는 상품이면 카드생성이 아니라 수량만 1 증가해야합니다.
(최종가격계산 예시)
(구매하기 누를 때 뜨는 모달창 예시)
Q4. 나머지는 별거 아니고
- 장바구니 개별 항목의 주문 수량을 변경할 수 있어야합니다.
- 모든 상품과 수량의 최종 합계 금액을 어딘가 보여주어야합니다.
- 구매하기를 누르면 성함 연락처를 입력할 수 있는 모달창을 띄워주어야합니다.
Q5. 모달창에서 구매완료 누르면 영수증을 이미지형태로 보여줘야합니다.
- 현재 날짜 2. 주문한 모든 상품명 & 가격 3. 총 합계금액이 나오면 됩니다.
- 이미지 만드는건 별거 아니고
<canvas>라는 태그를 이용합니다.- 자바스크립트쓰면
<canvas>안에 사진넣고텍스트 입력도 가능합니다.
