[Do it! HTML+CSS+자바스크립트]자바스크립트 기본 문법

22.12.21 배운 내용 정리2
자바스크립트 기본 문법
(변수, 자료형, 연산자, 조건문, 반복문)

 

변수 알아보기

 

① 변수란

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

반면에 값을 한번 지정하면 바뀌지 않는 데이터를 상수라고 함.

예를 들어 나이를 계산하는 프로그램을 만든다고 가정했을 때 나이를 계산할 때는 다음과 같은 식을 사용함.

ex. 나이 = 올해 연도 - 태어난 연도 + 1 

나이를 계산하는 식에서 맨 끝의 '1'은 값이 변하지 않는 '상수'임.

하지만 올해 연도와 태어난 연도는 입력하는 사람마다 다르니 '변수'가 됨.

 

② 변수 선언의 규칙

변수를 사용하려면 변수를 구별할 수 있도록 이름을 붙여 주어야 하는데, 이것을 변수 선언이라고 함.

프로그램에서 사용할 변수 이름은 서로 다르게 만들어야 함.

자바스크립트에서 변수를 선언할 때는 지켜야 할 규칙이 몇 가지 있음.

 

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

변수 이름의 첫 글자는 영어 대소 문자나 언더스코어(_)만 사용할 수 있으며,

숫자나 기호, 띄어쓰기는 허용하지 않음.

 

ex. 사용할 수 있는 변수와 그렇지 않은 변수 이름

now, _now, now25, now_25     //사용할 수 있음(O)

25now, now 25, *now               //사용할 수 없음(X)

 

(2) 자바스크립트는 영어 대소 문자를 구별하며 예약어는 변수 이름으로 쓸 수 없음

자바스크립트에서는 number, Number, NumBer 모두 다른 변수 이름으로 인식함.

그리고 var와 같이 미리 정해 놓은 예약어는 변수 이름으로 사용할 수 없음.

 

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

주로 한 단어로 이루어진 변수 이름은 모두 소문자로 쓰고,

두 단어 이상인 변수 이름은 totalArea처럼 중간에 대문자를 섞어 사용함.

이 규칙을 낙타 표기법(카멜 표기법)이라고 함.

 

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

변수 이름만 보고도 대충 어떤 값인지 추측할 수 있도록 변수 이름을 의미 있게 작성하는 것이 좋음.

ex. 점수의 합계면 total, 평균 점수라면 average

또한 올해 연도를 year라고 할 수 있지만 currentYear로, 태어난 연도는 year2보다 birthYear라고 변수 이름을 정하면 좋음.

 

③ 변수 선언하기

자바 스크립트에서 변수 선언은 다음과 같이 var라는 예약어 뒤에 변수 이름을 적으면 됨.

기본형 : var 변수명

 

그리고 변수 3개를 한꺼번에 선언할 수도 있음. var을 한 번만 쓰고 여러 변수를 쉼표로 구분하여 같은 줄에 선언함.

 

※ 변수 선언하기

var currentYear;      //올해 연도 변수 선언

var birthYear;          //태어난 연도 변수 선언

var age;                  //계산한 나이 변수 선언

 

※ 변수 한꺼번에 선언하기

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

 

변수를 선언했으면 '=' 기호를 사용해서 변수에 값을 저장할 수 있음. 이것을 값 할당이라고 함.

값 할당은 변수를 선언한 후에 따로 할 수도 있고, 변수를 선언하면서 동시에 할 수도 있음.

예를 들어 태어난 해가 1995년이라면 다음과 같이 birthYear 변수에 값을 할당함.

 

※ 변수 선언과 값 할당 따로 하기

var birthYear;         //태어난 연도 변수 선언

birthYear = 1995;   //변수에 값 할당

 

※ 변수 선언과 값 할당 같이 하기

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

 

나이 계산 프로그램 만들기

 

① HTML 파일에 코드 입력하기

문서를 열고 다음과 같이 소스 코드를 입력한 후 저장함.

 

 

② 결과 확인하기

 

 

---

 

자료형 이해하기

 

① 자료형이란

컴퓨터에게 일을 시킬 때 '10'은 숫자이고, '안녕하세요'는 문자라는 것을 따로 알려 줘야 처리가 가능함.

이렇게 컴퓨터가 처리할 수 있는 자료의 형태를 자료형이라고 함.

 

※ 자바스크립트에서 사용하는 자료형

 

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

 

② 숫자형

자바스크립트에서 숫자형은 정수와 실수로 나누어 구분함.

 

(1) 정수

정수는 소수점이 없는 숫자임.

 

(2) 실수

실수는 소수점이 있는 숫자임.

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

그 이유는 자바스크립트에서는 0.1이나 0.2를 2진수로 변환해서 계산하는데

이때 자릿수가 많은 소수로 변환되고, 그 상태에서 0.1과 0.2를 더하기 때문임.

따라서 자바스크립트에서 정밀하게 숫자를 계산하는 프로그램을 만들 때는 주의해야 함.

 

③ 문자열

문자열은 작은따옴표(' ')나 큰따옴표(" ")로 묶은 데이터를 의미함.

그래서 숫자도 따옴표로 묶으면 문자열로 인식함.

만약 큰따옴표로 묶은 문자열 안에 또 다른 문자열을 넣으려면 큰따옴표가 중복되지 않도록

속성값은 작은따옴표로 묶어서 표현해야 함.

 

④ 논리형

논리형은 불린 유형이라고도 하며, 참이나 거짓의 값을 표현하는 자료형임.

주로 프로그램에서 조건을 확인할 때 논리형 데이터를 사용함.

조건이 맞으면 true, 틀리면 false를 보여줌.

 

⑤ undefined 유형과 null 유형

undefined는 자료형이 정의되지 않았을 때의 데이터 상태를 나타냄.

자바스크립트에서는 변수를 선언할 때 자료형을 미리 지정하지 않고 값을 할당할 때 결정함.

그래서 변수 선언만 하고 값이 할당되지 않은 자료형을 undefined라고 함.

즉, undefined는 단순히 '변수에 값이 할당되지 않았다'는 의미임.

반면에 null은 '데이터의 값이 유효하지 않은 상태'를 나타냄.

 

⑥ 배열

배열은 하나의 변수에 값을 여러 개 저장할 수 있음. 배열은 여러 개의 데이터값을 하나의 배열 이름으로 묶어서 선언함.

다음과 같이 데이터 값을 쉼표로 구분해서 대괄호([ ])로 묶으면 배열을 선언할 수 있는데,

대괄호 안에 값을 입력하지 않으면 빈 배열이 만들어짐. 물론 빈 배열도 배열을 선언한 것임.

기본형 : 배열명["값1", "값2", .......]

              배열명[  ]  //빈 배열 선언

 

---

 

연산자 알아보기

 

① 산술 연산자

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

연산자의 왼쪽이나 오른쪽에 있는 연산 대상이 '피연산자'라고 하는데,

산술 연산자에서 피연산자는 숫자나 변수가 옴,

ex. currentYear - birthYear + 1

이 식에서 currentYear, birthYear, 1이 연산 대상이고 '피연산자'임.

그리고 피연산자를 제외한 +, -는 '연산자'임.

 

※ 산술 연산자

 

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

 

※ 나누기 연산자와 나머지 연산자 비교하기

var numberOne = 15 / 2;    //numberOne은 7입니다

var numberTwo = 15 % 2;    //numberTwo은 1입니다

 

※ 변수 뒤에 증가 연산자 붙이기

var a = 10            // a는 10입니다

var b = a++ + 5    //b는 15,  a는 11입니다.

 

※ 변수 앞에 증가 연산자 붙이기

var c = 10            //c는 10입니다

var d = ++c + 5    //d는 16, c는 11입니다

 

② 할당 연산자

할당 연산자는 연산자 오른쪽의 실행 결과를 왼쪽 변수에 할당하는 연산자로 대입 연산자라고도 함.

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

자바스크립트에서는 할당 연산자와 산술 연산자를 합쳐 하나의 할당 연산자로 표시할 수 있음.

 

※ 할당 연산자

 

종류	설명	예시
=	연산자 오른쪽의 값을 왼쪽 변수에 할당함.	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

 

③ 연결 연산자

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

연산자 기호로 사칙연산의 더하기 연산자와 똑같은 '+' 기호를 사용함.

연결 연산자는 문자열끼리 연결한다고 해서 문자열 연산자라고도 함.

 

※ 연결 연산자 사용하기

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

 

④ 비교 연산자

비교 연산자는 피연산자 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

 

(1) ==, != 연산자와 ===, !== 연산자 비교

==, != 연산자는 피연산자의 자료형을 자동으로 변환해서 비교함.

아래 식에서 숫자 3과 문자열 "3"을 비교하면 왼쪽의 숫자 3을 문자열로 변환해서 비교함.

그래서 첫 번째 식의 결과는 true, 두 번째 식의 결과는 false가 됨.

3 == "3"   //true

3 != "3"    //false

 

반면에 ===, !== 연산자는 피연산자의 자료형을 반환하지 않음.

그래서 아래식에서 숫자 3과 문자열 "3"의 값과 자료형을 모두 비교하여 결과를 보여줌.

3 === "3"   //false

3 !== "3"    //true

 

그래서 프로그램에서 값을 비교할 때는

자료형을 자동으로 변환하지 않기 위해 === 연산자와 !== 연산자를 더 많이 사용함.

 

(2) 문자열의 비교

비교 연산자는 문자열도 서로 비교할 수 있음. 

문자열에 있는 문자들의 아스키 값을 비교해서 결정함.

예를 들어 "A" > "B" 라는 문자열을 비교하면 A의 아스키값(65)과 B의 아스키값(66)을 비교하여 결괏값 false가 나옴.

그리고 문자열에서 비교할 문자가 여러 개인 경우 맨 앞의 문자부터 하나씩 비교함.

 

⑤ 논리 연산자

논리 연산자는 불리언 연산자라고도 하며 true, false를 처리하는 연산자임.

즉, true, false 자체가 피연산자인 연산자임. 논리 연산자는 주로 프로그램에서 조건을 체크할 때 사용함.

 

※ 논리 연산자

 

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

 

---

 

조건문 알아보기

 

① if문과 if~else문 알아보기

if문과 if~else문을 사용하면 스크립트 안에서 조건을 체크할 수 있음,

if문에서는 괄호 안의 조건을 체크해서 결괏값이 true면 if문 다음에 나오는 명령을 실행하고,

false이면 아무것도 하지 않음. 조건을 만족했을 때 실행할 명령이 여러 개라면 중괄호({ })로 묶고

그 안에 명령을 나열하여 순서대로 한꺼번에 처리하라고 표시함.

({ }로 묶은 영역을 코드 블록이라고 함.)

기본형 : if(조건)  {

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

              }

 

if~else문은 if 조건의 결괏값이 true가 아닐 때 실행할 명령을 else문 다음에 추가함.

기본형 : if(조건)  {

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

              } else  {

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

              }

 

※ 3의 배수 확인하기1

입력한 숫자가 3의 배수인지 확인하는 방법은

입력받는 변수 userNumber를 3으로 나눈 후 그 나머지가 0이면 3의 배수이고 그렇지 않으면 3의 배수가 아님.

 

 

하지만 프로그래밍을 할 때 하나의 if~else문으로는 해결되지 않는 상황이 더 많음.

이럴 때는 if~else문안에 또 다시 if~else문을 사용할 수 있는데,

이렇게 다른 if~else문 안에 포함되는 if~else문를 중첩된 if~else문이라고 함.

 

앞에 예제에는 사용자가 [취소] 버튼을 눌렀을 때의 동작도 고려해야함.

그리고 숫자를 입력한 후 [확인] 버튼을 눌렀을 때만 3의 배수를 체크해야함.

프롬프트 창에서 [취소] 버튼을 누르면 변수에는 null이 저장됨.

따라서 userNumber의 변숫값이 null인지 아닌지를 확인하면 되는데 이때도 if~else문을 사용함.

userNumber값이 null이 아니면 3의 배수인지 확인하고, null이면 숫자가 입력되지 않았다고 알려줌.

 

※ 3의 배수 확인하기2

프롬프트 창에 숫자를 입력한 후 [확인] 버튼을 누르면 입력값이 3의 배수인지 알려 주고,

[취소] 버튼을 누르면 입력이 취소됨을 표시함.

 

 

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

만약 조건이 하나이고 true일 때와 false일 때 실행할 명령이 각각 하나뿐이라면 if~else문 대신에

조건 연산자를 사용하는 것이 간단함. 조건 연산자는 '?'와 ':' 기호로 이루어짐.

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

 

※ 조건 연산자를 사용해 3의 배수 확인하기

중첩된 if~else문 대신에 조건 연산자를 사용하여 3의 배수를 확인함.

 

 

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

조건을 2개 이상 체크할 경우에는 논리 연산자를 사용해 조건식을 만듦.

두 조건이 참일 경우와 조건 1개만 참일 경우처럼 여러 경우의 수를 따질 때는 논리 연산자를 사용함.

 

(1) OR 연산자

OR 연산자 기호는 '||'를 사용하며, 피연산자 2개 중에서 참이 하나라도 있으면 결괏값은 참임.

 

※ OR 연산자를 사용해 조건 체크하기

OR 연산자를 사용해 50보다 작은 숫자 2개를 입력받아 둘 중 하나가 10보다 작은지 판단함.

 

 

(2) AND 연산자

AND 연산자 기호는 '&&'를 사용하며, 피연산자 2개 중에서 거짓이 하나라도 있으면 결괏값은 거짓이 됨.

 

※ AND 연산자를 사용해 조건 체크하기

AND 연산자를 사용해 입력한 2개의 숫자가 50보다 작은지 체크함.

 

 

(3) NOT 연산자

NOT 연산자 기호는 '!'를 사용하며 참이나 거짓을 반대로 뒤집음.

ex. if(userNumber !== null) { 실행할 명령 }   //입력값이 null이 아니면 if문을 실행

 

④ switch문

자바스크립트에서 조건을 체크할 때는 if~else문을 사용하지만,

처리할 명령이 많다면 switch문이 더 편리함.

switch문에서 조건을 체크한 후 case문을 사용하여 명령을 처리할 수 있음.

switch문의 기본 형식은 다음과 같음.

기본형 : switch(조건)

              {

                 case 값1: 명령1

                      break

                 case 값2: 명령2

                      break

                 .......

                 default: 명령n

              }

 

switch문의 조건은 아래에 있는 case문의 값과 일대일로 일치해야 함.

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

switch문의 조건이 case의 '값1'과 일치하면 '명령1'을 실행하고, 다음에 있는 break문을 만나 switch문을 빠져나감.

만약 조건이case의 '값2'과 일치하면 '명령2'를 시행함.

그리고 만약 조건이 일치하는 case문이 없다면 마지막에 있는 default문을 실행함.

default문은 switch문의 마지막에 작성하며 여기에는 break문을 쓰지 않음.

 

※ switch문으로 조건 체크하기

사용자에게 1, 2, 3 중에서 값을 하나만 입력받아 session 변수에 저장하고,

switch문을 이용해 session값을 체크함. 이때 case문에서는 값만 사용하고 식을 사용할 수 없다는 점에 주의해야 함.

 

 

자리 배치도 만들기 1

 

① 프로그램의 흐름 생각하기

프로그램을 작성하기 전에 필요한 변수와 변수 이름, 연산식을 어떻게 작성할지 생각해야함.

ex. 입력할 값의 변수 : 입장객 수(memNum), 한 줄에 앉을 사람 수(colNum)

      계산할 값의 변수 : 필요한 줄의 개수(rowNum)

만약 입장객 수가 20명이고 1줄에 5명씩 앉아야 한다면 '20 / 5'를 계산하여 총 4줄이 필요함.

그리고 입장객 수가 23명이고 1줄에 5명씩 앉아야 한다면 '23 / 5'를 계산해야하는데 이때 결괏값은

몫은 4이지만, 나머지 값(3)이 있으므로 필요한 줄은 총 5줄임.

 

즉, 입장객 수를 한 줄에 앉을 사람 수로 나누었을 때

나머지가 없는 연산식과 나머지가 있는 연산식을 다음과 같이 생각할 수 있음.

ex. 나머지가 없을 때 : rowNum = memNum / colNum

      나머지가 있을 때 : rowNum = (memNum / colNum) + 1

 

② 자바스크립트로 코드 작성하고 결과 확인하기

앞서 생각한 것을 자바스크립트 코드로 작성함.

그런데 소스 코드르 보면 parseInt( )라는 낯선 함수가 보임.

이것은 memNum / colNum의 결괏값이 실수가 되었을 때 정수로 변환해 주는 함수임.

만약 입장객 56명이 1줄에 5명씩 앉아야 한다면 총 12줄이 필요하다는 것을 알 수 있음.

 

 

---

 

반복문 알아보기

 

① 반복문이 필요한 이유

 

※ 반복문 없이 1부터 5까지 숫자 더하기

반복문을 사용하지 않으면 다음과 같이 결괏값(sum)에 숫자를 계속해서 더해야 함.

 

 

하지만 1부터 100까지 숫자를 더해야한다면 소스를 100줄이나 작성해야 하므로 비효율적임.

이럴 때 사용하는 것이 바로 반복문임.

 

② for문 사용하기

for문은 값이 일정하게 커지면서 명령을 반복하여 실행할 때 사용함.

기본형 : for(초깃값; 조건; 증가식) {

                     실행할 명령

              }

//초깃값 : 카운터 변수를 초기화함. 초깃값은 0이나 1부터 시작함.

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

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

 

※ for문을 사용해 1부터 5까지 숫자 더하기

앞서 반복문 없이 숫자를 더한 것보다 소스 코드가 매우 간단해짐.

 

 

for문은 초깃값 → 조건 → 명령 → 증가식의 순서로 진행됨.

따라서 이 예제에서 입력한 for문이 실행되는 순서를 풀어 보면 다음과 같음.

(1) 카운터로 사용할 변수 i에 초깃값 1 지정

(2) i = 1 → i < 6 체크 → (조건 만족함) → sum += i 실행 → i++ 실행

(3) i = 2 → i < 6 체크 → (조건 만족함) → sum += i 실행 → i++ 실행

(4) i = 3 → i < 6 체크 → (조건 만족함) → sum += i 실행 → i++ 실행

(5) i = 4 → i < 6 체크 → (조건 만족함) → sum += i 실행 → i++ 실행

(6) i = 5 → i < 6 체크 → (조건 만족함) → sum += i 실행 → i++ 실행

(7) i = 6 → i < 6 체크 → (조건 만족하지 않음) → for문을 빠져나옴

 

※ for문을 사용해 1부터 1000까지 숫자 더하기

 

 

③ 중첩된 for문 사용하기

for문 안에 다른 for문을 넣어 사용할 수도 있는데 이것을 중첩된 for문이라고 함.

for문은 중첩해서 사용하는 경우가 많은데, 이 경우 안쪽 for문을 모두 실행한 후 바깥쪽 for문을 실행함.

 

※ for문 2개로 구구단 만들기

 

 

※ 구구단 스타일 시트 만들기

위 예제는 구구단 전체 내용을 단순히 세로로 길게 표시하므로 한눈에 보기 어렵기 때문에

각단을 <div> 태그로 묶고 가로로 나열하여 구구단을 보기 좋게 만듦.

 

 

※ 스타일 시트를 반영한 구구단

스타일 시트를 만들었다면 구구단 소스 앞뒤에 <div>와 </div> 태그를 각각 추가함.

 

 

④ while문과 do~while문 사용하기

while문은 조건이 참인 동안 명령을 반복함. 결국 조건이 거짓이라면 명령은 한 번도 실행하지 않을 수 있음.

{ }으로 블록을 만들어 여러 명령을 반복할 수 있음.

기본형 : while(조건)  {

                 실행할 명령

              }

 

while문과 달리 do~while문은 조건이 맨 뒤에 붙음.

그리고 do문은 일단 명령을 한 번 실행한 후 while문에서 조건을 체크함.

그러므로 조건이 거짓이라 하더라도 일단 명령은 최소한 한 번 실행됨.

기본형 : do {

                       실행할 명령

              }  while(조건)

 

※ while문으로 팩토리얼 만들기

입력값은 변수 n이며 1부터 n까지 곱한 결과를 보여줌.

 

 

⑤ break문과 continue문 사용하기

특정 조건에서 반복문을 멈추어야 하거나, 반복문 중간에서 앞으로 되돌아가야 할 경우가 있는데

이럴 때 break문과 continue문이 필요함.

 

(1) 멈추는 break문

ex. for문에서는 i값이 10이 되면 반복이 끝나고, shile문에서는 i값이 20이 되면 반복을 끝냄.

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

while(i < 20)  {실행할 명령}   //i값이 20이 되면 while문을 종료

 

하지만 종료 조건이 되기 전에 반복문을 빠져나와야 할 경우도 있는데, 이럴 때 break문을 사용함.

기본형 : break

 

※ break문으로 구구단을 3단까지만 표시하기

카운터 변숫값(i)이 3이면 종료하는 프로그램임.

 

 

(2) 건너뛰는 continue문

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

그리고 반복문의 맨 앞으로 되돌아가 다음 과정으로 넘어가도록함.

쉽게 말해 반복 과정을 한 차례 건너뛰게 하는 것임.

기본형 : continue

 

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

i % 2는 짝수인지 홀수인지를 체크함. i를 2로 나누어 나머지가 1이라면 i는 홀수이므로 i값을 계속 증가시키고,

i % 2가 0이라면 짝수이므로 sum 변수에 i값을 더함.

 

 

자리 배치도 만들기 2

 

① for문 구조 만들기

반복문을 사용해 좌석 번호를 그릴 수 있음.

한 줄은 colNum만큼 반복해서 만들고, 그 줄은 다시 rowNum만큼 반복해서 만들어야 하므로 중첩된 for문을 사용함.

먼저 실행해야 할 값이 안쪽 for문에 들어가므로 다음과 같이 for문을 사용할 수 있음.

 

 

② 좌석 번호 만들기

안쪽 for문에서 카운터 변수 j는 1부터 시작하는데 바깥쪽 for문의 카운터 변수 i는 0부터 시작함.

그 이유는 안쪽 for문은 1부터 memNum까지 입장객의 좌석 번호를 표기하기 때문임.

한 줄에 colNum만큼 좌석 번호를 표시하면 줄을 바꿔서 그다음 좌석 번호를 표시해야 함.

이렇게 하려면 좌석 번호를 나타내는 변수 seatNo를 다음과 같이 계산해야함.

 

 

③ 좌석 번호 나열하기

좌석 번호를 나열하기 위해서는 좌석 번호를 체크해서 전체 입장객 수보다 커지면 반복을 멈추고

그렇지 않다면 화면에 나열하면 됨.

한 줄에 colNum만큼 좌석 번호를 표시하면 줄을 바꿔야 하므로 바깥쪽 for문에 줄을 바꾸는 <br> 태그를 표시함.

 

 

④ 좌석 번호를 표로 만들기

나열된 좌석 번호를 표 형태로 바꾸기 위해서는 기존 소스에 <table> 관련 태그를 추가하면 됨.

 

 

⑤ 표 스타일 추가하고 결과 확인하기

HTML 파일 안에 CSS를 추가해서 표의 테두리와 패딩값을 조절함.

이후 웹 브라우저에서 HTML 파일을 열어 입장객 수와 한 줄에 앉을 사람 수를 입력하고 [확인]을 누르면

자리 배치도가 표 형태로 보기 좋게 바뀜.

 

 

---