제어문
- 조건문 ( if 문 / else 문 / esle if 문 )
: 조건에 따라 특정 코드를 실행시킬 수 있다 - 선택문 ( switch 문 )
: 일치하는 값이 있을 경우에만 특정 코드를 실행시킬 수 있다 - 반복문 ( while 문 / for 문 )
: 코드를 지정한 횟수만큼 반복해서 실행시킬 수 있다
조건문
if 문
조건식을 만족할 경우에만 코드를 실행한다.
if(조건식){
자바스크립트 코드;
}
<script>
var walkAmount = prompt('당신의 하루 걷는 양은 몇보인가요?', '0');
if(walkAmount >= 10000){
document.write('매우 좋은 습관을 지니고 계시는군요!!', '<br>');
}
document.write('=========end===========');
</script>질의응답 창에 10000 이상을 입력하면 if 문 안의 코드가 실행되고 10000 미만의 값을 입력하면 if 문 안의 코드는 실행되지 않는다.
else 문
if(조건식){
자바스크립트 코드1;
}else{
자바스크립트 코드2;
}
confirm()
confirm('message');
확인/취소 창을 나타나게 하는 것은 confirm() 메서드를 사용한다. 확인 버튼을 누르면 true 를 반환하고 취소 버튼을 누르면 false 를 반환한다.
<script>
var result = confirm('are you sure to leave?');
if(result){
document.write('confirm to leave');
}else{
document.write('cancel to leave');
}
</script>else if 문
두 가지 이상의 조건식과 정해 놓은 조건을 만족하지 않았을 때 실행되는 코드로 이루어져 있다. 가장 위에 있는 조건식부터 차례로 조건 검사를 하면서 만족(true)하는 값이 나오면 그에 해당하는 코드를 실행하고 조건문을 종료한다. 만족하는 값이 하나도 없으면 else 문 안의 코드를 실행한다.
if(조건식1){
코드1;
}else if(조건식2){
코드2;
}else if(조건식3){
코드3;
}else{
코드4;
}
<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>중첩 if 문
if(조건식1){
if(조건식2){
자바스크립트 코드;
}
}
<script>
var id = 'test123';
var pw = '112233';
var user_id = prompt('what is your id?', '');
var user_pw = prompt('what is your password?', '');
if(id == user_id){
if(pw == user_pw){
document.write(user_id + ', welcome!');
}else{
alert('wrong password');
location.reload();
}
}else{
alert('wrong id');
location.reload();
}
</script>선택문
변수에 저장된 값과 switch 문에 있는 경우(case)의 값을 검사하여 변수와 경우의 값에서 일치하는 값이 있을 때 그에 해당하는 코드를 실행한다. if문과 용도는 비슷하나 if문은 만족하는 데이터가 여러 개일 경우에 주로 사용하고, switch문은 여러 경우의 값 중 일치하는 데이터를 찾아 그에 해당하는 코드를 실행시킬 때 사용한다.
var 변수=초깃값;
switch(변수){
case 값1: 코드1;
break;
case 값2: 코드2;
break;
case 값3: 코드3;
break;
case 값4: 코드4;
break;
default: 코드5; //경우의 값 중 일치하는 데이터가 없으면 실행 후 종료
}
<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('보기 중에 없는 사이트입니다.');
location.reload();
}
if(url) location.href = "http://" + url;
</script>반복문
while 문
조건식을 만족할 때까지 코드를 여러 회 반복하여 실행할 수 있다.
var 변수=초깃값;
while(조건식){
자바스크립트 코드;
증감식;
}
조건식을 검사하고 만족하면 중괄호 안의 코드와 증감식을 실행한다. 그리고 다시 조건식을 검사하는 방식으로 실행된다.
<script>
var i = 1;
while(i <= 30){
if(i % 2 == 0 && i % 6 ==0){
document.write(i, '<br />');
}
i++;
}
</script>do while 문
while 문의 경우에는 조건식의 만족 여부를 먼저 검사한 후 중괄호에 있는 코드의 실행 여부를 결정했다. 하지만 do while 문은 반드시 한 번은 코드를 실행하고 조건식을 검사한다.
var 변수=초깃값;
do{
자바스크립트 코드;
증감식;
}while(조건식)
for 문
실행 순서 : 초깃값 -> 조건식 -> 자바스크립트 코드 -> 증감식 -> 조건식
for(초깃값; 조건식; 증감식){
자바스크립트 코드;
}
<script>
for(var i=1; i<=100; i++){
if(i % 5 == 0 && i % 7 != 0){
document.write("<p style='color:red;'>"+i+"</p>");
}else if(i % 7 == 0 && i % 5 != 0){
document.write("<p style='color:green;'>"+i+"</p>");
}else if(i % 7 == 0 && i % 5 == 0){
document.write("<p style='color:aqua;'>"+i+"</p>");
}
}
</script>break 문
반복문인 while 문 또는 for 문에서 break 문을 실행하면 조건식과 상관없이 강제로 반복문을 종료한다. 즉, break 문은 반복문을 강제로 종료할 때 사용한다.
<script>
for(var i=1; i<=10; i++){
if(i==6) break;
document.write(i, "<br>");
}
document.write('====The End=====')
</script>continue 문
continue 문 다음에 오는 코드는 무시하고 조건식에서 조건검사를 실행하라는 의미이다.
<script>
for(var i=1; i<=10; i++){
if(i % 2 == 0)continue;
document.write(i, '<br>');
}
document.write('===The End===')
</script>중첩 for 문
for(초깃값; 조건식; 증감식){
for(초깃값; 조건식; 증감식){
자바스크립트 코드;
}
}
<script>
for(var i=1; i<=3; i++){
for(var k=1; k<=2; k++){
document.write(i+'행'+k+'열', '<br>');
}
document.write('<br>');
}
</script>