1) 학습한 내용
이벤트
- 웹 브라우저나 사용자가 행하는 동작
- 사용자가 웹 문서 영역을 벗어나 하는 동작은 이벤트가 아님
이벤트 처리기
- 이벤트가 발생했을 때 어떤 함수를 실행할지 알려줌.
- 태그 안에서 이벤트를 처리할 때는 "on"+"이벤트명"사용 (예, 클릭하면 onclick 사용)
onclick() -> Alert('눌렀습니다.')이벤트란?
사건, 어떤 일이 일어났을 때 어떤 명령이 실행되도록 하는 것을 말한다. 비디오 게임을 예로 들자면, FPS게임에 총구를 적으로 향하도록 하는데 마우스를 움직이고 조준을 하기 위해서 마우스 오른쪽을 누르면 조준이 되고 다시 마우스 오른쪽을 누르면 조준을 해제하는 것을 떠올리면 된다.
민들레 설명문 열고 닫기
<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) 브라우저 객체 모델 : 웹 브라우저 정보를 개체로 관리
3) 메소드(Method)
사용자 정의 객체
- 필요할 때마다 사용자가 직접 만드는 객체
속성(프로퍼티, property)
- 객체에 담고 있는 값
- 객체명.속셩명
(예, Navigator 객체에 있는 vendor 속성이 궁금하다면? naviagor.vendor)
메서드(method)
- 객체의 동작을 정의한 함수(객체 안의 함수)
- Window 객체에는 알림 창을 표시하는 alert()메서드가 있다.
-> window.alert()
-> window 객체는 최상위 객체이므로 window. 생략하고 그냥 alert()라고 쓸 수 있음.
프로토타입과 인스턴스
- 프로토타입 : 객체으 ㅣ속성과 메서드를 모아놓은 틀 같은 것
- 인스턴스 : 프로토타입으로 찍어낸 객체.
프로토타입의 속성과 함수를 똑같이 사용함.
객체 인스턴스 만들기
- new 예약어 뒤에 괄호를 붙여서 인스턴스 만듦.
- 예) 날짜와 관련된 프로그램을 만들려면 날짜/시간 정보가 있는 Date 객체의 인스턴스부터 만들어야 함.
>var now = new Date()
>now
<Tue Jun 14 2022 11:41:56 GMT+0900 (Korean Standard Time)now.toLocaleString()
'6/14/2022, 11:41:56 AM'사용자 정의 객체
리터럴 표기법을 사용한 객체 만들기
<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 : 'samue',
age : 31,
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>원의 반지름, 원의 둘레, 원의 넓이
2) 학습내용 중 어려웠던 점
이론을 듣고 따라 적는 것과 실전을 하는 것이 더 어려웠었다. 특히, BOM이든 DOM이든 그걸 응용해서 문제를 푸는 것은 어려웠다. 나의 고질적인 약점은 응용이 약하다는 것이다.
3) 해결방법
인터넷 검색을 통해서 문제 해결 방법을 찾아다녀야 했었다. 하지만, 상황에 따라서는 책이나 서적을 뒤져가면서 찾아내야 했었다.
4) 학습소감
자바스크립트에 BOM은 브라우저에 접근 할 수 있는 객체의 모음으로 window 객체를 통해 접근할 수 있으며 DOM은 현재 눈에 보이는 웹문서에 대한 제어와 변경이라면 BOM은 window를 제어한다. 이번 수업을 통해서 내가 더 분발해야 할 필요가 있다.
coding