Page 16 -
P. 16
코드 1-1 자바스크립트 계산기: chapter-01/calculator.html
<!DOCTYPE html>
<html> 1
<head>
<title>자바스크립트 계산기</title>
<style> Vue.js 소개
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>
<script type="text/javascript">
(function() {
function Calc(xInput, yInput, output) { calc 인스턴스를 만드는 생성자입니다.
this.xInput = xInput;
this.yInput = yInput;
this.output = output;
}
Calc.xName = 'xInput';
Calc.yName = 'yInput';
Calc.prototype = {
render: function (result) {
this.output.innerText = String(result);
}
};
function CalcValue(calc, x, y) { calc 인스턴스 값들을 만드는 생성자입니다.
this.calc = calc;
this.x = x;
this.y = y;
this.result = x + y;
}
CalcValue.prototype = {
027
Vue.js 코딩 공작소(본문)최종.indd 27 2019-09-07 오후 8:43:25
