JavaScript - Webブラウザのオブジェクト(クライアントサイドJavaScript)

開発環境

• OS X Lion - Apple(OS)
• Safari (Webプラウザ)
• TextWrangler(Text Editor) (BBEditの無料、light版)
• Script言語:JavaScript
• JavaScript Library: jQuery

独習JavaScript 高橋 和也 (著), 竹添 直樹 (著), 里見 知宏 (著) の第8章(Webブラウザのオブジェクト)8.1(クライアントサイドJavaScript)練習問題を解いてみる。

その他参考書籍

• JavaScript 第5版 David Flanagan (著), 村上 列 (翻訳)
• JavaScriptクイックリファレンス David Flanagan (著), 木下 哲也 (翻訳), 福龍興業 (翻訳)

1.

コード(TextWrangler)

<script type+text/javascript">
  $(document).ready(function(){
    $('#button').click(function(){
      var name = $('#name').val();
      alert('こんにちは、' + name + 'さん！');
    });
  });
</script>
<form name="form">
お名前をどうぞ: <input type="text" id="name" name="name">
<input type="button" id="button" name="button" value="ボタン" />
</form>

お名前をどうぞ:

2.

id属性によって取得するHTML要素がスクリプトの後にあるので取得できずにイベントリスナを登録できないという問題がある。

解決するには問1のように、

$(document).ready(function(){

}); // jQueryを使った場合
window.onload = function(){

} // jQuery無しの場合

とするか、スクリプトをHTML要素の後に記述すればいい。

3.

問題のコードでボタンをクリックすると、ダイアログにはクリックと表示される。

確認。

<input type="button" value="クリック" onclick="alert(this.value)"/>