2006年01月23日

[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年11月06日

Macromedia Studio 8 オンデマンドセミナー

今日は昼に起きてからずーとMacromedia Studio 8 オンデマンドセミナーをみていた。

70分もあります。
逆に言えばたった70分でそれなりに新機能が理解できる素敵なないようです。
個人的にこれを見て思ったこと。
Flashが進化してたのは分かってたけど、Dreamweaverが結構進化してた。
というより、Dreamweaverってこんなに便利なんだぁーって感じです。
結構時間を食われますが、見ればそれなりに新発見があると思います。
今日は休日ですし、まだご覧になった事がない方は一度ご覧になられる事をお勧めします。

posted by 高速内弁慶 at 15:30| Comment(19) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2005年10月26日

[ネタ]CSSのみでドット絵

dotcat.gif

対応ブラウザ: IE6.0 / NN7.0 / Mozilla / FF / Opera8 / 他は知らん

今日紹介するサンプルは恐らく一生使うことの無い、何の役にも立たない、どうしようもない、CSSを使ったサンプルです。
その名も「ドット絵CSS」
CSSのみでドット絵を描く事が出来る一見優れものような気がするサンプルです。
本当は何の役にも立たないゴミです。
作った画像を保存できないなんて当たり前。
自分でPrintScreenしてください。
一度描いたら修正不可!男なら一発勝負です。
操作性?レスポンス?そんなの知りません。
ってぐらい使えないものです。
あえてCSSのみでやる所にロマンを感じてください。
サーバーに負担が掛かるのでサンプルはダウンロードしてローカルで試してください。

サンプル

アップロード前にウイルスチェック済みですが、念のためダンロード後ウイルスチェックをする事をお勧めします。

解説

ソース見れば分かります。visitedの色を変えてるだけです。

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

2005年10月24日

CSSのみで折りたたみナビゲーションっぽいリンク


対応ブラウザ: IE6.0 / NN7.0 / Mozilla / FF / Opera8 / 他は知らん

ツッコミいただいたのでpタグをspanタグに直しました。
改めてDTDでの要素の定義をみたらAタグの中にブロック要素は入れたら駄目となってました。
ありがとうございました。
spanタグにしたのでスタイルはずした時用にbrタグを書いてdisplay:none;で内消しときました。
適当にbrタグにスタイル掛けてみたんですが、brタグってスタイル効くんですね。
普段あんまし使う事ないと思うけど。


手抜きサンプルの日でちょこっと紹介したCSSのhoverを使って遊んでたやつです。
リンクって「link visited hover active」をきちんと定義しないといけなかったような、どうでも良かったような。
例によって適当に書いてる所もあるので、ある程度は脳内補完してください。

サンプル

スタイルなし


CSS適用

続きを読む
posted by 高速内弁慶 at 23:27| Comment(66) | TrackBack(1) | CSS | このブログの読者になる | 更新情報をチェックする

2005年10月23日

アスキーアートでチャット(AAchat)

aachat.gif

対応ブラウザ: IE6.0

思いつきで作ってみました。
AAを使ったチャットです。互換性とか考えずに取り合えず適当に形だけ作っただけなので、IE6にしか対応してません。
説明するより触ってみた方が分かりやすいと思うので、サンプルで遊んでみてください。 久しぶりの更新ですが、ずーっとこれ作ってた・・・というわけではなく、ただ単に怠けてました。

サンプル

AAchat v0.0.1

続きを読む
posted by 高速内弁慶 at 13:47| Comment(11) | TrackBack(2) | PHP | このブログの読者になる | 更新情報をチェックする

広告


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

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

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


×

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