Javascript
제어문
alarim
2023. 6. 22. 15:24
자바스크립트 기초 문법
제어문이란?
조건문(if문/else문/else if 문)
- 조건에 따라 특정 코드를 실행시킬 수 있다.
선택문(switch문)
- 일치하는 경우의 값이 있을 경우에만 특정 코드를 실행시킬 수 있다.
반복문 (while 문 / for 문)
- 코드를 지정한 횟수만큼 반복해서 실행시킬 수 있다.
조건문(if문/else문/else if 문)
if문
예제) if_1 (걷는양에 따라 ture)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var walkAmount = prompt("당신의 하루 걷는 양은 몇 보인가요?","0");
if (walkAmount >=100000) {
document.write("매우 좋은 습관을 지니고 계시는군요!!","<br>");
}
document.write ("============ The End =============","<br>");
</script>
</head>
<body>
</body>
</html>
예제) if_2 (이름을 입력하면 이름 붙여서 환영인사)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var userName = prompt("방문자의 이름은?","");
// 값이 있어야 함
if (userName) {
document.write(userName + "님 반갑습니다! 방문을 환영합니다.");
}
</script>
</head>
<body>
</body>
</html>
else문
예제) else (회원 탈퇴 확인)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var result = confirm("정말로 회원을 탈퇴하겠습니까?");
//확인일때
if (result) {
document.write("탈퇴 처리되었습니다.");
// 취소일때
} else {
document.write("탈퇴 취소되었습니다.");
}
</script>
</head>
<body>
</body>
</html>
else if문
예제) else if ( 월수마다 날짜 나오는거)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var mon = prompt("현재는 몇 월입니까?","0");
// 9이상 이고, 11이하면 참
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문
예제) if (아이디와 비밀번호 틀릴시 물어봄)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var id = "easy1004";
var pw = "112233";
var user_id = prompt("아이디는?");
var user_pw = prompt("비밀번호는?");
if (id==user_id) {
// 아이디가 일치하는 경우
// 값이 없을때도 거짓
// 취소도 거짓
alert("아이디가 일치합니다"); //경고창
if (pw==user_pw) {
// alert("비밀번호가 일치합니다");
document.write(user_id+"님 반갑습니다");
} else {
alert("비밀번호가 일치하지 않습니다");
// 브라우저 새로고침
location.reload();
}
} else {
// 아이디가 일치하지 않는 경우
alert("아이디가 일치하지 않습니다"); //경고창
// 브라우저 새로고침
location.reload();
}
</script>
</head>
<body>
</body>
</html>
선택문(switch문)
switech문
예제) switch (해당 사이트 연결)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// \ 문장이 길때 쓰면 이어서 가능
var site = prompt("네이버,다음,네이트,구글 중 \
즐겨 사용하는 포털 검색 사이트");
var url;
switch (site) {
// 입력받은 사이트가 구글이면
case "구글":
// 구글일때 실행
url="www.google.com";
break;
case "다음":
url="www.daum.net";
break;
case "네이트":
url="www.nate.com";
break;
case "네이버":
url="www.naver.com";
// 없거나 구글, 다음이 아닌 경우
default:
alert("보기중에 없는 사이트입니다.");
}
// 중괄호 생략
if(url)
// href 속성으로 사이트 이동
location.href = "http://"+ url;
</script>
</head>
<body>
</body>
</html>
do_while문
예제) do_while (최초 한번 실행하고 거짓으로 끝남)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var i=10;
do {
document.write("hello!");
// 최초 한번만 실행하고, 거짓으로 끝남
} while (i<3);
</script>
</head>
<body>
</body>
</html>
반복문 (while 문 / for 문)
while문
예제) while (인사말 10까지 반복)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var i = 1;
while (i<=10) {
document.write("안녕하세요"+i,"<br>");
i++;
}
</script>
</head>
<body>
</body>
</html>
예제) while (2,5의 배수 포함되게 반복)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var i=1;
while(i<=30){
// 2의배수와 5의 배수 둘다 포함된것만 화면에 뜸
if (i%2 == 0 && i%5 == 0) {
document.write(i,"<br>");
}
i++;
}
</script>
</head>
<body>
</body>
</html>
do_while
for문
초깃값 → 조건식 → 자바스크립트 코드 → 증감식 → 조건식
예제) for문 (홀수 113까지 출력)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 초기값: 조건식 : 증감식
// for(var i=1; i<=10; i++){
// document.write(i,"<br>");
// }
// for (var i=1; i<=20; i++){
// if (i==15) {
// break;
// }
// // 14까지만 출력
// document.write(i,"<br>");
// }
// 변수를 빼도 됨
// for (i=1; i<=20; i++){
// if (i==15) {
// break;
// }
// // 14까지만 출력
// document.write(i,"<br>");
// }
// var i=1;
// for (; i<=20; i++){
// if (i==15) {
// break;
// }
// // 14까지만 출력
// document.write(i,"<br>");
// }
var i=1;
// 조건식이 true면 무한루프
for (; true; i++){
if (i==115) {
break;
}
// 14까지만 출력
document.write(i,"<br>");
}
</script>
</head>
<body>
</body>
</html>
예제) for문 5의배수 (빨간색 7의 배수 파란색)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red{color: red;}
.blue{color: #00f;}
.aqua{color: #0ff;}
</style>
<script>
// 1에서 100까지 1씩 증가
for(var i=1; i<=100; i++){
if(i%5==0 && i%7 !=0){
document.write("<p class='red'>"+i+"</p>");
}else if(i%7==0 && i%5 !=0){
document.write("<p class='blue'>"+i+"</p>");
}else if(i%7==0 && i%5 ==0){
document.write("<p class='aqua'>"+i+"</p>");
}
}
</script>
</head>
<body>
</body>
</html>
break문
예제) break문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
for(var i=1; i<=10; i++){
//if문은 중괄호 생략하면서 한줄로 사용가능
if(i==6) break;
document.write(i,"<br>");
}
</script>
</head>
<body>
</body>
</html>
continue문
예제) continue문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
for(var i=1; i<=10; i++){
//짝수일 때 출력안하고 건너뛰기
if(i%2==0) continue;
document.write(i,"<br>");
}
</script>
</head>
<body>
</body>
</html>