入力された値を使う

インチ(in)からセンチ(cm)へ変換

センチに変換します

body内の記述

<form  action="javascript:inch2cm()">
<p>
<input type="text" id="inch" />
<input type="submit" value="変換" />
</p>
</form>
<p id="cm">センチに変換します</p>

入力は input type="text" の部分です。場所を指定するため id を書きます。

inputは「読者からメッセージを」で学びました。inputは form の中になければいけません。

input はインライン要素なのでブロックを作るタグ内に記述します。form はブロックを作るタグのはずですが、これだけでは正しくないと言われます(W3Cの説明に不備があるのかもしれません)。そこで他のブロックを作るタグで整形し、さらにそれを form で挟むようにします。

p タグの中に form を入れられないので、p が内側になります。

actionには今回はjavascriptのfunctionの名前を入れます。javascriptである印のjavascript:を忘れないようにします。

出力をする要素はformの外でもかまいません。 id を入れておきます。

javascriptの記述(head内)

function inch2cm(){
  var x = parseFloat(document.getElementById("inch").value);
  document.getElementById("cm").firstChild.nodeValue = x * 2.54 +"センチ";
}
  1. idがinchである要素を探し(.getElementById)
    そこから値を取り出し(.value)て
    小数のある値(Float)として解釈し(parseFloat())
    それを x という変数に格納します。
  2. x に 2.54を掛け算して「センチ」という文字と連結し(自動的に数値は文字列になって連結される)
    idが cm である要素を探し(.getElementById)
    先の連結した文字列をその要素のテキストの内容とします(.firstChild.nodeValue)。

.value の反対のことをするメソッドが .firstChild.nodeValue と考えればよいでしょう。

インチ(in)からセンチ(cm)へ変換(エラー対策付き)

数値として解釈できない値を入れると NaN と表示されます。これは Not a Number(非数、ナン)の意味ですが、これでは意味がわからないと不満であるなら対策してみます。

センチに変換します

body内の記述

<form  action="javascript:inch2cm2()">
<p>
<input type="text" id="inch2" />
<input type="submit" value="変換" />
</p>
</form>
<p id="cm2">センチに変換します</p>

まえと同じですが、同じページに掲載する関係で、function名、idにすべて2を加えています。

javascriptの記述(head内)

function inch2cm2(){
  var x = parseFloat(document.getElementById("inch2").value);
  if ( !isNaN( x ) ) {
    document.getElementById("cm2").firstChild.nodeValue = x * 2.54 +"センチ";
  }else {
    document.getElementById("cm2").firstChild.nodeValue = "数値をいれてください";
  }
}

parseFloat()がNaNを返すのを、isNaN( x ) で判断します。

頭の ! は否定で、!isNaN( x ) は NaNでなかったらという意味になります。

if 以下の ( )内が成立していたらその後の { } を実行し、

そうでないとき(else)、else以下の{ } の部分を実行します。

課題 ファイル名 henkan.html

単位の変換ができるページの作成

index.htmlからは「変換」という名前のリンクから行けるようにすること。

制作例

cm から inch へは 2.54で割る
feet から m へは 0.3048 をかける
m から feet へは 0.3048 で割る
ヤード(yd) から m へは 0.9144 をかける
m から ヤード(yd) へは 0.9144 で割る
秒速(m/s)から時速(km/h)は ×3600÷1000 なので 3.6をかける
時速(km/h)から秒速(m/s)は ÷3600×1000 なので 3.6で割る
分から秒に
秒から分に

ウェブページ(Nov.2010)
聖愛中学高等学校
http://www.seiai.ed.jp/
Nov.2009 改訂