🔸 학습내용
(1) 이벤트
1. 이벤트란?
- 이벤트 : html body 영역안에서 일어나는 일(웹 브라우저나 사용자가 행하는 동작)
- 이벤트 처리기 : 웹 문서에서 이벤트가 발생하면 처리하는 함수
- onclick( ) : 이벤트(html 태그안 -> on + 이벤트명)
- alert('눌렀습니다') : 실행명령(이벤트 처리기 or 이벤트 핸들러)
- 사용 예시 : 태그안에 속성처럼 추가 <'a href=""><'/a>
- 이벤트의 종류 : 마우스 이벤트, 키보드 이벤트, 폼 이벤트, 문서로딩 이벤트
2. 이벤트처리기 실습
- onclick : 버튼을 클릭해서 상세설명을 열고 닫기
- html 문서안에 스크립트를 작성
<body> <div id="item"> <img src="images/flower1.jpg" alt=""> <button class="over" id="open" onclick="showDetail()">상세 설명 보기</button> <!--onclick="" 추가 : 이렇게 하면 파일이 많아질 경우 유지보수가 힘들어진다. 나중에 문서객체모델을 배우면 이 방법을 사용하지 않고 이벤트를 적용할 수 있다.--> <div id="desc" class="detail"> <h4>민들레</h4> <p>어디서나 매우 흔하게 보이는 잡초로서 바닥에 딱 붙어서 꽃봉오리 하나가 쏙 올라온다. 톱니 모양의 잎새와 눈에 확 띄는 노란 꽃이 인상적이다. 특히 꽃이 지고나면 솜털모양의 깃을 가진 씨앗들이 나오는데 바람을 타고 날아가서 널리 퍼진다.</p> <button id="close" onclick="hideDetail()">상세 설명 닫기</button> </div> </div> <script> function showDetail(){ document.querySelector('#desc').style.display = "block"; // css상에 특별한 효과를 넣기 위해서 태그, 클래스, 아이디를 선택하듯 사용? document.querySelector('#open').style.display = "none"; // 상세설명 보기 } function hideDetail(){ document.querySelector('#desc').style.display = "none"; // css상의 특별한 효과를 넣기 위해서 태그, 클래스, 아이디를 선택하듯 사용(querySelector) document.querySelector('#open').style.display = "block"; } </script> </body>
3. DOM을 이용한 이벤트 처리기
- js 파일을 따로 만들어 html문서에 연결
- script태그를 body에 넣는 이유 : 웹브라우저가 문서를 파싱할때 헤드에 스크립트가 위치하면 속도가 느려질 수 있기 때문이다.
<body> <div id="item"> <img src="images/flower1.jpg" alt="" id="cover"> </div> <script src="./js/03.event-dom.js"></script> <!-- 스크립트 파일 연결 --> </body>// html에 onclick을 연결하지 않아도 적용이 된다. 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) 객체
1. 객체란?
- 객체란 자료를 저장하고 처리하는 기본단위, js 프로그램에서 인식할 수 있는 모든 대상
- 객체는 복합자료형(객체안에 숫자, 문자열 등 여러가지 자료형이 포함된다) -> 관련있는 내용을 모두 모아 놓은 것.(이름은 대표성있게 정해야한다)
- (예시)
var book = {
title : "자바스크립트",
author : "홍길동",
pages : 500,
price : 1500
} - 내장 객체 : 미리 정의 되어 있다(문서 객체 모델(DOM) / 브라우저 객체 모델)
- 문서 객체 모델 : 문서뿐아니라 웹 문서 안에 포함된 이미지, 링크, 텍스트 필드 등을 모두 별도의 객체로 관리
- 브라우저 객체 모델 : 웹 브라우저 정보를 객체로 관리
- 사용자 정의 객체 : 필요할 때마다 사용자가 직접 만드는 객체
2. 객체 인스턴스 만들기
- new 예약어 뒤에 객체 이름을 작성
- 예시 : 날짜와 관련된 프로그램을 만들려면 날짜 시간 정보가 있는 Date객체의 인스턴스부터 만들어야한다.
<script> // 프로토타입 사용법 console.log(Date()) var now = new Date() // now 변수에 저장 = Date 객체의 인스턴스를 만든다 console.log(now.toLocaleString()) // Date 객체의 메서드를 추가(toLocaleString()) </script>
3. 사용자 정의 객체
- 리터럴표기법
- 생성자 함수
🔸 어려웠던 점
프로토타입, 리터럴, 객체 등의 새로 접한 개념들이 정리가 잘 안된다.
🔸 해결방법
수업에서는 각각의 개념을 꼼꼼히 짚고 넘어가기보다 이러한 용어가 있고 이런식으로 사용이된다와 같이 가볍게 진행되는 느낌이라 헷갈리거나 부족한 부분은 다른 무료강의나 책을 통해서 다시한번 개념을 정리하는 시간을 가져보려고 한다.
🔸 학습소감
On your Mark