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

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
===== 04.Javascriptで電卓アプリ =====

[[03.初めてのjavascriptでおみくじアプリ:index.html|前回]]は、初めてのJavascriptアプリとして、おみくじアプリを作成してみました。

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

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



===== 方針をたてる =====
手書きでデザインを下書きしてみるのがお勧めです。
  -題名『電卓アプリ』
  -電卓を表示する場所
  -計算式と結果を表示する場所(<input type="text" name="text">)
  -数字ボタンや+-×÷=ボタン、クリアボタン

<code>
[     ]
C     +
7 8 9 -
4 5 6 x
1 2 3 /
0 .  =
</code>

今回は、[[https://algorithm.joho.info/programming/javascript/simple-calculator/|こちらのサイト]]のソースコードを利用させていただこうと思います。

eval関数という、指定した文字列が「 JavaScriptのプログラムコードとして正しいか 」を評価した上で それを実行する関数を用いますが、使用するにはリスクもあるようです。(参考:[[http://www.recipi.jp/7879|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アカウントの作成方法については、[[:index.html|このサイトについて]]をご覧下さい。

==== 2.Githubで新規リポジトリを作成 ====
前回、[[03.初めてのjavascriptでおみくじアプリ:index.html|03.初めてのJavascriptでおみくじアプリ]]のところで作成した、<wrap hi>javascript-test</wrap>リポジトリ(ファイルの置き場所)の中に、ファイルを作成していきます。

==== 3. calculator.htmlファイル（HTMLファイル、ホームページのファイル）を作成 ====
<wrap hi>javascript-test</wrap>リポジトリのトップページの画面で、「creating a new file」をクリックします。

{{:pasted:20181202-200811.png}}

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

{{:pasted:20181202-200844.png}}

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

<html>
<script src="https://gist.github.com/adash333/69c4a5df13a0e6d3c105260f318f7f94.js"></script>
</html>

==== 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