HTML
HTML은 HyperText Markup Language의 약자로 웹 페이지를 구성하는 마크업 언어이다.
<Tag이름> </Tag이름> 의 구조를 가지며 로 간략하게 표현할 수도 있다.
많이 쓰이는 Tag를 정리해보자.
div / span
div는 한 줄을 차지하고 span은 컨텐츠의 크기만큼 공간을 차지한다.
img태그는 속성으로 src를 key로 활용하여 나타낼 수 있고 닫는 태그 없이 활용이 가능하다.
a태그는 링크를 삽입할 때에 활용한다.(href를 key로 활용)
ul,li태그는 리스트를 정리하고자 할 때에 활용한다.
input태그에서 type의 속성값으로 radio와 checkbox를 활용할 수 있는데 radio는 중복없이 하나만 선택하는 경우에 쓰고 checkbox는 중복이 가능한 경우에 활용할 수 있다.
계산기 구현
과제는 js문법을 수정하여 기존의 계산기와 같이 동작하도록 만들어보는 것이다.
bare minumum에 대한 수도코드를 확인해보자.
- 연산 시 script.js의 calculate 함수를 활용할 수 있도록 함수 calculate를 작성합니다.
- 처음 숫자 버튼을 클릭했을 때, 첫 번째 화면에 누른 숫자가 나타나야 합니다.
- 숫자 버튼과 연산자 버튼을 순서대로 클릭했을 때, 첫 번째 화면에는 숫자, 두 번째 화면에는 연산자가 나타나야 합니다.
- 숫자 버튼, 연산자 버튼, 숫자 버튼을 순서대로 클릭했을 때, 화면에 숫자, 연산자, 순자가 순서대로 나타나야 합니다.
- 숫자 버튼, 연산자 버튼, 숫자 버튼, 엔터 버튼을 순서대로 클릭했을 때, 화면에 숫자, 연산자, 숫자, =, 연산 결과가 순서대로 나타나야 합니다.
- AC 버튼을 클릭했을 때, 화면에 0, +, 0, =, 0 이 순서대로 나타나야 합니다.
수도코드에 맞춰 내가 적은 코드에 대해 설명해보자.
1. 연산 시 script.js의 calculate 함수를 활용할 수 있도록 함수 calculate를 작성합니다.
function calculate(n1, operator, n2) {
let result = 0;
if(operator === '+') {
result = Number(n1) + Number(n2)
} else if (operator === '-') {
result = Number(n1) - Number(n2)
} else if (operator === '') {
result = Number(n1) Number(n2)
} else {
result = Number(n1) / Number(n2)
}
return String(result);
}
n1과 n2는 문자열로 읽어오기 때문에 수식계산을 위해서는 Number메소드를 활용하여 수식계산이 가능하도록 해야한다.
2&4. 처음 숫자 버튼을 클릭했을 때, 첫 번째 화면에 누른 숫자가 나타나야 합니다.
if (target.matches('button')) {
if (action === 'number') {
if (firstOperend.textContent === '0') {
firstOperend.textContent = buttonContent
} else {
secondOperend.textContent = buttonContent
}
}
firstOperend.textContent가 초기값 0이면 버튼으로 선택한 값인 buttonContent를 변수에 할당해주고 초기값이 0이 아니면 두 번째 수를 의미하는 secondOperend.textContent에 buttonContent로 선택한 값을 할당한다.
- 숫자 버튼과 연산자 버튼을 순서대로 클릭했을 때, 첫 번째 화면에는 숫자, 두 번째 화면에는 연산자가 나타나야 합니다.
if (action === 'operator') {
operator.textContent = buttonContent;
}
선택한 연산자를 나타내주는 operator.textContent변수에 내가 선택한 buttonContent를 할당한다.
- 숫자 버튼, 연산자 버튼, 숫자 버튼, 엔터 버튼을 순서대로 클릭했을 때, 화면에 숫자, 연산자, 숫자, =, 연산 결과가 순서대로 나타나야 합니다.
if (action === 'calculate') {
calculatedResult.textContent = calculate(firstOperend.textContent,operator.textContent,secondOperend.textContent)
}
결과를 보여주는 calculatedResult.textContent에 내가 만든 수식함수 calculate에 인자로 첫번째 숫자, 연산자, 두번째 숫자를 넣어 호출한 함수값을 할당한다.
- AC 버튼을 클릭했을 때, 화면에 0, +, 0, =, 0 이 순서대로 나타나야 합니다.
if (action === 'clear') {
firstOperend.textContent = '0'
operator.textContent = '+'
secondOperend.textContent = '0'
calculatedResult.textContent = '0'
}
기본값으로 다 바꿔준다.
