JavaScript 조건문

조건문은 어떤 조건을 제시하고 그 조건에 맞을 경우 참(true) 값을 맞지 않을 경우 거짓(false) 값을 반환하여 그 반환되는 값에 따라 JavaScript 명령을 실행을 시키는 문법이 되겠습니다. 대표적인 조건문으로는

이 있습니다.

if 문

if 문은 조건이 참일 경우에만 어떤 명령을 수행하고 거짓일 경우에는 아무 것도 하지 않습니다. 사용법은 아래와 같습니다.
사용법

if (조건식)
{실행 내용}

입력

<html>
    <head>
        <title>if 문 예제</title>
    <script type="text/javascript">
    <!--
    var a = 9 //코드 연습장 실행 후 9가 아닌 값으로 바꾸고 실행해 보세요. 아무 일도 안 일어납니다.
    if (a == 9){
    document.write("참 입니다.")
    }
    // -->
    </script>
    </head>
    <body>
    
    </body>
</html>

if else 문

if else 문은 if 문과 달리 참일 경우에 수행할 명령과 거짓일 경우 수행할 명령으로 구분되어 있습니다. 사실상 가장 많이 쓰는 조건문이라고 할 수 있겠습니다.
사용법

if (조건식)
{참일 경우 수행할 명령}
else
{거짓일 경우 수행할 명령}

입력

<html>
    <head>
        <title>if 문 예제</title>
    <script type="text/javascript">
    <!--
    var a = 9 //코드 연습장 실행 후 9가 아닌 값으로 바꾸고 실행해 보세요.
    if (a == 9)
    {document.write("참 입니다.")}
    else
    {document.write("거짓 입니다.")}
    // -->
    </script>
    </head>
    <body>
    
    </body>
</html>

다음 예제는 display라는 CSS Property를 사용하여 이 사이트에서 자주 볼 수 있는 보이기와 감추기 Function입니다. 아래 소스의 div Tag의 id를 div_01로 준 다음, obj라는 대입 변수에 div_01을 대입했습니다. display Property에 대해 잘 모르면 여기를 참조 하세요.
입력

<html>
  <head>
      <title>조건문과 style을 이용한 보이기 감추기</title>
  <script type="text/javascript">
      <!--
      //show_hide라는 이름으로 Function을 만들고 obj라는 대입변수를 하나 잡습니다.
      function show_hide(obj){ //전체 괄호 시작
      if (obj.style.display == "none") //대상 Tag의 현재 display값이 none 이라면
      {obj.style.display = "block"} //display값을 block으로 바꾸고(보이게 됨)
      else //그렇지 않다면 즉, display 값이 block이면
      {obj.style.display ="none"} //display값을 none 으로 바꾸라.(감추게 됨)
      } //전체 괄호를 닫아 줍니다.
      // -->
      </script>
  </head>
  <body>
  <input type="button" value="보이기 감추기" 
  onclick="show_hide(div_01);" style="width:200px;" />
  <div style="width:200px;height:200px;display:none;background-color:gold;" id="div_01">
  </div>
  </body>
</html>

Tel. 042-353-2371

평일 오전 9시 ~ 오후 7시

기업은행

010-8649-6758

예금주:제주사랑(송진아)

JavaScript 조건문