- ベストアンサー
初歩がわかりません。
おとといJavascriptはじめたものです。 VBやHTMLなどは少しだけ触ったことがあります。 足し算のプログラムで意味がわからない部分があり困っています。 <html> <head> <script language="javascript"> <!-- function calc(CL) { CL.Z.value = eval(CL.X.value)+eval(CL.Y.value) } //--> </script> </head> <body> フォームを使った計算 <form name="Calc"> <input type="text" name="X" value="0" size=10> + <input type="text" name="Y" value="0" size=10> = <input type="text" name="Z" size=10> <p> <input type="button" value="計算!!" onclick="calc(this.form)"> <input type="reset" value="clear"> </form> </body> </html> 上記のプログラムで、onclick="calc(this.form)"とありますが、どういう動作させているのでしょうか。 またSCRIPTのなかの function calc(CL) { CL.Z.value = eval(CL.X.value)+eval(CL.Y.value) } CL.X.value のvalueてなんのことでしょうか。 XとYを取り出して足しているってことはなんとなくわかるんですけれど。。 特に同一ページ内のjavascriptにpost？するっていうのがよくわかりません。 この場合どうやってSCRIPTに送って、どうやって数値を取り出しているのか、どなたかアドバイスお願いいたします。よろしくおねがいします。
- denza
- お礼率80% (647/806)
- JavaScript
- 回答数3
- ありがとう数6
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
>onclick="calc(this.form)"とありますが… 計算ボタンを押されると、Ｘ，Ｙ，Ｚ(←使われませんが)フォームに入力された数字がcalcへ引数として渡されます。 >CL.X.valueのvalue… 上記のフォーム内で入力された値(Ｘ)が入ってます。 －－－－ <input type="text" name="X" value="0" size=10>…１ + <input type="text" name="Y" value="0" size=10>…２ = <input type="text" name="Z" size=10>・・・３ フォームで入力された数字が１・２・３に各入力された後、calcへ引数として渡されます。 function calc(CL) { CL.Z.value …３に対応します。 = eval(CL.X.value)…１に対応します。 + eval(CL.Y.value) …２に対応します。 } ここで、ＸとＹを加算してＺへ入力 この値はフォームを参照しているのですから、そこのフォーム内容が変化する。要するにＺの値が計算されてフォームに記述されると言う仕掛けになります。 ex) Ｘに１、Ｙに２、Ｚに１００を入力して、テストしてみて下さい。Ｚが３に書き換わる筈です。
その他の回答 (2)
- Tsukasa0215
- ベストアンサー率22% (280/1257)
＃１再投稿です。 >evalのなかのCL.X.valueってドットで区切って入れる >ってどこかに書いてあるんでしょうか？ 機械的に憶えてしまう方が楽な場合がありますが…。 参考になるHPを下記のURLに記しました。 (とほほのＷＷＷ入門 JavaScriptフォーム（Form）)
お礼
たびたびありがとうございます。 URLみてみました。 まるでディレクトリかレジストリですね。 evalで引いても（）しか出てなかったので。。。 だんだんプログラムも見慣れてきました。
- leaz024
- ベストアンサー率75% (398/526)
> 上記のプログラムで、onclick="calc(this.form)"とありますが、どういう動作させているのでしょうか。 oncilck="xxx" というのは、そのボタンがクリックされた時に起動するイベントハンドラで、ここでは calc(this.form) を呼び出すよう設定されています。 ※JavaScriptでは、基本的にタグの要素としてイベントハンドラを記述します。 引数に含まれる this は onclick が書かれているボタン自身（オブジェクト）のことで、this.form はそのボタンが属しているフォームオブジェクト（ここでは name="Calc" の FORM）を指します。 ※フォームオブジェクトはそのフォームに含まれる各部品を参照できるので、calc関数が X, Y, Z を操作できるよう、ここではそれを渡しているのです。 > CL.X.value のvalueてなんのことでしょうか。 まず、CL が name="Calc" のフォームオブジェクトで、CL.X が name="X" のテキストボックスを表すオブジェクトになります。 この name="X" のテキストボックスには、name や value、size など様々な属性が書かれていますよね？ CL.X はそれらの属性の値を「CL.X.属性名」で参照することができるのです。 > 特に同一ページ内のjavascriptにpost？するっていうのがよくわかりません。 ブラウザは基本的に「ボタンが押される」などのイベントを待っていて、操作を受けたオブジェクトにイベントハンドラが登録されていればそれを実行します。 calc が実行されるカラクリはこれだけで、HTML から JavaScript に「送信」しているわけではないのです。
お礼
回答からヒントをいただいて、調べたところ、thisというオブジェクト参照の構文があることが分かりました。勝手に決めた名前かなにかだと思っていたもので。 自分のフォームを指すときにこう書くんですね。 実験したところ Function calcのcalcは関数名で、自分で適当に名前が変えられることがわかりました。 FORMについてはACTIONで違うWEBページにPOSTして使っていたイメージが強かったため更に混乱しました。 でもなんか不思議だ。 この分だと先が思いやられます。 ありがとう御座いました。
お礼
Valueは値がはいっているんですね。わかりました。 でも、evalのなかのCL.X.valueってドットで区切って入れるってどこかに書いてあるんでしょうか？ 書式なんかがまだよく分かりません。 ありがとうございました。