JavaScript와 친해지길 바래 🙏(10) - event, 디버그

joyfulwave·2022년 9월 23일
EventJavaScriptdebugdebuggingjsprogramming이벤트자바스크립트코딩
0

JavaScript와 친해지길 바래

목록 보기
11/11

재밌는 이벤트의 세계, JavaScript


💡 이벤트

  • 특정한 상황이 발생했을 때 호출되도록 사용자가 정의하는 함수들을 이벤트라고 해요.

📎 이벤트 활용

⚫️ (1) 인라인

<input type="button" 이벤트이름="function()" />

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>10 + 50 = <span id="question">?</span> </h1>
    <!-- 
   token tag"><input type="button" value="결과확인" onclick="sum()">
    <script>
        // 1. 결과확인을 눌렀을 때 10 + 50 의 값을 span태그 안에 넣어라
        function sum(){
            let mytag = document.getElementById('question');
            mytag.innerHTML = 60;
        }
    </script>
</body>
</html>

⚫️ (2) Property Listener

  • 인라인 방식에 비해 html과 javascript를 분리할 수 있다는 장점이 있어요.
  • 이벤트 객체 : 이벤트가 실행된 맥락의 정보가 필요할 때는 이벤트 객체를 사용하며 인자값으로 전달돼요.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" id="target" value="button"/>
  
  	<script>
        let t = document.getElementById("target");
   		 // eventObj : 이벤트 객체 
        t.onclick = function(eventObj){
            alert("hello world, " + eventObj.target.value);
        };
    </script>
</body>
</html>

⚫️ (3) addEventListener()

  • 가장 권장하는 방식이에요.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" id="target1" value="button1"/>
    <input type="button" id="target2" value="button2"/>

    <script>
      	// id이름으로 HTML 요소를 가져온다.
        let t1 = document.getElementById('target1');
        let t2 = document.getElementById('target2');
      
		// eventObj : 이벤트 객체 
        function btn_listener( eventObj ){
            switch(eventObj.target.id){
                case 'target1' : 
                    alert("target1!!!");
                    break;
                case 'target2' : 
                    alert("target2!!!");
                    break;
            }
        }

        t1.addEventListener('click', btn_listener);
        t2.addEventListener('click', btn_listener);
    </script>
</body>
</html>


📎 Property VS addEventListener

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" id="target1" value="property">
    <input type="button" id="target2" value="listener">
    <script>
        function onclick(){
            alert("onClick1!!!");
        }
        function onclick2(){
            alert("onClick2!!!");
        }

        // property 방식
        // onclick2만 작동을한다
        document.getElementById('target1').onclick = function(){
            onclick();
        }
        document.getElementById('target1').onclick = function(){
            onclick2();
        }

        // addEventListener 방식
        // onclick, onclick2 모두 작동 한다.
        document.getElementById('target2').addEventListener('click', onclick);
        document.getElementById('target2').addEventListener('click', onclick2);

        // 이벤트 제거
        document.getElementById('target2').removeEventListener('click', onclick);
    </script>
</body>
</html>


💡 이벤트 취소

이벤트를 활용한 모습마다 이벤트 취소의 모습이 달라요.

⚫️ inline, property

return false;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        <label>prevent event on</label>
        <input type="checkbox" id="prevent">
    </p>
    <p>
        <a href="https://www.naver.com" id="target1">naver</a>
    </p>
    <p>
        <form action="https://www.naver.com">
            <input type="submit" id="target2">
        </form>
    </p>

    <script>  
		// property 형식의 이벤트를 취소할 때는 return false; 를 입력해준다.
      	document.getElementById('target1').onclick = function(){
            if(document.getElementById('prevent').checked){
      			// 이벤트 취소
                return false;
            }
        };

        document.getElementById('target2').onclick = function(){
            if(document.getElementById('prevent').checked){
     			 // 이벤트 취소
                return false;
            }
        };     
    </script>
</body>
</html>

(1) prevent event on 체크 전

(2) prevent event on 체크 전 : 연결한 페이지로 넘어가요

(3) prevent event on 체크 후 : 연결한 페이지로 넘어가는 이벤트가 취소돼요.

⚫️ addEventListener

event.preventDefault();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        <label>prevent event on</label>
        <input type="checkbox" id="prevent">
    </p>
    <p>
        <a href="https://www.naver.com" id="target1">naver</a>
    </p>
    <p>
        <form action="https://www.naver.com">
            <input type="submit" id="target2">
        </form>
    </p>

    <script>
      
        	// addEventListener 형식의 이벤트를 취소할 때는 event.preventDefault(); 를 입력해준다.
      	document.getElementById('target1').addEventListener('click', function( event ){
            if(document.getElementById('prevent').checked){
      			// 이벤트 취소
                event.preventDefault();
            }
        });

        document.getElementById('target2').addEventListener('click', function( event ){
            if(document.getElementById('prevent').checked){
      			// 이벤트 취소
                event.preventDefault();
            }
        });
    </script>
</body>
</html>

(1) prevent event on 체크 전

(2) prevent event on 체크 전 : 연결한 페이지로 넘어가요

(3) prevent event on 체크 후 : 연결한 페이지로 넘어가는 이벤트가 취소돼요.

📎 이벤트 예제

⚫️ (1)

[문제] 아래의 출력결과와 같이 [input]에 어떠한 글을 적어 넣으면 [p]요소에 같은 글이 출력되도록 해라.

[기본 HTML]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="result"></p>
    <input id="target" type="text"/>

    <script>
            // 문제 풀이
    </script>
</body>
</html>

[문제 풀이]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="result"></p>
    <input id="target" type="text"/>

    <script>
        let t = document.getElementById('target');
        t.addEventListener('change', function(event){
            document.getElementById('result').innerHTML = event.target.value;
        });
    </script>
</body>
</html>

⚫️ (2)

[문제] 아래의 출력결과와 같이 [input]을 클릭하면 Console 창에 "2번 이벤트 발생!!!" 출력. [input]이 아닌 공간을 클릭하면 Console 창에 "1번 이벤트 발생!!!" 출력

[기본 HTML]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input id="target" type="text">

    <script>
		// 문제 풀이
    </script>
</body>
</html>

⚫️ (3)

[문제] 아래의 출력결과와 같이 해당 항목들을 다 체크하지 않으면 경고창을 띄어 사용자가 모든 항목을 채울 수 있도록 해라.

[기본 HTML]

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>form</title>
		<style type="text/css">
			/** 하나의 입력 영역을 정의하는 <div>태그 */
			.input_group {
				height: 42px;
				border-bottom: 1px dotted #ccc;
				font: 1em/40px '돋움', 'Helvetica';
			}
			
			/** 입력양식의 제목을 볼 수 있게 하는 태그 */
			.input_group > label {
				width: 80px; display: inline-block;
			}
		</style>
		
	</head>

	<body>
		<form name="form1" onsubmit="doSubmit(); return false;">
			<fieldset>
				<legend>회원가입</legend>
				<div class="input_group first">
					<label>이름</label>
					<input type="text" name="user_name" />
				</div>
				<div class="input_group">
					<label>성별</label>
					<label><input type="radio" name="gender" value="M"> 남자</label>
					<label><input type="radio" name="gender" value="F"> 여자</label>
				</div>
				<div class="input_group">
					<label>직업</label>
					<select name="job">
						<option>----- 선택하세요 -----</option>
						<option value="dev">프로그래머</option>
						<option value="pub">퍼블리셔</option>
					</select>
				</div>
				<div class="input_group">
					<label>취미</label>
					<label><input type="checkbox" value="축구" name="hobby"> 축구</label>
					<label><input type="checkbox" value="농구" name="hobby"> 농구</label>
					<label><input type="checkbox" value="야구" name="hobby"> 야구</label>
				</div>
				<div class="input_group">
					<label>&nbsp;</label>
					<input type="submit" name="button" value="제출" />
					<input type="reset" name="button2" value="리셋" />
				</div>
			</fieldset>
		</form>

		<script>
          // 문제 풀이
		</script>
	</body>
</html>

[문제 풀이]

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>form</title>
		<style type="text/css">
			/** 하나의 입력 영역을 정의하는 <div>태그 */
			.input_group {
				height: 42px;
				border-bottom: 1px dotted #ccc;
				font: 1em/40px '돋움', 'Helvetica';
			}
			
			/** 입력양식의 제목을 볼 수 있게 하는 태그 */
			.input_group > label {
				width: 80px; display: inline-block;
			}
		</style>
		
	</head>

	<body>
		<form name="form1" onsubmit="doSubmit(); return false;">
			<fieldset>
				<legend>회원가입</legend>
				<div class="input_group first">
					<label>이름</label>
					<input type="text" name="user_name" />
				</div>
				<div class="input_group">
					<label>성별</label>
					<label><input type="radio" name="gender" value="M"> 남자</label>
					<label><input type="radio" name="gender" value="F"> 여자</label>
				</div>
				<div class="input_group">
					<label>직업</label>
					<select name="job">
						<option>----- 선택하세요 -----</option>
						<option value="dev">프로그래머</option>
						<option value="pub">퍼블리셔</option>
					</select>
				</div>
				<div class="input_group">
					<label>취미</label>
					<label><input type="checkbox" value="축구" name="hobby"> 축구</label>
					<label><input type="checkbox" value="농구" name="hobby"> 농구</label>
					<label><input type="checkbox" value="야구" name="hobby"> 야구</label>
				</div>
				<div class="input_group">
					<label>&nbsp;</label>
					<input type="submit" name="button" value="제출" />
					<input type="reset" name="button2" value="리셋" />
				</div>
			</fieldset>
		</form>

		<script>
			function doSubmit(){
				// 폼 객체
				let frm = document.form1;

				// 이름 입력여부 검사
				// 값이 없을 때 true 값을 return
				if(!frm.user_name.value){
					alert("이름을 입력하세요.");
					frm.user_name.focus();
					return false;
				}

				// 라디오버튼의 입력 여부 검사
				if(!frm.gender[1].checked && !frm.gender[1].checked){
					alert("성별을 선택하세요.");
					return false;
				}

				// select 요소에 대한 검사
				if(frm.job.selectedIndex < 1){
					alert("직업을 선택해주세요.");
					return false;
				}

				// 체크박스 선택 여부 검사
				let chk = false;

				for( let i = 0; i < frm.hobby.length; i++ ){
					if(frm.hobby[i].checked){
						chk = true;
						break;
					}
				}
				if(!chk){
					alert("취미를 선택해 주세요.");
					return false;
				}

				// 입력 확인하기
				if(confirm("입력하신 내용이 맞습니까?")){
					frm.submit();
				}
			}
		</script>
	</body>
</html>

⚫️ (4)

[문제] 아래의 출력결과와 같이 각각의 이벤트가 발생할 때 info에 해당 이벤트가 실행되는 getMilliseconds()가 출력되게 해라.

[기본 HTML]


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	body{
		background-color: black;
		color: white;
	}
	#target{
		width: 200px;
		height: 200px;
		background-color: green;
		margin: 10px;
	}
	table{
		border-collapse: collapse;
		margin: 10px;
		float: left;
		width: 200px;
	}
	td,th{
		padding: 10px;
		border: 1px solid gray;
	}
</style>
</head>
<body>
	<div id="target"></div>
	<table>
		<tr>
			<th>event type</th>
			<th>info</th>
		</tr>
		<tr>
			<td>click</td>
			<td id="elmclick"></td>
		</tr>
		<tr>
			<td>dblclick</td>
			<td id="elmdblclick"></td>
		</tr>
		<tr>
			<td>mousedown</td>
			<td id="elmmousedown"></td>
		</tr>
		<tr>
			<td>mouseup</td>
			<td id="elmmouseup"></td>
		</tr>
		<tr>
			<td>mousemove</td>
			<td id="elmmousemove"></td>
		</tr>
		<tr>
			<td>mouseover</td>
			<td id="elmmouseover"></td>
		</tr>
		<tr>
			<td>mouseout</td>
			<td id="elmmouseout"></td>
		</tr>
		<tr>
			<td>contextmenu</td>
			<td id="elmcontextmenu"></td>
		</tr>
	</table>
	
	<script>
      // 문제 풀이
	</script>

</body>
</html>

[문제 풀이]


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	body{
		background-color: black;
		color: white;
	}
	#target{
		width: 200px;
		height: 200px;
		background-color: green;
		margin: 10px;
	}
	table{
		border-collapse: collapse;
		margin: 10px;
		float: left;
		width: 200px;
	}
	td,th{
		padding: 10px;
		border: 1px solid gray;
	}
</style>
</head>
<body>
	<div id="target"></div>
	<table>
		<tr>
			<th>event type</th>
			<th>info</th>
		</tr>
		<tr>
			<td>click</td>
			<td id="elmclick"></td>
		</tr>
		<tr>
			<td>dblclick</td>
			<td id="elmdblclick"></td>
		</tr>
		<tr>
			<td>mousedown</td>
			<td id="elmmousedown"></td>
		</tr>
		<tr>
			<td>mouseup</td>
			<td id="elmmouseup"></td>
		</tr>
		<tr>
			<td>mousemove</td>
			<td id="elmmousemove"></td>
		</tr>
		<tr>
			<td>mouseover</td>
			<td id="elmmouseover"></td>
		</tr>
		<tr>
			<td>mouseout</td>
			<td id="elmmouseout"></td>
		</tr>
		<tr>
			<td>contextmenu</td>
			<td id="elmcontextmenu"></td>
		</tr>
	</table>
	
	<script>
		let t = document.getElementById('target');	

		function handler( event ){
			let time = new Date();
			let timestr = time.getMilliseconds();
			
			let info = document.getElementById('elm' + event.type);
			info.innerHTML = timestr;
		}

		t.addEventListener('click', handler);
		t.addEventListener('dblclick', handler);
		t.addEventListener('mousedown', handler);
		t.addEventListener('mouseup', handler);
		t.addEventListener('mousemove', handler);
		t.addEventListener('mouseover', handler);
		t.addEventListener('mouseout', handler);
		t.addEventListener('contextmenu', handler);
	</script>

</body>
</html>


💡 디버그

  • 프로그래밍 과정 중에 발생하는 오류나 비정상적인 연산, 즉 버그를 찾고 수정하는 것이에요.
  • 이 과정을 디버깅(Debugging) 이라고 해요.

⚫️ 디버깅이 필요한 사이트에서 F12를 눌러 개발자도구를 켜주세요. [Sources] 에서 해당 사이트 html 파일에 들어가면 소스 코드들을 볼 수 있고, 원하는 코드 줄을 클릭하면 BreakPoints를 설정 할 수 있어요.

⚫️ 사이트에서 동작을하면 (제출 등) BreakPoints에서 멈추게 되고 이후에 동작을 실행하려면 재생 버튼을 눌러주면 돼요. 자바스크립트의 오류를 이 과정을 통해 잘 알아볼 수 있어요.



조금은 JavaScript와 친해졌기를!🎈



출처
https://media.giphy.com/media/qqtvGYCjDNwac/giphy.gif
https://media.giphy.com/media/26tPplGWjN0xLybiU/giphy.gif

profile
joyfulwave
이전 포스트

JavaScript와 친해지길 바래 🙏(9) - Navigator, reload

0개의 댓글