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

差分

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

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

--- 04.javascriptで電卓アプリ:index.html [2018/12/08]
adash333 [参考サイト]
+++ 04.javascriptで電卓アプリ:index.html [2018/12/08]
adash333 [方針をたてる]
@@ 行 1: / 行 1: @@
 ===== 04.Javascriptで電卓アプリ =====
+[[03.初めてのjavascriptでおみくじアプリ:index.html|前回]]は、初めてのJavascriptアプリとして、おみくじアプリを作成してみました。
+今回は、簡易電卓アプリを作成してみたいと思います。
+デザインはBulmaを利用します。電卓の表示をセンタリングするために、ほんの少しだけCSSを直書きしてみます。
 ===== 方針をたてる =====
-手書きでデザインを下書き
+手書きでデザインを下書きしてみるのがお勧めです。
+  -題名『電卓アプリ』
+  -電卓を表示する場所
+  -計算式と結果を表示する場所(<input type="text" name="text">)
+  -数字ボタンや+-×÷=ボタン、クリアボタン
 <code>
@@ 行 17: / 行 25: @@
 </code>
-作成中
+今回は、[[https://algorithm.joho.info/programming/javascript/simple-calculator/|こちらのサイト]]のソースコードを利用させていただこうと思います。
+eval関数という、指定した文字列が「 JavaScriptのプログラムコードとして正しいか 」を評価した上で それを実行する関数を用いますが、使用するにはリスクもあるようです。(参考:[[http://www.recipi.jp/7879|JavaScript【 eval 】 ～ ソースコードの評価と実行]])
 ソースコード
@@ 行 29: / 行 42: @@
+==== 0.用意するもの（開発環境） ====
+パソコン\\
+Windowsパソコンでも、Macでも、できれば、Chromeというブラウザをインストールして、Chrome上で操作を行ってください。
+==== 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>
 ===== 参考サイト =====

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