자바 스크립트를 사용하여 간단한 계산기 만들기 입문자 용
계산기를 만들기
계기
Udemy에서 배운 지식을 출력하기 위해
Udemy
Udemy
웹 개발 입문 완전 공략 코스 - 프로그래밍을 처음으로 배울 수 있는 사람에게! 미경험으로부터 현장에서 사용할 수 있는 개발 스킬을 습득!
htps //w w. 우데 my. 코 m / 이런 rse / 우아 b- 아 p- 카치 온 - ゔ ぇ p 멘 t /
주로 섹션 9 (Javascript 입문) 및 섹션 10 (Javascript DOM 조작) 지식
거친 구상
텍스트 입력 계산기(이번에는 더하기만) 만들기
2개의 수치 입력란을 작성해, 입력된 값을 취득
취득 후, 덧셈을 행하는 처리를 작성
결과를 li 요소로 ul 요소에 추가합니다.
완제품 (스크린 샷)
두 개의 텍스트 박스에 수치를 입력하고 계산 버튼을 누르면 덧셈이 이루어져 위의 스페이스에 계산 결과를 표시하고 있다.
샘플 코드
addtion.html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsを使って足し算</title>
</head>
<body>
<ul id="lists"></ul>
<input id="number1" type="text">
<span>+</span>
<input id="number2" type="text">
<input id="calculate" type="button" value="計算">
<script src="js/addtion.js"></script>
</body>
</html>
addtion.jsdocument.getElementById('calculate').onclick = function () {
var li = document.createElement('li');
var number1 = parseFloat(document.getElementById('number1').value);
var number2 = parseFloat(document.getElementById('number2').value);
var result = document.getElementById('calculate').textContent = number1 + number2;
var number = document.createTextNode(result);
li.appendChild(number);
var lists = document.getElementById('lists');
lists.appendChild(li);
};
참고 사이트
<input type="text">에서 숫자만 입력하는 방법
자바 스크립트 곱 계산 결과가 나오지 않습니다.
Javascript MDN:parseFloat()
미래의 구상
0~9까지의 숫자 버튼으로 수치를 입력하는 기능과 사칙 계산을 할 수 있는 계산기를 만든다
단번에 만들면 힘들기 때문에, 다음 번은 뺄셈 기능 추가 등, 조금씩 기능을 추가해 간다.
Reference
이 문제에 관하여(자바 스크립트를 사용하여 간단한 계산기 만들기 입문자 용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/raimumk2/items/704f0f4eae85c4c46122
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsを使って足し算</title>
</head>
<body>
<ul id="lists"></ul>
<input id="number1" type="text">
<span>+</span>
<input id="number2" type="text">
<input id="calculate" type="button" value="計算">
<script src="js/addtion.js"></script>
</body>
</html>
document.getElementById('calculate').onclick = function () {
var li = document.createElement('li');
var number1 = parseFloat(document.getElementById('number1').value);
var number2 = parseFloat(document.getElementById('number2').value);
var result = document.getElementById('calculate').textContent = number1 + number2;
var number = document.createTextNode(result);
li.appendChild(number);
var lists = document.getElementById('lists');
lists.appendChild(li);
};
Reference
이 문제에 관하여(자바 스크립트를 사용하여 간단한 계산기 만들기 입문자 용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/raimumk2/items/704f0f4eae85c4c46122텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
