(71)[Web]7일차: ((Javascript))F

1. 2023.12.5(화)

F_WebApp03

ㄴ C:\WebStudy\WebApp03\WebContent

ㄴㄴTest031_1.html_선택목록(select) 다루기/ formclear(), .reset(), .forms[0].reset(), .focus()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test031_1.html</title>
<link rel="stylesheet" href="css/style.css">

<script type="text/javascript">

	// select 를 다루어보기 위한 테스트 함수 정의
	function selectTest()
	{
		// 확인
		//alert("함수 호출~!!!");
		
		
		// **컨트롤 하는 방법을 여러가지로 알아둬야함**
		
		// 첫 번째 방법 ========================================================
		/* 
		var positionStr = document.getElementById("userPosition").value;
		
		// 확인
		alert(positionStr);
		*/
		
		// 두 번째 방법 ========================================================
		/* 
		var positionObj = document.getElementById("userPosition");
		var positionOptions = positionObj.options;		//**배열~!!!**
		var positionMsg = "";
		
		// 확인
		//alert(positionOptions);
		//--==>> [object HTMLOptionsCollection] -> 자바스크립트 배열
		
		//alert(positionOptions.length);
		//--==>> 4
		
		for (var i = 0; i < positionOptions.length; i++)		// 0 1 2 3
		{
			// 확인
			//alert(positionOptions[i].selected);
			//--==>> 선택된 옵션 항목에 따라 true/false 형태로 확인
			//		ture false false false (부장 선택된 상태)
			//		false false false true (사원 선택된 상태)
			
			if(positionOptions[i].selected)
			{
				// 확인
				//alert(i);
				//--==>> 0 (부장 선택된 상태)
				//		 3 (사원 선택된 상태)
				
				// 단일 선택
				//positionMsg = positionOptions[i].value;
				//break;
				
				// 다중 선택
				positionMsg = positionOptions[i].value + " ";
				// **다중 선택에서는 break 쓰면 X**
			}
		}
		
		// 확인
		alert(positionMsg); 
		*/
		
		// 세 번째 방법 =====================================================
		/* 
		var positionObj = document.getElementById("userPosition");
		
		// 확인
		//alert(positionObj.selectedIndex);
		//--==>> 부장->0, 과장->1, 대리->2, 사원->3
		
		// 확인
		//alert(positionObj.options[2].value);
		//--==>> cde(대리)
		//alert(positionObj.options[0].value);
		//--==>> zaq(부장)
		
		positionMsg = positionObj.options[positionObj.selectedIndex].value;
		//			  ------------------- 배열
		//								 -------------------------- 선택된 인덱스 번호
		//															------ 배열의 값
		
		// 확인
		alert(positionMsg);
		 */
		
	}
function addMember()
{
	var uName = document.getElementById("userName").value;
	var uSsn = document.getElementById("userSsn").value;
	
	//var uCity = document.getElementById("userCity").value
	var cityObj = document.getElementById("userCity");
	
	//alert(cityObj.selectedIndex);
	//--==>> 서울 -> 0, 대전 -> 1, 대구 -> 3
	
	//alert(cityObj.options[cityObj.selectedIndex].value);
	//--==>> 1123(서울), 3328(대전), 4239(광주), 5832(대구)
	
	
	
	var uCity = cityObj.options[cityObj.selectedIndex].value;
	
	var BuseoObj = document.getElementById("userDepartment");
	var uBuseo = BuseoObj.options[BuseoObj.selectedIndex].value;
	
	var positionObj = document.getElementById("userPosition");
	var uPosition = positionObj.options[positionObj.selectedIndex].value;
	
	var uBasicPay = document.getElementById("userBasicPay").value;
	
	// 테이블 그리기 ---------------------------------------------------
	
	var tableNode = document.getElementById("memberList");
	
	var trNode = document.createElement("tr");
	
	trNode.appendChild(createTdNode(uName));
	trNode.appendChild(createTdNode(uSsn));
	trNode.appendChild(createTdNode(uCity));
	trNode.appendChild(createTdNode(uBuseo));
	trNode.appendChild(createTdNode(uPosition));
	trNode.appendChild(createTdNode(uBasicPay));
	
	tableNode.appendChild(trNode)	
	// ---------------------------------------------------- 테이블 그리기
	
	//formclear();									//check~!!!
													//**데이터 입력후 내용 리셋**
	
	//document.getElementById("listForm").reset();	//check~!!!
	document.forms[0].reset();						//check~!!!
	
	document.getElementById("userName").focus();		//check~!!!
	
}
function createTdNode(val)
{
	var txtNode = document.createTextNode(val);
	var tdNode = document.createElement("td");
	tdNode.appendChild(txtNode);
	
	return tdNode;
}
function formclear()
{
	document.getElementById("userName").value = "";
	document.getElementById("userSsn").value = "";
	var cityObj = document.getElementById("userCity");
	cityObj.options[0].selected = true;
	
	var buseoObj = document.getElementById("userDepartment");
	buseoObj.options[3].selected = true;
	
	var jikwiObj = document.getElementById("userPosition");
	document.getElementById("userBasicPay").value= "";
}

</script>


</head>
<body class="section">

<div>
	<h1>자바스크립트 활용</h1>
	<hr>
</div>

<div>
	<h2>선택목록(select) 다루기</h2>
	
	
	<form id="listForm">
		<table>
			<tr>	
				<td>이름</td>
				<td>
					<input type="text" id="userName">
				</td>
			</tr>
			<tr>
				<td>주민번호</td>
				<td>
					<input type="text" id="userSsn">
				</td>
			</tr>
			<tr>
			
			<!-- "서울" "마포구"... 이런식으로 사용자 입력으로 받으면 처리가 불가능하다. -->
			<!-- 선택지에서 선택할 수 있도록 변경해야 한다! 【text → select[드롭다운]】 -->
			
				<td>지역</td>
				<td>
					<!-- <input type="text" id="userCity"> -->
					<select id="userCity">
						<option value="1123(서울)">서울</option>
						<option value="3328(대전)">대전</option>
						<option value="4239(광주)">광주</option>
						<option value="5832(대구)">대구</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>부서</td>
				<td>
					<!-- <input type="text" id="userDepartment"> -->
					<select id="userDepartment">
						<option value="9987(개발부)">개발부</option>
						<option value="9986(인사부)">인사부</option>
						<option value="9985(자재부)">자재부</option>
						<option value="9984(영업부)" selected>영업부</option>
						<option value="9983(총무부)">총무부</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>직위</td>
				<td>
					<!-- <input type="text" id="userPosition"> -->
					<select id="userPosition">
						<option value="zaq(부장)">부장</option>
						<option value="xsw(과장)">과장</option>
						<option value="cde(대리)">대리</option>
						<option value="bgt(사원)" selected>사원</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>기본급</td>
				<td>
					<input type="text" id="userBasicPay">
				</td>
			</tr>
			<tr class="btn_box">
				<td colspan="2" style="text-align: center">
					
					<!-- 선택된 값을 가져오는 1,2,3 방법 -->
					<!-- <input type="button" value="직원 추가" class="btn" style="width: 48%"
					onclick="selectTest()"> -->
					
					<!-- 직원 추가 기능  -->
					<input type="button" value="직원 추가" class="btn"
					onclick="addMember()">
					
					<input type="reset" value="입력 취소" class="btn">
				</td>
			</tr>
		</table>
		<br>
		
		
		<table id="memberList">
			<tr>
				<td>이름</td>
				<td>주민번호</td>
				<td>지역</td>
				<td>부서</td>
				<td>직위</td>
				<td>기본급</td>
			</tr>
		</table>
		
	</form>
</div>


</body>
</html>

ㄴㄴTest031.html_선택목록(select) 다루기(내가 푼 풀이)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test031.html</title>
<link rel="stylesheet" href="css/style.css">

<script type="text/javascript">

	// select 를 다루어보기 위한 테스트 함수 정의
	function selectTest()
	{
		// 확인
		//alert("함수 호출~!!!");
		
		
		// **컨트롤 하는 방법을 여러가지로 알아둬야함**
		
		// 첫 번째 방법 ========================================================
		/* 
		var positionStr = document.getElementById("userPosition").value;
		
		// 확인
		alert(positionStr);
		*/
		
		// 두 번째 방법 ========================================================
		/* 
		var positionObj = document.getElementById("userPosition");
		var positionOptions = positionObj.options;		//**배열~!!!**
		var positionMsg = "";
		
		// 확인
		//alert(positionOptions);
		//--==>> [object HTMLOptionsCollection] -> 자바스크립트 배열
		
		//alert(positionOptions.length);
		//--==>> 4
		
		for (var i = 0; i < positionOptions.length; i++)		// 0 1 2 3
		{
			// 확인
			//alert(positionOptions[i].selected);
			//--==>> 선택된 옵션 항목에 따라 true/false 형태로 확인
			//		ture false false false (부장 선택된 상태)
			//		false false false true (사원 선택된 상태)
			
			if(positionOptions[i].selected)
			{
				// 확인
				//alert(i);
				//--==>> 0 (부장 선택된 상태)
				//		 3 (사원 선택된 상태)
				
				// 단일 선택
				//positionMsg = positionOptions[i].value;
				//break;
				
				// 다중 선택
				positionMsg = positionOptions[i].value + " ";
				// **다중 선택에서는 break 쓰면 X**
			}
		}
		
		// 확인
		alert(positionMsg); 
		*/
		
		// 세 번째 방법 =====================================================
		/* 
		var positionObj = document.getElementById("userPosition");
		
		// 확인
		//alert(positionObj.selectedIndex);
		//--==>> 부장->0, 과장->1, 대리->2, 사원->3
		
		// 확인
		//alert(positionObj.options[2].value);
		//--==>> cde(대리)
		//alert(positionObj.options[0].value);
		//--==>> zaq(부장)
		
		positionMsg = positionObj.options[positionObj.selectedIndex].value;
		//			  ------------------- 배열
		//								 -------------------------- 선택된 인덱스 번호
		//															------ 배열의 값
		
		// 확인
		alert(positionMsg);
		 */
		
	}
function addMember()
{
	//console.log("확인");
	
	var memBodyNode = document.getElementById("memberList");
	var trNode = document.createElement("tr");
	
	var userName = document.getElementById("userName");
	var userSsn = document.getElementById("userSsn");
	
	var userCity = document.getElementById("userCity");
	var userDepartment = document.getElementById("userDepartment");
	var userPosition = document.getElementById("userPosition");
	
	var userBasicPay = document.getElementById("userBasicPay");
	
	
	var arr = new Array();
	
	arr[0] = userName.value;
	arr[1] = userSsn.value;
	
	// S: 방법 1 ----------------------------------------------	
	/* arr[2] = userCity.value;
	arr[3] = userDepartment.value;
	arr[4] = userPosition.value; */
	// E: 방법 1 ----------------------------------------------	
	
	// S: 방법 2 ----------------------------------------------	
	/* var userCityOptions = userCity.options;
	for (var i = 0; i < userCityOptions.length; i++)
	{
		if(userCityOptions[i].selected)
		{
			arr[2] = userCityOptions[i].value;
		}
	}
	
	var userDepartmentOptions = userDepartment.options;
	for (var i = 0; i < userDepartmentOptions.length; i++)
	{
		if(userDepartmentOptions[i].selected)
		{
			arr[3] = userDepartmentOptions[i].value;
		}
	}
	
	var userPositionOptions = userPosition.options;
	for (var i = 0; i < userPositionOptions.length; i++)
	{
		if(userPositionOptions[i].selected)
		{
			arr[4] = userPositionOptions[i].value;
		}
	} */
	// E: 방법 2 ----------------------------------------------	
	
	// S: 방법 2 ----------------------------------------------	
	arr[2] = userCity.options[userCity.selectedIndex].value;
	arr[3] = userDepartment.options[userDepartment.selectedIndex].value;
	arr[4] = userPosition.options[userPosition.selectedIndex].value;
	
	
	// E: 방법 2 ----------------------------------------------	
	
	arr[5] = userBasicPay.value;
	
	
	
	for (var i = 0; i < arr.length; i++)
	{
		trNode.appendChild(createTdNode(arr[i]));
	}
	
	memBodyNode.appendChild(trNode);
	
	
}
function createTdNode(val)
{
	var txtNode = document.createTextNode(val);
	var tdNode = document.createElement("td");
	tdNode.appendChild(txtNode);
	
	return tdNode;
}

</script>


</head>
<body class="section">

<div>
	<h1>자바스크립트 활용</h1>
	<hr>
</div>

<div>
	<h2>선택목록(select) 다루기</h2>
	
	
	<form>
		<table>
			<tr>	
				<td>이름</td>
				<td>
					<input type="text" id="userName">
				</td>
			</tr>
			<tr>
				<td>주민번호</td>
				<td>
					<input type="text" id="userSsn">
				</td>
			</tr>
			<tr>
			
			<!-- "서울" "마포구"... 이런식으로 사용자 입력으로 받으면 처리가 불가능하다. -->
			<!-- 선택지에서 선택할 수 있도록 변경해야 한다! 【text → select[드롭다운]】 -->
			
				<td>지역</td>
				<td>
					<!-- <input type="text" id="userCity"> -->
					<select id="userCity">
						<option value="1123(서울)">서울</option>
						<option value="3328(대전)">대전</option>
						<option value="4239(광주)">광주</option>
						<option value="5832(대구)">대구</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>부서</td>
				<td>
					<!-- <input type="text" id="userDepartment"> -->
					<select id="userDepartment">
						<option value="9987(개발부)">개발부</option>
						<option value="9986(인사부)">인사부</option>
						<option value="9985(자재부)">자재부</option>
						<option value="9984(영업부)">영업부</option>
						<option value="9983(총무부)">총무부</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>직위</td>
				<td>
					<!-- <input type="text" id="userPosition"> -->
					<select id="userPosition">
						<option value="zaq(부장)">부장</option>
						<option value="xsw(과장)">과장</option>
						<option value="cde(대리)">대리</option>
						<option value="bgt(사원)">사원</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>기본급</td>
				<td>
					<input type="text" id="userBasicPay">
				</td>
			</tr>
			<tr class="btn_box">
				<td colspan="2" style="text-align: center">
					
					<!-- 선택된 값을 가져오는 1,2,3 방법 -->
					<!-- <input type="button" value="직원 추가" class="btn" style="width: 48%"
					onclick="selectTest()"> -->
					
					<!-- 직원 추가 기능  -->
					<input type="button" value="직원 추가" class="btn"
					onclick="addMember()">
					
					<input type="reset" value="입력 취소" class="btn">
				</td>
			</tr>
		</table>
		<br>
		
		
		<table id="memberList">
			<tr>
				<td>이름</td>
				<td>주민번호</td>
				<td>지역</td>
				<td>부서</td>
				<td>직위</td>
				<td>기본급</td>
			</tr>
		</table>
		
	</form>
</div>


</body>
</html>

ㄴㄴTest032.html_주소검색/ window.open()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test032.html</title>
<link rel="stylesheet" href="css/style.css">

<script type="text/javascript">
function searchAddr()
{
	//console.log("함수호출");
	
	// ※ window.open();
	
	//	- 형식 및 구조
	//		var result = window.open(url,name,spec,replace);
	//
	//	  ·result
	//		새로 생성된 창의 객체가 반환된다.
	//		창 객체 생성이 정상적으로 이룽지지 않을 경우 null을 반환한다.
	//	  ·url
	//		새 창으로 요청할 주소.
	//	  ·name
	//		새 창의 속성 또는 이름.
	//		(_blank / _parent / _self / _top / 임의의 이름)
	//	  ·spec
	//		새 창의 스펙 설정.
	//	  ·replace
	//	  	히스토리 목록에 새창을 만들지의 여부 지정.
	
	window.open("Test033.html","Test","width=500, height=300");
	//----내장 객체(DOM 객체)
	//**DOM은 BOM 객체 위에 생성됨**
	//			------------- 열 페이지
	//						   ------ 열렸을 때 이름
	//								  ----------------------- 스펙(위치, 크기 등..)
	
	
}
</script>

</head>
<body class="section">
<div>
	<h1>자바스크립트를 활용</h1>
	<hr>
</div>

<div class="layout">
	<h2>주소 검색</h2>
	
	<form>
		<div class="input_box btn_box">
			<span class="tit">기본 주소</span>
			<input type="text" id="addr1" readonly="readonly" class="txt">
			<input type="button" value="검색" class="btn" onclick="searchAddr()">
		</div>
		<div>
			<span class="tit">상세 주소</span>
			<input type="text" id="addr2" class="txt">
		</div>
		<div>
			<span id="txt1" style="color: red; font-weight: bold">
				시각적으로 확인 할 수 있게 처리
			</span>
		</div>
	</form>
</div>
</body>
</html>

ㄴㄴTest033.html_주소 검색(새창) / .innerHTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test033.html</title>
<link rel="stylesheet" href="css/style.css">

<script type="text/javascript">
function myAddr(addr)
{
	// 확인
	//alert("함수호출");
	
	// 확인
	//alert(addr);
	
	// 실행되지 않음
	//document.getElementById("addr").value = "1234";
	
	//window.opener.document.getElementById("addr1").value = "1234";
	//---- Test033
	//       ----- Test032
	
	window.opener.document.getElementById("addr1").value = addr;
	
	//IE 용
	//window.opener.document.getElementById("txt1").innerText = addr;
	
	//CR, FF 용
	window.opener.document.getElementById("txt1").innerHTML = addr;
	
	// 현재 창 닫기
	window.close();
}
</script>
</head>
<body class="section">
	
<div class="layout" style="padding: 20px 0;">
	<form>
		<div class="input_box btn_box">
			<span class="tit">주소 검색(새창)</span>
			<input type="text">
			<input type="button" value="검색">
		</div>
		<div>
			<ul>
				<!-- **바람직하지 않은 방법** -->
				<!-- <li><a href="Test032.html">서울 마포구 월드컵북로 1가 (1~110번지)</a></li> -->
				
				<!-- **함수호출: 그냥 함수명을 넣어서는 실행X** -->
				<!-- <li><a href="myAddr()">서울 마포구 월드컵북로 1가 (1~110번지)</a></li> -->
				<li><a href="javascript:myAddr('04044 서울 마포구 월드컵북로1가')">서울 마포구 월드컵북로 1가 (1~110번지)</a></li>
				<li><a href="javascript:myAddr('04045 서울 마포구 월드컵북로2가')">서울 마포구 월드컵북로 2가 (111~132번지)</a></li>
				<li><a href="javascript:myAddr('04046 서울 마포구 월드컵북로3가')">서울 마포구 월드컵북로 3가 (133~145번지)</a></li>
				<li><a href="javascript:myAddr('04047 서울 마포구 월드컵북로4가')">서울 마포구 월드컵북로 4가 (146~153번지)</a></li>
				<li><a href="javascript:myAddr('04048 서울 마포구 월드컵북로5가')">서울 마포구 월드컵북로 5가 (152~166번지)</a></li>
				<li><a href="javascript:myAddr('04049 서울 마포구 월드컵북로6가')">서울 마포구 월드컵북로 6가 (167~180번지)</a></li>
				<!-- 문자열 사용시 큰따옴표(") 작은따옴표(')모두 사용가능. 단, 묶어서 구분지어 사용해야함 -->
				
				<li><a href="">서울 마포구 월드컵북로 1가 (1~110번지)</a></li>
				<li><a href="">서울 마포구 월드컵북로 2가 (111~132번지)</a></li>
			</ul>
		</div>
		
	</form>
</div>	
	
</body>
</html>

ㄴㄴTest034.html_메뉴 보이기/감추기 / onmouseover, onmouseout

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test034.html</title>
<link rel="stylesheet" href="css/style.css">
<style type="text/css">
	#menuTable {display: none;}
</style>

<script type="text/javascript" src="js/myMenu.js"></script>

</head>
<body class="section">

<div>
	<h1>자바스크립트 활용</h1>
	<hr>
</div>	

<div class="layout">
	<h2>메뉴 보이기/감추기</h2>
	
	<div class="btn_box">
		<form>
			<!-- 클릭 시 메뉴 테이블 보이기 -->
			<!-- <input type="button" value="메뉴 보이기" onclick="myMenu1()"> -->
			<input type="button" value="메뉴 보이기" onclick="myMenu(1)">
			
			<!-- 클릭 시 메뉴 테이블 감추기 -->
			<!-- <input type="button" value="메뉴 감추기" onclick="myMenu2()"> -->
			<input type="button" value="메뉴 감추기" onclick="myMenu(2)">
			
			<!-- 
				버튼 위에 마우스 커서를 올려놓으면 메뉴 테이블이 보이고
				다시 버튼 위에 머물면 마우스 커서가 버튼 영역을 빠져나가면
				메뉴 테이블 감추기
			 -->
			 <input type="button" value="메뉴 보이기/감추기" onmouseover="myMenu(1)" onmouseout="myMenu(2)">
		</form>
	</div>
	
	<div id="menuTable">
		<table>
			<tr>
				<td>JAVA 기초</td>
			</tr>
			<tr>
				<td>오라클 중급</td>
			</tr>
			<tr>
				<td>JSP 고급</td>
			</tr>
			<tr>
				<td>Servlet 활용</td>
			</tr>
		</table>
	</div>
</div>


</body>
</html>

ㄴㄴjs/myMenu.js

/**
 * myMenu.js
 */
/*
function myMenu1()
{
	
}

function myMenu2()
{
	
}
*/

function myMenu(status)
{
	//**자바와는 다르게 자바스크립트에서는 매개변수가 없어도 실행가능**
	// 확인
	//alert("함수 호출~!!");
	
	//alert(status);
	
	var menu = document.getElementById("menuTable");
	
	if(status==1)
	{
		//alert("1번 확인");
		
		// 스타일 제어
		menu.style.display="block";
	}
	else
	{
		//alert("2번 확인");
		
		// 스타일 제어
		menu.style.display="none";
	}
}

ㄴㄴ (Test035.html) ■ 웹 기초 내용 정리 ■

■■■ 웹 기초 내용 정리 ■■■

○ 웹 페이지 작성

- 구조적 설계(HTML)

·컨텐츠에 대한 레이아웃 구성(부모 자식 관계 설정)

·... 태그에 대한 공부(인라인/블럭)

http://www.w3schools.com/
http://koxo.com/

- 프리젠테이션 추가(CSS)

·선택자 구성 및 설정

1. 『*』 (공용 선택자)

모든 엘리먼트를 선택한다.

2. 『E』 (엘리먼트 선택자, 태그 선택자, 타입 선택자)

엘리먼트를 선택한다.

3. 『.』 (클래스 선택자)

html 에서만 사용할 수 있으며... 예를 들어 『tr.even』은 『even』이라는 클래스를 갖고 있는 tr 엘리먼트를 선택하게 된다.

class는 하나의 페이지에서 동일한 class 를 여러 번 사용할 수 있기 때문에 반복적으로 여러 번 나오는 스타일읠 경우 용이하게 지정하여 사용할 수 있다.

4. 『#』 (아이디 선택자)
예를 들어... 『#user』라는 선택자는 아이디가 『user』인 엘리먼트를 선택하게 된다.

5. 『E F』 (하위 선택자, 자손 선택자)
E 엘리먼트 하위에 있는 F 엘리먼트를 선택하게 된다.
이 경우, F는 E의 바로 직접적인 자식 엘리먼트가 아니어도 무방하다.

6. 『E>F』 (자식 선택자)
E 엘리먼트의 자식 엘리먼트인 F 엘리먼트를 선택하게 된다.

7. 『E+F』 (인접 선택자)
E 엘리먼트와 F 엘리먼트가 서로 동등한 관계에서 인접해 있는 경우 선택하게 된다.

8. 『E:hover』, 『E:acitve』, 『E:focus』... (동적 선택자, 가상 선택자, 상태 선택자)
사용자 액션이 선택자로 구성한 상태에 해당하는 (만족하는) E 엘리먼트를 선택하게 된다.

·CSS의 선언 방법

1. 외부선언

<link rel="stylesheet" type="text/css" href="css/style.css">

2. 문서 안에 포함하여 선언

<style type="text/css">

div {...}

</style>

3. 엘리먼트(태그)에 직접 선언

<input type="text" style="width: 20px; height: 40px;">

- 동작, 행동 및 기능 추가(Javascript)

·자바스크립트 의 특징

1. 인터프리트 언어

커파일 과정이 필요없이 브라우저가 읽고... 해석하고... 실행한다.(자바스크립트 엔진)

2. 동적 데이터타입

모든 변수를 『var』 ,『let』, 『const』등으로 선언하면 끝이다.

데이터타입을 별도로 지정할 필요가 없다.

3. 객체 지향 언어

단, 자바와 다른 점은 클래스 개념을 사용하지 않으며

생성자 함수를 정의하는 형태로 객체를 사용하게 되며, 프로토타입을 활용하게 된다.

·자바스크립트가 직접적으로 많이 사용되는 용도

1. 이벤트에 반응하는 동작의 구현

2. AJAX 를 통해 페이지 로딩 과정 없이 컨텐츠 연동이나 데이터 제출 기능

3. HTML 엘리먼트 구조 / CSS 디자인 등을 동적으로 전환

4. 사용자 입력 데이터에 대한 사전 검증(서버로 전송하기 전에...)

·자바스크립트 객체

1. 내장 객체, 사용자 정의 객체

※ 내장 객체는 생성자 함수가 미리 정의되어(작성되어) 있으며,

사용자 정의 객체는 사용자가 이 생성자 함수를 직접 정의하는 것이다.

2. 사용자 정의 객체

① 객체와 연관된 데이터는 객체가 생성될 때 초기화 되어야 하는데... 생성자라고 부르는 특별한 함수가 객체를 활성화 시키는데 필요하다.

var arr = new Array();

② 생성자로 객체를 생성하기 위해서는 자바와 마찬가지로 『new』 연산자를 활용하게 된다.

③ 생성자(객체)의 이름은 첫 글자를 대문자로 표기한다.

④ 생성자 내부에 속성, 함수를 생성하기(정의하기) 위해 『this』 키워드를 사용한다.

⑤객객체의 멤버인 속성과 함수는 『.(dot)』 연산자로 접근한다.

⑥사용자 정의 객체를 만드는 기본 형식 및 구조(생성자를 구성하는 기본 형식 및 구조)

function 생성자명(인자리스트) -> 생성자 명의 첫 글자...대문자
{
// 속성 정의
this.멤버명 = 인자;

// 메소드(함수) 정의
this.멤버며 = function(인자리스트)
{
// 메소드(함수) 내부 코드
return 리턴값;
}
}

⑦프로토타입
한 객체가 가지고 있는 여러 속성과 메소드(함수)를 다른 객체(혹은 여러개 다른 객체)가 공유할 수 있도록 지원하는 개념

ex) funcion Car(x,y)
{
this.x = x;
this.y = y;

this.getDistance = function()
{
return (this.x * this.x + this.y + this.y);
}
}

-> 이 코드가 자동차(Car)를 나타내는 객체라고 가정한다.
여기서 『getDistance()』 는 원래 위치부터 이동 거리를 계산하는 함수라고 가정한다.
여러 개의 자동차를 사용하는 경우...

var c1 = new Car(10,20);
var c2 = new Car(10,50);
:
var c100 = new Car(10,42);

이와 같은 구문을 활용하여 객체를 생성했다면... 객체들마다 『getDistance()』 함수를 가지게 되면서 낭비하게 된다.

이 때... 객체들마다 함수를 가지는 것이 아니라 하나의 함수를 만들어 공유하기 위해 프로토타입을 정의하게 된다.

※ 모든 객체는 프로토타입이라느 숨겨진 객체를 포함하고 있다.
『Car』객체의 프로토타입은 『Car.prototype』이라는 숨겨진 객체를 갖고 있는 것이다.

funcion Car(x,y)
{
this.x = x;
this.y = y;
}

Car.prototype.getDistance = function()
{
return (this.x * this.x + this.y + this.y);
}

var c3 = new Car(10, 80);
c3.getDistance();

ㄴㄴTest036.html_자바스크립트 객체(사용자 정의 객체)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test036.html</title>
<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript">
function objTest()
{
	// 확인
	//alert("함수호출");
	
	// 사용자 정의 객체(생성자) 정의
	function Blog(b,d)
	{
		// 객체를 구성하는 속성
		this.body = b;
		this.date = d;
	}
	
	// 객체 1개 생성 -----------------------------------
	var blog = new Blog("블로그 개설", "2023-11-15");
	
	// 생성된 객체의 속성(멤버) 접근
	var str = blog.body + " / " + blog.date;
	
	// 확인
	//alert(str);
	//--==>> 블로그 개설 / 2023-11-15
	
	// 객체 여러개 생성 -----------------------------------
	// 1) 방법1
	/* 
	var ob1 = new Blog("블로그 개설", "2023-11-15");
	var ob2 = new Blog("블로그 레이아웃 구성", "2023-11-16");
	var ob3 = new Blog("생성자 이용한 객체 생성", "223-11-17");
	
	var arr = [ob1, ob2, ob3];
	 */

	// 2) 방법2
	var arr = [new Blog("블로그 개설", "2023-11-15")
			 , new Blog("블로그 레이아웃 구성", "2023-11-16")
			 , new Blog("생성자 이용한 객체 생성", "2023-11-17")];
	
	//str = "<table border='1' class='table'>";
	str = "<table class='table'>";
	str += "<tr><th>제목</th><th>날짜</th></tr>";
	
	for (var i = 0; i < arr.length; i++)
	{
		str += "<tr>";
		str += "<td>" + arr[i].body + "</td>"
		str += "<td>" + arr[i].date + "</td>" ;
		str += "</tr>";
	}
	
	str += "</table>";
	
	var result = document.getElementById("result");
	
	result.innerHTML = str;
	
	
}
</script>

</head>
<body class="section">
	
<div>
	<h1>자바스크립트 활용</h1>
	<hr>
</div>	

<div class="layout">
	<h2>자바스크립트 객체(사용자 정의 객체)</h2>
	
	<div class="btn_box">
		<input type="button" value="사용자 정의 객체 테스트" onclick="objTest()">
	</div>
	<div id="result"></div>
</div>
</body>
</html>

'📝 배우고 익히기 + > Web' 카테고리의 다른 글

(72)[Web]8일차: ■ 웹 어플리케이션 ■, ■ JSP(Java Server Pages) ■, F_WebApp04>Test001~004, web.xml (0)	2023.12.06
(72)[Web]8일차: ((Javascript))F_WebApp03>Test037~038 (2)	2023.12.06
(70)[Web]6일차: ((Javascript))F_WebApp03>Test026~030 (1)	2023.12.04
(70)[Web]5일차: ((Javascript))F_WebApp03>Test022~025 (2)	2023.12.01
(69)[Web]4일차: ((Javascript)) F_WebApp03>Test015~021 (1)	2023.12.01

🍀보통 기록합니다💭

(71)[Web]7일차: ((Javascript))F_WebApp03>Test031~036

1. 2023.12.5(화)

F_WebApp03

ㄴ C:\WebStudy\WebApp03\WebContent

ㄴㄴTest031_1.html_선택목록(select) 다루기/ formclear(), .reset(), .forms[0].reset(), .focus()

ㄴㄴTest031.html_선택목록(select) 다루기(내가 푼 풀이)

ㄴㄴTest032.html_주소검색/ window.open()

ㄴㄴTest033.html_주소 검색(새창) / .innerHTML

ㄴㄴTest034.html_메뉴 보이기/감추기 / onmouseover, onmouseout

ㄴㄴjs/myMenu.js

ㄴㄴ (Test035.html) ■ 웹 기초 내용 정리 ■

- 구조적 설계(HTML)

- 프리젠테이션 추가(CSS)

·선택자 구성 및 설정

·CSS의 선언 방법

- 동작, 행동 및 기능 추가(Javascript)

·자바스크립트 의 특징

·자바스크립트가 직접적으로 많이 사용되는 용도

·자바스크립트 객체

ㄴㄴTest036.html_자바스크립트 객체(사용자 정의 객체)

'📝 배우고 익히기 + > Web' 카테고리의 다른 글

티스토리툴바

(71)[Web]7일차: ((Javascript))F_WebApp03>Test031~036

1. 2023.12.5(화)

F_WebApp03

ㄴ C:\WebStudy\WebApp03\WebContent

ㄴㄴTest031_1.html_선택목록(select) 다루기/ formclear(), .reset(), .forms[0].reset(), .focus()

ㄴㄴTest031.html_선택목록(select) 다루기(내가 푼 풀이)

ㄴㄴTest032.html_주소검색/ window.open()

ㄴㄴTest033.html_주소 검색(새창) / .innerHTML

ㄴㄴTest034.html_메뉴 보이기/감추기 / onmouseover, onmouseout

ㄴㄴjs/myMenu.js

ㄴㄴ (Test035.html) ■ 웹 기초 내용 정리 ■

- 구조적 설계(HTML)

- 프리젠테이션 추가(CSS)

·선택자 구성 및 설정

·CSS의 선언 방법

- 동작, 행동 및 기능 추가(Javascript)

·자바스크립트 의 특징

·자바스크립트가 직접적으로 많이 사용되는 용도

·자바스크립트 객체

ㄴㄴTest036.html_자바스크립트 객체(사용자 정의 객체)

'📝 배우고 익히기 + > Web' 카테고리의 다른 글

관련글

티스토리툴바