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

前回は、初めての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

パソコン

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

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

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

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

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

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

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で電卓を作成したので振り返る（始まり編）

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