고전 이벤트 모델 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
window.onload = function(){
let btn = document.getElementById('btn')//고전 이벤트 모델. 인라인 방식은 body 부분에서 onclick 관련 내용 작성
}
</script>
</head>
<body>
<button id ='btn'>CLICK</button>
</body>
</html>
인라인 이벤트 모델 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function showInfo(){
}
</script>
</head>
<body>
<form action = "">
당신의 취미는?<br>
<input type = "checkbox" name = "hobby">음악감상<br> <!-- name : 한 그룹임을 나타내는 속성 -->
<input type = "checkbox" name = "hobby">영화감상<br>
<input type = "checkbox" name = "hobby">등산<br>
<input type = "checkbox" name = "hobby">게임<br>
<input type = "button" value = "결과보기" onclick = "showInfo()"> <!-- 인라인 이벤트 모델 -->
</form>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
td {
width : 50px;
height : 50px;
}
input {
width : 96%;
height :96%;
font-size: 20px;
}
</style>
<script>
function add(expression){
let display = document.getElementById('display');
display.value += expression;
}
function calculate(){
let display = document.getElementById('display');
let result = eval(display.value);
display.value = result;
}
function reset(){
let display = document.getElementById('display')
display.value = " ";
}
</script>
</head>
<body>
<table border = "1">
<tr>
<td colspan = "4"><input type = "text" id = "display"></td>
</tr>
<tr>
<td><input type = "button" value ="7" onclick = "add(7)"/></td>
<td><input type = "button" value ="8" onclick = "add(8)" /></td>
<td><input type = "button" value ="9" onclick = "add(9)"/></td>
<td><input type = "button" value ="/" onclick = "add('/')"/></td>
</tr>
<tr>
<td><input type = "button" value ="4" onclick = "add(4)"/></td>
<td><input type = "button" value ="5" onclick = "add(5)"/></td>
<td><input type = "button" value ="6" onclick = "add(6)"/></td>
<td><input type = "button" value ="*" onclick = "add('*')"/></td>
</tr>
<tr>
<td><input type = "button" value ="1" onclick = "add(1)"/></td>
<td><input type = "button" value ="2" onclick = "add(2)"/></td>
<td><input type = "button" value ="3" onclick = "add(3)"/></td>
<td><input type = "button" value ="-" onclick = "add('-')"/></td>
</tr>
<tr>
<td><input type = "button" value ="0" onclick = "add(0)"/></td>
<td><input type = "button" value ="." onclick = "add('.')"/></td>
<td><input type = "button" value ="+" onclick = "add('+')"/></td>
<td><input type = "button" value ="%" onclick = "add('%')"/></td>
</tr>
<tr>
<td colspan = "2"><input type = "button" value ="=" onclick = "calculate()"/></td>
<td colspan = "2"><input type = "button" value ="Clear" onclick = "reset()"/></td>
</tr>
</table>
</body>
</html>'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
| [JS] DOM : form 태그(document.name속성명), checkbox 버튼 전체선택, 전체취소, 결과보기 (1) | 2020.06.22 |
|---|---|
| [JS] DOM level 2 : 표준 이벤트 모델 (이벤트 캡쳐링, 이벤트 버블링 비교) (0) | 2020.06.22 |
| [JS] 태그 가져오기(2) document.querySelector(), querySelectorAll() (0) | 2020.06.22 |
| [JS] 버튼을 누를 때마다 동적으로 변하는 페이지 만들기(숫자 증감) (0) | 2020.06.21 |
| [JS] 버튼을 누를 때마다 동적으로 변하는 페이지 만들기(계산기) (0) | 2020.06.21 |
