javascript를 사용하여 간단한 계산기를 만드는 part3 입문자 용

14951 단어 HTMLCSS자바스크립트프로그래밍

계산기를 만들기



계기



지난번 만든 사칙연산에 더해 실제로 있는 것 같은 계산기를 만들고 싶어졌다.

거친 구상



part2의 「향후의 구상」은, 일단 잊어 계산기의 외형을 만든다
0~9까지의 숫자 버튼으로 텍스트 입력을 할 수 있도록 한다
사칙 연산을 할 수 있도록 한다. (미 구현)

완제품 (스크린 샷)




위의 텍스트 입력란에 숫자 버튼으로 입력하는 곳까지 할 수 있었다.

샘플 코드



HTML

caluculate.html


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/caluculate.css">
  <title>計算機</title>
</head>
<body>
  <div class="caluculate">
    <div class="wrapper">
      <input id="number-text" type="text">
    </div>
    <div id="btns">
      <div id="num-btns">
        <button value="7" name="num" onclick="clickBtn(this)">7</button>
        <button value="8" name="num" onclick="clickBtn(this)">8</button>
        <button value="9" name="num" onclick="clickBtn(this)">9</button>
        <button value="4" name="num" onclick="clickBtn(this)">4</button>
        <button value="5" name="num" onclick="clickBtn(this)">5</button>
        <button value="6" name="num" onclick="clickBtn(this)">6</button>
        <button value="1" name="num" onclick="clickBtn(this)">1</button>
        <button value="2" name="num" onclick="clickBtn(this)">2</button>
        <button value="3" name="num" onclick="clickBtn(this)">3</button>
        <button value="0" name="num" onclick="clickBtn(this)">0</button>
        <button id="eq" value="=" name="symbol">=</button>
      </div>

      <div id="symbol-btns">
        <button value="+" name="symbol">+</button>
        <button value="-" name="symbol">-</button>
        <button value="*" name="symbol">*</button>
        <button value="/" name="symbol">/</button>
      </div>
    </div>
  </div>

  <script src="js/caluculate.js"></script>
</body>
</html>



CSS

caluculate.css
* {
  margin: 0;
  padding: 0;
}

.caluculate {
  margin: 100px auto;
}

.wrapper {
  width: 300px;
  margin: 0 auto;
}

.wrapper > #number-text {
  width: 293px;
  height: 54px;
  margin-bottom: 5px;
  font-size: 48px;
  /* 右から左へ入力するためのスタイル */
  text-align: right;
}

#btns {
  width: 300px;
  display: flex;
  margin: auto;
}

button {
  width: 65px;
  height: 57px;
}

#num-btns {
  margin: 5px;
}

#num-btns > button {
  margin-bottom: 5px;
  font-size: 24px;
}

#num-btns > button:last-child {
  width: 136px;
}

#symbol-btns {
  height: 228px;
  display: flex;
  flex-direction: column;
  display: inline-block;
  margin-top: 5px;
}

#symbol-btns > button {
  margin-bottom: 5px;
  height: 57px;
  font-size: 24px;
  text-align: center;
}



자바스크립트

caluculate.js
var number = document.getElementById('number-text');

function clickBtn(num) {
  number.value = number.value + num.value;
};



참고 사이트



계산기 만드는 법 등

자바스크립트를 사용한 "계산기 웹 앱"을 만드는 방법을 중 3 아들에게 가르쳐 보았다! (프로그래밍 초보자용)

JavaScript로 계산기 프로그램을 작성하는 방법을 현역 엔지니어가 해설【초보자용】

CSS 관련

CSS로 이미지를 세로로 늘어놓는 방법을 현역 디자이너가 해설【초보자용】

【CSS】width와 height의 해설! 효과가 없을 때의 해소법

오른쪽에서 왼쪽으로 텍스트 HTML 입력

js 관련

요소를 클릭하여 처리 시작! JavaScript onclick에서 이벤트 지정

JavaScript의 querySelectorAll 메소드의 사용법을 현역 엔지니어가 해설【초보자용】

오류 관련

JavaScript에서 "Unexpected token"이라는 에러가 나오는 원인과 대처법을 현역 엔지니어가 해설 【초보자용】

미래의 기능과 관련

텍스트 상자에 입력된 값 가져오기 - JavaScript 프로그래밍

미래의 구상



· 사칙 연산 기능 추가
(최우선)

· 클리어 버튼과 소수점 버튼 추가
(버튼 배치에 고전한다고 생각된다)

・클리어 버튼으로 텍스트 박스의 값을 리셋하는 기능

・입력할 수 있는 문자열이나 문자수 등의 제한

· 기호 입력은 버튼 전환 기능을 사용하여 계산하고 싶습니다. 요컨대, 아이폰 계산기를 가정

텍스트 박스에는 기호는 입력하지 않고, 내부적으로 입력한다.
기호에 문자수를 사용하면, 긴 자리가 되었을 때에 부족해지고, 보기 좋기 때문에.
(텍스트 박스 표시 예: 「1」→(+버튼을 누름)→「1」→(=버튼을 누른다)→「2」)

· 계산 결과를 목록에 추가하는 기능
(여러 계산이 있을 때의 메모 대신)

· 계산 결과 목록을 편집 할 수있는 기능
(만들 수 있다면 만들어 보자)

버튼 전환 기능과 계산 결과를 리스트에 추가해 가는 기능은, 이전 만들 수 있었으므로, 이번의 코드에도 짜넣어 간다.
다트 개구리
객체 프록시의 실제 사용 사례

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage