연산문(연산식+문장)

 

제어문 : 문장의 형태, 프로그램의 흐름를 제어한다.

조건문+선택문+반복문

제어문이란?

제어문은 프로그램의 흐름을 제어할 수 있도록 도와주는 문장을 말한다.

제어문에는 조건식의 만족여부에 따라 코드를 제어할 수 있는 조건문과

변수와 일치하는 값을 찾아 선택적으로 코드를 제어할 수 있는 선택문과

특정 코드를 원하는 횟수만큼 반복 실행할 수 있는 반복문이 있다.

 

조건문 if문(만약에~) 문장✅

조건문은 조건식의 값이 true인지 false인지에 따라 자바스크립트 코드를 제어한다.

조건을 여러 개 달 수 있다.

if 문은 조건식을 만족(true)했을 경우에만 코드를 실행시킨다.

[기본형]

if(조건식){

   조건식이 true면 실행할 코드;

}

 <script>

  var num1 = 10;

      if (num1 < 500) {

        document.write("hello", "<br />");

      }

    </script>

if(조건식)<---Boolean데이터의 자리이다. 어떤 데이터를 입력하면 true 아님 false 값을 반환한다.

Number() <-소괄호 메서드 Boolean 메서드에는 4가지 값이 들어가면 (빈문자, null, undefined, 0) false.

즉, false가 나오는 4가지 값이 들어가면 실행이 안되기 때문에 그 외에 값들이 들어가야한다.

삼항조건연산자는 연산식.

조건문은 실행시키고 싶지 않으면 안 시켜도 된다. 삼항조건연산자는 무조건 실행된다. (false일 때 실행될 코드가 있어야 오류가 안 나기 때문)

조건식 ? 코드 1 : 코드 2;

if(num1){

   document.write("hello");

}

이렇게 써도 hello가 출력된다. if(조건식)에 false를 반환하는 4가지 값이 들어가지 않았기 때문에 true이다.

if(0){ 

   document.write("hello");

}

//0은 false를 반환하므로 {}안의 코드를 실행시키지 않음. 

💡예제💡

①사용자에게 이름을 물은 후 사용자가 화면에 "반갑습니다 [사용자이름]님!"을 출력하세요.

var user_name = prompt("당신의 이름이 무엇입니까?");

      if (user_name) {

        document.write("반갑습니다." + user_name + "님!");

      }

user_name은 변수이고, "반갑습니다" "님!"은 문자데이터라서 문자결합연산자 +를 써주어야한다.

,(콤마) 써도 상관 없다.

②사용자에게 하루 통화량은 몇 분인가요? 를 묻고,

만약 60분 이상이면 "많이 통화하는 편이네요"를 출력하세요.

  var call = prompt("당신의 통화량은 몇 분인가요?", "0");

      if (call > 60) {

        document.write("많이 통화하는 편이네요.", "<br />");

      }

 

③사용자에게 하루 몇 보를 걷는지 묻고 10,000보 이상이면 "참 좋은 습관을 가지고 계시네요"

 var walk_amount = prompt("당신은 하루 몇 보를 걸으시나요?", "0"); //기본 응답을 콤마 뒤에 큰따옴표 안에 써줄 수 있다.

      if (walk_amount > 10000) {

        document.write("참좋은습관을 갖고 계시네요");

      }

새로고침하면 스크립트의 첫번째줄부터 다시 읽는다.

---

조건문 else문(그렇지 않으면~) 문장✅

if 문의 조건식이 만족하지 않았을 경우 코드를 실행시킨다.

if 문과 반드시 함께 써야한다 항상 세트! else문만 쓸 수 없다. if문과 else문의 위치가 바뀌어서도 안된다.

 

[기본형]

if(조건식){

   조건식이 true면 실행할 코드;

}else{

   조건식이 만족하지 않았을 때 실행할 코드;

}

삼항조건연산자에는 긴 코드를 쓰지 못하고 간단한것만 다룬다. if문은 중괄호 안에 코드가 몇 줄이 되든 상관없이 큰 문장들을 제어할 수 있다. 

💡예제💡

사용자에게 좋아하는 숫자를 묻고, 짝수면 "당신이 좋아하는 숫자는 짝수네요"

홀수면 "당신이 좋아하는 숫자는 홀수네요"라고 출력하세요.

    <script>

      var num = prompt("당신이 좋아하는 숫자는?", "0");

      if (num % 2 == 0) {

        document.write("당신이 좋아하는 숫자는 짝수네요", "<br />");

      } else {

        document.write("당신이 좋아하는 숫자는 홀수네요");

      }

    </script>

number % 2 === 0; 으로 쓰면 오류가 난다. 사용자가 입력한 데이터는 문자형 데이터이기 때문에 숫자형 데이터랑 자료형이 다름!

---

confirm()메서드 

confirm()메서드 는 사용자에게 확답을 받기 위해 사용하는 창으로 컨펌창 또는 확인취소창이라고 부른다.

confirm 창에는 확인 버튼을 누르면 true를 반환하고 취소를 누르면 false를 반환한다. 

확인을 누르면 true가 저장되고,  취소를 누르면 false가 저장된다.

[기본형]

confirm("사용자에게 보낼 메세지");

 

💡예제💡

사용자에게 탈퇴 여부를 묻고, 확인을 누르면 "탈퇴 완료되었습니다."

취소를 누르면 "탈퇴가 취소되었습니다."를 출력하기

   var result = confirm("정말로 탈퇴하시겠습니까?");

      //result는 이 변수 자체가 조건식이 된다. ture아니면 false를 저장하고 있으므로.

      if(result){

        document.write("탈퇴가 완료되었습니다.");

      }else{

        document.write("탈퇴가 취소되었습니다.")

      }

    </script>

사용자가 확인 버튼을 누르면 true를 반환하고 취소 버튼을 누르면 false가 저장된다.

---

else if문 

두 가지 이상의 조건식과 정해놓은 조건식을 만족하지 않았을 때 실행할 코드로 이루어져 있다.

else if문은 단독으로 사용할 수 없고 무조건 if문과 함께 쓰여야한다. 

else if문은 가장 위에 있는 조건식1부터 마지막 조건식까지 차례로 검사하면서 만족하는(true) 값이 나오면 그에 해당하는 코드를 실행시키고 종료한다. 조건식 중 만족하는 값이 하나도 없으면 마지막 else문을 실행시키고 종료한다.

 

[기본형]

if(조건식1){

   조건식1이 만족하면 실행할 코드;

}else if(조건식2){

   조건식2가 만족하면 실행할 코드;

}else if(조건식3){

   조건식3이 만족하면 실행할 코드;

}else if(조건식4){

...

}else{

   위의 모든 조건식 n개 중 만족하는 조건이 없으면 실행할 코드;

}

 

맨 마지막 else문은 생략 가능하다! 

💡예제💡

질의응답창으로 사용자에게 지금 몇월이냐고 묻고 else if문을 사용하여 해당하는 계절문구를 출력하기봄: 벚꽃의 계절 봄이네요!/여름 : 여행가기 좋은 여름이네요!/가을: 독서의 계절 가을이네요!/겨울: 스키의 계절 겨울이네요! 를 출력하세요.

 var month = prompt("지금이 몇월인가요?");

      if (month >= 3 && month <= 5) {

        document.write("벚꽃의 계절 봄이네요!");

      } else if (month >= 6 && month <= 8) {

        document.write("여행가기 좋은 여름이네요!");

      } else if (month >= 9 && month <= 11) {

        document.write("독서의 계절 가을이네요!");

      } else {

        document.write("스키의 계절 겨울이네요!");

      }

var a : b ? c

var month = user-input;

var season = month >= 3 && month <=5 : "봄" ?

                      month >= 6 && month <=8 : "여름" ?

                      month >= 9 && month <=11 : "가을" ? "겨울";

이렇게 써도 동일!

두 데이터를 쓰고자하는게 비교연산자이다 ! 여러 개 한 번에 쓸 수 없다!

---

중첩 if문

조건문 안에 조건문이 있으면 이것을 중첩 if문이라고 한다.

중첩if문은 바깥쪽에 있는 조건문인 조건식1을 만족해야만 안쪽에 있는 조건식2를 검사한다.

만약 안쪽의 조건식 2를 만족하지 않으면 바깥쪽 조건식 1의 {}안에 있는 자바스크립트 코드만 실행시키고 종료한다.

조건식1이 만족하지 않았을 경우 바깥쪽 else문을 실행시키고 종료하고 

조건식2가 만족하면 그에 해당하는 코드를 실행시키고 종료한다. 

 

[기본형]

if(조건식1){

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

  }else{조건식2가 만족하지 않으면 실행할 코드;

  }

}else{

조건식 1이 만족하지 않으면 실행할 코드;

}

 

구동원리 : ①조건식1먼저 검사한 후 true나오면 중괄호 안인 if(조건식2){js코드;} 검사하고 (조건식2)를 만족하면 안쪽 if문의 자바스크립트 코드 실행 후 종료②조건식1먼저 검사한 후 true나오면 중괄호 안인 if(조건식2){js코드;} 검사하고 (조건식2)를 만족하지 않으면 바깥쪽 if문에 있는 자바스크립트 코드만 실행하고 종료한다.

 

true중에서 if(조건식2)를 한번 더 검사해준다. 

💡예제💡

아주아주 간단한 로그인 알고리즘 *실무에서는 이렇게 안 쓴다! 연습이다.

<script>

    //서버에 저장된 회원 정보

    var id = "dotkim1234";

    var pw = "112233";

    //사용자의 아이디 비밀번호 입력 받기

    var userId = prompt("아이디입력");

    var userPw = prompt("비밀번호입력");

id는 서버 안에 저장되어 있던 id, userId는 사용자가 입력한 id.

    if(id==userId){

      //아이디가 일치하면 실행

        if(pw == userPw){

        //비밀번호가 일치할 경우 실행

        document.write("환영합니다."+userId+"님!");

      }else{

        //비밀번호가 일치하지 않으면 실행

        alert("비밀번호가 일치하지 않습니다.");

        location.reload();//페이지 새로고침.

      }

      }else{

      //아이디가 일치하지 않으면 실행

      alert("아이디가 일치하지 않습니다.");

      location.reload();

      //페이지 새로고침이라는 뜻.

    }

   

  </script>

---

선택문

switch문

선택문인 switch문은 변수에 저장된 값과 switch문에 있는 경우의 값(=case)을 검사하여 변수와 case(=경우의 값)가 일치하면 그에 해당하는 코드를 실행시킨다. 

if문과 용도는 비슷하지만 if문은 만족하는 데이터가 여러 개일 경우에 주로 사용하고, switch문은 여러 경우의 값 중 하나로 일치하는 데이터를 찾아 그에 해당하는 코드를 실행할 때 주로 사용한다.

break : 강제종료문 

 

구동원리:변수에 저장된 값은 switch문을 만나면 case값을 하나씩 검사한다.일치하는 데이터가 있으면 그에 해당하는 코드를 실행하고 break문을 만나 코드를 종료한다. 만일 경우의 값(case) 중에 일치하는 값이 없다면 마지막에 있는 default문을 실행하고 switch문을 종료한다. 

[기본형]

var 변수 = 값;

  switch(변수){

    case값1 : 코드1;

    break

    case값2 : 코드2;

    break;

    case값3 : 코드3;

    break;

 

   default : 코드4;

}

💡예제💡

사용자에게 자주 사용하는 포털사이트가 뭔지 묻고 일치하는 사이트가 있다면 그에 해당하는 사이트로 이동시키기 

<script>

      var site = prompt(

        "네이버, 다음, 네이트, 구글 중 즐겨 사용하는 포털 사이트는?"

      );

      var url;

      switch (site) {

        case "네이버":

          url = "www.naver.com";

          break;

        case "다음":

          url = "www.daum.net";

          break;

        case "네이트":

          url = "www.nate.com";

          break;

        case "구글":

          url = "www.google.com";

          break;

        default:

          alert("보기중에 없는 사이트입니다.");

      }

      if (url) location.href = "http://" + url;

    </script>

변수와 일치하는 case를 찾아라! break-강제종료문. 변수와 일치하는 case가 아예 없을 경우 맨 마지막 default를 실행시킨다. 

밀리초로 시간 계산하기 

---