- head태그안 script태그에 js파일을 연결시킨다.
- 값을 받는 input상자 2개, 결과버튼, 결과창 총 4개의 input을 만들어 준다.
- js파일에서 각 아이디를 받기위해 document.getElementById()로 js형식으로 받아준다.
- 입력값은 모두 text형태로 받아지기 때문에 int로 파싱을 해준 값을 각각 변수에 저장 해준다.
- sum의 value를 x+y로 지정해주면 끝!
예제파일:
javascript1-dom.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src ="javascript1-dom.js"> </script>
</head>
<body>
<section>
<h1>Ex1 : 계산기 프로그램</h1>
<div>
<input id = "txt-x" type="text" value="0" dir="rtl"/>
+
<input id = "txt-y" type="text" value="0" dir="rtl"/>
<input id = "btn-add" type="button" value="="/>
<input id = "txt-sum" type="text" value="0" readonly dir="rtl"/> //readonly로 처리함으로써 수정X
</div>
</section>
</body>
</html>javascript1-dom.js
window.addEventListener("load",function(){
var txtX = document.getElementById("txt-x");
var txtY = document.getElementById("txt-y");
var btnAdd = document.getElementById("btn-add");
var txtSum = document.getElementById("txt-sum");
btnAdd.onclick = function(){
var x = parseInt(txtX.value);
var y = parseInt(txtY.value);
txtSum.value = x+y;
};
});