HTML CSS 강의를 진행하다가 갑자기, 특강 요청이 왔다.
그래서 급. 준비한 예제.
Javascript 기본 개념들 넘어가고, 바로 함수와 객체 정보를 불러와 값들을 계산하는 예제이다.
총 3단계로 구현하였고, 중간에 주석이나, CSS가 덜 써진 부분이나, 예외처리를 안한 부분도 있다.
(HTML, CSS, Javascript) 가 어색한 나에게 남의 코드는 어려워서(?) 그냥 쉽게 예제를 만들어봤고,
완성된 코드는 아니며, 이 코드를 수정해서 계산기를 완성 할수 있도록 만들어놨다.
javascript 함수를 연습하고 싶은 사람들은 참고해서 만들어 보면 좋을것 같다.
1. 두 수를 입력받아, 사칙연산하기(더하기만 구현)
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>계산기</title>
<style>
input[type="text"]
{
text-align: right;
width: 50px;
}
div
{
text-align: center;
line-height: 2em;
}
input[type="button"]
{
width: 60px;
height: 30px;
background-color: #0E639CFF;
border-radius: 10px;
color: white;
font-weight: 600;
}
</style>
<script language="javascript">
function calc_plus()
{
var a = document.getElementById('num1');
var b = document.getElementById('num2');
var answer = document.getElementById('answer');
answer.value = parseInt(a.value) + parseInt(b.value);
}
function calc_minus()
{
}
function calc_multifly()
{
}
function calc_divide()
{
}
</script>
</head>
<body>
<div class="display">
첫번째 숫자를 입력해주세요. <input type="text" id="num1"><br>
두번째 숫자를 입력해주세요. <input type="text" id="num2"><br>
<input type="button" value="더하기" onclick="calc_plus();">
<input type="button" value="빼기" onclick="calc_minus();">
<input type="button" value="곱하기" onclick="calc_multiply();">
<input type="button" value="나누기" onclick="calc_divide();"><br>
결과 : <input type="text" id="answer" style="width: 200px;">
</div>
</body>
</html>
(추가) ↑ 위의 소스코드에... 곱하기 함수 이름을 ... 잘못 쓴 오타가 발견되었다... 어쩐지 구현을 해도 안되더라니...하하... 참고해서 수정을 해야한다...
2. 계산기 모양을 디자인하여, 두 수의 사칙연산 계산(더하기만 구현)
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>계산기</title>
<style>
.display /*div*/
{
width: 300px;
text-align: center;
line-height: 2em;
position: relative;
}
input[type="text"]
{
text-align: right;
width: 100%;
height: 40px;
padding-right: 10px;
box-sizing: border-box;
margin-bottom: 1.5em;
}
input[type="button"]
{
width: 70px;
height: 30px;
background-color: #0E639CFF;
border-radius: 10px;
color: white;
font-weight: 600;
font-size: 1.5em;
padding: 0;
}
</style>
<script language="javascript">
var operator = "";
var tempNumber = 0;
var initFlag = 0;
function inputNumber(e)
{
var a = document.getElementById('num1');
if(initFlag == 1)
{
a.value = "";
initFlag = 0;
}
a.value = a.value + e.value;
}
function evtOperator(e)
{
var a = document.getElementById('num1');
operator = "+";
//temp_Number = ParseInt(a.value);
tempNumber = a.value;
a.value = "";
}
function calculator(e)
{
var a = document.getElementById('num1');
if(a.value == "" || initFlag == 1)
{
a.value = "0";
}
if(operator == "+")
{
a.value = parseInt(tempNumber) + parseInt(a.value);
}
//새로운 계산하기 위해 초기화
initFlag = 1;
tempNumber = 0;
}
</script>
</head>
<body>
<div class="display">
<input type="text" id="num1">
<input type="button" value="7" onclick="inputNumber(this);">
<input type="button" value="8" onclick="inputNumber(this);">
<input type="button" value="9" onclick="inputNumber(this);">
<input type="button" value="/" onclick="">
<input type="button" value="4" onclick="inputNumber(this);">
<input type="button" value="5" onclick="inputNumber(this);">
<input type="button" value="6" onclick="inputNumber(this);">
<input type="button" value="*" onclick="">
<input type="button" value="1" onclick="inputNumber(this);">
<input type="button" value="2" onclick="inputNumber(this);">
<input type="button" value="3" onclick="inputNumber(this);">
<input type="button" value="-" onclick="">
<input type="button" value="0" onclick="inputNumber(this);">
<input type="button" value="." onclick="inputNumber(this);">
<input type="button" value="+" onclick="evtOperator(this);">
<input type="button" value="=" onclick="calculator(this)">
<!--<input type="button" value="더하기" onclick="calculator(this);"><br>-->
</div>
</body>
</html>
3. 2에서 디자인한 계산기에서 여러 수의 사칙연산 계산(더하기만 구현)
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>계산기</title>
<style>
.display
{
width: 300px;
text-align: center;
line-height: 2em;
position: relative;
}
input[type="text"]
{
text-align: right;
width: 100%;
height: 40px;
padding-right: 10px;
box-sizing: border-box;
margin-bottom: 1.5em;
}
input[type="button"]
{
width: 70px;
height: 30px;
background-color: #0E639CFF;
border-radius: 10px;
color: white;
font-weight: 600;
cursor: pointer;
font-size: 1.5em;
padding: 0;
}
</style>
<script language="javascript">
var operator = "";
var tempNumber = "";
var initFlag = 0;
function inputNumber(e)
{
var a = document.getElementById('num1');
if(initFlag == 1)
{
a.value = "";
initFlag = 0;
}
a.value = a.value + e.value;
}
function evtOperator(e)
{
var a = document.getElementById('num1');
if(operator != "")
{
tempNumber = parseInt(tempNumber) + parseInt(a.value);
}
else
{
operator = e.value;
tempNumber = a.value;
}
a.value = "";
}
function calculator(e)
{
var a = document.getElementById('num1');
if(a.value == "" || initFlag == 1)
{
a.value = "0";
}
if(operator == "+")
{
a.value = parseInt(tempNumber) + parseInt(a.value);
}
//새로운 계산하기 위해 초기화
initFlag = 1;
tempNumber = 0;
}
function msg()
{
window.alert("정수계산만 가능합니다.");
}
</script>
</head>
<body>
<div class="display">
<h1>계산기</h1>
<p>programmed by 김경민</p>
<input type="text" id="num1">
<input type="button" value="7" onclick="inputNumber(this);">
<input type="button" value="8" onclick="inputNumber(this);">
<input type="button" value="9" onclick="inputNumber(this);">
<input type="button" value="/" onclick="">
<input type="button" value="4" onclick="inputNumber(this);">
<input type="button" value="5" onclick="inputNumber(this);">
<input type="button" value="6" onclick="inputNumber(this);">
<input type="button" value="*" onclick="">
<input type="button" value="1" onclick="inputNumber(this);">
<input type="button" value="2" onclick="inputNumber(this);">
<input type="button" value="3" onclick="inputNumber(this);">
<input type="button" value="-" onclick="">
<input type="button" value="0" onclick="inputNumber(this);">
<input type="button" value="." onclick="msg()">
<input type="button" value="+" onclick="evtOperator(this);">
<input type="button" value="=" onclick="calculator(this)">
<!--<input type="button" value="더하기" onclick="calculator(this);"><br>-->
</div>
</body>
</html>
(추가) 여기서 사칙연산의 우선순위가 적용되지 않았다.
혹시 추가를 하려거든
1. 사칙연산 우선순위
2. 괄호 기능
3. 소수 계산 (정수만 입력 가능. 결과는 소수도 나옴)
이런 것들을 추가로 계산해주면 좋을 것 같다.
반응형
'코딩교육 > 웹프로그래밍' 카테고리의 다른 글
웹 프로그래밍을 위한 Visual Code 다운로드 및 설정 (0) | 2022.03.13 |
---|