このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
04.javascriptで電卓アプリ:index.html [2018/12/08] adash333 [参考サイト] |
04.javascriptで電卓アプリ:index.html [2018/12/08] (現在) adash333 [3. calculator.htmlファイル(HTMLファイル、ホームページのファイル)を作成] |
||
---|---|---|---|
行 1: | 行 1: | ||
===== 04.Javascriptで電卓アプリ ===== | ===== 04.Javascriptで電卓アプリ ===== | ||
+ | [[03.初めてのjavascriptでおみくじアプリ: | ||
+ | 今回は、簡易電卓アプリを作成してみたいと思います。 | ||
+ | |||
+ | デザインはBulmaを利用します。電卓の表示をセンタリングするために、ほんの少しだけCSSを直書きしてみます。 | ||
===== 方針をたてる ===== | ===== 方針をたてる ===== | ||
- | 手書きでデザインを下書き | + | 手書きでデザインを下書きしてみるのがお勧めです。 |
+ | -題名『電卓アプリ』 | ||
+ | -電卓を表示する場所 | ||
+ | -計算式と結果を表示する場所(< | ||
+ | -数字ボタンや+-×÷=ボタン、クリアボタン | ||
< | < | ||
行 17: | 行 25: | ||
</ | </ | ||
- | 作成中 | + | 今回は、[[https:// |
+ | |||
+ | eval関数という、指定した文字列が「 JavaScriptのプログラムコードとして正しいか 」を評価した上で それを実行する関数を用いますが、使用するにはリスクもあるようです。(参考: | ||
+ | |||
+ | |||
ソースコード | ソースコード | ||
行 26: | 行 39: | ||
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(カラム)システムを用いて計算結果とボタンをデザイン ==== | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | 参考(公式サイト): | ||
+ | |||