[Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석] "자바스크립트 기초-넷째마당: 14 자바스크립트 기본 문법"

14-1 변수 알아보기

변수

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

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

 

변수 선언 규칙

변수 선언: 변수를 사용하려면 변수를 구별 할 수 있도록 이름을 붙이는 것.

 

1. 변수 이름은 영어 문자와 언더스코어(_), 숫자 사용.

사용할 수 있는 변수 이름
now, _now, now25, now_25

사용할 수 없는 변수 이름
23now, now 25, *now

 

2. 자바스크립트는 영어 대소 문자 구별, 예약어는 변수 이름 x.

number, Number, NumBer 모두 다른 변수 이름 인식.

var X.

 

3. 여러 단어를 연결한 변수 이름은 중간에 대문자 섞어 씀.

낙타 표기법: totalArea, TotalArea

 

4. 변수 이름은 의미 있게 작성.

변수 이름만 보고도 어떤 값인지 추측할 수 있도록.

 

변수 선언하기

var라는 예약어 뒤에 변수이름 적기

var 기본형

변수 선언
var currentYear;  // 올해 연도 변수 선언
var birthYear;    // 태어난 연도 변수 선언
var age;          // 계산한 나이 변수 선언

변수 한꺼번에 선언
var currentYear, birthYear, age; // 올해 연도 변수 선언, 태어난 연도 변수 선언, 계산한 나이 변수 선언

값 할당: '=' 기호를 사용해 변수에 값 저장.

값 할당은 변수를 선언한 후에 사용 가능. 변수 선언하면서 동시에 가능.

var birthYear;     // 태어난 연도 변수 선언
birthYear = 1995;  // 변수에 값 할당

var currentYear = 2021; // 올해 연도 변수 선언하고 값 할당

 

나이 계산 프로그램 만들기

<script>
		var currentYear = 2024;
		var birthYear;
		var age;

			birthYear = prompt("태어난 연도를 입력하세요. (YYYY)", "");
      age = currentYear - birthYear + 1;
      document.write(currentYear + "년 현재<br>");
      document.write(birthYear + "년에 태어난 사람의 나이는 " + age + "세입니다.");
</script>

 

 

---

 

 

14-2 자료형 이해하기

자료형

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

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

 

숫자형

정수, 실수 나눠서 구분.

-정수: 소수점 없는 숫자

-실수: 소수점이 있는 숫자.

자바스크립트: 정수+숫자 = 숫자형

 

문자열

작은따옴표(' '), 큰따옴표(" ")로 묶은 데이터 의미.

숫자도 작은,큰 따옴표로 묶으면 문자열 인식.

작은따옴표로 시작한 문자열 데이터는 작은 따옴표로 끝맺음. 큰따옴표도 마찬가지

문자열 안에 다른 문자열 넣으려면 큰따옴표 안에 작은따옴표, 작은따옴표 안에 큰따옴표.

 

논리형

불린(boolean)유형. 참(true)이나 거짓(false) 값 표현하는 자료형.

어떤 조건 확인해서 그 조건이 맞으면 참(true), 맞지 않으면 거짓(false) 결괏값.

 

undefined, null 유형

undefined: 자료형이 정의되지 않아을 때 데이터 상태.

null: 데이터 값이 유효하지 않은 상태.

 

배열

하나의 변수에 값을 여러개 저장 가능.

빈 배열도 배열을 선언한 것.

인덱스: 데이터 옆에 번호 표시. 0부터 시작.

 

 

---

 

14-3 연산자 알아보기

산술 연산자

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

피연산자: 연산자의 왼쪽이나 오른쪽에 있는 연산 대상. 숫자나 변수.

종류	설명	예시
+	두 피연산자의 값 더함.	c = a+ b
-	첫번째 피연산자의 값에서 두번째 피연산자 값 뺌.	c = a - b
*	두 피연산자의 값을 곱함.	c = a* b
/	첫번째 피연산자의 값에서 두번째 피연산자 값 나눔.	c = a / b
%	첫번째 피연산자의 값에서 두번째 피연산자 값을 나눈 나머지.	c = a % b
++	피연산자 1 증가.	a++
--	피연산자 1 감소.	b--

 

나누기 연산자(/): 결괏값은 나눈 값 자체.

나머지 연산자(%): 결괏값 나눈 후에 남은 나머지 값.

var numerOne = 15 / 2;  // numerOne은 7.
var numerTwo = 15 % 2   // numerTwosms 1.

 

증가(++) 연산자: 변수를 사용하기 전, 후에 변숫값 1 증가.

감소(--) 연산자: 변수를 사용하기 전, 후에 변숫값 1 감소.

<변수 뒤에 증가 연산자>
var a = 10        // a는 10
var b = a++ + 5   // b는 15, a는 11

a++는 연산식 먼저 실행한 후 a에 1 증가.


<변수 앞에 증가 연산자>
var c = 10        // c는 10
var d = ++c + 5   // d는 16, a는 11

++c는 변수에 c에 1을 증가시킨 후 연산식 실행.

증가, 감소 연산자가 피연산자 뒤: 연산식의 처리 끝낸 다음 적용.

증가, 감소 연산자가 피연산자 앞: 연산식을 처리 전 적용.

 

할당 연산자

할당연산자(= 대입 연산자): 오른쪽의 실행 결과를 왼쪽 변수에 할당.

변수에 값을 할당하거나 연산식의 결과를 변수에 저장할 때 사용.

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

 

연결 연산자

둘 이상의 문자열을 합쳐서 하나의 문자열로 만드는 연산자. +기호를 사용.

document.write (birthYear + "년에 태어난 사람의 나이는" + age + "세입니다"0);

 

비교 연산자

피연산자 2개의 값 비교해 참이나 거짓 결괏값 반환.

어떤 조건 체크할 때 사용.

종류	설명	예시
		조건식	결괏값
==	피연산자가 서로 같으면 true.	3 == "3"	true
===	피연산자도 같고 자료형도 같으면 true.	a === "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

 

== 연산자, != 연산자

피연산자의 자료형을 자동으로 변환해서 비교.

3 == "3"  // true
3 != "3"  // flase

 

=== 연산자, !== 연산자

피연산자의 자료형을 변환하지 않음.

3 === "3"  // false
3 !== "3"  // true

 

문자열의 비교

비교연산자는 숫자 뿐만 아니라 문자열도 서로 비교 가능.

아스키 값을 비교해 결정.

"javascript"  >   "Javascript"   // true (소문자 아스키값  > 대문자 아스키값)

 

논리 연산자

불리언(boolean) 연산자. true, false 처리하는 연산자. true, false 자체가 피연산자.

주로 프로그램 에서 조건을 체크할 때 사용.

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

 

 

---

 

 

14-4 조건문 알아보기

if 문과 if ~ else 문 알아보기

스크립트 안에서 조건 체크 가능.

if문: 괄호 안의 조건 체크해 결괏값이 true면, if 문 다음에 나오는 명령 실행. false면, 아무것도 하지 않음.

조건을 만족했을 때 실행할 명령이 여러개라면 중괄호({ })로 묶고 그 안에 명령 나열해 순서대로 처리.

코드 블록: { }로 묶은 영역

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

if ~ else 문: 괄호 안의 조건 체크해 결괏값이 true가 아니면, 실행할 명령을 else문 다음에 추가.

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

 

3의 배수 확인하기

<script>
      var userNumber = prompt("숫자를 입력하세요.");

      if (userNumber % 3 === 0) 
        alert("3의 배수입니다.");
      else 
        alert("3의 배수가 아닙니다.");
</script>

 

중첩된 if ~ else 문

<script>
      var userNumber = prompt("숫자를 입력하세요.");

      if (userNumber !== null) {
        if (userNumber % 3 === 0) 
          alert("3의 배수입니다.");
        else 
          alert("3의 배수가 아닙니다.");
      }
      else 
        alert("입력이 취소됐습니다.");      
</script>

 

조건 연산자로 조건 체크하기

실행할 명령이 각각 하나뿐일 때.

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

 

논리 연산자로 조건 체크하기

조건 2개 이상 체크할 경우.

 

OR 연산자 (||)

피연산자 2개 중에서 true가 하나라도 있으면 결괏값 true.

op1	op2	op1    ||    op2
false	false	false
false	true	true
true	false	true
true	true	true

 

AND 연산자 (&&)

피연산자 2개 중에서 false가 하나라도 있으면 결괏값 false.

op1	op2	op1    &&    op2
false	false	false
false	true	false
true	false	false
true	true	true

 

NOT 연산자 (!)

true, false 를 반대로 뒤집음.

op	!op
false	true
true	false

 

switch 문

처리할 명령이 많을 때 편리.

조건을 체크한 후 case 문 사용해 명령 처리.

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

switch문의 조건은 case 문의 값과 일대일 일치.

조건과 일치한 case문의 명령을 실행한 후에는 switch문 빠져나옴.

 

자리배치도 만들기

<script>
		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("잘못 입력했습니다.");
		}
</script>

 

prompt( ) 문   vs   paselnt( ) 함수

prompt( ) 문: 입력받은 값 기본적으로 문자열 저장. 산술 연산에 사용할 경우 자동으로 숫자형 변환. 변환이 안되는 경우 o.

paselnt( ) 함수: 괄호안의 값을 정수로 변환.

 

 

---

 

14-5 반복문 알아보기

반복문은 왜 필요할까?

효율적이기 위해.

 

for 문 사용하기

일정하게 커지면서 명령을 반복하여 실행할 때 사용.

for (초깃값; 조건; 증가식) {
	실행할 명령
    }

① 초깃값: 카운터 변수 초기화. 초깃값은 0,1부터 시작.

② 조건: 명령을 반복하기 위해 조건 체크. 이 조건을 만족해야 그 다음에 오는 명령 실행 가능.

③ 증가식: 명령을 반복한 후에 실행. 보통 카운터 변수를 1증가 시키는 용도로 사용.

 

1부터 5까지 숫자 더하기

<script>
		var i;
		var sum = 0;

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

for 문 실행하는 과정: 초깃값    ->    조건    ->    명령    ->   증가식

 

중첩된 for문 사용하기

for문 안에 다른 for문 넣어 사용.

안쪽 for문 모두 실행한 후, 바깥쪽 for문 실행.

 

구구단 만들기

<script>
		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>");
		}
</script>

 

while문과 do ~ while문 사용하기

while문: 조건이 true인 동안 명령 반복. false라면 명령은 한 번도 실행하지 않을 수 있음.

do ~while문: 일단 명령을 실행한 후 조건을 체크한다는 점.

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

 

while문으로 팩토리얼 만들기

<script>
		var n = prompt("숫자를 입력하세요.","10");
		var msg = "";

		if (n !== null) {  // '취소' 버튼을 누르지 않았는지 체크
			var nFact = 1;  // 결과 값
			var i = 1;  // 카운터
				
			while(i <= n) {
				nFact *= i;
				i++;
			}
			msg = n + "! = " + nFact;  // 결과 값을 표시할 문자열 
		}
		else
			msg = "값을 입력하지 않았습니다.";

		document.write(msg);  // 결과 표시
</script>

 

break문과 continue문 사용하기

반복문은 지정한 횟수만큼 명령 반복할 때 사용.

특정 조건에서 반복문 멈추거나, 반복문 중간에 앞으로 되돌아가야할 경우.

 

멈추는 break 문

조건의 역할은 명령이 조건에 맞는치 체크하고 명령 반복. 종료 조건 포함.

종료 조건 되기 전에 반복문 빠져나와야 할 경우.

for(i = 0; i <10; i++) { 실행할 명령 }   // i값이 10 되면 for문 종료.
while(i < 20) { 실행할 명령}  // i값이 20이 되면 while문 종료.

 

건너뛰는 continue 문

주어진 조건에해당하는 값 만나면 해당 반복문 건너뜀.

반복문 맨 앞으로 되돌아가 다음 과정으로 넘어감.

 

1부터 10까지 짝수만 더하기

<h1>짝수끼리 더하기</h1>
	<script>
		var i;
		var n = 10;
		var sum = 0;

		for (i = 1; i <= n; i++) {
			if (i % 2 === 1)
				continue
			sum += i;

		document.write(i + " ------ " + sum + "<br>");
		}
</script>

 

 

 

---

출처

https://easyspub.co.kr/20_Menu/BookView/PUB/421/PUB

https://easyspub.co.kr/20_Menu/BookView/PUB/421/PUB