JavaScript - Webブラウザのオブジェクト(フォーム)

開発環境

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

独習JavaScript 高橋 和也 (著), 竹添 直樹 (著), 里見 知宏 (著) の第8章(Webブラウザのオブジェクト)8.9(フォーム)練習問題を解いてみる。

その他参考書籍

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

1.

HTML(TextWrangler)

<form name="form" id="form">
  <input type="text" name="name" id="name" />
</form>
<input type="button" value="run" onclick="f1()"/>
<input type="button" value="run" onclick="f2()"/>
<input type="button" value="clear" onclick="
  var text = this.nextSibling;
  if(text.innerText){
    text.innerText = '';
  } else {
    text.textContent = '';
  }"/><pre id='pre0'></pre>
<script>
  function f1(){
    var result = $('#name').val();
    $('#pre0').html(result);
  }
  function f2(){
    var result = document.form.name.value;
    $('#pre0').html(result);
  }
</script>

2.

HTML(TextWrangler)

<form name="form1">
  <input type="checkbox" name="lang" value="Java" />Java
  <input type="checkbox" name="lang" value="JavaScript" />JavaScript
  <input type="checkbox" name="lang" value="PHP" />PHP
  <input type="checkbox" name="lang" value="Perl" />Perl
</form>
<input type="button" value="run" onclick="check_all()"/>
<input type="button" value="clear" onclick="clear_all()"/>
<script>
function check_all(){
  for(var i = 0 ; document.form1.lang ; i++){
    document.form1.lang[i].checked = true;
  }
}
function clear_all(){
  for(var i = 0 ; document.form1.lang ; i++){
    document.form1.lang[i].checked = false;
  }
}
</script>

Java JavaScript PHP Perl

3.

defaultValue

フォームの初期値

disabled

フィールドの無効、有効設定

readOnly

読み取り専用、編集可能設定