Posts Tagged ‘JavaScript’

このページの目次

ロード直後にラジオボタンを選択するjs(jQuery)

木曜日, 5月 27th, 2010

こんにちは、なかわけです。

タイトルのことをしようとすると以下のようなコードになると思います。

HTML

<input type="radio" name="sweets" value="1"/> チョコレート
<input type="radio" name="sweets" value="2"/> チョコラーテ
<input type="radio" name="sweets" value="3"/> ショコラ

Java Script

$(function(){
    //ラジオボタンにchangeイベントを結びつける
    $('input').change(function(){
        console.log('Buono!');
    });
    //ラジオボタンのひとつ目をクリック    
    $('input:first').click();
});

このままでもラジオボタンのひとつ目は選択されますが、
Buono!は出力されません。

これを以下のように変更するとBuono!も出力されてラジオボタンのひとつ目も選択されます。

Java Script

$(function(){
    //ラジオボタンにchangeイベントを結びつける
    $('input').change(function(){
        console.log('Buono!');
    });
    //ラジオボタンのひとつ目をクリック :ここを変更!   
    $('input').get(0).click();
});

はい、これで期待した挙動にはなりましたが、なぜでしょう?
なぜなぜ?
:firstとget(0)の挙動の違いなんでしょうけど、私にはわかりません・・・。
理由がわかる方コメントいただけると助かります。

Javascriptって2次元の連想配列できないの?

金曜日, 11月 6th, 2009

こんにちは、なかわけです。

今日仕事中にJavascriptにハメられたことをメモ。
メモしておけば同じ過ちをしないと思ったので。

2次元の連想配列が作りたくで以下のように書きました。

//TypeA
TypeA = {};
TypeA['hoge']['fuga'] = 'piyo';
alert(TypeA['hoge']['fuga']);

こうすると、alertはでないし、なかわけの環境ではスクリプトエラーも出ませんでした。
おかしいなあと思って、その時はとりあえず1次元の連想配列でやり過ごしました。

お家帰って思いつきました。
TypeA = {};
はObjectであっても、
TypeA['hoge']
はObjectではないのでfugaプロパティが追加できない(配列的に扱えない)!

てことで、以下

//TypeB
TypeB = {};
TypeB['hoge'] = {fuga : 'piyo'};
alert(TypeB['hoge']['fuga']);

のように書くか、もしくは

//typeC
TypeC = {};
TypeC['hoge'] = {};
TypeC['hoge']['fuga'] = 'piyo'
alert(TypeC['hoge']['fuga']);

のように書く必要があったのですね。
あーしょうもないことに時間費やした・・・。
でも、ここにメモしたので一生忘れない!

PHPでPOSTしつつページを移動する

木曜日, 7月 2nd, 2009

こんにちは、なかわけです。

今日はPHPの話。また仕事中にした作業のメモです。

AページからBページ(別サイト)にPOSTしたいのだけど、

  1. Aページの文字コードはUTF-8で、BページにはShift-JISでPOSTしなければいけない。
  2. またAページの文字コードをUTF-8からShift-JISに変更することができない。
  3. さらにBページのウィンドウをJavascriptで開かないといけないという環境でした。

エンジニアに相談したらcURLを使ったら?とアドバイスをもらったんだけど、cURLはPOST先のhtmlを取得することはできるんだけど、ページ自体を遷移(移動)することができなかったので、ボツでした。

考えた挙句、1ページはさんでそのページではJavascriptで自動的にFormをBページへPOSTするようにしました。つまり、

Aページ → A’ページ →Bページ

という流れです。A’ページの文字コードはShift-JISです。

具体的にはこんな感じでした。本当はもっと複雑な処理してますが、わかりやすく簡単にまとめます。

Aページ(UTF-8)

<form action="A'ページ" method="post" target="aDashPage">
    <input type="input" name="chocolate" value="ビターが好き" />
    <input type="submit" value="A'ページへ" onclick="window.open('', 'aDashPage')" />
</form>

送信ボタンのJavascriptではウィンドウ名を「aDashPage」とurlを指定しないで空白のページを開きます。そして、そのウィンドウに対してFormをPOSTするようにします。

A’ページ(Shift-JIS)

<script type="text/javascript">
    window.onload = function(){
        document.postForm.submit();
    }
</script>

<form action="Bページ" method="POST" name="postForm">
    <input type="hidden" name="chocolate" value="<?=mb_convert_encoding($_POST&#91;'chocolate'&#93;, 'SJIS', 'UTF-8')?>" />
</form>

A’ページではメンドクサイですけど、もう一度フォームを作っていますが、type=”hidden”にして表示しないようにしています。また、window.onloadでページの読み込みが完了したらFormをPOSTするようになっていますので、環境によりますが1秒くらいでBページに自動POSTされBページが表示されます。

PHPの言語仕様としてPOSTしてリダイレクトすることはできないようですね。なんかいろいろ問題あるみたい。調べてた記事がどこいったかわからなくなっちゃった・・・。

Javascriptのクロージャについて

火曜日, 6月 23rd, 2009

こんにちは、なかわけです。

仕事でプログラムをよく書くんですが、よく書くわりにあまり詳しくなくて困ります。

これではいかんと思って、毎回調べながら書いているわけですが、

よく見る書き方で「なんでこうやって書くんだろう」というものも多々あります。

今日はクロージャについて。

といってもなかわけがまとめるよりもっと頭のいいまとめのうまい人がいるので、

その方のページを貼っておきます。

■builder

http://builder.japan.zdnet.com/sp/javascript-kickstart-2007/story/0,3800083428,20378258,00.htm

とてもよくわかる解説です(変わった気がします、たぶん)。

最近、Javascriptでもオブジェクト指向っぽく書くことが多いので身につけておかないとな~。

IE6がgzip圧縮が使えない

木曜日, 12月 11th, 2008

こんにちは、なかわけです。

仕事中にphpで動的に生成したJavascriptやCSSがIE6でうまく動かない問題が起こりました。
動的に生成されたCSSの結果をコピペして静的ファイルして置き換えるとうまく動きました。

そのときは原因がわからなくてなんとなくごまかしてその場をしのぎましたがまた同じ問題に直面して今度こそはちゃんと原因を追究しないとなということでその場にいる仲間で調査しました。すると、以下のような記事を見つけました。

JSファイルが圧縮転送されてくると実行されないことがあった

参考:http://mz.skr.jp/note/2007/11/ie6-gzipped-javascript.html

IE6はgzip圧縮に対応しているようですが、どうやらその挙動は怪しいようです。
仲間と相談して圧縮しない設定にしたら、JSもCSSもちゃんと動作するようになりました。 

この不具合によってだいぶ時間を費やしました;;
またこの現象について調べてもあまり関連記事が見つかりませんでした。あまり知られてないのかな?
だとするとみんなに知ってほしいです。結構はまって時間浪費しますw 

 

IEでFlashオブジェクトをHTMLに直接記述すると表示される枠線

火曜日, 8月 5th, 2008

こんにちは、なかわけです。

今日も仕事中に話題になった話。

以前からIEでFlashオブジェクトをHTML内に直接コードを記述すると、そのFlashに枠線が表示されて「アクティブにするにはクリックしてください」というような警告でてました。

制作側ではこれが疎ましく感じている方が多く、FlashオブジェクトのコードをJavascriptで出力するような流れができていたと思います。なかわけやなかわけの仲間たちもそうでした。

しかし、今日なかわけの仲間が見つけた記事によると、その枠線とクリックしたらアクティブという仕様はなくなったそうです。

IEBlog
http://blogs.msdn.com/ie/archive/2008/04/08/ie-automatic-component-activation-now-available.aspx

公式のブログなのでウソではないらしく、実際にIE6でHTML内に直接コードを記述したFlashを表示しても枠線は出ませんでした。

数年前IEの枠線が表示されるようになったときには、少なくともウェブ制作側ではかなり話題になり大きな事件だったと思うですが、枠線がなくなった今はなんで誰もなにも言わないんでしょう。検索してもヒットしません。

なんでだろう。みんな気づいてないだけ?

Javascriptの不特定多数の引数を処理する関数の書き方

日曜日, 6月 1st, 2008

こんにちは、なかわけです。

最近、仕事でJavascriptを書くことが多いです。

で、そのときに引数が何個来るかわからない(呼び出す場所によって引数の個数が違う)関数の処理を書かないけなくて、どうすればいいのかわからなくてググったんですが、うまく検索にヒットしませんでした。

それでなんとなく思いついた方法でうまくいったので、自分用メモついでに紹介しておきます。

Javascriptの関数の部分

function hoge(args){
for(i=0; i<args.length; i++){
//処理したい内容
alert(args[i]);
}
}

Javascriptを呼び出す部分

<a href=”javascript:hoge(['foo', 'bar', 'baz']);”>アラートでます</a>

と、こんな感じでした。実際に動かしてみたサンプルです。


アラートでます

もし、この方法間違ってるとか正しい方法を知っている方がいらっしゃいましたら、コメントください。ぜひ。