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

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

ユーザ用ツール

サイト用ツール


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


差分

このページの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でおみくじアプリ:index.html|前回]]は、初めてのJavascriptアプリとして、おみくじアプリを作成してみました。
  
 +今回は、簡易電卓アプリを作成してみたいと思います。
 +
 +デザインはBulmaを利用します。電卓の表示をセンタリングするために、ほんの少しだけCSSを直書きしてみます。
  
  
  
 ===== 方針をたてる ===== ===== 方針をたてる =====
-手書きでデザインを下書き+手書きでデザインを下書きしてみるのがお勧めです。 
 +  -題名『電卓アプリ』 
 +  -電卓を表示する場所 
 +  -計算式と結果を表示する場所(<input type="text" name="text">
 +  -数字ボタンや+-×÷=ボタン、クリアボタン
  
 <code> <code>
行 17: 行 25:
 </code> </code>
  
-作成中+今回は、[[https://algorithm.joho.info/programming/javascript/simple-calculator/|こちらのサイト]]こちらのサイトのソースコードを利用させていただこうと思います。 
 + 
 +eval関数という、指定した文字列が「 JavaScriptのプログラムコードとして正しいか 」を評価した上で それを実行する関数を用いますが、使用するにはリスクもあるようです。(参考:[[http://www.recipi.jp/7879|JavaScript【 eval 】 ~ ソースコードの評価と実行]]) 
 + 
 + 
  
 ソースコード ソースコード
行 49: 行 62:
  
   -name your file... のところに、calculator.html と記入し、   -name your file... のところに、calculator.html と記入し、
-  -下の方に、以下のコードをがんばって打ちこみます(<head></head>で囲まれた部分はコピべがお勧めですが、<body>以下の部分は、キーボードで打ち込んでみるのがお勧めで。)+  -下の方に、以下のコードをコピペしま
   -入力し終わったら、下の方へ移動して、   -入力し終わったら、下の方へ移動して、
   -Commit new file をクリック   -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