javascript 수업

HTML과 CSS을 다이나믹하게 제어하는 본격 프로그래밍 언어

조건문

본 수업은 폐지 예정입니다. 자바스크립트 언어 수업웹브라우저 자바스크립트로 수업이 리뉴얼 되었기 때문에 이것을 이용해주세요.

비교연산자(Comparison Operators)

  • 조건문의 핵심
  • 비교의 결과는 true나 false 둘 중의 하나

x = 5 일 때

연산자 설명
== 같다 x==8 은 false
=== 정확하게 같다 (value and type) x===5 은 true
x==="5" 은 false
!= 다르다 x!=8 은 true
> 크다 x>8 은 false
< 작다 x<8 은 true
>= 크거나 같다 x>=8 은 false
<= 작거나 같다 x<=8 은 true

논리연산자(Logical Operators)

x = 6; y = 3;

연산자 설명
&&
(AND)
둘다 참이어야 참 (x<10 && y>1) ->  true
(x<10 && y<1) -> false
(x>10 && y<1) -> false
||
(OR)
둘중의 하나 이상이 참이면 참 (x == 6 || y == 3) -> true
(x == 6 || y == 6) --> true
(x == 5 || y ==5) -> false
!
(NOT)
부정 (x == y) -> false
!(x == y)  -> true

조건문은

  • 프로그래밍의 핵심!
  • 프로그램을 지적으로 만들어줌
  • if, if else, switch 문이 있음
  • 비교연산자를 사용

if문

example1.html  - (jsfiddlegithub)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<script>
			// 참
			if (1 == 1) {
				alert('참');
			} else {
				alert('거짓');
			}

			// 거짓
			if (1 == 2) {
				alert('참');
			} else {
				alert('거짓');
			}
		</script>
	</head>
	<body></body>
</html>

switch문

example2.html  - (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<script>
			var n = 5;
			switch(n) {
				case 1:
					alert('case 1');
					break;
				case 2:
					alert('case 2');
					break;
				case 5:
					alert('case 5');
					break;
				default:
					alert('case default');
			}
		</script>
	</head>
	<body></body>
</html>

example3.html  - 조건문의 실제적인 활용 (jsfiddlegithub)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<script>
			var id = prompt('아이디를 입력해주세요. (coding)');
			var password = prompt('비밀번호를 입력해주세요. (everybody)');
			
			if(id == 'coding' && password == 'everybody'){
				alert('딩동댕')
			} else {
				alert('다시 해주세요.')
			}
		</script>
	</head>
	<body>
	</body>
</html>

댓글

댓글 본문
  1. won jun park
    ===연산자는 값과 타입이 모두 같으면 참
    !== 연산자는 값이나 타입이 다르면 참

    ==와 !=와 비교해서 잘알아둡시다!
  2. Sung Gil Yun
    처음엔 하나도 이해하기 어려웠는데...
    작지만 조금씩 알아가는 자신을 보면서 흥미를 느끼며...그와 함께 드는 수 많은 의문들...
    느리지만... 결국은 더 알게 될거고... 하고 싶은걸 할 수 있을 거란 마음으로...계속... 멈추지 말고...
    그래도... 제일 먼저 해야 하는건... 감사함 인것 같습니다.^^

    감사합니다.
  3. Welfare23
    Great training and great instructors!
  4. susuB
    이미 찾으셨겠지만, 문자 길이를 알고 싶으시면 length 를 쓰셔야합니다.

    id.length 로 쓰시면
    id의 문자열 길이를 알 수 있습니다.

    if(id.length >= 5 && password.length >= 6) {
    //정상
    }
    else {
    //alert
    }
    대화보기
    • 자바스크립트 초보
      var id=prompt('아이디를 입력해주세요.(5자이상)');
      var password=prompt('비밀번호를 입력해주세요.(6자이상)');
      if(id>='5'&&password>='6') {
      alert('다음으로 넘어갑니다.');
      } else {
      alert('다시 입력해주세요.');
      location.reload();
      }
      저렇게 연습해봤는데요 궁금한게 있어서요ㅠ

      조건문에 id>='5' 라고 쓴 부분 순수하게 문자로만 5글자 이상이라는 뜻 아닌가요?
      (password는 참 으로 입력했다는 가정하에)
      문자로만 5글자 이상으로 입력하면 -> true값으로 넘어가고
      숫자로만 5글자 이상으로 입력하면 -> false값이 나오잖아요!

      근데 id부분에 문자+숫자 조합해서 입력해봤는데요
      a1111 -> true값
      1111a -> false값
      으로 뜨던데.. 숫자 하나라도 들어가면 무조건 false값 돼야 하는거 아닌가요?
      형변환과 관련이 있는건지...
      문자로만 5글자이상일 때 true값으로 넘기려면 어떻게 해야하는건가요 ㅠㅠ
    • Dong Il Kim
      얏호~~~~~~ 달려달려달려욧~!
    • egoing
      제한이 없습니다. 그리고 리턴 뒤에 괄호는 필요없습니다.
      대화보기
      • 조원준
        질문이 있습니다

        조건문과 반복문은 횟수에 제한없이이 기호에따라 무한으로 중첩해 사용할수있나요 아니면 중첩하는 횟수에 제한이 있나요??

        제가 이렇게 쓰면

        if(true){
        if(true){
        return(어쩌구저쩌구);
        } else {
        return(어쩌구저쩌구);
        } else if ................

        이런식으로 쓰면 오류가 나서 물어봄니다.
      • 구글맵레드닷맨
        아이디 패스워드가 틀릴 경우 이 구문도 추가해주면 페이지 새로고침 되서 다시 입력창 뜹니다.
        참고하세요~

        location.reload();
      • adepter
        좋은강좌 감사드립니다 ^^
      • 몽테스큐
        네 alret 함수를 위한 괄호가 무조건 있어야지요 :)alert( parameter );
        대화보기
        • 오종면
          논리연산자에서
          !(x == y) 요걸 복사해 넣으니 안되는군요.바깥에 괄호를 넣어줘야 하나 봅니다.(!(x == y)) 요렇게...
          <script>var x = 6;var y = 3;alert !(x == y);</script>요렇게 해서 실행하니 Alert 창이 뜨지 않습니다.해서...<script>var x = 6;var y = 3;alert (!(x == y));</script>그러니 true 라며 Alert 창이 뜨네요. 맞는 건가요?늘 감사합니다.
        • manorgass
          비교연산자 x=5 일 때
          x == 5 // truex == '5' // truex == "5" // true
          x === 5 // truex === '5' // falsex === "5" // false
          입니다. 참고하세요 ;-)