학원 day56. JavaScript 객체, 함수, 이벤트

기록 2022. 11. 23. 13:20

자바스크립트는 객체를 만드는데 설계도가 필요없고 프로토타입으로 만들어지는데 프로토타입은 원래부터 존재하고 있다.

객체 안에 들어가있는 것을 프로퍼티라고 하는데, 설계도라는게 없기 때문에 객체 생성 후에도 프로퍼티를 자유롭게 추가하고 삭제하는게 가능하다.

객체 안에는 name:value라는 형태로 값이 저장될 수 있고, 기능이 저장될 수 있다. 자바의 map과 유사하다.

        자바스크립트의 객체
            - 클래스(설계도)가 필요없다.
            - 객체의 구성요소는 name:value의 쌍으로 이루어져 있다.
            - 객체 생성 후에도 객체의 구성요소를 추가/변경/삭제 가능하다.
            - 자바스크립트의 객체는 자바의 Map과 유사하다.

        자바스크립트 객체의 생성
            - 빈 객체의 생성
                var obj = {};    // 객체 리터럴

- 구성요소를 가지고 있는 객체 생성
var obj = {no:100, title:"이것이 자바다", author:"신용권", price:35000, discountRate:0.15, onSell:true};

            - 생성된 객체에 구성요소 추가하기
                var obj = {};
                obj.no = 100; // obj -> {no:100}이 되었다.
                obj["title"] = "이것이 자바다."  // obj -> {no:100, title:"이것이 자바다"}이 되었다.
                obj.price = 35000; // obj -> {no:100, title:"이것이 자바다", price:35000}이 되었다.
                obj.price = 32000; // obj -> {no:100, title:"이것이 자바다", price:32000}이 되었다.

<title>자바스크립트의 객체</title>
</head>
<body>
	<h1>자바스크립트의 객체</h1>
	
	<script type="text/javascript">
   
		// 빈 객체 생성하기
		var obj = {};
		console.log("첫번째 객체", obj);		
		
		// 구성요소를 포함하고 있는 객체 생성하기
		var obj2 = {no:100, title:"이것이 자바다", price:35000, discountPrice:32000, onSell:true, stock:30};
		console.log("두번째 객체", obj2);
		
		// 객체를 생성하고, 구성요소 추가/삭제하기
		var obj3 = {};
		console.log("세번째 객체", obj3);
		obj3.userId='hong';
		obj3.name="홍길동";
		obj3.deleted = false;
		obj3.point = 14000;
		console.log("세번째 객체-2", obj3);
		delete obj3.userId;
		console.log("세번째 객체-3", obj3);
		
		// 다양한 값을 포함하는 객체
		var obj4 = {
			name: "블랙펜서, 와칸다 포에버",      // 값: 문자열
			genre: ['액션', '어드벤처', 'SF'],  // 값: 배열
			score: 6.1,                      // 값: 숫자(실수)
			runningTime: 161,                // 값: 숫자(정수)
			act: [                           // 값: 배열
				{name:"레티티아 라이트", role:"슈리역", engName:"Letitia Wright"}, // 각 배열의 값: 객체다.
				{name:"류피타 뇽오", role:"나키아 역", engName:"Lupita Myoung'o"},
				{name:"다나이 구리라", role:"오코예 역", engName:"Danai Gurira"}
			]
		}
		// 객체의 프로퍼티값 출력
		console.log("영화제목", obj4.name);
		console.log("영화장르", obj4.genre[0], obj4.genre[1], obj4.genre[2]);
		console.log("영화평점", obj4.score);
		console.log("상영시간", obj4.runningTime);
		console.log("배우1", obj4.act[0].name)
		console.log("배우2", obj4.act[1].name)
		console.log("배우3", obj4.act[2].name)
	</script>
</body>

genre는 문자열이 여러개 들어있는 배열이 값이고, act의 값은 객체가 여러개 들어 있는 배열이다.

세미콜론은 붙여도 되고 안붙여도 된다. 세미콜론을 안붙여도 인터프리터가 자동으로 붙여준다. 하지만, 붙여주는게 좋다.

자바스크립트의 배열
   - 가변길이 배열
   - Java의 List와 유사
   - 순서있는 값의 리스트
     [값, 값, 값, 값]
          * 값의 타입이 달라도 상관없다.
          * 자바스크립트의 배열은 주로 같은 타입의 값을 여러 개 저장할 때 사용한다.
   - index를 이용해서 값을 조작(추가, 변경, 조회)
   - 사용목적 : 같은 타입의 값을 여러 개 다룰 때 사용한다.

   var arr = [];   // 자바스크립트의 배열 리터럴

자바스크립트의 객체
   - 클래스없이 생성한다.
   - name:value의 쌍으로 구성된다.
   - Java의 Map와 유사
   - name:value쌍의 집합
          [이름:값, 이름:값, 이름:값]
          * 속성 이름은 중복될 수 없고 고유해야하며, 속성 값은 중복으로 들어갈 수 있다.
   - 이름으로 값을 조작(추가, 변경, 조회)
   - 사용목적 : 다양한 타입의 값을 이름을 붙여서 다룰 때 사용한다.

   var obj = {}   // 자바스크립트의 객체 리터럴

함수
       - 특정 기능을 처리하는 자바스크립트 코드의 묶음
함수의 구성요소
- 함수의 선언부
function 함수명(매개변수명, 매개변수명, 매개변수명, ...)
              * function은 함수를 나타내는 키워드다.
              * 함수명은 다른 함수와 구별되는 식별자다.
              * 매개변수는 변수의 타입은 필요없고, 변수명만 지정하면 된다.
              * 반환타입을 정의하지 않는다.
               모든 함수는 값을 반환한다.
               return문을 사용해서 값을 반환한다.
               return문이 없는 함수는 undefined를 반환한다. (반환을 하긴 함)
     - 함수의 바디부
* {}으로 표시된다.
* {}내에 필요한 수행문을 작성한다.

함수명 작성규칙
- 영어대소문자, $, _, 숫자 사용가능하다.(숫자로 시작할 수 없다.)
* 함수명이 _로 시작하면 보통은 private 함수로 간주한다. (자바스크립트에서 실제로 private이라는 접근제한자는 없지만 일부러 호출 안하는 것임)
예시)
function $(){ ... }
function _get(){ ... }

=> 매개변수의 갯수는 매개변수 호출에 아무런 영향을 주지 않는다.

=> arguments(인수) 안에는 함수가 전달받은 모든 값이 들어있다.

함수 선언식과 함수 표현식

함수 선언식
function 함수명(매개변수, 매개변수) {
수행문;
}
* 이름있는 함수를 선언한다.

함수 표현식
var 변수명 = function(매개변수, 매개변수){
수행문;
}
* 이름없는 함수를 정의하고, 그 함수를 변수에 대입시킨다.

함수 선언식과는 다르게 함수표현식으로 정의된 함수는 해당 표현식 이후 수행문에서만 사용가능하다.

대입은 함수가 실행된 후에 대입할 수 있는 것이기 때문이다.

<title>자바스크립트 함수</title>
</head>
<body>
	<h1>자바스크립트 함수</h1>
	
	<script type="text/javascript">
	
		fn1(20, 40);
		// fn2(30, 60); // 오류발생, 함수표현식으로 정의된 함수는 해당 표현식 이후 수행문에서만 사용가능하다.		
		
		// 함수 선언식으로 함수 정의
		function fn1(x, y) {
			console.log("fn1이 실행됨");
			console.log("fn1의 매개변수값", x, y);
		}
		
		// 함수 표현식으로 함수 정의		
		var fn2 = function(x, y) {
			console.log("이름없는 함수가 실행됨");
			console.log("이름없는 함수의 매개변수값", x, y);
		}
		
		// 함수의 실행
		fn1(10, 20);   // 함수이름이 fn1인 함수를 실행한다.
		fn2(100,200);  // fn2변수에 대입되어 있는 이름없는 함수를 실행한다.
		
		
		
	</script>
</body>

함수이름은 함수를 가리키는 포인터가 된다.

fn2가 함수이름은 아니지만 함수이름처럼 사용할 수 있다.

자바스크립트는 변수에 기능(코드블록인 함수)을 넣을 수 있다. (자바는 값밖에 못담는다.), 자바스크립트 함수는 변수에 담을 수 있기 때문에 1급 시민이다.

함수 선언식으로 작성된 함수는 함수 위치에 관계없이 실행된다.

실행엔진이 구문을 분석하는 시점에 함수를 사용가능한 상태로 만들어 놓는다.

함수 표현식으로 작성된 함수는 함수 호출 위치가 함수 표현식이 정의된 곳 이후에서만 사용가능하다.

함수 표현식은 대입되는 연산과정이 실행되야만 사용가능하기 때문에 표현식이 정의된 곳 이전에 실행하면 에러가 난다.

자바스크립트의 목적은 html을 조작하는 것이다.

사용자와 상호작용하기 위해 프로그램을 연결시키는 작업이다.

이벤트에 따라서 이벤트와 이벤트 핸들러를 연결시킨다.

모든 유저 인터페이스를 갖추고 있는 것에는 모두 이벤트모델을 사용한다.

이벤트(Event)
- 사용자가 웹페이지 내에서 어떤 동작을 할 때마다 그 모든 동작은 이벤트가 된다.
- 사용자와 상호작용하는 웹페이지를 제작하기 위해서는 사용자가 동작할 때마다 발생되는 이벤트를 활용한다.

        이벤트의 종류
          - 키보드 이벤트
              onkeydown   : 키보드의 키를 눌렀을 때
              onkeypress  : 사용자가 키보드의 키를 눌렀다가 뗐을 때
            * onkeyup     : 키보드의 키가 완전히 위로 올라왔을 때

          - 마우스 이벤트
            * onclick      : 클릭했을 때
              ondbclick    : 더블클릭했을 때
            * onmouseenter : 마우스의 포인터가 엘리먼트의 경계선 안으로 진입했을 때
            * onmouseleave : 마우스 포인트가 엘리먼트의 경계선 밖으로 나갔을 때
              onmouseover  : 마우스 포인트가 엘리먼트 위에 올라왔을 때
              onmouseout   : 마우스 포인트가 엘리먼트를 벗어났을 때
              onmousedown  : 마우스의 버튼을 눌렀을 때
              onmouseup    : 마우스의 버튼에서 손을 뗐을 때
              onmousemove  : 마우스 포인트가 움직일 때

          - 폼 이벤트
            * onchange     : 폼 요소의 값이 변경될 때(checkbox와 라디오버튼을 선택/해제할 때, select의 옵션을 변경할 때)
              onreset      : 폼 입력값이 리셋될 때
            * onsubmit     : 폼 입력값이 서버로 제출될 때
              onfocus      : 폼 입력요소에 포커스가 위치할 때
              onblur       : 폼 입력요소에서 포커스가 다른 곳으로 이동할 때

          - 윈도우 이벤트
              onresize     : 윈도우 창의 크기가 조절될 때
            * onscroll     : 스크롤바를 움직일 때 (스크롤바를 아래로 이동할 때마다 새로운 컨텐츠가 추가되게 할 때 주로 사용)
            * onload       : 화면의 로딩이 완료되었을 때 (웹페이지의 로딩이 완료되면 특정 작업을 수행하고 싶을 때)
              onerror      : 웹페이지에서 에러가 발생했을 때

이벤트 소스와 이벤트 핸들러 바인딩하기

        1. HTML 이벤트 핸들러 바인딩
            <button onclick="eventHandler();">버튼</button>
            function eventHandler() {
                수행문;
            }
            * 이벤트 소스 : <button>
            * 기대한 이벤트 : onclick
            * 이벤트 핸들러 : function eventHandler(){ ... }

        2. DOM(Document Object Model) 이벤트 핸들러 바인딩
             <button id="btn-delete">삭제</button>

             var btn = document.querySelector("#btn-delete"); // 아이디가 btn-delete인걸 찾아서 btn이라는 변수에 담음
             btn.onclick = eventHandler; // btn의 onclick이라는 프로퍼티, 프로퍼티는 이벤트를 담는 곳, 절대로 btn.onclick = eventHandler(); 이라고 실행결과를 적으면 안된다. 함수이름을 적어야 함. 실행결과가 아닌 eventHandler 그 자체가 등록되어야 함. 함수의 이름이 이벤트를 가리키는 것임.

function eventHandler() {
                 수행문;
             }

           3. 이벤트 리스너 바인딩
             <button id="btn-delete">삭제</button>

             var btn = document.querySelector("btn-delete");
             btn.addEventListener('click', eventHandler); // 이벤트이름에서 on을 생략한다. addEventListener라는 메소드를 통해서 클릭이라는 이벤트가 발생했을 때 실행할 eventHandler를 등록하는 방식이다.

Listener는 이벤트 발생을 기다리고 있는 놈이라는 얘기다.

             funcion eventHandler(){
                 수행문;
             }

<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 이벤트</title>
</head>
<body>
	<h1>자바스크립트 이벤트</h1>
	
	<div>
		<!-- 이벤트소스인 button 태그에서 이벤트핸들러 함수 바인딩하기 -->
		<button id="btn-1" onclick="fn1();">버튼1</button>
		<button id="btn-2">버튼2</button>
		<button id="btn-3">버튼3</button>
	</div>
	
	<script type="text/javascript">
		// 이벤트 핸들러(이벤트 리스너) 함수다.
		function fn1() {
			alert("fn1이 실행됨");
		}
		// 이벤트 핸들러(이벤트 리스너) 함수다.
		function fn2() {
			alert("fn2이 실행됨");
		}
		// 이벤트 핸들러(이벤트 리스너) 함수다.
		function fn3() {
			alert("fn3이 실행됨");
		}
		
		var btn2 = document.querySelector("#btn-2");
		btn2.onclick = fn2;
		
		var btn3 = document.getElementById("btn-3");
		btn3.addEventListener('click', fn3);   // 이벤트 발생을 감지하는 걸 리스너라고 하는데 이벤트 핸들러와 같은 말
		
	</script>

</body>
</html>

var btn2 = document.querySelector("#btn-2");
: #은 아이디로 찾겠다는 의미, querySelector는 선택자에서 #이 필요하다.

var btn3 = document.getElementById("btn-3");

: ById 이부분에서 id로 찾는다고 명시되어 있으니까 #을 안붙여도 된다.

키보드 이벤트

onkeydown
키를 눌렀을 때 발생하는 이벤트
onkeypress
키가 완전히 눌러졌을 때 발생하는 이벤트
숫자, 영문을 입력했을 때만 발생한다.
방향키, 특수키(백스테이스, 엔터키 등), 한글을 입력할 때는 발생하지 않는다.
onkeyup
눌러졌던 키가 완전히 올라올 때 발생하는 이벤트
이 이벤트가 발생했을 때 사용자가 입력한 값이 화면에 표시된다.
키보드 이벤트 중에서 가장 많이 활용되는 이벤트다.

입력필드나 textarea에서는 글을 작성 완료 후에 벗어났을 때에서야 onchange가 발생한다.

글자를 입력한다고 그때마다 onchange가 발생하는게 아니다. 포커스를 벗어난 순간에 원래 텍스트와 지금의 텍스트가 다른지를 확인하고 다르면 onchange가 발생하는 것이다.

키가 입력될때마다 발생시킬 수 있는 이벤트는 onkeyup이다. (글자수 제한이 있을 때 사용한다.)

<title>자바스크립트 키보드 이벤트</title>
</head>
<body>
	<h1>자바스크립트 키보드 이벤트</h1>
	
	<form>
		입력필드 : <input type="text" name="userId" onkeydown="keydown();" onkeypress="keypress();"/>
		입력필드 : <input type="password" name="filed2" onkeyup="checkInputField();" placeholder="6~12글자 이하로 입력" /> 
	</form>
	<p id="feedback-message"></p>
	
	<script type="text/javascript">
		
		// 이벤트 핸들러 함수 - 입력필드에 입력된 값을 체크하는 이벤트 핸들러 함수다.
		function checkInputField() {
			// id가 feedback-message인 <p />태그를 표현하는 Element객체를 조회한다.
			// <p /> 태그를 표현하는 Element객체는 textContent 프로퍼티를 가지고 있다.
			// textContent 프로퍼티는 태그의 텍스트 컨텐츠를 표현하는 프로퍼티다.
			var p = document.querySelector("#feedback-message");
			
			// name속성값이 field2인 <input /> 태그를 표현하는 Element객체를 조회한다.
			var input = document.querySelector("[name=filed2]");
			// <input /> 태그를 표현하는 Element객체는 value 프로퍼티를 가지고 있다. 
			// value 프로퍼티에는 입력필드에 입력된 값을 표현하는 프로퍼티다.
			var inputValue = input.value;
			//console.log("입력값", inputValue);
			
			// 입력필드에 입력된 글자수에 따라서 메세지가 p태그의 텍스트컨텐츠로 표현되게 한다.
			if (inputValue.length < 6) {
				p.textContent = "글자수가 모자랍니다.";
				p.style.color = 'red';
			} else if (inputValue.length > 12) {
				p.textContent = "글자수가 너무 깁니다.";
				p.style.color = 'red';
			} else {
				p.textContent = "글자수가 적당합니다.";
				p.style.color = 'green';
			}
			
		}
	
		function keydown(){
			console.log("keydown - 이벤트 핸들러 실행...")
		}
		function keyup(){
			console.log("keyup - 이벤트 핸들러 실행...")
		}
		function keypress(){
			console.log("keypress - 이벤트 핸들러 실행...")
		}
	</script>

</body>
</html>

placeholder는 도움말이다. 클릭하면 사라진다.

<p /> 태그를 표현하는 Element객체는 textContent 프로퍼티를 가지고 있다.
textContent 프로퍼티는 태그의 텍스트 컨텐츠를 표현하는 프로퍼티다.

실행순서 : keydown - keypress - keyup

<title>자바스크립트 마우스 이벤트</title>
</head>
<body>
	<h1>자바스크립트 마우스 이벤트</h1>
	
	<form>
		<textarea rows="10" style="width: 100%;" name="content" id="content-field" 
			onmouseenter="mouseenter(event);"
			onmouseleave="mouseleave(event)"></textarea>
	</form>
	
	<script type="text/javascript">
		// 아이디가 content-file인 <textarea> 태그를 표현하는 엘리먼트객체를 조회한다.
		var el = document.querySelector("#content-field");
		// 엘리먼트 객체의 프로퍼티에 이벤트핸들러 함수를 등록한다.
		//el.onmouseenter = mouseenter;
		//el.onmouseleave = mouseleave;
		el.onmousedown = mousedown;
		el.onmouseup = mouseup;
		el.onmousemove = mousemove;
	
		function mouseenter(event) {
			console.log("마우스 포인트가 진입하였습니다.", event.target);
		}
		
		function mouseleave(event) {
			console.log("마우스 포인트가 빠져나갔습니다.", event.target);			
		}
		
		// 이벤트 핸들러 함수는 Event객체를 전달받을 수 있다.
		function mousedown(event) {
			//console.log("마우스 버튼이 눌려졌습니다.", event);
			el.value = event.which + "버튼 down";
		}
		
		function mouseup(e) {
			//console.log("마우스 버튼이 떨어졌습니다.", e);			
			el.value = event.which + "버튼 up";
		}
		
		function mousemove(e) {
			//console.log("마우스 포인트가 움직입니다.", e);
		}
	</script>
</body>
</html>

event.which

Javscript에서 키보드를 눌렀을 때 각 키보드에 해당하는 키 값을 알 수 있다.

event.target

event.target이라는 프로퍼티는 모든 이벤트 객체에 있다. (which는 있을수도 있고 없을수도 있다.)

target에는 이벤트 소스가 들어있다. 이벤트를 발생시킨 엘리먼트 객체가 들어있다.

요청핸들러 메소드에서 첫번째 매개변수는 항상 이벤트 객체를 전달받는다.

<title>자바스크립트 폼 이벤트</title>

</head>
<body>
<div class="container my-3">
	<h1>자바스크립트 폼 이벤트</h1>
	
	<form class="bg-light border p-3" method="post" action="register.jsp">
		<div class="mb-3">
			<label class="form-label">직위별 급여</label>
			<select class="form-control" name="position" onchange="checkPosition();">
				<option value=""> 직위를 선택하세요</option>
				<option value="100"> 사원</option>
				<option value="200"> 대리</option>
				<option value="300"> 과장</option>
				<option value="400"> 차장</option>
				<option value="500"> 부장</option>
			</select>
		</div>
		<div class="mb-3">
			<label class="form-label">급여</label>
			<input type="number" class="form-control" name="salary">
		</div>
		<div class="mb-3">
			<label class="form-label">입사구분</label>
			<div class="form-check">
				<div class="form-check form-check-inline">
	 				<input class="form-check-input" type="radio" name="type" value="신입" checked="checked" onchange="toggleYearBox(event);">
	 				<label class="form-check-label">신입</label>
				</div>
				<div class="form-check form-check-inline">
	 				<input class="form-check-input" type="radio" name="type" value="경력" onchange="toggleYearBox(event);">
	 				<label class="form-check-label">경력</label>
				</div>
			</div>
		</div>
		<div id="box-year" class="mb-3" style="display: none;">
			<label class="form-label">개발경력(년)</label>
			<input type="text" class="form-control" name="year" />
		</div>
	</form>
</div>
<script type="text/javascript">
	function toggleYearBox(event) {
		// Event객체의 target 프로퍼티는 지금 이벤트가 발생한 엘리먼트가 저장되어 있다.
		var el = event.target;
		var checkedValue = el.value;
		
		var el2 = document.querySelector("#box-year");
		if (checkedValue === "신입") {
			el2.style.display = "none";	
		} else if (checkedValue === "경력") {
			el2.style.display = "";
		}		
	}

	function checkPosition() {
		//console.log("checkPosition()이 실행됨");
		var el = document.querySelector("select[name=position]");
		var selectedValue = el.value;
		//console.log("선택된 옵션의 값 ->", selectedValue)
		
		var el2 = document.querySelector("input[name=salary]");
		el2.value = selectedValue;
	}
</script>
</body>
</html>

el2.style.display="none", el2.style.display=""으로 경력 입력칸이 보였다가 안보였다가 할 수 있다.

저작자표시

'기록' 카테고리의 다른 글

학원 day58. 폼요소, 이벤트 버블링, 이벤트 실습 (0)	2022.11.25
학원 day57. DOM, BOM (0)	2022.11.24
학원 day55. 자바스크립트 (0)	2022.11.22
학원 day54. 스트림, 첨부파일 다운로드, 파일에 텍스트 기록 (0)	2022.11.21
학원 day53. 서블릿, 필터, 첨부파일 업로드 (0)	2022.11.18

ABOUT ME

개발 일기 개발 일기

'기록' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'기록' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바