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

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

ユーザ用ツール

サイト用ツール


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


差分

このページの2つのバージョン間の差分を表示します。

この比較画面にリンクする

次のリビジョン
前のリビジョン
04.javascriptで電卓アプリ:index.html [2018/12/07]
adash333 作成
04.javascriptで電卓アプリ:index.html [2018/12/08] (現在)
adash333 [3. calculator.htmlファイル(HTMLファイル、ホームページのファイル)を作成]
行 1: 行 1:
 ===== 04.Javascriptで電卓アプリ ===== ===== 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/
 +
  
  
行 13: 行 96:
 https://codepen.io/AndrewCreech/pen/vFEry https://codepen.io/AndrewCreech/pen/vFEry
 Simple Caluculator Simple Caluculator
- 
- 
  
 https://techacademy.jp/magazine/15038 https://techacademy.jp/magazine/15038
 JavaScriptでeval関数の使い方とリスクとは【初心者向け】 JavaScriptでeval関数の使い方とリスクとは【初心者向け】
- 
- 
- 
- 
- 
- 
  
 https://qiita.com/xiaca/items/b239ff42579c465d3046 https://qiita.com/xiaca/items/b239ff42579c465d3046
行 30: 行 105:
 Ionicで電卓を作成したので振り返る(始まり編) 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.1544173147.txt.gz · 最終更新: 2018/12/07 by adash333