Javascript
これまでJSライブラリーとしてはYUI2.xを使ってきたのだが、どうもコードが煩雑になって生産性がよくない気がしてならない（自分の技量が低いのは否めないところではある）ので、人気の高いjQueryを試してみようと思う。 EzoGPでMyznalaやSyracavaを始めた頃…
自分用のまとめ。 オブジェクトの動的変更 jsオブジェクトは、実行中に「.（ドット）演算子」によって動的に変更される。 代入式（関数） いろいろな関数 var test = function(...) { ....}; は、右辺で定義される無名関数の参照を、testという変数でラベル…
１年ほど前に「Javascriptの基本」と題して、いくつかのログを残した。少し整理しようかと思って見直したところ、proptotypeオブジェクトを使った関数オブジェクトの拡張を書きもらしていた。サンプルを作ったので、覚書きとして残しておこう。まず、最初の…
現在、EzoGPのでopenBusinessSuiteというのを実装している。Myznalaをベースにしているのだが、我ながら「使いにくい」ので、Myznalaもなおしちゃおうと思っている（アルファとはいえ、リリースしたことを反省）。Myznalaをやっていたときから気になっていた…
正直に言うと、現在のJavascript（ECMAScript）は、関数系言語だが、オブジェクト指向言語だかよく分からない。クロージャーのような機構は関数系言語に特徴的だと思うし、基本はそうなのだと思う。紛らわしいのは、javascriptの文脈に「オブジェクト」とい…
イベントプロパゲーション（event propagation）という性質がある。英語を直訳すると「イベントの伝播」。バブリング（bubbling）ということもある。 これを、一言で言うと、 DOM階層の下位で発生したイベントが、上位に伝播していく こととなる。 論より証…
先のログ『Javascriptのオブジェクトの基本：インスタンス化とthis』では、this句について、 インスタンス化されたオブジェクトをさす と書いた。とはいえ、Javascriptで頻繁に登場するthis句が「いったい何を指しているの？」ということで悩むことも多い。 …
先のログで、「コンストラクタのthisは、生成したインスタンスをさす」と書いた。これはJavaも同じだが、Javascriptでは「thisが何をさすのか」と迷う場面がしばしばある。このログでは、一番単純な例で、「thisのさす物」を覗いてみる。ソースは以下。 関数…
Javaには「インスタンス」、「コンストラクタ」という言葉がある。 自分はJavaEE屋さん歴が長いので、Javascriptを書いていても、new演算子が出てくると『インスタンスを生成する』と言いたくなる。だが、Javascriptでは『クラス』という言葉が使われないの…
よく、下のような形式の関数を『クロージャー（closure）』と呼ぶ。 // クロージャー var test1 = function(){ --- (1) var _i = 1; return function(){ alert(_i); _i++; }; }; 形式的には、先のログ『Javascriptの基本：いろいろな関数』で照会した、「関…
スコープチェーン（scope chain）という言葉がある。 ここでいうスコープとは、「有効範囲」と言ったらいいかもしれない。よく「変数のスコープ」とか、「xxxのスコープ」とかいう言い方をするが、これらは、それぞれ「変数の有効範囲」、「xxxの有効範囲」…
先のログ『Javascriptの基本：代入式』では、 var test = function(){ // --(2) var _arr = ["pretty","print"]; return _arr; }; var v1 = test; // --- (1) 参照の代入 var v2 = test(); // --- (3) 参照する関数の実行 の例を用いて、以下の結果を得た（…
自分の足元を見直すつもりで、Javascriptに関して、いくつかの実験をしてみようと思う。まずは、代入式について考えてみたい。まず、代入式は、 メモリー空間にアロケートされた右辺の参照アドレスを、左辺でラベル付けする … (a) と定義するのが一般的と思…
前回のログ『prettyPrint.jsを試してみた』では、 var test = { _arr : ["pretty","print"], _rear : [["pretty","print"]], _reobj : { "a":"pretty", "b":{"b1" : "print"}}, _func : function(_str){ alert(_str); return; } }; という簡単なオブジェクト…
懇意のmezawa氏がMOONGIFTの記事を送ってくれた。 タイトルは『Javascriptのvar_dump「prettyPrint.js」』。とても魅力的な名前だ。 自分もPHPを良く使うので、かねがね、「Javascriptにvar_dumpがあればなぁ」などと思っていたのだが、そのものずばりを作っ…
先のログに書いたが、これまでのサンプルなどを「一まとめのコード」にしようとしている。 そのせいで、ログの更新も滞りがち。以前にサンプリングした、YUIのOfficial Examplesの中にDrag Dropの面白いサンプル（これ）があったので、それをモディファイし…
今日はメモの書き込み。自分はどうしても正規表現が苦手。すぐに忘れてしまう。 （若干の違いはあるが）JavascriptでもPHPでもPerl系の正規表現が使える。最近、Humming Birdさんのサイト（こちら）でテストができるようになって、とても作業が楽になった。…
Javascriptでの禁則処理をエンハンスしたついでに、以前作成したPHPの方のプログラムにも同等の機能を実装しておく。 実装する機能は、 禁止する文字を■に置換するのは格好悪いので、化けそうも無い文字(列）に置換する。 というもの。禁止する文字と、その…
以前、作ったJavascriptでのコンバータ（禁則文字の置き換え目的）だが、あるアプリで使ったついで修正を加えた。この間のプログラムの以下の問題点を改善した。 １．禁則文字が続いた場合、■１つに置換されてしまう。 ２．■に置換するのは格好悪いので、化…
漠然としたタイトルだが、要するに「アプリを作ったとき、画面それぞれにヘルプをつけたい」というためのプログラムのこと。先日のログで作成した、（ログインユーザーのロールに応じた）メニュー機能を転用し、以下の仕様とした。 ヘルプの文面はMarkupで記…
先日のログのプログラムを発展させて、 単純なツリー形式にする。 画面にオーバーレイして出現する。 ようにしてみた。 以下は、初期画面のスナップショット。 「Menu」とあるリンクをクリックすると、YUIのAnimを使って、下のようにツリー状のメニューが浮…
YUI2.7.0とPHPを使って、以下のようなシンプルなメニューを作ってみたい。YUIに付属するメニューは、ちょっと好きになれない。 ログインしたユーザーに応じて、メニューの内容を変える。 単純なツリー形式にする。 画面にオーバーレイして出現する。 第１回…
Javascriptの記述方法としては、functionを書き連ねて、必要に応じて呼び出すことが多いんじゃないかと思う。だが、それだと雑然としたコードになって、「とりあえず書いてみました」的な印象となってしまう。このログでもしばしば取り上げてきたが、YUI Blo…
ログイン処理をもう少し実用向けにしてみたい。 以前、どこかのサイトで「認証はページに帰属させる」という記事を読んだ記憶がある。認証処理はアクションに帰属させるのが一般的であろうが、Ajaxを前提とした場合、ページに帰属させることで、少なくとも利…
前回（YUI2.7.0+PHP5でログインの処理を作る）の自然の流れとして、Logout処理を作ってみた。Javascriptから、XHRでPHPのプログラムを呼び出して以下の処理を行う。 SESSIONに紐づいているCOOKIEの廃棄 SESSION内に保管してデータの削除 また、これを確認す…
趣向を変えて、YUI2.7.0のPanelを使って、モーダル（modal）表示のログイン画面を作ってみた。ログインは、 E-Mailアドレス パスワード で行うことにし、この情報は、CSV形式でサーバーに置く（以下）。 dummy@dummy.com,password画面の動きは以下のようにす…
これまでの一連のログで一通りの道具立てが揃ったので、YUI2.7.0のDataTable（EditableTable;編集可能な表）を使って、以下のフラットファイル（CSV形式）のデータを更新・削除するプログラムを書いてみた。 01,北海道,テスト 02,青森,- 03,秋田,- 04,岩手,-…
前回のログでは、YUI2.7.0のEditable Table（編集可能な表）について、更新・削除時に（DataTableオブジェクト内に）一時保管されるデータを、配列に蓄積するスクリプトを書いた。今回は、それを発展させて、その内容をサーバーに送るコードを書いてみる。こ…
ここまで、YUI2.7.0にあるEditable Table（編集可能な表）について、セルの更新と妥当性検証（Validation）、行の削除を行ってきた。 変更されたデータは、Page Scope（Javascriptオブジェクト）に保存されていて、実際の利用局面では、サーバーに送って永続…
YUI2.7.0のEditable Table（編集可能な表）について、バリデーションのコードを書いてきた。 バリデーションは、データの登録・更新に伴う処理。 今回は、 のような表を用意して、都道府県名の脇のマークをクリックしたら、行が削除される仕組みを作ってみる…
