HTMLで電卓を作成する方法

パソコンにインストールされている電卓を使って計算をする方法はいくつもありますが、簡単なHTMLコードを使って電卓を自作するという別の方法もあります。HTMLで電卓を作成するときは、まずHTMLの基礎を押さえ、必要なコードをテキストエディタにコピーし、拡張子を「.html」にして保存しましょう。これでお気に入りのブラウザでHTML文書を開いて、電卓を使うことができます。このようにして、ブラウザで計算ができるだけでなく、プログラミングの基礎を学ぶこともできるのです。

パート 1

パート 1 の 4:

コードを理解する

PDF形式でダウンロード

1
HTML関数がそれぞれ何をしているのか理解する　電卓の作成に使用するコードは、組み合わせにより文書の各要素を定義するいくつもの構文から成り立っています。下記にて電卓の作成に使用するコードのテキストがそれぞれ何をしているのか確認しましょう。
- html：プログラムの使用言語を以降の文書に指定します。プログラミングでは、いくつもの言語がプログラムに用いられており、<html>は以降の文書がHTML文書であることを示しています。^{[1]X出典文献}
- head：文書に属するものはすべて「メタデータ」とも呼ばれるデータに関するデータであることを以降の文書に示しています。通常、この<head>というコマンドは、タイトルや見出しなど、文書のスタイル要素を定義する際に使用します。傘の下に残りのコードが定義されていると考えましょう。^{[2]X出典文献}
- title：文書にタイトルをつけます。この属性は、HTMLブラウザで開いた文書のタイトルを定義する際に使用します。
- body bgcolor="#"：コードの文字色や背景色を指定します。この引用符で囲まれた「#」の後の数字は、所定の色に対応しています。
- text=""：この引用符で囲まれた語により、文書内のテキストの色を指定します。
- form name=""：フォーム名を指定します。この属性は、そのフォーム名がJavaScriptでどのように定義されるかに基づいて、その後に続く構造体を作成する際に使用します。例えば、使用するフォーム名が「calculator（電卓）」だとすると、それで特定の構造体が文書に作成されます。^{[3]X出典文献}
- input type=""：ここでアクションが発生します。この属性は、以降の括弧内の値がどのようなテキストであるかを文書に示しています。例えば、テキストやパスワード、ボタン（電卓の場合と同様）などが考えられます。^{[4]X出典文献}
- value=""：上で指定した入力欄に表示する値を文書に指定します。なお、電卓の場合、この値は数値（1〜9）および演算子（+、-、*、/、=）になります。^{[5]X出典文献}
- onClick=""：ボタンをクリックした際に発生するイベントを文書に指定します。なお、電卓の場合は、各ボタンに表示するテキストをそのように理解しなければなりません。したがって、「6」というボタンの場合は、引用符の間にdocument.calculator.ans.value+='6'と入力することになります。^{[6]X出典文献}
- br：文書に改行を入れる開始タグです。このタグ以降のテキストは、このタグ以前のテキストの下の行に表示されます。^{[7]X出典文献}
- /form、/body、および/html：文書内で前に開始したそのコマンドがここで終了することを文書に示しています。^{[8]X出典文献}
広告

パート 2

パート 2 の 4:

電卓の基本HTMLコード

PDF形式でダウンロード

下のボックス内のテキストを選択するには、ボックスの左上にカーソルを合わせ、それをボックスの右下にドラッグして、すべてのテキストが青色になるようにします。テキストを選択したら、「Command + C」（Mac）または「Ctrl + C」（Windows）を押して、コードをクリップボードにコピーしましょう。

<html><head><title>HTML Calculator</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="リセット"><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

パート 3 の 4:

電卓を作成する

PDF形式でダウンロード

1
パソコンでテキスト編集プログラムを起動する　使えるプログラムはいくつもありますが、利便性や品質を考えると、「テキストエディット」または「メモ帳」を使ったほうがよいでしょう。^{[9]X出典文献}^{[10]X出典文献}
- Macの場合は、画面右上の虫眼鏡をクリックして、「Spotlight」を起動しましょう。「Spotlight」が起動したら、「テキストエディット」と入力して、「テキストエディット」というプログラムをクリックします。これで、青色にハイライト表示されるはずです。
- Windowsの場合は、画面左下の「スタート」メニューを開きましょう。「スタート」メニューを開いたら、検索ボックスに「メモ帳」と入力すると、右側の検索結果に「メモ帳」というアプリケーションが表示されるので、そのアプリケーションをクリックします。
2
電卓のHTMLコードを文書に貼り付ける
- Macの場合は、文書の本文をクリックして、Command+Vを押しましょう。コードを貼り付けたら、画面上部のフォーマットをクリックして、標準テキストにするをクリックする必要があります。^{[11]X出典文献}
- Windowsの場合は、文書の本文をクリックして、「Ctrl + V」を押しましょう。
ウィンドウ左上の「ファイル」ボタンをクリックして、ドロップダウンメニューから名前を付けて保存...（Windows）または保存...（Mac）を選択します。
「名前を付けて保存」メニューが表示されたら、ファイル名の後に「.html」という拡張子を入力して、「保存」をクリックしましょう。例えば、このファイルを「電卓1」にしたい場合は、「電卓1.html」というファイル名で保存します。
広告