2008年04月11日

JavaScriptと結婚したい

という話を会社の呑み会でしたらドン引きされた。ちくしょう。
JavaScriptはツンデレで可愛いのに何故分からないんだ!

……今夜は泣きながらシャワーを浴びます。
posted by 膳 at 23:51| Comment(1) | TrackBack(0) | JavaScript

2008年03月27日

JavaScriptで名前空間

JavaScriptには名前空間がないので、オブジェクトを代わりに使います。

Namespace.hoge = "ほげほげ";
Namespace.fuga = function() {};

こんな感じでオブジェクトのプロパティを追加していくことで、グローバルスコープを汚さずに済みます。
それだけではなく、JavaScriptだとグローバルスコープに宣言するよりも速いらしいです。

ただし、名前空間がcom.example.foo.barといったように長ったらしくなると、宣言が面倒になってくるのでクロージャを使って凌ぎます。

続きを読む
posted by 膳 at 01:08| Comment(0) | TrackBack(0) | JavaScript

2008年03月16日

Taffy DBでorz

あるSEのつぶやき: Taffy DB − JavaScriptデータベースライブラリ
「Taffy DB」はJavaScriptデータベースライブラリで、JSON形式でデータ管理するとのこと。

ほぅほぅなるほど、とソース解析しているうちにverupして1.2になっていたorz
二日に一度verupしているようなので、もう少し様子見した方がよさそう。or条件にも対応させる気があるっぽいし。
以下のまとめはver1.1時のもの。
続きを読む
posted by 膳 at 23:50| Comment(1) | TrackBack(0) | JavaScript

prototypeは共有されるってのに……

羞恥プレイシリーズ第○弾

続きを読む
posted by 膳 at 14:30| Comment(0) | TrackBack(0) | JavaScript

2008年03月12日

DOM操作はクラスに隠蔽してしまえ

仕事やら趣味やらでJavaScriptのサンプルを作っていると、出力結果を表示させたくなります。
Firebugとかのデバッグツールで出力してもいいけど、それだとブラウザ限定だったりライブラリへのリンク必要だったりで他の人に渡すときめんどい。
そのため、DIVタグの中にちょろちょろ書き出していたんですが、それも面倒になったのでクラス化して使い回すことに。
でもこのJSファイルへのリンク必要だし大した違いなくね?と気づいたのは出来上がった後(いや、でもコピペすれば……)。

以下、晒し。


続きを読む
posted by 膳 at 23:14| Comment(0) | TrackBack(0) | JavaScript

2008年03月09日

ブログのエントリーリスト 03

http://www.zenbo.jp/BlogEntryList.html

変更点:
エントリー数の降順でカテゴリをソート。
カテゴリリスト構築とクリック時の動作をクラスにしてまとめた。
件数、ページ番号、最大ページ数の値書き換え用にtextNode自体を変数に保持するようにした。


これでひとまず終了。
カテゴリを入れ子にしたり、日付でも絞り込みできたり、エントリーリストをソートしたり、テキストファイルそのまんま読み込みじゃなくDBから返すようにしたり、そもそも自分でエントリーリスト作らずにsitemap.xmlを元に自動生成したりってのは今後の課題です。
posted by 膳 at 20:27| Comment(0) | TrackBack(0) | JavaScript

2008年03月05日

ブログのエントリーリスト 02

http://www.zenbo.jp/BlogEntryList.html

途中経過:
スタイルシートちょろっと適用してそれっぽく見せる。
カテゴリー毎のエントリー件数出すようにした。
エントリーリストのエンコードをUTF-8にして文字化け回避。
エントリー数の降順でカテゴリをソートしたいなぁ。


前回の状態をどこにも保存していないので後から見た人は何が変わっているのかサッパリですね。(ブログ更新までの間にちょくちょく変更したりしてるし)
しかし、差分を取って見せるだけのものでもないからこのままでいきます。
posted by 膳 at 21:10| Comment(0) | TrackBack(0) | JavaScript

2008年03月04日

ブログのエントリーリスト 01

http://www.zenbo.jp/BlogEntryList.html

力尽きたので途中経過晒し。
作るのが楽しくて寝るの忘れて良いのは学生までですからーーーー!!!!
早く寝ろ俺。

今日のボケ:
何でAjaxでエントリーリスト読み込まねーんだよunkunk
と15分くらい悩んだ後にローカルで開いているHTMLだと気づいた。
ブラウザのタブの開きすぎには気をつけよう。
posted by 膳 at 00:53| Comment(0) | TrackBack(0) | JavaScript

2008年03月02日

表のページ管理をJavaScriptで 05

画面操作用コードでやっていることは、今まで作った実装クラスとHTMLのをイベントで結びつけです。
ここであれこれ処理が必要になったとしたら、設計がおかしいということなので見直し必須です。
実際のソースはここ参照。
画面はこっち

以下解説
posted by 膳 at 21:05| Comment(0) | TrackBack(0) | JavaScript

Enumerableの継承

prototype.jsの話なんですが、
Arrayへの拡張でも使われているEnumerableを自作のコレクションクラスに適用する場合、

続きを読む
posted by 膳 at 00:28| Comment(0) | TrackBack(0) | JavaScript

2008年03月01日

表のページ管理をJavaScriptで 04

インターフェイスは全部で三つあったので、その全ての実装クラスを作ります。
実際のソースはここ参照。

1.PageItem
PageControler.IPageItemの実装
2.PageItemCollection
PageControler.IPageItemCollectionの実装
3.TableBuilder
PageControler.ITableBuilderの実装

インターフェイス名からIを取っただけで何の捻りもない名前です。
チェック管理する実装なので、それっぽい名前を付けるべきでした。

以下解説
posted by 膳 at 03:08| Comment(0) | TrackBack(0) | JavaScript

2008年02月28日

表のページ管理をJavaScriptで 03

PageControlerは以下の四つの役割で構成されています。
実際のソースはここ参照。

1.PageControler
リストを「ページ」という単位で取り扱うクラス。
2.IPageItem
リストの要素となるアイテム(インターフェイス)。
3.IPageItemCollection
アイテムを取り扱うリスト(インターフェイス)。
4.ITableBuilder
アイテムを利用して表を構築する(インターフェイス)。

JavaScriptの場合は関数そのものをプロパティとして設定できるんですが、それだとカテゴリわけができないから、実装部分作るときに分かり辛かろうという意図でクラスわけしています。
さて、1をすっ飛ばして2から解説していきます。

続きを読む
posted by 膳 at 23:57| Comment(0) | TrackBack(1) | JavaScript

2008年02月20日

表のページ管理をJavaScriptで 02

Ajax対応版になったので報告。
コールバック関数にはXMLHttpRequestが引数として渡されるので前のやつじゃダメでした。

鯖側の処理にPHPを使ったんですが、文法もろくすっぽ知らないのにクラス作成から入ろうとして蹴躓きました。
何で名前空間使えないんだよ!!と憤慨してたらさくらインターネットのPHPのバージョンが 5.2.5 なせいで未対応( 5.3.0 かららしい)。
もっとちゃんと勉強した方がいいですね……。

でもまだPHPにするかRubyにするか決めかねてます。

追記
posted by 膳 at 21:33| Comment(0) | TrackBack(0) | JavaScript

2008年02月18日

表のページ管理をJavaScriptで 01

こんなものを書いてみた。

仕事で作っているwebアプリがページ移動のたびに鯖に処理お願いしてページデータ貰ってくる仕様だったので、

わしゃもっとゴリゴリJavaScript書きたいんじゃぁぁぁ

という欲求をこっそりここで解消。

機能としては、
1.前頁
  前のページに移動。無ければ移動できない。
2.次頁
  次のページに移動。無(ry
3.頁移動
  頁指定テキストボックスのページに移動。範囲外や数字以外ならば(ry
4.全て選択
  表の全てのチェックをONにする。
5.全て選択解除
  表の全てのチェックをOFFにする。
6.全ての頁で選択
  表示されていない部分のチェックもONにする。
7.全ての頁で選択解除
  表示されていない部分のチェックもOFFにする。
8.チェック状態の取得
  チェックされているアイテムの名称をメッセージボックスで表示。
9.アイテム読み込みはAjax
  思い切り未実装。

という感じ。
具体的な実装についての解説は後日。
クラスダイアグラムだけ置いておきます。
VisualStudioでこれ作ったんだけど、こんな感じで通じるんだろうか?
posted by 膳 at 22:28| Comment(0) | TrackBack(0) | JavaScript