refirio.org

JavaScriptの標準命令のみでCookieを扱うのは若干面倒ですが、jquery.cookie.js を利用すると簡単に扱うことができます。

• サンプル

jquery.cookie.js は GitHub からダウンロードすることができます。

続きを読む

一時期よくFlashで作成されたスライドショーですが、今はJavaScriptのみで作成されることが多いです。サイトのトップページで、一定時間ごとにメイン画像を切り替えたりすることができます。

• サンプル

利用、流用は自由にどうぞ。またプラグイン作成の基本は jQueryプラグインの作成メモ 前編 と jQueryプラグインの作成メモ 後編 を参考にしてください。

以下、内容を解説していきます。

続きを読む

前編の続き。

続きを読む

jQueryを使うと一からゴリゴリとJavaScriptを書くよりも、プログラムが短くスッキリしたものになります。

なので他のページに移植するのは比較的容易ですが、プラグインにしておくと導入がもっと簡単になります。他人にファイルを渡して導入してもらう場合も、最低限の指示で導入できるようになります。

jQueryのプラグインは色々なサイトで配布されていますが、同じように自分でもプラグインを作成することができます。

という訳で、普通のjQueryコードをプラグインにする方法のメモ。プラグインの書き方は何通りもあるので、あくまでも「自分ではこう書いている」というものです。（jQueryの基礎知識があることを前提としています。）

続きを読む

いまからはじめるScript.aculo.us

主に上のページを参考に、一通りの機能をざっと試してみた。本当にざっとだけど。

script.aculo.us は prototype.js をベースにしたライブラリで、多彩なエフェクト機能が利用できるようになります。ちょっとしたアニメーション処理とか、要素のドラッグ＆ドロップとか、Google Suggest みたいな入力候補機能とか、とても簡単に実装できます。これまた便利。

Webアプリケーションの管理画面などで、使えそうな機能は導入していきたいと思います。

prototype.js v1.5.0 の使い方
prototype.js 1.4rc4

主に上のページを参考に、一通りの機能をざっと試してみた。
かなり膨大な量なので全機能を把握し切れていないけど、凄く便利なのは分かった。

利用頻度の高いもので、自力でコードを書くと面倒そうな処理は、大抵実装されているっぽい。その分、ファイルサイズもそれなりに大きいけど…。

書き方が色々あるけど、自分では以下のように書くとします。

/* クラスを定義 */
function Animal(name) {
  this.name = name;
}
Animal.prototype.eat = function() {
  document.write(this.name + ' : ぱくぱく<br />');
};

/* クラスを継承 */
function Dog(name) {
  this.name = name;
}
Dog.prototype = new Animal();
Dog.prototype.bark = function() {
  document.write(this.name + ' : わんわん<br />');
};

/* クラスを利用 */
pochi = new Dog('ポチ');
pochi.eat();
pochi.bark();

以前から書いている方法。一番見慣れているのでひとまずこれで。

prototype.js 利用時は以下のように書くとします。

/* クラスを定義 */
var Animal = Class.create();
Animal.prototype = {
  initialize: function(name) {
    this.name = name;
  },
  eat: function() {
    document.write(this.name + ' : ぱくぱく<br />');
  }
};

/* クラスを継承 */
var Dog = Class.create();
Dog.prototype = Object.extend(new Animal, {
  bark: function() {
    document.write(this.name + ' : わんわん<br />');
  }
});

/* クラスを利用 */
pochi = new Dog('ポチ');
pochi.eat();
pochi.bark();

クラスの継承は

子クラス.prototype = Object.extend(new 親クラス, { ～ });

としてみる。

class 子クラス extends 親クラス { ～ }

の書き方が（言語を問わなければ）一番見慣れているので、近い書き方にしてみた。

今後変えていくかもしれないけど。

よーし、基礎から勉強しなおすぞー！
流行のライブラリも扱えるようになるぞー！

…と宣言してみるテスト。