職業訓練日記【九週目】その１

Tweet

Javascript　２日目

３連休を挟んでのJavascript第二日目。
初日の基礎の基礎ですでに必死な状態ですが、何とか食らいついていこうと思います。
ほんとは色々紹介していきたいんですが、やはりエントリー内のJavascriptの埋め込みは出来無そうですね；；
とりあえず、イベントハンドラで出来る簡易電卓を習いました。

数字１と数字２にそれぞれ数字を入れて、足す・引く・掛ける・割るボタンを押すと
解答欄に答えが出るようになっています。
タグを紹介します。
<form name=”f1″>(1)
数字１：<input type=”text” name=”num1″>(2)
数字２：<input type=”text” name=”num2″>
<div style=”margin-left:38px;”>(3)
<input type=”button” value=”＋” onclick=”document.f1.kotae.value=eval(document.f1.num1.value)+eval(document.f1.num2.value)” />　(4)
<input type=”button” value=”－” onclick=”document.f1.kotae.value=eval(document.f1.num1.value)-eval(document.f1.num2.value)” />　
<input type=”button” value=”×” onclick=”document.f1.kotae.value=eval(document.f1.num1.value)*eval(document.f1.num2.value)” />　
<input type=”button” value=”÷” onclick=”document.f1.kotae.value=eval(document.f1.num1.value)/eval(document.f1.num2.value)” /></div>
解答：　<input type=”text” name=”kotae” /></form>(5)
コレ見ても興味の無い方には非常に意味不明だと思いますが一応解説を・・・。
(1)フォームの始まりのタグです。テキストボックスやボタンなど、元々はユーザが入力してアンケートなのにも使われますが、任意に入力できることから、Javascriptにも使われます。
(2)数字１，２のテキストボックスのタグです。
(3)＋－×÷の４つのボタンをグループ化させるdivタグです。
(4)＋－×÷のボタンについてのタグです。onclickの後にJavascriptでのそれぞれの結果を命令しています。
document.f1.kotae.value=eval(document.f1.num1.value)+eval(document.f1.num2.value)
この文を日本語で解読すると次のようになります。
document（ページ）の中のf1というフォームグループの中のkotaeという名前の解答欄のなかのvalue（表示される文字）というのは
（＝）
eval（）の中の文字を数値化しなさいeval(document（ページ）のなかのf1というフォームグループのなかのnum1というテキストボックスのなかのvalueという文字）＋
eval（document（ページ）のなかのf1というフォームグループのなかのnum2というテキストボックスのなかのvalueという文字）
(5)解答欄のボタンについて書かれています。
これらの記述をすると上のような簡易電卓が出来ます。
この他にも色々習いました。
例えば、ブラウザを閉じるボタン。

ほんとに閉じちゃうので、見終わったら閉じてくださいｗ
なんかブログを私的に復習サイトにしちゃって申し訳ありません(；´Д｀)
ちょっとでも書かないと忘れそうでｗ

Tweet