220614) 자바스크립트(6)

김인경·2022년 6월 14일

학습 내용

이벤트

이벤트

웹 브라우저나 사용자가 행하는 동작

사용자가 웹 문서 영역을 벗어나 하는 동작은 이벤트가 아님

이벤트 처리기

이벤트가 발생했을 때 어떤 함수를 실행할지 알려줌

태그 안에서 이벤트를 처리할 때는 "on"+"이벤트명" 사용 (ex. 클릭하면 onclick 사용)

버튼 클릭해서 상세 설명 열고 닫기 1-1

HTML+JS
함수로 연결시켜서 버튼 열고 닫는 방법
onclick="alert('눌렀습니다')" - 클릭을 하면 함수를 실행

<body>

<button class="over" id="open" onclick="showDetail()">상세 설명 보기</button>

<button id="close" onclick="hideDetail()">상세 설명 닫기</button>

</body>


<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>

버튼 이벤트 1-2

js파일만 사용

<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: "자바스크립트",
			author: "고쌤",
			pages: 500,
			info : function(){
				alert(this.title + "책의 분량은 " + this.pages + "쪽입니다.");
			}
		}

리터럴표기법으로 객체 만들기

<script>
	var toyRobot = {
		productId : "123-12",
		name : "Robot",
		price :25000,
		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("웹 표준의 정석",  "Kim", 600, 30000);
var python = new Book("점프 투 파이썬" ,"Kim", 600, 30000);

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>