highslideの様なscriptをjQueryを使って書いてみた。
Prototype.jsを使ってアコーディオンメニューを作ってみた。
意外に簡単に出来たが例によってCSSやHTMLの構造にかなり依存してしまっている。
実際に使うにはそれなりにカスタマイズが必要になってくる
ソースコードは以下のような感じだ。
またまた"Prototype.js"についてのちょっとしたメモ
下記のような簡単なスクリプトで
document.observe('dom:loaded', function(event) {
var item = new Image();
item.src = 'image.jpg';
$$('body')[0].insert(item);
item.observe('click', function(event) {
alert(event.element().src);
});
});
Prototype.jsを使っていてちょっと悩んだ事があった。
下記のようなごくごく単純なHTMLがあったとして
<body> <img id="item" src="images/image.jpg" /> </body>
サムネイルをクリックしたら拡大画像が表示されるというJavascriptライブラリには有名な所で'Lightbox'や'highslide'がある。
それぞれのサイトではデモも見られるし、ダウンロードして自分で使う事も出来る。
http://highslide.com/
http://www.huddletogether.com/projects/lightbox2/#download
いろんなサイトでも紹介されている。
もっと簡単なのをちょっと自分でも書いてみた。（例によってPrototype.jsを使用）
prototype.jsにはDOMを操作する為のメソッドが多数追加されているが
document.insert(Element);
は簡単なメソッドでこの場合は'document'内に'Element'を追加する。
他にも
写真のある一部分（例えば右下の矩形20px分）をドラッグする事でその写真を拡大したり縮小したりするスクリプト。
何かしらのオブジェクト（例えば写真）を任意の場所に整列させたい時、以下の様なコード（class）で実現出来る。
基準になる座標を一つ決めてそこに整列させている。
javascriptとactionscriptはよく似ている。
なのでどちらかで学んだ事をそのまま一方の言語で活かす事が出来る。
例えばボールの伸縮を表現した以下のようなactionscriptのコードがあったとして
以下のようなコードで物体をバネのように動かす事が出来る（Prototype.js使用）。
PHPには'shuffle'というその名の通り配列をシャッフルしてくれる関数がある。
例えば以下のようなコードがあったとしたら
<?php $numbers = range(1, 5); shuffle($numbers); print_r($numbers); ?>
こんな感じでシャッフルされる
Array
(
[0] => 2
[1] => 4
[2] => 5
[3] => 3
[4] => 1
)
たまにこういった処理が必要になるが他の言語ではどうすればいいか？
オライリーから出版されている「初めてのActionScript3.0」という書籍の中に「モーション」という章がある。
さらにその中に「幾何学と三角法」という節があり、角度や距離の事や円運動の事が書かれている。
僕は学生の頃から出来損ないだったのでそこに書かれてあるサインコサインだのラジアンだの到底理解出来なかったのだが、よくコードを見てみるとそのままJavascriptでも適用出来るんじゃないかと思った。
早速以下のようなコードを書き、試してみた。
Javascriptライブラリ'prototype.js'のabsolutize()メソッド或はrelativize()メソッドは視覚上の位置は変えることなく要素の配置方法だけを'absolute'もしくは'relative'に変えてくれる便利な（例えば、その要素をドラッグしたい時等は'static'のままだと無理）メソッドだ。
ただし、absolutize()メソッドはループの中で使うと思った結果にならない。
例えば下記のような簡単なHTMLコードがあったとする。
<img src="AAA.JPG" alt="AAA" /> <img src="BBB.JPG" alt="BBB" /> <img src="CCC.JPG" alt="CCC" /> <img src="DDD.JPG" alt="DDD" />
Javascriptライブラリ'prototype.js'には要素のposition属性を位置を変えずに簡単に変えることができるメソッド
Element.relativize Element.absolutize
が用意されている。
それぞれCSSスタイルのposition属性を
relative
かabsolute
に変えてくれるメソッドだが'relativize'のIEでの挙動がどうも前々からおかしいなと思っていた。
javascriptでのマウスオーバーを前回とはまた違った形で実装してみた。
ソースは以下のような感じ
会社のホームページリニューアルに伴い、コーディングをやる事になったのでここ２ヶ月くらいJavascriptをよくいじっている。
もっぱら'Prototype.jsライブラリ'に依存してはいるが、それでもいろいろと勉強になっている。
CSSの"background-image"をずらしながらマウスオーバーのちょっとしたアニメーションみたいなものを以前作っていたが、今回は画像を使わずに実装してみた。
画像を使わないと何がうれしいかっていうと、いろんな色で作れるという事だ。画像の場合はその都度画像から作成しなければならない。
ソースコードは以下のような感じ（要Prototype.js）
サンプルはこちら
Rubyにはデータを出力するためのメソッドに
print puts p pp（require 'pp'が必要）
と、たくさんあるが、'p'や'pp'は主にデバッグ用のメソッドで実際のプログラムで使用するのはあまり行儀のいいことではないとされている。
ある要素の上にマウスポインタがきた時、その要素に対してドロップシャドウがかかったように見えるスクリプトを作ってみた。
昔は、例えば写真やイラスト等imgタグに対してこういう処理を行いたい時は通常表示用の画像と、マウスポインタが上に乗ったときに表示する「ロールオーバーイメージ」の２つの画像を作る事で対応していた。
最近ではCSSの:hover疑似クラスを使う方が多くなったが、いずれにしても2枚の画像を作らなければならない。
写真が増えたり変更されたりした時はその度にその作業は必要になってくる。
しかも画像によって陰の大きさや濃さがバラバラになるとみっともないので作った方法はしっかりメモしておかなくては駄目だ。
今回はシャドウ用のpng画像を6枚作り、それらをCSSの'position'プロパティや'top'、'left'（'bottom'、'right'）プロパティを使い、適切な場所に配置して実現させている。
ソースコードは以下のような感じだ（prototype.jsが必要）。
Webページを構成する各要素はドキュメントの流れに従い通常は上から下へ、左から右へと配置されていく。
そして要素の種類によって改行が入ったり入らなかったりする。
CSSを使う事でこの流れに逆らったレイアウトを実現する事が出来る。
どんな要素も（表示されている以上は）ドキュメント上でのX座標とY座標を持っているが、CSSでの'positionプロパティ'を'static'以外にする事でこれら座標を変える事が出来るようになる。
Javascriptから（prototype.jsを使い）要素をドラッグ可能にするスクリプトを書いてみた。
ソースは以下のような感じだ。
Webページ内である要素に透明効果を適用したい場合、CSSで調整する事が出来る。
ただし、ブラウザによってCSSのプロパティ名が異なってくるためそれらを考慮して記述していかなければならない。
Javascriptを使って同じように透明度を調節する事が出来るが、これらも結局はCSSの"opacity"プロパティや"-moz-opacity"プロパティ、もしくは"filter"プロパティをいじっているにすぎない。
prototype.jsを使うと同じ関数でこれらプロパティを操作できる。
RGBカラーを表現する時
CSSで"position"というプロパティがあるが、これはボックスを配置する時の基準位置を決める為のプロパティだ。
'static'、'relative'、'absolute'、'fixed'というプロパティ値がある。
ここを'static'以外の値にした時に今度は'top'、'right'、'bottom'、'left'というプロパティを指定できるようになる。
webページを作っている時、情報量が多くなるとどうしても縦にスクロールしなければならなくなる。
そんな時にある部分だけはスクロールした後も表示しておきたい時、
"フレームに分けてその部分だけは常に表示させておく"やり方や
"CSSのpositionプロパティをfixedにしておく"やり方があるが、
どちらも'なんだかなあ〜'という気がする。
特にIE6なんかはfixedをサポートしていなかったりするし。
というわけでJavascriptで要素をスクロールさせるスクリプトを書いてみた。
Javascriptの本を読んでいると'配列のようなオブジェクト'という文言をよく見かける。
関数の中で参照可能なargumentsというオブジェクトやdocument.getElementsByTagNameメソッド呼び出しによって得られる'NodeList'というオブジェクトなんかがそうだ。
例えばこれらのオブジェクトに対して
var ele = document.getElementsByTagName('li');
alert(ele instanceof Array);
こんな風にinstanceof演算子を適用しても'false'になってしまう。
なぜ'配列のような'と言われるかというと
どの言語でも
10 * 3
という式を評価するとたいていは
30
という数値が得られる。
単純に10という数値に3を掛けた結果だ。
この'*'という演算子はRubyやPythonでは文字列に対しても適用できる。
例えば
javascriptでは"setInterval"や"clearInterval"を使ってちょっとしたアニメーションを実装することが出来る。
例えば透明度を0%にしてその後100分の1秒ごとに10%ずつ上げていく関数を定義し、それを呼び出す。
そして透明度が100%に達したところでその関数をストップさせることで一瞬光ったような視覚効果を得られる。
ソースは以下のように書ける
PerlやPHPでは文字列を連結する時と数値を足す時では演算子が違うので例えば
$num1 = 10; $num2 = 20; print $num1 . $num2."\n"; print $num1 + $num2."\n";
上の例ではそれぞれ
1020 30
と出力される。
では数値と文字列に対してそれぞれの演算子を適用してみる。
最近のjavascriptの開発環境は"Firebug"等のおかげでずいぶんやりやすくなってきた。
safariにも開発メニューが標準で表示されるようになりここから"Webインスペクタを表示"を選ぶとウインドウが開く、このウインドウの"Console"ってとこを選択すると、いろんなコマンドライン（javascriptの式）を記述する事でちょっとした値の確認等が出来るようになっている。
同様にOperaもツールメニューから詳細ツール→開発者用ツールを選択するとそれらしきものが出てきてそれらしきことが出来る。
Javascriptライブラリ「prototype.js」のinsertメソッドの簡単なテスト。
以下のような単純なファイルがあったとしてその中のid"div1"に対してそれぞれ値を変えながらinsertを呼び出してみる。
Javascriptの配列で、ある要素がその配列に存在しているかを知りたい。
さらに存在するのであれば何番目に存在するのか？
といった時はindexOfメソッドが使えるが、ついつい間違ったコードを書いてしまいがちなのでここにメモしておく。
間違ったコードというのは
javascriptで数値を扱うときはMathオブジェクトを使う事で複雑な計算が出来るようになる。
たとえば
