0614
학습내용
이벤트
-웹브라우저나사용자가행하는동작
-사용자가웹문서영역을벗어나하는동작은이벤트가아님
이벤트처리기
-이벤트가발생했을때어떤함수를실행할지알려줌
-태그안에서이벤트를처리할때는“on”+”이벤트명“ 사용(예, 클릭하면onclick 사용)
실습
<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>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";
}<!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/ed.js"></script>
</body>
</html> var coverImage = document.querySelector("#cover");
coverImage.onclick = function(){alert('눌렀습니다.')}
coverImage.onmouseover = function(){coverImage.style.border = "5px solid black";}
coverImage.onmouseout = function(){coverImage.style.border = "";}객체란?
객체는 자료를 저장하고 처리하는 기본 단위
자바스크립트 프로그램에서 인식할 수 있는 모든 대상
복합 자료형 (객체 안에 숫자, 문자열 등 여러 가지 자료형이 포함됨)
var book = {
title: "자바스크립트",
author: "홍길동",
pages: 500,
price: 15000
}내장객체(built-in object)
-미리정의되어있는개체
1)문서객체모델(DOM):문서뿐만아니라웹문서안에포함된이미지·링크·텍스트필드등을모두별도의객체로관리
2)브라우저객체모델:웹브라우저정보를객체로관리
사용자정의객체
-필요할때마다사용자가직접만드는객체
사용자 정의 객체
리터럴 표기법을 사용한 객체 만들기
<script>
var book = {
title: "자바스크립트",
author: "고쌤",
pages: 500,
info : function(){
alert(this.title + "책의 분량은 " + this.pages + "쪽입니다.");
}
}
</script>
fucntion Book(author, pages, price, title){
this.author = author;
this.pages = pages;
this.price = price;
this.title = title;
} // 생성자 함수의 this는 객체 자신(Book)을 가리킴.Book 객체의 인스턴스 만들기
>jsBook = new Book("홍길동", 500, 15000, "자바스크립트")
<Book {author: "홍길동", pages: 500, price: 15000, title: "자바스크립트"}
>jsBook.title
<"자바스크립트"과제
<script>
var member1 = {
name : '김규리',
id : 'kim',
age : 26,
address : 'daegu'
}
document.write("<h2>" + member1.name + "</h2>");
document.write("<ul><li>id : " + member1.id + "</li>");
document.write("<li>나이 : " + member1.age + "</li>");
document.write("<li>주소 : " + member1.address + "</li></ul>");
</script>
리터럴 표기법을 통한 member1 객체
<script>
var r = prompt("원의 반지름은? (cm)");
document.write("반지름이" + r + "일 때"+"<br>");
document.write("원의 둘레 : 약" + 2 * 3.14 * r + "<br>");
document.write("원의 넓이 : 약" + r * r * 3.14);
</script>어려운점
-객체에서 헤맴
해결방법
- 구글링과 반복학습
학습소감
실습 어려워요..
코딩