[개발일지 29일차] 이벤트와 객체

MSJ·2022년 6월 14일
0

WEB

목록 보기
29/41
post-thumbnail

2022-06-14

이벤트

웹 문서 영역에서 일어나는 동작들을 이벤트라고 말한다.
어떤 사건, 일이 일어났을 때 -> 어떤 명령이 실행되도록 하는 것

사용자 행하든, 웹 문서에서 동작하든 이벤트이다.

이 이벤트를 발생시킬 때, 어떤 함수를 실행할지 알려주는 심판 같은 역을 이벤트 처리기라 한다. 태그 안의 이벤트는 on+이벤트명을 사용한다.

이벤트의 종류

엄청 많음.

마우스 이벤트

click : 마우느 눌렀을 때
dblclick : 마우스 두번 눌렀을 때
mousedown : 마우스 버튼 누르는 유지 동안
mousemove : 포인터를 움직일 때
mouseover : 포인터를 요소 위로 옮길 때
mouseout : 포인터가 요소를 벗어날 때
mouseup : 눌렀던 마우스 버튼을 떼어낼 때

키보드 이벤트

keypress :키를 눌렀을 때
keydown : 키를 누르는 유지 동안
keyup : 눌렀던 키를 떼어낼 때

폼 이벤트

blur : 폼 요소에 포커스를 잃었을 때
change : 목록, 체크 상태 등이 변경되었을 때 (사용태그: <input>, <select>, <textarea>)
focus : 폼 요소에 포커스가 놓였을 때 (사용태그: <label>, <select>, <textarea>,<button>)
reset : 폼이 다시 시작될 때
submit : submit 버튼을 눌렀을 때

문서 로딩 이벤트

abort : 웹 문서가 완전히 로딩되기 전 불러오기를 멈출 때
error : 문서가 정확히 로딩되지 않았을 때
load : 문서 로딩이 끝날 때
resize : 문서 화면 크기가 바뀌었을 때
scroll : 문서 화면이 스크롤되었을 때
unload : 문서를 벗어날 때

이벤트 예제)

버튼을 클릭했을 때 상세보기 창을 띄우고 닫아보자.

html

<body>
	<div id="item">
		<img src="images/flower1.jpg" alt="">
		<button class="over" id="open" onclick="showDetail()">상세 설명 보기</button>
		<div id="desc" class="detail">
			<h4>민들레</h4>
			<p>어디서나 매우 흔하게 보이는 잡초로서 바닥에 딱 붙어서 꽃봉오리 하나가 쏙 올라온다. 톱니 모양의 잎새와 눈에 확 띄는 노란 꽃이 인상적이다. 특히 꽃이 지고나면 솜털모양의 깃을 가진 씨앗들이 나오는데 바람을 타고 날아가서 널리 퍼진다.</p>
			<button id="close" onclick="hideDetail()">상세 설명 닫기</button>
		</div>
	</div>		
	<script src="./js/01-evne-handler.js"> </script>
</body>

js

<script>
function showDetail(){
    document.querySelector('#desc').style.display = "block";
    document.querySelector('#open').style.display = "none";
}

function hideDetail(){
    document.querySelector('#desc').style.display = "none";
    document.querySelector('#open').style.display = "block";
}
</script>

이 이벤트 적용에 가장 선행되어야 할 개념은 1) html, 2) CSS, 3)Javascript 였다.

html에서 바로 코드를 쓸 수 있지만, 긴 코드의 복잡함을 완화하고 유지보수에 용이하기 위해, 개별 js 파일에서 이벤트 연결을 따로 해볼 수 있다.

객체

객체는 관련된 자료를 저장하고 처리하는 기본 단위라 할 수 있다.
해당 객체에 관련된 자료들이 한데 모아져 있는 것.
자바스크립트 프로그램 안에서 인식할 수 있는 모든 대상이 포함될 수 있다.
따라서 복합 자료형이다.

내장 객체(built-in object)

미리 정의되어 있는 개체

  • 1) DOM (문서 객체 모델) : 문서 뿐만 아니라, 웹 문서 안의 이미지, 링크, 텍스트 필드 등은 모두 미리 정의되어있는 객체들이다.
    -2) BOM (브라우저 객체 모델) : 문서 밖의 웹 브라우저의 미리 정의되어 있는 객체들이다. 주소창, 설정창 등등.

사용자 정의 객체

필요할 때 사용자가 직접 만드는 객체를 뜻한다

속성 (property)

주체가 객체이기 때문에, 이 객체들은 여러가지 속성(property)을 가질 수가 있다. ex) 객체명.속성명 (book2.title)

메서드 (method)

객체의 동작을 정의한 함수를 메서드라고 하는데, 이 메서드는 객체에 종속된, 포함된 함수를 말한다.

우리가 잘 알고 있는 alert()도 메서드라 부른다. 실은 이 alert()은 window.alert()이 풀네임이 때문. window가 최상위 객체이다.

프로토타입과 인스턴스

프로토타입

객체의 속성과 메서드를 모아놓는 틀

인스턴스

그 틀 안에 들어가는 내용들. 프로토타입으로 찍어낸 객체.
특징은 프로토타입에서 쓰이는 속성과 함수를 동일하게 사용할 수 있다.

객체 인스턴스 만들기

new 예약어의 뒤에 괄호를 붙여서 인스턴스를 만든다.

var now = new Date()  //var now : now에 변수를 저장 , Date  객체의 인스턴스를 만듦
now
-> Tue Jun 14 2022 23:12:02 GMT+0900 (한국 표준시)
now.toLocaleString()
'2022. 6. 14. 오후 11:12:02'

Math 객체를 사용해 무작위 수 만들기

기본적으로 Math.random() 메서드를 사용할 경우 소숫점이 나온다.
이 소숫점을 정수로 표현하고 싶으면 Math.random() x 10을 하여 소숫점을 0이상으로 끌어올린다. 소숫점 아래의 숫자들이 필요없다면 즉, 정수만 쓰고 싶다면 Math.floor() 안에 Math.random()을 넣으면 된다

사용자 정의 객체

리터럴 표기법을 사용한 객체 만들기

 <script>
        var book  = {
            title :  "자바스크립트",
            author : "고쌤",
            pages: 500,
            info : function(){
                alert(this.title + "책의 분량은 " + this.pages + "쪽입니다.");
            }
        }
    </script>

함수의 사용

book.title
->"자바스크립트"
book.info()
-> 웹브라우저 alert창이 출력됨

book 객체에 새로운 속성 추가

book.field = "IT"
-> "IT"
book.field = "Fantasy"
-> "Fantasy"

하지만 리터럴 표기법을 이용할 시, var book에 대한 내용을 전부 손수 써야한다는 치명적인 불편함이 있다. 그리하여 쓰는 것이 프로토타입이다.

var book  = {
            title :  "자바스크립트",
            author : "고쌤",
            pages: 500,
            info : function(){
                alert(this.title + "책의 분량은 " + this.pages + "쪽입니다.");

생성자 함수를 사용해 객체 만들기

생성자 함수로 프로토타입의 틀을 다듬으면 된다.
이러면 간편하게 객체를 찍어낼 수 있다. 또, 속성값을 배열로 만들어 활용할 수도 있다.

<script>
//1단계 : Book 객체를 정의한다
	function Book(title, author, volume, price){
		this.title = title;
		this.author  = author;
		this.volume = volume;
		this.price = price;  
	}
	//2단계 : 인스턴스를 생성한다
	var css = new Book("CSS 완전 정복", "김씨에", 600, 35000);
	var html = new Book("웹 표준의 정석", "Sun", 550, 30000);
	var fantasy = new Book("해리 포터", "J.K.롤링", 500, 20000);
	//3단계 : 여러 인스턴스를 배열에 담아 활용하기. 만약에 제목만 뽑아서 화면에 출력해보고 싶다면?
	var bookList  = [css, html, fantasy];

	document.write("<h1>책 제목 가져오기</h1>"); {
		for (var i=0; i<bookList.length; i++){
			document.write("<p>" + bookList[i].title + "</p>")
		}
	}
</script>

물론 해당 화면은 CSS도 연결되어 있는 것이다. 요는 객체에서도 배열을 가져와 쓰기 좋다는 것.

D-day 기념일 계산기 만들어보기

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date

모질라에서 필요한 코드를 찾아볼 수 있다.

html과 CSS뒤에 Js를 넣어보면 이렇게 된다.

<script>
var now = new Date(); //now라는 객체를 인스턴스 화 했다
var firstDay = new Date("2018-03-23"); //사용자가 입력해서 계산하는 방법도 있지만 그것은 좀더 복잡해서 나중에...
var toNow = now.getTime(); //시간 값을 밀리초로 바꾼다는 뜻
var toFirst = firstDay.getTime();
var passedTime = toNow - toFirst; // 오늘 - 처음 만난 날
var passedDay = Math.round(passedTime/(24*60*60*1000)); //round는 반올림
document.querySelector('#accent').innerText = passedDay + "일";
</script>

그렇다면 100일은, 처음 만난날에서 100을 곱하면 되겠지!

<script>
//100일
var future = toFirst + 100 *(24*60*60*1000);
var someday = new Date(future);
var year = someday.getFullYear();
var month = someday.getMonth() + 1; //컴퓨터는 0부터 숫자를 가져오기 때문에 +1을 해줌
var date = someday.getDate();
document.querySelector('#date100').innerText = year + "년 " + month + "월 " + date + "일"; //화면에 출력
</script>

200일이면?

<script>
// 200일
var future = toFirst + 200 *(24*60*60*1000);
var someday = new Date(future);
var year = someday.getFullYear();
var month = someday.getMonth() + 1; //컴퓨터는 0부터 숫자를 가져오기 때문에 +1을 해줌
var date = someday.getDate();
document.querySelector('#date100').innerText = year + "년 " + month + "월 " + date + "일";
</script>

어라? 근데 보다보니 반복되는게 보이지 않는가?

숫자 100, 200만 변할 뿐.... 아래는 코드 내용이 다 똑같다.

그럴 때 쓰는 것이 바로 함수다 (코딩을 잘하려면 게을러야 한다고)

<script>
//100일, 200일, ... 입력되는 날에 따른 계산
function calcDate(days){
    var future = toFirst + days *(24*60*60*1000);
    var someday = new Date(future);
    var year = someday.getFullYear();
    var month = someday.getMonth() + 1; //컴퓨터는 0부터 숫자를 가져오기 때문에 +1을 해줌
    var date = someday.getDate();
    
    document.querySelector('#date'+days).innerText = year + "년 " + month + "월 " + date + "일";
}
calcDate(100);
calcDate(200);
calcDate(365);
calcDate(500); //<-와우 여기 너무 편함;;
</script>

예제를 완성해보면

<script>
var now = new Date(); // 오늘 날짜 정보를 Date 객체의 인스턴스 now 객체로 만듭니다.
var firstDay = new Date("2018-03-23");  // 처음 만난 날의 날짜 정보를 firstDay 객체로 만듭니다. 
var toNow = now.getTime();  // 오늘 날짜를 밀리초로 바꿉니다.
var toFirst = firstDay.getTime();  // 처음 만난 날을 밀리초로 바꿉니다.
var passedTime = toNow - toFirst;  // 처음 만난 날과 오늘 사이의 차이 (밀리초)
var passedDay = Math.round(passedTime/(24*60*60*1000)); // 밀리초를 일로 변환 후 반올림합니다.
document.querySelector('#accent').innerText = passedDay + "일";  // #accent 영역에 표시합니다.

calcDate(100);  // 100일 기념일을 계산해서 표시합니다.
calcDate(200);  // 200일 기념일을 계산해서 표시합니다.
calcDate(365);  // 1년 기념일을 계산해서 표시합니다.
calcDate(500);  // 500일 기념일을 계산해서 표시합니다.

function calcDate(days) {
	var future = toFirst + days*(1000*60*60*24);  // 처음 만난 날에 밀리초로 바꾼 100일을 더합니다.
	var someday = new Date(future);  // future 값을 사용해 Date 객체의 인스턴스를 만듭니다.
	var year = someday.getFullYear( );  // ‘연도’를 가져와 year 변수에 저장합니다.
	var month = someday.getMonth( ) + 1;  // ‘월’을 가져와 month 변수에 저장합니다.
	var date = someday.getDate( );  // ‘일’을 가져와 date 변수에 저장합니다.
	document.querySelector("#date"+days).innerText = year + "년 " + month + "월 " + date + "일";
}
</script>

어려운 점

나름 오늘 수업은 이해할 수 있는 곳까지는 이해를 마친 것 같다

해결 방법

: )

소감

함수를 배우면 편리한 것은 확실히 알겠다. 다만 그 편리함을 짜기 위해 어떤 불편함이 있는지 알아차리는 것도 중요한 것 같다.

profile
제로부터 시작하는 프로그래밍&코딩

0개의 댓글