더북(TheBook)

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>

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.