[JS] 자바스크립트 기본 문법

Preface

 

이번 장에선 자바스크립트의 기본 문법을 공부했다.

 

반복문, 조건문, 연산자 등 대부분의 것들이 다른 프로그래밍 언어의 문법과 비슷해서 한 번 읽어보는 것 만으로 충분히 이해하고 넘어갈 수 있었다.

 

한 가지 주의깊게 살펴봐야 할 부분은 자바스크립트 코드 안에 HTML 태그를 사용하는 부분인 것 같다.

 

내가 아직 자바스크립트에 익숙치 않아서 그런지 document.write( ) 함수 안에 태그를 사용하여 코드를 구성하는 것이 어색하고 헷갈린다.

---

 

1. 변수 알아보기

 

 

- 변수: 프로그램을 실행하는 동안 값이 여러 번 달라질 수 있는 데이터

 

 

- 상수: 값을 한 번 지정하면 바뀌지 않는 데이터

 

 

- 변수 선언하는 방법: var 예약어 뒤에 변수 이름을 적는다.

→ var를 한 번만 쓰고 여러 변수를 쉼표로 구분하여 같은 줄에 선언할 수도 있다.

var 변수명

 

---

 

2. 자료형 이해하기

 

 

- 자료형: 컴퓨터가 처리할 수 있는 자료의 형태

종류		설명	예시
기본 유형	숫자형	따옴표 없이 숫자로만 표기한다.	var birthYear = 2000;
	문자열	작은 따옴표나 큰 따옴표로 묶어서 나타낸다.	var greeting = "Hello";
	논리형	참과 거짓이라는 2가지 값만 있는 유형이며, true와 false는 소문자로만 표시한다.	var isEmpty = true;
복합 유형	배열	하나의 변수에 여러 개의 값을 저장한다.	var seasons = ['봄', '여름'];
	객체	함수와 속성을 함께 표시한다.	var date = new Date( );
특수 유형	undefined	자료형이 지정되지 않았을 때의 상태이다.
	null	값이 유효하지 않을 때의 상태이다.

 

 

- 웹 브라우저 주소 창에 'about:blank'를 입력하면 빈 문서가 나온다.

 

 

- typeof: 해당 자료의 자료형을 알려준다.

 

 

- 자바스크립트에서 실수를 정밀하게 계산하는 것은 적합하지 않다.

 

---

 

3. 연산자 알아보기

 

 

- 산술 연산자: 수학 계산을 할 때 사용하는 연산자.

종류	설명	예시
+	두 피연산자의 값을 더한다.	c = a + b
-	첫 번째 피연산자에서 두 번째 피연산자 값을 뺀다.	c = a - b
*	두 피연산자의 값을 곱한다.	c = a * b
/	첫 번째 피연산자의 값을 두 번째 피연산자 값으로 나눈 몫을 구한다.	c = a / b
%	첫 번째 피연산자 값을 두 번째 피연산자 값으로 나눈 나머지를 구한다.	c = a % b
++	피연산자를 1 증가시킨다.	a++
--	피연산자를 1 감소시킨다.	b--

 

 

- 증가 감소 연산자(++, --)가 피연산자 뒤에 있을 때는 연산식의 처리를 끝낸 다음에 적용되지만, 피연산자 앞에 있을 때는 연산식을 처리하기 전에 적용된다.

 

 

- 할당 연산자: 오른쪽의 실행 결과를 왼쪽 변수에 할당하는 연산자

종류	설명	예시
=	연산자 오른쪽의 값을 왼쪽 변수에 할당한다.	y = x = 3
+=	y = y + x를 의미한다.	y += x
-=	y = y - x를 의미한다.	y -= x
*=	y = y * x를 의미한다.	y *= x
/=	y = y / x를 의미한다.	y /= x
%=	y = y % x를 의미한다.	y %= x

 

 

- 연결 연산자: 둘 이상의 문자열을 합쳐서 하나의 문자열로 만드는 연산자.

→ 더하기 연산자와 똑같은 '+' 기호를 사용한다.

 

 

- 비교 연산자: 피연산자 2개의 값을 비교해서 참이나 거짓으로 결괏값을 반환한다.

종류	설명	예시
		조건식	결괏값
==	피연산자가 서로 같으면 true이다.	3 == '3'	true
===	피연산자도 같고 자료형도 같으면 true이다.	3 === '3'	false
!=	피연산자가 서로 같지 않으면 true이다.	3 != '3'	false
!==	피연산자가 같지 않거나 자료형이 같지 않으면 true이다.	3 !== '3'	true
<	왼쪽 피연산자가 오른쪽 피연산자보다 작으면 true이다.	3 < 4	true
<=	왼쪽 피연산자가 오른쪽 피연산자보다 작거나 같으면 true이다.	3 <= 4	true
>	왼쪽 피연산자가 오른쪽 피연산자보다 크면 true이다.	3 > 4	false
>=	왼쪽 피연산자가 오른쪽 피연산자보다 크거나 같으면 true이다.	3 >= 4	false

 

 

- '==' 연산자와 '!= ' 연산자: 피연산자의 자료형을 자동으로 변환해서 비교

 

 

- '===' 연산자와 '!==' 연산자: 피연산자의 자료형을 변환하지 않음

→ 프로그램에서 값을 비교할 때 자료형을 변환하지 않기 위해 주로 사용한다.

 

 

- 피연산자가 문자열이라면 문자열에 있는 문자들의 아스키 값을 비교해서 결정한다.

→ 숫자보다 문자의 아스키 값이 더 크고 대문자보다 소문자의 아스키값이 더 크다.

 

 

- 논리 연산자(boolean): true, false를 처리하는 연산자

종류	기호	설명
OR 연산자	||	피연산자 중 하나만 true여도 true이다.
AND 연산자	&&	피연산자가 모두 true일 경우에만 true이다.
NOT 연산자	!	피연산자의 반댓값을 지정한다.

 

---

 

4. 조건문 알아보기

 

 

- if문 구조

if(조건) {
	조건 결괏값이 true일 때 실행할 명령
}

 

 

- if~else문 구조

if(조건) {
	조건 결괏값이 true일 때 실행할 명령
} else {
	조건 결괏값이 false일 때 실행할 명령
}

 

 

- 조건 연산자: '?'와 ':' 기호로 이루어진 조건문

(조건) ? true일 때 실행할 명령 : false일 때 실행할 명령

if (userNumber !== null) 
        (userNumber % 3 === 0) ? alert("3의 배수입니다.") : alert("3의 배수가 아닙니다.");
      else 
        alert("입력이 취소됐습니다.");

 

 

- switch문 구조

→ case 문에서는 값만 사용하고 식을 사용할 수 없다.

switch(조건)
{
	case 값1: 명령1
    	break
    case 값2: 명령2
    	break
    default: 명령
}

var session = prompt("관심 세션을 선택해 주세요. 1-마케팅, 2-개발, 3-디자인");
		
		switch (session) {
			case "1" : document.write("<p>마케팅 세션은 <strong>201호</strong>에서 진행됩니다.</p>")
				break;
			case "2" : document.write("<p>개발 세션은 <strong>203호</strong>에서 진행됩니다.</p>");
				break;
			case "3" : document.write("<p>디자인 세션은 <strong>205호</strong>에서 진행됩니다.</p>")
				break;
			default: alert("잘못 입력했습니다.");
		}

 

 

- parseInt( ) 함수: 실수를 정수로 변환해주는 함수

→ prompt( ) 문을 사용해 입력받은 값은 기본적으로 문자열로 저장되므로, 입력받을 값을 처음부터 숫자로 바꿔 주는 것이 안전하다.

var num = parseInt(prompt("입장객은 몇 명인가요?"));

 

---

 

5. 반복문 알아보기

 

 

- for문 구조

for(초깃값; 조건; 중거삭) {
	실행할 명령
}

var i, j;

		for (i = 1; i <= 9; i++) {
			document.write("<table>");
			document.write("<tr><th>" + i + "단</th></tr>");
			for (j = 1; j <= 9; j++) {
				document.write("<tr><td>" + i +" X " + j + " = " + i*j + "</td></tr>");
			}
			document.write("</table>");
		}

 

 

- while문 구조

while(조건) {
	실행할 명령
}

 

 

- do~while문 구조: 일단 명령을 한 번 실행한 후 while문에서 조건을 체크한다.

→ 조건이 false라 하더라도 일단 명령은 최소한 한 번 실행된다.

do {
	실행할 명령
} while(조건)

 

 

- break문: 반복문을 빠져나올 때 사용

 

 

- continue문: 반복문을 건너뛸 때 사용

 

 

- 자리배치도를 만드는 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>자리 배치도</title>
  <style>
    table, td {
      border:1px solid #ccc;
      border-collapse: collapse;
    }
    td {
      padding:5px;
      font-size:0.9em;
    }
  </style>
</head>
<body>
  <h1>자리 배치도</h1>
  <script>
    var i, j;
    var memNum = prompt("입장객은 몇 명인가요?");  // 전체 입장객 
    var colNum = prompt("한 줄에 몇 명씩 앉습니까?");  // 한 줄에 앉을 사람

    if (memNum % colNum == 0) 
      rowNum = parseInt(memNum / colNum);
    else
      rowNum = parseInt(memNum / colNum) + 1;

    // document.write("모두 " + rowNum + "개의 줄이 필요합니다.");

    document.write("<table>");
    for (i = 0; i < rowNum; i++) {
      document.write("<tr>");
      for (j = 1; j <= colNum; j++) {
        seatNo = i * colNum + j;    // 좌석 번호
        if (seatNo > memNum) break;
        document.write("<td> 좌석 " + seatNo + " </td>"); 
      }
      document.write("</tr>");
    }
    document.write("</table>");
  </script>
</body>
</html>