학습 내용
이벤트
- 이벤트
- 웹 브라우저나 사용자가 행하는 동작
- 사용자가 웹 문서 영역을 벗어나 하는 동작은 이벤트가 아님
- 이벤트 처리기
- 이벤트가 발생했을 때 어떤 함수를 실행할지 알려줌
- 태그 안에서 이벤트를 처리할 때는 "on"+"이벤트명" 사용 (ex. 클릭하면 onclick 사용)
버튼 클릭해서 상세 설명 열고 닫기 예제
함수로 연결시켜서 버튼 열고 닫는 방법
onclick="alert('눌렀습니다')" : 클릭을 하면 함수를 실행
<HTML>
<button class="over" id="open" onclick="showDetail()">상세 설명 보기</button>
<button id="close" onclick="hideDetail()">상세 설명 닫기</button><script>
function showDetail(){
//querySelector 선택자
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";//[상세 설명 보기] 버튼 표시
}
</script>버튼 이벤트 연습
<script>
var coverImage = document.querySelector("#cover");
coverImage.onclick = function(){ //알림창
alert('눌렀습니다')
}
coverImage.onmouseover = function(){ //테두리
coverImage.style.border = "5px solid black";
}
coverImage.onmouseout = function(){
coverImage.style.border = ""; //빈테두리
}
</script>객체
객체는 자료를 저장하고 처리하는 기본 단위
자바스크립트 프로그램에서 인식할 수 있는 모든 대상
복합 자료형(객체 안에 숫자, 문자열 등 여러가지 자료형이 포함됨)
- 내장객체(built-in object)
미리 정의되어 있는 개체
- 1) 문서 객체 모델 (DOM): 문서 뿐만 아니라 웹 문서 안에 포함된 이미지, 링크, 텍스트 필드 등을 모두 별도의 객체로 관리
- 2) 브라우저 객체 모델 웹 브라우저 정보를 객체로 관리 - 사용자 정의 객체
필요할 때마다 사용자가 직접 만드는 객체 - Math 객체
사용자 정의 객체
var book = {
title: "HTML",
author: "KIM",
pages: 500,
info : function(){
alert(this.title + "책의 분량은 " + this.pages + "쪽입니다.");
}
}리터럴표기법으로 객체 만들기
<script>
var toyRobot = {
productId : "123-12",
name : "Robot",
price :30000,
quantity: 10,
showStock: function(){
document.querySelector('#display').innerHTML = this.name + " 제품은 " + this.quantity + "개 남았습니다.";
},
showPrice: function(){
// 제품의 가격은 XXX 입니다.
document.querySelector('#display2').innerHTML = this.name + " 제품은 " + this.price + "입니다.";
}
};
toyRobot.showStock();
toyRobot.showPrice();
</script>생성자 함수로 객체 생성하기
<script>
// 1단계: Book 객체를 정의함
function Book(title, author, volume, price){
this.title = title;
this.author = author;
this.volume = volume;
this.price = price;
}
// 2단계: 인스턴스 생성하기
var css = new Book("CSS3 튜토리얼", "Kim", 600, 30000);
// 3단계: 여러 인스턴스를 배열에 담아 활용하기
var html = new Book("웹 표준의 정석", "Lee", 600, 40000);
var python = new Book("점프 투 파이썬" ,"park", 600, 50000);
var bookList = [css, html, python];
document.write("<h1>책 정보 가져오기</h1>");
for (var i = 0; i < bookList.length; i++){
document.write("<p>" + bookList[i].title + "(" + bookList[i].price + "원)" + "</p>");
}
</script>어려운 점
html테그를 넣기 위해서 " "안에 일부만 넣어야 할 경우 많이 헷갈렸다.
예를 들어
"<b>(" + bookList[i].price + ")<br>" 이런식으로 사용할 경우 오타가 많이 발생할 듯 하다.
소감
현재 함수에 대해서 얉지만 많이 공부하고있는 것을 보고 함수를 이해해야 할 의무감이 들고있다.
안뇽하세용