jjjjavascript

こんなの本出たのね。
買っちゃお。

書籍：jQueyで作るAjaxアプリケーション

しばらく時間があいてしまいましたが、「animate()」とかいじってみました。
使い方はやっぱりとっても簡単で

1. $(〜).animate({
2.     CSSプロパティ:設定値
3. }, スピード, 終了時の処理);

とするだけです。たとえば、

1. $(#square).animate({
2.     opacity:0
3. }, 500);

とすると、「id="#square"」 の要素は 0.5秒かけて透明になります。
もちろん、高さや座標などを複数設定することもできます。

ページの中にいくつか画像を配置して、
読み込まれた画像からフェードインしてくるようなサンプル作りました。

デモサンプル

1. $("li img").css({opacity:0}).load(function(){
2.     $(this).animate({
3.         opacity:1
4.     }, 500);
5. });

まず DOM の準備ができたら、イメージを透明にしておきます。
そんでもって「load()」を使ってイメージが読み込み終わったタイミングで
「animate()」を実行させるようにました。

ところがこれだけだと、Windows の IE では、別のページにいってから戻ってくると、
なぜか画像に対する「load()」のイベントが発生しないのです...。
ただ「window」の「load()」は発生するようなので、後半に下のソースを書いて無様にエスケープ。

1. $(window).load(function(){
2.     if($("li img").css("opacity")==0){
3.         $("li img").stop().css({opacity:1});
4.     }
5. });

こういう場合、なんかいい方法あるのかなあ。
もう少し試してみまする。

jQuery UI 1.5 がリリースされてたみたいなのでメモ。
（jQuery 自体のバージョンは 1.2.6）

• ダウンロード
  http://ui.jquery.com/download
• デモ
  http://ui.jquery.com/demos

簡単に色んなことができちゃう模様。
勉強するにはなるべく使わない方がいいのかなあ。

今回は jQuery の「:even」フィルタを使ってみました。いったい何なのかよくわかってなかったのですが、結局こういうことみたいです。
デモサンプル

1. $(function(){
2.     $("li:even").addClass("eachList");
3. });

「$("li:even")」で＜li＞タグの偶数番目（最初の番号は「0」から始まります）を探して、「addClass("eachList")」で＜li＞タグにクラスを追加しています。
スタイルシートに

1. li.eachList {
2.     background: #EEE;
3. }

と記述したので、結果としてシマシマのリストが出来上がるって寸法です。
なるほどー。
シマシマのテーブルとか、コメントなどのボックスを１人分ずつシマシマにするとか、そういうのに使うのかな？

普段仕事でも使いそうなものということで、今回はロールオーバーイメージにしてみました。
ボタンなどの画像上にマウスが重なると、ボタンの画像が入れ替わるってやつです。よくスタイルシートで Background イメージをずらすという方法も見かけますが、最近は Javascript でいいんじゃないかって気がしてます。Javascript がオフのときは普通のボタンになるだけだし、コーディングも楽だし。（笑）
みなさんがどんな風にやっているのかちょっと見て回った結果、こんな感じにしてみました。
以下 Javascript 部分

1. $(function(){
2.     $.each($("img.rollover"), function(){
3.         var imgPass = $(this).attr("src");
4.         var imgType = imgPass.substring(imgPass.lastIndexOf('.'), imgPass.length);
5.         var loadImgPass = imgPass.replace(imgType, '_over' + imgType);
6.         new Image().src = loadImgPass;
7.         $(this).attr({oversrc:loadImgPass});
8.     });
9.     $("img.rollover").hover(
10.         function(){
11.             $(this).attr({src:$(this).attr("oversrc")});
12.         },
13.         function(){
14.             $(this).attr({src:$(this).attr("src").replace("_over","")});
15.         }
16.     );
17. });

以下 html 部分

1. <img src="images/img01.gif" alt="IMAGE01" class="rollover" />

使用方法は＜img＞タグに「class="rollover"」を追加するだけ。
入れ替える画像は、拡張子の前に「_over」と付けて用意します。
（例えば、通常の画像名が「img01.gif」だったら、ロールオーバー用として「img01_over.gif」を同じ階層に用意しておきます）

デモサンプル

一応 Javascript の方の説明。
2〜8行目
「class="rollover"」の＜img＞タグに対する処理（ループ）
3行目
＜img＞タグの「src」属性を取り出す
4行目
「imgPass」から拡張子を取り出す
5行目
ロールオーバー用にプレロード（先読み）しておきたいファイルパスを作る
6行目
Image オブジェクトを作ってプレロード（先読み）
7行目
ロールオーバーで入れ替えたいファイル（プレロードしたファイル）のパスを、＜img＞タグに「oversrc」属性として保存しておく
9〜16行目
「class="rollover"」の＜img＞タグの「ロールオーバー」「ロールアウト」イベントの設定
11行目
さっき保存しておいた「oversrc」属性を使って画像入れ替え

もっといい方法があるよ、なんていうのがありましたらぜひぜひ教えてくださいませー。

jQueryのセレクタのメモです。

• :first
  最初の要素
• :last
  最後の要素
• :not(selector)
  selectorにマッチするすべての要素以外
• :even
  偶数番目のindex番号の要素(indexは0から)
• :odd
  奇数番目のindex番号の要素(indexは0から)
• :eq(index)
  index番号の要素(indexは0から)
• :gt(index)
  index番号を超える要素(indexは0から)
• :lt(index)
  index番号未満の要素(indexは0から)
• :header
  header要素(h1, h2, h3など)の見出し要素
• :animated
  アニメーション動作中の要素

参考：http://allabout.co.jp/internet/javascript/closeup/CU20080510A/index.htm

jQuery を使いながら実用的（？）なものも作ってみようかと思います。とりあえず今回は、『＜a＞タグのリンク先が外部だった場合に「target="〜"」を使わずに別ウィンドウを開く』っていうものを作ってみました。
xhtml や html で Strict な DOCTYPE を使っていると、＜a＞タグに「target="〜"」は使えませんので、そういう時に別ウィンドウを開かせたい場合の実験です。
で、まず考えたのが、＜a＞タグに「class="external"」など適当な class 名を付けて、その＜a＞タグの「href="〜"」の URL の内容を参照して「window.open」すればいいんじゃないのかなって思いました。こんな感じ。

1. $(function(){
2.     $("a.external").click(function(){
3.         window.open($(this).attr("href"));
4.         return false; //元のウィンドウもリンク先に移動してしまうのを防ぐ
   
5.     })
6. });

これに、別ウィンドウを開かせたい＜a＞タグに「class="external"」をつければ出来上がり。
あれ、なんかとっても簡単。
と思ったのですが、これって余計な class を付けなきゃいけないし、勉強なのでもうちょっと考えようってことで、できたのがこれ。

1. $(function(){
2.     $("a[@href^='http://'],a[@href^='https://']").attr({target:"_blank"});
3. });

結局もっと簡単になってしまいました。
和訳（笑）すると、

1. 文書の準備ができたときに、「http://」と「https://」から始まるすべての＜a＞タグに「target="_blank"」を追加する

という感じでしょうか。これなら html に余計なものを付ける必要がなくなります。さらに「window.open」もやめて、結局＜a＞タグに「target="_blank"」を加えるという荒技に変更。うーん、どうなんでしょう？ やっぱりナンセンスなのかなあ？ まあいいや。
デモサンプル

ちょこっとメモ。

初期化

1. $(document).onready( function(){
2.     //初期化とか関数の設定とか
3. })

$()関数をバシバシ使っていろいろできちゃう模様。
以下よく使いそうなものとか。

全ての＜p＞タグ

1. $("p")

全ての＜p＞タグと＜a＞タグ

1. $("p,a")

クラス名が「lead」の全ての＜p＞タグ

1. $("p.lead")

＜a＞タグが入ってる、クラスが「lead」の＜p＞タグ

1. $("p.lead[a]")

name="email"の全ての＜input＞タグ

1. $("input[@name=email]")

クラス名が「lead」の＜p＞タグの中身を「Hello!!」にする

1. $("p.lead").html("Hello!!");

ID が「memo」の＜p＞タグのスタイルを変える

1. $("p#memo").css("color","#C00");

クラス名が「lead」の＜p＞タグがクリックされた時のイベント

1. $("p.lead").click(function(){
2.     //クリックされたときにすること
3. })

さらにメソッド・チェーンを使って、ひとつのセレクタで複数のメソッドを呼ぶことができる。
いろいろ命令しても１行で書けちゃうって寸法。ひええ。

例えば、、、
＜h3＞タグを作って、ID を「memo」にして、padding を 1em・バックグラウンドを黒・文字を白・フォントサイズを 20px にして、中身に「Hello!」って書いて、ID が「content」の＜div＞タグの中に追加して、そんでもって一回見えなくしてから、ゆっくりフェイドインさせたのちゆっくりフェイドアウト。（笑）

1. $("<h3></h3>").attr({id:"memo"}).css({padding:"1em",background:"#000",color:"#FFF",fontSize:"20px"}).html("Hello!!").appendTo("div#content").hide().fadeIn("slow",function(){$(this).fadeOut("slow")});

デモサンプル

さっそく「jQuery」からファイルをダウンロードして触ってみました。バージョンはいろいろあるようですね。まあここは最新版でしょ、ってことで「jQuery 1.2.6」を手に入れてきました。
ダウンロード出来るファイルは以下の３種類です。

• Minified and Gzipped
  改行などを削除して、ファイルサイズをコンパクトにしたもの。これをダウンロード。56k しかないのでお手軽です。
  
• Uncompressed
  普通に書かれたもの。読み解いて勉強する人にはいいかも。もちろん僕は素通りです。（笑）
• Packed
  圧縮してる呪文のような文字。ファイルサイズは一番軽いようです。でも実行前にもとの状態に戻すので処理的にはちょっと遅いみたいですね。

ダウンロード後にファイル名を「jquery1.2.6.js」に変更して html ファイルに読み込んでみました。
といってもこれだけではなんともならないので、このへんとかこのへんとかこのへんを参考にさせて頂きながら勉強してこうかと思っています。
ちょっと読んでみたところ、とっても簡単に DOM をいじったり Ajax を使ったりできるみたいですね。素敵です。

有名な Javascript ライブラリ「prototype.js」と違うところは、まずファイルサイズが軽いってことと（prototype.js は約120k）、アニメーションやらフェードやらが初めから実装されているとこみたいです。

で、読んでるうちに気になったものを発見したので、さっそくサンプル（サンプルとも呼べない程度ですが...）を作ってみました。
普通のJavascript のイベントで「window.onload()」っていうのがあるんですけど、これは html が全部読み込まれたときに発生するもので、設定を初期化したり命令を作ったりするときに使ったりします（たぶん...）。でもこれ、画像ファイルも全部読み込んでからじゃないと発生しないイベントなので、重たい画像などがあるとそいつを全部読み込むまで何にもできなかったのです。
そこで、jQuery のすごくいいものを発見。

$(document).ready()
DOMがロードされて操作・解析が可能になったタイミングで関数を実行します。

ってことは、例えば、

1. $(document).ready(function(){
2.     alert("DOMの準備ができましたよ！");
3. })

みたいにすると画像の読み込みなんて待たなくっていいってことです。
べ、便利だ...。

ちなみに

1. $(function(){
2.     alert("DOMの準備ができましたよ！");
3. })

と省略形式で書くことも出来るようです。
そして何度でも書いていいみたいです。

デモサンプル

いままで Javascript といえば、ウェブの制作の仕事をしながら、時どき DOM を使ったり、ちょっとしたライブラリをサンプルごと使ったりくらいのちょっとしたニセモノ風な感じでした。そんなニセモノ風からちょっとでも抜け出して、自由に Javascript を使えるようになりたいなあと勉強ブログを立ち上げてみたのです。
といいつつ、どこから手をつけていいのやらさっぱりで...。とりあえず、今さらっぽくもありますが「jQuery」あたりのライブラリを使って、実用的なものを作ったりしながら、そしてきっと悩んだりしながら、少しずつでも Javascript を習得していければと思っています。
トライ＆エラーの連続できっとお恥ずかしいところもお見せしちゃいそうです。
どうぞ大きな心と優しい眼差しで受け止めてやってください。

サイト名は某優良素敵サービスとここへのオマージュ（パクリ）ということで１秒で決定。（笑）
ではでは、どうぞよろしくです。