[JavaScript] 제어문

▶ 도전 Mission!

Q1) 진영이의 하루 지출 내역이 다음과 같다고 할 때, 하루 지출 비용의 합계를 구한 후 적정 지출 비용의 초과 여부를 출력하시오.

진영이의 하루 지출 내역은 교통비 3000원, 식비 6000원, 음료비 3000원입니다. 삼항 조건 연산자를 사용하여 하루 적정 지출 비용인 1만 원을 초과했을 경우에는 "000원 초과"라고 출력하고, 아닐 경우에는 "돈 관리 잘 했어요!"라고 출력하시오.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 종합실습1-1 </title>
<script>
	var price1 = 3000;
	var price2 = 3000;
	var price3 = 3000;

	var total = price1 + price2 + price3;
	var result = total > 10000 ? total-10000 + "원 초과": "돈 관리 잘 했어요!";
	document.write(result);
</script>
</head>
<body>
</body>
</html>

Q2) 다음 연산자를 이용하여 평균 판매량을 구하고, 4분기 판매량을 입력하여 평균 판매량의 이상/미달 값을 출력하시오.

질의응답 창을 이용하여 4분기 판매량을 입력하고, 전 분기 평균 판매량보다 판매량이 높거나 같을 경우에는 '판매량이 평균 이상입니다.'라고 출력하고, 낮을 경우에는 '판매량이 평균 미달입니다.'라고 화면에 출력하시오.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 종합실습1-2 </title>
<script>
	var avgSales = ( 1200 + 1300 + 1000 ) / 3; //평균 판매량 
	var fourth = prompt("4분기 판매량은?", "0");
	var msg_1 = "판매량이 평균 이상입니다.",
		msg_2 = "퍈매량이 평균 미달입니다.";
	
	var result =  fourth >= avgSales ? msg_1 : msg_2;
	document.write(result);
</script>
</head>
<body>
</body>
</html>

제어문
조건문, 선택문, 반복문

▶ 조건문 - if문

if문은 조건식을 만족(true)할 경우에만 코드를 실행한다. 조건식은 Boolean( ) 내장 메서드와 마찬가지로 그 어떤 데이터를 입력해도 true 또는 false를 반환한다.

예제 1) 걸음 수 질의응답창

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> if문 </title>
<script>
	var walkAmount = prompt("당신의 하루 걷는 양은 몇 보인가요?", "0");

	if(walkAmount >= 10000) {
		document.write("매우 좋은 습관을 지니고 계시는군요!!", "<br>");
	}
	document.write("=========== The End ===========");    
</script>
</head>
<body>
</body>
</html>

예제 2) 통화량 질의응답창

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> if문 </title>
<script>
	var min = prompt("당신의 하루 통화량은 몇 분인가요?", "0");
	if(min >= 60) { document.write("많이 사용하는 편이네요", "<br>"); }
	document.write("===== The End ===="); 
</script>
</head>
<body>
</body>
</html>

▶ 조건식에 논리형 데이터가 아닌 다른 형이 오는 경우

조건식에 논리형 데이터(true, false)가 아닌 다른 형의 데이터가 입력되어도 true 또는 false로 인식된다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> if문 </title>
<script>
	var userName = prompt("방문자의 이름은?", "");

	if(userName) {
		document.write(userName+"님 반갑습니다! 방문을 환영합니다.");
	} 
</script>
</head>
<body>
</body>
</html>

▶ 조건문 - else문

조건식을 만족할(true) 경우와 만족하지 않을(false) 경우에 따라 실행되는 코드가 달라진다. 즉, 두 가지 결과가 나올 수 있다.

예제 1) 방문자에게 질의응답 창으로 좋아하는 숫자를 입력받고 if~else문을 사용하여 입력된 값이 짝수인지, 홀수인지에 따라 출력되는 결과가 다르게 나타나도록 하는 예제

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> else문 </title>
<script>
	var num = prompt("당신이 좋아하는 숫자는?", "0");

	if(num % 2 == 0) {
		document.write("당신이 좋아하는 숫자는 짝수입니다.");
	} else {
		document.write("당신이 좋아하는 숫자는 홀수입니다.");
	}
</script>
</head>
<body>
</body>
</html>

예제 2) confirm( ) 메서드를 사용해 확인/취소 창을 나타내어 회원 탈퇴 여부를 묻는 창을 만드는 예제

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> else문 </title>
<script>
	var result = confirm("정말로 회원을 탈퇴하시겠습니까?");

	if(result) {
		document.write("탈퇴 처리되었습니다!");
	} else {
		document.write("탈퇴 취소되었습니다!");
	}
</script>
</head>
<body>
</body>
</html>

▶ 조건문 - else if문

두 가지 이상의 조건식과 정해 놓은 조건을 만족하지 않았을 때 실행되는 코드로 이루어져 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> else if문 </title>
<script>
	var mon = prompt("현재는 몇 월입니까?", "0");

	if(mon >= 9 && mon <= 11){ 
		document.write("독서의 계절 가을이네요!!");
	}else if(mon >= 6 && mon <= 8){
		document.write("여행 가기 좋은 여름이네요!!");
	}else if(mon >= 3 && mon <= 5){
		document.write("햇살 가득한 봄이네요!!");
	}else{
		document.write("스키의 계절 겨울이네요!!");
	}
</script>
</head>
<body>
</body>
</html>

▶ 조건문 - 중첩 if문

조건문 안에 조건문이 있는 것.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 중첩 if문 </title>
<script>
	var id = "easy1004";
	var pw = "112233";

	var user_id = prompt("아이디는?","");
	var user_pw = prompt("비밀번호는?","");

	if(id == user_id) {
		if(pw == user_pw) {
				document.write(user_id+"님 반갑습니다!");
		} else {
				alert("비밀번호가 일치하지 않습니다.");
				location.reload();
		}
	} else {
		alert("아이디가 일치하지 않습니다.");
		location.reload();
	}
</script>
</head>
<body>
</body>
</html>

선택문

▶ Switch문

선택문인 switch문은 변수에 저장된 값과 switch문에 있는 경우(case)의 값을 검사하여 변수와 경우의 값에서 일치하는 값이 있을 때 그에 해당하는 코드를 실행한다. if문과 용도는 비슷하나 if문은 만족하는 데이터가 여러 개일 경우에 주로 사용하고, switch문은 여러 경우의 값 중 일치하는 데이터를 찾아 그에 해당하는 코드를 실행시킬 때 사용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택문 </title>
<script>
	var site = prompt("네이버, 다음, 네이트, 구글 중 \
	즐겨 사용하는 포털 검색 사이트는?", "");
	var url;

	switch(site){
		case "구글": url = "www.google.com";
		break;
		case "다음": url = "www.daum.net";
		break;
		case "네이버": url = "www.naver.com";
		break;
		case "네이트": url = "www.nate.com";
		break;
		default: alert("보기 중에 없는 사이트입니다.");
	}

	if(url) location.href = "http://" + url;
</script>
</head>
<body>
</body>
</html>

저작자표시

'JavaScript > JavaScript' 카테고리의 다른 글

[JavaScript] 객체 (0)	2021.02.11
[JavaScript] 반복문 (0)	2021.02.02
[JavaScript] 기초 문법, 변수, 연산자 (0)	2021.02.02
[JavaScript] 2020.4.10 공부기록 (0)	2021.02.02
[JavaScript] 2020.4.6 공부기록 (0)	2021.02.02

🐠붕어의 코딩 공부 기록🐠

[JavaScript] 제어문

▶ 도전 Mission!

Q1) 진영이의 하루 지출 내역이 다음과 같다고 할 때, 하루 지출 비용의 합계를 구한 후 적정 지출 비용의 초과 여부를 출력하시오.

Q2) 다음 연산자를 이용하여 평균 판매량을 구하고, 4분기 판매량을 입력하여 평균 판매량의 이상/미달 값을 출력하시오.

▶ 조건문 - if문

예제 1) 걸음 수 질의응답창

예제 2) 통화량 질의응답창

▶ 조건식에 논리형 데이터가 아닌 다른 형이 오는 경우

▶ 조건문 - else문

예제 1) 방문자에게 질의응답 창으로 좋아하는 숫자를 입력받고 if~else문을 사용하여 입력된 값이 짝수인지, 홀수인지에 따라 출력되는 결과가 다르게 나타나도록 하는 예제

예제 2) confirm( ) 메서드를 사용해 확인/취소 창을 나타내어 회원 탈퇴 여부를 묻는 창을 만드는 예제

▶ 조건문 - else if문

▶ 조건문 - 중첩 if문

▶ Switch문

'JavaScript > JavaScript' 카테고리의 다른 글

댓글

티스토리툴바

[JavaScript] 제어문

​▶ 도전 Mission!

Q1) 진영이의 하루 지출 내역이 다음과 같다고 할 때, 하루 지출 비용의 합계를 구한 후 적정 지출 비용의 초과 여부를 출력하시오.

Q2) 다음 연산자를 이용하여 평균 판매량을 구하고, 4분기 판매량을 입력하여 평균 판매량의 이상/미달 값을 출력하시오.

▶ 조건문 - if문

예제 1) 걸음 수 질의응답창

예제 2) 통화량 질의응답창

▶ 조건식에 논리형 데이터가 아닌 다른 형이 오는 경우

▶ 조건문 - else문

예제 1) 방문자에게 질의응답 창으로 좋아하는 숫자를 입력받고 if~else문을 사용하여 입력된 값이 짝수인지, 홀수인지에 따라 출력되는 결과가 다르게 나타나도록 하는 예제

예제 2) confirm( ) 메서드를 사용해 확인/취소 창을 나타내어 회원 탈퇴 여부를 묻는 창을 만드는 예제

▶ 조건문 - else if문

▶ 조건문 - 중첩 if문

▶ Switch문

'JavaScript > JavaScript' 카테고리의 다른 글

관련글

댓글

티스토리툴바

▶ 도전 Mission!