2006年01月23日

[JavaScript]DOMっぽいイベントハンドラ、結局最後はprototype-js(後編)

前編の続きです。

bodyの中からイベントハンドラをなくす(Mozilla)

さて、ここからが本題です。HTMLソースからイベントハンドラをなくします。尚サンプルはFireFoxとかじゃないと動きません。IE非対応。

で、onclickさんがどっかいっています。どこにいったかというと、
document.getElementById("button3").addEventListener("click",test3,false);
この行にいます。addEventListenerというのがイベントハンドラの変わりになるものです。
オブジェクト.addEventListener(イベント,関数,false)ってなかんじで書くと制御できるんですが、これだとHEADの中に書いても下のソースが読み込む前に実行されるのでエラーがおきてしまいます。なのでこの一文が入ります。
window.addEventListener("load",setTest3,false);
これでwindowがロードされてから実行されることになります。記述するときに注意してもらいたいのはイベントにonがつかないという事です。onclickならclickになります。

サンプル



ソース


<script type="text/javascript">
<!--
function setTest3(){
	document.getElementById("button3").addEventListener("click",test3,false);
}
function test3(){
	document.getElementById("textarea3").value = document.getElementById("text3").value;
}
window.addEventListener("load",setTest3,false);
//-->
</script>
<form>
	<input id="text3" type="text" value="codeweb" /><br />
	<textarea id="textarea3"></textarea><br />
	<input id="button3" type="button" value="クリック" />
</form>

bodyの中からイベントハンドラをなくす(IE)

サンプルはIEじゃないと動きません。

やっぱりIEで動かないと使いものになりません。IEではaddEventListenerの代わりにattachEventを使います。今度はイベントにonがついてるので注意してください。

サンプル



ソース


<script type="text/javascript">
<!--
function setTest4(){
	document.getElementById("button4").attachEvent("onclick",test4);
}
function test4(){
	document.getElementById("textarea4").value = document.getElementById("text4").value;
}
window.attachEvent("onload",setTest4);
//-->
</script>
<form>
	<input id="text4" type="text" value="codeweb" /><br />
	<textarea id="textarea4"></textarea><br />
	<input id="button4" type="button" value="クリック" />
</form>

結局最後はprototype-js

こうなるとやっぱしクロスブラウザ用の関数を作りたくなるのが人というものです。ではここで専用の関数を作ってみます・・・と言いたい所ですが、わざわざ自分で作らなくても既に世の中には優秀なものが出来ています。
この一連の作業をprototype-jsを使って書くとこうなります。実に簡単でシンプルに出来ます。
Event.observe("button5", "click", test5, false);
ここがイベントハンドラの変わりになっています。button5はオブジェクトのIDですが、ここにはID以外にもwindowのようなオブジェクトを指定することもできます。
ビバ!prototype-js!

サンプル

このブログに載せたら文字コードが違うので動きませんでした。別ページ用意するのがめんどくさいのでソースだけ載せときます。

ソース


<script type="text/javascript" src="/js/prototype-1.4.0.js"></script>
<script type="text/javascript">
<!--
function setTest5(){
	Event.observe("button5", "click", test5, false);
}
function test5(){
	$("textarea5").value = $F("text5");
}
Event.observe(window, "load", setTest5, false);
//->
</script>
<form>
	<input id="text5" type="text" value="codeweb" /><br />
	<textarea id="textarea5"></textarea><br />
	<input id="button5" type="button" value="クリック" />
</form>

久しぶりに更新したら疲れました。
例によって適当に書いてる所が多々あるので必ずコメント欄にツッコミがないかどうか確認していってください。
関係ないけど、近いうちにダイハツのエッセ買います。
そのまえにニートになりそうだけど…。

参考

元原稿とか
posted by 高速内弁慶 at 12:46| Comment(26) | TrackBack(2) | JavaScript | このブログの読者になる | 更新情報をチェックする

[JavaScript]DOMっぽいイベントハンドラ、結局最後はprototype-js(前編)

「WEB2.0へ繋がるイベントパンドラのまとめ」とかタイトルにつけてみようかと思ったけど大嘘つきになるのでやめた。

最近HTMLソース内に極力JavaScriptのソースを書かないでプログラムを組むように心がけてるので、ここらで一度自分用にまとめてみようかと思って今回はイベントハンドラ(?)について色々書いてみました。先にオチを言ってしまいますけど、最終的にはprototype-jsのEvent.observe使ってしまいますので内容にあまり期待しないように。

では、「テキストボックスの内容を下のテキストエリアにコピーする」というサンプルを使って長々と無駄に語っていきます。しばらくブログ更新してなかったので文章が変なのは仕様です。

これまでのJavaScript

まず、従来のJavaScriptだとこんな感じです。とくに何も説明する必要もないと思います。

サンプル



ソース


<script type="text/javascript">
<!--
function test1(){
	document.form1.textarea1.value = document.form1.text1.value;
}
//-->
</script>
<form name="form1">
	<input name="text1" type="text" value="codeweb" />
	<textarea name="textarea1"></textarea>
	<input type="button" value="クリック" onclick="test1()" />
</form>

DOMの要素が加わる

つぎにDOMの要素が加わるとこんな感じになります。getElementByIdでオブジェクトを直接指定してやります。この書き方が主流の書き方になってるのではないでしょうか。

サンプル



ソース


<script type="text/javascript">
<!--
function test2(){
	document.getElementById("textarea2").value = document.getElementById("text2").value;
}
//-->
</script>
<form>
	<input id="text2" type="text" value="codeweb" /><br />
	<textarea id="textarea2"></textarea><br />
	<input type="button" value="クリック" onclick="test2()" />
</form>

後編に続く。

posted by 高速内弁慶 at 12:35| Comment(0) | TrackBack(1) | JavaScript | このブログの読者になる | 更新情報をチェックする

2005年09月19日

JavaScriptのみでFormを受信

対応ブラウザ: IE6.0 / IE5.5 / IE5.2Mac / NN7.0 / FF1.0 / Opera8

Getで飛ばされたFormの値をJavaScriptのみで取得します。
「何でJavaScriptだけでする必要があるんだよ!」とか言わないように!
そこに魅力を感じてください。ここはそういう所です。


サンプル

JSForm

ソースと解説

<script type="text/javascript">
<!--
//サーチの値を取得して&区切りで配列に格納
var $_GETURL = location.search.split("&");

//0番目の配列Nameの"?"より後ろの文字列を取得("?"の消去)
$_GETURL[0] = $_GETURL[0].substring(1,$_GETURL[0].length)

//$_GETStr関数を作る
function $_GET($_GETStr){
 //配列の数だけループ
 for(i in $_GETURL){
  //取得したデータが配列内の"=”以前の文字列と同じなら
  if($_GETStr == $_GETURL[i].substring(0,$_GETURL[i].indexOf("="))){
   //配列の"="より後ろの文字列を返す
   return decodeURIComponent(
    $_GETURL[i].substring($_GETURL[i].indexOf("=")+1,$_GETURL[i].length)
   );
  }
 }
}

//$_GET("任意の値")でフォームを取得します。
name = $_GET("name");
password = $_GET("password");

//-->
</script>

9/25修正
posted by 高速内弁慶 at 17:53| Comment(3) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2005年09月13日

画像をアップロードする前にサムネイルを表示させる。

対応ブラウザ: IE6.0 / IE5.5

参照画像をリアルタイムでサムネイル表示させるJavaScriptです。
画像をアップロードするまえに確認することができます。
全ブラウザで確認したわけではありませんが、どうやらIE以外はセキュリティの関係上ローカル画像は表示出来ない仕様となってるみたいです。
IE以外のブラウザは「file:///C:/Documents%20and%20Settings/」のようにsrcを書き換えないといけないみたいです。
めんどくさいから作りません。

Mozilla FirefoxではWEB上からローカル画像が参照出来ない!?
優しい方が教えてくれました。感謝。

セキュリティの観点からローカルファイルを読み込まないようになっています。 http://www.mozilla-japan.org/releases/mozilla1.8a4/known-issues.html#psm


サンプル


サムネイル画像

ソース

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>リアルタイムサムネイル</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function imgc(objimg) {
	document.getElementById("s_img").src= objimg.value;
	document.getElementById("s_img").style.display="inline";
}
</script>
<style type="text/css">
#s_img{
	display:none;
	width:150px;/*この値でサムネイルサイズを指定*/
}
</style>
</head>
<body>
<form>
	<input type="file" onChange="imgc(this)" /><br />
	<img src="" id="s_img" /><br />
</form>
</body>
</html>
posted by 高速内弁慶 at 23:04| Comment(63) | TrackBack(230) | JavaScript | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。