古くからaタグでは多くのイベントが使えました。よく使われるイベントとしてはonclick、onmouseover、onmouseoutがあります。これらのイベントはaタグの中に記述されるのが現在でも一般的です。これは古いブラウザ/多くのブラウザで動作すること、そしてWeb作成ソフトでも、そのようにスクリプトを出力してしまうためです。ここでは手書きの場合での書き換え方法で説明します。 以下のサンプルは+をクリックするとdivタグ部分の表示、非表示が切り替わります。これはツリーメニューなどで使われる手法です。【サンプル1を実行】 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;chars
とりわけ、ECMAScript は以下のものを定義しています。 言語文法(構文解析のルール、キーワード、制御フロー、オブジェクトリテラルの初期化、…) エラー処理のメカニズム (throw、try/catch、ユーザー定義エラー型の作成機能) 型 (真偽値、数値、文字列、関数、オブジェクト、…) グローバルオブジェクト。ブラウザー環境では、このグローバルオブジェクトは window オブジェクトですが、ECMAScript ではブラウザーとは直接関係のない API のみが定義されています。例えば parseInt、parseFloat、decodeURI、encodeURI…… プロトタイプベースの継承メカニズム。その対象は次のもの: ビルトインオブジェクトと関数(JSON、Math、Array.prototype メソッド、オブジェクト内部確認メソッド……) Strict モード (ここ
さらら: あぁ、そうだったわね。 たけち: このインターフェイスでは、item(0)や今回はitem(1)というように、属性の順番で指定してたよね。でもこれだと、属性が増えたり順序がかわったりすると思ったような結果が得られないよね。そこで、属性の名前を指定してその値をとってくるインターフェイスを紹介するね。 さらら: なるほど、そう言われるとそういう方法が欲しいわね。 たけち: そうだね。じゃあ早速次に図で紹介するね。 さらら: 分かるわ。欲しい属性の名前を指定してgetAttributeNode()を呼ぶとその名前をもつ属性ノードがとってこれるのね。。。。あれ、でも、属性の値を取るにはそれからどうしたらいいのかしら・・・ たけち: あっ、IEの場合だと、そのノードについてvalueかnodeValueでとってこれるんだ。 さらら: あっ、そうなの。 たけち: たとえば、次のようにすればい
HTML+JavaScriptで、要素のイベントへの関数登録の方法は、主に以下の3つです。 1. 要素タグのなかに属性(onclick="〜"等)を直接記述する。 【例】 <button onclick="alert('!');">TEST</button> 2. 要素オブジェクトのプロパティへ関数を設定する。 【例】 <button id="test">TEST</button> <script> function func(){ alert("!"); } var elem = document.getElementById("test"); elem.onclick = func; </script> 3. 要素オブジェクトのaddEventListenerメソッドまたはattachEventメソッドを使用する。 【例】 <button id="test">TEST</button>
DOM の getAttribute / setAttribute メソッドは DOM Level 1 から定義されているメソッドで、MSDN Library によれば IE はバージョン 4 からサポートしています。しかし、IE での element.getAttribute(name) / element.setAttribute(name, value) というのは、基本的には JavaScript における element[name] / element[name] = value のシンタックスシュガーでしかありません。ですから、element.setAttribute("innerHTML", "foo") とすると、element の属性には何の変化もないが element の内容が書き換えられるという事態になります。 この (手抜き) 実装が原因で、getAttribute
CSSやHTML、そしてJavaScriptについてリファレンス的に扱ってみたいと思います。もちろん実践的なものも。 土曜日, 8, 19, 2006 ページ中のとあるタグの要素をJavaScriptで扱う場合、指定したタグ全てに対して操作を行う場合は、getElementByIdよりもgetElementsByTagNameの方が便利。 たとえば、ページ中のINPUTタグに入力された文字列を全て取り出す場合は、 ソースは、下のようになります。 <script type="text/javascript"> <!-- function getValue(){ var obj = document.getElementsByTagName('input'); var max = obj.length; var all = ""; for(var i = 0; i < max; i++){
近年,Ajaxの台頭をきっかけに,JavaScriptを使ったブラウザのリッチ・クライアント化が進んできました。現在では,ページの表示を変化させるだけであれば,ほとんどのことはJavaScriptのみで対処することが可能です。それを実現するのがDOMなのです。 第1回 DOMから始めるモダン・スクリプティングの世界へようこそ 第2回 ブラウザからHTMLはどう見えているかを理解しよう ~ドキュメントツリー~ 第3回 DOMスクリプティングのことはじめ(1) ~要素(タグ)を狙い撃ち~ 第4回 DOMスクリプティングのことはじめ(2) ~これはどんな要素?~ 第5回 DOMを使ってHTMLを自由自在に書き換える 第6回 イベントハンドラから脱却しよう 第7回 スクリプトを完全に分離しよう ~コンテンツ,プレゼンテーション,ビヘイビア~ 第8回 スクリプトのパッケージ化 ~使い回しできるスクリ
PHP、JavaScript、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説カスタマイズ性抜群の上級者向けタブブラウザ「Lunascape」 動作の重いFirefoxや、セキュリティホールの多いIEから乗り換えるなら・・・ 高機能かつ拡張性に富んだ『Lunascape』(ルナスケープ)がオススメです。 このブラウザは、驚くほど “ 動作が軽い ” のが魅力! Firefoxみたいにメモリを食いません(笑) IEのツールバープラグイン、Firefox、Netscapeの一部のプラグインに対応しているので、今まで使っていたプラグインごと乗り換えられます。 IEのお気に入りもブラウザのサイドバーに簡単に組み込めます。 また、RSSリーダー付ブラウザなので、RSSリーダーを使わずにブラウザ上でRSSの購読や管理ができます。 F
DOM は Document Object Model の略です。HTML や XML で記述された各要素を取り扱うための標準インタフェースとして1998年に W3C によって勧告されました。仕様のコアとなる部分は特定の言語には依存しない形式で定義され、追加として、JavaScript などの言語へのマッピングが紹介されています。IE の document.all による DHTML や Netscape 4.* のレイヤに代わる機能として、IE5.0、Netscape 6.0 が DOM をサポートしています。ここでは、DOM の主な機能のみを紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く