#지난강의
[왕초보 코딩 5강] 웹 계산기 만들기 1 - HTML, JavaScript(자바스크립트)
지금까지는 내가 얼마나 코딩에 흥미를 느낄 수 있을까 알아보기 위한 시간이었다면 5강부터는 그 흥미를 바탕으로 조금씩 실력을 늘려가는 시간을 가져보도록 할거예요 이 강의는 자연스럽게
sangminem.tistory.com
안녕하세요.
5강을 보지 않으신 분은 5강부터 봐주시기 바랄게요.
이어서 웹 계산기 만들기를 진행하겠습니다.
지금부터는 값1, 값2, 연산자에 값을 넣고 계산하기 버튼을 누르면 결과에 계산된 값이 찍히게끔 기능을 만들어 보도록 하겠습니다.
그리고 입/출력된 값들을 모두 지우는 초기화 기능도 만들어 보겠습니다.
자 그럼 진행해 볼게요.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>간단한 계산기</title>
<script>
function cal(){
// 추가된 부분
var v1 = document.getElementById("v1").value;
var v2 = document.getElementById("v2").value;
var op = document.getElementById("op").value;
var res;
}
function reset(){
alert("초기화 기능 구현 예정");
}
</script>
</head>
<body>
값1:
<input type="text" id="v1"><br>
값2:
<input type="text" id="v2"><br>
연산자:
<input type="text" id="op"><br>
결과:
<input type="text" id="res">
<br><br>
<input type="button" value="계산하기" onclick="cal()">
<input type="button" value="초기화" onclick="reset()">
</body>
</html>cal 함수 안에 드디어 난해한 것이 등장했습니다.
처음 보시면 대충 감은 잡힐 수도 있지만 의미를 바로 알기는 어려울 거예요.
기존에 작성했던 alert 구문은 제거하도록 할게요.
하나하나 보겠습니다.
일단 var v1 부터 막히실 건데 쉽게 얘기를 하면 어떤 값을 담기 위해 공간을 하나 만든 겁니다.
그 공간을 정의하기 위해 var 이라는 키워드를 사용했고 공간의 이름을 v1이라고 정의한 겁니다.
이 공간의 개념을 변수라고 부르겠습니다.
그 다음 보이는 = 기호는 또 뭘까요.
우리가 기존에 알고 있는 좌우 값이 같다는 의미로 표현한 것과는 조금 다른 기능을 합니다.
여기서는 왼쪽에서 v1이라고 이름 붙인 변수에 오른쪽에 있는 값을 대입하겠다는 의미로 쓰인 건데요.
오른쪽에 있는 값은 대체 뭘까요 갑자기 보기 싫어지시나요.
그래도 강한 의지를 갖고 의미를 따져봐야 해요.
일단 document는 웹 페이지 자체를 모두 담은 덩어리라고 보시면 됩니다.
그 덩어리가 제공하는 getElementById라는 메서드를 통해서 값을 가져올 수 있습니다.
여기서는 document.getElementById("v1") 이라는 표현을 사용했는데 아까 input 태그에 정의한 id 값 기억하시죠?
그 중 v1으로 정의한 태그를 가져오겠다는 의미입니다.
id가 v1인 input 태그를 통째로 가져온거라고 보시면 됩니다.
뒤에 따라붙은 .value는 통째로 가져온 input 태그에서 다시 value 값을 가져오겠다는 표현입니다.
text type의 input 태그 value 값은 실제 키보드로 입력 받은 값을 의미합니다.
전체적으로 정리를 하면 v1이라는 변수를 생성하고 거기에 id 값이 v1인 input 태그에 입력된 value 값을 가져와서 대입을 하겠다 라는 의미가 됩니다.
나머지 v2, op도 같은 방식이구요.
res는 나중에 계산된 결과를 담기 위해 값은 대입하지 않고 선언만 해놓은 상태입니다.
자 어렵지는 않죠?
그럼 다음 단계입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>간단한 계산기</title>
<script>
function cal(){
var v1 = document.getElementById("v1").value;
var v2 = document.getElementById("v2").value;
var op = document.getElementById("op").value;
var res;
// 추가된 부분
if(op == "+"){
res = v1+v2;
}else if(op == "-"){
res = v1-v2;
}else if(op == "*"){
res = v1*v2;
}else if(op == "/"){
res = v1/v2;
}
document.getElementById("res").value = res;
}
function reset(){
alert("초기화 기능 구현 예정");
}
</script>
</head>
<body>
값1:
<input type="text" id="v1"><br>
값2:
<input type="text" id="v2"><br>
연산자:
<input type="text" id="op"><br>
결과:
<input type="text" id="res">
<br><br>
<input type="button" value="계산하기" onclick="cal()">
<input type="button" value="초기화" onclick="reset()">
</body>
</html>또 새로운 개념이 등장합니다.
따로 다른 공부를 하지 않고 이 글만 보고 계신 분들을 기준으로 설명할 거니까 괜찮습니다.
그냥 쭉 따라오시면 됩니다.
과연 if 라는 키워드는 뭘까요.
만약..? 사실 영단어 뜻만으로도 감은 옵니다.
이 구문을 수행하려면 특정 조건을 만족해야 한다라는 의미예요.
이를 조건문이라고 부릅니다.
여기서는 op 변수에 담긴 값이 + 라면 {}(중괄호) 안에 있는 내용을 수행하겠다 라는 의미로 쓰인거죠.
=(대입 연산자)는 이미 다른 기능을 하고 있으므로 조건문에서 값이 같은 지 비교하기 위해서는 =(등호)를 두 번 써줍니다.
예) 1 == 1은 같으므로 true(참)이고 1 == 2 는 같지 않으므로 false(거짓) 입니다.
중괄호 안쪽을 보면 v1과 v2값을 더해서 미리 선언 해 놓은 res 변수에 대입하라는 의미의 구문이 기술되어 있습니다.
사칙연산 중 더하기 기능 구현이 완료된 겁니다.
이렇게 보면 뒤따라 오는 구문도 어렵지 않게 이해할 수 있어요.
else if 구문 3개는 op 변수에 담긴 값이 각각 -,*,/ 일때 수행하겠다 라는 의미입니다.
마찬가지로 중괄호 안쪽에 -,*,/ 연산을 하여 res 변수에 담는 구문이 기술됩니다.
그리고 앞서 설명한 것과 반대되는 부분이 나옵니다.
v1과 v2 변수에는 input 태그에 입력된 값을 가져와서 대입을 했다면 이번에는 res 변수에 담겨 있는 값을 input 태그 value 속성에 대입할건데 사실 단순하게 = 기준으로 좌우를 바꿔 써 주기만 하면 됩니다.
= 의미 자체가 오른쪽 값을 왼쪽에 대입시켜 주겠다는 거니까요.
이제 거의 다 됐습니다.
마지막으로 값을 초기화 하는 함수까지 마저 작성해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>간단한 계산기</title>
<script>
function cal(){
var v1 = document.getElementById("v1").value;
var v2 = document.getElementById("v2").value;
var op = document.getElementById("op").value;
var res;
if(op == "+"){
res = v1+v2;
}else if(op == "-"){
res = v1-v2;
}else if(op == "*"){
res = v1*v2;
}else if(op == "/"){
res = v1/v2;
}
document.getElementById("res").value = res;
}
function reset(){
// 추가된 부분
document.getElementById("v1").value = "";
document.getElementById("v2").value = "";
document.getElementById("op").value = "";
document.getElementById("res").value = "";
}
</script>
</head>
<body>
값1:
<input type="text" id="v1"><br>
값2:
<input type="text" id="v2"><br>
연산자:
<input type="text" id="op"><br>
결과:
<input type="text" id="res">
<br><br>
<input type="button" value="계산하기" onclick="cal()">
<input type="button" value="초기화" onclick="reset()">
</body>
</html>이 부분은 정말 어렵지 않습니다.
이미 나온 개념들이 전부 입니다.
input 태그 값을 id 기준으로 가져와서 value 속성에 값을 다 제거하겠다는 의미입니다.
오른쪽에 보이는 ""은 빈 값을 의미합니다.
완성입니다.
저장하고 실행을 한 번 시켜 보겠습니다.
여기까지만 입력하고 계산하기 버튼을 클릭해 보세요.
헉.. 이게 무슨 일일까요?
코딩이 이래서 처음에 어렵다고 느끼는 겁니다.
원래 알고 있던 상식이랑 다른 부분이 종종 있거든요.
한 가지 더 처리할 부분이 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>간단한 계산기</title>
<script>
function cal(){
var v1 = Number(document.getElementById("v1").value); // 수정된 부분
var v2 = Number(document.getElementById("v2").value); // 수정된 부분
var op = document.getElementById("op").value;
var res;
if(op == "+"){
res = v1+v2;
}else if(op == "-"){
res = v1-v2;
}else if(op == "*"){
res = v1*v2;
}else if(op == "/"){
res = v1/v2;
}
document.getElementById("res").value = res;
}
function reset(){
document.getElementById("v1").value = "";
document.getElementById("v2").value = "";
document.getElementById("op").value = "";
document.getElementById("res").value = "";
}
</script>
</head>
<body>
값1:
<input type="text" id="v1"><br>
값2:
<input type="text" id="v2"><br>
연산자:
<input type="text" id="op"><br>
결과:
<input type="text" id="res">
<br><br>
<input type="button" value="계산하기" onclick="cal()">
<input type="button" value="초기화" onclick="reset()">
</body>
</html>보이시나요.
v1, v2 값을 대입할때 Number()로 값을 감쌌습니다.
그 이유가 뭘까요?
우리 눈으로 보기에는 의심의 여지없이 그냥 숫자이지만 내부적으로는 이게 숫자 값인지 그냥 문자 값으로 쓰인건지 구분을 해줘야 합니다.
무슨 의미냐 하면 '무궁화 1호'에 포함되어 있는 1은 연산을 위한 숫자가 아닌 그냥 문자 취급되는 값이에요.
컴퓨터에서 연산을 하기 위해 사용하는 숫자는 문자로 표현된 1과는 다르다는 겁니다.
그 값을 내부적으로 형 변환을 하기 위해 Number(1)과 같은 구문을 썼다는 거구요.
당연히 이러한 변환을 할 때는 문자와 혼합된 형태여서는 안 됩니다.
하나 더 알아야 할 사실은 + 연산일 때만 이러한 문제가 발생한다는 겁니다.
그 이유는 JavaScript에서 문자 + 문자는 문자를 이어 붙이라는 의미이기 때문인데요.
예를 들어 '왕' + '초보'는 '왕초보'가 됩니다.
그래서 '5' + '3'이 '53'이 되는 기적을 보여준 거죠.
-,*,/ 연산을 할 때에는 자동 형 변환이 일어나서 문제가 발생하지는 않지만 왜 그런지는 꼭 알아 두어야 합니다.
그럼 저장을 하고 다시 실행해 보겠습니다.
드디어 정상 동작을 하게 됐군요.
초기화 버튼을 클릭하면 모든 내용이 깔끔히 지워집니다.
이로써 간단한 계산기 개발을 완료했구요.
실력이 한 단계 업그레이드 됐다는 느낌을 받으셨으면 좋겠습니다.
앞으로 더 좋은 강의로 찾아뵐게요.
감사합니다.
'코딩 강의 > 왕초보인데 가능할까요' 카테고리의 다른 글
| [왕초보 코딩 5강] 웹 계산기 만들기 1 - HTML, JavaScript(자바스크립트) (3) | 2020.09.02 |
|---|---|
| [왕초보 코딩 4강] 프로그래머 첫걸음 (0) | 2020.07.12 |
| [왕초보 코딩 3강] 나도 프로그래머가 될 수 있을까 (4) | 2020.07.11 |
| [왕초보 코딩 2강] 컴퓨터와의 첫 소통 (3) | 2020.07.09 |
| [왕초보 코딩 1강] 코딩의 코자도 몰라도 괜찮을까 (107) | 2020.07.06 |
| [왕초보 코딩 0강] 가르치기에 앞서 (12) | 2020.07.05 |
댓글