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 파일에서 이벤트 연결을 따로 해볼 수 있다.
객체는 관련된 자료를 저장하고 처리하는 기본 단위라 할 수 있다.
해당 객체에 관련된 자료들이 한데 모아져 있는 것.
자바스크립트 프로그램 안에서 인식할 수 있는 모든 대상이 포함될 수 있다.
따라서 복합 자료형이다.
미리 정의되어 있는 개체
필요할 때 사용자가 직접 만드는 객체를 뜻한다
주체가 객체이기 때문에, 이 객체들은 여러가지 속성(property)을 가질 수가 있다. ex) 객체명.속성명 (book2.title)
객체의 동작을 정의한 함수를 메서드라고 하는데, 이 메서드는 객체에 종속된, 포함된 함수를 말한다.
우리가 잘 알고 있는 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.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.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도 연결되어 있는 것이다. 요는 객체에서도 배열을 가져와 쓰기 좋다는 것.
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>
나름 오늘 수업은 이해할 수 있는 곳까지는 이해를 마친 것 같다
: )
함수를 배우면 편리한 것은 확실히 알겠다. 다만 그 편리함을 짜기 위해 어떤 불편함이 있는지 알아차리는 것도 중요한 것 같다.