<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript Event</title>
<script>
//Event란?
//- 일반적이지 않은 특별한 상황
//- click, focus, input, 등 다양한 상황이 존재
//Event Handling이란?
//- 발생한 이벤트를 통제하여 원하는 작업을 실행하는 것
//- onclick, onfocus, oninput 등에 함수 호출 코드를 작성
//- 함수에서 필요한 나머지 처리를 수행하도록 구현
function changeImage() {
//console.log("실행!");
//이미지 태그를 참조할 수 있도록 탐색(cf. CSS 선택자)
var tag = document.querySelector("#target");
//이미지의 src를 다른 값으로 변경
}
function big(){
var target = document.querySelector("#target");
target.width = '500';
target.height = 500;
}
function small() {
var target = document.querySelector("#target");
target.width = 100;
target.height = 100;
}
</script>
</head>
<body>
<button onclick="changeImage();">다른 이미지로 변경</button>
<button onclick="big();">500x500으로 변경</button>
<button onclick="small();">100x100으로 변경</button>
<hr>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 글자 크기 조절 (2) | 2023.09.07 |
|---|---|
| 색상 바꾸기 (0) | 2023.09.06 |
| 함수(Function) (0) | 2023.09.04 |
| 변수 (0) | 2023.09.01 |
| 자바스크립트 기초 시작 (0) | 2023.08.31 |