MW211 EXIT

devlog
JavaScript/小数点以下桁数チェック
2011年11月23日
JavaScriptの場合は、こう。
┌──────────────────────────────────────┐
│var decimal = 値.split(".");                                                │
│var 桁数 = (decimal[1]) ? array[1].length : 0;                              │
└──────────────────────────────────────┘
分類:JavaScript
JavaScript/値の確認
2011年11月18日
「abc」という変数があって、処理中の値を知りたい場合、
そこにalert()文を入れてダイアログ出力して確認するというのは常套手段だ。
┌──────────────────────────────────────┐
│alert(abc);                                                                 │
└──────────────────────────────────────┘
上記みたいな感じ。(BASICのPRINT文みたいなもんだ)

でも、そのダイアログの内容をエディタで編集したいと思っても、
ダイアログ内容のコピー&ペーストができない。

そこで、代替案。
クリップボードへ出力するのだ。
┌──────────────────────────────────────┐
│clipboardData.setData("Text", abc);                                         │
└──────────────────────────────────────┘
こんな感じ。

実行した場合、IEだと
「このWebページがクリップボードへアクセスすることを許可します?」みたいな
警告文を一応表示して許可を求めてくるので、「アクセスを許可する」を選ぶ。

これで、クリップボードへ格納されたので、メモ帳とかを開き
「貼り付け」(ctrl+v)をすれば、値を取得できる。

IE以外のブラウザについては、
やったことがなくどんな挙動になるかは知らないのであしからず。
分類:JavaScript
JavaScript/POSTの飛び先を変える方法
2011年11月10日
┌──────────────────────────────────────┐
│<form method="post" action="aaaa.php">                                      │
│:                                                                          │
│<input type="submit" value="実行"/>                                         │
│</form>                                                                     │
└──────────────────────────────────────┘
上記のような配置で、submitボタン(実行ボタン)を押すと、「aaaa.php」に飛ぶが
「bbbb.php」に飛ばしたい場合の方法。

以下のようにonclickイベントで、「action」の内容を書き換えてあげればよい。
┌──────────────────────────────────────┐
│<form method="post" action="aaaa.php">                                      │
│:                                                                          │
│<input type="submit" value="実行" onclick="this.form.action='bbbb.php';"/>  │
│</form>                                                                     │
└──────────────────────────────────────┘
分類:JavaScript
JavaScript/JavaScipt中のタグ
2011年11月05日
┌──────────────────────────────────────┐
│var a = "<span>" + "a" + "</span>";                                         │
└──────────────────────────────────────┘
JavaScript中で文字結合でタグなんかを作る場合には、
終了タグの「</」を「<\/」にしてあげた方がいいみたい。
┌──────────────────────────────────────┐
│var a = "<span>" + "a" + "<\/span>";                                        │
└──────────────────────────────────────┘

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

「Firefox Html Validator」に注意されてしまった(エラーではない)。
分類:JavaScript
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
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
JavaScript/formの送信項目を送信しない
2011年10月21日
form内にhidden属性か何かで入力項目を設定しておくと、
submit時にその項目が飛び先に送られる。
飛び先側では、「$_POST['項目名']」とかでその値を参照できる。

しかし、事情により、formの中に項目は設定してしまったんだけど
submit時に除外したい場合の方法(を模索中)。
(submitしないで、link系でページ遷移すればいいじゃんというのはナシ)
┌──────────────────────────────────────┐
│<form method="post" action="飛び先.php">                                    │
│<input type="hidden" name="項目名" value="値"/>                             │
│<input type="submit" value="送信したふり"                                   │
  onclick="document.getElementsByName('項目名')[0].removeAttribute('name');"/>│
│</form>                                                                     │
└──────────────────────────────────────┘
これだと、飛び先に「$_POST['項目名']」は送られない。

submit時に「removeAttribute()」で自身の属性名自体を削除して
自身の存在を消している(ようにしている)。

もっといい方法がありそうだが、DOMを熟知していないので、今はここまで。
分類:JavaScript
JavaScript/submitボタンを明細毎につける
2011年10月20日
以下のような「選択」ボタンが明細毎に存在する画面があって
ボタンを押した飛び先に、明細のIDを渡したい場合がある。
┌─┬───────────────────────────────┌──┐┐
│ 1│明細1                                                        │選択││
├─┼───────────────────────────────├──┤┤
│ 2│明細2                                                        │選択││
├─┼───────────────────────────────├──┤┤
│ 3│明細3                                                        │選択││
└─┴───────────────────────────────└──┘┘

GETパラメータで渡すのは簡単で、以下のようにURIを編集してlinkしてあげればよい。
┌──────────────────────────────────────┐
│<input type="button" value="選択" onclick="window.open('飛び先.php?id=1',… │
│<input type="button" value="選択" onclick="window.open('飛び先.php?id=2',… │
│<input type="button" value="選択" onclick="window.open('飛び先.php?id=3',… │
└──────────────────────────────────────┘

しかし、POSTパラメータとして渡すとなるとsubmitボタンとなり、
以下のように識別子が入り込む余地がない(ように見える)。
┌──────────────────────────────────────┐
│<form method="post" action="飛び先.php">                                    │
│<input type="submit" value="選択"/>                                         │
│<input type="submit" value="選択"/>                                         │
│<input type="submit" value="選択"/>                                         │
│</form>                                                                     │
└──────────────────────────────────────┘

ベタな方法としては、以下のようにname属性を分けて、
飛び先で、$_POSTを全件ループして、キーが「submit_id_xxxx」のものを抽出し、
さらに「submit_id_」を除外すればidが取得(復元)できる。
┌──────────────────────────────────────┐
│<form method="post" action="飛び先.php">                                    │
│<input type="submit" name="submit_id_1" value="選択"/>                      │
│<input type="submit" name="submit_id_2" value="選択"/>                      │
│<input type="submit" name="submit_id_3" value="選択"/>                      │
│</form>                                                                     │
└──────────────────────────────────────┘

JavaScriptが使えるならもう少しスマートな方法がある。
┌──────────────────────────────────────┐
│<form method="post" action="飛び先.php">                                    │
│<input type="hidden" name="id"/>                                            │
│<input type="submit" value="選択" onclick="this.form.id.value='1';"/>       │
│<input type="submit" value="選択" onclick="this.form.id.value='2';"/>       │
│<input type="submit" value="選択" onclick="this.form.id.value='3';"/>       │
│</form>                                                                     │
└──────────────────────────────────────┘
これなら、「$_POST['id']」で一発で受け取ることができる。
分類:JavaScript
HTML/formで送信されるもの
2011年10月04日
form内において、submit時に(キーと値が)送信される項目は以下の通り。
┌──────────────────────────────────────┐
│<input type="submit"   name="キー" value="値"/>                             │
├──────────────────────────────────────┤
│<input type="hidden"   name="キー" value="値"/>                             │
├──────────────────────────────────────┤
│<input type="text      name="キー" value="値"/>                             │
├──────────────────────────────────────┤
│<input type="password" name="キー" value="値"/>                             │
├──────────────────────────────────────┤
│<input type="checkbox" name="キー" value="値" checked="checked"/>         *1│
├──────────────────────────────────────┤
│<input type="radio     name="キー" value="値" checked="checked"/>         *1│
├──────────────────────────────────────┤
│<select name="キー">                                                      *1│
│  <option value="値" selected="selected"></option>                          │
│</select>                                                                   │
├──────────────────────────────────────┤
│<textarea name="キー">値</textarea>                                         │
├──────────────────────────────────────┤
│<input type="file" name="キー"/>                                          *2│
└──────────────────────────────────────┘
  *1:checkbox、radio、selectは選択されている項目のみ送信される。
  *2:値はアップロードされるファイルにあたり、
      「<form method="post" … enctype="multipart/form-data">」みたいに
      「enctype」の指定が必須です

以下はinputタグとはいえ、(キーと値が)送信されない。
┌──────────────────────────────────────┐
│<input type="button"  name="キー" value="値"/>                              │
├──────────────────────────────────────┤
│<input type="image"   name="キー" value="値" src="画像ファイル"/>           │
├──────────────────────────────────────┤
│<input type="reset"   name="キー"/>                                         │
└──────────────────────────────────────┘

ちなみに、以下のようにsubmitボタン的にしてみても、(キーと値は)送信されない。
┌──────────────────────────────────────┐
│<input type="button" name="キー" value="値" onclick="this.form.submit()"/>  │
└──────────────────────────────────────┘
checkboxとかが選択したもののみ送信されるのだから、
buttonも押されたもののみが送信されるのかと思ったのだが違うみたい。
(もしかして方法が違うのかも)
分類:JavaScript
JavaScript/POSTメソッドとGETメソッドをネストする方法
2011年09月28日
ということで前回(JavaScript/POSTメソッドとGETメソッドを切り替える方法)からの
続き(「怪獣殿下」を彷彿とさせる初の二話構成です)。

今度は、POSTメソッドの中にGETメソッドを入れる方法(をより真剣に検討)。
┌──────────────────────────────────────┐
│<form method="post" action="xxxx.php">                                      │
│  <input type="button" value="GET実行" onclick="submit2()"/>                │
│  <input type="submit" value="POST実行"/>                                   │
│</form>                                                                     │
└──────────────────────────────────────┘
までは(ほぼ)一緒です
#あ、実はsubmit2()の引数が(使わないから)こっそりなくなってる。

さて、JavaScriptの中ですが、こんな感じでどうでしょうか。
┌──────────────────────────────────────┐
│<script type="text/javascript">                                             │
│function submit2() {                                                        │
│  // 念のためこれから作るformを削除しておく(ある時だけ)                     │
│  var oldForm = document.getElementById("newForm");                         │
│  if (oldForm) {                                                            │
│    oldForm.parentNode.removeChild(oldForm);                                │
│  }                                                                         │
│  // 新規formの設定                                                         │
│  var newForm = document.createElement("form");                             │
│  newForm.setAttribute("method", "get");                                    │
│  newForm.setAttribute("action", "oooo.php");                               │
│  newForm.setAttribute("id"    , "newForm");                                │
│  newForm.style.display="none";                                             │
│  // 新規属性の設定  ※いくつでも設定可能(このブロックを繰り返す)           │
│  var newInput = document.createElement("input");                           │
│  newInput.setAttribute("name" ,name属性名);                                │
│  newInput.setAttribute("value",値);                                        │
│  newForm.appendChild(newInput);                                            │
│  // 新規formの作成とsubmit                                                 │
│  document.getElementsByTagName("body")[0].appendChild(newForm);            │
│  newForm.submit();                                                         │
│}                                                                           │
│</script>                                                                   │
└──────────────────────────────────────┘
ま、JavaScriptの中でformの世界を創ってあげる(でsubmitする)感じですね。
これなら、submitボタン(にあたるもの)がどこにあっても文句をいわれません。
ただし、formの中に定義している各属性は(そのままでは)連れてこれないので
ひとつひとつ「setAttribute()」と「appendChild()」で
(ひっぱってきては)作り直してあげる感じでしょうか。
ひっぱってくる部分は、「getElementById(ID).value」とかでできます。

GETメソッドだったら、URIを作ってしまった方がはやいという話もありますね。
ま、これだとPOSTメソッドへの流用も可能です。
分類:JavaScript
前へ 1 2 3 4 5 6 7 8 9 次へ