NUブログ 自作Webアプリで一発当てたいプログラマ
JavaScript
ワンライナー†
ラジオボタンの値を取得する†
変数名が foo で、チェックされている要素の値を取得します。
※prototype.jsが読み込まれていることを前提としています。
$A(document.getElementsByName('foo')).find(function(e){return(e.checked)}).value
jQeuryならこう
$('input:checked[name=foo]').val()
Javascriptライブラリ †
prototype.js †
JavaScript のさまざまなオブジェクトを拡張し、クロスブラウザ対応を図っています。
また、prototype.js によって定義された Class オブジェクトによって
JavaScript にクラスの概念を取り入れています。
それ以外にも、$ という名前の便利なオブジェクトが用意されています。
document.getElementById('id');という長ったらしい関数を以下のように置き換えることが出来ます。
document.getElementById('id');
↓
$('id');
他、Ajax 対応など、さまざまな機能は以下を参照してください。
日本語リファレンス
http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html
本家
http://www.prototypejs.org/
jQuery †
prototype.js とは違い、ほぼ全ての機能を $ に凝縮したライブラリで、こちらもクロスブラウザ対応しています。
DOM の id 属性以外にも、タグ名、css クラス名など、XPath のように記述することで指定した要素をまとめて取得し、まとめて処理することが出来ます。
jQuery は標準でアニメーションさせるメソッドも定義されていて、以下のように記述することで、対象となるタグを全て滑らかに閉じることが出来ます。
$('div.target').hide('slow');
これは、全ての <div class="target"></div> というタグを滑らかに閉じます。
$ オブジェクトのメソッドのほとんどは jQuery オブジェクトを返すので、たいていは上記にように続けて書くことが出来ます。
他、Ajax 対応など、さまざまな機能は以下を参照してください。
日本語リファレンス
http://www.mikage.to/jquery/
本家
http://jquery.com/
jQuery と prototype.js の共存方法 †
$j で jQueryオブジェクトを使用したい場合。
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// Use jQuery via $j(...)
$j(document).ready(function(){
$j("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').style.display = 'none';
</script>
</head>
<body></body>
</html>
jQueryは読み込み時に $ オブジェクトが存在していたら _$ に置き換えて保持します。
jQuery.noConflict() を実行することで、 _$ を $ に戻し、jQuery オブジェクトを返します。
返ってきた jQuery オブジェクトを好きな変数名に割り当てることで共存することができます。
IE で動的に生成した canvas タグに線を描画する †
FirefoxやOperaには canvas タグがサポートされていて、javascriptで描画することが出来る。
参考
canvasタグ リファレンス：http://www.openspc2.org/HTML/appendix/canvas_param/
IEでは canvas タグはサポートされていませんが、google先生が不完全ながらも IE で canvas を使用できるライブラリを提供してくれています。
http://excanvas.sourceforge.net/
使い方は以下をヘッダの中に書くだけ。
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
ただし！困ったことに、上記のライブラリは最初の読み込み時にソースに記述された canvas タグを初期化するだけで、javascriptで動的に生成した canvas タグは初期化してくれません。
なので、 canvas タグを生成する度に初期化してあげなければいけません。
G_vmlCanvasManager.initElement() に引数としてcanvasエレメントを渡して実行します。
// ■1.canvas タグを生成して body の要素として追加する
var canvas = document.createElement('canvas');
canvas.setAttribute('id', 'canvas_id');
canvas.setAttribute('width', 100);
canvas.setAttribute('height', 100);
document.getElementsByTagName('body')[0].append(canvas);
// ■2.IE の場合のみ初期化（ブラウザ判定は jQuery を使用しています）
if (jQuery.browser.msie) {
G_vmlCanvasManager.initElement(document.getElementById('canvas_id'));
}
この後に描画メソッドを実行することで IE でも canvas を JavaScript で生成して描画できました。
IMEの漢字変換中のキーイベントの発生について †
IEとFirefoxで挙動が違うようです。イベントが発生するタイミングをまとめてみました。
IEの場合
| タイミング | onkeydown | onkeyup |
|---|---|---|
| 漢字変換の最初の文字入力時 | ○ | ○ |
| 漢字変換の2文字目以降の文字入力時 | ○ | ○ |
| 漢字変換の候補選択時 | ○ | ○ |
| 漢字変換決定時 | ○ | ○ |
Firefoxの場合
| タイミング | onkeydown | onkeyup |
|---|---|---|
| 漢字変換の最初の文字入力時 | ○ | × |
| 漢字変換の2文字目以降の文字入力時 | × | × |
| 漢字変換の候補選択時 | × | × |
| 漢字変換決定時 | × | ○ |
テキスト入力時のサジェスト（自動で候補を表示する）のような機能の作成時には注意が必要です。
