[6/14 일반] JavaScript 기초/ 실습 - 브라우저객체모델(BOM), 내장 객체 - 김희연 강사님

박재준·2022년 6월 14일
0

1. 학습한 내용

1) 필기 내용

  • 파이썬 : 깔끔 vs 자바se(standard edition) : 덩치가 큼

  • 이벤트 : 웹 브라우저나 사용자가 행하는 동작

  • 이벤트 처리기 : 이벤트가 발생했을 때 어떤 함수를 실행할지 알려줌

  • 영역안에서 일어나는 것이 이벤트 이벤트? 단추, 버튼 등 사건이 일어났을 때, 어떤 명령이 실행되도록 하는 것(평소에 코드가 있는데 실행은 안 됌)
  • “on”+“이벤트명” : 언제 시작하는지 미리 세팅!(태그 안에서)
    → ex) <a href=“on click”>

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

  • 0614 / 이벤트 / 01_event_handler.html
    document.querySelector : css에서 보면 선택자(css상에 특별한 효과를 적용하려면, id, class, 태그이름 등을 지정을 해줄 때 사용
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>자바스크립트 이벤트</title>
	<link rel="stylesheet" href="css/event.css">		
</head>
<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/eh.js">
	</script>	
</body>
</html>  

0614 / 이벤트 / js / eh.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";
}

→ 결과 : 아래 그림

→ 상세 설명 열기 버튼을 누르게 되면 위와 같이 상세 설명이 나옴
→ 상세 설명 닫기 버튼을 누르게 되면 원래대로 돌아가면서 상세 설명이 안나옴

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

  • DOM(Document) vs BOM(Brower)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

  • 복합 자료형 : 하나의 이름안에 동시에 여러 가지가 들어갈 수 있음 /
    ex)
    var car = {
    이름:
    주특기:
    최대속도:
    색깔:
    function:
    run()
    stop() 등등}

→ 서로 다른건데 하나로 묶음(관련 있는 내용을 모두 모은 것)

  • 객체에 포함되는 함수 : method
    내장객체 : 1) 문서 객체 모델(DOM) / 2) 브라우저 모델 / 3) math
    브라우저 객체(BOM) : 객체를 다 관리, ex) window(alert가 포함되어있음)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

  • 생성자 : 객체를 인스턴스화 할 때, 내가 값을 무조건 넣어야할 필요가 있음
    관련 홈페이지 : https://developer.mozilla.org/ko/docs/Web

  • get : 가지고 오는 것
    set : 설정하는 것

  • 리터럴 = 숫자(값)
    리터럴 표기법 = 변수를 선언하면서 값을 할당하는 것

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

0614 / 객체 / 01.object.html

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>사용자 정의 객체</title>
	<link rel="stylesheet" href="css/obj.css">
</head>
<body>
	<div id="display"></div>
</body>
<script>
var book = {
	title : "자바스크립트",
	author : "고쌤",
	page : 500,
	info : function(){
		alert(this.title + "책의 분량은 " + this.pages + "폭입니다.");
	}
}
</script>
</html>

0614 / 객체 / css / obj.css

		#display {
			width:500px;
			margin:20px auto;
			padding:10px;
			border:1px solid #ccc;
			text-align:center;
			font-size:20px;
			line-height:30px;
		}

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>사용자 정의 객체</title>
	<link rel="stylesheet" href="css/obj.css">
</head>
<body>
	<div id="display"></div>
	<div id="display2"></div>
</body>
<script>
	var toyRobot = {
		productId : "123-12",
		name : "Robot",
		price : "25,000",
		quantity : 10,
		showStock: function(){
			document.querySelector('#display').innerHTML = this.name +
			"제품은 " + this.quantity + "개 남았습니다.";
		},
		showPrice: function(){
			// 제품의 가격은 XXX 입니다.
			document.querySelector('#display2').innerHTML = this.name +
			"제품은 " + this.price + "입니다.";
		}

		};
	
	toyRobot.showStock();
	toyRobot.showPrice();

</script>
</html>

→ 결과(아래 그림)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

0614 / 객체 / 02.book.html

<!-- 생성자 함수로 객체 생성하기 -->
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>도서 관리 프로그램 - 객체 만들기</title>
	<link rel="stylesheet" href="css/book.css">
</head>
<body>
<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("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>");
}
</script>
</body>
</html>

→ 결과(아래 그림)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

0614 / 이벤트 / 03.dday.html

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>D-Day for love</title>
	<link href="css/d-day.css" rel="stylesheet">
</head>
<body>
	<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>
	</body>
	</html>

→ 를 통해서 js 파일 불러오기

0614 / 이벤트 / js / dday-result.js

var now = new Date(); // 오늘 날짜 정보를 Date 객체의 인스턴스 now 객체로 만듭니다.
var firstDay = new Date("2021-12-30");  // 처음 만난 날의 날짜 정보를 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 영역에 표시합니다.


// 100, 200일... 입력되는 날 수에 따른 계산
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 + "일";

}

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

→ 결과(아래 그림)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

2. 학습한 내용 중 어려웠던 점 또는 해결못한 것들

1) 함수 만들고, 변수 만들고 등등 이어지는 것들이 헷갈리기 시작함...
2) 매개변수, 요소(element), instance 등등 비슷한 용어들...

3. 해결방법 작성

1) 흐름을 잘 보기
2) 용어들은 피피티 활용해서 잘 정리하기

4. 학습 소감

1) 음... 추가적인 학습내용들? 좀 더 깊숙히 들어가는 느낌? 이런 것들이라서 재밌긴 하다!
2) 근데 난 코드 정확하게 쓰는데, 어디서 틀린건지 한 번씩 오류뜨는데... 코드 비교해도 똑같은데... 이게 무슨 일이야!

profile
초급 개발자

0개의 댓글