word-breakに関して

今まで知らなかったんですが、JavaScript使わなくても大抵のブラウザで対応できるみたいです。

.word_wrap {
    word-wrap: break-word;
}

たったこれだけでいいの！？と思って確認してみると確かにいけました。
すごい！！

こちらの記事を参照しました。

画像をdivで括り高さや幅を指定し、aタグで括るとIEで画像部分をクリックしてもリンクしない

画像をdivで括って高さや幅を指定してからaタグで括るとIEではカーソルもpointerにならず、
画像をクリックしてもリンクしないという現象があった。
また互換モードだとspanタグも同様の現象が見られる。

例）リンク可能な記述


例）リンク不能な記述(imgタグをdivタグで括り、幅を指定した場合)

例）リンク不能な記述(imgタグをdivタグで括り、高さを指定した場合)

今のところの解決策は特に見つかってない。
Javascriptで対応するくらいしかないのか・・・。

cookieに関して

いつも忘れるのでメモ
cookieは異なるドメイン間での受け渡しはセキュリティの観点からできてはいけない。
document.cookieにドメインを設定する項目があるが、
実際にドメインを超えれるわけではない。
cookieの値をドメイン超えて受け渡すのであれば、
hiddenに入れてPOSTするとか、クエリにつけて送るとかしないと無理。
それを受け取って保存するとかという方法をとればできなくはない。
しかし、現在あるAPIに対してのアクセスなどの実際にそのドメインに遷移せずに、
処理を実行するような場合はできない。

window.onloadとdomready.js

domready.jsはDOM 読み込み完了のタイミングで、任意の関数を実行できるようにするJavaScriptライブラリ。
対応ブラウザは以下の通り

• IE 7 (XP standalone)
• IE 6 SP2
• Firefox 2.0.0.4
• Opera 9.21
• Safari 2.0.4
• Mac Firefox 2.0.0.4
• Mac IE 5.2.3

ただし、Mac IEではwindow.onloadを代用するように実装されている。

ajax系の処理をする場合は大体window.onloadイベントが発生するのを待って処理するようにしている。
ただ、window.onloadというのはDOMツリーの構築を待つだけじゃなく、すべての画像の読み込みも待ってしまう。
これではせっかくajaxを使っているのに、もったいない。

なのでJqueryを使うのであれば$(function(){})もしくは$(document).ready()を使う。
このほうが画像のロードとか待たなくていいので早い。

valueの書き換えに関して

Jqueryでinput textに入っている値をkeyupのイベントのタイミングで書き換えを行っていたら、
カーソルが強制的に文末に移動してしまうという現象があった。
発祥したブラウザはIE7のみ

コードは以下の通り。

$('input:text').bind('keyup', function(){
    var input_text = $(this).val();
    $(this).val( parseInt(input_text) );
})

どうもvalueを書き換えると、勝手にフォーカスを移動させるという
おせっかい仕様のせいらしい。

parseIntに関して

parseInt( number, 10 );

とやると10進数の数値型に直してくれるが、
以下のような数字を040から40にしたい場合にそのままparseIntすると問題があるので、
toStringしてから変換すること。

var a = 040;
var b = parseInt( a, 10 );
alert(b);

var a = 040;
var b = parseInt( a.toString(), 10 );
alert(b);

Jqueryのチェックボックス

$(':checkbox').val([1,2,3,4])

でcheckboxを一括で:checkedにできる。

select[multiple="multiple"]

でも同じようにできる。
指定された値以外の項目は

:not(:checked)

になる。

ってさ。
へー、速度が気になる所だけど、これ結構便利かも。

ajaxの通信時ステータスについて

XMLHttpRequest内にはreadyStateというプロパティがあり、
それは0～4でステータスが切り替わるたびに、この数字が切り替わる。

readyStateの詳細は以下の通り。
0 : open()は呼び出されていない。
1 : open()は呼び出されたが、send()は呼び出されてない。
2 : send()は呼び出されたが、サーバからのレスポンスはまだ返ってきてない。
3 : サーバからのデータを受信中。
4 : サーバからのレスポンスの受信が完了した。

readyState==3の時にはFirefoxとIEで挙動が変わる。
Firefoxに関しては通信中に何度もonreadystatechangeが呼ばれるが、
IEではステータスが切り替わったタイミングで1度だけ呼ばれる。

var request = HTTP.newRequest();
request.onreadystatechange = function(){
    if ( request.readyState == 4 ) {
        /* request complete */
    }
}

javascript 高速化

switch caseで文字列の比較ではなく、hashを用意して数値として比較したほうが早くなる。
但し文字列を、charAt() や charCodeAt() で数値化してから比較しようとすると関数呼び出しコストがかかる為、予想に反して遅くなる。

■参考URL
http://d.hatena.ne.jp/uupaa/20081029/1225223181

jqueryによる$.ajax通信の終了を取得するには

$.activeを使うと可能。
$.activeにはajaxの通信中の数が格納されており、
0になるタイミングで全ての処理が終わったことなる。

参考ページ
■http://hkom.blog1.fc2.com/blog-entry-648.html

■http://gihyo.jp/dev/feature/01/jquery/0012?page=3