[JS] 자바스크립트 명령어 총정리

입&출력 방법 및 형태

출력 방법

• alert( ): 특정 메시지를 상대에 알림 a.k.a 경고창
• document.write( ): 출력 결과를 팝업이 아닌 웹브라우저 화면에 표시 
• console.log( ): 출력 결과를 콘솔창에 표시 (F12-콘솔 탭 or Ctrl+Shf+J)
• typeof( ): 다음 변수의 자료형을 조회

 

입력 방법

• confirm( ): 특정 사안에 대해 상대가 선택할 수 있게 표시 a.k.a 선택창 
• prompt( ): 상대에게 특정 값을 입력하라고 요청 a.k.a 입력창

 

출력 형태

• undefined: 값이 할당되지 않은 상태
• null: 유효하지 않은 값

 

연산자 (산술/할당/비교)

연산자 종류

• 산술 연산자: +, -, / * 등 산술적인 계산을 하는 연산자
  • 2 + 1
  • 3 * 5
  • 10 % 2  // A % B: A를 B로 나눴을 때 나머지 값
• 할당 연산자: 어떤 식을 오른쪽에서 실행하고 그 값을 왼쪽에 할당
  • var x = 10
    • > x(변수) 값을 10 이라고 지정
  • x = x + 10
    • > 20 / 이미 지정된 x(변수)값 10 + 10 이니까
  • x = x * 5 
    • > 100 / 이미 지정된 x(변수)값 20 * 5 니까 
• 비교 연산자 (같다/다르다)
  • 같다 연산자
    • ==, ===  // '===' 등호 3개 쓰면 자료형까지 비교하겠단 소리
    • 3 == "3" [true]
    • 3 === "3" [false]
  • 다르다 연산자
    • !=, !==  // '!==' 등호 2개 쓰면 자료형까지 비교하겠단 소리

 

자료형 변환 (숫자형<->문자형)

형 변환

• 10 + 10
  • > 20
• 10 + "10"  // 숫자10과 문자10이 만나면 연결형이 되며 '형 변환'이 발생
  • > "1010"  // 앞 숫자10 또한 문자10으로 변환되며 문자형으로 출력

 

 

조건문 (if/ for/ switch 등)

if 문과 if ~ else 문

*조건문에 앞서 유효한 값만 출력되도록 조정 필요 (null 값 출력되지 않게!)

• 피연산자 2개의 값을 비교해서 true / false로 결과값 반환
• 하나의 if ~ else 문 안에 다른 if ~ else 문 삽입 가능

 

<기본형 1>

if (조건) {

조건 결과값이 true일 때 실행할 명령

   }

 

<기본형 2>

if (조건) {

조건 결과값이 true일 때 실행할 명령

   }

else {

조건 결과값이 false일 때 실행할 명령 

    }

  	var userNumber = prompt("숫자를 입력하세요")
        
        if(userNumber !== null) {
        if(userNumber % 3 ===0) {
            alert ("3의 배수입니다.");
        }
        else {
            alert ("3의 배수가 아닙니다.");
        }
        }

 

if문과 논리 연산자(OR, AND, NOT)

<종류 / 기호>

• OR = ||  / 피연산자 중 하나만 true여도 true가 된다 
• AND = &&  / 피연산자가 모두 true일 경우에만 true가 된다 
• NOT = !  / 피연산자의 반댓값 지정

        var numberOne = prompt("값을 입력하세요");
        var numberTwo = prompt("값을 입력하세요");

        if (numberOne !== null && numberTwo !== null) {
            if (numberOne < 10 || numberTwo < 10) {
                alert ("둘 중의 하나가 10보다 작습니다.");
                }
            else {
                alert ("둘 다 모두 10보다 큽니다.");
                }
            }

// 입력한 prompt 값에 하나는 10 이상, 하나는 10보다 작은 경우, 다음 값을 출력 

 

// 입력한 prompt 값 모두 10보다 큰 경우, 다음 값을 출력

 

 

switch 문

(따져야하는 조건 등이 많을 때 사용)

 

<기본형>

switch(대상) {

case 조건값1 :

         동작

         break;  // 생략 가능

case 조건값2 :

         동작

         break;  // 생략 가능

case 조건값3 :

         동작

           }

        var session = prompt ("듣고싶은 강의 세션을 선택해주세요. 1-마케팅, 2-개발, 3-디자인")

        switch(session) {
            case "1" : document.write("<마케팅 세션은 <strong>201호</strong>에서 시작됩니다.");
                break;
            case "2" : document.write("개발 세션은 <strong>202호</strong>에서 시작됩니다.");
                break;
            case "3" : document.write("디자인 세션은 <strong>203호</strong>에서 시작됩니다.");
            }

 

반복문 (for 문)

<기본형>

for (초기값; 조건; 증가식) {

실행할 명령

   }

 

[기존 - 방법1]

1~5까지 숫자를 더한다고 했을 때 방법1 같이 나타낼 수 있는데,

        var sum = 0;

        sum += 1;
        sum += 2;
        sum += 3;
        sum += 4;
        sum += 5;

        document.write("1부터 5까지 더하면 " + sum + "입니다")

식이 너무 길어짐... 복잡한 식을 간단하게 단축하기 위해 사용하는 것이 for 문

[결과- 방법2]

    var i;
    sum = 0;

    for(i = 1; i < 6; i++) {
        sum += i;
    }
        document.write("1부터 5까지 더하면 " + sum + "입니다.")

 

[응용 - 구구단 만들기]

        var i,j;

        for(i = 1; i <= 9; i++) {
        document.write ("<div>");
        document.write ("<h3>" + i + "단</h3>");
            for(j = 1; j <= 9; j++) {
                document.write (i + "X" + j + "=" + i*j + "<br>");
        }
        document.write ("</div>");
    }

---

---