デスクトップ・コンピュータに内蔵されている電卓を使って計算する方法はたくさんあるが、簡単なHTMLコードを使って電卓を自作する方法もある。HTMLを使って電卓を作るには、HTMLの基礎を学んでから、必要なコードをテキストエディタにコピーし、HTML拡張子をつけて保存します。その後、お気に入りのブラウザでHTML文書を開くと、電卓を使うことができます。こうすることで、ブラウザ上で計算ができるだけでなく、コーディングの基礎も学ぶことができます！
パート1
コードを理解する
-
各html関数が何をしているのかを学びましょう。あなたの電卓を作るために使用するコードは、文書のさまざまな要素を定義するために一緒に動作する構文の多くの部分で構成されています。
- html：この構文は、コードで使用されている言語を文書の残りの部分に伝えます。コーディングでは、多くの言語がコードに使用され、<html>は文書の残りの部分に、それが - ご想像のとおり！- htmlです。
- head：メタデータ」とも呼ばれる。<head>コマンドは通常、タイトルや見出しなど、文書のスタイル的要素を定義するために使われます。残りのコードが定義される傘のようなものだと考えてください。
- タイトルここには文書のタイトルを指定します。この属性は、htmlブラウザで開いたときに文書のタイトルがどうなるかを定義するために使われます。
- body bgcolor= "#"：この属性は、コードの背景とボディの色を設定します。この引用符のセットで#の後に表示される数字は、#に対応します。
- text= ""：この引用符の中の単語は、文書上のテキストの色を設定します。
- form name=""：この属性はフォームの名前を指定し、Javascriptがフォーム名の意味を知っていることに基づいて、フォームの後に続くものの構造を構築するために使われます。例えば、今回使用するフォーム名はcalculatorで、ドキュメントに特定の構造を作成します。
- input type=""：ここでアクションが発生します。input type "属性は、残りの括弧内の値がどのようなテキストであるかを文書に伝えます。例えば、テキストであったり、パスワードであったり、ボタン（電卓の場合）であったりします。
- value=""：このコマンドは、上で指定された入力タイプに何が含まれるかをドキュメントに伝えます。電卓の場合、これらは数字（1～9）と演算（+,-,*,/,=）として表示されます。
- onClick=""：この構文はイベントを記述し、ボタンがクリックされたときに何かが起こることをドキュメントに伝えます。電卓の場合、各ボタンに表示されるテキストをそのように理解させたい。ですから、「6」ボタンには、引用符の間にdocument.calculator.ans.value+='6'と記述します。
- br: このタグは文書内で改行を開始し、このタグの後に来るものは、その前に来るものの1行下に表示されるようにします。
- /form、/body、/html：これらのコマンドは、文書内で先に開始された対応するコマンドが終了することを文書に伝えます。
パート2
電卓コードをコピーする
-
下のコードをコピーしてください。ボックスの左上隅でカーソルを押したまま、ボックスの右下隅までドラッグして、下のボックスのテキストをハイライトし、テキストがすべて青くなるようにします。次に、Macの場合は "Command+C"、PCの場合は "Ctrl+C "を押して、コードをクリップボードにコピーする。
<html> <head> <title>HTML電卓</title> </head> <body bgcolor= "#000000" text= "gold"> <form name="calculator" > <input type="button" value="1" onClick="document.calculator.ans.value+='1'"> <input type="button" value="2" onClick="document.calculator.ans.value+='2'"> <input type="button" value="3" onClick="document.calculator.ans.value+='3'"><br> <input type="button" value="4" onClick="document.calculator.ans.value+='4'"> <input type="button" value="5" onClick="document.calculator.ans.value+='5'"> <input type="button" value="6" onClick="document.calculator.ans.value+='6'"> <input type="button" value="7" onClick="document.calculator.ans.value+='7'"><br> <input type="button" value="8" onClick="document.calculator.ans.value+='8'"> <input type="button" value="9" onClick="document.calculator.ans.value+='9'"> <input type="button" value="-" onClick="document.calculator.ans.value+='-'"> <input type="button" value="+" onClick="document.calculator.ans.value+='+'"><br> <input type="button" value="*" onClick="document.calculator.ans.value+='*'"> <input type="button" value="/" onClick="document.calculator.ans.value+='/'"> <input type="button" value="0" onClick="document.calculator.ans.value+='0'"> <input type="reset" value="Reset"> <input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)"> <br>解答は<input type="textfield" name="ans" value=""> </form> </body> </html>
パート3
HTMLファイルの作成
-
コンピュータでテキスト編集プログラムを開きます。使用できるプログラムはいくつかありますが、利便性と品質の点から、TextEditかメモ帳の使用をお勧めします。
- Macの場合は、画面の右上にある虫眼鏡をクリックしてSpotlightを開きます。そこでTextEditと入力し、TextEditプログラムをクリックすると、青くハイライトされます。
- PCの場合は、画面の左下にあるスタートメニューを開きます。検索バーに「Notepad」と入力し、右側の結果バーに表示されるメモ帳アプリケーションをクリックします。
-
電卓のHTMLコードを文書に貼り付けます。
- Macの場合は、ドキュメントの本文をクリックし、"Command+V "を押します。コードを貼り付けた後、画面上部の「書式」をクリックし、「プレーンテキストにする」をクリックします。
- PCの場合は、ドキュメントの本文をクリックし、「Ctrl+V」を押します。
-
ファイルを保存します。ウィンドウ左上の「ファイル」ボタンをクリックし、表示されるメニューからPCの場合は「名前を付けて保存」、Macの場合は「保存」をクリックします。
-
ファイル名にHTML拡張子を追加する。名前を付けて保存...」メニューで、ファイル名の後に「.html」と入力し、「保存」をクリックします。例えば、このファイルを私の最初の電卓と呼びたい場合は、"MyFirstCalculator.html "として保存します。
パート4
電卓を使う
-
作成したばかりのファイルを探します。これを行うには、前のステップで説明したように、Spotlightまたはスタートメニューの検索バーにファイル名を入力します。拡張子「html」を入力する必要はありません。
-
ファイルをクリックして開きます。デフォルトのブラウザが新しいウェブページで電卓を開きます。
-
電卓のボタンをクリックして使用してください。方程式の解は解答バーに表示されます。
コメント
最新を表示する
NG表示方式
NGID一覧