サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


サイドバー

目次

サルでもわかる機械学習

sidebar

04.javascriptで電卓アプリ:index.html


04.Javascriptで電卓アプリ

前回は、初めてのJavascriptアプリとして、おみくじアプリを作成してみました。

今回は、簡易電卓アプリを作成してみたいと思います。

デザインはBulmaを利用します。電卓の表示をセンタリングするために、ほんの少しだけCSSを直書きしてみます。

方針をたてる

手書きでデザインを下書きしてみるのがお勧めです。

  1. 題名『電卓アプリ』
  2. 電卓を表示する場所
  3. 計算式と結果を表示する場所(<input type=“text” name=“text”>)
  4. 数字ボタンや+-×÷=ボタン、クリアボタン
[     ]
C     +
7 8 9 -
4 5 6 x
1 2 3 /
0 .  =

今回は、こちらのサイトのソースコードを利用させていただこうと思います。

eval関数という、指定した文字列が「 JavaScriptのプログラムコードとして正しいか 」を評価した上で それを実行する関数を用いますが、使用するにはリスクもあるようです。(参考:JavaScript【 eval 】 ~ ソースコードの評価と実行)

ソースコード

https://github.com/adash333/javascript-test/blob/master/calculator.html

出来上がったもの

https://adash333.github.io/javascript-test/calculator.html

0.用意するもの(開発環境)

パソコン

Windowsパソコンでも、Macでも、できれば、Chromeというブラウザをインストールして、Chrome上で操作を行ってください。

ただし、プログラミングには『タイプミスによってプログラム全体が動かない』ことが非常によくおこります。

VisualStudioCodeというソフトを用いてプログラミングを行うと、タイプミスがあると、下に赤い波線が表示されて、指摘してくれることが多いので、タイプミスが減ります。

実際にプログラミングを行うときは、https://azure.microsoft.com/ja-jp/products/visual-studio-code/からインストールして、VisualStudioCode上でプログラムを打ち込んで保存してから、GitHub上にコピペするのがお勧めです。

1.GitHubアカウントは作成済みとします

GitHubアカウントの作成方法については、このサイトについてをご覧下さい。

2.Githubで新規リポジトリを作成

前回、03.初めてのJavascriptでおみくじアプリのところで作成した、javascript-testリポジトリ(ファイルの置き場所)の中に、ファイルを作成していきます。

3. calculator.htmlファイル(HTMLファイル、ホームページのファイル)を作成

javascript-testリポジトリのトップページの画面で、「creating a new file」をクリックします。

以下のような真っ白な画面が出てきます。

  1. name your file… のところに、calculator.html と記入し、
  2. 下の方に、以下のコードをコピペします
  3. 入力し終わったら、下の方へ移動して、
  4. Commit new file をクリック

4.Bulmaのcolumn(カラム)システムを用いて計算結果とボタンをデザイン

参考(公式サイト):https://bulma.io/documentation/columns/

参考サイト

https://algorithm.joho.info/programming/javascript/simple-calculator/
【Javascript】簡易電卓を短いコードで作ってみた

http://cya.sakura.ne.jp/java/calc.htm
Step.30 - 電卓に挑戦

https://codepen.io/AndrewCreech/pen/vFEry
Simple Caluculator

https://techacademy.jp/magazine/15038
JavaScriptでeval関数の使い方とリスクとは【初心者向け】

https://qiita.com/xiaca/items/b239ff42579c465d3046
@xiaca
2017年09月17日に更新
Ionicで電卓を作成したので振り返る(始まり編)

CSS参考サイト

https://saruwakakun.com/html-css/basic/css
初心者向けCSS(スタイルシート)入門:基本的な書き方を総まとめ!
2017/07/15

https://saruwakakun.com/html-css/basic/max-min-width
【CSS】max-widthとmin-widthの使い方まとめ
2018/04/16

https://www.granfairs.com/blog/staff/centering-by-css
CSSで要素を上下や左右から中央寄せする7つの方法
Posted by NAGAYA on Mar 9th, 2017


04.javascriptで電卓アプリ/index.html.txt · 最終更新: 2018/12/08 by adash333