検索結果一覧
- タグ「JavaScript」の検索結果は5件です。
script.aculo.us
主に上のページを参考に、一通りの機能をざっと試してみた。本当にざっとだけど。
script.aculo.us は prototype.js をベースにしたライブラリで、多彩なエフェクト機能が利用できるようになります。ちょっとしたアニメーション処理とか、要素のドラッグ＆ドロップとか、Google Suggest みたいな入力候補機能とか、とても簡単に実装できます。これまた便利。
Webアプリケーションの管理画面などで、使えそうな機能は導入していきたいと思います。
WYSIWYGエディタ
prototype.js の練習に、WYSIWYGエディタを作ってみた。
http://www.favorite-labo.org/practice/editor/
Macでの動作については要調整。またそのうちに。アイコン画像は famfamfam.com からお借りしたものです。
処理の概要は
- iframeに対し、designMode か contentEditable を適用させると、編集機能が利用できる。
- 装飾処理は execCommand を使えば（基本的に）勝手に行ってくれる。
こんな感じ。基本的にブラウザ側に実装された機能を呼び出すだけですが、コード編集機能や文字色選択機能用のカラーパレットなど、ゴリゴリとコードを書かなければならない箇所もあります。
…て、凄く何を今更な内容ですね…。詳細な解説は検索すればたくさん出てきます。（＾＾；
prototype.js
prototype.js v1.5.0 の使い方
prototype.js 1.4rc4
主に上のページを参考に、一通りの機能をざっと試してみた。
かなり膨大な量なので全機能を把握し切れていないけど、凄く便利なのは分かった。
利用頻度の高いもので、自力でコードを書くと面倒そうな処理は、大抵実装されているっぽい。その分、ファイルサイズもそれなりに大きいけど…。
JavaScriptでクラス定義
書き方が色々あるけど、自分では以下のように書くとします。
/* クラスを定義 */
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 親クラス { ～ }の書き方が（言語を問わなければ）一番見慣れているので、近い書き方にしてみた。
今後変えていくかもしれないけど。
JavaScript
よーし、基礎から勉強しなおすぞー！
流行のライブラリも扱えるようになるぞー！
…と宣言してみるテスト。