본문 바로가기

Webstoryboy

Category

Explanation

JAVASCRIPT

[Javascript] switch문

switch문

해당 조건에 맞는 값을 case로 구분해서 수행하는 제어문입니다.

switch문

var 변수 = 초깃값;
switch (조건을 체크할 변수) {
    csae 값1 :
        //조건을 체크할 변수가 값1을 가지면 실행
    break;
    csae 값2 :
        //조건을 체크할 변수가 값2을 가지면 실행
    break;
    csae 값3 :
        //조건을 체크할 변수가 값3을 가지면 실행
    break;
    default :
        //해당되는 값을 가지고 있지 않을 경우 실행
    break;
}

Sample1

switch문을 이용한 예제입니다.

html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>javascript</title>
	<script>
		let first = prompt("제일 먼저 잡고 싶은 물건은 무엇인가요? 1.과일 2.떡 3.수정구슬 4.현찰 5.반지");
		switch (first){
			case "과일" :
				document.write("생각이 많고 진지해 보이는 연상 타입니다.");
			break;
			case "떡" :
				document.write("무드에 약해 화술과 매너가 좋은 타입니다.");
			break;
			case "수정구슬" :
				document.write("정열적이고 열중하는 타입입니다.");
			break;
			case "현찰" :
				document.write("부드럽고 따듯한 타입입니다.");
			break;
			case "반지" :
				document.write("자기를 보호해 줄 수 있는 이성 타입입니다.");
			break;
			default :
				document.write("잘못 선택했습니다.");
			break;
		}
	</script>
</head>
<body>
	
</body>
</html>

Sample2

switch문과 if문을 이용한 학점 예제입니다.

html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>javascript</title>
	<script>
		let score = 85;
		let grade;

		if( score >= 90 ){
			grade = "A";
		} else if ( score >= 80 && score < 90 ){
			grade = "B";
		} else if ( score >= 70 && score < 80 ){
			grade = "C";
		} else if ( score >= 60 && score < 70 ){
			grade = "D";
		} else if ( score < 60 ){
			grade = "F";
		}

		switch(grade) {
			case "A" : document.write("당신의 학점은 A입니다.");
			break;
			case "B" : document.write("당신의 학점은 B입니다.");
			break;
			case "C" : document.write("당신의 학점은 C입니다.");
			break;
			case "D" : document.write("당신의 학점은 D입니다.");
			break;
			case "F" : document.write("당신의 학점은 F입니다.");
			break;
		}
	</script>
</head>
<body>
	
</body>
</html>

Sample3

switch문을 이용한 사이트 이동 예제입니다.

html
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>javascript</title>
	<script>
		let site = prompt("네이버, 다음, 구글, 네이트 중 자주가는 사이트는?","");
		let url;

		switch(site){
			case "네이버" :
				url = "https://www.naver.com/"
			break;
			case "다음" :
				url = "https://www.daum.net/"
			break;
			case "구글" :
				url = "https://www.google.co.kr/"
			break;
			case "네이트" :
				url = "https://www.nate.com/"
			break;
			default :
				document.write("그런 사이트는 없습니다.")
			break;
		}
		console.log(url);

		// if(url){
		//     location.href = url;
		// }
		if(url) location.href = url;
	</script>
</head>
<body>
	
</body>
</html>

Sample4

switch문을 if문으로 변경한 예제입니다.

html
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>javascript</title>
	<script>
		let site = prompt("Design, Coding, Tutor, CSS 중 자주가는 사이트는?");
		let url;

		if(site == "Design"){
			url = "https://wiss.tistory.com/"
		} else if ( site == "Coding"){
			url = "https://webzz.tistory.com/"
		} else if ( site == "Tutor"){
			url = "https://wtss.tistory.com/"
		} else if ( site == "CSS"){
			url = "https://wsss.tistory.com/"
		} else {
			document.write("그런 사이트는 없습니다.")
		}
		if(url) location.href = url;
	</script>
</head>
<body>
	
</body>
</html>

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기