자바스크립트-6일차

이주열·2022년 6월 14일

학습한 내용

JavaScript 기초/ 실습 - 이벤트, 브라우저객체모델(BOM), 내장 객체

이벤트

웹 브라우저나 사용자가 행하는 동작
body영역에서 일어남
무언가가 일어 났을 때, 어떤 명령이 실행되는 것

이벤트 처리기

태그 안에서 이벤트를 처리할 때는 on + 이벤트명
이벤트가 발생했을 때, 어떤 함수를 실행할지 알려 줌( 시작 지점을 알려준다고 생각)
종류로는 마우스, 키보드, 폼, 문서 로딩 이벤트가 있고, 마우스와 키보드를 가장 많이 씀

실습1. 이벤트 사용
1) onclick : 클릭하였을 때 이벤트

<button class="over" id="open" onclick="alert('눌렀습니다.')">상세 설명 보기</button>

버튼 클릭 시 alert 활성

- 태그에서 사용할 때는 필요할 때 바로바로 사용하기 때문에 간편하게생각할 수 있다.
- 하지만, 하나의 html파일에 여러가지 언어가 사용되어 복잡해진다. 따라서 유지보수가 안 좋은 단점이 있다.

2) 외부 js파일을 만들고, 버튼 클릭 시 설명 보이기
1. 먼저 html파일에서 외부 js파일 링크를 걸어 준다.

<script src="./js/01.js"></script>

다음 js파일에서 보여주는 함수, 숨기는 함수를 만들어 준다

해당 영역의 id를 활용할 수도 있음.
css와 같이 .style, .display 도 활용 가능

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

해당 버튼에 onclick을 활용하여 연결

<button class="over" id="open" onclick="showDetail()">상세 설명 보기</button>
......
<button id="close" onclick="hideDetail()">상세 설명 닫기</button>

설명 보기를 누르면 활성화, 닫기를 누르면 사라지는 것을 확인

실습2. 이벤트2 - 여러 가지 이벤트 적용
1. onclick - 클릭했을 때 alert 활성
2. onmouseover - 마우스 포인터를 위로 옮겨질 때, border활성화
3. onmouseout - 마우스 포인터가 벗어날 때, border 비활성화

var coverImage = document.querySelector('#cover');
coverImage.onclick = function(){
    alert('눌렀습니다.')
}
coverImage.onmouseover = function(){
    coverImage.style.border = "5px solid black";
}
coverImage.onmouseout = function(){
    coverImage.style.border = "";
}

객체

객체는 자료를 저장하고 처리하는 기본 단위
자바스크립트 프로그램에서 인식할 수 있는 모든 대상
복합 자료형(객체 안에 숫자, 문자열 등 여러 가지 자료형이 포함 됨)
결국에는 관련 있는 내용을 모두 모은 것
묶기 위한 이름은 대표성이 있는 이름으로 만드는 것이 좋음
속성과 메소드를 가짐
규칙이 콜론(:)으로 이루어짐 ex) key : value
여라 가지를 나타낼 때는 콤마(,)로 이루어 짐

내장 객체

미리 정의되어 있는 객체
1) 문서 객체 모델(DOM) - 문서 뿐만 아니라 웹 문서 안에 이미지, 링크, 텍스트 등을 모두 객체로 관리
2) 브라우저 객체 모델(BOM) - 웹 브라우저 정보를 객체로 관리
1)과 2)는 자바스크립트에 특별히 포함되는 객체
3) Math
자세한 설명은 아래 사이트 참조
https://developer.mozilla.org/ko/

사용자 정의 객체

필요할 때마다 사용자가 직접 만드는 객체
리터럴 표기법 : 값을 집어 넣는 것. 즉, 변수를 선언하면서 값을 바로 할당하는 것

속성( 프로퍼티, property )

객체에 담고 있는 값

메서드( method )

객체의 동작을 정의한 함수

프로토타입

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

인스턴스

프로토타입으로 찍어낸 객체
두 번 정의 안해도 되는 것

실습3. 객체 만들기
1) 객체 만들기

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

콘솔 창에서 만들어진 객체를 확인해 보면

2) 브라우저 창에 나타내기

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

가격을 알고 싶다면 다음 함수도 객체 안에 넣어 준다.

			showPrice : function(){
				document.querySelector('#display').innerHTML 
				= this.name + "제품의 가격은 " + this.price + "입니다.";
			}
 ......
 		toyRobot.showPrice();

실습4. 생성자 함수로 객체 생성하기

인스턴스 생성할 때, 위에서 생성한 객체 요소 순서대로 넣어줘야 한다.

		// 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("CSS3 튜토리얼", "Kim", 600, 30000);
        
		// 3. 여러 인스터스를 배열에 담아 활용
		var html = new Book("웹 표준의 정석","Kim", 600, 30000);
		var python = new Book("점프 투 파이썬","Kim", 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>");
		}

실습5. 날짜 계산기

정해진 날짜에서 일정 기간 뒤에 날짜 구하기
진행 순서는 현재 날짜를 밀리초로 변환, 계산 후 재 변환

var now = new Date();
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));

document.querySelector("#accent").innerText = passedDay + "일";

// 100일
var future = toFirst + 100 *(24*60*60*1000);
var someday = new Date(future);
var year = someday.getFullYear();
var month = someday.getMonth() + 1;
var date = someday.getDate();

document.querySelector("#date100").innerText = year + "년" + month + "월" + date + "일";

// 200일
var future = toFirst + 200 *(24*60*60*1000);
var someday = new Date(future);
var year = someday.getFullYear();
var month = someday.getMonth() + 1;
var date = someday.getDate();
document.querySelector("#date100").innerText = year + "년" + month + "월" + date + "일";

100일과 200일을 보면 구하는 숫자 말고는 다를 것이 없다.
위 과정을, 함수로 만들어 간편하게 재구성
days 매개변수를 통해 간편하게 나태낼 수 있음

var now = new Date(); 
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)); 
document.querySelector('#accent').innerText = passedDay + "일";  

calcDate(100);  
calcDate(200);  
calcDate(365);  
calcDate(500);  

function calcDate(days) {
	var future = toFirst + days*(1000*60*60*24);  
	var someday = new Date(future);  
	var year = someday.getFullYear( );  
	var month = someday.getMonth( ) + 1;  
	var date = someday.getDate( );  
	document.querySelector("#date"+days).innerText = year + "년 " + month + "월 " + date + "일";
}

html의 각 id도 구성에 맞게 설정

				<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>