センチに変換します
<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 を入れておきます。
function inch2cm(){ var x = parseFloat(document.getElementById("inch").value); document.getElementById("cm").textContent = x * 2.54 +"センチ"; }
.value の反対のことをするメソッドが .textContent と考えればよいでしょう。
数値として解釈できない値を入れると NaN と表示されます。これは Not a Number(非数、ナン)の意味ですが、これでは意味がわからないと不満であるなら対策してみます。
センチに変換します
<form action="javascript:inch2cm2()"> <p> <input type="text" id="inch2"value="5"/> <input type="submit" value="変換" /> </p> </form> <p id="cm2">センチに変換します</p>
まえと同じですが、同じページに掲載する関係で、function名、idにすべて2を加えています。
value="5"初期値を入れておきたい時に利用できますが、なくてもかまいません
function inch2cm2(){ var x = parseFloat(document.getElementById("inch2").value); if ( !isNaN( x ) ) { document.getElementById("cm2").textContent = x * 2.54 +"センチ"; }else { document.getElementById("cm2").textContent = "数値をいれてください"; } }
parseFloat()がNaNを返すのを、isNaN( x ) で判断します。
頭の ! は否定で、!isNaN( x ) は NaNでなかったらという意味になります。
if 以下の ( )内が成立していたらその後の { } を実行し、
そうでないとき(else)、else以下の{ } の部分を実行します。
単位の変換ができるページの作成
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で割る 分から秒に 秒から分に