🌱 이벤트
✏️이벤트 영역
하단 body 부분
✏️이벤트 개념
- 웹 브라우저나 사용자가 행하는 동작
- 사용자가 웹 문서 영역을 벗어나 하는 동작은 이벤트 아님
✏️이벤트 처리기
- 이벤트 발샐 시 어떤 함수 실행할지 알려줌
- 태그 안에서 이벤트 처리시 "on" + "이벤트명" 사용
🌱 이벤트 유형
✏️마우스 이벤트
| 속성 | 설명 |
|---|---|
| click | 사용자가 html 요소를 마우스로 눌렀을 때 이벤트 발생 |
| dbclick | 사용자가 html 요소를 마우스로 두 번 눌렀을 때 이벤트 발생 |
| mousedown | 사용자가 요소 위에서 마우스 버튼을 누르는 동안 이벤트 발생 |
| mousemove | 사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트 발생 |
| mouseover | 사용자가 마우스 포인터가 요소 위로 옮겨질 때 이벤트 발생 |
| mouseout | 사용자가 마우스 포인터가 요소를 벗어날 때 이벤트 발생 |
| mouseup | 사용자가 누르고 있던 마우스 버튼에서 손을 뗄 때 이벤트 발생 |
✏️폼 이벤트
| 속성 | 설명 |
|---|---|
| blur | 폼 요소에 포커스를 잃었을 때 이벤트가 발생함 |
| change | 목록이나 체크 상태 등이 변경되었을 때 이벤트가 발생 |
| focus | 폼 요소에 포커스가 놓였을 때 이벤트가 발생함 |
| reset | 폼이 다시 시작되었을 때 이벤트가 발생 |
| submit | submit 버튼을 눌렀을 때 이벤트가 발생 |
✏️키보드 이벤트
| 속성 | 설명 |
|---|---|
| keypress | 사용자가 키를 눌렀을 때 이벤트가 발생 |
| keydown | 사용자가 키를 누르는 동안 이벤트가 발생 |
| keydown | 사용자가 키에서 손을 뗄 때 이벤트 발생 |
✏️문서 로딩 이벤트
| 속성 | 설명 |
|---|---|
| abort | 웹 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 발생 |
| error | 문서가 정확히 로딩되지 않았을 때 이벤트 발생 |
| load | 문서 로딩이 끝나면 이벤트 발생 |
| resize | 문서 화면 크기가 바뀌었을 때 이벤트 발생 |
| scroll | 문서 화면이 스크롤되었을 때 이벤트 발생 |
| unload | 문서를 벗어날 때 이벤트 발생 |
🌱 실습
<button class="over" id="open" onclick="alert('눌렀습니다.')">상세 설명 보기</button>버튼을 클릭하면 나오는 알림창
단, html 파일 안 여러가지 언어가 사용될 경우 유지보수가 힘듬.
✏️이벤트 01
<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.event-handler.js"></script>
</body>html 파일 내에서 어떤 이벤트가 발생할 경우 어떤 함수를 실행시킬지 내용을 확인할 수 있음
ex) 버튼 태그 내hideDetail()
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";
}
상세내용 보기 버튼을 클릭할 경우 showDetail 함수가 실행되고,
상세내용 닫기 버큰을 클릭할 경우 hideDetail 함수가 실행되는 것 확인
✏️이벤트 02
<body>
<div id="item">
<img src="images/flower1.jpg" alt="" id="cover">
</div>
<script src="./js/03.event-dom.js"></script>
</body>html 문서 안에 JavaSctipt와 관련된 내용은 없음
var coverImage = document.querySelector('#cover');
coverImage.onclick = function(){alert('눌렀습니다.')}
coverImage.onmouseover = function(){coverImage.style.border = "5px solid black";}
coverImage.onmouseout = function(){coverImage.style.border = "";}
JavaSctipt에서 id(#cover)를 이용해 이벤트 발생 가능
마우스가 올라갈 경우 css 스타일이 생기고 벗어날 경우 사라짐.
그림을 클릭할 경우 alert 알림창이 실행되는 것 확인
🌱 객체
✏️개념
- 자료를 저장하고 처리하는 기본 단위
- 자바스크립트 프로그램에서 인식할 수 있는 모든 대상
- 복합 자료형(객체 안에 숫자, 문자열 등 여러가지 자료형 포함)
관련있는 내용을 모두 모은 것이다.
✏️JSON
- 데이터 교환 방식
✏️내장 객체(built-in object)
미리 정의되어 있는 객체
1. 문서 객체 모델(DOM)
문서 뿐만 아닌 웹 문서 안에 포함된 이미지, 링크, 텍스트 필드 등르 모두 별도 객체로 관리
2. 브라우저 객체 모델(BOM)
웹 브라우저 정보를 객체로 관리
- window 객체
- screen 객체
- location 객체
- navigator 객체
브라우저 환경과 다양한 명세서
✏️사용자 정의 객체
필요할 때마다 사용자가 만드는 객체
✏️속성(property)
객체에 담고 있는 값
객체명, 속성명
✏️메서드
객체 동작을 정의한 함수(객체 안 함수)
Window 객체에는 알림창을 표시하는 alert() 메서드가 있다.
Window 객체는 최상위 객체이기에 생략 가능
✏️프로토타입과 인스턴스
프로토타입(prototype)
객테 속성과 메서드를 모아놓은 틀
= 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿
인스턴스(instance)
단어 자체 의미: 사례
프로토타입으로 찍어낸 객체(프로토타입 속성과 함수를 똑같이 사용함)
get... : 열람
set... : 설정
외부에서 변경이 어렵도록 제한
✏️리터럴 표기법
변수를 선언 동시에 값을 표현하는 방법
<script>
var book = { //변수 객체 = {}
title: "자바스크립트",
author: "고썜", //속성이름: 속성값
page: 500,
info: function() {
alert(this.title + "이 책 분량은" + this.page + "쪽입니다.") //함수 이름: 함수
}
}
</script>실습
<body>
<div id="display"></div>
<script>
var toyRobot = {
productId : "123-123",
name : "Robot",
price : 25000,
quantity : 10,
showStock : function(){
document.querySelector('#display').innerHTML = this.name + " 제품은 " + this.quantity + "개 남았습니다.";
},
showPrice : function(){
document.querySelector('#display').innerHTML = this.name + " 제품은 " + this.price + "원 입니다.";
}
};
toyRobot.showStock();
toyRobot.showPrice();
</script>
</body>
함수가 덮어써져 마지막 실행값만 확인됨
🌱 생성자 함수 사용 객체
✏️생성자 함수
같은 내용을 여러번 사용할 경우
<script>
// 1. Book 객체를 정의함
function Book(title, author, pages, price) {
this.title = title;
this.author = author;
this.pages = pages;
this.price = price;
}
</script>this는 자기 자신을 가리킴.
✏️인스턴스
'new' 연산자와 생성자 함수를 사용해 유사한 객체 여러 개를 만들 수 있음
var css = new Book("CSS 튜토리얼", "Kim", 600, 30000);함수 이름의 첫 글자는 대문자로 시작.
반드시 'new' 연산자를 붙여 실행합니다.
실습
<script>
// 1. Book 객체를 정의함
function Book(title, author, pages, price) {
this.title = title;
this.author = author;
this.pages = pages;
this.price = price;
}
// 2. 인스턴스 생성
var css = new Book("CSS 튜토리얼", "Kim", 600, 30000);
// 3. 여러 인스턴스를 배열에 담아 활용
var html = new Book("웹표준 정석", "Kim", 600, 30000);
var python = new Book("파이썬", "Kim", 600, 30000);
var booklist = [css, html, python];
for(var i = 0; i < booklist.length; i++) {
document.write("<p>" + booklist[i].title + "<p>")
}
</script>
🍃 어려웠던 점 or 해결못한 것
낯선 개념이 많아 어려움
🍀 해결방법 작성
✏️ 어떻게 해결을 했는가?
✏️ 이렇게 이해를 했다
✏️ 어디까지 이해했지?
✏️ 다음에 시도해볼 방법
복습하기
🌷 학습 소감
이벤트, 객체를 활용하면 상호작용 가능한 동적 기능을 만들 수 있다는게 재밌었다.
