VBプログラマの為のAjax入門

VBプログラマの為のAjax入門

まずはフォームの要素を取得する所から。
prototype.jsをダウンロードしてきて参照する。
それから、フォームやコントロールにidとnameを指定する。
あとはjavascriptでゴリゴリと書く。

※ポイント
開発・デバグにはFirefox（ブラウザ）を使い、アドオンでFirebugをインストールして使用します。
生javascriptは動作にブラウザ間の違いがあり、また、コードが冗長になるので、prototype.js　jQuery.js　を使用する。

オススメ参考文献
実際、WEBなどでかなりのサンプルが公開されており、本など必要ない？と思いましたが、「Prototype & script.aculo.us」は非常に興味深い内容でした。
これを読んだからと言って直ぐには達人にはなれないが、実装したい様々な機能へのアプローチの仕方・考え方にはとても参考になる本です。
詰まるところ、この本のエッセンスと、WEB上のサンプルでかなりの開発ができるのでは？と思っています。

Prototype & script.aculo.us ―JavaScriptライブラリによるAjaxアプリケーション開発

次にjQuery
こちらは、プラグイン＝jQueryに自分で機能を追加拡張できるので、様々な便利なツールが公開されており、その事も原因か、とても人気。
なので、prototypeだけとは行かないので、jQueryも必須となる。
で、prototype・jQueryを併用して書く場合が想定されるので、そこの所と、リファレンスが欲しいということで、下記の本を購入。
実際、初めてjQueryのリフレクションをprototypeと併用使用する時に役立ちました。
また、VS2008ではjQueryのインテリセンスが使用できると言うのだから、試して見なければ・・・・・

jQuery入門―魔法のJavaScriptリファレンス&サンプル

サンプル目次

• Javascrioptの基本のキ 2010年8月1日
• フォームの値を取得する　テキストボックス・チェックボックス・ラジオボタン
• 画像を入れ替える方法
• タブ型メニュー javascriptで切り替える
• コントロールのenableをfalseにする
• prototype.jsでイメージのポップアップを作成する
• prototype.jsでイメージのスライドショーを作成する(試作版)
• prototype.jsでイメージのカルーセルを作成する
• prototype.jsとjQueryでカルーセルを作成する 2010年4月18日
• VS2008 ASP.NETでjQueyを使う 2010年4月25日
• POSTとGET 2010年6月6日
• prototype.jsでコンボボックスの連動　2010年9月12日
• Javascriptから.NETへ値を渡す方法 2010年10月9日
• javascriptからcss class（クラス）へアクセスするcssセレクタ$$() 2011年1月29日
• javascriptのイベント
• ・・・・・

		function getdata(){
			var ob=$("mytext");
			$("vlabel").innerHTML=$("mytext").value;
		}
		
		function showalert(){
				alert("きちんとファイルが参照できているか？OK");
		}
		
		function getck(){
			//チェックボックスの値
			var str="";
			if ($("chk1").checked==true){
				//alert ($("chk1").checked);
				str=$("chk1").value;
			}
			if ($("chk2").checked==true){
				str= str + $("chk2").value;
			}
			if ($("chk3").checked==true){
				str= str + $("chk3").value;
			}
			$("vlabel").innerHTML=str + "をチェックしています。";
		}
		
		function getradi(){
			//ラジオボタンの値を取得するには　
			//フォームのラジオボタンを<div>又は<span>で囲んでその中のコレクションを取得して・・・・が簡単
			var ra = $("radios").getElementsByTagName("input");
			for (var i=0; i < ra.length;i++){
				//alert(ra[i].checked + ra[i].value)
				if (ra[i].checked===true){
					$("vlabel").innerHTML=ra[i].value + "をチェックしています。";
				}
			}	
			//alert(ra);
		}