JavaScript 계산기 · DOM 실습 완전 정리

 

 

Web Development · JavaScript

JavaScript 계산기 · DOM 실습

계산기, span 스타일 변경, p 개수 세기, 랜덤 배경색 예제를 정리합니다.

시작 오늘 분석할 코드

이 폴더는 DOM 조작과 이벤트 처리 연습을 모은 장입니다. 작은 예제가 많기 때문에 코드가 어느 요소를 찾고, 어떤 이벤트에서 어떤 스타일이나 값을 바꾸는지 구분하는 것이 핵심입니다.

function addInput(b) { let lcd = document.getElementById("lcd"); if (lcd.value == "0") lcd.value = b; else lcd.value += b; } function backward() { let lcd = document.getElementById("lcd"); let len = lcd.value.length; if (len == 0) return; lcd.value = lcd.value.substr(0, len - 1); } function calculate() { let lcd = document.getElementById("lcd"); lcd.value = eval(lcd.value); } function setBorder() { document.getElementById("mySpan").style.border = "2px dotted violet"; } function randomBackground() { let r = Math.floor(Math.random() * 256); document.body.style.backgroundColor = "rgb(" + r + ",0,0)"; }

lcd계산기 표시창 역할을 하는 input입니다.

valueinput에 표시된 문자열 값입니다.

substr문자열 일부를 잘라냅니다.

eval문자열 수식을 실행합니다.

getElementsByTagName태그명으로 요소 목록을 찾습니다.

Math.random랜덤 숫자를 만듭니다.

---

1 계산기 전체 구조

계산기는 LCD 역할을 하는 input 하나와 숫자/연산자 버튼으로 구성됩니다. 버튼을 누르면 버튼의 value가 LCD에 누적되고, = 버튼을 누르면 eval로 계산합니다.

버튼 클릭

→

addInput

→

lcd.value 변경

함수	역할	대상
addInput	숫자/기호 입력	lcd.value
backward	마지막 문자 삭제	substr
calculate	수식 계산	eval
clearLcd	초기화	0

---

2 addInput 동작

LCD 값이 초기값 0이면 새 입력으로 교체하고, 이미 다른 값이 있으면 뒤에 붙입니다. 그래서 1, +, 2를 차례로 누르면 1+2가 됩니다.

현재 LCD	누른 버튼	결과
0	7	7
7	+	7+
7+	5	7+5
7+5	*	7+5*

---

3 BACK과 substr

backward()는 LCD 문자열 길이를 구한 뒤 마지막 한 글자를 제외한 문자열만 다시 넣습니다. 빈 문자열이면 바로 return합니다.

substr(0, len-1)

처음부터 마지막 직전까지 잘라서 뒤 한 글자를 삭제합니다.

return

삭제할 문자가 없으면 함수 실행을 끝냅니다.

---

 

반응형

 

4 eval 계산 주의

eval(lcd.value)는 LCD에 쌓인 문자열을 JavaScript 코드처럼 실행합니다. 계산기 예제에서는 편하지만 사용자 입력을 그대로 실행한다는 점을 이해해야 합니다.

실제 서비스에서는 eval 대신 수식 파서나 허용 문자 검증을 사용하는 편이 안전합니다.

입력	결과	주의
1+2	3	정상
7*5	35	정상
1+	오류	try/catch 필요
임의 코드	위험	eval 위험성

---

5 span border 연습

span/p 예제는 getElementById로 특정 span을 찾고, style.border를 직접 바꿉니다. DOM에서 하나의 요소를 찾아 스타일을 바꾸는 가장 기본적인 패턴입니다.

1

id로 찾기mySpan 요소를 가져옵니다.

2

style 접근span.style.border 속성을 사용합니다.

3

CSS 값 대입2px dotted violet 문자열을 넣습니다.

---

6 p 태그 개수 세기

getElementsByTagName("p")는 문서 안의 모든 p 요소를 모아줍니다. 반환된 목록의 length를 읽으면 개수를 알 수 있습니다.

코드	의미	결과
getElementsByTagName	태그명으로 찾기	p 목록
pArray	찾은 p 요소들	HTMLCollection
pArray.length	개수	3
alert	결과 표시	대화상자

---

7 랜덤 배경색

랜덤 배경 예제는 더블클릭 이벤트에서 RGB 값을 만들고 body 배경색을 바꿉니다. 각 색상 값은 0부터 255까지의 정수입니다.

코드	범위	의미
Math.random()	0 이상 1 미만	기본 난수
* 256	0 이상 256 미만	색상 범위 확대
Math.floor	0부터 255	정수화
rgb(r,g,b)	CSS 색상	배경색 적용

주석의 의문처럼 문자열은 화면에 표시되는 것이 아니라 CSS 속성값으로 적용됩니다. 값을 보고 싶다면 console.log나 별도 요소에 출력해야 합니다.

---

8 템플릿 리터럴

원문 주석처럼 문자열 더하기 대신 템플릿 리터럴을 쓰면 RGB 문자열을 더 읽기 쉽게 만들 수 있습니다.

문자열 연결

"rgb("+ r + "," + g + "," + b +")"

템플릿 리터럴

`rgb(${r}, ${g}, ${b})`

---

9 자주 하는 실수

실수	증상	해결
lcd id 오타	버튼을 눌러도 값이 안 바뀝니다.	getElementById 문자열을 확인합니다.
eval 오류 처리 없음	잘못된 식에서 멈춥니다.	try/catch를 추가합니다.
초기 0 처리 누락	07처럼 값이 붙습니다.	0이면 교체합니다.
style 값 단위 누락	스타일이 적용되지 않습니다.	CSS 문자열 형식을 지킵니다.
RGB 문자열 출력 기대	화면에 문자열이 안 보입니다.	속성 적용과 출력은 다릅니다.

---

10 복습 체크리스트

체크	통과 기준
addInput	버튼 value를 LCD에 붙이는 흐름을 설명합니다.
backward	substr로 마지막 글자를 지우는 방식을 압니다.
calculate	eval 계산과 위험성을 함께 압니다.
setBorder	id로 요소를 찾아 style을 바꿉니다.
howMany	태그 목록 length를 읽을 수 있습니다.
randomBackground	RGB 난수 생성 흐름을 설명합니다.

---

11 디버깅 포인트

확인	콘솔 예시	의미
LCD 요소	console.log(lcd)	input을 찾았는지 확인합니다.
LCD 값	console.log(lcd.value)	버튼 입력 결과를 봅니다.
p 개수	console.log(pArray.length)	태그 검색 결과를 확인합니다.
RGB 값	console.log(r,g,b)	난수 범위를 확인합니다.
배경색	console.log(document.body.style.backgroundColor)	CSS 적용 값을 봅니다.

---

12 테스트 케이스

케이스	입력	예상 결과
숫자 입력	7	LCD가 7
연산 입력	7+5	LCD가 7+5
BACK	7+5에서 클릭	7+로 변경
=	7+5	12 표시
border	버튼 클릭	span 테두리 표시
더블클릭	body 더블클릭	배경색 변경

---

13 계산기 개선 연습

기본 계산기는 핵심 흐름을 보기 좋지만, 실제 사용성을 생각하면 몇 가지 예외 처리가 더 필요합니다.

A

연산자 중복 방지마지막 글자가 연산자일 때 또 연산자가 들어오지 않게 합니다.

B

오류 처리calculate에서 try/catch로 잘못된 수식을 처리합니다.

C

소수점 버튼소수 계산이 필요하면 . 버튼과 입력 규칙을 추가합니다.

D

키보드 입력버튼 클릭 외에 keydown으로 숫자 입력을 받을 수 있습니다.

개선	이유	확인
연산자 검사	1++2 같은 식을 막습니다.	마지막 문자 확인
빈 값 검사	eval 오류를 줄입니다.	lcd.value 길이 확인
0 나누기 표시	Infinity 결과를 설명합니다.	결과 문자열 확인
결과 후 입력	다음 계산 시작을 자연스럽게 합니다.	계산 완료 상태 변수
NONE 제거	버튼 구성을 정리합니다.	필요한 기능으로 교체

---

14 DOM 선택 방식 비교

이 파일에는 id로 하나를 찾는 방식과 태그명으로 여러 개를 찾는 방식이 함께 나옵니다. 선택 방식에 따라 반환값의 형태가 달라집니다.

선택 방식	반환	사용 예
getElementById	요소 하나	lcd, mySpan
getElementsByTagName	요소 목록	p 태그 개수
style 속성	인라인 스타일	border, backgroundColor
value 속성	폼 입력값	계산기 LCD
length 속성	목록 개수	pArray.length

요소 하나를 다룰 때와 목록을 다룰 때 코드는 달라집니다. 목록은 보통 반복문이나 length 확인이 함께 필요합니다.

연습	목표
버튼 추가	소수점이나 괄호 버튼을 추가해 봅니다.
색상 출력	생성된 RGB 값을 화면에 함께 표시합니다.
p 개수 변경	p 태그를 추가하고 length 변화를 확인합니다.

---

핵심 한 줄 요약

calculator버튼 value를 LCD에 누적하고 eval로 계산합니다.

DOM요소를 찾은 뒤 style과 value를 바꿉니다.

randomRGB 문자열을 만들어 body 배경색에 적용합니다.

Tags

#JavaScript#계산기#DOM#eval#getElementById#getElementsByTagName#Math.random#RGB#style#티스토리

▼ 티스토리 태그 입력란 복사용

JavaScript, 계산기, DOM, eval, getElementById, getElementsByTagName, Math.random, RGB, style, 티스토리