04.javascriptで電卓アプリ:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン次のリビジョン両方とも次のリビジョン | ||
04.javascriptで電卓アプリ:index.html [2018/12/08] – [参考サイト] adash333 | 04.javascriptで電卓アプリ:index.html [2018/12/08] – [3. calculator.htmlファイル(HTMLファイル、ホームページのファイル)を作成] adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
===== 04.Javascriptで電卓アプリ ===== | ===== 04.Javascriptで電卓アプリ ===== | ||
+ | [[03.初めてのjavascriptでおみくじアプリ: | ||
+ | 今回は、簡易電卓アプリを作成してみたいと思います。 | ||
+ | |||
+ | デザインはBulmaを利用します。電卓の表示をセンタリングするために、ほんの少しだけCSSを直書きしてみます。 | ||
===== 方針をたてる ===== | ===== 方針をたてる ===== | ||
- | 手書きでデザインを下書き | + | 手書きでデザインを下書きしてみるのがお勧めです。 |
+ | -題名『電卓アプリ』 | ||
+ | -電卓を表示する場所 | ||
+ | -計算式と結果を表示する場所(< | ||
+ | -数字ボタンや+-×÷=ボタン、クリアボタン | ||
< | < | ||
行 17: | 行 25: | ||
</ | </ | ||
- | 作成中 | + | 今回は、[[https:// |
+ | |||
+ | eval関数という、指定した文字列が「 JavaScriptのプログラムコードとして正しいか 」を評価した上で それを実行する関数を用いますが、使用するにはリスクもあるようです。(参考: | ||
+ | |||
+ | |||
ソースコード | ソースコード | ||
行 29: | 行 42: | ||
+ | ==== 0.用意するもの(開発環境) ==== | ||
+ | パソコン\\ | ||
+ | Windowsパソコンでも、Macでも、できれば、Chromeというブラウザをインストールして、Chrome上で操作を行ってください。 | ||
+ | |||
+ | ==== 1.GitHubアカウントは作成済みとします ==== | ||
+ | GitHubアカウントの作成方法については、[[: | ||
+ | |||
+ | ==== 2.Githubで新規リポジトリを作成 ==== | ||
+ | 前回、[[03.初めてのjavascriptでおみくじアプリ: | ||
+ | |||
+ | ==== 3. calculator.htmlファイル(HTMLファイル、ホームページのファイル)を作成 ==== | ||
+ | <wrap hi> | ||
+ | |||
+ | {{: | ||
+ | |||
+ | 以下のような真っ白な画面が出てきます。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | -name your file... のところに、calculator.html と記入し、 | ||
+ | -下の方に、以下のコードをコピペします | ||
+ | -入力し終わったら、下の方へ移動して、 | ||
+ | -Commit new file をクリック | ||
+ | |||
+ | < | ||
+ | <script src=" | ||
+ | </ | ||
===== 参考サイト ===== | ===== 参考サイト ===== | ||
行 47: | 行 87: | ||
2017年09月17日に更新 | 2017年09月17日に更新 | ||
Ionicで電卓を作成したので振り返る(始まり編) | Ionicで電卓を作成したので振り返る(始まり編) | ||
+ | |||
+ | ===== CSS参考サイト ===== | ||
行 56: | 行 98: | ||
【CSS】max-widthとmin-widthの使い方まとめ | 【CSS】max-widthとmin-widthの使い方まとめ | ||
| | ||
+ | |||
+ | https:// | ||
+ | CSSで要素を上下や左右から中央寄せする7つの方法 | ||
+ | Posted by NAGAYA on Mar 9th, 2017 | ||
04.javascriptで電卓アプリ/index.html.txt · 最終更新: 2018/12/08 by adash333