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

投稿者:

Javascript 2日目

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

数字1:
数字2:

   

解答: 

数字1と数字2にそれぞれ数字を入れて、足す・引く・掛ける・割るボタンを押すと
解答欄に答えが出るようになっています。
タグを紹介します。
<form name=”f1″>(1)
数字1:<input type=”text” name=”num1″>(2)
数字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)数字1,2のテキストボックスのタグです。
(3)+-×÷の4つのボタンをグループ化させる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)解答欄のボタンについて書かれています。
これらの記述をすると上のような簡易電卓が出来ます。
この他にも色々習いました。
例えば、ブラウザを閉じるボタン。

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


4件のコメント

  1. SECRET: 0
    PASS: 74be16979710d4c4e7c6647856088456
     すごい!!
    ブログ内でも貼付けられるんですねー!!
     javascriptの本は何冊かあるのですが、全部途中までしか進まなかったのですが、こうやって実践しながら見ると「なるほどぉ!!」ってなります。
     [閉じる]押してしまいましたw

  2. SECRET: 0
    PASS: 74be16979710d4c4e7c6647856088456
    うほっ!
    順調に進んでおられるようですね。
    しか~し、火狐ユーザーの俺としては「閉じるボタン」に一言いいたくなっちゃいます。火狐は「window.open()」か「target="_blank"」から開かれてきた場合しか「window.close()」で閉じない仕様です。
    まあ、どっちかって言うと、火狐ちゃんが悪いわけですが。w
    バージョンが昔の火狐だと、
    onclick=’window.opener = window;
    var win = window.open("", "_self");
    win.close();’
    とかで閉じられたりするそうですが。(↑のコードだとIEで確認ダイアログなしに閉じます。)
    あと、もしかしたら知ってるかもですが、数字2に「0」を入れて割った場合の挙動がちょっと気になるといえば気になります。
    口うるさく言っちゃいましたが、まだ2日目なのに、がんばってますね~ちなみに、俺はイラレやフォトショを触ったことがないので、そっちの方はワケワカメ&すげぇ~って感じで見てました。人が消えるのおもしろかったです!

  3. SECRET: 0
    PASS: 74be16979710d4c4e7c6647856088456
    >tsukaさん
    他のブログは分からないんですが、fc2ブログは記事内に割りと自由にタグが打てるんですよ。あと、HTMLのヘッダー部分やCSS部分もいじれちゃいます。
    ユーザー作成のテンプレートも多いのでCSSの勉強対象にはもってこいですねw
    ある意味授業の復習がてら実践解説してて、書きながらもうまくいかず、あ”-!!ってなりながら思い出してますw
    >せいさん
    火狐ってそんなに違うんですねぇ。すいません、全然意識して無かったです(;´Д`)
    ちなみにうちの科は女性率が高く、
    元SEは0でJavascriptの授業は悲鳴とアラート音が飛び交っておりますw
    0で割った時のInfinity・・・すいません謎です_| ̄|○ il||li

  4. SECRET: 0
    PASS: 74be16979710d4c4e7c6647856088456
    つhttp://ja.wikipedia.org/wiki/ゼロ除算
    wikiにはごちゃごちゃ書かれてるようですが、俺は「プログラムは0で割ったら変なこと起きる」としか覚えてなくてよくわかってません。w
    あと、何も入力されていない場合も変なこと起きますね。
    実際に0で割ったりすることはないでしょうが、気になればif文とかで変なことが起きないようにしますね。
    そんなぁ~ことはさておき、女性が多いんですか!
    悲鳴聞いてみたいわ~(´Д`;)ハアハア

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です