MW211 EXIT

devlog
JavaScript/特定の文字が何文字含まれているか
2012年02月13日
┌──────────────────────────────────────┐
│文字数 = 対象.length - 対象.replace(/文字/g, "").length;                    │
└──────────────────────────────────────┘
数えたい文字を除去してしまい、その前後で文字数を比較すれば、
文字数がわかるという魂胆。

┌──────────────────────────────────────┐
│2 = "いっぱい".length - "いっぱい".replace(/い/g, "").length;               │
└──────────────────────────────────────┘
みたいな感じ。
分類:JavaScript
CSS/幅のem指定
2012年02月12日
「1em」はなぜか半角1文字分の横幅ではなく、全角1文字分の横幅と同じ。

あれ、日本語の人が決めた規格なの?なぜに全角?

と思ったら、横幅ではなく縦幅が基準なんだって。

なっとく。

※等幅フォント(横幅×2=縦幅)を前提としたお話です
分類:CSS
(無題)
2012年02月11日
Happy Birthday to You!
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
前へ 1 … 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 … 156 次へ