1.학습한 내용

1. 이벤트

이벤트란?
-사건, 어떤 일(조건)이 일어났을 때 => 어떤 명령이 실행되도록 하는 것!
-웹 브라우저나 사용자가 행하는 동작
-사용자가 웹 문서 영역을 벗어나 하는 동작은 이벤트가 아님

이벤트 처리기
-이벤트가 발생했을 때 어떤 함수를 실행할지 알려줌
-태그 안에서 이벤트를 처리할 때는 "on"+"이벤트명" 사용
ex) onclick() => alert()

event 예제
<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>

<js>
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";    
}

event-dom 예제
<div id="item">
		<img src="images/flower1.jpg" alt="" id="cover">
</div>	
<script src="./js/event-dom.js"></script>

<js>
var coverImage = document.querySelector("#cover");
// 클릭했을 때 경고창
coverImage.onclick  = function(){
    alert('눌렀습니다.')
}
// 마우스를 올렸을 때
coverImage.onmouseover = function(){
    coverImage.style.border = "5px solid black";
}
// 마우스를 내렸을 때
coverImage.onmouseout = function(){
    coverImage.style.border = "";
}

2. 객체

객체란?
-객체는 자료를 저장하고 처리하는 기본 단위
-자바스크립트 프로그램에서 인식할 수 있는 모든 대상
-복합 자료형(객체 안에 숫자, 문자열 등 여러 가지 자료형이 포함됨)

추상화?
-객체를 군더더기 없이 핵심만 구체화한 것
-key:value

현재 가장 많이 사용하는 데이터 교환방식 = Json

내장객체
-미리 정의되어있는 개체
1)문서 객체 모델(DOM): 문서뿐만 아니라 웹 문서 안에 포함된 이미지,링크,텍스트 필드 등을 모두 별도의 객체로 관리
2)브라우저 객체 모델: 웹 브라우저 정보를 객체로 관리

사용자 정의 객체
-필요할 때마다 사용자가 직접 만드는 객체

사용자 정의 객체 예제

<div id="display"></div>
<div id="display2"></div>
	
<script>
	var toyRobot = {
		productId:"123-12",
		name:"Robot",
		price:25000,
		quantity:10,
		showStock: function(){
				document.querySelector('#display').innerHTML = this.name + "제품은 " + this.quantity + "개 남았습니다.";
				},
		showPrice: function(){
				document.querySelector('#display2').innerHTML = this.name + "제품은 " + this.price + "입니다.";
				}
		}
toyRobot.showStock();
toyRobot.showPrice();

절차지향
-할 수 있는 일을 순서대로 연결

객체지향
-할 수 있는 일을 각각 연결
-속성: 값 || 메소드: 동작

프로그램이란건 적어도 반복성, 규칙성이 있어야 한다(즉, 한가지만 하고 말거라면 의미가 없다)

속성(프로퍼티, property)
-객체에 담고 있는 값
-객체명, 속성명
예) Navigator 객체에 있는 vendor 속성이 궁금하다면? navigator.vendor

메서드(method)
-객체의 동작을 정의한 함수(객체 안의 함수)
-Window 객체에는 알림창을 표시하는 alert()메서드가 있다

프로토타입과 인스턴스
-프로토타입: 객체의 속성과 메서드를 모아놓은 <틀> 같은 것
-인스턴스: 포로토타입으로 <찍어낸 객체>, 포로토타입의 속성과 함수를 똑같이 사용함

객체 인스턴스 만들기
-new 예약어 뒤에 괄호를 붙여서 인스턴스 만듦
-날짜와 관련된 프로그램을 만들려면 날짜/시간 정보가 있는 Date객체의 인스턴스 만들어야함
예)  Date()
	var now = new Date() 
    now.toLocaleString()

리터럴(숫자,값) 표기법을 사용한 객체 만들기
-리터럴 객체는 값이 정해져 있기 때문에 불편한 부분이 있다
var book = {
	title: "자바스크립트",
	author: "고쌤",
	pages: 500,
	price: 15000,
	info: function(){
		alert(this.title + "책의 분량은" + this.pages + "쪽입니다.");
	}
}

생성자 함수를 사용해 객체 만들기
-틀을 먼저 만들고 인스턴스만 만들어주면 되기때문에 훨씬 편하다
function Book(author, pages, price, title){
	this author = author;
	this pages = pages;
	this price = price;
	this title = title;
}
book의 인스턴스 만들기
js book = new book("홍길동", 500, 15000, "자바스크립트")

도서관리프로그램 만들기

<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,30000);

	// 3단계 : 여러 인스턴스를 배열에 담아 활용하기
	var html = new Book("웹 표준의 정석","홍길동",600,30000);
	var python = new Book("점프 투 파이썬","홍길동",600,30000);

	var booklist = [css,html,python];

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

D-day 관리 프로그램 만들기

<div class="container">
	<div class="day1">
		<h3>우리 만난지</h3>
		<p id="accent" class="accent"><span style="font-size:0.6em; font-style:italic">며칠?</span></p>
	</div>
	<div class="bar">기념일 계산</div>
	<div class="day2">
		<ul>
			<li class="item-title">100일</li>         
			<li class="item-date" id="date100"></li>
		</ul>
		<ul>
			<li class="item-title">200일</li>
			<li class="item-date" id="date200"></li>
		</ul>     
		<ul>
			<li class="item-title">1년</li>
			<li class="item-date" id="date365"></li>
		</ul>      
		<ul>
			<li class="item-title">500일</li>
			<li class="item-date" id="date500"></li>
		</ul>      									     
	</div>
</div>
<script src="./js/dday-result.js"></script>

<js>
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)); // 밀리초를 일로 변환 후 반올림(round)합니다.
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;  // 0부터 시작하기 때문에 +1을 해준다,‘월’을 가져와 month 변수에 저장합니다.
	var date = someday.getDate( );  // ‘일’을 가져와 date 변수에 저장합니다.
	document.querySelector("#date"+days).innerText = year + "년 " + month + "월 " + date + "일";
}

2. 학습한 내용 중 어려웠던 점

이제 하나씩 이해를 하면서 할 만 한가 생각하던 찰나 본격적으로 사고를 해서 코드를 짜내야하니 생각보다 너무 어려운 것 같다. 아직은 익숙치않아서 그런 것 일 수도 있지만 아무것도 없는 상태에서 이건 이렇게, 저건 저렇게 해야한다며 나오지 않는 것 같다.

3. 해결방법

간단한 객체 만들기 같은 경우엔 보다 손쉽게 할 수 있어서 그 부분부터 조금씩 해보면서 도서관리프로그램이나 D-day프로그램을 응용해서 내가 어떤걸 바꿔서 만들 수 있는지 해볼 필요가 있는 것 같다. 특히 D-day프로그램은 todo에서 많이 봤던 것 중 하나라서 여러가지를 해봐야겠다.

4. 학습소감

이제까지 배운 것들을 종합적으로 조금씩 손대서 한다는 느낌이 들기 시작했다. 그래도 지금하는 부분들을 이해하고 따라갈 수 있다는 점에서 고무적인 것 같다. 시간을 들여서 계획하고 있는걸 1%라도 해나가야겠다.