Day 58

ChangWoo·2022년 11월 25일
0

중앙 HTA

목록 보기
11/51

오늘은 먼저 어제에 이어 엘리먼트 조작에 대해 배우는 시간을 가졌다. 그리고 저번에 하다가 중간에 멈춰진 이벤트에 대해 더 배우는 시간을 가졌다. 마지막 2시간은 어제에 이어서 팀원들과 함께 다음주부터 진행될 프로젝트 제작에 대해 이야기하는 시간을 가졌다. 일단 어제 정해진 각자 역할에 대해 구체적으로 어떤 부분을 제작해야 할지에 대해서 이야기를 해보았고 이후에 강사님께서 피드백 해주시는 시간을 가졌다. 정말 다음주부터는 프로젝트가 시작이 된다. 기대가 되면서도 걱정이 된다. 그래서 주말동안 각자 맡은 부분을 구체적으로 어떻게 구현할 것인지 이야기 하기로 하였다.

엘리먼트 조작

폼 요소의 활성화/비활성화, 읽기전용여부 조회 변경하기

	<input type="text" name="username" disabled/>
    <input type="text" name="userid" value="hong" 
	<button id="btn-register" disabled="disabled">등록</button>

	var el1 = document.querySelector("[name=username]");
	var el2 = document.querySelector("#btn-register");

	비활성화/읽기전용으로 변경하기
		el1.disabled = true;
		el2.disabled = true;	// 모든 폼요소는 비활성화, 활성화가 가능하다.
		el1.readOnly = true;
		el2.readOnly = true;	// 버튼, 체크박스, 라디오버튼, 셀렉터박스에 읽기전용 설정은 의미가 없다.
	활성화/편집가능으로 변경하기
		el1.disabled = false;
		el2.disabled = false;
		el1.readOnly = false;
		el2.readOnly = false;	// 버튼, 체크박스, 라디오버튼, 셀렉터박스에 읽기전용 설정은 의미가 없다.
	* 읽기전용으로 지정된 입력요소 : 값을 수정할 수 없다. 서버로 값이 제출된다.
	* 비활성화로 지정된 입력요소 : 값을 수정할 수 없다. 서버로 값이 제출되지 않는다.
day4/sample1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폼요소의 활성화/비활성화, 읽기전용여부 조회/변경하기</title>
</head>
<body>
	<h1>폼요소의 활성화/비활성화, 읽기전용여부 조회/변경하기</h1>
	
	<form>
		<div>
			<label>입력필드 : </label>
			<input type="text" name="username" value="홍길동" readonly="readonly"/>
		</div>
		<div>
			<label>입력필드 : </label>
			<input type="checkbox" name="skill" value="java">자바
			<input type="checkbox" name="skill" value="python">파이썬
		</div>
		<div>
			<label>입력필드 : </label>
			<select name="city">
				<option value=""> 선택하세요</option>
				<option value="서울"> 서울</option>
				<option value="부산"> 부산</option>
				<option value="대구"> 대구</option>
				<option value="인천"> 인천</option>
				<option value="광주"> 광주</option>
			</select>
		</div>
		<div>
			<button id="btn-register">등록</button>
		</div>
	</form>
	
	<div>
		<button id="btn-1" onclick="disabledField();">입력필드 비활성화 하기</button>
		<button id="btn-2" onclick="enabledField();">입력필드 활성화 하기</button>
		<button id="btn-3" onclick="readonlyField();">입력필드 읽기전용으로 변경하기</button>
		<button id="btn-4" onclick="editableField();">입력필드 편집가능 변경하기</button>
	</div>
	
	<script type="text/javascript">
		var el1 = document.querySelector("[name=username]");
		var el2 = document.querySelectorAll("[name=skill]")[0];
		var el3 = document.querySelectorAll("[name=skill]")[1];
		var el4 = document.querySelector("[name=city]");
		var el5 = document.querySelector("#btn-register");
	
		function disabledField() {
			el1.disabled = true;
			el2.disabled = true;
			el3.disabled = true;
			el4.disabled = true;
			el5.disabled = true;
		}
		
		function enabledField() {
			el1.disabled = false;
			el2.disabled = false;
			el3.disabled = false;
			el4.disabled = false;
			el5.disabled = false;
		}
		
		function readonlyField() {
			el1.readOnly = true;	// 읽기전용은 사용자가 직접 값을 입력하는 요소에서만 적용된다.
			el2.readOnly = true;	// 체크박스, 읽기전용 지정이 의미가 없다.
			el3.readOnly = true;	// 체크박스, 읽기전용 지정이 의미가 없다.
			el4.readOnly = true;	// 셀렉트박스(콤보박스), 읽기전용 지정이 의미가 없다.
			el5.readOnly = true;	// 버튼, 읽기전용 지정이 의미가 없다.
		}
		
		function editableField() {
			el1.readOnly = false;	// 읽기전용은 사용자가 직접 값을 입력하는 요소에서만 적용된다.
		}
	</script>
</body>
</html>

이벤트

폼 이벤트

day4/sample2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폼 이벤트</title>
</head>
<body>
	<h1>폼 이벤트</h1>
	<form method="post" action="login.jsp" onreset="return true;" onsubmit="return checkLoginform();">
		<div>
			<label>사용자명</label>
			<input type="text" name="username" />
		</div>
		<div>
			<label>비밀번호</label>
			<input type="password" name="userpwd" />
		</div>
		<button type="reset">취소</button>
		<button type="submit">로그인</button>
	</form>
	
	<script type="text/javascript">
		/*
			폼 이벤트
				onsubmit 이벤트
					submit 버튼을 클릭하면, <form />태그에서 onsubmit 이벤트가 발생한다.
					onsubmit 이벤트에 대한 브라우저의 기본동작은 폼 입력값을 서버로 제출하는 것이다.
					onsubmit 이벤트의 활용
					   - 폼 입력값을 체크해서, 폼 입력값이 유효한 경우에만 서버로 제출되게 한다.
					* <button>버튼</button>, <button type="submit">버튼</button>, <input type="submit" value="버튼" /> 이 버튼들을 클릭하면
					  <form /> 태그에서 onsubmit 이벤트가 발생한다.
					* <button type="button">버튼</button>을 클릭하면 <form /> 태그에서 onsubmit 이벤트가 발생하지 않는다.
				onreset 이벤트
					reset 버튼을 클릭하면, <form /> 태그에서 onreset 이벤트가 발생한다.
					onreset 이벤트에 대한 브라우저의 기본동작은 폼 입력값을 원래 값으로 리셋하는 것이다.
		*/
		
		function checkLoginform() {
					var el1 = document.querySelector("[name=username]");
					var el2 = document.querySelector("[name=userpwd]");
					
					if (el1.value === "") {
						alert("사용자명은 필수입력값입니다.");
						return false;
					}
					if (el2.value === "") {
						alert("비밀번호는 필수입력값입니다.");
						return false;
					}
					
					return true;
		}
	</script>
</body>
</html>
  • return false : 기본 동작이 일어나지 않게 한다.
  • return true : 기본 동작이 일어나지 않게 한다.
  • 기본동작의 대표적인 것 : onreset / onsubmit

홈 화면

  • 취소 버튼 클릭 시 다시 홈 화면으로 돌아온다.

사용자명을 적지 않았을 때


비밀번호를 적지 않았을 때

링크의 클릭 이벤트

day4/sample3.jsp
  • event를 적으면 target에 내가 찾는 그 엘리먼트가 들어있다.

이벤트 버블링

  • 엘리먼트에서 이벤트가 발생하면 상위 엘리먼트로 이벤트가 전파되는 것

day4/sample4.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 버블링</title>
<style>
	div, p {padding: 30px; border: 1px solid black; }
</style>
</head>
<body>
	<h1>이벤트 버블링</h1>
	
	<div id="outter-box" onclick="handler4(event)">
		<div id="inner-box" onclick="handler3(event)"> 
			<p onclick="handler2(event)">
				<img src="../resources/images/sample.jpg" width="40" height="100" onclick="handler1(event);">
			</p>
		</div>
	</div>
	
	<script type="text/javascript">
		function handler1(event) {
			// 이벤트 버블링을 차단시킨다.
			event.stopPropagation();
			
			console.log("handler1111 실행됨");
			console.log("handler1111 -> ", event.target)
		}
		function handler2(event) {
			console.log("handler2222 실행됨");
			console.log("handler2222 -> ", event.target)
		}
		function handler3(event) {
			console.log("handler3333 실행됨");
			console.log("handler3333 -> ", event.target)
		}
		function handler4(event) {
			console.log("handler4444 실행됨");
			console.log("handler4444 -> ", event.target)
		}
	</script>
	
</body>
</html>

handler2를 클릭 시

  • handler1은 실행하지 않고 handler2,3,4만 실행된다.

onkeyup으로 변경하면 실행되지 않는다. (같은 종류일 때만 실행된다.)

stopPropagation 실행 시

  • handler1을 클릭해도 handler2,3,4가 같이 실행되지 않는다.
  • ImmediatePropagation은 click으로 handler가 3번 등록되었다면, 제일 먼저 실행된 것 이외에는 실행되지 않는다.

이벤트 발생시 기본동작이 실행되지 않게 하기

  • 왼쪽 : 어떨때는 실행되게 하고 다른때는 실행되지 않게 하기
  • 오른쪽 : 무조건 실행되지 않게 하기
profile
ChangWoo
한 걸음 한 걸음 나아가는 개발자
이전 포스트

Day 57

다음 포스트

Day 59

0개의 댓글