✅ 클릭 이벤트 예제
☑️ 예제 1
<!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="alert('눌렀습니다.')">상세 설명 보기</button>
<div id="desc" class="detail">
<h4>민들레</h4>
<p>어디서나 매우 흔하게 보이는 잡초로서 바닥에 딱 붙어서 꽃봉오리 하나가 쏙 올라온다. 톱니 모양의 잎새와 눈에 확 띄는 노란 꽃이 인상적이다. 특히 꽃이 지고나면 솜털모양의 깃을 가진 씨앗들이 나오는데 바람을 타고 날아가서 널리 퍼진다.</p>
<button id="close">상세 설명 닫기</button>
</div>
</div>
</body>
</html> 
상세 설명 보기라는 버튼을 클릭하면 alert 창이 뜨는 것을 보여주는 'onclick' 이벤트 입니다.
☑️ 예제 2
<!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/event.js"></script>
</body>
</html> 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"; // '상세 설명 보기' 단추를 화면에 표시
}
#openid를 가진 버튼을 클릭하면,showDetail()함수가 있는 js파일로 넘어간다.#descid를 가지고 있는 display 스타일을 block으로 바꾼다.#openid를 가진 display 스타일은 none으로 바꾸면 사라진다.
- 화면을 원래대로 돌려놓기 위해서는
#closeid를 가진 버튼을 클릭하면hideDetail()함수가 있는 js파일로 이동한다.#descid를 가지고 있는 display 스타일을 none으로 바꾼다.#openid를 가진 display 스타일은 block으로 바꾸면 원상복귀!
☑️ 예제 3
<!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="" id="cover">
</div>
<script src="js/event-dom-result.js"></script>
</body>
</html> var coverImage = document.querySelector("#cover");
coverImage.onclick = function() {
alert('눌렀습니다');
};
coverImage.onmouseover = function() {
coverImage.style.border = "5px black solid";
};
coverImage.onmouseout = function() {
coverImage.style.border = "";
};
#coverid를 가진 이미지 태그를 js파일의coverImage변수에 저장한다. 그리고 이를 클릭하면 '눌렀습니다' 라는 문장이 나온다.coverImage변수의 저장값에 마우스를 올리면(onmouseover) 설정된 border가 생기게 함coverImage변수의 저장값에 마우스를 내리면(onmouseout) 설정된 border가 생기게 함
이외에도 많은 이벤트가 있는데 이러한 내용은 내가 따로 공부를 해두는게 좋아보인다.
✅ 객체
☑️ 객체란?
- 객체는 자료를 저장하고 처리하는 기본 단위
- 자바스크립트 프로그램에서 인식할 수 있는 모든 대상
- 복합 자료형 (객체 안에 숫자, 문자열 등 여러 가지 자료형이 포함됨)
☑️ 내장 객체
- 미리 정의되어 있는 개체
1) 문서 객체 모델(DOM) : 문서 뿐만 아니라 웹 문서 안에 포함된 이미지·링크·텍스트 필드 등을 모두 별도의 객체로 관리
2) 브라우저 객체 모델 : 웹 브라우저 정보를 객체로 관리
☑️ 사용자 정의 객체
- 필요할 때마다 사용자가 직접 만드는 객체
☑️ 속성(프로퍼티, property)
- 객체에 담고 있는 값
- 객체명.속성명 (예, Navigator 객체에 있는 vendor 속성이 궁금하다면? navigator.vendor)
☑️ 메서드(method)
- 객체의 동작을 정의한 함수 (객체 안의 함수)
- Window 객체에는 알림 창을 표시하는 alert() 메서드가 있다
→ window.alert()
→ window 객체는 최상위 객체이므로 window. 생략하고 그냥 alert()라고 쓸 수 있음.
☑️ 프로토타입과 인스턴스
- 프로토타입 : 객체의 속성과 메서드를 모아놓은 틀 같은 것
- 인스턴스 : 프로포타입으로 찍어낸 객체. 프로토타입의 속성과 함수를 똑같이 사용함.
✅ 객체 인스턴스 만들기
- new 예약어 뒤에 괄호를 붙여서 인스턴스 만듦.
- 예) 날짜와 관련된 프로그램을 만들려면 날짜/시간 정보가 있는 Date 객체의 인스턴스부터 만들어야 함.
var now = new Date()
now
Tue Jun 14 2022 11:51:33 GMT+0900 (한국 표준시)
now.toLocaleString()
"2022.06.14 오전 11:51:33"✅ Math 객체를 사용해 무작위 수 만들기
- random() 메서드 : 0과 1 사이의 무작위 수
Math.random()- 1과 100 사이의 수를 뽑는다면?
Math.random() * 100 + 1- 정수가 필요하다면? : floor() 메서드 - 소수점 이하 버림
Math.floor(Math.random() * 100 + 1)✅ 사용자 정의 객체
- 리터럴 표기법을 사용한 객체 만들기
var book = {
title: "자바스크립트",
author: "고쌤",
pages: 500,
price: 15000,
info: function() {
alert(this.title + "책의 분량은 " + this.pages + "쪽입니다.");
}
} book.title //자바스크립트
book.info() //함수 사용 book.field = "IT" //book 객체에 새로운 속성 추가✅ 생성자 함수를 사용해 객체 만들기
function Book(author, pages, price, title) {
this.author = author;
this.pages = pages;
this.price = price;
this.title = title;
}☑️ Book 객체의 인스턴스 만들기
jsBook = new Book("홍길동", 500, 15000, "자바스크립트")
▶ Book {author: "홍길동", pages: 500, price: 15000, title: "자바스크립트"}
jsBook.title // jsBook 객체에서 속성 값 확인하기
"자바스크립트"✅ 날짜와 시간 정보를 가지는 Date 객체
☑️ 여러 방법으로 인스턴스 만들기
new Date()
new Date("06 14 2022") //긴 날짜 형식
new Date("06/14/2022") //짧은 날짜 형식
new Date("2022-06-14T11:53:33") //ISO 형식✅ Date 객체의 메서드
☑️ 날짜/시간 정보를 가져오는 함수
getFullYear() //년도
getMonth() //월
getDate() //일
getDay() //요일
getTime() //1970년 1월 1일 자정부터 얼마나 시간이 지났는지 밀리초로 표현
getHours() //시
getMinutes() //분
getSeconds() //초
getMillseconds() //밀리초☑️ 날짜/시간 정보를 가져오는 함수
setFullYear() //년도
setMonth() //월
setDate() //일
setTime() //1970년 1월 1일 자정부터 얼마나 시간이 지났는지 밀리초로 표현
setHours() //시
setMinutes() //분
setSeconds() //초
setMillseconds() //밀리초✅ 기념일 계산기 만들기
☑️ 며칠 지났는지 알아보기
var now = new Date(); // 오늘 날짜 정보를 Date 객체의 인스턴스 now 객체로 만듭니다.
var firstDay = new Date("2022-06-14"); // 처음 만난 날의 날짜 정보를 firstDay 객체로 만듭니다.
var toNow = now.getTime(); // 오늘 날짜를 밀리초로 바꿉니다.
var toFirst = firstDay.getTime(); // 처음 만난 날을 밀리초로 바꿉니다.
var passedTime = toNow - toFirst; // 처음 만난 날과 오늘 사이의 차이 (밀리초)
var passedDay = Math.round(passedTime/(1000*60*60*24)); // 밀리초를 일로 변환 후 반올림합니다.
document.querySelector('#accent').innerText = passedDay + "일"; // #accent 영역에 표시합니다.☑️ 며칠 지났는지 알아보기
var future = toFirst + 100(1000*60*60*24); // 처음 만난 날에 밀리초로 바꾼 100일을 더합니다.
var someday = new Date(future); // future100 값을 사용해 Date 객체의 인스턴스를 만듭니다.
var year = someday.getFullYear(); // '연도'를 가져와 year 변수에 저장합니다.
var month = someday.getMonth(); // '월'을 가져와 month 변수에 저장합니다.
var date = someday.getDate(); // '일'을 가져와 date 변수에 저장합니다.
document.querySelector("#date100").innerText = year + "년 " + month + "월 " + date + "일";
future = toFirst + 200(1000*60*60*24); // 처음 만난 날에 밀리초로 바꾼 200일을 더합니다.
someday = new Date(future); //future200 값을 사용해 Date 객체의 인스턴스를 만듭니다.
year = someday.getFullYear(); // '연도'를 가져와 year 변수에 저장합니다.
month = someday.getMonth(); // '월'을 가져와 month 변수에 저장합니다.
date = someday.getDate(); // '일'을 가져와 date 변수에 저장합니다.
document.querySelector("#date200").innerText = year + "년 " + month + "월 " + date + "일";☑️ calcDate( ) 함수 선언하기
calcDate(100); // 100일 기념일을 계산해서 표시합니다.
calcDate(200); // 200일 기념일을 계산해서 표시합니다.
calcDate(365); // 1년 기념일을 계산해서 표시합니다.
calcDate(500); // 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();
var date = someday.getDate();
document.querySelector("#date"+days).innerText = year + "년 " + month + "월 " + date + "일";
}✅ 기념일 계산기 코드
<!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>@import url('https://fonts.googleapis.com/css?family=Black+Han+Sans|Jua');
* {
box-sizing: border-box;
}
.container{
width:450px;
margin:0 auto;
/* background:url(images/heart.png) no-repeat 5px -100px;
background-size:500px; */
border:1px solid #ccc;
border-radius:2%;
box-shadow:2px 2px 5px #333;
}
.day1{
padding-top:20px;
text-align:center;
}
.day1 h3 {
font-size:1.2em;
color:#666;
}
.accent{
margin-left:10px;
margin-right:10px;
margin-top:10px;
font-family: 'Jua', sans-serif;
font-weight:bold;
font-size:3.5em;
color:#222;
}
.bar {
width:100%;
margin:60px auto 0 auto;
padding-left:15px;
height:40px;
background:#747474;
color:#fff;
font-size:1.2em;
line-height:40px;
}
.day2 {
width:420px;
margin:20px auto 20px auto;
}
.day2 ul {
list-style: none;
border-bottom:1px dashed #ccc;
height:60px;
}
.day2 ul:last-child {
border-bottom:none;
}
.item-title {
float:left;
width:160px;
font-weight:bold;
font-size:1.5em;
line-height:60px;
}
.item-date {
float:left;
margin-left:60px;
font-size:1.2em;
color:#222;
text-align:right;
line-height:60px;
}var now = new Date();
var firstDay = new Date("2020-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일, 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;
var date = someday.getDate();
document.querySelector('#date'+days).innerText = year+ "년" + month + "월" + date + "일";
}
calcDate(100);
calcDate(200);
calcDate(365);
calcDate(500);
내용이 은근 헷갈리는 부분이 있어서 복습을 좀 해야할 듯 싶다.
필요하다면 공부하는 개발자, 한승준