JavaScript

JavaScript / ECMAScriptについて。

Webアプリケーションでは,基本的にサーバでページを生成するが,JavaScriptをうまく活用すると,サーバへのアクセスを減らしつつ,利用者にとっての操作性を上げることができる。

再入門JavaScript: 言語編
JavaScriptの文法、オブジェクト指向言語としての機能などを解説。
JavaScriptのオブジェクトシステム

テーブル

(2002.12.14)

table要素は,JavaScriptでは,HTMLTableElementオブジェクトとなる。HTMLTableElement#rowsプロパティは,行オブジェクトの集合であるHTMLCollectionオブジェクトを返す。このオブジェクトのitem()メソッドで行オブジェクトを取り出す。行は,HTMLTableRowElementオブジェクトとなる。

対象クラス
HTMLTableElement
HTMLTableRowElement
セルHTMLTableCellElement

値を得る

特定のセルの値を取り出すには,次のようにする。

<table id="hoge">
  <tr><td>cell 1<td>cell 2
</table>
function cell(id, x, y) {
  table = document.getElementById(id);
  row = table.rows.item(y);
  cell = row.cells.item(x);
  document.write("cell(" + x + ", " + y + ") is " + cell.firstChild.data);
}
cell('hoge', 1, 0);

行を追加する

利用者に何らかのデータを表形式で入力してもらうとき,最初に生成したフォームの表の行数では足りなくなることがある。余裕を持ってフォームを生成すればいいが,あまりにも行数が多いと結構間抜け。そこで,JavaScriptで行を追加する。

HTMLTableElement#insertRow()メソッドで行を追加し,HTMLTableRowElement#insertCell()メソッドでセルを追加する。

<table id="foo" border="1">
  <tr><td>1<td>2<td>3
  <tr><td>4<td>5<td>6
  <tr><td>7<td>8<td>9
</table>
function add_row(id) {
  table = document.getElementById(id);
  new_row = table.insertRow(table.rows.length);
  new_row.insertCell(0).appendChild(document.createTextNode('foo'));
  new_row.insertCell(1).appendChild(document.createTextNode('bar'));
  new_row.insertCell(2).appendChild(document.createTextNode('baz'));
}
add_row('foo');

メッセージボックス

(2002.12.2)

windowオブジェクトのalertメソッドを使う。

function a() {
  window.alert('メッセージボックス');
}

次のようにして呼び出す。

<button onclick="a()">メッセージボックス</button>

ツリー

(2002.12.2)

要素オブジェクトのstyleプロパティのdisplayプロパティを使う。このプロパティは,CSSのdisplayプロパティと対応しており,'block'や'none'を設定できる。

また,img要素オブジェクトのsrcプロパティを変更して,例えばフォルダアイコンを表示したりする。

function tree_toggle(id) {
  e = document.getElementById(id);
  i = document.getElementById(id + 'i');
  if (e.style.display == "none") {
    e.style.display = "block";
    i.src = "../images/tree_o.gif";
  }
  else {
    e.style.display = "none";
    i.src = "../images/tree_c.gif";
  }
}

初期状態は,次のように設定する。

aタグのhref属性でtree_toggle()を呼び出すようにする。tree_toggle()の引数として,クリックしたときに折り畳む要素のid属性値を指定する。初期状態で畳むときは,style属性として"display:none"を設定する。

人間がいちいちやっていると大変なので,サーバー側で自動的に生成するのが吉。

<img src="../images/tree_o.gif" id="t1i"> 
<a href="javascript:tree_toggle('t1')">parent</a>
<div id="t1" >
  <img src="../images/tree_c.gif" id="t2i"> 
  <a href="javascript:tree_toggle('t2')">child</a>
  <div id="t2" style="display:none">
    sub text
  </div>
</div>

documentオブジェクト(HTMLDocumentクラス)

(2002.4.28) この節を追加。

JavaScriptにクラスという概念はないが,一応,コンストラクタの名前をクラスと呼ぶ。

プロパティ

title
ページのタイトル。文字列であり,代入もできる。
fgColor
文字色。"#ffffff"という形式の文字列。この形式の文字列を代入すると,色が変わる。
bgColor
背景色。"#ffffff"という形式の文字列。この形式の文字列を代入すると,色が変わる。

メソッド

all(id_str)
要素オブジェクトを返す。IE専用。
getElementById(id_str)
要素オブジェクトを返す。Netscape / Mozilla専用。HTMLTableCellElementオブジェクト,HTMLInputElementオブジェクトなど。
createTextNode(str)
Textオブジェクトを生成する。

HTMLInputElementクラス

(2002.4.28) この節を追加。

input要素を表すクラス。

プロパティ

value
コントロール値(文字列)。代入可。

HTMLTableCellElementクラス

(2002.4.28) この節を追加。

td要素を表すクラス。

プロパティ

firstChild
最初の子要素オブジェクトを返す。例えばTextオブジェクト。

メソッド

removeChild(node)
子要素を取り除く。
appendChild(node)
子要素を追加する。

Textクラス

2002.4.28 この節を追加。
2002.12.15 更新

要素の内容としてのテキストを表すクラス。

プロパティ

data
文字列。代入可。
length
長さ。読み取り専用。

Textオブジェクトを生成するには,Document#createTextNode()を使う。

JavaScriptのWebブラウザ間の互換性

JavaScriptを書く場合,オブジェクトの互換性が気になる。で,ちょっと調べてみた。

結論は,全然別もんやん。

次のようなスクリプトを実行した。

<script>
function prop_out(obj) {
  document.write("<p>", obj, "<br>\n");
  for (prop in obj) {
    document.write(prop, " ");
  }
}
prop_out(window);
prop_out(navigator);
prop_out(document);
prop_out(history);
prop_out(location); // "[...]"ではなく,値が返る。
prop_out(document.forms);
prop_out(document.anchors);
prop_out(window.screen);
</script>

windowオブジェクト

Common:
closed defaultStatus document frames history length location name navigator opener parent screen self status top window
IE 5.5 only:
Image Option clientInformation clipboardData event external frameElement offscreenBuffering onafterprint onbeforeprint onbeforeunload onblur onerror onfocus onhelp onload onresize onscroll onunload screenLeft screenTop
Mozilla 0.9.5 only:
GetAttention addEventListener alert back blur captureEvents clearInterval clearTimeout close confirm content controllers crypto directories disableExternalCapture dispatchEvent dump enableExternalCapture escape find focus forward getComputedStyle getSelection home innerHeight innerWidth locationbar menubar moveBy moveTo open openDialog outerHeight outerWidth pageXOffset pageYOffset personalbar pkcs11 print printPreview prompt prop_out releaseEvents removeEventListener resizeBy resizeTo routeEvent screenX screenY scroll scrollBy scrollByLines scrollByPages scrollTo scrollX scrollY scrollbars setCursor setInterval setResizable setTimeout sidebar sizeToContent statusbar stop title toolbar unescape updateCommands

navigatorオブジェクト

Common:
appCodeName appName appVersion cookieEnabled mimeTypes platform plugins userAgent
IE 5.5 only:
appMinorVersion cpuClass onLine opsProfile systemLanguage userLanguage userProfile
Mozilla 0.9.5 only:
javaEnabled language oscpu preference product productSub securityPolicy taintEnabled vendor vendorSub

documentオブジェクト

Common:
URL alinkColor anchors applets bgColor body childNodes cookie dir documentElement domain embeds fgColor forms images lastModified linkColor links location plugins referrer styleSheets title vlinkColor
IE 5.5 only:
URLUnencoded activeElement all defaultCharset fileCreatedDate fileModifiedDate fileSize fileUpdatedDate frames media mimeType nameProp namespaces onafterupdate onbeforeeditfocus onbeforeupdate oncellchange onclick oncontextmenu oncontrolselect ondataavailable ondatasetchanged ondatasetcomplete ondblclick ondragstart onerrorupdate onhelp onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup onpropertychange onreadystatechange onrowenter onrowexit onrowsdelete onrowsinserted onselectionchange onselectstart onstop parentWindow protocol readyState scripts security selection
Mozilla 0.9.5 only:
ATTRIBUTE_NODE CDATA_SECTION_NODE COMMENT_NODE DOCUMENT_FRAGMENT_NODE DOCUMENT_NODE DOCUMENT_TYPE_NODE ELEMENT_NODE ENTITY_NODE ENTITY_REFERENCE_NODE NOTATION_NODE PROCESSING_INSTRUCTION_NODE TEXT_NODE addBinding addEventListener appendChild attributes captureEvents characterSet clear cloneNode close compatMode contentType createAttribute createAttributeNS createCDATASection createComment createDocumentFragment createElement createElementNS createEntityReference createEvent createNodeIterator createProcessingInstruction createRange createTextNode createTreeWalker defaultView dispatchEvent doctype firstChild getAnonymousElementByAttribute getAnonymousNodes getBindingParent getBoxObjectFor getElementById getElementsByName getElementsByTagName getElementsByTagNameNS getSelection hasAttributes hasChildNodes height implementation importNode insertBefore isSupported lastChild loadBindingDocument localName namespaceURI nextSibling nodeName nodeType nodeValue normalize open ownerDocument parentNode prefix previousSibling releaseEvents removeBinding removeChild removeEventListener replaceChild routeEvent setBoxObjectFor width write writeln

外部リンク