본문 바로가기

html+CSS+JS/Java Script

[초보자용 Java Script] 제어문 - if, else

반응형
제어문

프로그램의 흐름을 제어 (조건문, 선택문, 반복문)

 

 

조건문 - if문

 if(조건식) {자바스크립트 코드;}; 

조건이 참일 경우, 자바스크립트 코드를 실행.

※ =을 한번만 쓰면 대입연산자(변수)로 인식이 되기에 '같다'는 조건을 걸고 싶은 경우 ==을 사용해줘야 한다.

 

- 첫번째 if문만 참이기에 첫번째 if문의 코드만 실행

 var num = 10;  : 변수 num에 숫자 10을 대입

 if ( num<500 ) {document.write ('hellow') ; } ;  : 변수 num이 숫자 500보다 작으면 hellow를 화면에 표기 (참이라 실행)

 if ( num>500 ) {document.write ('hellow') ; } ;  : 변수 num이 숫자 500보다 크면 world를 화면에 표기 (거짓이라 실행x)

 

 

- if문이 참이기에 '습관~'문장이 떴다. 아래는 if문이 아니기에 상관없이 화면에 나온다.

 var walkAmount = 10000;  : 변수 walkAmount에 숫자 10000을 대입

 if ( walkAmount>=10000 ) {  : 변수 walkAmount가 숫자 10000보다 큰 경우 뒤의 코드를 진행(참)

   document.write ('매우 좋은 ~ 있습니다.' , '<br>') ; } ;  : '매우 좋은 ~ 있습니다.'를 출력하고 한 줄 내림.

document.write ('*******') ; } ;  : '*******' 을 화면에 출력.

 

 

- prompt를 사용한 예제. 넣은 값에 따라 10000이상을 적었으면 '습관'문장이 뜬다.

 var walkAmount = Number(prompt( "당신은 하루에 얼마나 걷습니까?" , "5000" ) ) 

 : 변수 walkAmount에 prompt 값(사용자 직접 입력)을 숫자로 치환하여 대입.

※ prompt("텍스트 내용", "기본값-사용자가 직접 입력하는 란-")

 if ( walkAmount>=10000 ) {  : 변수 walkAmount가 숫자 10000보다 큰 경우 뒤의 코드를 진행(참)

   document.write ('매우 좋은 ~ 있습니다.' , '<br>') ; } ;  : '매우 좋은 ~ 있습니다.'를 출력하고 한 줄 내림.

document.write ('당신은' + walkAmount + '보 걸었습니다.') ; } ; 

 : prompt에 사용자가 적은 값을 대입하여 '당신은 ~보 걸었습니다.'라고 화면에 출력.

 

 

값이 0인 경우

값을 아예 적지 않으면, 값이 0이 되기에 거짓으로 반영되어 오류가 뜬다.

 

 

 

if문으로 참일 경우, 아닐 경우에 대한 값 나타내기
1) if문 2가지 이상 사용하기

prompt를 사용한 예제. 넣은 값에 따라 다르게 뜨도록 if문을 2가지 설정했다. (60분기준)

 var phone = Number(prompt( "당신의 하루 통화량은 몇분인가요?" , "10" ) ) 

 : 변수 phone에 prompt 출력값을 숫자로 치환하여 대입.

 if ( phone >= 60 ) {document.write (phone + '분이나 사용하시네요? 많이~') ; } ; 

 : 변수 phone이 숫자 60보다 크거나 같으면 '(통화분수)분이나 사용하시네요? 많이~'가 화면에 출력

 if ( phone < 60 ) {document.write (phone + '분 사용하시네요. 이 정도면 ~') ; } ; 

 : 변수 phone이 숫자 60보다 작으면 '(통화분수)분 사용하시네요. 이 정도면 ~'이 화면에 출력

 

 

2) if문 + else문 사용하기

- 조건 1가지:  if(조건식) {자바스크립트 코드;} else {자바스크립트 코드;}; 

1번째 자바스크립트 코드는 참일 때의 값, 2번째(else문 뒤) 자바스크립트 코드는 거짓일 때의 값이다.

 var likeNum = prompt( "좋아하는 숫자를 적으시오." , "0" ) )  : 변수 likeNum에 prompt 값을 대입.

 document.write("당신이 좋아하는 숫자는 " + likeNum +"이고 "); 

 : 화면에 '당신이 좋아하는 숫자는 (prompt에서 받은 숫자)이고 ' 가 출력

 if ( likeNum % 2 == 1 )  : likeNum을 2로 나눴을 때 나머지가 1이면 (즉, 홀수면)

    { document.write("홀수") ; }  : '홀수'를 화면에 출력

    else{ document.write("짝수") ; } ;  : 아니면(else), '짝수'를 화면에 출력

 document.write( "입니다." );  : 화면에 '입니다.' 가 출력

 

 

- 조건 2가지 이상 : if(조건식) {자바스크립트 코드;} else if(조건식){자바스크립트 코드;} else {자바스크립트 코드;}; 

조건이 2가지 이상일 경우, else if를 사용하여 나타낼 수 있다.

 var month = prompt( "오늘은 몇월인가요?" , "12" ) )  : 변수 month에 prompt 값을 대입.

 if ( month >= 3 && month <= 5 ) { document.write("햇살 가득한 봄이네요.") ; } 

 : month가 3보다 크거나 같으면서 5보다 작거나 같을 때(3~5), '햇살 가득한 봄이네요.' 화면에 출력

    else if ( month >= 6 && month <= 8 ) { document.write("여행가기 좋은 여름이네요.") ; } 

 : 아니면(else) 개중에서도(if) month가 6~8일 때'여행가기 좋은 여름이네요.' 화면에 출력

    else if ( month >= 9 && month <= 11 ) { document.write("독서의 계절, 가을입니다.") ; } 

 : 그도 아니면(else) 개중에서도(if) month가 9~11일 때'독서의 계절, 가을입니다.' 화면에 출력

    else { document.write("눈 내리는 겨울이네요. 스키타러 가볼까요?") ; } ; 

 : 전부 아니라면(else), '눈 내리는 겨울이네요. 스키타러 가볼까요?' 화면에 출력

 

 

3) 중첩 if문 사용하기

 if(조건식) {if(조건식) {자바스크립트 코드;} else {자바스크립트 코드;};} else {자바스크립트 코드;}

조건 두 가지가 다 맞으면 1번째 자바스크립트 코드, 첫 번째 조건만 맞으면 2번째 코드, 둘 다 틀리면 3번째 코드가 뜬다.

 var id = "abcd1234"  : 변수 id에 'abck1234' 값을 대입.

 var pw = "1122233"   : 변수 pw에 '1122233' 값을 대입.

 var userid =prompt( "id를 적어주세요" , "" ) )  : 변수 userid에 prompt 값을 대입.

 var userpw = prompt( "비밀번호를 적어주세요" , "" ) )  : 변수 userpw에 prompt 값을 대입.

 

 if ( id == userid )  : 변수 id의 값이 변수 userid의 값과 같다면,

    { if ( pw == userpw) {document.write(id + "님 반갑습니다." ) ; }

 : 그 와중에 변수 pw의 값이 변수 userpw의 값과도 같다면, '(id =abcd1234)님 반갑습니다.' 화면에 출력

    else { document.write(id +"님 비밀번호가 일치하지 않습니다.") ; } ; 

 : 변수 pw의 값과 변수 userpw의 값이 다르다면, '(id=abcd1234)님 비밀번호가 일치하지 않습니다.' 화면에 출력

    }  : 비밀번호에 대한 if문 닫기

else { document.write("아이디가 일치하지 않습니다.") ; } ; 

 : 변수 id의 값과 변수 userid의 값이 다르다면, '아이디가 일치하지 않습니다.' 화면에 출력

 

 

 

 

반응형