Study Web Development

12월 17일

이전으로

JavaScript

1. 자바스크립트 기초

1-1 자바스크립트의 정의

클라이언트쪽에서 독립적으로 실행되는 프로그램을 작성하기 위한 스크립트 언어
최근에는 Node.js를 이용하여 자바스크립트로 서버 프로그래밍도 가능

1-2 자바스크립트의 특징

웹 문서(HTML)에 삽입해서 사용하는 스크립트 언어
- 웹 브라우저에서 웹 문서를 실행할 때 프로그램 코드가 해석됨
컴파일 과정을 거치지 않는 인터프리터 언어
- 자료형 조사를 철저히 하지 않고 대부분 자동으로 처리함
객체 정의 및 사용 가능
- 객체 지향적 특징을 모두 가지고 있지는 않음

1-3 자바스크립트의 장점 및 단점

장점
- HTML 파일 내에서 작성할 수 있으므로 개발 속도가 빠름
- 브라우저에서 번역되므로 운영체제의 제한을 받지 않음
단점
- 소스 코드가 노출됨(저작권 문제)
- 한정된 객체와 객체 함수 제공

1-4 자바스크립트(ECMA Script)의 표준화

크로스 브라우징 이슈 발생
자바스크립트의 파편화 방지

1-5 개발자 도구

Elements
Console
Source
Network
Application

2. 자바스크립트의 기본 구조

2-1 기본 구조

<script> 태그 안에 코드 명시
- 자바스크립트에서 문자열 표시할 때 "와 ' 모두 사용 가능

<script type="text/javascript">
	document.write('head에서 실행<br>');
</script>

2-2 자바스크립트 실행 위치

이벤트
- 사용자 또는 브라우저가 페이지를 조작했을 때 발생
- HTML 요소에 일어나는 것들
- 자바스크립트와 HTML의 상호작용은 이벤트를 통해 제어됨
- 자바스크립트가 HTML 페이지에 사용되면, 자바스크립트는 이벤트들에 반응할 수 있음

새 다이나믹 웹 프로젝트 javaScript를 생성하고 src/main/webapp에 새 폴더 ch01-basic 생성 후 새 HTML 파일 s01_basic.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실행 위치</title>
<script type="text/javascript">
	document.write("head에서 실행<br>"); /* document.write()는 인자를 HTML에 출력; 줄바꿈하려면 <br>을 인자에 포함해야 함 */
</script>
</head>
<body>
<script type="text/javascript">
	document.write('body에서 실행'); /* document.write()는 <head>에 작성하는 것이 원칙이지만, <body>에 작성해도 작동함; 웹 페이지의 모든 내용이 로딩된 후에 (버튼 클릭 등으로) document.write()를 실행할 경우 먼저 로딩된 데이터를 모두 지운 후에 인자를 출력하므로, 문법 학습 이외의 용도로 사용할 때는 주의해야 함 */
</script>
</body>
</html>

새 JavaScript 파일 script.js 생성

document.write('script.js 파일에서 호출');

새 HTML 파일 s02_basic.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실행 코드를 외부 파일에 명시하고 링크하기</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>

</body>
</html>

새 HTML 파일 s03_basic.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>태그에 내장(inline)</title>
</head>
<body>
	<input type="button" value="확인" onclick="alert('태그에 자바스크립트 내장');"> <!-- 버튼을 누르면 이벤트가 발생; 이벤트 속성에 이벤트 발생시에 실행할 자바스크립트 코드를 작성; alert()는 경고창을 띄워 줌 -->
	<input type="button" value="지우기" onclick="document.write('페이지 로딩 후 document.write()를 사용하면 로딩된 내용이 모두 지워짐!');"> <!-- inline 방식으로 자바스크립트를 사용하는 것은 권장되지 않지만, 간혹 필요한 경우가 있음 -->
</body>
</html>

2-4 자바스크립트 주석

새 HTML 파일 s04_write.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>주석 및 출력</title>
<script type="text/javascript">
	// 주석은 브라우저에서 사용자가 확인 가능하므로, 코드의 일반적인 흐름 정도만 명시하고, 개인 정보 등 민감한 내용은 제외해야 함
 	// 한 줄 주석
 	/* 
 	여러 줄 주석
 	*/
 	// document.write('주석 처리');
	/*
	document.write('여러 줄');
	document.write('주석 처리');
	*/
	
	// 문자(문자열) 표시
	document.write("오늘은 금요일!<br>") // 자바스크립트는 세미콜론을 생략해도 브라우저에서 줄바꿈을 인식; 단, inline 방식 등 특정한 경우에는 세미콜론이 없으면 에러
	document.write('내일은 토요일!<br>')
	
	// 일반 문자로 "를 사용할 경우
	document.write('오늘은 "비"가 옵니다.<br>');
	document.write("오늘은 \"비\"가 옵니다.<br>");
	
	// 일반 문자로 '를 사용할 경우
	document.write("내일은 '눈'이 올 예정입니다.<br>");
	document.write('내일은 \'눈\'이 올 예정입니다.');
</script>
</head>
<body>

</body>
</html>

2-3 자바스크립트 출력

새 HTML 파일 s05_write.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>숫자, 논리 데이터 표시</title>
<script type="text/javascript">
	// 정수
	document.write(567);
	document.write('<br>');
	
	// 실수
	document.write(454.343);
	document.write('<br>');
	
	// 논리 데이터
	document.write(true);
</script>
</head>
<body>

</body>
</html>

새 HTML 파일 s06_log.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>console.log</title>
<script type="text/javascript">
	console.log('내용 출력');
	console.log('--------');
	console.log('여기는 서울');
</script>
</head>
<body>
브라우저의 [검사]를 실행해서 콘솔을 보세요!
</body>
</html>

3. 변수와 자료형

3-1 변수명 지정 규칙

새 폴더 ch02-variable 생성하고 새 HTML 파일 s01_variable.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변수</title>
<script type="text/javascript">
/* 
 변수명의 정의
 1. 키워드(예약어)를 사용하면 안 됨
 2. 숫자로 시작하면 안 됨
 3. 특수문자는 _와 $만 허용
 4. 공백 문자를 포함할 수 없음
 
 식별자를 잘못 지정한 예
 break (키워드)
 10alpha (숫자로 시작)
 #num (특수문자 사용)
 has space (공백 사용)
 */
	// 변수의 선언
	// 자료형은 데이터가 대입될 때 인식되어 내부적으로 결정되며, 변수의 자료형을 지정하는 키워드(int 등)가 별도로 존재하지 않음
	var num;
	
	// 변수에 값을 할당
	num = 123;
	
	// 출력
	document.write('num = ' + num + '<br>'); // 연결 연산자 +로 문자열과 숫자를 연결

	// 변수를 선언하는 동시에 초기화
	var num2 = 1234;

	document.write('num2 = ' + num2);
	document.write('<br>');

	// 변수를 선언하지 않고 출력
	// alert(num3); // 에러 발생; 콘솔에서 에러의 원인 및 발생 위치 확인 가능
	
	// 변수 선언 후 값을 할당하지 않고 출력
	var num4;

	document.write('num4 = ' + num4); // 에러 발생하지 않고 num4는 undefined라고 출력됨
	document.write('<br>');
	
	// 두 개 이상의 변수를 한 번에 선언
	var a, b;

	a = 10;
	b = 5;
	
	document.write(a + ' + ' + b + ' = ' + (a + b)); // 연결 연산자에 의해 덧셈을 방해받지 않으려면 최우선 연산자 소괄호를 사용
	document.write('<br>');
	
	// 두 개 이상의 변수를 한 번에 선언하고 초기화
	var c = 10, d = 3.5;
	
	document.write(c + ' + ' + d + ' = ' + (c + d)); // 자바스크립트에서는 숫자 자료형이 정수, 실수를 구분하지 않고 number로 되어 있음
	document.write('<br>');
	
	// 변수명에 한글 사용하기; 권장되지는 않음
	var 번호 = 3;
	document.write('번호 = ' + 번호);
</script>
</head>
<body>

</body>
</html>

새 HTML 파일 s02_variable.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변수</title>
<script type="text/javascript">
	// 변수 선언 및 초기화
	var food = '피자';
	document.write(food + '<br>');
	
	food = '파스타'; // 데이터 변경
	document.write(food + '<br>');
	document.write('--------<br>');
	
	// 변수명이 같게 선언되어도 에러가 발생하지 않음; 이전에 할당한 값(=파스타)을 잃어버리게 되므로 주의해야 함
	var food = '라멘';
	document.write(food + '<br>')
</script>
</head>
<body>

</body>
</html>

3-2 자료형(Data Type)

새 HTML 파일 s03_type.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자료형</title>
<script type="text/javascript">
	// 변수 선언 및 초기화
	var stringVar = '서울'; // 문자열
	var numberVar = 273; // 숫자
	var booleanVar = true; // boolean
	var functionVar = function() {}; // 함수
	var objectVar = {}; // 객체

	// typeof 변수명 : 해당 변수에 저장된 값의 자료형을 알아내는 연산자
	document.write('stringVar : ' + typeof stringVar + '<br>');
	document.write('numberVar : ' + typeof numberVar + '<br>');
	document.write('booleanVar : ' + typeof booleanVar + '<br>');
	document.write('functionVar : ' + typeof functionVar + '<br>');
	document.write('objectVar : ' + typeof objectVar);
</script>
</head>
<body>

</body>
</html>

3-3 강제로 자료형 변환시키기

새 HTML 파일 s04_cast.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>형변환</title>
<script type="text/javascript">
	var input = prompt('숫자를 입력하세요!', '숫자'); // prompt()의 첫 번째 인자는 내용이며, 두 번째 인자는 입력 칸에 미리 보여지는 값임; 미리 보여지는 값은 힌트와 달리 사용자가 직접 지워야 함; prompt()는 문법 학습에만 사용하고, 실제로는 form 태그를 이용함

	document.write(typeof(input) + ' : ' + input); // 최우선 연산자 소괄호 사용시 typeof 연산자 다음에 공백 생략 가능
	document.write('<br>');
	
	document.write(input * 10); // 2가지 기능을 가진 + 연산자 외에 다른 연산자의 경우, 자동적으로 형변환됨
	document.write('<br>');
	
	document.write(input + 10); // prompt()는 입력받은 값을 string으로 반환하므로, 숫자를 입력해도 덧셈이 수행되지 않고 문자열로 연결됨
	document.write('<br>--------<br>')
	
	// 형변환
	// 문자열을 숫자로 변환
	var numberInput = Number(input); // string을 number로
	document.write(typeof(numberInput) + ' : ' + numberInput);
	document.write('<br>');
	
	document.write(numberInput + 10); // 숫자끼리의 덧셈이 수행됨
</script>
</head>
<body>

</body>
</html>

4. 연산자

4-1 산술 연산자

새 폴더 ch03-operator 생성하고 새 HTML 문서 s01_operator.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>산술 연산자</title>
<script type="text/javascript">
	document.write('====산술 연산자====<br>');
	var a = 5, b = 3, result;
	
	result = a + b;
	document.write('a + b = ' + result + '<br>');

	result = a - b;
	document.write('a - b = ' + result + '<br>');
	
	result = a * b;
	document.write('a * b = ' + result + '<br>');
	
	result = a / b; // 자료형에서 정수, 실수를 구분하지 않기 때문에 정수끼리의 나눗셈 결과도 소수점 이하 자리를 가질 수 있음
	document.write('a / b = ' + result + '<br>');
	
	result = a % b;
	document.write('a % b = ' + result);
</script>
</head>
<body>

</body>
</html>

4-6 증감 연산자

새 HTML 파일 s02_operator.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>증감 연산자</title>
<script type="text/javascript">
	document.write('====증감 연산자====<br>');
	var number = 10;
	// 증가 연산자
	document.write('number++ : ');
	document.write(number++); // 10을 읽어와 출력하고 메모리의 값을 1 증가시켜 11로 변경
	document.write('<br>++number : ');
	document.write(++number); // 메모리의 값을 1 증가시켜 12로 변경하고 12를 읽어와 출력
	
	var number2 = 5;
	// 감소 연산자
	document.write('<br>number2-- : ');
	document.write(number2--); // 5를 읽어와 출력하고 메모리의 값을 1 감소시켜 4로 변경
	document.write('<br>--number2 : ');
	document.write(--number2); // 메모리의 값을 1 감소시켜 3으로 변경하고 3을 읽어와 출력
</script>
</head>
<body>

</body>
</html>

4-2 대입 연산자

새 HTML 파일 s03_operator.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>대입 연산자</title>
<script type="text/javascript">
	document.write('====대입 연산자====<br>');
	var a = 20, b = 10;
	
	a += b; // a = a + b;
	document.write('a += b : ' + a + '<br>');
	
	a -= b; // a = a - b;
	document.write('a -= b : ' + a + '<br>');
	
	a *= b; // a = a * b;
	document.write('a *= b : ' + a +'<br>');
	
	a /= b; // a = a / b;
	document.write('a /= b : ' + a +'<br>');
	
	a %= b; // a = a % b;
	document.write('a %= b : ' + a);	
</script>
</head>
<body>

</body>
</html>

4-3 비교(관계) 연산자

새 HTML 파일 s04_operator.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비교 연산자</title>
<script type="text/javascript">
	document.write('====비교 연산자====<br>');
	
	/* 
	자바스크립트에서 비교 연산은 기본적으로 자동 형변환 후 값만 비교하며, 타입까지 비교하기 위한 연산자가 별도로 존재함
	x === y : x와 y의 값과 타입이 같으면 true
	x !== y : x와 y의 값 또는 타입이 다르면 true
	*/
	var a = 20, b = '20', result;
	
	result = a == b; // 값만 비교
	document.write('a == b : ' + result + '<br>');
	
	result = a != b; // 값만 비교
	document.write('a != b : ' + result + '<br>');
	
	document.write('--------<br>')
	
	result = a === b; // 값과 타입 모두 비교
	document.write('a === b : ' + result + '<br>');
	
	result = a !== b; // 값과 타입 모두 비교
	document.write('a !== b : ' + result + '<br>');
	
	document.write('--------<br>');
	
	result = a > b; // 값만 비교
	document.write('a > b : ' + result + '<br>');
	
	result = a <= b; // 값만 비교
	document.write('a <= b : ' + result + '<br>');
</script>
</head>
<body>

</body>
</html>

4-4 논리 연산자

새 HTML 파일 s05_operator.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>논리 연산자</title>
<script type="text/javascript">
	document.write('====논리 연산자====<br>');
	
	var a = true && false; // 논리곱
	document.write('true && false : ' + a + '<br>');

	var b = true || false; // 논리합
	document.write('true || false : ' + b + '<br>');
	
	var c = !true; // 논리부정
	document.write('!true : ' + c + '<br>');
	
	document.write('--------<br>');
	
	var d = 1, e = 0, f; // 자바스크립트에서는 1을 true, 0을 false로 간주하여 논리 연산을 수행할 수 있음
	f = d && e ; // 논리곱; 결과값은 number로 반환됨
	document.write('d && e : ' + f + '<br>');
	
	f = d || e; // 논리합; 결과값은 number로 반환됨
	document.write('d || e : ' + f + '<br>');

	f = !d; // 논리부정; 결과값은 boolean으로 반환됨
	document.write('!d : ' + f);
</script>
</head>
<body>

</body>
</html>

4-5 조건(삼항) 연산자

새 HTML 파일 s06_operator.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>삼항(조건) 연산자</title>
<script type="text/javascript">
	var input = prompt('숫자 입력', '');
	
	// 삼항 연산자
	// 조건 ? 참일 때 반환할 값 : 거짓일 때 반환할 값
	var result = (input > 0) ? '양수입니다.' : '양수가 아닙니다.';
	document.write(result);
</script>
</head>
<body>

</body>
</html>

새 HTML 파일 s07_operator.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>삼항(조건) 연산자</title>
<script type="text/javascript">
	var temp1 = 5, temp2 = 10;
	var max, min;
	
	// 두 숫자의 크기를 비교하여 최댓값은 max에, 최솟값은 min에 저장
	// 조건 ? (참일 때 작업1, 작업2, ...) : (거짓일 때 작업, ...)
	temp1 >= temp2 ? (max = temp1, min = temp2) : (max = temp2, min = temp1);
	
	document.write('최댓값 : ' + max + '<br>');
	document.write('최솟값 : ' + min);
</script>
</head>
<body>

</body>
</html>

새 HTML 파일 s08_practice.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실습</title>
<script type="text/javascript">
/*
[문제]
prompt를 이용해서 국어(korean), 영어(english), 수학(math)을 입력받아서 총점(sum), 평균(avg)을 구해서 출력하시오.

[출력 예시]
국어 : 90
영어 : 90
수학 : 90
총점 : 270
평균 : 90
*/
	// 입력
	var korean = Number(prompt('국어 점수를 입력하세요', ''));
	var english = Number(prompt('영어 점수를 입력하세요', ''));
	var math = Number(prompt('수학 점수를 입력하세요', ''));
	// 총점, 평균 구하기
	var sum = korean + english + math;
	var avg = sum / 3;
	// 출력
	document.write('국어 : ' + korean + '<br>');
	document.write('영어 : ' + english + '<br>');
	document.write('수학 : ' + math + '<br>');
	document.write('총점 : ' + sum + '<br>');
	document.write('평균 : ' + avg);
</script>
</head>
<body>

</body>
</html>

새 HTML 파일 s09_practice.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실습</title>
<script type="text/javascript">
/* 
[문제]
534자루의 연필을 30명의 학생들에게 똑같은 개수로 나누어 줄 때 학생당 몇 개를 가질 수 있고, 최종적으로 몇 개가 남는지를 구하시오.
*/
	var pencils = 534;
	var students = 30;
	document.write('학생 수 : ' + students + '<br>');
	document.write('연필 수 : ' + pencils + '<br>');
	
	// 학생 한 명이 가지는 연필 수를 구하고 소수점 이하 자리를 절사
	var quantity = Math.floor(pencils / students);
	document.write('학생 한 명이 가지는 연필 수 : ' + quantity + '<br>');
	
	// 남은 연필 수 구하기
	var rest = pencils % students;
	document.write('남은 연필 수 : ' + rest);
</script>
</head>
<body>

</body>
</html>

5. 제어문

5-1 조건문

if

새 폴더 ch04-operation 생성하고 새 HTML 파일 s01_if.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>if</title>
<script type="text/javascript">
	var age = prompt('당신의 나이는?', '');
	if(age>=20) {
		document.write('당신은 성인입니다.');
	}
	else {
		document.write('당신은 미성년자입니다.');
	}
</script>
</head>
<body>

</body>
</html>

새 HTML 파일 s02_if.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>if</title>
<script type="text/javascript">
	var score = prompt('당신의 점수를 입력하세요', '');
	var grade;
	
	if(score>=90 && score<=100) {
		grade = 'A';
	}
	else if(score>=80 && score<90) {
		grade = 'B';
	}
	else if(score>=70 && score<80) {
		grade = 'C';
	}
	else if(score>=60 && score<70) {
		grade = 'D';
	}
	else if(score<60 && score>=0) {
		grade = 'F';
	}
	else {
		grade = '?';
	}
	
	document.write('점수 : ' + score + '<br>');
	document.write('등급 : ' + grade);
</script>
</head>
<body>

</body>
</html>

switch

새 HTML 파일 s03_switch.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>switch</title>
<script type="text/javascript">
	var score = prompt('당신의 점수를 입력하세요!', '');
	var grade;
	
	if(score < 0 || score > 100) {
		document.write('잘못 입력했습니다!');
	}
	else {
		switch(Math.floor(score/10)) { // Math.floor()를 이용하여 소수점 이하 자리 절사
		case 10:
		case 9: grade = 'A'; break;
		case 8: grade = 'B'; break;
		case 7: grade = 'C'; break;
		case 6: grade = 'D'; break;
		default: grade = 'F';
		}
		
		document.write('점수 : ' + score + '<br>');
		document.write('등급 : ' + grade);
	}
</script>
</head>
<body>

</body>
</html>

5-2 반복문

for

새 HTML 파일 s04_for.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>for</title>
<script type="text/javascript">
	for(var i=1;i<=5;i++) { // 초기식;조건식;증감식
		document.write(i + '번째 반복 : ' + i + '<br>');
	}
</script>
</head>
<body>

</body>
</html>

새 HTML 파일 s05_for.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>for</title>
<script type="text/javascript">
	var total = 0;
	for(var i=1;i<=100;i++) {
		total += i; // 누적
	}	
	document.write('1부터 100까지의 합 : ' + total);
</script>
</head>
<body>

</body>
</html>

새 HTML 파일 s06_for.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>for</title>
<script type="text/javascript">
	var dan = prompt('구구단의 단을 입력하세요', '');
	
	document.write(dan + '단<br>');
	document.write('--------<br>');
	
	for(var i=1;i<=9;i++) {
		document.write(dan + ' * ' + i + ' = ' + dan * i + '<br>');
	}
</script>
</head>
<body>

</body>
</html>

새 HTML 파일 s07_for.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>for</title>
<style type="text/css">
	table {
		border-collapse: collapse;
	}
	tbody { /* flex를 이용해 <tbody>의 자식 요소인 <tr>들을 가로로 배치 */
		display: flex;
		flex-direction: row;
	}
	tr { /* flex를 이용해 <tr>의 자식 요소인 <td>들을 세로로 배치 */
		display: flex;
		flex-direction: column;
	}
</style>
</head>
<body>
<h1>구구단</h1>
<script>
	document.write('<table border="1">');
	for(var dan=2;dan<=9;dan++) { // 단
		document.write('<tr>')
		for(var i=1;i<=9;i++) { // 곱해지는 수
			document.write('<td>');
			document.write(dan + ' * ' + i + ' = ' + dan * i);
			document.write('</td>');
		}
		document.write('</tr>')
	}
	document.write('</table>');
</script>
</body>
</html>

while

새 HTML 파일 s08_while.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>while</title>
<script type="text/javascript">
	var i = 1; // 초기식
	var sum = 0;	
	while(i<=100) { // 조건식
		sum += i; // 누적
		i++; // 증감식
	}
	document.write('1부터 100까지의 합 : ' + sum);
</script>
</head>
<body>

</body>
</html>

do~while

새 HTML 파일 s09_doWhile.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>do~while</title>
<script type="text/javascript">
	// 변수 선언 및 초기화
	var value = 0;
	
	// while
	while(value++ < 5) { // 선비교
		document.write(value + '번째 반복<br>'); // 후수행
	}
	
	document.write('--------<br>');
	
	// 변수 초기화
	value = 0;
	
	// do~while
	do { // 선수행
		document.write(value + '번째 반복<br>');
	} while(value++ < 5); // 후비교	
</script>
</head>
<body>

</body>
</html>

5-3 break문

새 HTML 파일 s10_break.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>break</title>
<script type="text/javascript">
	// 반복문
	for(var i=1;i<=10;i++) {
		// 조건문
		if(i == 5) {
			break; // 특정 조건 만족시 반복문 탈출
		}
		
		// 출력
		document.write(i + '<br>');
	}
</script>
</head>
<body>

</body>
</html>

새 HTML 파일 s11_break.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>break</title>
<script type="text/javascript">
	for(var i=0;i<5;i++) {
		for(var j=0;j<5;j++) {
			if(j == 3) break; // 다중 반복문에서 break를 사용하면 break가 포함된 바로 그 반복문만 탈출
			document.write('i값 : ' + i + ', j값 : ' + j + '<br>');
		}
	}
	
	document.write('--------<br>')
	
	outer_loop: // 바깥쪽 반복문에 label을 지정
	for(var i=0;i<5;i++) {
		for(var j=0;j<5;j++) {
			if(j == 3) break outer_loop; // 다중 반복문에서 label을 사용하면 안쪽 반복문에서 break해도 전체 반복문을 탈출 가능
			document.write('i값 : ' + i + ', j값 : ' + j + '<br>');
		}
	}
</script>
</head>
<body>

</body>
</html>

5-4 continue문

새 HTML 파일 s12_continue.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>continue</title>
<script type="text/javascript">
	for(var i=1;i<=10;i++) {
		if(i%2==1) {
			continue; // 홀수이면 현재 반복을 중지하고 다음 반복을 수행
		}
		
		document.write(i + '<br>');
	}
</script>
</head>
<body>

</body>
</html>

다음으로