MW211 EXIT

devlog
JavaScript/置換の罠
2012年02月10日
「.replace(置換前,置換後)」は一文字しか置換しないので注意。

「"いっぱい".replace("い","お")」の結果は、
「おっぱい」であって「おっぱお」ではない。

全部置換したい場合には正規表現を使ってしまえ。
「"いっぱい".replace(/い/g,"お")」

「g」パラメータを使う。
また、「"」で囲う必要がないのにも注意。
分類:注意、JavaScript
JavaScript/フォームに要素を追加
2012年02月09日
┌──────────────────────────────────────┐
│function $(inId) {return document.getElementById(inId);}                    │
└──────────────────────────────────────┘
と定義していることを前提として。

JavaScriptで、idが「form」というフォームに、「$_POST['キー'] = '値'」みたいな
hidden属性を追加するには以下のような感じになる。
┌──────────────────────────────────────┐
│var addEle = document.createElement("input");                               │
│addEle.type  = "hidden";                                                    │
│addEle.name  = "キー";                                                      │
│addEle.value = "値";                                                        │
│$("form").appendChild(addEle);                                              │
└──────────────────────────────────────┘

ちなみに、jQueryだと以下みたいに簡単にできる。
┌──────────────────────────────────────┐
│$("#form").append('<input type="hidden" name="キー" value="値"/>');         │
└──────────────────────────────────────┘
分類:JavaScript
SQL/相関問い合わせ
2012年02月08日
例えば、個人が所属している団体名を表示させるSQLの場合、以下のような感じになる。
┌──────────────────────────────────────┐
│SELECT 個人.名称,                                                           │
│       団体.名称                                                            │
│    FROM 個人                                                               │
│        LEFT JOIN 団体                                                      │
│          ON 団体.団体コード = 個人.団体コード                              │
└──────────────────────────────────────┘
じゃ、無所属の個人のみを抽出したい場合は?となると、
以下のようにWHERE句をつけると、簡単に移行できる。
┌──────────────────────────────────────┐
│SELECT 個人.名称                                                            │
│    FROM 個人                                                               │
│        LEFT JOIN 団体                                                      │
│          ON 団体.団体コード = 個人.団体コード                              │
│    WHERE 団体.主キー IS NULL;                                              │
└──────────────────────────────────────┘
しかし、この手抜きSQL文は本格的になると
結構、問い合わせに時間がかかってしまうようだ。

で、この場合は、相関問い合わせに移行してしまった方がよいようだ。
┌──────────────────────────────────────┐
│SELECT 個人.名称                                                            │
│    FROM 個人                                                               │
│    WHERE NOT EXISTS (SELECT 団体.主キー                                    │
│                          FROM 団体                                         │
│                          WHERE 団体.団体コード = 個人.団体コード           │
│                     );                                                     │
└──────────────────────────────────────┘
結果はどちらも同じなので、簡単な前者のままにしてしまって
後で、遅い遅いと問題になるかもしれないから注意。
分類:SQL
CSS/空欄に文字を追加表示する時の注意点
2012年02月07日
空欄(横幅なし)のdivタグに、JavaScriptで文字を(追加)表示させると
一文字ずつ自動改行されて、縦表示になるブラウザがあるようだ。
#ChromeとSafariがそれ(InternetExplorer、FireFox、Operaは大丈夫)

回避策としてはdivタグにCSSとして「white-space:nowrap;」を
定義してあげるとよいようだ。
分類:CSS、注意
JavaScript/ゼロパディング
2012年02月06日
例えば、「1」を「001」と3桁固定で表示するために、
先頭に「0」を埋めるようなことを、「ゼロパディング」という。

Excelの関数で以下のような感じで実現できる。
┌──────────────────────────────────────┐
│=TEXT(1,"000")                                                              │
└──────────────────────────────────────┘

CやPHPだとこんな感じなる。
┌──────────────────────────────────────┐
│sprintf("%3d", 1)                                                           │
└──────────────────────────────────────┘

では、JavaScriptでは?

まず、ベタな方法。
┌──────────────────────────────────────┐
│var a = 1;                                                                  │
│if (a < 100) {a = "0" + a;}                                                 │
│if (a < 10)  {a = "0" + a;}                                                 │
└──────────────────────────────────────┘
ただ、これだとif文を羅列しなきゃならない。

ちなみに数値以外にも対応したい場合は、こうか。
┌──────────────────────────────────────┐
│var a = 1;                                                                  │
│switch (a.length) {                                                         │
│  case  1: a = "00" + a;                                                    │
│  case  2: a = "0"  + a;                                                    │
│}                                                                           │
└──────────────────────────────────────┘

ただし、一番シンプルなのは以下だろう。
┌──────────────────────────────────────┐
│var a = 1;                                                                  │
│a = ("00" + a).slice(-3);                                                   │
└──────────────────────────────────────┘
これは使える。
分類:JavaScript
JavaScript/配列に追加
2012年02月05日
PHPにおいて配列の最後に追加するには、以下のような感じに記述する。
┌──────────────────────────────────────┐
│$配列[] = 値;                                                               │
└──────────────────────────────────────┘

これをJavaScriptにあてはめると、以下のような感じになる。
┌──────────────────────────────────────┐
│配列.push(値);                                                              │
└──────────────────────────────────────┘
「配列[] = 値;」とはできないので注意。
分類:JavaScript
HTML/ファイルアップロードのタグ
2012年02月04日
┌──────────────────────────────────────┐
│<input type="file"/>                                                        │
└──────────────────────────────────────┘
ファイルをアップロードすることができるこのタグ。

でも、ブラウザによって見え方が違う。
以下のような感じ。
┌─────────┬───────────────────┐
│                  │┌────────────┐┌───┐│
│Internet Explorer ││                        ││参照..││
│                  │└────────────┘└───┘│
├─────────┼───────────────────┤
│                  │┌────────────┐┌───┐│
│Firefox           ││                        ││参照..││
│                  │└────────────┘└───┘│
├─────────┼───────────────────┤
│                  │┌───────┐                    │
│Chrome(Google)    ││ファイルを選択│選択されていません  │
│                  │└───────┘                    │
├─────────┼───────────────────┤
│                  │┌───────┐                    │
│Safari(Apple)     ││ファイルを選択│ファイルが未選択です│
│                  │└───────┘                    │
├─────────┼───────────────────┤
│                  │┌────────────┐┌───┐│
│Opera             ││                        ││選択..││
│                  │└────────────┘└───┘│
└─────────┴───────────────────┘

注意したいのは、Chomeなどの場合の右端。
若干隙間が空いてしまうのだ。
┌──────────────────────────────────────┐
│┌───────┐                        ┌──┐                          │
││ファイルを選択│選択されていません      │確定│                          │
│└───────┘                        └──┘                          │
└──────────────────────────────────────┘
もしも、確定ボタンとかを横に置いた場合には、一体感に欠けてしまう。

そんな時は以下のように背景色をつけてあげれば、右端の余白も塗ってくれるので、
隣接している感が復活する。
┌──────────────────────────────────────┐
│<input type="file" style="background-color:#CCCCCC;"/>                      │
└──────────────────────────────────────┘

ちなみに、最近のIEの背景色のdefaultは灰色みたいです。
分類:HTML
jQuery/submitボタン
2012年01月30日
「id」に「submit」という名称をふったボタンなどをクリックすると
submitが行われる処理は以下のように書ける。
┌──────────────────────────────────────┐
│$("#submit").click(function() {                                             │
│  $(this).parents("form").submit();                                         │
│});                                                                         │
└──────────────────────────────────────┘

「parents()」は直系の親をすべて遡ってチェックしてくれるので
引数に検索条件である「form」タグを指定すれば、直系の親のformにぶちあたる。
#formは入れ子ができないので、自身の直系の親のformは一つだけである。
┌──────────────────────────────────────┐
│body┬form┬button                                                          │
│    │    └button                                                          │
│    ├form─button                                                          │
│    └form─button                                                          │
└──────────────────────────────────────┘

でも、実際のところ「id」を直接指定した方が処理は速いので、
「form」タグに「id」を割り振ってしまう方が実用的かもしれない。
┌──────────────────────────────────────┐
│$("#submit").click(function() {                                             │
│  $("#form").submit();                                                      │
│});                                                                         │
└──────────────────────────────────────┘

後者だと、「id」の記述ミスに気をつけるとか、命名規則とか、
ちょっとめんどくさいのだが。
分類:jQuery
どっち?/書込のタイミング
2012年01月29日
何らかの文書を編集後、「保存」を実行し、データを保存する。
「保存」を実行せずに終了すると、データは保存されない。

これは、(処理速度の速い一時記憶装置へ逐次記録して)
処理速度の遅い永久記憶装置への書き込み回数を極力少なくしようという
制約から来ているのだと思うが
もうコンピュータ操作のルールとして広く浸透している感がある。

当然ながら、現実社会では(紙に)書いた瞬間に保存される。
「保存」処理を行ってからノートを閉じるなんてことはしない。

でも、前者のルールに慣れてしまえば、逐次保存処理が行われたりすると
勝手にデータを破壊されるようで危なっかしくてかなわない。
#そんなダンプツールをいじるときは冷や冷やする。

現実社会と同様の処理の流れとすれば操作性としては感覚的にわかりやすいが
必ずしもそれが便利だとは限らず、
コンピュータ世界の(大多数の)流儀に従ったシステムの方が
(他で慣れているので)逆に感覚的にわかりやすい場合もある。

ただし、コンピュータ世界のローカルルールを押しつけるというのは
如何なものかというのものある。

例えば、現実社会と同じように逐次記録するけど、
UNDO機能というやり直し機能が精巧に出来ていて、やり直しが効く、
保存していない状態に戻れるというのであれば、両者のいいとこ取りのような感じだ。

ただし、それでも「保存」処理に慣れてしまっていれば、
UNDOすらめんどくさいとなる。

生まれながらにそのシステムに慣れてしまえばそれが正義になるのだろう。
分類:設計、どっち?
どっち?/幹番+枝番で一意vs枝番のみで一意
2012年01月28日
「1年1組」と「2年1組」は別のクラスだ。

「1組」という名称が同じでもだ。

「年」+「組」で一意だからだ。

ただ、「1年11組」と「2年21組」としてしまえば(1学年が9組以下という前提で)
組だけで一意に判別することができる。

「11組」は学校に一つだけの組だからだ。

ってなると、「年」って何の意味があるの?ってことになる。

データベースの世界で、枝番を自動採番する主キーにすればこれと同じことが起きる。

でも、便利なことは便利だ。
いちいち二つ以上のキーで連結しなくてもよい。

枝番はなにもきっちり前詰めじゃなくてよく、スペースを大きく使ってよいってことなら
これもアリかもしれない。
分類:設計、どっち?
前へ 1 … 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 … 156 次へ