MW211 EXIT

devlog
jQuery/チェックボックスの必ずチェックチェック
2011年11月07日
チェックボックスのある画面で、どれかにチェックしてくれないと困るので
JavaScriptでエラーメッセージを出してガードする場面がある。

┌──────────────────────────────────────┐
│var check_flag = false;                                                     │
│var inputs = document.getElementsByTagName("input");                        │
│for (var i = 0; i < inputs.length; i++) {                                   │
│  if (inputs.item(i).type == "checkbox") {                                  │
│    if (inputs.item(i).getAttribute("checked")) {                           │
│      check_flag = true;                                                    │
│    }                                                                       │
│  }                                                                         │
│}                                                                           │
│if (!check_flag) {                                                          │
│  alert("チェックしてください。");                                          │
│  return false;                                                             │
│}                                                                           │
└──────────────────────────────────────┘
ま、こんな感じで、inputタグのcheckboxを全検索して、
フラグを使って判別したりする。

これがjQueryだとかなり簡単

inputタグ全部をチェックする場合(一応、例として)。
┌──────────────────────────────────────┐
│if (!$("input:checked")[0]) {                                               │
│  alert("チェックしてください。");                                          │
│  return false;                                                             │
│}                                                                           │
└──────────────────────────────────────┘

inputタグのcheckboxを全部チェックする場合(最初の例と同等、これでも十分か)。
┌──────────────────────────────────────┐
│if (!$("input:checked[type=checkbox]")[0]) {                                │
│  alert("チェックしてください。");                                          │
│  return false;                                                             │
│}                                                                           │
└──────────────────────────────────────┘

さらにname属性が「xxxx~」に絞り込む場合。
#「xxxx1、xxxx2…」「xxxx_1、xxxx_2…」、「xxxx[]」とかが該当
┌──────────────────────────────────────┐
│if (!$("input:checked[type=checkbox][name^=xxxx]")[0]) {                    │
│  alert("チェックしてください。");                                          │
│  return false;                                                             │
│}                                                                           │
└──────────────────────────────────────┘
これでも、かなり簡素にできる。
分類:jQuery
PHP/正規表現の置換で文字列を除去(抽出)
2011年11月06日
「preg_replace()」は正規表現が使える便利な置換関数だ。

例えば「ABCDE」という文字列があったとして、
「B」より前を除去したい場合は「^.*B」を
「」(空文字)に置換するように指定すればよい。
┌──────────────────────────────────────┐
│preg_replace('/^.*B/', '', 'ABCDE');                               →「CDE」│
└──────────────────────────────────────┘
「^」は先頭を表し、「.*」は一種のワイルドカードみたいなものだ

一方、「D」より後を除去したい場合は、「D.*$」を「」に置換だ
┌──────────────────────────────────────┐
│preg_replace('/D.*$/', '', 'ABCDE');                               →「ABC」│
└──────────────────────────────────────┘
「$」は末尾を表す

では、この二つを同時に行い「C」のみを抽出したい場合には?
一時変数を使って順番に二段階で処理すればできそうだが(実際にできるが)
なんと、一発でできてしまう。
┌──────────────────────────────────────┐
│preg_replace('/^.*B|D.*$/', '', 'ABCDE');                            →「C」│
└──────────────────────────────────────┘
「|」は「or」みたいなもんで、前出の二つのいずれかに該当したものを
一気に処理してくれる。
もちろん「|」の前後を入れ替え可能、結果は同じだ。
┌──────────────────────────────────────┐
│preg_replace('/D.*$|^.*B/', '', 'ABCDE');                            →「C」│
└──────────────────────────────────────┘

では、互いの領域まで侵犯する入れ子状態の置換はどうなるのだろうか?
「A~D」と「B~E」を同時に置換で除去してしまう。
ってことで「BCD」が両方でかぶってる場合だ。

こんな感じの結果だった。
┌──────────────────────────────────────┐
│preg_replace('/^.*D|B.*$/', '', 'ABCDE');                            →「E」│
└──────────────────────────────────────┘
「ABCDE」─(「A~D」を置換」)→「E」─(「B」がみつからず置換できず)→「E」
…ってな感じだろうか。

それじゃ、「|」の前後を逆にしたらどうだろう?
「ABCDE」─(「B~E」を置換」)→「A」─(「D」がみつからず置換できず)→「A」
…かと思いきや
┌──────────────────────────────────────┐
│preg_replace('/B.*$|^.*D/', '', 'ABCDE');                            →「E」│
└──────────────────────────────────────┘
で、変わらず。

文字列の先頭から処理していくのが原則みたいだ。
分類:PHP
JavaScript/JavaScipt中のタグ
2011年11月05日
┌──────────────────────────────────────┐
│var a = "<span>" + "a" + "</span>";                                         │
└──────────────────────────────────────┘
JavaScript中で文字結合でタグなんかを作る場合には、
終了タグの「</」を「<\/」にしてあげた方がいいみたい。
┌──────────────────────────────────────┐
│var a = "<span>" + "a" + "<\/span>";                                        │
└──────────────────────────────────────┘

ちなみに「<input~/>」みたいな自己完結型の場合、「\」はいらないみたい。
「</」ってのがよろしくないのかも。

「Firefox Html Validator」に注意されてしまった(エラーではない)。
分類:JavaScript
jQuery/ボタンが押されたイベント
2011年11月03日
ボタンを押した場合に、そのボタン名をダイアログに表示する方法。
┌──────────────────────────────────────┐
│$("input").click(function() {                                               │
│  alert($(this).attr("value"));                                             │
│});                                                                         │
└──────────────────────────────────────┘

一歩踏み込んで、submitボタンに限定する場合。
┌──────────────────────────────────────┐
│$(":submit").click(function() {                                             │
│  alert($(this).attr("value"));                                             │
│});                                                                         │
└──────────────────────────────────────┘

さらに踏み込んで、「実行」という名のsubmitボタンに限定する場合。
┌──────────────────────────────────────┐
│$(":submit[value='実行']").click(function() {                               │
│  alert($(this).attr("value"));                                             │
│});                                                                         │
└──────────────────────────────────────┘

なので以下のような実行確認JavaScript文を、以下のように書き換えることができる。
┌──────────────────────────────────────┐
│var inputs = document.getElementsByTagName("input");                        │
│for (var i = 0; i < inputs.length; i++) {                                   │
│  if (inputs.item(i).type == "submit") {                                    │
│    if (inputs.item(i).value == "実行") {                                   │
│      inputs.item(i).onclick = (function() {                                │
│        if (!confirm("実行していいですか?")) {                             │
│          return false;                                                     │
│        }                                                                   │
│      });                                                                   │
│    }                                                                       │
│  }                                                                         │
│}                                                                           │
├──────────────────────────────────────┤
│$(":submit[value='実行']").click(function() {                               │
│  if (!confirm("実行していいですか?")) {                                   │
│    return false;                                                           │
│  }                                                                         │
│});                                                                         │
└──────────────────────────────────────┘
分類:jQuery
JavaScript/getElementByIdの代替
2011年11月02日
「prototype.js」における「$」は、「document.getElementById()」と同じ。
なので、以下のように関数定義してしまえば、同じように使えてしまう。
┌──────────────────────────────────────┐
│function $(inId) {return document.getElementById(inId);}                    │
└──────────────────────────────────────┘

こうすれば、以下のように書き換えが可能となる。
┌──────────────────────────────────────┐
│document.getElementById("ID名").value = "値";                               │
├──────────────────────────────────────┤
│$("ID名").value = "値";                                                     │
└──────────────────────────────────────┘

ところで、「jQuery」の場合は若干違う。
┌──────────────────────────────────────┐
│$("#ID名")[0].value = "値";                                                 │
└──────────────────────────────────────┘
上記のように、ID名の前に「#」が必要で、
さらにインデックスとして「[0]」が必要だ。

なお、インデックスの代わりに「get()」メソッドを使う方法もある。
┌──────────────────────────────────────┐
│$("#ID名").get(0).value = "値";                                             │
└──────────────────────────────────────┘

また、valueだけだったら、「val()」メソッドを使えば「[0]」を不要にできる。
┌──────────────────────────────────────┐
│$("#ID名").val("値");                                                       │
└──────────────────────────────────────┘
上記は代入(設定)の場合、参照だけだったら、以下の通りとなる。
┌──────────────────────────────────────┐
│$("#ID名").val();                                                           │
└──────────────────────────────────────┘
分類:JavaScript、jQuery
PHP/配列から任意の値を除去する
2011年11月01日
┌──────────────────────────────────────┐
│$z = array('a'=>'A', 'b'=>'B', 'c'=>'C');                                   │
└──────────────────────────────────────┘
上記のような連想配列から、「'b'=>'B'」の組を除去してしまいたい場合には
以下のような感じでピンポイントでunsetしてしまえばよい。
┌──────────────────────────────────────┐
│unset($z['b']);                                                             │
└──────────────────────────────────────┘

では、以下のように連想配列でない場合はどうするのか?
┌──────────────────────────────────────┐
│$z = array('A', 'B', 'C');                                                  │
└──────────────────────────────────────┘

「array_diff()」を使う。
┌──────────────────────────────────────┐
│$z = array_diff($z, array('B'));                                            │
└──────────────────────────────────────┘

あれ、前に出てきたような気が…。
分類:PHP配列
JavaSciprt/setAttribute()と=
2011年10月30日
例えば新規のhidden属性をJavaScript上で生成したい場合、以下の二つの方法がある。
┌──────────────────────────────────────┐
│var newInput = document.createElement("input");                             │
│newInput.setAttribute("type" , "hidden");                                   │
│newInput.setAttribute("name" , "abc");                                      │
│newInput.setAttribute("value", 123);                                        │
│inForm.appendChild(newInput);                                               │
└──────────────────────────────────────┘
┌──────────────────────────────────────┐
│var newInput = document.createElement('input');                             │
│newInput.type  = "hidden";                                                  │
│newInput.name  = "abc";                                                     │
│newInput.value = 123;                                                       │
│inForm.appendChild(newInput);                                               │
└──────────────────────────────────────┘
「setAttribute()」を使って値を代入する方法と、「=」を使って値を代入する方法だ。

違いがよくわからない…。
でも、後者の方がいいみたいだ。
分類:JavaScript
MVC第02回/「index.php」を窓口にする(補足)
2011年10月29日
配下に上位の「.htaccess」にとるRewriteの影響を受けないフォルダを作りたい場合。

なんのことはない、以下のような内容の「.htaccess」を置いて
打ち消してあげればよい。
┌──────────────────────────────────────┐
│RewriteEngine Off                                                           │
└──────────────────────────────────────┘

近い方の「.htaccess」が優先されるから。

例えば、ルートにRewriteの「.htaccess」を置くことになったけど
配下に一時的なworkフォルダを置きたい場合とかに、
そのフォルダを上記設定にして例外にしてあげる時とか有効だ。
分類:MVC
MVC第01回/「index.php」を窓口にする
2011年10月27日
「index.php」を窓口とするため、どのような(サブ配下の)アドレスが入力されても
ここに集まるように設定する。(以下「mvc」フォルダ直下での話とする)

「index.php」に以下のように記述して、実行結果をみるようにする。
┌──────────────────────────────────────┐
│<?php                                                                       │
│echo '「index.php」が実行されました。';                                     │
│echo '指定されたURIは「' . $_SERVER['REQUEST_URI'] . '」です。';            │
│?>                                                                          │
└──────────────────────────────────────┘

「index.php」の横(同一フォルダ)に「.htaccess」を置き、以下のように記述する。
┌──────────────────────────────────────┐
│# 設定                                                                      │
│RewriteEngine On                                                            │
│RewriteBase /mvc/                                                           │
│RewriteRule !\.(js|ico|gif|jpg|png|css)$ index.php                          │
└──────────────────────────────────────┘

これで準備OK。

まずは普通に「index.php」(「~/mvc/index.php」)を実行(※)した場合。
※ブラウザのURL入力欄に入力する
┌──────────────────────────────────────┐
│「index.php」が実行されました。指定されたURIは「/mvc/index.php」です。      │
└──────────────────────────────────────┘

続いて、サブフォルダ「~/mvc/abc/」を実行した場合。
┌──────────────────────────────────────┐
│「index.php」が実行されました。指定されたURIは「/mvc/abc/」です。           │
└──────────────────────────────────────┘
「index.php」が実行されて、
「$_SERVER['REQUEST_URI']」で指定されたURIが見られる。
これができれば、一元制御ができる。

ちなみに「~/mvc/abc/def.php」の場合も同じ。
┌──────────────────────────────────────┐
│「index.php」が実行されました。指定されたURIは「/mvc/abc/def.php」です。    │
└──────────────────────────────────────┘
とにかく「index.php」が窓口になってくれている。
分類:MVC
PHP/POSTパラメータは画面リロードでどうなってしまうのか?
2011年10月26日
submit後のGETパラメータはURIの一部になっているので、
「ctrl+r」とかで画面リロードしてもGETパラメータはそのままだ。

SESSIONはもちろんセッション領域に書き込まれるので
リロードしても問題なし(変化なし)。

となるとPOSTパラメータって、リロードするとどうなるのだろう?(消えたりする?)

ということで実験してみた。

万全を期して(?)、他のページへactionで遷移するようにして
そこでprint_r()でダンプを画面に表示してみた。
(遷移先のページにはPOSTする要素はないので雑音なし…という想定)

で、POST直後、hiddenやtextから入力した値がダンプ表示されるのをまず確認。
さで、ここから本番だ、リロード!
すると、見慣れた以下のダイアログが登場、すかさず「再試行」を実行。
┌────────────────────────────────────┐
│このページを再表示するには、以前送信した情報を再送信する必要があります。│
└────────────────────────────────────┘

さきほどのダンプはそのままだ。
つまり、POSTパラメータは消えません。

………あれ?そういや見慣れたダイアログに答えが書いてあったじゃん。
「以前送信した情報を再送信」ってね。
分類:PHP
前へ 1 … 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 次へ