1.1.4 자바스크립트 계산기
데이터 바인딩과 반응성을 자세히 이해하기 위해 코드 1-1에서 기본적인 바닐라 자바스크립트를 사용한 계산기를 살펴보겠습니다.
코드 1-1 자바스크립트 계산기: chapter-01/calculator.html
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 계산기</title>
<style>
p, input { font-family: monospace; }
p, { white-space: pre; }
</style>
</head>
<!-- 초기화 함수에 바인딩 -->
<body>
<div id="myCalc"> -- 계산 함수에 연결된 x와 y 값을 수집할 입력 칸을 만듭니다.
<p>x <input class="calc-x-input" value="0"></p>
<p>y <input class="calc-y-input" value="0"></p>
<p>--------------------</p>
<p>= <span class="calc-result"></span></p> -- x와 y 값 결과를 여기서 보여 줍니다.
</div>