<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
input
{
font-family:나눔고딩코딩;
font-weight:bold;
}
input:focus
{
background-color:#eeeedd;
}
input.btn
{
width:80px;
font-weight:bold;
font-family :맑은고딕;
}
input.btn:hover
{
color:orange;
}
</style>
<script type="text/javascript">
/*
function sum()
{
var vnum1 =document.getElementById("num1");
var vnum2 =document.getElementById("num2");
var sum =document.getElementById("result");
sum.value=parseInt(vnum1.value)+parseInt(vnum2.value);
}
function minus()
{
var vnum1 =document.getElementById("num1");
var vnum2 =document.getElementById("num2");
var sum =document.getElementById("result");
sum.value=parseInt(vnum1.value)-parseInt(vnum2.value);
}
function go()
{
var vnum1 =document.getElementById("num1");
var vnum2 =document.getElementById("num2");
var sum =document.getElementById("result");
sum.value=parseInt(vnum1.value)*parseInt(vnum2.value);
}
function na()
{
var vnum1 =document.getElementById("num1");
var vnum2 =document.getElementById("num2");
var sum =document.getElementById("result");
sum.value=parseInt(vnum1.value)/parseInt(vnum2.value);
} */
//하나의 함수를 활용하여 만들기
function myCalc(obj)
{
var vnum1 =document.getElementById("num1");
var vnum2 =document.getElementById("num2");
var vresult=0;
//test
//alert(obj);
//obj로 넘겨온 type속성 ,value속성 찍어보기
//alert(obj.type);
//alert(obj.value);
//javascrip는 java와 다르게 equals를 사용하지 않아도 처리 가능.
if(obj.value=="더하기")
{
//덧셈 연산 수행
vresult = parseInt(vnum1)+parseInt(vnum2);
}
else if(obj.value=="빼기")
{
//빼기 연산 수행
vresult = parseInt(vnum1)-parseInt(vnum2);
}
else if(obj.value=="곱하기")
{
vresult = parseInt(vnum1)*parseInt(vnum2);
}
else if(obj.value=="나누기")
{
vresult = parseInt(vnum1)/parseInt(vnum2);
}
document.getElementById("result").value = vresult;
//초깃값을 0으로 부여했기 떄문에 else로 안끝나도 됨.
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<div>
<h3>두 개의 정수를 입력받고</h3>
<h3>합, 차, 곱, 몫을 연산하여 연산 결과를 출력할 수 있도록 한다.</h3>
<h3>HTML, CSS, Javascript 활용</h3>
</div>
<div>
<form>
정수1 : <input type="text" id="num1" style="width: 80px;">
정수2 : <input type="text" id="num2" style="width: 80px;">
<br><br>
<input type="button" class="btn" value="더하기" onclick="myCalc(this)">
<input type="button" class="btn" value="빼기" onclick="myCalc(this)">
<input type="button" class="btn" value="곱하기" onclick="myCalc(this)">
<input type="button" class="btn" value="나누기" onclick="myCalc(this)">
<!-- 여기서 this는 자기 자신의 객체를 넘겨준다는 의미 -->
<br><br>
결과 : <input type="text" id="result" style="width:80px;" disabled="disabled">
<input type="reset" class="btn" value="취소">
</form>
</body>
</html>