オブジェクト指向で書いた時のフォーム値受取り

質問

オブジェクト指向で記述したときの、フォームの値の受取の記述方法
がわかりません。

例えば下記のようなフォームがあったとすると
----------------------
<form name="test">
<input type="text" name="name">
<input type="button" value="送信" onClick="testAlert()">
</form>
----------------------

手続き型では
=============================
function testAlert(){
　var name = document.test.name.value;
　alert(name);
}
=============================

こんな感じで値を受取りアラート出力できますが、
オブジェクト指向で記述した場合はどうなりますか？

=============================
var aaa = function(name){
　this.name = name;
};

aaa.prototype.test = function(){
　return alert(name);
};
=============================
こういうような感じだとは思うのですが、ここから先が分かりません。
よろしくお願いします。

回答No.5

my-- · ベストアンサー

<form name="test">
<div><input type="text" name="name1" value="name1.value">
<input type="text" name="name2" value="name2.value"></div>
</form>
<script type="text/javascript">
//コンストラクタ関数定義
var aaa = function(name){
　this.name = name;
};

//prototypeのメンバを定義
aaa.prototype.test = function(){
　var val = document.test[this.name].value;
　alert(val); //alert
　return val; //return value
};
//new演算子を使いインスタンス化
var inst = new aaa("name1");
inst.test();//name1.value
inst.name = "name2";
inst.test();//name2.value
/*
「prototypeプロパティって何ぞや？」

instは作成時メンバにnameを持ちますが、testを持ったわけではありません。
javascriptでは参照がメンバに存在しなかった場合、次にそのオブジェクトを生成した
コンストラクタのprototypeから探索することになっています。
実際に処理しているのは生成元aaa.prototypeのtestメソッドです。

コンストラクタ関数から生成された複数のオブジェクトに同じメソッド、プロパティを
共有させることで、コードの簡素化、メモリの節約になると言われてます。
あくまでスキル、設計センス次第だと思いますが。

「prototypeプロパティ プロトタイプチェーン new演算子 thisキーワード」

thisキーワードも重要な役割をしているので、この辺りを抑えておくとよいかと。
解説サイトは充実しています。
*/
</script>

お礼

今回私の書き方が悪く情報も少なくてすみませんでした。
皆様に知りたいことを上手く伝えられなかったようでしたので、
アドバイスを参考にして自分で進めようと思います。

本当にありがとうございました！

回答No.4

神崎 渉瑠（@taloo）

prototypeというよりも、「オブジェクト指向プログラムの作り方、オブジェクトの使い方」の問題だと思います。
prototypeを使わなくてもオブジェクト指向プログラミングは出来ますので。。。
私もオブジェクトの使い方がわかるまでは、まだ手続き型で書いておく方がいいかと思いますが、、、

--------
var aaa = function(name){
　this.name = name;
};

aaa.prototype.test = function(){
　return alert(this.name);
};

var myAaa=new aaa(document.test.elements['name'].value);
myAaa.test();
----------

this.nameに何を入れるつもりだったのかわかりませんので。
No.2の使い方を意図されてるのかもしれませんが、オリジナルを尊重。

お礼

お礼が遅れて申し訳ありません。
ありがとうございました！

回答No.3

yambejp

なにをもってオブジェクト指向と考えているかによりますが
理解が浅いならprototypeをいじるのは尚早かと
とりあえずこんな感じで？

<script>
try{
document.addEventListener ('click',function(e){clickfunc(e)},true);
}catch(e){
document.attachEvent('onclick',function(e){clickfunc(e)});
}
function clickfunc(e){
var t = (e.srcElement || e.target);
if(t.nodeName=="INPUT" && t.type=="button" && t.value=="送信"){
alert(t.form.elements["name"].value);
}
//e.preventDefault();
}
</script>

<form>
<p>
<input type="text" name="name" value="hoge" />
<input type="button" value="送信" />
</p>
</form>

お礼

お礼が遅れて申し訳ありません。
今回は諸事情でprototypeが必要でしたので、
アドバイスのソースは利用できませんが、
とても勉強になりました。

ありがとうございました！

回答No.2

babu_baboo

aaa.prototype.test = function( ) {
return document.forms[ 'test' ].elements[ this.name ].value;
};

<form name="test">
は
<form id="test">
が、よかったり。

お礼

お礼が遅れて申し訳ありません。
ありがとうございました！

回答No.1

babu_baboo

return alert(name);
を
return alert( this.name );

補足

本当にすみません！
ここは単に質問投稿時に「this.」を記述し忘れていただけです。

引き続きよろしくお願いいたします。