본 글은 HTML5, CSS 학습한 상태에서 작성한 글입니다.
예제풀이
간단한 함수선언과 조건문을 통하여 계산기를 구현해보았다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <body> <input type="text" id="txtsu1" autofocus="autofocus" onkeyup="txtsu1_keyup();" /> <select id="oplist"> <option value="1">+</option> <option value="2">-</option> <option value="3">*</option> <option value="4">/</option> <option value="5">%</option> </select> <input type="text" id="txtsu2" onkeyup="txtsu2_keyup();" /> <input type="button" id="btn" value="실행" onclick="btn_execute();" /> <hr> <span id="box" style="display: inline-block; width: 200px; height: 25px; background: black; color: white;"></span> </body> | cs |
<body>
먼저 body부분이다. text타입을 두개를 선언하여 연산할 수를 입력받는다.
※autofous="autofocus"란?
- input타입 등에 페이지가 로딩될 때 자동으로 focus가 잡혀서 따로 선택없이 바로 입력이
가능한 상태로 설정한다.
text사이에 option을 통하여 무슨 연산을 할 것인지를 text값으로 주고, value값을 1~5로 설정하였다.
결과 값은 span태그에 출력된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <script> function txtsu1_keyup() { if (event.keyCode == 13) { // isNaN 숫자가아닐경우 true if (isNaN(document.getElementById("txtsu1").value)) { alert("입력 잘못함"); document.getElementById("txtsu1").value = ""; document.getElementById("txtsu1").focus(); return; } document.getElementById("txtsu2").focus(); } } function txtsu2_keyup() { if (event.keyCode == 13) { document.getElementById("btn").focus(); } } function btn_execute() { var op = document.getElementById("oplist").value; var su1 = document.getElementById("txtsu1").value; var su2 = document.getElementById("txtsu2").value; var result = 0; var spanbox = document.getElementById("box"); switch (parseInt(op)) { case 1: result = Number(su1) + Number(su2); break; case 2: result = Number(su1) - Number(su2); break; case 3: result = Number(su1) * Number(su2); break; case 4: result = Number(su1) / Number(su2); break; case 5: result = Number(su1) % Number(su2); break; } spanbox.innerHTML = result; } </script> | cs |
<script> 함수
txtsu1_keyup() :
이 함수는 event.keyCode == 13 이라는 조건을 만족한 후에
입력한 값이 숫자가 아닐경우 입력을 잘못했다는 알림을 보내고
입력되었던 value값을 초기화하고, 다시 focus를 준다.
※event.keyCode 이란?
여기서 event.keyCode란 현재 입력된 키의 Keycode를 뜻한다.
event.keyCode == 13에서 13은 엔터의 keyCode값을 뜻한다.
즉, 엔터키를 입력했을때 숫자가 아니면은 내부 if문으로 들어가고, 아닐경우에는 두번째 입력창에 focus를 준다
txtsu2_keyup() :
이역시 동일하게 event.keyCode==13을 이용하여 엔터키가 입력이 될 경우 실행버튼에 focus를 준다.
btn_execute() :
연산을 위한 함수이다. 입력받은 값과 사용자가 선택한 옵션의 value값을 받아와 연산을 한다.
switch문을 이용하여 연산을 진행하였고, 다른 조건문도 사용가능하다.
연산한 결과값을 result라는 변수에 넣은 후에 spanbox.innerHTML 을 이용하여 결과 값을 출력한다
'이전 글 > JavaScript' 카테고리의 다른 글
| 11. JavaScript Ex.10 배열 함수 (0) | 2018.01.17 |
|---|---|
| 10. JavaScript Ex.09 options (0) | 2018.01.17 |
| 8. JavaScript Ex.07 형변환 (0) | 2018.01.16 |
| 6. JavaScript Ex.05 자료형 (0) | 2018.01.16 |
| 5. JavaScript Ex.04 변수선언 (0) | 2018.01.16 |
