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