HTML과 JavaScript를 사용해 간단한 계산기 만들기

2014. 8. 6. 11:39

웹페이지에 간단한 계산기를 만들어보려고 한다. HTML언어만을 사용하기엔 클라이언트 언어이기 때문에 계산이 불가능하다. 그래서 서버언어인 JavaScript 언어를 사용하여 계산이 가능하도록 한다.

HTML언어로 틀부터 만들어보자.

<body>

<p>

<input type="text" id="num1" size="10" value=""> //첫번째 수

<select class="op" id="op"> //option 선택창

<option value='plus'>+</option>

<option value='sub'>-</option>

<option value='mul'>*</option>

<option value='div'>/</option></select>

<input type="text" id="num2" size="10" value=""> = <input type="text" id="num3" size="10" value="" readonly="readonly">

<input type="button" value="send" onclick="total()"> //계산 버튼

</p>

</body>

첫번째 칸과 두번째 칸에 계산할 수를 쓴 후 연산기호를 선택한다. 그런 다음 send버튼을 누르면 total()함수가 호출된다.

<script type="text/javascript"> //JavaScript 부분을 HTML의 <head>사이에 삽입한다.

function total() //total()함수 부분

{

var num1=document.getElementById("num1"); //<body>부분에서 num1변수를 getElementById를 이용하여 값을 가져온다.

var num1s=num1.value; // num1에서 가져온 값을 num1s에 저장해주고,

var num1b=parseInt(num1s); // 계산을 하기위해 그 값을 int형으로 바꿔준다.

var num2=document.getElementById("num2"); //위 방법과 같음..

var num2s=num2.value;

var num2b=parseInt(num2s);

var num3t;

var op=document.getElementById("op"); //역시 op값을 가져오고

var ops=op.value; //값으로 저장

switch(ops) //ops의 연산기호에 따라 case를 나눈다.

{

case "plus": num3t = num1b + num2b; document.getElementById("num3").value=num3t; break;

case "sub": num3t = num1b - num2b; document.getElementById("num3").value=num3t; break;

case "mul": num3t = num1b * num2b; document.getElementById("num3").value=num3t; break;

case "div": num3t = num1b / num2b; document.getElementById("num3").value=num3t; break;

} //계산한 값을 num3t에 저장한 후, 값을 num3로 가져간다.

}

</script>

값 불러오기, int형 변환만 생각한다면 간단한 계산기는 손 쉽게 만드는 것이 가능하다!!

[JSP] 파일업로드 확장자 우회 (1)	2019.03.19
[ASP] Sample Code + CMD Webshell (0)	2019.01.08
[IIS] Microsoft IIS/8.5 - 틸드문자 취약점 (0)	2019.01.04
[BurpSuite] handshake alert: unrecognized_name 문제 해결 (0)	2018.06.07
웹 프로그래밍 언어 소개 (0)	2014.07.08

Shine Myself