Study Web Development

12월 23일

이전으로

JavaScript

10. 내장 객체

10-2 Array 객체의 생성자 함수, 속성, 메서드

  1. 새 HTML 파일 s04_Array.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Array</title>
<script type="text/javascript">
	// 배열 생성
	var array1 = new Array(); // 빈 배열
	document.write(array1 + '<br>'); // 요소가 없으므로 빈 문자열 출력
	document.write(array1.length + '<br>'); // 비어 있으므로 배열의 길이는 0
	
	document.write('--------<br>');

	var array2 = new Array(10); // 빈 요소가 10개 만들어짐; 배열의 길이 = 10
	document.write(array2 + '<br>');
	document.write(array2.length +'<br>');
	
	document.write('--------<br>');
	
	var array3 = new Array(52, 273, 103, 57, 32); // 인자를 2개 이상 입력하면 인자들을 요소로 갖는 배열이 만들어짐; 배열의 길이 = 5
	document.write(array3 + '<br>');
	document.write(array3.length);
</script>
</head>
<body>

</body>
</html>
  1. 새 HTML 파일 s05_Array.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Array</title>
<script type="text/javascript">
	// 배열 생성
	var array1 = new Array();
	
	// 요소 추가
	array1[0] = 10;
	array1[1] = 20;
	array1[2] = 30;
	
	// 출력
	document.write(array1[0] + '<br>');
	document.write(array1[1] + '<br>');
	document.write(array1[2] + '<br>');
	
	document.write('--------<br>');
	
	// 반복문을 이용한 요소의 출력
	for(var i=0;i<array1.length;i++) {
		document.write('array1[' + i + ']:' + array1[i] + '<br>');
	}
	
	document.write('--------<br>');

	// for in 반복문을 이용한 요소의 출력
	for(var i in array1) {
		document.write(array1[i] + '<br>');
	}
</script>
</head>
<body>

</body>
</html>

10-3 String 객체의 속성, 메서드

  1. 새 HTML 파일 s06_String.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>String</title>
<script type="text/javascript">
	var characters = prompt('사용할 비밀번호를 입력해주세요', '6글자 이상');
	
	// 입력받은 값이 6글자 이상인지 체크
	if(characters.length < 6) {
		alert('6글자 이상으로 입력하세요!');
	}
	else {
		alert('비밀번호가 설정되었습니다.');
	}
</script>
</head>
<body>

</body>
</html>
  1. 새 HTML 파일 s07_String.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>String</title>
<script type="text/javascript">
	function trans() { // 버튼을 눌러서 함수를 호출하면 입력창에 입력한 소문자 데이터를 읽어와서 대문자로 변환하고, 변환된 데이터를 다시 입력창에 저장
		var txt = document.form1.id.value; // document로 전체 문서에 접근하고, 하위 요소인 <form>과 <input>에 name 속성(대소문자 구분)을 통해 접근 후, value 속성을 통해 입력창에 입력한 데이터를 반환
		txt = txt.toUpperCase(); // toUpperCase() 메서드를 통해 소문자를 대문자로 변환
		document.form1.id.value = txt; // 대문자로 변환된 데이터를 입력창에 저장
	}
</script>
</head>
<body>
	<form name="form1">
		ID를 소문자로 입력하면 대문자로 변환됩니다.<br>
		ID : <input type="text" name="id">
		<input type="button" value="입력" onclick="trans();"> <!-- 서버로 전송하지 않고 자바스크립트를 호출할 것이므로 submit 대신 button 생성 -->
	</form>
</body>
</html>
  1. 새 HTML 파일에 s08_String.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>String의 메서드</title>
<script type="text/javascript">
	var msg = '세상의 끝에서 세상을 노래하다';
	
	document.write(msg.length + '<br>'); // 문자열의 길이
	document.write(msg.charAt(8) + '<br>'); // 지정한 인덱스에 해당하는 위치의 문자 추출
	document.write(msg.indexOf('상') + '<br>'); // 지정한 문자가 처음으로 등장하는 위치의 인덱스 반환
	document.write(msg.indexOf('노래') + '<br>'); // 지정한 문자열의 첫 번째 문자가 처음으로 등장하는 위치의 인덱스 반환
	document.write(msg.lastIndexOf('상') + '<br>'); // 지정한 문자가 마지막으로 등장하는 위치의 인덱스 반환
	
	document.write(msg.substring(5) + '<br>'); // 지정한 인덱스부터 끝까지의 문자열 추출
	document.write(msg.substr(5) + '<br>');
	document.write(msg.substring(1,5) + '<br>'); // 시작 인덱스부터 끝 인덱스 전까지의 문자열 추출
	
	var msg2 = '2021-12-23';
	
	var array = msg2.split('-'); // 구분자를 이용해서 문자열을 잘라낸 후 배열로 반환
	document.write(array);
</script>
</head>
<body>

</body>
</html>

11. 문서 객체 모델(Document Object Model)

11-3 HTML 태그를 자바스크립트로 가져오는 방법

  1. 새 폴더 ch11-DOM 생성하고 새 HTML 파일 s01_tagname.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>태그명을 이용해서 문서 객체 탐색</title>
<script type="text/javascript">
	window.onload = function() { // 브라우저가 <body>의 <span>까지 모두 인식한 다음에 스크립트를 실행하도록 지연시킴
		var spans = document.getElementsByTagName('span'); // getElementsByTagName() 메서드는 태그명을 통해 태그를 탐색; 복수의 태그가 존재할 수 있기 때문에 NodeList로 반환
		
		spans[0].innerHTML = '달빛이 찬란한 호수'; // innerHTML 속성을 이용해 시작 태그와 끝 태그 사이의 내용을 변경함
		spans[1].innerHTML = '흰 눈이 눈부신 들판';
	};
</script>
</head>
<body>
	<span>하늘</span><br>
	<span>하늘</span>
</body>
</html>
  1. 새 HTML 파일 s02_tagname.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>태그명을 이용해서 문서 객체 탐색</title>
<script type="text/javascript">
	window.onload = function() {
		var spans = document.getElementsByTagName('span');
		
		// 반복문을 이용한 문서 객체 호출
		for(var i=0;i<spans.length;i++) {
			if(i%2==1) { // 홀수 인덱스
				spans[i].innerHTML = '우주';
			}
			else { // 짝수 인덱스
				spans[i].innerHTML = '지구';
			}
		}
	};
</script>
</head>
<body>
	<span>하늘</span><br>
	<span>하늘</span><br>
	<span>하늘</span>
</body>
</html>
  1. 새 HTML 파일 s03_id.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id를 이용한 문서 객체 탐색</title>
<script type="text/javascript">
	window.onload = function() { 
		var header1 = document.getElementById('header_1'); // getElementById() 메서드는 id 속성을 통해 태그를 탐색; id 속성은 문서 내에서 유일해야 하기 때문에 하나의 태그를 호출
		var header2 = document.getElementById('header_2');
		
		header1.innerHTML = '모카'; // innerHTML 속성을 이용해 호출된 문서 객체의 내용 변경
		header2.innerHTML = '초코';
	};
</script>
</head>
<body>
	<h1 id="header_1">Header</h1>
	<h1 id="header_2">Header</h1>
</body>
</html>
  1. 새 HTML 파일 s04_name.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>name 속성을 이용한 문서 객체 탐색</title>
<script type="text/javascript">
	window.onload = function() {
		var prev = document.getElementsByName('prev'); // getElementsByName() 메서드는 name 속성을 통해 문서 객체를 탐색; name 속성은 중복될 수 있기 때문에 NodeList로 반환
		var next = document.getElementsByName('next');
		
		prev[0].innerHTML = '이전';
		next[0].innerHTML = '다음';
		
		var country = document.getElementsByName('country');
		country[0].checked = true; // checked 속성의 값을 true로 지정; NodeList에서 첫 번째 체크박스의 기본값을 선택된 것으로 변경
		
		var comment = document.getElementsByName('comment');
		// comment[0].value = '간단한 설명 입력'; // value 속성에 값을 대입하면 입력 박스에 해당 값이 채워짐
		comment[0].placeholder = '간단한 설명 입력'; // placeholder 속성에 값을 대입하면 입력 박스에 해당 값이 hint로 제공됨; value 속성과 함께 지정시 value 속성이 우선함
	};
</script>
</head>
<body>
	<button name="prev">prev</button><br>
	<button name="next">next</button><br>
	
	<input type="checkbox" name="country" value="한국">한국
	<input type="checkbox" name="country" value="미국">미국
	<input type="checkbox" name="country" value="영국">영국
	
	<br><input type="text" name="comment">
</body>
</html>
  1. 새 HTML 파일 s05_className.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>클래스명을 이용한 문서 객체 탐색</title>
<script type="text/javascript">
	window.onload = function() {
		var foo = document.getElementsByClassName('matched'); // getElementsByClassName() 메서드는 클래스명을 통해 문서 객체를 탐색; 클래스명은 중복될 수 있기 때문에 문서 객체의 정보를 NodeList로 반환
		var output = '';
		for(let i=0;i<foo.length;i++) {
			output += foo[i].innerHTML + '\n'; // alert() 메서드로 생성되는 경고창은 HTML이 아니라 별도의 응용 프로그램이므로 <br>이 아닌 \n으로 줄바꿈
		}
		alert(output);

		var fooMatch = document.getElementsByClassName('unmatched matched'); // 클래스명이 여러 개인 경우 공백을 구분자로 해서 하나의 문자열로 전달하면 해당 클래스명들을 모두 가지고 있는 요소들이 NodeList로 반환됨; 클래스명의 순서는 변경 가능
		var output2 = '';
		for(let i=0;i<fooMatch.length;i++) {
			output2 += fooMatch[i].innerHTML + '\n';
		}
		alert(output2);
		
		var foo2 = document.getElementById('foo'); // foo2에 id가 foo인 <p> 태그가 담김
		var fooMatch2 = foo2.getElementsByClassName('matched'); // id가 foo인 <p> 태그에서 클래스명이 matched인 자식 태그들을 NodeList로 반환
		var output3 = '';
		for(let i=0;i<fooMatch2.length;i++) {
			output3 += fooMatch2[i].innerHTML + '\n';
		}
		alert(output3);
	};
</script>
</head>
<body>
	<p id="foo">
		<span class="matched">a</span>
		<span class="matched unmatched">b</span>
		<span class="unmatched">c</span>
	</p>
	<p id="bar">
		<span class="matched">x</span>
	</p>
</body>
</html>
  1. 새 HTML 파일 s06_selector.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자를 이용한 태그 탐색</title>
<script type="text/javascript">
	window.onload = function() {
		var elem = document.querySelector('.strawberry'); // querySelector() 메서드는 선택자를 이용해서 태그를 탐색; 태그가 중복될 경우 첫 번째 태그만 호출
		
		elem.style.color = 'crimson'; // style 속성을 이용해 호출한 태그의 글자 색을 변경함
	};
</script>
</head>
<body>
	<ul>
		<li class="apple">Apple</li>
		<li class="strawberry">Strawberry</li>
		<li class="strawberry">Strawberry2</li>
		<li class="orange">Orange</li>
	</ul>
</body>
</html>
  1. 새 HTML 파일 s07_selector.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자를 이용한 문서 객체 탐색</title>
<script type="text/javascript">
	window.onload = function() {
		var header1 = document.querySelector('#header_1'); // 선택자를 이용해서 문서 객체를 탐색
		var header2 = document.querySelector('#header_2');
		
		header1.innerHTML = 'Hello';
		header2.innerHTML = 'World';
	};
</script>
</head>
<body>
	<h1 id="header_1">도시</h1>
	<h1 id="header_2">도시</h1>
</body>
</html>
  1. 새 HTML 파일 s08_selector.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자를 이용해서 문서 객체 탐색</title>
<script type="text/javascript">
	window.onload = function() {
		var elems = document.querySelectorAll('ul > li'); // querySelectorAll() 메서드는 선택자를 이용해서 태그를 탐색; 복수의 태그가 존재할 수 있으므로 태그 정보를 NodeList로 반환
		
		var output = '';
		for(var i=0;i<elems.length;i++) {
			output += elems[i].innerHTML + '\n';
		}
		alert(output);
		
		elems[0].style.background = 'gold';
	};
</script>
</head>
<body>
	<ul>
		<li>Apple</li>
		<li>Strawberry</li>
		<li>Mango</li>
	</ul>
</body>
</html>

11-1 문서 객체의 동적 생성

  1. 새 HTML 파일 s09_create.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>태그 생성</title>
<script type="text/javascript">
	window.onload = function() {
		var header = document.createElement('h1'); // <h1> 태그 생성
		var textNode = document.createTextNode('Hello DOM'); // 텍스트 노드 생성
		
		// 노드 연결
		header.appendChild(textNode); // <h1> 태그에 텍스트 노드를 추가
		document.body.appendChild(header); // <body> 태그에 <h1> 태그를 추가
	};
</script>
</head>
<body>

</body>
</html>
  1. 임의의 이미지 파일 Penguins.jpg를 C:\javaWork\workspace_jsp\javaScript\src\main\webapp\images로 이동
  2. 새 HTML 파일 s10_create.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체 생성 및 속성 처리</title>
<script type="text/javascript">
	window.onload = function() {
		var image = document.createElement('img'); // <img> 태그 생성
		
		// <img> 태그의 속성을 제어
		image.src = '../images/Penguins.jpg';
		image.width = 500;
		image.height = 350;
		
		// 노드를 연결
		document.body.appendChild(image); // <body> 태그에 <img> 태그를 추가
	};
</script>
</head>
<body>

</body>
</html>

11-5 문서 객체의 innerHTML 속성 사용해 객체 생성

  1. 새 HTML 파일 s11_create.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체 생성</title>
<script type="text/javascript">
	window.onload = function() {
		var output = '';
		output += '<ul>';
		output += '	<li>Java</li>';
		output += '	<li>SQL</li>';
		output += '	<li>HTML</li>';
		output += '	<li>CSS</li>';
		output += '	<li>JavaScript</li>';
		output += '</ul>';
		
		// innerHTML 속성을 이용해서 태그를 추가
		// document.body.innerHTML = output;
		
		// textContent 속성을 이용해서 텍스트를 추가
		document.body.textContent = output;
	};
</script>
</head>
<body>

</body>
</html>

11-8 문서 객체 제거

  1. 새 HTML 파일 s12_remove.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체 제거</title>
<script type="text/javascript">
	window.onload = function() {
		var willBeRemoved = document.getElementById('will_be_removed');
		
		// 3초 후에 함수 호출
		setTimeout(function(){
			// 지정한 문서 객체를 제거; 메서드를 호출한 문서 객체의 직계 자식만 제거 가능
			// document.body.removeChild(willBeRemoved);
			
			// 문서 객체의 하위 요소를 모두 제거
			document.body.innerHTML = '';
		}, 3000);
	};
</script>
</head>
<body>
	<h1 id="will_be_removed">Header</h1>
	<h1>Header2</h1>
</body>
</html>

11-7 문서 객체의 style 속성 사용

  1. 새 HTML 파일 s13_style.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체의 스타일 처리</title>
<script type="text/javascript">
	window.onload = function() {
		var header = document.getElementById('header');
	
		// 스타일 처리
		header.style.border = '2px solid midnightblue';
		header.style.color = 'mintcream';
		header.style.fontFamily = 'Helvetica'; // CSS의 속성명은 -를 인정하지만, JavaScript의 속성명은 -를 인정하지 않기 때문에 CSS의 속성명에서 -를 제거하고 - 다음에 오는 단어의 첫 글자를 대문자로 변경해서 사용함
		header.style.background = 'steelblue'
	}
</script>
</head>
<body>
	<h1 id="header">Header</h1>
</body>
</html>

12. 이벤트

12-1 이벤트와 이벤트 속성

onclick
onmouseover/onmouseout

12-3 인라인 이벤트 모델

  1. 새 폴더 ch12-event 생성하고 새 HTML 파일 s01_inline.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인라인 이벤트 처리</title>
</head>
<body>
	<input type="button" value="이동" onclick="location.href='https://www.naver.com';"> <!-- <a> 태그 대신 버튼에 인라인 이벤트를 만들어 페이지를 이동하는 방식은 흔히 사용됨 -->
	<input type="button" value="확인" onclick="alert('클릭');alert('click');"> <!-- 인라인 방식으로 자바스크립트 코드를 여러 줄 작성하는 것은 권장되지 않음 -->
</body>
</html>
  1. 새 HTML 파일 s02_function.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인라인 이벤트 처리 : 함수 이용</title>
<style type="text/css">
	div {
		background-color: orange; /* div 영역을 식별하기 위해 배경색 지정 */
	}
</style>
<script type="text/javascript">
	function whenClick() {
		alert('CLICK');
	}
</script>
</head>
<body>
	<div id="header" onclick="whenClick();">클릭</div> <!-- div 영역 클릭시 경고창이 나타남 -->
</body>
</html>
  1. 새 HTML 파일 s03_onclick.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onclick</title>
<script type="text/javascript">
	function changeColor(color) {
		// 배경색 변경
		document.body.style.backgroundColor = color;
	}
</script>
</head>
<body>
	<input type="radio" name="color" value="blue" onclick="changeColor('powderblue');">파란색
	<input type="radio" name="color" value="green" onclick="changeColor('darkseagreen');">초록색
	<input type="radio" name="color" value="white" onclick="changeColor('white');">흰색
</body>
</html>
  1. 새 HTML 파일 s04_onmouseover.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onmouseover/onmouseout</title>
<style type="text/css">
	a {
		color: white;
		text-decoration: none;
	}
	td {
		width: 100px;
		margin-top: 1px;
		text-align: center;
		background-color: #FF8888;
	}
</style>
<script type="text/javascript">
	function changeBgColor(cell, newColor) { // cell: 이벤트가 발생한 <td>; newColor: 변경할 색
		cell.style.backgroundColor = newColor;
	} 
</script>
</head>
<body>
	<table>
		<tr>
			<td onmouseover="changeBgColor(this, '#FF0000');" onmouseout="changeBgColor(this, '#FF8888');"> <!-- this : 이벤트가 발생한 태그 -->
				<a href="#">menu01</a>
			</td>
		</tr>
		<tr>
			<td onmouseover="changeBgColor(this, '#FF0000');" onmouseout="changeBgColor(this, '#FF8888');">
				<a href="#">menu02</a>
			</td>
		</tr>
		<tr>
			<td onmouseover="changeBgColor(this, '#FF0000');" onmouseout="changeBgColor(this, '#FF8888');">
				<a href="#">menu03</a>
			</td>
		</tr>
	</table>
</body>
</html>

다음으로