- ベストアンサー
初歩がわかりません。
おととい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して使っていたイメージが強かったため更に混乱しました。 でもなんか不思議だ。 この分だと先が思いやられます。 ありがとう御座いました。
関連するQ&A
- 超初心者です。buttonをselectに変えるには？
<SCRIPT language="JavaScript"> function calc1(){document.keisan.Z.value=eval(document.keisan.X.value)*1;} function calc2(){document.keisan.Z.value=eval(document.keisan.X.value)*2;} function calc3(){document.keisan.Z.value=eval(document.keisan.X.value)*3;} </SCRIPT> </head> <FORM name="keisan" > <INPUT type="text" name="X" size="4"> <INPUT type="text" name="Z" size="6"> <INPUT type="button" value="1" onClick="calc1()"> <INPUT type="button" value="2" onClick="calc2()"> <INPUT type="button" value="3" onClick="calc3()"> <INPUT type="reset" value="やりなおし"> </FORM> これの INPUT type="button"を<select>～<select> に変えたいと思っています。 自分の頭ではいろいろやってもうまくいきませんでした。 どなたか御教授を宜しくお願い致します。
- ベストアンサー
- JavaScript
- ホームページ上での計算について（JavaScript）
複数の計算式があります。 それぞれ、ホームページで数値を入れていって、最後に計算ボタンを押すと、計算した値が一気に出るようにしたいです。 CGIではなく、HTMLの中にJavaScriptを埋め込んで作りたいと思っています。 スクリプトの意味はよくわからないまま、とりあえず以下のソースを埋め込んでみました。 HEAD部分に <SCRIPT LANGUAGE="JavaScript"> function calc(f){ f.z.value=eval(f.x.value)+eval(f.y.value); } </SCRIPT> BODY部分に <FORM NAME="form1"> <INPUT TYPE="text" SIZE=10 NAME="x">+ <INPUT TYPE="text" SIZE=10 NAME="y">= <INPUT TYPE="text" SIZE=10 NAME="z"><BR> <INPUT TYPE="button" VALUE="計算" onClick="calc(this.form)"><BR> </FORM> これは動きました。 でも、計算式が一つだけです。複数の式を計算させたいのですが……。 同じ感じでコピーしてxyzの文字をかえたりと幼稚な試行錯誤をしてみましたが動きませんでした。 二つ以上の計算式を埋め込むには、どんなスクリプトにすればいいのでしょうか。 たとえば、 「別の空欄に入れたaという値とbという値をかけて、先ほどのxという値を2倍したものを引き、さらに100を足す」 という計算式を追加して、でも「計算」ボタンは一個のままで済ませるには、どうすればいいでしょうか。 もしできれば、全体のスクリプトをお教えいただけるととてもありがたいです。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- JavaScriptの計算式を添削してください。
250×変数Ａ＋200×変数Ｂ＋150×変数Ｃ＝合計という 計算をしたくて過去の質問をヒントに自分なりに工夫して 作成いたしました。（JavaScriptは超初心者） 変数Ａ～Ｂには整数が入ります。 自分で動作を確認したところ問題無く動くようですが、 何か問題がないか心配です。 これでいいのか、間違っているところがないか 確認願いますでしょうか。 <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-- function calc() { document.f.t4.value = eval(250) * eval(document.f.t1.value)+eval(200) * eval(document.f.t2.value)+eval(150) * eval(document.f.t3.value); return true; } //--> </SCRIPT> <TITLE></TITLE> </HEAD> <BODY> <FORM name="f"><INPUT type="text" name="t1" onkeyup="calc()" value="0"><INPUT type="text" name="t2" onkeyup="calc()" value="0"><INPUT type="text" name="t3" onkeyup="calc()" value="0"> ＝ <INPUT type="text" name="t4"></FORM> </BODY> </HTML>
- ベストアンサー
- JavaScript
- 初めて書いたけど、動かないｗ
いろいろjsのサンプルとか見てて 作れそうと思って作ったんですが、動きません もしかしたらjs以前の問題かもしれませんが エラーではdocument.x1.x2がnullだとか・・ めちゃくちゃなものかもしれないですが、見てください おねがいします --------------------------- <html> <head> <script type="text/JavaScript"><!-- function keisan() { n1=document.x1.x2.value; n2=document.x1.x3.value; n1=eval(n1); n2=eval(n2); alert(n1+n2); } // --></script> </head> <body> <form neme="x1"> 計算します<br/> <input name="x2" type="text" value="1"> + <input name="x3" type="text" value="2"> <input type="button" value="=" onClick="keisan()"> </form> </body> </html>
- ベストアンサー
- JavaScript
- ラジオボタンを押して計算結果を出した後、全てをｎｕｌｌ値に戻すには？
初心者ながらがんばっています。どうか宜しくお願いします。 <HTML> <head> <script language="JavaScript"> <!-- function calc(radio, form) { form.OUT.value = form.IN.value * radio.value; } //--> </script> </head> というスクリプト内容で、 計算する数値:<input type=TEXT name="IN" size=10 value=0> <input type=RADIO name="MODE" value="3.14" onClick="calc(this,this.form)"> cm 計算結果:<input type=TEXT name="OUT" size=10 value=0 style="text-align:right"> cm このラジオボタンをクリアして、計算する数値と計算結果の場所をブランクにするには、どのように組めば良いのでしょう。onclickを使うことは解るのですが、どんなふうに組んでも、うまく動作しません。
- ベストアンサー
- JavaScript
- for文の使い方について
こんばんはpiyottiと申します。 forループを使用してtextの値を取得したいと思っています。 「document.myFORM.namei・・・」の「i」をループカウンターとして 「name1、name2・・・」と増やしていきたいのですがうまくいきません。 どうかよろしくお願いいたします。 <script Language="JavaScript"><!-- function calc(form) { n = 0; for (i=0; i<4; i= i+;) n += eval(document.myFORM.namei.value); } // --></script> <form name="myFORM"> 数値１：<input type="text" onChange="calc(this.form, this)" name="name1"> 数値２：<input type="text" onChange="calc(this.form, this) name="name2"> 数値３：<input type="text" onChange="calc(this.form, this) name="name3"> 数値４：<input type="text" onChange="calc(this.form, this) name="name4"><br> </form>
- ベストアンサー
- JavaScript
- 小数の足し算
Javascriptで <SCRIPT language="JavaScript"><!-- function wa() { a = eval( document.myFORM.a.value ); b = eval( document.myFORM.b.value ); s = a + b; document.myFORM.kotae.value="答え " + s; } //--></SCRIPT> </HEAD> <BODY> <FORM name="myFORM"> A =<INPUT type="text" name="a" size="3">B =<INPUT type="text" name="b" size="3"><BR> <INPUT type="text" name="kotae"><INPUT type="button" value="＝" onclick="wa()"> </FORM> </BODY> としたとき A=0.1 B=0.05とすると 答え 0.15000000000000002となるのはなぜですか？
- ベストアンサー
- JavaScript
- java 計算フォームで未入力の場合ゼロとしたい
java を使ってweb上で計算フォームを作成しています フォームに数値が入力された場合は問題なく計算結果に反映できますが、未入力のフォームがあると計算結果が反映されません。 未入力のフォームはゼロの値として計算結果を反映させたいのですが、どうしてもできなかったのでお力をお貸頂ければ助かります＞＜ フォームに最初からゼロの値を入れておく方法もあるのですが、ゼロが消された場合は未入力となってしまい計算結果に反映されないので、あくまで未入力の場合はゼロとして計算結果に反映させたいと思っています。 [script LANGUAGE="JavaScript"] function calc() { var s1, s2, s3, s4, ss; s1 = eval(document.form01.txt01.value); s2 = eval(document.form01.txt02.value); s3 = eval(document.form01.txt03.value); ss = s1+s2 +s3; if(ss < 30000) document.form01.txt04.value = ss*0.3; else if(s5 >= 30000) document.form01.txt04.value = ss*0.5; } [/script] <form name="form01"> <input style= type="TEXT" name="txt01" /> <input style= type="TEXT" name="txt02" /> <input style= type="TEXT" name="txt03" /> <input onclick="calc()" type="button" value="計算する" /> <input style= type="TEXT" name="txt04" /> </form> よろしくお願いします
- ベストアンサー
- JavaScript
- Javaで計算結果によって文字色を変えたい
下記のような計算プログラムを検討しています。 全くの素人なので、ネットで参考になるものを探して、やっとここまで出来ました。 計算結果の値によって文字色を変えたいのですが上手くいきません。 例えば、数値が100以上であれば青、200以上であれば、赤・・・というように設定したいのですが、どのように記述すれば良いでしょうか。 よろしくお願い致します。 <HTML> <HEAD> <TITLE>計算</TITLE> </HEAD> <BODY> <SCRIPT language="JavaScript"> <!-- function keisan1(x1,x2){ a=0.2*(eval(x1)/10)*(eval(x1)/10)*Math.sqrt(eval(x2))*1000; return a.toFixed(0);} function keisan2(x1,x2,x3,x4,s1){ b=eval(x2)+Math.pow((0.2*(eval(x1)/10)*(eval(x1)/10)*Math.sqrt(eval(x2))),2)*eval(document.getElementById('s1').value)*eval(x3)+0.01*eval(x4); return b.toFixed(2);} function keisan3(x1,x2){ c=200*Math.pow((eval(x1)/10),2)*(eval(x2)); return c.toFixed(0);} //--> </SCRIPT> <H3>TEST</H3> <FORM name="fk">※ 条件を入力して下さい <BR> <BR> 条件(1)<SELECT name="s1" id="s1" onchange="b();"> <OPTION value="0.2">A</OPTION> <OPTION value="0.9">B</OPTION> </SELECT> <BR> 条件(2)<INPUT size="10" type="text" name="d1" style="text-align:right"><BR> 条件(3)<INPUT size="10" type="text" name="d2" style="text-align:right"><BR> 条件(4)<INPUT size="10" type="text" name="d3" style="text-align:right"><BR> 条件(5)<INPUT size="10" type="text" name="d4" style="text-align:right"><BR> <BR> <INPUT type="button" value="計算開始" onclick="document.fk.calc1.value=keisan1(document.fk.d1.value,document.fk.d2.value);document.fk.calc2.value=keisan2(document.fk.d1.value,document.fk.d2.value,document.fk.d3.value,document.fk.d4.value,document.fk.s1.value);document.fk.calc3.value=keisan3(document.fk.d1.value,document.fk.d2.value);"> <BR> 回答(1)<INPUT size="10" type="text" name="calc1" style="text-align:right"> <BR> 回答(2)<INPUT size="10" type="text" name="calc2" style="text-align:right"> <BR> 回答(3)<INPUT size="10" type="text" name="calc3" style="text-align:right"> </FORM> </BODY> </HTML>
- ベストアンサー
- JavaScript
- ラジオボタンのnameに別々の文字列を入れてもグループにするには？
ラジオボタンのnameに別々の文字列を入れてもグループにするには？ 前回こちらで、チェックボックスとラジオボタンの値を合計する方法を教えていただきました。 これで、ラジオボタンのnameを任意の文字列にした場合、グループにならないので全部選択できてしまいます。 nameを商品名、valueを価格として使いたいので、任意のnameを使用かつ一つだけ選択させるにはどうしたらよいでしょうか。 こちらの質問が正解に近いのかなと思いますが、どのように応用したらいいのかわかりません。http://okwave.jp/qa/q796874.html ご助言頂ければ幸いです。よろしくお願いいたします。 javascript(test_checked2.js)↓ function calc2() { var i = 0, f, frms = document.forms; var j, el, total = 0, num; while (f = frms[i++]) { j = 0; while (el = f.elements[j++]) { if (el.checked && (el.type == 'radio' || el.type == 'checkbox') && !isNaN(el.value)) total += 1 * el.value; } } num = total.toString(); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); document.getElementById('ch_all').innerHTML = '\\' + num; } html↓ <html> <head> <script type="text/javascript"> </script> <script type='text/javascript' src='test_checked2.js'></script> </head> <body> <div id="ch_all" style="background-color: #eeeeee;"> </div> <hr /> <form name="Tform1"> <input type="radio" name="test" value="34500" onclick="calc2()"> \34,500 <input type="radio" name="test" value="15000" onclick="calc2()"> \15,000 <input type="radio" name="test" value="3000" onclick="calc2()"> \3,000 <input type="radio" name="test" value="4444" onclick="calc2()"> \4,444 </form> <form name="Tform2"> <input type="checkbox" name="test2" value="34500" onclick="calc2()"> \34,500 <input type="checkbox" name="test2" value="15000" onclick="calc2()"> \15,000 <input type="checkbox" name="test3" value="3000" onclick="calc2()"> \3,000 <input type="checkbox" name="test4" value="4444" onclick="calc2()"> \4,444 </form> </body> </html>
- ベストアンサー
- JavaScript
お礼
Valueは値がはいっているんですね。わかりました。 でも、evalのなかのCL.X.valueってドットで区切って入れるってどこかに書いてあるんでしょうか？ 書式なんかがまだよく分かりません。 ありがとうございました。