Study Web Development

12월 27일

JavaScript

12. 이벤트

12-4 고전 이벤트 모델

임의의 이미지 파일 gimg0.png, gimg1.png, gimg2.png를 C:\javaWork\workspace_jsp\javaScript\src\main\webapp\images로 이동
새 HTL 파일 s17_game.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>가위바위보 게임</title>
<style type="text/css">
	body {
		font-family: sans-serif;
	}
	h1 {
		text-align: center;
	}
	table {
		width: 700px;
		margin: 0 auto;
	}
	.results {
		text-align: center;
		font-weight: bold;
		font-size: 2.5em;
		background-color: #f4f2c6;
	}
	.choice {
		font-size: 1.2em;
		font-weight: bold;
		text-align: center;
	}
	.user_option {
		cursor: pointer;
	}
</style>
<script type="text/javascript">
	window.onload = function() {
		// 컴퓨터가 선택한 값을 표시할 이미지
		var comImg = document.getElementById('com_img');
		// 사용자가 선택한 값을 표시할 이미지
		var userImg = document.getElementById('user_img');
		
		// 사용자가 선택할 수 있는 이미지 이벤트 연결
		var userOption = document.getElementsByClassName('user_option');
		for(var i=0;i<userOption.length;i++) {
			userOption[i].onclick = function() {
				// 사용자가 선택한 값
				let user = this.id.charAt(this.id.length - 1);
				// console.log(user + ',' + i); // i값을 사용하려면 for문 초기식에서 i를 전역 변수가 아니라 블럭 범위 변수로 선언해야 함

				// 사용자가 선택한 이미지 표시
				userImg.style.display = '';
				userImg.src = this.src;

				// 컴퓨터가 선택한 값				
				let com = Math.floor(Math.random() * 3);
				
				// 컴퓨터가 선택한 이미지 표시
				comImg.style.display = '';
				comImg.src = '../images/gimg' + com + '.png';
				
				/* 
				가위바위보 결과
				컴퓨터 사용자 차이 결과
				0	0	0	무승부
				0	1	-1	컴퓨터 패배
				0	2	-2	컴퓨터 승리
				1	0	1	컴퓨터 승리
				1	1	0	무승부
				1	2	-1	컴퓨터 패배
				2	0	2	컴퓨터 패배
				2	1	1	컴퓨터 승리
				2	2	0	무승부
				*/
				var result;
				var color;
				var num = com - user;
				if(num==0) { // 무승부
					result = ['무', '무'];
					color = ['#f4f2c6', '#f4f2c6'];
				}
				else if(num==-2 || num==1) {
					result = ['승', '패'];
					color = ['#3fdbd6', '#f4f2c6'];
				}
				else if(num==2 || num==-1) {
					result = ['패', '승'];
					color = ['#f4f2c6', '#3fdbd6'];
				}
				
				// 결과 표시
				let results = document.getElementsByClassName('results');
				results[0].innerHTML = '컴퓨터 ' + result[0];
				results[0].style.backgroundColor = color[0];
				results[1].innerHTML = '사용자 ' + result[1];
				results[1].style.backgroundColor = color[1];
				
				/*
				if(user-com==0) {
					results[0].innerHTML = '컴퓨터 무승부';
					results[1].innerHTML = '사용자 무승부';
				}
				else if(user-com==1 || user-com==-2) {
					results[0].innerHTML = '컴퓨터 패배';
					results[1].innerHTML = '사용자 승리';
				}
				else if(user-com==2 || user-com==-1) {
					results[0].innerHTML = '컴퓨터 승리';
					results[1].innerHTML = '사용자 패배';
				}
				for(let j=0;j<results.length;j++) {
					if(results[j].innerHTML.endsWith('승리')) {
						results[j].style.backgroundColor = 'powderblue';
					}
					else {
						results[j].style.backgroundColor = '';
					}
				}
				*/
			};
		}
	};
</script>
</head>
<body>
	<h1>가위바위보 게임</h1>
	<table>
		<tr>
			<td colspan="2"><b>[아래의 가위, 바위, 보 아이콘을 클릭하세요]</b></td>
		</tr>
		<tr>
			<td class="choice" colspan="2">
				<img class="user_option" id="gimg0" src="../images/gimg0.png" width="90">
				<img class="user_option" id="gimg1" src="../images/gimg1.png" width="90">
				<img class="user_option" id="gimg2" src="../images/gimg2.png" width="90">
			</td>
		</tr>
		<tr height="100">
			<td class="results">컴퓨터</td>
			<td class="results">사용자</td>
		</tr>
		<tr height="150">
			<td class="result-img"><img id="com_img" style="display:none;"></td>
			<td class="result-img"><img id="user_img" style="display:none;"></td>
		</tr>
	</table>
</body>
</html>

jQuery

1. jQuery에 대해

1-1 jQuery의 특징

DOM과 관련된 처리를 쉽게 구현
CSS 선택자를 이용하여 쉽고 편리하게 요소를 선택
일관된 이벤트 연결을 쉽게 구현
시각적 효과를 쉽게 구현
Ajax 애플리케이션을 쉽게 개발

1-2 jQuery 다운로드와 CDN 방식

https://jquery.com/download/

Download the compressed, production jQuery 3.6.0을 선택
Download the uncompressed, development jQuery 3.6.0을 선택
다운로드된 jquery-3.6.0.min.js와 jquery-3.6.0.js 파일을 C:\javaWork\workspace_jsp\javaScript\src\main\webapp\js로 이동

2. jQuery 기본

2-1 `jQuery(document).ready()`

새 폴더 ch13-jquerySelector 생성하고 새 HTML 파일 s01_basic.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery 연결</title>
<!-- jquery 연결 방법 1 : js 파일 다운로드 후 파일 연결; 상용 서비스에서는 CDN보다 직접 파일 연결하는 것을 권장 -->
<!-- <script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script> -->
<!-- jquery 연결 방법 2 : CDN(Contents Delivery Network) 방식 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
	// 문서가 준비 완료되면 매개 변수로 전달된 함수를 실행; window.onload = function(){};과 같은 기능
	/* .ready() 이벤트는 jQuery 3.0 이후 deprecated
	$(document).ready(function(){
		alert('jQuery READY');
	});
	*/
	$(function(){ // jQuery 3.0 이후 권장되는 방식
		alert('jQuery READY');
	});
</script>
</head>
<body>

</body>
</html>

2-2 jQuery 기본 선택자

새 HTML 파일 s02_selector.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>선택자</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	// 문서가 준비 완료되면 매개 변수로 전달된 함수를 실행
	$(function() {
		// 태그 선택자를 통해 태그에 접근하여 jQuery 객체를 만들고, css() 메서드에 속성 및 속성값을 전달하여 스타일 처리
		$('span').css('border', '3px solid blue');
		// 클래스 선택자
		$('.my').css('border', '5px solid red')
		// ID 선택자
		$('#content').css('background-color', 'green');
	});
</script>
</head>
<body>
	<p class="my">jQuery 실습</p>
	<div>
		<div id="content">id값이 content인 div 태그</div>
	</div>
	<span>span1</span>
	<span class="my">span2</span>
</body>
</html>

새 HTML 파일 s03_selector.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>그룹 선택자</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	// 문서가 준비 완료되면 매개 변수로 전달된 함수를 실행
	$(function() {
		// 그룹 선택자
		$('h1,p').css('color', 'orange');
	});
</script>
</head>
<body>
	<h1>강물은 흐르고</h1>
	<h2>새벽 바람이 차다</h2>
	<p>내 눈물도 흐르고</p>
	<div>별이 흐른다</div>
</body>
</html>

새 HTML 파일 s04_selector.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>태그 선택자와 클래스 선택자 연계</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('.item').css('color', 'gold');
		$('h1.item').css('background-color', 'crimson');
		// 두 개의 클래스를 모두 가지는 태그를 선택
		$('h1.item.select').css('background-color', 'navy');
	});
</script>
</head>
<body>
	<h1 class="item">Header-0</h1>
	<h1 class="item">Header-1</h1>
	<h1 class="item select">Header-2</h1>
	<h1 class="item">Header-3</h1>
</body>
</html>

새 HTML 파일 s05_selector.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>태그 선택자와 ID 선택자 연계</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		// h1 태그에 target이라는 ID가 적용된 태그를 선택
		$('h1#target').css('color', 'orange');
	});
</script>
</head>
<body>
	<h1>Header-0</h1>
	<h1 id="target">Header-1</h1>
	<h1>Header-2</h1>
</body>
</html>

입력 양식 필터 선택자

<input> 태그에 특화된 선택자

선택자 형태	설명
요소:button	`<input>` 태그 중 type 속성값이 button인 태그와 `<button>` 태그
요소:checkbox	`<input>` 태그 중 type 속성값이 checkbox인 태그
요소:file	`<input>` 태그 중 type 속성값이 file인 태그
요소:image	`<input>` 태그 중 type 속성값이 image인 태그
요소:password	`<input>` 태그 중 type 속성값이 password인 태그
요소:radio	`<input>` 태그 중 type 속성값이 radio인 태그
요소:reset	`<input>` 태그 중 type 속성값이 reset인 태그
요소:submit	`<input>` 태그 중 type 속성값이 submit인 태그
요소:text	`<input>` 태그 중 type 속성값이 text인 태그

선택자 형태	설명
요소:checked	체크된 입력 양식
요소:disabled	비활성화된 입력 양식
요소:enabled	활성화된 입력 양식
요소:focus	초점이 맞춰져 있는 입력 양식
요소:selected	`<select>` 태그 내 `<option>` 태그들 중 선택된 태그

새 HTML 파일 s06_selector.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>입력 양식 필터 선택자1</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		// val() 메서드는 value 속성에 값을 저장
		$('input:text').val('input:text');
		$('input:password').css('background-color', 'pink');
		$('input:button').val('input:button');
	});
</script>
</head>
<body>
	<input type="text">
	<input type="password">
	<input type="button">
</body>
</html>

새 HTML 파일 s07_selector.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>입력 양식 필터 선택자2</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		// 5초 후에 코드를 실행
		setTimeout(function(){
			// <select> 태그에서 선택된 <option>에 접근
			var value = $('select > option:selected').val();
			
			alert(value); // 5초 내에 아무것도 선택하지 않으면 첫 번째 <option> 태그의 값이 출력됨
		}, 5000);
	});
</script>
</head>
<body>
	<select>
		<option>Apple</option> <!-- value 속성 생략시, 태그 내 텍스트를 value로 인식 -->
		<option>Mango</option>
		<option>Strawberry</option>
		<option>Grape</option>
		<option>Melon</option>
	</select>
</body>
</html>

새 HTML 파일 s08_selector.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>입력 양식 필터 선택자2</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		// attr() 메서드는 태그의 속성을 제어
		$('input:checked').attr('checked', false);
		$('input:disabled').attr('disabled', false);
	});
</script>
</head>
<body>
	<input type="checkbox" name = "city" value="서울" checked>서울
	<input type="button" value="확인" disabled>
</body>
</html>

기본 필터 선택자

선택자 형태	설명
요소:odd	홀수 번째에 위치한 문서 객체를 선택
요소:even	짝수 번째에 위치한 문서 객체를 선택
요소:first	첫 번째에 위치한 문서 객체를 선택
요소:last	마지막에 위치한 문서 객체를 선택

새 HTML 파일 s09_selector.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기본 필터 선택자</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('tr:odd').css('background-color', 'gold'); // 홀수 행
		$('tr:even').css('background-color', 'pink'); // 짝수 행
		/*
		$('tr:first').css('background-color', '#000') // 첫 번째 행;
					.css('color', '#fff'); // css() 메서드는 jQuery 객체를 반환하므로 메서드를 연속해서 사용 가능
		*/
		$('tr:first').css({ // 같은 메서드를 여러 번 호출할 때는 객체 표기법 사용을 권장
			backgroundColor:'#000',
			color:'#fff'
		});
	});
</script>
</head>
<body>
	<table>
		<tr>
			<th>이름</th><th>혈액형</th><th>지역</th>
		</tr>
		<tr>
			<td>너굴</td><td>AB형</td><td>서울</td>
		</tr>
		<tr>
			<td>콩돌</td><td>A형</td><td>서울</td>
		</tr>
		<tr>
			<td>밤돌</td><td>O형</td><td>인천</td>
		</tr>
		<tr>
			<td>바닐프티</td><td>B형</td><td>광주</td>
		</tr>
		<tr>
			<td>바닐리치</td><td>B형</td><td>전주</td>
		</tr>
		<tr>
			<td>배바닐라</td><td>O형</td><td>창원</td>
		</tr>
	</table>
</body>
</html>

2-3 jQuery를 이용한 배열 관리

새 폴더 ch14-jqueryArray 생성하고 새 HTML 파일 s01_each.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		// 배열 생성
		var array = [
			{name:'naver',link:'https://www.naver.com'},
			{name:'daum',link:'https://www.daum.net'},
			{name:'google',link:'https://www.google.co.kr'},
			{name:'nate',link:'https://www.nate.com'}
		];
		
		// each() 메서드에 배열과 배열로부터 데이터를 받아서 처리하는 함수를 전달
		$.each(array, function(index, item) {
			// index : 배열의 인덱스
			// item : 배열의 인덱스를 통해 접근한 값
			
			var output = '';
			output += '<h1>';
			output += '<a href="' + item.link + '">' + item.name + '</a>';
			output += '</h1>';
			
			document.body.innerHTML += output;
		});
	});
</script>
</head>
<body>

</body>
</html>

새 HTML 파일 s02_addClass.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>addClass</title>
<style type="text/css">
	.high_light {
		background: gold;
	}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('h1').addClass('high_light'); // addClass() 메서드가 내부적으로 loop 처리
	});
</script>
</head>
<body>
	<h1>item-0</h1>
	<h1>item-1</h1>
	<h1>item-2</h1>
	<h1>item-3</h1>
	<h1>item-4</h1>
</body>
</html>

새 HTML 파일 s03_addClass.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>addClass</title>
<style type="text/css">
	.high_light_0 {background: gold;}
	.high_light_1 {background: orange;}
	.high_light_2 {background: royalblue;}
	.high_light_3 {background: limegreen;}
	.high_light_4 {background: crimson;}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('h1').each(function(index, item) { // addClass() 자체적으로 배열을 처리할 수 있으므로, 별도로 each() 메서드를 사용하는 것은 권장되지 않음
			// index : 태그 선택자가 반환한 문서 객체 배열의 인덱스
			// item : 인덱스에 해당하는 문서 객체(=태그)
			$(item).addClass('high_light_' + index); // <h1> 태그에 접근하여 인덱스를 붙인 클래스를 추가
		});
	});
</script>
</head>
<body>
	<h1>item-0</h1>
	<h1>item-1</h1>
	<h1>item-2</h1>
	<h1>item-3</h1>
	<h1>item-4</h1>
</body>
</html>

새 HTML 파일 s04_addClass.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>addClass</title>
<style type="text/css">
	.high_light_0 {background: gold;}
	.high_light_1 {background: orange;}
	.high_light_2 {background: royalblue;}
	.high_light_3 {background: limegreen;}
	.high_light_4 {background: crimson;}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('h1').addClass(function(index) { // addClass() 메서드에 매개 변수로 함수를 전달; jQuery의 모든 메서드는 매개 변수로 함수를 전달받아 내부적으로 배열 정보 처리 가능
			// index : 배열의 인덱스
			return 'high_light_' + index; // 인덱스를 받아 클래스명을 가공 후 addClass() 메서드에 반환
		});
	});
</script>
</head>
<body>
	<h1>item-0</h1>
	<h1>item-1</h1>
	<h1>item-2</h1>
	<h1>item-3</h1>
	<h1>item-4</h1>
</body>
</html>

3. 문서 객체 조작1

3-2 문서 객체의 클래스 속성 제거

새 폴더 ch15-jqueryDOM 생성하고 새 HTML 파일 s01_removeClass.html 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>클래스 속성 제거</title>
<style type="text/css">
	.item {color: crimson;}
	.select {background: gold};
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$(function() {
		// 문서 객체의 클래스 속성 제거
		$('h1').removeClass('select');
	});
</script>
</head>
<body>
	<h1 class="item">Header-0</h1>
	<h1 class="item select">Header-1</h1>
	<h1 class="item">Header-2</h1>
</body>
</html>

다음으로

Study Web Development

12월 27일

JavaScript

12. 이벤트

12-4 고전 이벤트 모델

jQuery

1. jQuery에 대해

1-1 jQuery의 특징

1-2 jQuery 다운로드와 CDN 방식

2. jQuery 기본

2-1 jQuery(document).ready()

2-2 jQuery 기본 선택자

입력 양식 필터 선택자

기본 필터 선택자

2-3 jQuery를 이용한 배열 관리

3. 문서 객체 조작1

3-2 문서 객체의 클래스 속성 제거

2-1 `jQuery(document).ready()`