Study Web Development

12월 21일

JavaScript

6. 함수

함수의 역할

6-8 내장 함수

escape(uri)
- 적절한 정도로 인코딩함
unescape(uri)
- 적절한 정도로 디코딩함
encodeURI(uri)
- 최소한의 문자만 인코딩함
decodeURI(uri)
- 최소한의 문자만 디코딩함
encodeURIComponent(uri)
- 대부분의 문자를 인코딩함
decodeURIComponent(uri)
- 대부분의 문자를 디코딩함
eval(string)
- 문자열을 자바스크립트 코드로 실행

새 HTML 파일 s04_encoding.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>encoding 관련 함수</title>
<script type="text/javascript">
	// 인코딩할 URL
	var URI = 'http://www.test1234.co.kr?test=한글입니다.';
	
	// 출력용 변수 선언 및 초기화
	var output = '';
	
	// 인코딩
	output += '* escape()<br>';
	output += escape(URI) + '<br><br>';
	
	output += '* encodeURI()<br>';
	output += encodeURI(URI) + '<br><br>';
	
	output += '* encodeURIComponent()<br>';
	output += encodeURIComponent(URI) + '<br><br>';
	
	// 출력
	document.write(output);
	
	// 디코딩 및 출력
	var urix = escape(URI);
	document.write(unescape(urix));
</script>
</head>
<body>

</body>
</html>

새 HTML 파일 s05_eval.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>eval</title>
<script type="text/javascript">
	var willEval = '';
	willEval += 'var number = 10;'; // 세미콜론을 생략하면 eval시 에러
	willEval += 'alert(number)'; // 단, 마지막 행은 세미콜론 생략 가능
	
	// 문자열 출력
	document.write(willEval);
	
	// eval 함수를 이용해서 문자열로 되어 있는 자바스크립트 코드를 실행
	eval(willEval);
	alert(number + '!'); // eval로 생성한 전역 변수를 호출
</script>
</head>
<body>

</body>
</html>

7. 배열

가변 길이
- 자바의 리스트와 유사
객체
for in 반복문
- 객체의 열거 가능한 non-Symbol 속성을 임의의 순서로 반복
  - 인덱스의 순서가 중요한 배열의 경우 for of 반복문이나 forEach() 메서드 사용을 권장

배열의 생성

새 폴더 ch07-array 생성하고 새 HTML 파일 s01_basic.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열</title>
<script type="text/javascript">
	// 배열 선언 및 초기화
	var array = ['포도', '사과', '딸기', '망고']; // 인덱스는 0부터 시작, length = 4인 배열
	
	// 배열의 요소 출력
	document.write(array[0] + '<br>');
	document.write(array[1] + '<br>');
	document.write(array[2] + '<br>');
	document.write(array[3] + '<br>');
	
	document.write('--------<br>')

	// 반복문을 이용한 배열의 요소 출력
	for(let i=0;i<array.length;i++) {
		document.write('array[' + i + ']: ' + array[i] + '<br>');
	}
</script>
</head>
<body>

</body>
</html>

새 HTML 파일 s02_basic.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>for in 반복문</title>
<script type="text/javascript">
	// 배열 선언 및 초기화
	var array = ['서울', '인천', '광주', '부산'];
	
	// for in 반복문을 이용한 배열의 요소 출력
	for (let i in array) { // 배열 array의 인덱스를 변수 i에 저장
		document.write(array[i] + '<br>');
	}
</script>
</head>
<body>

</body>
</html>

요소의 생성

새 HTML 파일 s03_insert.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열의 요소 추가</title>
<script type="text/javascript">
	// 배열 생성; 자바스크립트에서도 배열은 객체로 취급됨
	var array = ['포도', '사과'];
	
	// 배열명을 호출하면 배열의 요소를 ,로 구분해서 문자열로 반환
	document.write(array + '<br>');
	
	// 인덱스 2에 요소를 대입해서 요소의 수가 늘어남
	array[2] = '딸기';
	document.write(array + '<br>');
	
	// 인덱스 10에 요소를 대입하면 요소의 수가 11이 됨
	array[10] = '망고';
	document.write(array + ' / array.length : ' + array.length + '<br>');
	
	// 건너뛴 요소에 접근하면 undefined 값이 반환
	document.write(array[4]);
</script>
</head>
<body>

</body>
</html>

요소의 제거

delete
splice()

새 HTML 파일 s04_delete.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열의 요소 삭제</title>
<script type="text/javascript">
	// 배열 생성
	var array = ['one', 'two', 'three'];
	
	// 마지막 데이터 제거
	array.length = 2;
	document.write(array + '<br>'); // 배열 요소의 목록 출력
	
	// 배열의 길이 증가
	array.length = 4
	document.write(array + '<br>');
	
	document.write('--------<br>');
	
	// 배열 생성
	var array2 = ['포도', '사과', '귤'];
	
	// delete 키워드 : 지정한 인덱스를 통해 데이터를 제거하고 빈 요소를 남김
	delete array2[1];
	document.write(array2 + ' / array2.length : ' + array2.length + '<br>');
	document.write(array2[1] + '<br>'); // 빈 요소에 접근하면 undefined 출력
	
	document.write('--------<br>');
	
	// 배열 생성
	var array3 = ['한국', '미국', '영국', '독일'];
	
	// splice() 메서드 : 지정한 인덱스에서부터 지정한 수만큼의 요소를 제거
	array3.splice(2, 1); // 인덱스 2에 해당하는 요소부터 1개의 요소를 제거
	document.write(array3 + ' / array3.length : ' + array3.length + '<br>');
	document.write(array3[2]); // 인덱스 변동 발생
</script>
</head>
<body>

</body>
</html>

메서드

새 HTML 파일 s05_method.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열의 메서드 사용</title>
<script type="text/javascript">
	// 배열의 생성
	var array = ['파도', '하늘', '도시', '구름'];
	
	// 배열 요소의 목록 출력
	document.write(array + '<br>');
	
	// join() 메서드 : ,를 구분자로 하는 배열 요소의 목록을 문자열로 반환; 인자를 전달하여 구분자 변경 가능
	document.write('array.join() : ' + array.join() + '<br>');
	document.write('array.join("-") : ' + array.join('-') + '<br>');
	
	// slice() 메서드 : 지정한 인덱스부터 마지막 인덱스까지의 데이터를 추출해서 새로운 배열로 반환
	document.write('array.slice(2) : ' + array.slice(2) + '<br>');
	// 시작 인덱스부터 끝 인덱스 전까지
	document.write('array.slice(1, 3) : ' + array.slice(1, 3) + '<br>');
	
	// concat() 메서드 : 전달되는 인자를 추가해서 새로운 배열 생성
	document.write('array.concat("서울", "인천") : ' + array.concat('서울', '인천') + '<br>');
	// 인자로 배열을 전달
	document.write('array.concat(["한국", "영국"]) : ' + array.concat(['한국', '영국']) + '<br>');
	document.write('array.concat(["서울", "인천"], ["한국", "영국"]) : ' + array.concat(['서울', '인천'], ['한국', '영국']) + '<br>');
</script>
</head>
<body>

</body>
</html>

새 HTML 파일 s06_push.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메서드를 이용한 배열의 요소 추가/삭제</title>
<script type="text/javascript">
	/* 
	push() 메서드 : 요소의 삽입
	pop() 메서드 : 요소의 삭제
	*/
	// 배열 생성
	var array = []; // 빈 배열; length = 0
	
	// 요소의 삽입
	array.push(10, 20, 30); // 여러 개의 요소를 ,로 열거하여 한 번에 삽입 가능
	document.write(array + '<br>');
	array.push(40);
	document.write(array + '<br>');
	
	// 요소의 삭제
	array.pop(); // 요소를 끝에서부터 하나씩 제거
	document.write(array + '<br>');
	array.pop();
	document.write(array + '<br>');	
</script>
</head>
<body>

</body>
</html>

새 HTML 파일 s07_practice.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실습</title>
<script type="text/javascript">
/* 
[실습 문제]
57, 88, 100, 94, 23, 33을 요소로 갖는 배열 score를 생성한 후 최댓값 max, 최솟값 min을 구하시오.
*/
	var score = [57, 88, 100, 94, 23, 33];
	var max = score[0], min = score[0];
	for(let i=0;i<score.length;i++) {
		if(score[i]>max) max = score[i];
		if(score[i]<min) min = score[i];
	}
	document.write('최댓값 : ' + max + ', 최솟값 : ' + 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로 입력받아서 배열 score에 담고 총점 sum과 평균 avg를 구하여 출력하시오.
*/
	var score = [];
	var sum = 0, avg = 0;
	let n;
	
	// 과목 수 입력 받기
	do {
		n = Number(prompt('과목 수를 입력하세요', '')); // 아무것도 입력하지 않는 경우 Number('')가 되어 0을 반환
	} while(n == '' || Number.isNaN(n)); // 0을 ''와 비교하면 자동 형변환되어 true를 반환함
	
	
	// 배열에 데이터 삽입
	for(let i=0;i<n;i++) {
		score.push(checkScore((i + 1) + '번째 과목의 점수를 입력하세요'));
	}
	
	// 총점 구하기
	for(let i=0;i<score.length;i++) {
		sum += score[i];
	}
	
	// 평균 구하기
	avg = sum / score.length;
	
	// 출력
	document.write('성적 : ' + score.join(', ') + '<br>');
	document.write('총점 : ' + sum + ', 평균 : ' + avg);
	
	// 입력받는 값 검사
	function checkScore(guide) {
		let sc;
		while(true) {
			sc = prompt(guide, '');
			if(sc === '') continue; // 빈 문자열을 입력받은 경우 경고 메시지 없이 다시 입력 강요
			if(sc>=0 && sc<=100) return Number(sc); // 0~100 사이의 값을 입력받은 경우 string을 number로 형변환하여 반환
			alert('성적은 0부터 100 사이의 값이어야 합니다!'); // 그 외의 경우 경고 메시지 출력
		}
	}
</script>
</head>
<body>

</body>
</html>

8. 객체 생성

8-1 객체 생성하기

속성
- key(=property)
- value

새 폴더 ch08-object 생성하고 새 HTML 파일 s01_basic.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체 생성</title>
<script type="text/javascript">
	// 객체 생성
	var product = {
			// 속성(key:value)
			제품명:'로즈골드Pro',
			제품번호:'A1001',
			기능:'멀티윈도우',
			원산지:'대한민국',
			가격:1000,
			업데이트지원:true	
	};
	
	// 객체의 속성 호출
	document.write(product.제품명 + '<br>');
	document.write(product.기능 + '<br>');
	
	// 객체명['key']
	document.write(product['원산지'] + '<br>');
	document.write(product['가격']);
</script>
</head>
<body>

</body>
</html>

새 HTML 파일 s02_basic.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>반복문을 이용한 객체의 속성 읽기</title>
<script type="text/javascript">
	var product = {
			// 속성(key:value)
			name:'eclipse',
			price:'10,000원',
			language:'한국어',
			supportOS:'win10',
			subscription:true
	};
	
	// for in 반복문을 이용해서 객체의 속성 읽기
	for(var key in product) { // 객체 product의 key값을 변수 key에 string으로 저장
		document.write(key + ' : ' + product[key] + '<br>');
	}
</script>
</head>
<body>

</body>
</html>

새 HTML 파일 s03_method.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체의 속성과 메서드 사용</title>
<script type="text/javascript">
	var name = '밤돌'; // 전역 변수

	// 객체 생성
	var person = {
			// 속성 지정
			name:'너굴',
			// 메서드 지정; 속성의 value에 익명 함수를 명시
			eat:function(food) {
				// var name = '콩돌'; // 지역 변수
				
				// this : 메서드 내에서 자기 자신이 가지고 있는 속성을 호출하고 싶을 때, 객체 내부에서 객체를 참조할 때 사용
				alert(this.name + '이/가 ' + food + '을/를 먹습니다.');
				// this를 명시하지 않고 호출하면 메서드 안에서 지역 변수를 찾고, 지역 변수가 없으면 전역 변수를 찾음
				alert(name + '이/가 ' + food + '을/를 먹습니다.');
			}
	};
	
	// 객체의 속성 호출
	document.write(person.name);
	// 객체의 메서드 호출
	person.eat('초코');
</script>
</head>
<body>

</body>
</html>

새 HTML 파일 s04_method.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체의 속성과 메서드</title>
<script type="text/javascript">
	var mySon = {
			name:'너굴',
			age:7,
			play:function() {
				return '게임';
			},
			getInfo:function() {
				document.write(this.name + '은/는 ' + this.age + '살이고 ' + this.play() + '을/를 좋아합니다.')
			}
	};
	
	document.write('이름 : ' + mySon.name + '<br>');
	document.write('나이 : ' + mySon.age + '살<br>');
	document.write('취미 : ' + mySon.play() + '<br>');
	
	mySon.getInfo();
</script>
</head>
<body>

</body>
</html>

8-3 동적 객체 생성과 추가

새 HTML 파일 s05_insert.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>빈 객체에 속성 및 메서드 추가</title>
<script type="text/javascript">
	var student = {}; // 빈 객체
	
	// 객체에 속성 추가
	student.이름 = '너굴';
	student.취미 = '악기';
	student.특기 = '프로그래밍';
	student.장래희망 = '프로그래머';
	
	// in 키워드를 이용해서 객체 내의 속성 존재 여부 체크; 'key' in 객체
	document.write(('특기' in student) + '<br>'); // 소괄호로 묶지 않으면 에러
	document.write(student.특기 + '<br>');
	
	document.write('--------<br>');
	
	// 객체에 메서드 추가
	student.play = function() {
		document.write('피아노를 연주합니다.');
	};
	
	// for in 반복문을 이용해서 객체의 속성 및 메서드 출력
	for(let key in student) {
		document.write(key + ' : ' + student[key] + '<br>');
	};
</script>
</head>
<body>

</body>
</html>

새 HTML 파일 s06_toString.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>toString</title>
<script type="text/javascript">
	var student = {};
	
	document.write(student + '<br>'); // 객체명 출력시 자동적으로 toString() 호출; object는 자료형, Object는 student가 상속받은 최상위 객체
	document.write(student.toString() + '<br>');

	document.write('--------<br>');
	
	// 객체에 속성 추가
	student.이름 = '너굴';
	student.직업 = '과학자';
	
	// 객체에 메서드 추가
	student.toString = function() {
		let msg = '';
		for(let key in student) {
			if(key != 'toString') { // 자기 자신은 출력 대상에서 제외
				msg += key + ':' + student[key] + '<br>';
			}
		}
		return msg; // Object의 toString() 메서드와 같은 형식으로 만들기 위해 문자열을 반환
	};
	
	document.write(student.toString());
	
	document.write('--------<br>')
	
	document.write(student); // toString() 생략하고 호출해도 내부적으로 toString() 메서드를 자동 호출
</script>
</head>
<body>

</body>
</html>

새 HTML 파일 s07_delete.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체의 속성 및 메서드 제거</title>
<script type="text/javascript">
	// 객체 생성
	var student = {};
	
	// 객체에 속성 추가
	student.이름 = '너굴';
	student.취미 = '악기';
	student.직업 = '경찰';
	
	// toString() 메서드 추가
	student.toString = function() {
		let output = '';
		for(let key in this) {
			if(key != 'toString') {
				output += key + ':' + this[key] + '<br>';
			}
		}
		return output;
	};
	
	document.write(student);
	
	document.write('--------<br>');
	
	// delete 키워드 : 객체의 속성 제거
	delete student.취미;
	document.write(student);
</script>
</head>
<body>

</body>
</html>

새 HTML 파일 s08_array.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열에 객체 저장</title>
<script type="text/javascript">
	// 빈 배열 생성
	var students = [];
	
	// 객체를 배열에 저장
	students.push({이름:'너굴',국어:100,수학:94,영어:89,과학:91});
	students.push({이름:'콩돌',국어:99,수학:93,영어:88,과학:92});
	students.push({이름:'라이츄',국어:98,수학:92,영어:87,과학:93});
	students.push({이름:'밤돌',국어:97,수학:91,영어:86,과학:94});
	students.push({이름:'피카츄',국어:96,수학:90,영어:85,과학:95});
	
	// students 배열 내의 모든 객체에 메서드 추가
	for(let i=0;i<students.length;i++) {
		// 총점 구하는 메서드 추가
		students[i].getSum = function() {
			return this.국어 + this.수학 + this.영어 + this.과학;
		};
		
		// 평균 구하는 메서드 추가
		students[i].getAverage = function() {
			return this.getSum() / 4;
		}
	}
	
	document.write('이름, 총점, 평균<br>');
	for(let i=0;i<students.length;i++) {
		document.write(students[i].이름 + ', ' + students[i].getSum() + ', ' + students[i].getAverage() + '<br>');
	}
</script>
</head>
<body>

</body>
</html>

다음으로