Webサイトに表示するために使われるhtmlに計算コードを構築することで、源泉徴収や簡単なゲームなどが作れるのをご存知ですか？
コードの組み合わせ次第で、さまざまな物を作り出せる魅力や面白さがあります。ですが、複雑な計算ほど覚えなければいけないコードが多くあります。
しかし、短期間で習得するのは難しく、htmlを学び始めて数ヶ月の方であれば、意味を理解するのも大変でしょう。
そこで今回
htmlで計算の基礎からちょっとした応用
に関する情報を紹介していきます。
htmlの学習をしていて、計算に関するコードで困っている方など、ぜひ目を通してみてください。
目次
htmlの計算とは？
シンプルな数式から複雑なものまで、幅広い計算をhtmlに文字や数字を組み合わせて入力することで答えを導き出すプログラムがhtmlの計算です。
文字や数字の組み合わせるためには、それぞれの意味を理解する必要があります。例えば
1+1の計算をを紙に書いてください
と言われれば「1+1=2」と簡単に書けてしまいます。
しかし、1+1のコードをhtmlに書く場合には
See the Pen
htmlの計算とは？ by 吉井大輝 (@DaiW)
on CodePen.
上記のコードと紙に書くのを比べるとhtmlに入力するのは大変です。言語の意味や仕組みを理解しないと、複雑な計算になるに連れて組み立てるのは難しくなります。
ですが、上記のコードは、一つの計算だけに限らず数字を変えるだけで、違う足し算の答えを表示します。
このように、複雑なものほどhtmlに書くのに苦労しますが、書き上げてしまうことで計算にかかる時間を短縮できます。
通販や年末調整など、htmlの計算はネット上で上手く活用されています。
outputを使用したhtmlの計算
outputとは、フォームに入力した計算データや、ユーザーが起こしたアクションに応じて結果を出力、表示させる機能を持っています。
画面上に反映させたいときに主に使われるタグで、ページ内に複数のコーディングが可能です。
outputのみでは、役割を果たせず、outputに指定できる属性やタグと関連付けることで機能を発揮します。
ここでは属性の意味や用途を含めて解説していきます。
htmlの計算に使用するoutputの属性
outputの属性には主に3種類あります。属性の中には場合によって使わずにoutputの機能を問題なく果たせます。
しかし、仕事で使っていなかった属性のコーディングを必要としたとき、意味を知らずにいると説明を求められた際に困ったことになります。
仕事に関わらず趣味でhtmlの計算を組み立てるときにも、重要な属性なので覚えておきましょう。
form属性
outputの計算に、form属性で指定してあげると他の要素と関連付けられます。
|
1 2 3 4 5 |
<form oninput="result.value = Number(a.value) + Number(b.value);"> <input type="number" name="a" size="5"> ＋ <input type="number" name="b" size="5"> ＝ <output name="result">0</output> </form> |
のようにformがoutputを囲い、計算するものが増えるのに比例して文字列が増えていきます。
formの枠外にoutputをした場合、どの結果を出力したらよいか分からず画面に計算の答えが表示されない状態になります。
formは、計算に欠かせない属性なのでまず<form></form>をコーディングしてから計算する文字列を挿入してください。
豆情報
システム環境に問題がなく表示がされないときは、formのスペルミスや/・<>忘れが原因な場合があるので確認をしましょう。
for属性
for属性は、入力コントロールにIDを付与した値を指定するのに使われ、関連付けられます。
入力コントロールタグである「input」内にIDの付与を行います。
この記事内で「input」について詳しく説明をしていきますが、付与したIDに対してfor属性を指定したコードは以下のようにコーディングできます。
|
1 2 3 4 |
<form oninput="result.value = Number(a.value) + Number(b.value);"> <input type="number" id="a"> + <input type="number" id="b"> = <output name="result" for="a b"> 計算結果</output> </form> |
上記の「input」内にある
|
1 |
<input type="number" id="a"> |
|
1 |
<input type="number" id="b"> |
の「a」と「b」の2つのIDが付与で
|
1 |
<output name="result" for="a b"></output> |
output内の「for=”a b”」が指定になります。
豆情報
inputのIDが増えてもfor属性はIDの間に半角スペースを空けて複数の指定ができます。
name属性
outputに対して名前を付与を行うのにname属性が使われます。名前を付与しても、画面上には表示されません。
しかし、アクセスをするときに大いに役立つ属性です。
そのため、outputに限らずname属性の関連付けが行われている他の要素は多くあります。
|
1 |
<output name="result"></output> |
outputに付与するnameは、結果を意味する「result」となっていますが、何の文字を入れても問題はありません。
けれど、何を付与したか分からなくなる文字ですと、nameが重複しているなど、確認や修正に時間がかかります。
resultのように意味する言語を付与することで、nameの文字を深く考えずに済みますよ。
豆情報
<form oninput=”○○.value”〜>の「○○」とoutputに付与するnameが違うと結果が出ません。
outputのhtmlでの計算で覚えるべき型
outputを含めhtmlの計算には型が存在します。型の中身が変わるとエラーを起こしたり、考えている表示とは違ったものになってしまいます。
htmlの計算をするのに、どのような型があるのか解説していきます。
formの型
formは、他の要素と関連付けるために重要な属性です。htmlで計算する場合<form></form>のカッコ内に入れる文字や数字があります。
|
1 |
<form oninput="result.value = Number(a.value) + Number(b.value);"> |
上記のコードが一つの型です。
まずformの後ろにある「oninput」とは文字を入力したときに処理を実行します。htmlの計算でformを使うとき主に見られます。
|
1 |
"result.value = Number(a.value) + Number(b.value);"> |
この部分がないと<form>内にコーディングをしても、形だけで計算する機能が使えません。
htmlの計算を試すとき初めの<form>の型は、このコードを使ってみてください。
inputの型
for属性で少し紹介しました入力コントロールタグの「input」は、outputを使った計算に必要とします。
<form>間に以下のようにコーディングを行います。
|
1 2 3 4 5 |
<form oninput="result.value = Number(a.value) + Number(b.value);"> <input type="number" name="a" id="a" size="5"> ＋ <input type="number" name="b" id="b" size="5"> ＝ <output name="result">0</output> </form> |
inputには 数値を入力するための枠のサイズやname、idを付与できますが、その前にinputの後ろに半角スペースを空けて「type」を入れます。
typeの属性には
type=”range”
数字によって変動するレンジの入力欄を作成
type=”submit”
情報を送信するための送信ボタンを作成
type=”text”
名前や年齢などを記載するテキストボックスを作成
などの値があります。
type=”number”は、数値を入力する欄を作成する値で、htmlの計算でinputには
|
1 |
<input type="number"〜> |
上記の型のコーディング使われやすいです。
【基礎】四則計算をコーディングしてみよう
See the Pen
基礎 by 吉井大輝 (@DaiW)
on CodePen.
上記のコードは、掛け算と割り算の2つ式をコーディングしたものです。
inputの型で紹介しました
|
1 2 3 4 5 |
<form oninput="result.value = Number(a.value) + Number(b.value);"> <input type="number" name="a" id="a" size="5"> ＋ <input type="number" name="b" id="b" size="5"> ＝ <output name="result">0</output> </form> |
このコードから変わった大まかなポイントは
・足し算から掛け算と割り算
・Number(c.value)
・<input type=”number” name=”c” id=”c” size=”5″>
・for=”a b c”
の4つです。
ここまで紹介してきた内容を元に作成したコードなので、理解していれば自分でも四則計算の組み合わせたコーディングができます。
【応用】消費税の計算をコーディングしてみよう
See the Pen
消費税 by 吉井大輝 (@DaiW)
on CodePen.
基礎を元に応用で組み立て上げました消費税の計算です。
基礎をまず理解し、新たな要素を入れ込むことで、消費税の計算のみならず他のコードを組み立てられます。
一つずつ意味を知りながらこの消費税の計算をコーディングしてみてください。
まとめ
いかがでしたでしょうか？
今回htmlの計算について解説していきました。
さまざまなhtmlの計算が作れたら、達成感を得られるでしょう。
他にもhtmlの計算の方法がたくさんあるので、まず今回紹介したコードから試してみてください。
