자바스크립트 함수를 이용해서 계산기를 만들기.
* 이벤트(Event)
- 키보드 입력, 마우스 클릭과 같이 다른 것에 영향을 미치는 것을 의미
- 마우스 이벤트, 키보드 이벤트, HTML 프레임 이벤트, HTML 입력 양식 이벤트, 유저 인터페이스 이벤트, 구조 변화 이벤트, 터치 이벤트
1. 이벤트 관련 용어
<script type="text/javascript">
window.onload = function() {};
</script>
- 이벤트 연결 : window 객체의 onload 속성에 함수 자료형을 할당하는 것
- 이벤트 이름(타입) : load
- 이벤트 속성 : onload
- 이벤트 리스너(핸들러) : 이벤트 속성에 할당한 함수
- 이벤트 모델 : 문서 객체에 이벤트를 연결하는 방법, DOM Level 단계에 따라 두가지로 분류하고 각기 두가지로 또 나뉜다.
| 이벤트 명 | 설명 |
|---|---|
| change | 변동이 있을시 발생 |
| click | 클릭시 발생 |
| focus | 포커스를 얻었을때 발생 |
| keydown | 키를 눌렀을때 발생 |
| keyup | 키에서 손을 땟을때 발생 |
| load | 로드가 완료 되었을때 발생 |
| mousedown | 마우스를 클릭 했을때 발생 |
| mouseout | 마우스가 특정 객체 밖으로 나갔을 때 발생 |
| mouseover | 마우스가 특정 객체 위로 올려졌을 시에 발생 |
| mousemove | 마우스가 움직였을 때 발생 |
| mouseup | 마우스에서 손을 땟을때 발생 |
| select | option 태그 등에서 선택을 했을때 발 |
* 소스코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script laguage="javascript">
function cal(cal) {
// if ('+'.equals(cal)) {
// alert("123");
// } // equals 를 이용한 문자열을 해봤지만 자바스크립트에서 equals 메소드가 없는듯?
var p1 = parseInt(document.getElementById("calc1").value);
var p2 = parseInt(document.getElementById("calc2").value);
if (cal == '+') {
document.getElementById("calc3").value= p1 + p2;
} else if (cal == '-') {
document.getElementById("calc3").value= p1 - p2;
} else if (cal == '*') {
document.getElementById("calc3").value= p1 * p2;
} else if (cal == '/') {
document.getElementById("calc3").value= p1 / p2;
}
}
function reset(){
document.getElementById("calc1").value = "";
document.getElementById("calc2").value = "";
document.getElementById("calc3").value = "";
}
</script>
<h1>연산 시스템</h1>
<h2>아래 항목을 채워주세요.</h2>
<br>
<table>
<tr>
<td>피연산자1</td>
<td><input type="text" id="calc1"></td>
</tr>
<tr>
<td>피연산자2</td>
<td><input type="text" id="calc2"></td>
</tr>
<tr>
<td><b>결과값</b></td>
<td><input type="text" id="calc3"></td>
</tr>
</table>
<button id="button1" onclick="cal('+')">+</button>
<button id="button2" onclick="cal('-')">-</button>
<button id="button3" onclick="cal('*')">*</button>
<button id="button4" onclick="cal('/')">/</button>
<button id="button5" onclick="reset()">취소</button>
</body>
</html>
* 실행화면
if ('+'.equals(cal)) 을 이용하여 문자열 비교를 하려고 했지만 자바스크립트에 equals메소드가 없는건지 자바랑 문법이 다른건지 == 동등비교연산자로 비교를 함.
'Program > JavaScript' 카테고리의 다른 글
| JQuery란? (0) | 2015.07.25 |
|---|---|
| Ajax란? (0) | 2015.07.25 |
| jQuery 기본예제(버튼이벤트) (0) | 2015.07.25 |
| 자바스크립트1일차_텍스트상자채우기02 (0) | 2015.07.24 |
| 자바스크립트1일차_텍스트상자채우기 (0) | 2015.07.24 |
