スクリプトスマート：Quality JavaScript

またはその内部に直接コードがあった可能性があります：

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

これらのスニペットの違いについてはまだ心配しないでください。 JavaScriptをWebページに追加できる方法はかなりあります。この章の後半でこれらのアプローチを詳しく説明します。

javascriptはNetscapeによって開発され、Netscape 2に実装されましたが、もともとLivescriptと呼ばれていました。 JavaScriptがブラウザとJavaアプレット間で通信する能力を提供したため、別の言語の人気が高まっているJavaは、Netscapeに接続をキャッシュインしようとして名前を変更するように促しました。

しかし、Netscapeの元の形で、そして同様の違いのJScriptの実装において、Microsoftによって言語が開発されたため、Webスクリプトがベンダー競技のオオカミに任せるにはあまりにも重要であることが明らかになりました。そのため、1996年に開発はECMAと呼ばれる国際基準機関に引き渡され、JavaScriptはECMAScriptまたはECMA-262になりました。

ほとんどの人はまだそれをJavaScriptと呼んでおり、これは混乱の原因となる可能性があります。構文の名前と類似性は別として、JavaとJavaScriptは似ていません。

javascriptの制限

JavaScriptはクライアント側の言語として最も一般的に使用されます。この場合、「クライアント」は、JavaScriptが解釈および実行されるエンドユーザーのWebブラウザーを指します。これにより、サーバーで実行され、クライアントに静的データを送信するPHPやASPなどのサーバー側の言語と区別されます。

JavaScriptはサーバー環境にアクセスできないため、PHPで実行されたときは些細なことですが、JavaScriptでは実現できないタスクがたくさんあります。たとえば、データベースの読み書き、テキストファイルの作成です。しかし、JavaScriptはクライアント環境にアクセスできるため、マウスの位置や要素のレンダリングされたサイズなど、サーバー側の言語が単に持たないデータに基づいて決定を下すことができます。

activex？

はどうですか

MicrosoftのJScriptにすでに精通している場合は、「JavaScriptはActiveXを使用してこれらのことを実行できる」と考えているかもしれませんが、それは本当ですが、ActiveXはECMAScriptの一部ではありません。 ActiveXは、Internet ExplorerがCOM（Windows Scriptingテクノロジーの中心にあるコンポーネントオブジェクトモデル）にアクセスできるようにするためのWindows固有のメカニズムであり、通常、イントラネットなどの信頼できる環境でのみ実行されます。私たちが出会ういくつかの具体的な例外があります - IEで特別なセキュリティなしで実行されるActiveXコントロールの例（フラッシュプラグインやXMLHTTPRequestなど） - しかし、ほとんどの場合、ActiveXを使用したスクリプトはこの本の範囲外です。

通常、クライアントが実行されるコンピューターはサーバーほど強力ではないため、JavaScriptは大量のデータ処理を行うための最良のツールではありません。しかし、クライアントでのデータ処理の即時性により、このオプションは少量の処理に対して魅力的になります。これは、応答をすぐに受信できるためです。たとえば、フォーム検証により、クライアント側の処理の適切な候補になります。

しかし、サーバー側とクライアント側の言語を「より良い」という見解と比較することは誤っています。どちらも良いことではありません - 彼らは異なる仕事のためのツールであり、それらの間の機能的なクロスオーバーは小さいです。ただし、クライアントサイドとサーバーサイドのスクリプト間のインタラクションの増加により、XMLHTTPRequestなどのテクノロジーを使用してサーバーデータのリクエストを行い、サーバー側のスクリプトを実行し、クライアント側の結果を管理するテクノロジーを使用します。第18章でこれらのテクノロジーを詳細に検討し、JavaScriptを使用してWebアプリケーションを構築します。

セキュリティ制限

JavaScriptは非常に敏感なデータとプログラムの領域内で動作するため、その機能は悪意を持って使用できないことを保証するために制限されています。そのため、JavaScriptが単純に行うことは許可されていない多くのことがあります。たとえば、コンピューターからほとんどのシステム設定を読み取ったり、ハードウェアと直接対話したり、プログラムを実行したりすることはできません。 また、特定の要素に対して通常許可されるいくつかの特定の相互作用は、その要素のプロパティのために、JavaScript内では許可されていません。たとえば、フォームの値を変更します 通常、問題はありませんが、ファイル入力フィールド（例：）である場合、書き込みはまったく許可されていません。これは、悪意のあるスクリプトがユーザーが選択していないファイルをアップロードするのを防ぐ制限です。

同様のセキュリティ制限の例はかなりありますが、この本で説明するアプリケーションで発生すると、拡張されます。しかし、要約すると、JavaScriptの主要な制限とセキュリティの制限のリストを以下に示します。 JavaScriptはできません：

• ファイルを直接開いて読み取ります（特定の状況下で、第18章で詳述されているように、javascriptを使用してWebアプリケーションを構築します）。
ユーザーのコンピューターでファイルを作成または編集する（Cookieを除く、第8章で説明し、Cookieを使用しています）。
• httpの投稿データを読み取ります。
• システム設定、または言語またはホストオブジェクトを使用して利用できないユーザーのコンピューターからのその他のデータ（ホストオブジェクトは、言語自体ではなく環境で提供されるウィンドウや画面などのものです。）
ファイル入力フィールドの値を変更します。
別のドメインからロードされたドキュメントの表示を変更します。
• スクリプトで開かれていないウィンドウのツールバーやその他の要素を閉じたり変更したりします（つまり、メインブラウザウィンドウ）。
• 最終的に、JavaScriptはまったくサポートされない可能性があります また、多くのブラウザには、JavaScriptを単に有効化または無効にするよりも正確なオプションが含まれていることを念頭に置く価値があります。たとえば、Operaには、窓の閉鎖、窓の移動、ステータスバーへの書き込み、右クリックの受信からスクリプトを許可するオプションが含まれています。リストは続きます。これを回避するためにできることはほとんどありませんが、ほとんどの場合、そのようなオプションは「迷惑な」スクリプト（ステータスバースクロラー、右クリックのないスクリプトなど）を抑制するために進化しました。
javascriptのベストプラクティス
javaScriptのベストプラクティスブラウザがスクリプトをサポートしていない人、スクリプトをオフにしていない人、または別の理由でスクリプトと対話できない人のために何をすべきかという問題を強く重視しています（たとえば、ユーザーはスクリプトをサポートしない支援テクノロジーを使用します）。

最終的な問題を対処するのが最も難しいことであり、第16章のJavaScriptとアクセシビリティのこの問題の解決策に焦点を当てます。このセクションでは、良いJavaScriptの3つのコア原則を見てみたいと思います。

プログレッシブエンハンスメント - javaScriptを持っていないユーザーに提供

控えめなスクリプト - 動作からコンテンツを分離

一貫したコーディングプラクティス - ブレースとセミコロンターミネーターを使用

最初の原則は、サイトでスクリプトを使用するたびに、より大きな画像について考えていることを保証します。 2番目のポイントは、私たちの側でメンテナンスを容易にし、ユーザーにとってより良い使いやすさと優雅な劣化

を

にします。 （優雅な劣化とは、JavaScriptがサポートされていない場合、ブラウザが自然にスクリプト化されていない機能に自然に戻るか、「劣化」することを意味します。） JavaScriptを持っていないユーザー（プログレッシブエンハンスメント）
• を提供する
• ユーザーがJavaScriptを持っていないかもしれない理由はいくつかあります：
• • 彼らは、スクリプトをまったくサポートしていない、または限られた方法でそれをサポートするデバイスを使用しています。
  彼らはjavascriptを除去するプロキシサーバーまたはファイアウォールの背後にいます。
  JavaScriptが意図的にオフになっています。
  最初のポイントは、PDASなどの小画面デバイス、WEBTVやSony PSPなどの中画面デバイス、およびオペラ5やNetscape 4.

  などのレガシーJavaScriptブラウザーなど、驚くほど大きくて増え続けるデバイスをカバーしています。 上記のリストの最後のポイントは、間違いなく最も可能性が低いです（悪魔の支持者を演じる他の開発者とは別に！）が、その理由はそれほど重要ではありません。一部のユーザーは単にJavaScriptを持っていないので、それらに対応する必要があります。サーバーからのJavaScriptサポートを検出することは信頼できないことで有名ですが、JavaScriptが5％から20％の間で切り替えたユーザーの割合を「ユーザー」と説明するかどうかに応じて、私が見た数値を使用するため、このカテゴリに分類されるユーザーの数を定量化する方法はありません。

  solution

  この問題に対する長年のアプローチは、HTML Noscript要素を使用することです。その内容は、スクリプト要素をまったくサポートしないブラウザによってレンダリングされ、それをサポートしているがスクリプトがオフになっているブラウザです。 それは健全なアイデアですが、実際には、このソリューションは時間の経過とともに有用ではなくなりました。制限されたJavaScriptサポートを提供するブラウザは複雑なスクリプトを実行することはできませんが、そのようなデバイスはスクリプト利用可能なブラウザであるため、NoScript要素も解析しません。これらのブラウザは何もなくなります

  この問題に対するより良いアプローチは、静的HTMLから始めてから、スクリプトを使用してその静的コンテンツ内に動的な動作を変更または追加することです。

  簡単な例を見てみましょう。 DHTMLメニューを作成するための好ましい手法は、メインメニュー構造として順序付けられていないリストを使用します。第15章、DHTMLメニュー、およびナビゲーションの全体をこの主題に捧げますが、この短い例は次のポイントを示しています。

  リンクのリストは単純なHTMLであるため、スクリプトが有効になっているかどうかにかかわらず、すべてのユーザーに存在します。スクリプトがサポートされている場合、menu.jsスクリプトは動的な動作を適用できますが、スクリプトがサポートされていない場合、コンテンツがまだ表示されます。デバイスを明示的に区別していません。ブラウザが処理できる場合は動的なコンテンツを提供し、そうでない場合は静的なコンテンツを提供しました。

  ディスカッション

  このシナリオに対する「伝統的な」アプローチは、純粋なJavaScriptで個別のダイナミックメニューを生成し、NoScript要素内にフォールバック静的コンテンツを持つことです。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

しかし、私たちがすでに見たように、JavaScriptのサポートはもはや全面的または無効な提案ではないため、このネットでは幅広いデバイスが落ちるでしょう。上記のアプローチは、すべてのデバイスにデフォルトのコンテンツを提供し、それが機能する場合にのみスクリプト化された機能を適用します。 このスクリプトアプローチは、一般的に

Progressive Enhancement

と呼ばれています。これは、この本全体で使用する方法論です。 尋ねないでください！

この手法もnoscript要素も、「JavaScriptをオンにして続行してください」と読み取るメッセージを追加するために使用する必要はありません。せいぜい、そのようなメッセージは想定されています（「なぜ私はすべきですか？」）;最悪の場合、それは役に立たない（「私はできない！」）または意味がない（「JavaScriptとは？」）。 「ブラウザをアップグレードしてください」と言うスプラッシュページと同じように、これらのメッセージは、「別の車を使用してください」と書かれているロードサインと同じように、平均的なWebユーザーにとって有用です。

時折、あなたは、JavaScriptなしで同等の機能を単純に提供できない状況に直面するかもしれません。そのような場合、この非互換性をユーザーに通知する静的なメッセージを持っていても大丈夫だと思います（もちろん、技術的な用語では）。しかし、ほとんどの場合、文字通り唯一の方法でない限り、この種のメッセージを提供することを避けるようにしてください。 動作からコンテンツを分離する（目立たないスクリプト）

コンテンツを動作から分離するということは、Webページの構造のさまざまな側面を維持することを意味します。 Jeffrey Zeldmanは、これをWeb開発の「3本足のスツール」（Zeldman、J。Web Standards。新しいライダー、2003年のデザイン）と有名に言及しています。コンテンツ（HTML）、プレゼンテーション（CSS）、および行動（JavaScript）を含む - それは、それぞれの側面からの違いだけでなく、それぞれの違いを強調するだけでなく、適切な分離は、メンテナンスが容易で、よりアクセスしやすく、古いまたは低いスペックのブラウザでよく劣化するサイトに適しています。 solution

コンテンツを動作から分離する理想に直接反対する1つの極端な場合、属性イベントハンドラー内に直接インラインコードを書くことができます。これは非常に乱雑であり、一般的に避ける必要があります：

作業を行うコードを取得し、それを関数に抽象化することで状況を改善できます：

私たちのために作業を行うための関数を定義することで、私たちのコードのほとんどを別のJavaScriptファイルに提供することができます：

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

しかし、はるかに優れたアプローチは、インラインイベントハンドラーを完全に使用しないようにすることです。代わりに、ドキュメントオブジェクトモデル（DOM）を使用して、イベントハンドラーをHTMLドキュメントの要素にバインドできます。 DOMは、JavaScriptのような言語がHTMLドキュメントのコンテンツにアクセスできる標準のプログラミングインターフェイスであり、JavaScriptコードがHTMLドキュメント自体に表示される必要性を削除します。この例では、HTMLコードは次のようになります。

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

使用するスクリプトは次のとおりです

このアプローチにより、HTMLを編集せずにイベントハンドラーを追加、削除、または変更することができます。ドキュメント自体はスクリプトに依存していないか、まったく参照していないため、JavaScriptが影響を受けないブラウザはまったくありません。また、HTMLを編集することなく、必要に応じて他の要素に同じ機能をバインドできるため、このソリューションは再利用性の利点も提供します。 このソリューションは、DOMを介して要素にアクセスする能力にかかっています。これについては、第5章で詳細に説明し、ドキュメントオブジェクトモデルをナビゲートします。

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

分離の利点

コンテンツと動作の適切な分離を実践することにより、より滑らかな劣化という点で実際的な利益を得るだけでなく、分離の観点から考えることの利点も得られます。 HTMLとJavaScriptを組み合わせる代わりに、HTMLを組み合わせるのではなく、HTMLを見ると、そのコア関数は、スクリプトとは無関係にページのコンテンツを説明することを忘れる可能性が低くなります。

Andy ClarkeはWeb標準の些細なことを指します。これは便利な類似性であり、些細なことは良いWebサイトのように見えます。ボウルを見ると、デザートを構成するすべての別のレイヤーが見えます。これの反対はフルーツケーキかもしれません。ケーキを見ると、それぞれの異なる成分が何であるかを知ることはできません。あなたが見ることができるのはケーキの塊だけです。

ディスカッション

イベントハンドラーをこのような要素にバインドする場合、要素が実際に存在するまでそれを行うことはできないことに注意することが重要です。前のスクリプトをページのヘッドセクションにそのまま配置すると、コンテンツDIVがスクリプトが処理されるポイントでレンダリングされていないため、エラーを報告して機能しません。

最も直接的な解決策は、コードをロードイベントハンドラー内に配置することです。ドキュメントが完全にレンダリングされるまでロードイベントが発生しないため、常に安全になります。

もう少しタイピングで、

またはより明確に：

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

ロードイベントハンドラーの問題は、ページ上に1つのスクリプトのみが使用できることです。 2つ以上のスクリプトがイベントハンドラーの読み込みをインストールしようとする場合、各スクリプトはその前に来たもののハンドラーをオーバーライドします。この問題の解決策は、より近代的な方法で負荷イベントに応答することです。これをまもなく見て、「同じページで複数のスクリプトを取得する」というセクションで説明します。 ブレースとセミコロンを使用して

（一貫したコーディングプラクティス）

多くのJavaScript操作では、ブレースとセミコロンがオプションであるため、それらが不可欠ではない場合にそれらを含めることに価値がありますか？

solution

ブレースとセミコロンはしばしばオプションですが、常にそれらを含める必要があります。これにより、コードが読みやすくなり、将来的には自分で読みやすくなり、スクリプトのコードを再利用および再編成する際の問題を回避するのに役立ちます（これは、オプションのセミコロンを必須にすることがよくあります）。 たとえば、

このコードは完全に有効です：

このコードは、Semicolon挿入と呼ばれるJavaScriptインタープリターのプロセスのおかげで有効です。通訳者が1つ以上のラインブレークで区切られた2つのコードフラグメントを見つけるたびに、それらのフラグメントが単一のラインにある場合、それらの間にセミコロンが存在するかのようにそれらを扱います。同様のメカニズムにより、通常、IF-ELSEステートメントで実行されるコードを囲むブレースは、存在していなくても構文から推測される場合があります。このプロセスは、あなたのために不足しているコード要素を追加する通訳者と考えてください。

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

これらのコード要素が常に必要であるとは限らない場合でも、一貫して使用すると、必要なときに使用することを覚えておくのが簡単で、結果のコードを読みやすくなります。

上記の例は、次のように書かれた方が良いでしょう：

このバージョンは、究極のコードの読みやすさを表します：

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

関数リテラルの使用

<div  <br>
    onmouseover="this.style.borderColor='red'" <br>
    onmouseout="this.style.borderColor='black'">

JavaScript言語の複雑さを経験すると、関数リテラルを使用して必要に応じて匿名関数を作成し、JavaScript変数とオブジェクトプロパティに割り当てることが一般的になります。これに関連して、関数定義の後にセミコロンが続き、変数割り当てを終了します。

var saysomathing = function（message） {  ...

};

ページにスクリプトを追加します

スクリプトがエキサイティングなことを始める前に、それをWebページにロードする必要があります。これを行うには2つのテクニックがありますが、そのうちの1つは他のテクニックよりも明らかに優れています。

solution

最初で最も直接的な手法は、以前に見たように、スクリプト要素内に直接コードを記述することです。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

この方法の問題は、レガシーとテキストのみのブラウザ（スクリプト要素をまったくサポートしていないブラウザ）が文字通りのテキストとしてレンダリングされる可能性があることです。 この問題を回避するより良い代替手段は、常にスクリプトを外部JavaScriptファイルに入れることです。これが次のようになります：

これにより、what-is-javascript.jsという名前の外部JavaScriptファイルがロードされます。ファイルには、そうでなければスクリプト要素の中に配置するコードを含める必要があります。

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

このメソッドを使用すると、スクリプト要素を理解していないブラウザはそれを無視してコンテンツをレンダリングしません（要素は空です）が、理解しているブラウザはスクリプトを読み込んで処理します。これにより、スクリプトとコンテンツを分離するのに役立ち、はるかに簡単に維持されます。複数のドキュメントでコードのコピーを維持することなく、複数のページで同じスクリプトを使用できます。

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

ディスカッション

スクリプト要素内で直接コードを使用しないという推奨事項に疑問を呈する場合があります。 「問題ありません」と言うかもしれません。 「HTMLのコメントをその周りに置くだけです。」まあ、私はそれに反対する必要があります：HTMLコメントを使用してコードを「非表示」することは、私たちが陥ることを避けるべき非常に悪い習慣です。 コードに関するHTMLコメントをパットする

検証パーサーはコメントを読む必要はなく、それらを処理するのにはるかに少なくなります。 JavaScriptがまったくコメントしたという事実は、時代錯誤です。これは、真実ではない文書について仮定する古い古い時代遅れの慣行への先祖返りです。それは、ページが非検証パーサーに提供されると仮定します。 この本のすべての例はHTML（XHTMLとは対照的に）で提供されているため、この仮定は合理的ですが、XHTMLを使用している場合（MIMEタイプのアプリケーション/XHTML XMLで正しく提供される場合）互換性（および個々のプロジェクトと同じくらい自分のコーディング習慣に関連する利点）を確保するために、このようにコードに関するコメントを避けることを強くお勧めします。 JavaScriptは常に外部JavaScriptファイルに収納する必要があります。

言語属性

言語属性は不要になりました。 Netscape 4とその同時代人が支配的なブラウザであった時代、<script>タグの言語属性は、アップレベルのサポートのためにスニッフィングの役割を持っていました（たとえば、JavaScript1.3を指定すること）<p>しかし、JavaScriptのバージョンを指定することは、JavaScriptがecMascriptであり、言語属性がタイプ属性を支持して廃止されたため、かなり意味がありません。この属性は、スクリプトやスタイルシートなどのファイルのMIMEタイプを指定し、使用する必要がある唯一のファイルです。 </script>

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

技術的には、値はテキスト/ecmascriptでなければなりませんが、インターネットエクスプローラーはそれを理解していません。個人的には、JavaScriptが（皮肉なことに）私がタイピングするのが非常に困難な言葉であるという理由だけで、私はそれができたら幸せになります。タイプ= "Text/Javsacript"を入力したためにスクリプトの故障が発生した回数の数を失いました。

同じページで複数のスクリプトを動作させる

複数のスクリプトが一緒に動作しない場合、それはほとんどの場合、スクリプトが特定の要素で同じイベントのイベントハンドラーを割り当てることを望んでいるためです。各要素には各イベントのハンドラーが1つしかないため、スクリプトは互いのイベントハンドラーをオーバーライドします。

solution

通常の容疑者は、このイベントを使用できるページ上のスクリプトのみが1つのスクリプトのみであるため、ウィンドウオブジェクトのロードイベントハンドラーです。 2つ以上のスクリプトがそれを使用している場合、最後のスクリプトはその前に来たものを無効にします。 このように、単一のロードハンドラー内から複数の関数を呼び出すことができます：

しかし、このコードを使用した場合、ロード時に必要なことをすべて行う必要があるコードの単一のコードに結び付けられます。より良いソリューションは、他のハンドラーと競合しないロードイベントハンドラーを追加する手段を提供します。

次の単一関数が呼び出されると、矛盾することなく、任意の数のロードイベントハンドラーを割り当てることができます。

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

この関数が設置されたら、いつでも使用できます。

アイデアが得られます！

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

ディスカッション

<div  <br>
    onmouseover="this.style.borderColor='red'" <br>
    onmouseout="this.style.borderColor='black'">

JavaScriptには、イベントリスナーを追加（および削除）する方法が含まれています。イベントハンドラーと同じように動作しますが、複数のリスナーが要素上の単一のイベントを購読することができます。残念ながら、イベントリスナーの構文は、Internet Explorerで他のブラウザーとはまったく異なります。IEは独自の方法を使用している場合、他の人はW3C標準を実装しています。この二分法に頻繁に出会います。第13章の基本的な動的HTMLで詳しく説明します。

W3C標準メソッドは、AddEventListener：

と呼ばれます

IEメソッドはAttachEventと呼ばれます：

ご覧のとおり、標準構造はイベントの名前（「オン」のプレフィックスなし）を取り、イベントが発生したときに呼び出される関数と、イベントの泡立ちを制御する引数（詳細については、第13章、基本的な動的HTMLを参照）。 IEメソッドは、イベント

Handler

名前（「

on

<div  <br>
    onmouseover="changeBorder('red')" <br>
    onmouseout="changeBorder('black')">

」のプレフィックスを含む）を使用し、その後に関数の名前が続きます。

これらをまとめるには、使用しようとする前に、各メソッドの存在を確認するためにいくつかのテストを追加する必要があります。これは、javaScriptオペレーターTypeOFを使用して行うことができます。これは、さまざまな種類のデータ（「string」、「number」、「boolean」、「object」、「array」、「function」、または "undefined"などを識別します。存在しないメソッドは「未定義」に戻ります。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

追加の複雑さが1つあります。オペラでは、複数のイベントリスナーをトリガーできるロードイベントが、ウィンドウではなく、ドキュメントオブジェクトから生まれます。ただし、古いMozillaブラウザ（Netscape 6など）では機能しないため、ドキュメントを使用することはできません。これらの癖を通るルートをプロットするには、window.addeventlistener、document.addeventlistener、window.attachevent、その順序でテストする必要があります。

最後に、これらのメソッド（Mac 5、実際にはMac 5）をサポートしていないブラウザーの場合、フォールバックソリューションは複数の古いスタイルのイベントハンドラーを一緒にチェーンすることで、イベントが発生したときに順番に呼び出されます。これは、イベントが発生したときに新しく割り当てられたハンドラーを呼び出す前に、既存のハンドラーを呼び出す新しいイベントハンドラーを動的に構築することで行います。 （このテクニックはサイモン・ウィリソンによって開拓されました。）

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

これがどのように機能するかの詳細を理解していなくても心配しないでください。第13章、基本的な動的HTMLの詳細に関連するテクニックを探求します。そこで、イベントリスナーは、ロードイベントだけでなく、あらゆる種類のイベント駆動型スクリプトに役立つことを学びます。 JavaScriptソースコードを隠している

あなたが誇りに思っているものを作成したことがあるなら、あなたはあなたの知的財産を保護したいという願望を理解するでしょう。しかし、Web上のJavaScriptは本質的にオープンソース言語です。ソースフォームのブラウザに届くため、ブラウザがそれを実行できる場合、人はそれを読むことができます。

ソースコードの暗号化を提供すると主張するいくつかのアプリケーションがWebにありますが、実際には、別のコーダーが数秒で解読できなかったソースコードを暗号化するためにできることは何もありません。実際、これらのプログラムのいくつかは実際に問題を引き起こします。多くの場合、コードを遅く、効率が低下し、単に壊れているような方法でコードを再フォーマットします。私のアドバイス？疫病のように彼らから離れてください。

しかし、それでも、コードを非表示にしたいという欲求は残っています。ユーザーが見ることができるコードを完全に暗号化しない場合、難読化するためにできることがあります。

solution

すべてのコメントや不必要な空白を剥奪されたコードを読むのは非常に困難であり、予想されるように、そのようなコードから個々の機能を抽出することは非常に困難です。この方法でスクリプトを圧縮する簡単な手法は、最も決定されたハッカーを除くすべてを締め出すことができます。たとえば、このコードを取ります：

不要な空白を削除するだけで、次の2つの行にそのコードを圧縮できます。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

ただし、その重要な言葉を覚えておいてください - 不要です。 varやtypeofの後の単一のスペースなど、一部の白文学は不可欠です。

ディスカッション

この実践には、難読化の利点とはまったく別の利点があります。コメントや不要な白文学が剥奪されたスクリプトは小さくなります。したがって、それらはより速いロードであり、より迅速に処理する可能性があります。

しかし、セミコロンラインターミネーターとブレースを使用してコードは厳密にフォーマットされたままでなければならないことを覚えておいてください（「ブレースとセミコロンの使用（一貫したコーディングプラクティス）」というセクションで説明したように）。それ以外の場合、ラインブレークを削除すると、コードのラインが一緒に実行され、最終的にエラーが発生します。

圧縮を開始する前に、スクリプトのコピーを作成することを忘れないでください。私はそれが明らかなように思えることを知っていますが、私はこの間違いを何度も犯しました、そしてそれはもっと小学校であることのためにさらに熱心です！私が最近行っているのは、完全に間隔を空けてコメントしたフォームにスクリプトを書き、維持し、公開される直前に多数の検索/交換式を実行することです。通常、私はmyscript.jsとmyscript-commented.jsという名前のスクリプトの2つのコピーを保持しています。

第20章でこのテーマに戻って、ペースを維持します。ここでは、スクリプトの速度と効率を改善するためのさまざまな手法の中で説明し、必要な物理的空間の量を減らすことができます。 スクリプトのデバッグ

デバッグは、バグを見つけて（できれば）修正プロセスです。ほとんどのブラウザには何らかのバグレポートが組み込まれており、いくつかの外部デバッガーも調査する価値があります。

ブラウザの組み込みエラーレポート

を理解します オペラ、モジラブラウザ（Firefoxなど）、およびインターネットエクスプローラーはすべて、まともなバグレポート機能を構築していますが、オペラとモジラのデバッグツールが最も便利です。

オペラ

ツール> Advanced> JavaScriptコンソールからJavaScriptコンソールを開きます。また、[ツール]> [設定]> [Advanced]> [コンテンツ]に移動してエラーが発生した場合に自動的に開くように設定し、[JavaScriptオプション]ボタンをクリックしてダイアログを開き、エラーでJavaScriptコンソールを開くことを確認することもできます。

Firefoxおよびその他のMozillaブラウザ

ツールからJavaScriptコンソールを開きます> JavaScriptコンソール Windowsのインターネットエクスプローラー
[インターネットオプション]> [詳細]に移動してオプションを無効にする[スクリプトのデバッグ]を無効にし、すべてのスクリプトエラーの通知を表示するオプションを確認して、エラーが発生するたびにダイアログをポップアップするようにします。

MACのインターネットエクスプローラー Explorer> Preferences> Web Browser> Webコンテンツに移動し、Show Scripting Error Alertsオプションを確認してください。

Safariにはデフォルトでバグレポートは含まれていませんが、最近のバージョンには、次の端末コマンドを入力することで有効にできるJavaScriptコンソールを含む「秘密」デバッグメニューがあります。 （$はコマンドプロンプトを表し、入力する必要はありません。）

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

Safari Enhancerと呼ばれる拡張機能を使用することもできます。これには、JavaScriptメッセージをMac OSコンソールにダンプするオプションが含まれています。ただし、これらのメッセージはあまり役に立ちません。

さまざまなブラウザのコンソールメッセージを理解することで、各ブラウザがこのような異なる情報を提供するため、少し練習することができます。エラーの例を次に示します - 誤った関数呼び出し：

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

Firefoxは簡潔ではあるが非常に正確なレポートを提供します。これには、エラーが発生した行番号が含まれ、図1.1に示すように、「FirefoxのJavaScriptエラーコンソール」。

図1.1。 firefox のJavaScriptエラーコンソール 図1.2のように、「オペラのJavaScriptコンソール」が示すように、オペラは、エラーが発生したイベントのバックトレース、発生したラインの通知、説明、

>

バックトレースは、他のコードによって最初に呼び出されたコードでエラーが発生したときに役立ちます。たとえば、イベントハンドラーが2番目の関数を呼び出す関数を呼び出す場合、この時点でエラーが発生します。 Operaのコンソールは、各段階を介してこのプロセスを元のイベントまたはコールまでトレースします。

Internet Explorerは、図1.3「WindowsのJavaScriptコンソール」に示すかなり基本的な種類のレポートを提供します。インタープリターがエラーに遭遇した行の数（実際の問​​題の真の位置に近い場合とそうでない場合があります）に加えて、エラータイプの要約を提供しますが、エラー自体の詳細は説明していません。 （Internet Explorerは、外部JavaScriptファイルのエラーを見つけるのが特に悪いです。多くの場合、エラーの場所が実際にはHTMLファイルにスクリプトがロードされる行の数であるために報告される行番号。）

図1.2。オペラのJavaScriptコンソール

図1.3。 WindowsのJavaScriptコンソールIE
あなたが収集したように、私はインターネットエクスプローラーのエラーレポートにあまり感銘を受けていませんが、それは何もないよりもはるかに優れています：少なくともあなたはエラーが発生したことを知っています。 アラートを使用して

アラート関数は、エラーを分析する非常に便利な手段です。スクリプトの任意のポイントで使用して、オブジェクトと変数をプローブして、期待データが含まれているかどうかを確認できます。たとえば、いくつかの条件付きブランチがある関数がある場合、各条件内にアラートを追加して、実行中のものを見つけることができます。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

多分、何年もの価値は、本来のように数として戻ってきていません。スクリプトの開始に、変数をテストして、どのタイプを確認するアラートを追加できます。

理論的には、アラートダイアログに任意の量の情報を配置できますが、非常に長いデータの文字列により、情報の一部が窓の外側または外側にクリップされるような広いダイアログを作成できます。これは、ラインブレイクのnなどのエスケープ文字で出力をフォーマットすることで回避できます。 try-catch

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

を使用して

Try-Catchコンストラクトは、「何かを試す」ためだけにスクリプトを取得するための非常に便利な方法であり、結果として生じる可能性のあるエラーを処理させます。基本的な構造は次のようになります：

エラーがどこから来たのかわからない場合は、非常に大きなコードブロックの周りにトライキャッチをラップして、一般的な障害をトラップしてから、そのブロック内のコードのコードのチャンクを徐々に締めます。たとえば、関数の前半（コードの便利なポイント）、そして後半頃にトライブブレースをラップして、エラーが発生する場所を確認できます。その後、容疑者の半分を便利なポイントで再び分割し、問題のあるラインを隔離するまで続けることができます。

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

しばしば、私はforin iteratorを使用してオブジェクト全体を実行し、それが言っていることを見つけます：

<div  <br>
    onmouseover="this.style.borderColor='red'" <br>
    onmouseout="this.style.borderColor='black'">

ページまたはウィンドウへの書き込み

デバッグ中に多くのデータを調べたり、複雑な方法でフォーマットされているデータを扱っている場合は、多くのアラートダイアログを扱うよりも、そのデータをページまたはポップアップウィンドウに直接記入する方が良いことがよくあります。特にループでデータを調べると、何百ものダイアログを生成することになります。それぞれが手動で却下する必要がありますか？非常に退屈なプロセス。

<div  <br>
    onmouseover="changeBorder('red')" <br>
    onmouseout="changeBorder('black')">

これらの種類の状況では、要素のInnerHTMLプロパティを使用してページにデータを書き込むことができます。アレイ（データ）の内容を使用してリストを作成し、テストdivに書き込みます。

データをポップアップに書き込むこともできます。これは、ページに置くのに便利な場所がない場合に便利です。

好きな出力をフォーマットし、それを使用してデータを構成して、エラーを見つけやすくすることができます。

少量のデータを使用している場合、メインタイトル要素にデータを書き込むことで同様の利点を得ることができます。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

この最終的なアプローチは、継続的または迅速に変化するデータを追跡する場合に最も役立ちます。たとえば、セットインテバル関数（第14章、時間と動きで適切に満たす非同期タイマー）によって処理される値などです。

外部デバッガーを使用

2つのデバッガーをお勧めします：

モジラとファイアフォックス

のための

venkman Windows Internet ExplorerのためのMicrosoft Script Debugger
• Microsoft Scriptデバッガー
外部デバッガーは、スクリプトを分析するためのはるかに詳細な方法であり、ブラウザー内のカウンターパートよりもはるかに大きな機能を備えています。外部のデバッガーは、特定のポイントでスクリプトの実行を停止したり、特定のプロパティを監視して、それらへの変更を知らされるようにするなどを行うことができますが、それが引き起こされる可能性があります。また、ラインごとに「ステップスルー」コードを可能にする機能も含まれています。

外部デバッガーは複雑なソフトウェアであり、開発者がそれらを適切に使用する方法を学ぶのに時間がかかる可能性があります。これらは、論理的エラーを強調するのに非常に役立ち、それ自体が学習ツールとして価値がありますが、ブラウザの互換性を助ける能力は限られています。あなたが探しているバグがデバッガーがサポートするブラウザにある場合にのみ役立ちます！厳密な警告

FirefoxでJavaScriptコンソールを開くと、エラーと警告を表示するオプションが含まれていることがわかります。警告は、それ自体が誤っているわけではないが、自動エラー処理に依存している、非推奨の構文を使用している、またはECMAScriptの仕様に虚偽であることに依存していることを警告に通知します。 （これらの警告を確認するには、javascript.options.strictをconfig and Setting intering int of to trueについてアドレスに入力することにより、厳格なレポートを有効にする必要がある場合があります。） たとえば、

可変フルーツは、以下のコードで2回定義されています。

VARは最初に変数を宣言するために使用されるため、2番目のVARを省略する必要があります。図1.4、「JavaScript警告コンソールFirefoxのコンソール」は、JavaScriptコンソールが警告としてエラーを強調する方法を示しています。

図1.4。 JavaScript警告コンソールはFirefox このような警告を引き起こす可能性のあるいくつかのコーディングミスステップがあります。たとえば、

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

• 変数を再配分する - これは、私たちが見たばかりのように、「var名の再区画」という警告を生成します。
• そもそも変数を宣言しなかった - この監視は、「宣言されていない変数名への割り当て」という警告を生成します。 これは、たとえば、コードの最初の行が単にfurt = 'mango';
を読む場合に発生する可能性があります。 オブジェクトの存在を仮定すると、この仮定は「未定義のプロパティ名への参照」という警告を生成します。
• たとえば、
if（document.getElementbyID）のようなテスト条件は、getelementByIDメソッドの存在を想定しており、JavaScriptの自動エラー処理機能が、この方法が存在しないブラウザでは存在しない方法を偽に変換するという事実について銀行を銀行にします。警告を表示せずに同じ目的を達成するために、if（typeof document.getElementbyId！= '未定'）を使用して、より具体的になります。

関数関連の警告や、私の個人的なお気に入りの「役に立たない表現」を含む他のさまざまな雑多な警告もあります。

このトピックに関する徹底的な概要については、JavaScriptの厳格な警告に取り組むAlex Vincentの記事をお勧めします。

警告は、スクリプトが機能するのを妨げないという意味では問題ではありませんが、警告を避けるために作業すると、より良いコーディングの練習を採用するのに役立ちます。たとえば、厳格な警告がない場合、Mozillaでスクリプトはより速く実行されます。これは、第20章でもう一度見て、ペースを維持します。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

型変換テスト

タイプ変換に依存して未定義の値をテストするべきではありませんが、nullがfalseと評価することが必要であるため、nullである可能性のある値に対してそうすることはまったく問題ありません。したがって、たとえば、getelementbyidの存在を既に確立しているため、上記のようにTypeofオペレーターを使用して、以下に示すように個々の要素をテストするのは完全に安全です。

要約 この章では、スクリプトへのベストプラクティスのアプローチについて説明しました。これにより、コードが読み取りと管理が容易になり、サポートされていないデバイスで優雅に分解できるようになります。また、この本のほぼすべてのソリューションに使用するユビキタスロードイベントリスナーなど、便利なスクリプトを構築するために必要なテクニックのいくつかを紹介し始めました！

すでにかなり高度なものを取り上げているので、それを取り入れるのが難しいかどうか心配しないでください。

第5章。ドキュメントオブジェクトモデルのナビゲート

ブラウザは、JavaScriptプログラムに、ドキュメントオブジェクトモデル（DOM）を介してWebページ上の要素にアクセスできるようにします。これは、ページのHTMLにある見出し、段落、リスト、スタイル、ID、クラス、およびその他すべてのデータの内部表現です。

domは、相互接続されたノードで構成されるツリーと考えることができます。 HTMLドキュメントの各タグは、ノードで表されます。そのタグ内にネストされているタグは、子供として接続されているノード、またはツリー内の枝です。これらの各ノードは、要素ノードと呼ばれます。 （厳密に言えば、各要素ノードは、要素の開始タグ（例：

および

） - または単一のセルフクロージングタグ（xhtmlの
）のペアを表します。他にもいくつかのタイプのノードがあります。最も便利なのは、ドキュメントノード、テキストノード、および属性ノードです。ドキュメントノードはドキュメント自体を表し、DOMツリーのルートです。テキストノードは、要素のタグ間に含まれるテキストを表します。属性ノードは、要素のオープニングタグ内で指定された属性を表します。この基本的なHTMLページ構造を考慮してください：

このページのDOMは、図5.1、「シンプルなHTMLページのDOM構造、ツリー階層として視覚化されています」として視覚化できます。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

すべてのページにはドキュメントノードがありますが、その子孫はドキュメント自体のコンテンツから派生しています。要素ノード、テキストノード、属性ノードを使用することにより、ページ上のすべての情報はjavascriptからアクセスできます。 ただし、DOMはHTMLとJavaScriptだけに限定されているわけではありません。 W3C DOM仕様サイトが問題を説明する方法は次のとおりです。

ドキュメントオブジェクトモデルは、プログラムとスクリプトがドキュメントのコンテンツ、構造、スタイルに動的にアクセスして更新できるようにするプラットフォームおよび言語中立のインターフェイスです。

したがって、JavaScriptとHTMLの混合は、DOMが利用されるテクノロジーの最も一般的な組み合わせであるにもかかわらず、この章から得られる知識をさまざまなプログラミング言語とドキュメントタイプに適用できます。

あなたが「あなたのドメインのマスター」にするために、この章では、あなたが探している要素をWebページで見つける方法を説明し、それを変更したり、再配置したり、それを完全に消去したりする方法について説明します。

図5.1。ツリー階層として視覚化された単純なHTMLページのDOM構造

要素へのアクセス

アクセスは制御を提供し、制御はパワーであり、あなたはパワープログラマーですよね？そのため、Webページにあるすべてのものにアクセスする必要があります。幸いなことに、JavaScriptは、いくつかの方法とプロパティを使用して、ページ上の任意の要素にアクセスできます。

solution

ロードマップのようにHTMLドキュメントをナビゲートすることは可能ですが、自宅から始めて目的地に向かって一度に1つのノードに向かって進むことはできますか？これは通常、多くのコードが必要であるため、要素を見つける非効率的な方法であり、ドキュメントの構造の変更は通常、スクリプトを書き直す必要があることを意味します。迅速かつ簡単に何かを見つけたい場合は、手の後ろに入れ墨する方法はdocument.getElementbyid。

>

正しいマークアップがあると仮定すると、GetElementByIDを使用すると、一意のID属性値で任意の要素にすぐにアクセスできます。たとえば、Webページにこのコードが含まれていることを想像してみてください：

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

A要素のID属性を使用して、要素自体に直接アクセスできるようになります。

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

変数elementRefの値は、A要素を参照します。要素で実行する操作は、その正確なハイパーリンクに影響します。

その名前からわかるように、getElementsByTagnameがタグ名を取得し、そのタイプのすべての要素を返します。このHTMLコードを持っていると仮定します：

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

そのようなハイパーリンクのそれぞれを含むコレクションを取得できます：

<div  <br>
    onmouseover="this.style.borderColor='red'" <br>
    onmouseout="this.style.borderColor='black'">

変数アンカーの値は、要素のコレクションになります。コレクションは、コレクション内の各アイテムが正方形のブラケット表記を使用して参照され、アイテムがゼロから数値的に開始されることを使用して参照されるという点で配列に似ています。 getElementsByTagnameによって返されたコレクションは、ソース順序で要素をソートするため、各リンクを参照できます。

このコレクションを使用すると、要素を繰り返して操作を実行できます。たとえば、要素ノードのクラス名プロパティを使用してクラスを割り当てるなど：

<div  <br>
    onmouseover="changeBorder('red')" <br>
    onmouseout="changeBorder('black')">

2つのリストがあるが、1つのリストのみのリンクに新しいクラスを割り当てる場合は、親リストにgetElementsByTagnameを呼び出すことで、これらの要素のみをターゲットにすることができます。

Example 1.1. separate-content-behaviors.js (excerpt) <br>
 <br>
function changeBorder(element, to) <br>
{ <br>
  element.style.borderColor = to; <br>
}

星のリストをターゲットにするには、親UL要素への参照を取得する必要があります。その後、直接getElementsByTagnameに電話してください。

<div >

変数Starsanchorsの値は、ページ上のすべての要素のコレクションの代わりに、星の内部の並べ替えられていないリストのコレクションになります。

dom 0コレクション

HTMLドキュメントの多くの「特別な」要素には、さらに直接的な手段でアクセスできます。ドキュメントのボディ要素には、document.bodyとしてアクセスできます。ドキュメント内のすべてのフォームのコレクションは、document.formsにあります。ドキュメント内のすべての画像は、document.imagesにあります。

実際、これらのコレクションのほとんどは、DOMがW3Cによって標準化される前から存在しており、一般的にDom 0プロパティと呼ばれます。

これらの機能の初期実装は標準化されていないため、これらのコレクションは、標準コンプライアンスに向かって移動しているブラウザで信頼できないことが証明されることがあります。たとえば、いくつかのMozillaブラウザ（Firefoxなど）の初期バージョンは、XHTMLドキュメントでこれらのコレクションをサポートしていませんでした。

今日のブラウザは通常、これらのコレクションをサポートするのに良い仕事をしています。ただし、問題が発生した場合は、関連する要素にアクセスするためのより冗長なgetelementsby bytagnameメソッドを試す価値があります。たとえば、document.bodyの代わりに：

を使用できます

var body = document.getElementsByTagname（ "body"）[0];

ディスカッション

要素ごとにDOM階層要素をステップスルーする必要がある場合、各ノードには関連ノードにアクセスできるいくつかのプロパティがあります。

node.childnodes - 要素とテキストノードの両方を含む、指定されたノードの各子供へのソースオーダーリファレンスを含むコレクション

node.firstchild - 指定されたノードの最初の子ノード

node.lastchild - 特定のノードの最後の子ノード

node.parentnode - 指定されたノードの親要素への参照
node.nextsibling - 指定されたノードと同じ親を持つドキュメントの次のノードnode.previoussibling - 指定されたノードと同じレベルにある以前の要素
これらのプロパティのいずれかが特定のノードに存在しない場合（たとえば、親の最後のノードには次の兄弟がありません）、それらはnullの値を持ちます。 この簡単なページをご覧ください：
• これらの式のいずれかを使用してID star2のリスト項目を参照できます。
• ホワイトスペースノード

一部のブラウザは、テキスト文字列（HTMLファイルなど）から解釈された任意のDOM構造の要素ノード間にホワイトスペースノードを作成します。 Whitespaceノードは、ソースファイルに記述された方法でコードをフォーマットするのに役立つ、Whitespace（タブ、スペース、新しい行）のみを含むテキストノードです。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

上記のプロパティを使用してノードごとにDOMノードを通過する場合、これらのホワイトスペースノードを常に許可する必要があります。通常、これは、取得したノードが要素ノードであることを確認することを意味します。

ノードが要素ノードであるかテキストノードかを確認する2つの簡単な方法があります。テキストノードのnodenameプロパティは常に「#text」になりますが、要素ノードのnodenameは要素タイプを識別します。ただし、テキストノードを要素ノードと区別する場合、nodeTypeプロパティを確認する方が簡単です。要素ノードには

nodeType 1がありますが、テキストノードのノデタイプは3です。この知識は、要素を取得するときにテストとして使用できます。

例5.9。 Access_Element4.js（抜粋）
 
var star2 = document.getElementById（ "star1"）。次へ。  
 
while（star2.nodetype == "3"）
{
 star2 = star2.nextsibling;  
}

これらのDOMプロパティを使用して、ルートHTML要素で旅を開始し、深くネストされたフィールドセットの伝説に埋もれることができますか？それはすべてノードに従うことの問題です。

要素とテキストノードの作成

JavaScriptは、DOM内の既存の要素を変更する機能だけではありません。また、新しい要素を作成し、ページの構造内に配置することもできます。

solution

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

変数のnewanchorは、ページに挿入する準備ができている新しい要素になります。

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

XML MIMEタイプ

のドキュメントで名前空間を指定します MIMEタイプのアプリケーション/XHTML XML（または他のXML MIMEタイプ）を使用してドキュメントで使用するためにJavaScriptをコーディングしている場合、CreateElementの代わりにメソッドCreateElementNSを使用して、要素を作成する名前空間を指定する必要があります：

この区別は、remofelement/remofelementnsやgetattribute/getattributensなど、多くのDOMメソッドに適用されます。ただし、この本では、これらのメソッドの名前空間強化バージョンを使用しません。

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

サイモン・ウィリソンは、彼のWebサイトでJavaScriptとさまざまなMIMEタイプを使用したことの簡単な説明を提供します。

要素内に入るテキストは、実際には要素の子テキストノードであるため、個別に作成する必要があります。テキストノードは要素ノードとは異なるため、独自の作成方法、createTextNode：

既存のテキストノードを変更している場合、Nodevalueプロパティを介して含まれるテキストにアクセスできます。これにより、テキストをテキストノード内に入手して設定できます。

変数の古いテキストの値は「モノセロ」になり、テキストノード内のテキストは「pyxis」になりました。

AppendChildメソッドを使用して、既存の要素の最後の子として要素ノードまたはテキストノードを挿入できます。この方法は、要素のすべての既存の子供の後に新しいノードを配置します。

このhtml：

の断片を考慮してください

<div  <br>
    onmouseover="this.style.borderColor='red'" <br>
    onmouseout="this.style.borderColor='black'">

DOMメソッドを使用して、段落の最後に別のリンクを作成および挿入できます。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

変数NewChildの値は、新しく挿入された要素への参照となります。

このコードがHTMLコードに実行された後にDOMの状態を翻訳する場合、次のようになります。

新しい要素の属性を指定していなかったため、現時点ではどこにもリンクしません。属性を指定するプロセスは、「要素の属性の読み取りと書き込み」と呼ばれるセクションでまもなく説明されています。

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

ディスカッション

新しい要素またはテキストノードをWebページに挿入できる3つの基本的な方法があります。使用するアプローチは、新しいノードを挿入したいポイントに依存します。要素の最後の子として、別のノードの前、またはノードの交換です。最後の子供のように要素を追加するプロセスを上で説明しました。親要素の挿入前方式を使用して既存のノードの前にノードを挿入し、親要素の交換方法を使用してノードを交換できます。 挿入前に使用するには、挿入するノードと挿入前のノードへの参照が必要です。このHTMLコードを考えてみましょう：

既存のリンクの前に新しいリンクを挿入することができます。その前にInsertBefore（段落）を呼び出すことができます。

変数NewChildの値は、新しく挿入された要素への参照となります。

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

この操作後にdomの状態をHTMLに翻訳する場合、次のようになります。

代わりに、

の代わりに、既存のリンクを完全に交換することができます。

<div  <br>
    onmouseover="this.style.borderColor='red'" <br>
    onmouseout="this.style.borderColor='black'">

domは次のようになります：

<div  <br>
    onmouseover="changeBorder('red')" <br>
    onmouseout="changeBorder('black')">

要素のタイプの変更

Example 1.1. separate-content-behaviors.js (excerpt) <br>
 <br>
function changeBorder(element, to) <br>
{ <br>
  element.style.borderColor = to; <br>
}

注文されたリストは少し注文されていませんか？あなたの見出しには段落がvy望していますか？少しJavaScriptの知識を使用して、子供の構造を保存しながら、要素のタイプを完全に変更することができます。

solution

<div >

要素のタイプを変更する簡単で簡単な方法はありません。この偉業を達成するには、少しジャグリング行為を行う必要があります。

この段落をdivに変更したいと仮定しましょう：

新しいdivを作成し、各段落の子供をそこに移動してから、古い要素に新しい要素を交換する必要があります。 ここでの唯一のなじみのない線は、段落の子供たちにクローンが作成されるポイントである必要があります。 CloneNodeメソッドは、呼び出されたノードの同一のコピーを生成します。この方法を渡すことにより、引数を真実にすることで、その要素のすべての子供を要素自体とともにコピーすることを望んでいることを示します。 CloneNodeを使用して、新しいDivの下で元の要素の子供をミラーリングしてから、コピーが終了したら段落を削除できます。

ノードのクローニングは状況によっては役立ちますが、この特定の問題にアプローチするよりクリーンな方法があることがわかります。既存の段落の子ノードを新しいDivに移動するだけです。 DOMノードは一度に1つの親要素にのみ属することができるため、DIVにノードを追加すると、段落から削除されます。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

domのノード構造の変更に注意してください

Collectionの要素は、変更が発生する前にそのコレクションを変数にコピーする場合でも、DOMで変更が発生するたびに自動的に更新されます。したがって、DOMから作業中のコレクションに含まれている要素を削除すると、要素の参照もコレクションから削除されます。これにより、コレクションの長さと、削除された要素の後に表示される要素のインデックスが変更されます。 ノードを新しい親要素に移動するなど、DOMのノード構造に影響する操作を実行する場合、反復プロセスに注意する必要があります。上記のコードは、段落の最初の子にのみアクセスする時間ループを使用します。子供が移転するたびに、子育てコレクションの長さが1つずつ減り、コレクション内のすべての要素がシフトします。 Aカウンター変数を持つループの場合、コレクションの内容がループ全体で同じままであると仮定するため、すべての子供を正しく処理しません。

ディスカッション

要素の属性を交換にコピーする簡単な方法はありません。 （DOM仕様を見ると、あるように見えます。残念ながら、関連するプロパティとメソッドに対するインターネットエクスプローラーのサポートはタスクに至らないだけです。）新しい要素を同じID、クラス、HREFなどにしたい場合、次の値をコピーする必要があります。

要素またはテキストノードの削除

要素がその有用性よりも長生きしたら、それにチョップを与える時が来ました。 JavaScriptを使用して、domからきれいに要素を削除できます。

solution

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

RemoveChildメソッドは、親から子ノードを削除し、削除されたオブジェクトへの参照を返します。

このHTML：

から始めましょう

RemoveChildを使用して、そのような親段落からハイパーリンクを削除できます。

変数removedChildはA要素への参照となりますが、その要素はDOMのどこにも配置されません。CreateElementを使用して作成したように、メモリで使用できるようになります。これにより、ページ上の別の位置に移動することができます。これは、スクリプトの最後に変数を消滅させるだけで、参照が完全に失われます - 効果的に削除されます。上記のコードに従って、DOMは次のようになります：

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

もちろん、RemoveChildから変数に返品値を割り当てる必要はありません。あなたはそれを実行するだけで、要素を完全に忘れることができます：

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

ディスカッション

削除している要素には、保存したい子供がいる場合（つまり、親を削除して「巻き戻す」ことをしたいだけです）、親が削除されたときにドキュメントにとどまることを確認するために、それらの子供を救助する必要があります。これは、既に調べられたinsertefeforeメソッドを使用して実現できます。これは、domに既に含まれている要素で使用すると、最初にそれらを削除し、適切なポイントに挿入します。

次のHTMLの段落には、複数の子供が含まれています

段落の子育てコレクションをループして、要素自体を削除する前に各子供を個別に移動できます。

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

ページのdomは次のようになります：

<div  <br>
    onmouseover="this.style.borderColor='red'" <br>
    onmouseout="this.style.borderColor='black'">

要素の属性を読み書きします

<div  <br>
    onmouseover="changeBorder('red')" <br>
    onmouseout="changeBorder('black')">

HTML要素の最も頻繁に使用される部分は、その属性ですか？そのID、クラス、HREF、タイトル、またはHTMLタグに含めることができる他の100個の情報のいずれかです。 JavaScriptは、これらの値を読むだけでなく、それらも書くことができます。

solution

要素の属性を読み書きするための2つの方法が存在します。 getattributeを使用すると、属性の値を読むことができますが、setattributeを使用すると書くことができます。 このHTMLを考えてみてください：

そうな要素の属性を読むことができます：

可変アンカーの値は「アンタレス」であり、可変anchortitleの値は「遠く離れた場所」になります。

ハイパーリンクの属性を変更するには、setAttributeを使用し、変更する属性の名前を渡し、それを変更する値を次のように渡します。

Example 1.1. separate-content-behaviors.js (excerpt) <br>
 <br>
function changeBorder(element, to) <br>
{ <br>
  element.style.borderColor = to; <br>
}

変数Newtitleの値は「それほど遠くない」になります。

<div >

ディスカッション

フリーローミングネットスケープの荒野から、現代​​のより緊密に定義された標準ベースの地形への旅で、Dom StandardはHTMLを扱うためのかなりの量の追加構文を取り上げました。これらのエクストラの中で最も広範なものの1つは、DOMプロパティとHTML属性の間のマッピングです。

ドキュメントがDOMフォームに解析されると、要素の属性に対して特別な属性ノードが作成されます。これらのノードは、その要素の「子供」としてアクセスできません。上記の2つの方法でのみアクセスできます。ただし、元のDOM実装への先祖返りとして（dom 0と呼ばれ、ゼロはこれらの機能が標準よりも前に来たことを示唆しています）、現在のDOM仕様にはHTMLに固有の追加の機能が含まれています。特に、属性は要素のプロパティとして直接アクセスできます。したがって、ハイパーリンクのHREF属性は、link.getAttribute（ "href"）およびlink.href。

を介してアクセスできます。

このショートカット構文は、よりクリーンで読みやすいだけでなく、状況によっては必要です。インターネットエクスプローラー6および以下のバージョンは、要素の視覚的な表示へのsetAttributeを介して行われた変更を伝播しません。したがって、setAttributeを使用して要素のクラス、ID、またはスタイルに加えられた変更は、表示された方法に影響しません。これらの変更が有効になるためには、それらを要素ノードの属性固有のプロパティを介して作成する必要があります。 さらに混乱させるために、属性固有のプロパティが読み取られたときに返される値は、Konquerorで発生する最も顕著なバリエーションであるブラウザー間で異なります。属性が存在しない場合、Konquerorは属性固有のプロパティの値としてnullを返しますが、他のすべてのブラウザは空の文字列を返します。より具体的なケースでは、一部のブラウザはlink.getattribute（ "href"）を絶対URLとして返します（例： "http://www.example.com/antares.html"）、他の人は実際の属性値（例えば、 "antares.html"）を返します。この場合、ドットプロパティを使用する方が安全です。これは、ブラウザ全体で絶対URLを一貫して返すためです。

では、これらの問題の一般的な解決策は何ですか？

基本的なルールは次のとおりです。属性に値が割り当てられていることを確信している場合、DOTプロパティ方法を使用してアクセスすることは安全です。属性が設定されているかどうかがわからない場合は、最初にDOMメソッドのいずれかを使用して値を確保する必要があります。次に、DOTプロパティを使用して値を取得する必要があります。

読み取り

未検証の属性については、以下を使用してください

これにより、属性が存在し、その価値を取得する前にヌルではないことを確認します。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

vervified属性に書くには、次のコードを使用してください。

このコードにより、属性が最初に正しく作成されることを確認し、属性が要素の視覚的表示に影響する場合、インターネットエクスプローラーが問題を抱えないように設定されます。

このルールには、存在が保証できる属性については、いくつかの例外があります。これらの「必須」属性の中で最も注目すべきものは、スタイルとクラスであり、特定の要素に対して常に有効です。したがって、すぐにそれらをドットプロパティ（それぞれelement.styleとelement.classname）として参照できます。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

私たちが注意しなければならない他の属性は、ラベルの属性です。クラスと同じルールに従いますが、そのプロパティフォームはhtmlforです。 getattribute/setattributeを使用して、element.getattribute（ "for"）を書きますが、インターネットエクスプローラーではelement.getattribute（ "htmlfor"）。

特定の属性値を使用してすべての要素を取得します

特定の属性を持つすべての要素を見つける機能は、同じクラスやタイトルを持つすべての要素を変更する必要がある場合、かなり便利です。

solution

特定の属性値を持つ要素を見つけるには、その属性のページ上のすべての要素を確認する必要があります。これは非常に計算集約型の操作であるため、軽視するべきではありません。 type = "チェックボックス"ですべての入力要素を見つけたい場合は、最初に検索を入力要素に制限する方がよいです。

これには、ページ上のすべての要素を繰り返してそのタイプをチェックするよりも、計算が少なくなります。ただし、このソリューションで提示されている関数 - getelementsbyattribute-は、同じ属性値を持つ異なるタイプのいくつかの要素を見つける必要がある場合に理想的です。

ページ上のすべての要素をチェックする最も簡単な方法は、getElementsByTagname（ "*"）によって返されたコレクションをループすることです。この方法の唯一の問題は、Internet Explorer 5.0および5.5がタグの選択のためにアスタリスクワイルドカードをサポートしていないことです。幸いなことに、これらのブラウザはdocument.allプロパティをサポートしています。これは、ページ上のすべての要素を含む配列です。 getElementsByAttributeこの問題を単純なコードブランチで処理し、特定の属性値の要素をチェックし、返される配列に一致を追加します。

要素に複数のクラスを追加および削除します

複数のクラスを組み合わせることは、非常に便利なCSS技術です。 1つの要素にさまざまなスタイルを組み合わせることで、非常に原始的な継承手段を提供し、サイト全体でさまざまな効果を組み合わせて一致させることができます。要素の強調などの状況では特に役立ちます。他のクラスによって要素に適用された可能性のある他の視覚特性を乱すことなく、要素を強調するクラスを追加できます。ただし、JavaScriptでクラスを割り当てている場合は、以前に割り当てられたクラスを誤って上書きしないように注意する必要があります。

solution

任意の要素のクラスには、クラス名プロパティからアクセスできます。このプロパティにより、現在その要素に適用されているクラスを読み書きできます。 1つの文字列であるため、ClassNameを使用することで最も難しい部分は、複数のクラスを表すために使用する構文を処理する必要があることです。

要素のクラス名プロパティのクラス名は、スペースで区切られています。ファーストクラスの名前の前には何もありません。最後のクラス名には何も続きません。これにより、クラスリストにクラスを簡単に追加できます。クラス名の最後までスペースと新しいクラス名を連結するだけです。ただし、リストに既に存在するクラス名を追加しないようにする必要があります。これにより、クラスが削除されるようになるためです。また、クラス名の先頭にスペースを使用しないでください。これにより、オペラ7：

のエラーが発生するため

最初に、AddClassは、追加するクラスを含む正規表現パターンを作成します。次に、このパターンを使用して、現在のクラス名値をテストします。クラス名がまだ存在しない場合は、空のクラス名値（クラス名がプロパティverbatimに割り当てられます）を確認するか、既存の値にスペースと新しいクラス名を追加します。 クラスの分離

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

クラスを見つけるためのいくつかの正規表現の例は、境界特殊文字（b）という単語を使用してクラスを分離します。ただし、これはハイフンを含むすべての有効なクラス名では機能しません。

クラスを削除するプロセスは、クラスを追加するために使用するものと同一の正規表現パターンを使用しますが、チェックを実行する必要はありません。

removeClassがクラス名プロパティの値のコピーで交換の正規表現を実行した後、トレーリングスペースを削除することで結果の値をクリーンアップします（これは、複数のクラスのクラス名で最後のクラスを削除すると作成されます）、ターゲットのクラス名に割り当てます。

要約

この章では、ドキュメントオブジェクトモデルを操作するために必要な基本的で強力なツールを紹介しました。 Webページを操作する際に、DOM（ブラウザに表示されるすべての下のスケルトン）を理解することが重要です。この本の残りの部分を理解するには、DOMの一部を作成、編集、削除する方法を知ることが重要です。これらのテクニックを習得したら、熟練したJavaScriptプログラマーになるための道を進むことができます。

第7章。ウィンドウとフレームの操作

この章は、ポップアップを開く、フレーム間の通信などのタスクを含む単純なウィンドウとフレームの操作に関するものです（IFRAMEのデータを読むことに関与する手法は、第18章でカバーされ、JavaScriptでWebアプリケーションを構築します）、ページのスクロール位置を見つけます。

多くの人が、窓の操作は暗い側面に似ていると感じています。彼らは、ウィンドウがドキュメントではなくユーザーのGUIの一部であると信じており、JavaScriptはドキュメントスクリプト言語であるため、ビジネス操作ウィンドウはありません。

私は一般的に同意する傾向がありますが、意見は時々贅沢であることを知っています。クライアントが具体的なことを求める場合、必ずしも彼らの心を変えることはできませんし、そのような原則に基づいて仕事を断る自由を持つことはできません。この章では、使用から生じる可能性とアクセシビリティの問題に敏感でありながら、さまざまな実用的なウィンドウとフレームの操作タスクをカバーします。

ただし、制限があり、いくつかの種類の窓スクリプトは特に友好的ではないことに注意してください。ユーザーのプライマリウィンドウの閉鎖や変更、画面の周りのウィンドウの移動、フルスクリーンまたは「クロムレス」ウィンドウの開くなど、積極的な戦術を扱うことはありません。これらはまさにJavaScriptに悪い名前を与えた虐待の種類です。 この章のほとんどを通して、ウィンドウオブジェクトのプロパティとメソッドを詳しく調べます。これらはさまざまな方法でさまざまなブラウザによって実装されており、そのほとんどはJavaScriptが標準化された数日以来使用されています。

対処するコードブランチはかなりありますが、オブジェクト検出を慎重に使用することで恐ろしいブラウザのスニッフィングを避けます。特定のブラウザーを検出するのではなく、互換性をテストするオブジェクトまたは機能を検出するプロセスを避けます。 ポップアップウィンドウを使用して

ポップアップウィンドウを使用する必要がありますか？私が持っている最も考慮されている答えはこれです：あなたがそれを助けることができる場合ではありません。ポップアップウィンドウは、マーケティング担当者の積極的な使用から悪い評判を得ていますが、リクエストされたポップアップでさえ、優れた使いやすさの障壁になる可能性があります。

ポップアップが決して適切ではないとは言いませんが、めったにそうではないと言います。それにもかかわらず、新しいウィンドウを開くことが間違いなく最も適切な解決策である状況があります。オンライン調査は、コンテンツをより親しみやすくする可能性があるため、オンライン調査が1つの例かもしれません。 DHTMLゲームは別のゲームです。ビューポートは既知のサイズである必要がある可能性があるためです。

ポップアップが作成する問題について議論し、これらの問題を可能な限り軽減する実用的な方法を提供することで、私の意見を認定します。

ポップアップの何が問題になっていますか？

ほとんどのポップアップウィンドウスクリプトの主な問題は、ユーザーのニーズを考慮していないことです。デザイナーのニーズのみに対応しています。結果？私たちは皆、それらを見ました：

リンクから生成されるポップアップは、スクリプトが利用できない場合は何もしません

ステータスバーがないポップアップウィンドウなので、ドキュメントがロードされているか失速しているか、まだロードされているかなどを必ずしも伝えることはできません。 ユーザーにウィンドウのサイズを変更することができないポップアップと、ウィンドウの外側にスケーリングされる可能性のあるコンテンツのScrollbarsを生成できないポップアップ

「クロムレス」である、またはユーザーの画面のフルサイズに開いているウィンドウ
• これらの問題は、使いやすさだけでなく、アクセシビリティの問題でもあります。たとえば、画面リーダーのユーザーには、新しいウィンドウが開いたデバイスによって通知されない場合があります。彼らがブラウザの履歴に戻ろうとした場合、これは明らかに混乱を引き起こす可能性があります（彼らはできません）。ウィンドウがフルサイズで開くと、目撃されたユーザーでも同じことが起こる可能性があります。あなたと私はタスクバーを使用して開いたウィンドウを監視することに精通しているかもしれませんが、すべてのコンピューターユーザーがそうではありません。
ポップアップを使用する場合、これらのような問題を探し、一般的にその影響に敏感である場合、ポップアップはユーザーに友好的であり、良心への負担が少なくなります。 また、開発者の観点からは、ポップアップウィンドウが機能することは保証されていないことに注意してください。ほとんどのブラウザには、ポップアップウィンドウを抑制するオプションが含まれています。場合によっては、ユーザーイベントに応じてポップアップが生成されても抑制が発生します。
• スクリプトがサポートされていない状況のように、これを許可できる場合があります。ポップアップの基礎となるトリガーがポップアップが失敗した場合でも有用なことを確認することにより。または、コードがウィンドウを開いてから、独自の閉じたプロパティを確認して、実際に表示されるかどうかを確認する場合があります（次のソリューションでこの手法を見ます）。
しかし、これらのアプローチはどちらもそこにあるすべてのブラウザーとポップアップブロッカーで動作することは保証されていないため、これはユーザビリティの理由と同じくらい簡単で、できる限りポップアップを使用しないようにする方が簡単です。
• 問題を最小限に抑えるにはどうすればよいですか？

  私たちがする必要があるのは、ポップアップの倫理的使用のための黄金律を確立することです。

  スクリプトが利用できないときにトリガーリンクが適切に劣化することを確認してください。
  • 常にステータスバーを含めます。
  • コンテンツをオーバーフローするメカニズムを常に含めます。ウィンドウのサイズを許可するか、スクロールバーを表示するか、その両方を許可します。
  640×480ピクセルを超えるウィンドウを開かないでください。ポップアップのサイズを制限することにより、モニターの大部分のユーザーの主要なウィンドウよりも小さいことを確認します。これにより、ユーザーがポップアップが新しいウィンドウであることに気付く可能性が高まります。
  • solution

  上記のガイドラインに基づいた一般的なポップアップ関数は次のとおりです。 このスクリプトは、ウィンドウサイズを制限するだけでなく、オーバーフローのないポップアップを作成することを拒否します。したがって、「スクロール」、「サイズ」、または「両方」をオーバーフロー引数に指定しない場合、「両方」のデフォルト設定が使用されます。

  三元演算子

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

このスクリプトは、三元演算子と呼ばれるショートカット式を使用して、各オーバーフローオプションを評価します。三元オペレーターは使用しますか？および：評価の2つの可能な結果を​​分割する文字。このコードを検討してください：

そのコードは、以下のマークアップに相当します：

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

括弧は必要ありませんが、表現が読みやすくなることがあります。これやその他の有用なショートカットの詳細については、第20章、ペースを維持してください。

ポップアップ機能を配置したら、さまざまな方法で呼び出すことができます。たとえば、通常のリンクを使用できます：

スクリプトが利用できない場合、これは他のリンクと同じように機能しますが、スクリプトが利用可能な場合、スクリプトは、HREFをMakePopup関数に渡すクリックイベントハンドラーを他の設定とともにトリガーできます。ハンドラーの返品値は、ウィンドウが実際に開かれているかどうかによって異なります。ポップアップをブロックするブラウザは、通常どおりリンクをたどります：

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

一般的に、ウィンドウを生成する必要があるスクリプトがある場合は、URLを使用してMakePopup関数を直接呼び出すことができます。 スクリプトの後でそのウィンドウを閉じる必要がある場合は、保存されているウィンドウの参照で閉じるメソッドを使用して、次のようにすることができます。

ディスカッション。

<div  <br>
    onmouseover="this.style.borderColor='red'" <br>
    onmouseout="this.style.borderColor='black'">

window.openメソッドは、URLとウィンドウ名に加えて、多くの引数を取得できます。これは、ウィンドウにメニューバー、ツールバー、アドレス（場所）バーなどの特定の装飾が必要かどうかを指定できます。これらの引数は、window.openの3番目の引数へのコンマ削除された文字列として渡されます。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

MakePopup関数では、メノバー、ツールバー、および場所の引数はすべて、これらの要素がポップアップウィンドウにはめったに役立つことはないため、すべてプリセットされています。結局のところ、ナビゲーションツールです。ポップアップは、主に1ページのインターフェイス、または調査の例や銀行のWebサイトのログオン手順など、履歴ナビゲーションが落胆するインターフェイスに使用されます。

必要に応じてこれらの引数を変更できますが、ステータスの引数は常に「はい」に設定する必要があります。 （私は知っています - 私はすでにそれについて言及しましたが、それが重要だからもう一度言っています！）

再設計可能な引数には効果がない場合があります。設計またはユーザーの好みの結果として、一部のブラウザでは、この値をNOに設定しても、居住できないウィンドウを作成することはできません。実際、Mac OS XのOpera 8では、カスタムサイズのウィンドウをまったく作成することはできません。作成されたウィンドウは、現在のウィンドウに新しいタブとして表示されます。その特定の例外はそれ自体が重要ではないかもしれませんが、作成されたウィンドウのプロパティを制御することは絶対に保証されていないという一般的なポイントを説明するのに役立ちます。

新しいウィンドウが開いたら、オブジェクトのフォーカスメソッドを使用してフォーカスに入れることができます。これは通常必要ではありません - 一般に、デフォルトで発生しますが、複数のウィンドウでスクリプトしている場合は手法が役立つ場合があります。

あるいは、ポップアップを開きますが、プライマリウィンドウにフォーカスを維持することをお勧めします（それにより、いわゆる「ポップランダー」を作成します）。ぼやけた方法を使用して、窓から焦点を奪うことができます。

ただし、その場合、焦点が次にどこに行くかを予測することはできないため、プライマリウィンドウに再び焦点を合わせる方が信頼できます。

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

新しいウィンドウでオフサイトリンクを開く

HTML 4およびXHTML 1の厳密なバージョンでは、リンクのターゲット属性は存在しなくなりました。これの1つの解釈は、Webページが新しいWindowsにリンクを開くべきではないということです。もう1つは、ターゲティングには普遍的なセマンティクスがないため、HTMLで定義されるべきではないということです。 （CSS 3ワーキングドラフトには、リンクプレゼンテーション用のターゲットプロパティのセットが含まれています。これは、最終的にはこのメカニズムが代わりにCSSに渡されることがわかります。個人的には、CSSとは関係ないので、ドラフト段階を超えないことを願っています。

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

他の解釈があり、議論は長い（そして時には退屈な）ですが、この問題の解決策が必要だと思うかもしれないと言うだけで十分です。あなたの個人的な見解が何であれ、それはWeb開発クライアントの一般的な要求です。

solution

<div  <br>
    onmouseover="this.style.borderColor='red'" <br>
    onmouseout="this.style.borderColor='black'">

このスクリプトは、rel属性値の外部でリンクを識別します。 REL属性は、リンクとそのターゲットとの関係を記述する方法であるため、別のサイトを指すリンクを識別するための使用は意味的に不利です。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

各外部リンクがそのように識別されている場合、単一のドキュメント。Nclickイベントハンドラーは、そのようなすべてのリンクでクリックを処理できます：

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

ディスカッション

ドキュメント全体のイベントハンドラーを使用することは、最も効率的なアプローチです。すべてのリンクを介して反復し、ハンドラーをそれぞれに個別にバインドするよりもはるかに優れています。イベントターゲットプロパティを参照することにより、実際にクリックされた要素が実際にクリックされた要素を確認できます。イベントとイベントプロパティの詳細については、第13章、基本的な動的HTMLを参照してください。ただし、状況の簡単な要約を次に示します。

2つの完全に異なるイベントモデルが現在のブラウザで採用されています。このスクリプトは、eを探すことによって使用されるべきものを確立します。これは、Mozillaブラウザで使用されているイベント引数であり、他のほとんどのブラウザーで採用されています。次に、使用中のモデルに適したオブジェクトプロパティを保存します。Mozillaのターゲットとブラウザのようなもの、またはIEのsrcelementのいずれかです。

ターゲットオブジェクト（nullでない場合）は、リンク要素ノード、リンク内の要素またはテキストノード、または他のノードの3つのことのいずれかのいずれかです。スクリプトで

最初の2つのケースを処理する必要がありますが、最後の状況から生じるクリックは安全に無視される場合があります。私たちがしていることは、リンクを見つけるか、ボディ要素に到達するまで、イベントターゲットから親ノードのトレイルをたどることです。

統一されたターゲットリンクがあると、正しい値でrel属性を確認するだけです。それが存在する場合、リンクのHREFでウィンドウを開くことができます。そのすべてが成功した場合（新しいウィンドウオブジェクトの閉じたプロパティで判断されたように）、ハンドラーは虚偽を返し、元のリンクが守られないようにします。

window.openのリンクを渡すことなく、window.openはデフォルトの装飾を備えたウィンドウを作成します。 最初のテスト

属性固有のプロパティは、問題の属性に値が割り当てられていることを確実に知っている場合にのみ信頼できるため、RELの最初のテストとしてgetattributeを使用します。文字列に対してターゲットをテストすることはできません。これは、nullまたは未定義である可能性があるためです。これについては、「要素の属性を読み書き」と呼ばれるセクションで詳しく説明しました。

フレーム間の通信

額入り環境で作業している場合は、フレーム間でスクリプトを通信したり、プロパティを読み書きしたり、異なるドキュメントで関数を呼び出したりする必要がある場合があります。

フレームを使用するかどうかを選択する場合は、概念的に壊れているという事実とは別に、多くの深刻な使いやすさとアクセシビリティの問題があるため、そうすることに対して強くお勧めします（アドレス指定できないブラウザの状態内に作成します）。しかし、ポップアップの使用と同様に、場合によっては、フレームの使用について選択できない場合があります。あなたが本当にそれらを使用しなければならないなら、ここにあなたがする必要があることがあります。

solution

簡単なフレームセットドキュメントから始めましょう：

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

クロスフレームスクリプトには4つの参照を使用できます：

• ウィンドウまたは自己は、現在のフレーム付きページを指します
親は、現在のページを含むフレームを含むページを指します。
• 上部は、階層にフレームセットが1つしかない場合、フレームの階層の最上部にあるページを指します。
フレームコレクションは、現在のページのすべてのフレームの連想配列です。
ナビゲーションフレームでページを通信したいコンテンツフレームにスクリプトがあるとしましょう。どちらのページも単一のフレームセット（階層の唯一のフレームセット）に含まれているため、コンテンツフレーム内から次の参照を正常に作成できます。

parent.frames [0]

top.frames [0]

parent.frames ['navigationframe']
top.frames ['navigationframe']
• フレームコレクションは、連想配列（第6章で見たフォームコレクション、処理および検証フォームなど）です。そのため、各要素にはインデックスまたは名前でアクセスできます。通常、名前を使用することをお勧めします（正当な理由がない限り）。フレーム注文が変更された場合は後でコードを編集する必要がないようにします。同様に、階層が変更された場合、複雑なネストされたフレームセットの親の参照が変更される可能性があるため、一般に、開発者は常に上から参照を開始することをお勧めします。上記のオプションのうち、私が好むリファレンスはTOP.FRAMES ['NavigationFrame']です。
フレームへの参照があるので、他のフレームページで関数を呼び出すことができます：

あるいは、他のフレームドキュメントへの参照を取得し、そこからDOMと連携することができます。

ディスカッション

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

フレーム間の通信は、同じドメイン内のドキュメントのみで許可されています。セキュリティ上の理由により、スクリプトとは異なるドメインからロードされたドキュメントを使用することはできません。たとえば、悪意のあるサイトの所有者が定期的にフレームにアクセスするサイトをロードし、そこに入力した個人データを盗むことはできません。実際、一部のブラウザでは、ユーザーがクロスサイトのスクリプトスクリプトの脆弱性の可能性を根絶するためだけに、すべてのスクリプトがフレーム間で通信することを許可することができます。また、スクリプトがブラウザが設定されていることを確認しても、この好みを回避する方法はありません。

問題を訴えているユーザーがいる場合（また、クロスフレームスクリプトを許可するために設定を変更できない、または変更できない場合、最も安全なことは、単にクロスフレームのスクリプトを完全に避けることです。

ページ間でデータを渡す代替方法については、第6章で説明し、フォームと第8章の処理と検証、Cookieを使用します。

スクロール位置を取得します

ページスクロールは、JavaScriptの最も標準の少ないプロパティの1つです。さまざまなブラウザーのさまざまなバージョンで3つのバリエーションが使用されています。しかし、いくつかの慎重なオブジェクトテストを使用すると、確実に一貫した値を取得できます。

solution

この情報を取得するには、3つの方法があります。各アプローチでオブジェクトテストを使用して、利用可能なサポートのレベルを決定します。

関数は必要に応じて呼び出されるようになりました。 window.onscrollイベントハンドラーを使用した簡単なデモンストレーションは、図を取得してタイトルバーに書き込みます。

スクロールの問題

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

スクロールは最も信頼できるイベントではありません。KonquerorまたはSafari 1.0では、ユーザーがFirefoxでマウスホイールでナビゲートする場合、まったく発火しない可能性があります。そして、それが発砲した場合、それは継続的かつ迅速に（インターネットエクスプローラーのように）、イベントに応答するように設定したスクリプトが非常に複雑である場合、ゆっくりと非効率的な場合があります。

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

この種の問題がある場合は、Anscrollイベントハンドラーの代わりにSetInterval関数を使用する方が良いかもしれません。 SetIntervalは、イベントに応じてではなく、予測可能な間隔で関数を呼び出すことができます。この種のスクリプトの詳細については、第14章、時間と動きをご覧ください。ただし、同等の例を次に示します。

window.setInterval（function（） {

 var scrollpos = getScrollingPosition（）;      

 document.title = 'left =' scrollpos [0] 'top ='      scrollpos [1];       }、250）;

ディスカッション

ここでの唯一の実際の合併症は、つまり5が実際にdocumentlement.scrolltopプロパティを認識しているが、その値は常にゼロであるため、値を確認するだけでなく、プロパティの存在を探す必要があることです。 それ以外の場合は、どのブラウザがどのプロパティを使用しているかは、実際には重要ではありません。重要なのは、私たちのスクリプトが互換性テストの1つを通過し、有用な価値を返すことです。ただし、各ブラウザで使用されるプロパティは、参照のためにここに表示されます。

• window.pageyoffsetは、Firefoxおよびその他のMozillaブラウザ、Safari、Konqueror、およびOperaで使用されています。
document.documentlement.scrolltopは、標準に準拠したモードでIE 6で使用されます
• document.body.scrolltopはIE 5で使用され、IE 6は「Quirks」モードで使用されます。
• このリストは完全なストーリーを伝えませんが、主にテストの順序を説明することを目的としています。最近のMozillaブラウザ（Firefoxなど）は、IE 6と同じレンダリングモードのルールにより、DocumentLement.ScrolltopとBody.Scrolltopもサポートしています。 Operaは、任意のモードで3つのプロパティすべてをサポートします！

しかし、これはあなたが知ることが重要ではありません。ブラウザベンダーは、これらの複数のプロパティを追加して、あるプロパティを認識していないスクリプトを許可し、任意の選択肢を提供しません。私たちの観点から見ると、重要なポイントは、スクリプトが可能な限り広く機能することを保証する一連の互換性テストを解決することです。

レンダリングモード

「標準」モードと「Quirks」モードは、現在のブラウザが使用する2つの主要なレンダリングモードです。これらのモードは、どの要素がキャンバス（または）であるか、CSSボックスサイズの計算方法など、出力ドキュメントのさまざまな側面に影響します。レンダリングモードの詳細については、第11章、ブラウザの違いの検出を参照してください。 ページを特定の位置にスクロールする

すべての現在のブラウザは、ページをスクロールするために同じ（非標準）メソッドを実装しています。少なくともここで何かが簡単です！

solution

特定の量（window.scrollby）または特定のポイント（window.scrollto）でページ（またはむしろ、ウィンドウまたはフレーム）のスクロールに使用できる2つのメソッドがあります：

これらの例は次のように述べています：200ピクセル、次に200ピクセルを超えて下にスクロールしてから、左から300ピクセル、上から100ピクセル、そして上部の角に戻ります。 ビューポートサイズ（ウィンドウ内の使用可能なスペース）を取得

ビューポートサイズの詳細は、利用可能なスペースがスクリプトのロジックの要因である場合、さまざまな種類のスクリプトに必要です。このソリューションは、ビューポートのサイズを取得するためのユーティリティ機能を提供します私たちはこの本を通して何度も再び機能を見ます！

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

solution

必要なプロパティは、前のセクションでページスクロールで見たプロパティ（「ページを特定の位置にスクロールする」というセクション）のように、3つの異なる方法で実装されます。その例の場合と同様に、オブジェクトテストを使用して、IE 5で必要なゼロ値のテストを含む、どの実装が関連するかを判断できます（このテストは同じ理由で必要です。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

関数は幅と高さの配列を返しますので、そのデータが必要なときにいつでも呼び出すことができます：

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

要約

この章では、プラグマティストの視点からのウィンドウとフレームの操作の基本について説明しました。また、このようなスクリプトがユーザーフレンドリーでアクセスできるようにするために使用できる原則とテクニックについても説明しました。間違いなく、この種の作業は議論の余地があり、明らかに何らかのターゲティングメカニズムが必要です。なぜなら、フレームの使用がゆっくりと死にかけているにもかかわらず、これまで以上に洗練されたインターフェイスの出現はこれらの問題を生かし続けます。

私はむしろ、Xlink StandardのShow属性が好きです。これらは、ターゲットプロセスを示唆しています（新しいウィンドウを開き、それぞれ現在のウィンドウの内容を置き換えます）が、実際には特定の動作を定義していません。彼らはそれをユーザーエージェントに任せて実際に何が起こるかを制御するので、たとえば、新しいものを使用して、Windowsの代わりにタブを開くことができます。

第13章。基本的な動的html

Dynamic HTMLは、「これはDHTMLです」と言うことができる単一のテクノロジーではありません。この用語は、Webページのダイナミクスを組み合わせて組み合わせたすべてのテクノロジーを含む記述子です。ページを更新せずに新しい要素を作成し、それらの要素の色を変更し、画面の周りを拡張、契約、ズームすることができるテクノロジーです。

DHTMLは、クライアント側のスクリプト言語であるJavaScriptと組み合わせてHTML、DOM、およびCSSを使用して、伝統的に静的な媒体に命を吹き込みます。前の章では、JavaScriptを使用してページの一部を操作して、非常に便利な結果を達成できることを学びました。 DHTMLは、これらの部分を一貫した全体に組み立てることにより、はるかに複雑な問題の解決策を提供します。これは、パズルをプログラミングするのではなく、実際のニーズを満たすものです。 この章では、DHTMLを使用して効果的なユーザーインターフェイスを作成するために必要なツールのいくつかについて説明します。次に、この本の残りの部分で考慮するより複雑なモジュールに備えて、いくつかの簡単なウィジェットについて説明します。 イベントの取り扱い

ユーザーがWebページを使用して持っている相互作用は、マウスを動かしているかキーボードをタップしているかにかかわらず、ブラウザにイベントを生成します。時々、私たちのコードがこの相互作用に応答することを望んでいるので、これらのイベントを聞いてください。これにより、いつコードを実行する必要があるかがわかります。

solution

イベントを処理するには、短い方法とW3Cの方法という2つの方法があります。それぞれに長所と短所がありますが、どちらも特定の要素でイベントが発生したときに指定された関数を実行することができます。

短い方法：イベントハンドラーの使用

イベントを処理する短い方法は、すべての要素のショートカットプロパティとして割り当てられているDOM 0イベントハンドラーを使用することです。第5章で見たように、DOM 0属性ショートカットについて説明したときにドキュメントオブジェクトモデルをナビゲートすると、これらのイベントハンドラーは将来のプルーフではありません。ただし、標準のW3Cイベントリスナーよりもいくつかの利点を提供しています：

現在操作中のすべてのブラウザは、コード分岐を必要とせずにDOM 0イベントハンドラーをサポートしています。
• dom 0イベントハンドラーによって実行される各関数は、イベントハンドラーが割り当てられた正確な要素にアクセスできます。 （後でご覧のとおり、これはW3Cイベントリスナーで常に利用できるとは限りません。）
dom 0イベントハンドラーを使用することの主な問題は、複数のスクリプトで動作するように設計されていないことです。 Dom 0イベントハンドラーを割り当てるたびに、そのイベントに以前に割り当てられたハンドラーを上書きします。これにより、同じ要素でのイベント処理が必要な複数のスクリプトの操作を妨げる可能性があります。 W3Cイベントリスナーを使用すると、同じ要素に任意の数のイベントリスナーを適用し、いつでもそれらのいずれかを削除する機能を楽しむことができます。

コードが他の誰かのイベント処理を妨げないことを確認できれば（たとえば、独自のスクリプトで動的に作成された要素にイベントを配置します）、Dom 0イベントハンドラーを使用しても安全です。しかし、すべてのものが平等です。この本のように、実際のどこでもW3Cイベントリスナーを使用する方が安全です。

多くのDOM 0イベントハンドラーがブラウザから利用できます。表13.1、「dom 0イベントハンドラー」に、最も一般的に使用されるハンドラーを示します。

表13.1。 DOM 0イベントハンドラー

dom 0イベントハンドラーを使用する際に、イベントを処理したい要素を参照したら、適切なプロパティに処理機能を割り当てるという簡単な問題です。

関数割り当て（button.onclick = engage;）では、括弧は関数名に従わないことに注意してください。それらのインクルージョンはすぐに機能を実行し、イベントハンドラーとして返品値を割り当てます。括弧を省略することにより、関数自体をハンドラーに割り当てることができます。これはまた、ハンドリング関数に直接引数を提供できないことを意味します。関数は他の手段を通じてその情報を取得する必要があります。

匿名関数

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

指定された関数への参照を提供する代わりに、イベントハンドラーに匿名関数を提供できます：

var mylink = document.getElementById（ "mylink"）;      

     

mylink.onclick = function（） {  alert（ "Engage！"）;      

     

 falseを返します。       }

処理機能（および独自のコーディング設定）を再利用する必要があるかどうかに応じて、これはイベント処理コードを簡単に作成する方法です。 処理関数の返品値は、そのイベントのデフォルトアクションが発生するかどうかを決定します。したがって、前のコードでは、MyButtonがハイパーリンクである場合、クリックしたときのデフォルトのアクションは、HREFの位置に移動することです。 falseを返すことにより、エンゲージ関数はデフォルトのアクションが発生することを許可せず、ハイパーリンクナビゲーションは行われません。返品値がtrueの場合、イベント処理関数のコードが実行された後にデフォルトのアクションが発生します。

イベントが発生した場合、イベントの方法、理由、場所がイベントオブジェクトに書き込まれる方法、理由、場所に関する詳細情報。 Internet Explorerでは、これはグローバルウィンドウの形を取ります。Eventオブジェクトですが、他のブラウザでは、オブジェクトはイベント処理関数の引数として渡されます。この違いは、取り扱い関数内で対処するのがかなり簡単です：

イベントオブジェクトを使用すると、どの要素がクリックされたか、キーが押されたかどうか、イベントの座標（たとえば、マウスボタンがクリックされたときにカーソルが配置された場所）、機能をトリガーしたイベントのタイプなど、さまざまな詳細を見つけることができます。かなりの数のイベントプロパティ名は、ブラウザ全体で一貫していますが、いくつかは異なります。 MozillaイベントのプロパティはGecko DOMリファレンスで表示できますが、Internet ExplorerイベントのプロパティはMSDNで見ることができます。ブラウザ間で名前が異なるプロパティの場合、関連する問題の可能性は通常、小さなオブジェクト検出で修正できます。この章の後半でこれについて詳しく説明します。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

w3cウェイ（イベントリスナー）

dom 0イベントハンドラーは迅速かつ簡単ですが、制限があります（最終的には廃止されるという事実は別として）。 W3Cイベントリスナーの主な利点は、単一の要素上の同じイベントの複数のハンドリング関数の追加と削除をネイティブにサポートすることです。イベントリスナーには、いくつかのフェーズでイベントに応答する機能もあります（ほとんどのブラウザはまだこの機能をサポートしていませんが）

W3C仕様では、要素のAddEventListenerメソッドを使用してイベントを要素に追加できますが、Windows用のInternet Explorerは、わずかに異なる構文を持つAttachEventと呼ばれるメソッドを使用することを選択します。 （MACのInternet Explorerはこれらのイベントモデルのいずれもサポートしていないため、このブラウザでイベントを操作するには、Dom 0ハンドラーに頼る必要があります。）

インターネットエクスプローラーを除くすべてのブラウザにイベントリスナーを追加するには、これに似たコードを記述します。

Internet Explorerをサポートするには、このコードが必要です：

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

異なる関数名と同様に、インターネットエクスプローラーは、真のイベント名ではなく、イベントのdom0ハンドラー名「onclick」を使用することに注意することが重要です：「クリック」。 AddEventListenerに提供される追加の引数は、キャプチャ（True）またはBubble（False）イベント伝播フェーズ中にリスナーが適用されるかどうかを指定します。イベントの伝播については、以下の議論で詳しく説明しますが、バブルは本当に最も有用な選択であり、インターネットエクスプローラーと同じ標準に準拠したブラウザで同じ動作を保証します。

これら2つのアプローチの違いは、抽象関数を使用して回避するのがかなり簡単です。また、W3Cイベントリスナーを同時にサポートしていないブラウザ向けにフォールバックを提供することもできます。

最初の2つの場合、ステートメントは標準ベースとインターネットエクスプローラーのメソッドをそれぞれ扱いますが、キャッチオールは、これらの方法のいずれかをサポートしていない古いブラウザ、特にMAC用のInternet Explorer 5を扱っています。この最後のケースでは、Dom 0イベントハンドラーが使用されますが、複数の関数を使用して特定の要素の単一のイベントを処理できるようにするために、閉鎖を使用して、イベントに添付されている既存の関数を実行します。

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

閉鎖は、スコーピングに関連するJavaScriptの高度な機能です（これは、第19章、JavaScriptのオブジェクトの向きについて読むことができます）。閉鎖により、内部関数は、含有関数が実行された後でも、含有関数の変数を参照することができます。 Simon Willisonは、イベントハンドラーに関連して使用することを詳細に説明しています。閉鎖により、W3Cイベントリスナーをサポートしていないブラウザーで複数のイベントハンドラーを積み重ねることができると言えば十分です。 イベントリスナーを割り当てるためのクロスブラウザーコードは次のとおりです。

本物の記事

ではありません

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

dom 0イベントハンドラーフォールバックは、要素に1つのイベントタイプに複数のイベントリスナーを追加する機能を模倣していますが、特定のハンドラーを要素から削除できないため、W3Cイベントモデルの正確な複製を提供しません。

dom 0ハンドラーは、falseを返すことにより要素のデフォルトアクションのキャンセルを許可しましたが、W3Cイベントリスナーはこの目標をわずかに異なって達成しました。このモデルでデフォルトのアクションをキャンセルするには、イベントオブジェクトを変更する必要があります。 Internet Explorerでは、ReturnValueプロパティをFalseに設定する必要があります。標準ベースの実装は、同じことを行うためにPreventDefaultメソッドを提供します。違いを理解する小さな機能を作成できます。 デフォルトのアクションをキャンセルするときはいつでも、この関数を呼び出すことができます：

safariおよびw3cイベントリスナー

actiblevent

をチェックします Windows用のインターネットエクスプローラーは、AttachEventを使用してイベントリスナーを添付する場合、実際にイベントオブジェクトをイベント処理関数に渡します。ただし、古いイベントモデルを使用するブラウザについては、このオブジェクトの存在を確認する必要があります。

W3Cイベントリスナーを使用する利点の1つは、同じイベントで他のリスナーを邪魔することなく、個々のリスナーを要素から削除できることです。これは、dom 0ハンドラーを使用して不可能です Internet ExplorerはDeTacheventメソッドを使用しますが、標準に準拠したブラウザは代わりにRemoveEventListenerというメソッドを指定します。これらの各メソッドは、リスナーをアドディングするカウンターパートとかなり同様に動作します。イベントタイプは、そのイベントタイプを処理するために割り当てられた関数とともに提供する必要があります。また、標準的な方法では、イベントハンドラーがキャプチャフェーズまたはバブルフェーズ中に応答するために登録されたかどうかを知る必要があります。 ブラウザ全体でこのアプローチをサポートする関数です：

w3cイベントモデルと匿名関数

W3Cイベントモデルでは、匿名関数の削除が許可されていないため、イベントリスナーを削除する必要がある場合は、問題の関数への参照に固執します。

W3Cイベントリスナーをサポートしていないブラウザでは、この関数は特定のイベントのすべてのイベントハンドラーを削除します。そのうちの1つだけを削除して他のものを残すことはできません。

ディスカッション

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

ターゲット要素の参照

非常に頻繁に、イベントハンドラー自体内のイベントのターゲットであるオブジェクトを使用する必要があります。 dom 0イベントハンドラーでは、ハンドリング関数内でこれが特別な変数を使用すると、イベントターゲットオブジェクトが参照されます。このコードを検討してください：

ここで、これはid mylinkとのリンクを指します。リンクのHREF属性を取得するために使用できます。 ただし、W3Cイベントリスナーを使用する場合、イベントのターゲットは、異なるブラウザーの異なるプロパティの下に、イベントオブジェクトの一部として保存されます。 Internet ExplorerはターゲットをSrcelementとして保存し、標準モデルはターゲットとして保存します。しかし、これらのプロパティがポイントする要素は、必ずしもイベントリスナーが割り当てられた要素ではありません。実際、それはイベントの影響を受ける階層の最も深い要素です。次のHTMLをご覧ください

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

クリックイベントリスナーが段落に配置され、ユーザーがリンクをクリックした場合、段落のクリックイベントハンドラーが実行されますが、上記のプロパティからアクセスできるイベントターゲットはハイパーリンクです。一部のブラウザ（最も顕著なのは、Safari）は、リンク内のテキストノードをターゲットノードとしてカウントすることさえします。

どのプロパティが実装されているかに関係なく、イベントターゲットを返す関数を記述できますが、これはイベントリスナーを最初に適用した要素を見つける問題を解決しません。 （W3C標準は、CurrentTargetと呼ばれる別のプロパティを指定します。これにより、リスナーが割り当てられた要素を取得できますが、インターネットエクスプローラーに相当するものはありません。CurrentTargetをサポートするブラウザも同じ値でイベントハンドラースタイルを設定しますが、インターネットエクスプローラーのサポートがなければ、これは特に有用ではありません。イベントリスナーを添付する要素である可能性が高い要素。これを行うには、要素のタグ名、クラス、およびその他の属性に対してチェックを実行できます。

抽象的イベントターゲット関数は次のようになります：

IF-ELSEは、ブラウザ全体でイベントターゲットを取得します。 whileループは、ブラウザによって報告されたターゲットがたまたまテキストノードである場合、最初の非テキストノード親を見つけます。

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

クリックされた要素を取得したい場合は、getEventTargetに電話をかけます：

この場合、イベント処理関数はリンク（タグ）にのみ添付されることがわかっているため、イベントターゲットから上向きに繰り返し、「A」のノード名を確認できます。最初に見つけたのは、ハンドラーが割り当てられたリンクです。これにより、リンク内の要素を使用していないことが保証されます（ストロングやスパンなど）。

明らかに、このターゲット発見の方法は理想的ではなく、作業する正確なHTMLの知識がない限り、100％正確にすることはできません。最近、この問題を解決するために多くの努力が払われており、提案されたソリューションのかなりの数が、DOM 0イベントハンドラーで利用可能なこの変数と、イベントリスナーのW3C標準（インターネットエクスプローラーではなく）をサポートするブラウザで提供します。

そのような解決策の1つは、イベントリスニング関数をインターネットエクスプローラーのターゲットオブジェクトの方法にすることです。次に、メソッドが呼び出されると、これは自然にメソッドが呼び出されたオブジェクトを指します。これには、AttachEventListenerとDetacheventListenerの両方を変更する必要があります。

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

この考え方は、ピーター・ポール・コッホの改善されたアディベント競争へのエントリによく表されていました。

Dean Edwardsによる別のソリューションは、独立した追加および削除能力を備えたDOM 0イベントハンドラーを実装することを支持して、W3Cイベントモデルを完全に避けます。

これらのソリューションは両方ともよく書かれており、堅牢であることが証明されているかもしれませんが、この執筆時点ではほとんどテストされていないので、私たちが知っていて処理できる欠陥：主なソリューションで提示されるアプローチに固執します。さらに、実際には、イベントのターゲットを見つけるために反復するプロセスは、それがそうであるように見えるほど信頼できません。

イベントバブルとは何ですか？それを制御するにはどうすればよいですか？

W3C標準AddEventListenerメソッドに3番目の引数を提供する必要があることに気付いたかもしれません。また、AttachEventListener関数にキャプチャ引数が含まれていることがわかりました。この引数は、リスナーが動作するイベントサイクルのフェーズを決定します。

2つの要素があると仮定します。1つは他方の内側にネストされています。

ユーザーがリンクをクリックすると、段落とハイパーリンクの両方でクリックイベントが登録されます。問題は、どれが最初にイベントを受け取るかということです

イベントサイクルには2つのフェーズが含まれており、それぞれがこの質問に異なる方法で答えます。キャプチャフェーズでは、イベントが外部から機能するため、段落は最初にクリックを受け取り、次にハイパーリンクを受け取ります。バブルフェーズでは、イベントは内側から機能するため、アンカーは段落の前にクリックを受け取ります。

インターネットエクスプローラーとオペラはバブルのみをサポートしているため、AttachEventは3番目の引数を必要としません。 AddEventListenerをサポートするブラウザの場合、3番目の引数が真である場合、イベントはキャプチャフェーズ中にキャッチされます。それが間違っている場合、イベントはバブルフェーズ中にキャッチされます。 両方のフェーズをサポートするブラウザでは、キャプチャフェーズが最初に発生し、常にバブルフェーズが続きます。各フェーズのリスナーをセットアップすると、キャプチャフェーズと泡立ちフェーズの両方で同じ要素でイベントを処理することができます。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

これらのフェーズは、ネストされた要素が同じイベントの影響を受けるという事実も強調しています。イベントのリスナーがトリガーされた後、イベントが階層の上下または下に階層の上下または下に伝播し続けることを望まない場合は、それを停止できます。 Internet Explorerでは、イベントオブジェクトのCancelBubbleプロパティをTrueに設定することが含まれます。 W3Cモデルでは、代わりにその停止プロパゲーション方法を呼び出す必要があります：

イベントをイベントハンドラーよりもさらに伝播したくない場合は、このコードを使用します。

エンゲージ関数を割り当てて、リンクとそれを含む段落の両方でクリックイベントをリッスンしましたが、イベントの伝播はリスナーによって初めて呼ばれたときに停止されるため、クリックごとに1回だけ呼び出されます。

要素のサイズを見つける

コンテンツの長さ、CSSルール、フォントファミリ、フォントサイズ、ラインの高さ、テキストズームなど、要素のサイズに影響する非常に多くの変数があります。リストは続きます。これに加えて、ブラウザはCSSの寸法とフォントサイズを一貫して解釈し、要素がレンダリングされる寸法を予測することはできません。要素のサイズを決定する唯一の一貫した方法は、ブラウザによってレンダリングされたら測定することです。

solution

すぐに、要素がどれほど大きいかを正確に知ることが有用であることがわかります。まあ、W3Cは助けられません。要素のサイズを決定する標準化された方法はありません。ありがたいことに、ブラウザメーカーは、それを理解できるDOMプロパティに多かれ少なかれ解決しました。

ボックスモデルの違いは、インターネットエクスプローラーが要素のCSSディメンションの一部としてパディングと境界を矛盾させることを意味しますが、オフセット幅とオフセイトプロパティは、すべてのブラウザでパディングと境界を含む要素の幅を一貫して返します。

このようなCSSで要素の寸法が指定されたと想像してみましょう。

対応するオフセット幅とオフセートプロパティをチェックすることにより、JavaScriptの要素の正確なピクセル幅を判断できます。

インターネットエクスプローラー6、オペラ、モジラ、およびサファリでは、可変ピクセル幅が450に設定され、可変ピクセルハイトは250に設定されます。値はブラウザ間で異なりますが、実際のレンダリングされたサイズも同様に異なります。オフセット寸法は、要素の正確なピクセル寸法を一貫して計算します。 要素の寸法を指定せず、代わりにディスプレイをデフォルトのブロックレンダリング（したがって、ボックスモデルのバグを回避）まで残した場合、値はブラウザ間で匹敵します（スクロールバーの幅の違い、フォントなど）。 正しい寸法を達成する

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

要素の寸法を正しく決定するには、ブラウザがその要素のレンダリングが完了するまで待つ必要があります。そうしないと、ユーザーが見ているものとは異なる場合があります。ブラウザが要素のレンダリングを完了したことを保証する方法はありませんが、通常、ウィンドウのロードイベントが発生した後、すべての要素がレンダリングされたと仮定するのは安全です。

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

ディスカッション

要素の寸法を境界線から取得することは可能ですが、そのパディングを含みます。これらの値は、クライアントウィッドプロパティとクライアントハイトプロパティを使用してアクセスされ、その値より上に使用される要素の例では、インターネットエクスプローラー5/5.5で300と100、他のすべてのブラウザで400と200になります。

境界やパディングなしで要素の幅を取得できるプロパティはありません。

要素の位置を見つける

要素の正確な位置を知ることは、それに対して他の要素を配置したい場合に非常に役立ちます。ただし、ブラウザのサイズ、フォントサイズ、コンテンツの長さが異なるため、ページをロードする前に要素の位置をハードコードすることは不可能なことがよくあります。 JavaScriptは、ページがレンダリングされた後に要素の位置を確認する方法を提供するため、要素がどこにあるかを正確に知ることができます。

solution

オフセットとオフセットレフトのプロパティは、要素の上部とそのオフセットの上部との間の距離を示します。しかし、相殺されたものは何ですか？まあ、それは異なる要素や異なるブラウザで大きく異なります。時にはそれは即時の要素です。また、HTML要素です。それ以外の場合は存在しません。

ありがたいことに、解決策は、オフセットパリントのトレイルをたどり、オフセット位置を追加することです。これは、すべてのブラウザのページ上の要素の正確な絶対位置を提供する方法です。

問題の要素にオフセットがない場合、要素自体のオフセット位置で十分です。それ以外の場合は、要素のオフセットをオフセットParentのオフセットに追加し、そのオフセットParentのプロセスを繰り返します（もしあれば）：

ie 5 Mac bug

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

MAC用のインターネットエクスプローラー5オフセット寸法を計算するときに体のマージンやパディングを考慮しないため、このブラウザで正確な測定を希望する場合は、体にマージンとパディングがゼロとパディングが必要です。

ディスカッション

上記のメソッドは、シンプルで複雑なレイアウトで機能します。ただし、1つ以上の要素の祖先がCSS位置プロパティが静的（デフォルト）以外のものに設定されている場合、問題が発生する可能性があります。 ネストされたポジショニングとブラウザの違いの組み合わせが非常に多いため、すべてを考慮したスクリプトを書くことはほとんど不可能です。多くの相対的または絶対的なポジショニングを使用するインターフェイスを使用している場合、特定のケースを試して、それらに対処するために特別な機能を書くのがおそらく最も簡単です。遭遇する可能性のある違いのほんの一部があります：

WindowsとMozilla/Firefoxのインターネットエクスプローラーでは、親が比較的配置されている要素は、独自のオフセットに親の境界を含めません。ただし、親のオフセットは、国境の端までのみ測定します。したがって、これらの値の合計には境界距離が含まれません。
• オペラとサファリでは、オフセットが体が独自のオフセットに体のマージンを含めるという絶対的または比較的配置された要素があります。ボディのオフセットには、独自のマージンも含まれます。
Windows用のインターネットエクスプローラーでは、比較的配置された要素内に絶対に配置された要素には、オフセットに比較的配置された要素のマージンが含まれます。比較的配置された要素には、そのマージンも含まれます。
• マウスカーソルの位置を検出します
• マウスオーバーやマウスモーブなどのマウスイベントを操作する場合、操作の一部としてマウスカーソルの座標を使用することがよくあります（たとえば、マウスの近くに要素を配置するため）。以下で説明するソリューションは、実際には、「要素の位置を見つける」というセクションで説明した要素位置検出方法よりも信頼性の高い位置検出方法であるため、前のソリューションの代わりに次のソリューションを使用できる場合は、！

solution

イベントオブジェクトには、カーソルの位置で作業するために知っておくべきすべてのものが含まれていますが、すべてのブラウザで同等の値を取得するためにオブジェクトの検出が必要です。

ページ全体に比べてカーソルの位置を取得する標準的な方法は、イベントオブジェクトのPageXおよびPageyプロパティを使用します。 Internet Explorerはこれらのプロパティをサポートしていませんが、私たちが望むほとんどのプロパティが含まれています。 ClientXとClientYは、マウスカーソルからブラウザウィンドウのエッジまでの距離を測定しますが、Internet Explorerで利用できます。ページ全体に対してカーソルの位置を見つけるには、これらの寸法に現在のスクロール位置を追加する必要があります。この手法は、WindowsとFramesを使用して第7章で取り上げられました。必要な寸法を取得するために、そのソリューションからGetScrollingPosition関数を使用しましょう。

要素の上にマウスをマウスするときにツールチップの表示

ツールチップは、ほとんどのブラウザで役立つ機能ですが、インターフェイスの一部として使用する場合は、少し制限的になる可能性があります。必要に応じて表示されるレイヤーを使用したい場合は、切り捨てられていない、そして単純なテキスト以上のものを含めることができます。独自の拡張ツールチップを作成してみませんか？

solution

この例では、ツールチップを表示するすべての要素にクラスのHastooltipを適用します。各要素のタイトル属性からツールチップに表示される情報を取得します。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

この章の前半のブラウザイベントの調査から、レイヤーが現れて消えてしまう時期を知らせるために、イベントリスナーをセットアップする必要があることに気付くでしょう。

ツールチップは、要素の上にマウスをマウスすると、固定の場所に古典的に表示され、マウスアウトすると消えます。 JavaScriptツールチップのいくつかの実装も、マウスが要素を介して移動するときにツールチップを移動しますが、個人的には迷惑だと思います。このソリューションでは、マウスオーバーとマウスアウトイベントに焦点を当てます。

第1章のAddLoadListener、JavaScriptの開始、第5章のGetElementsByAttribute、Document Object Modelのナビゲーション、この章で前述したAttachEventListener関数など、このスクリプトの関数のかなりの数をすでにコーディングしています。

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

クロスブラウザーイベントオブジェクトを取得し、ベースイベントターゲット要素をHastooltipのクラスを使用して1つに反復した後、ShowTipはツールチップ（Div）の作成について説明します。ツールチップのコンテンツは、ターゲット要素のタイトル属性から取得され、ツールチップ内のテキストノードに配置されます。

ブラウザが拡張されたツールチップの上に独自のツールチップを表示しないようにするために、ターゲット要素のタイトルがクリアされます。これで、ブラウザがツールチップとして表示するものは何もないので、作成したばかりのものに干渉することはできません。タイトルを削除することによって引き起こされる潜在的なアクセシビリティの問題について心配しないでください。後で戻します。 オペラでのツールチップディスプレイの制御

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

オペラは、空の文字列に設定した後でも、元のタイトルを表示します。このブラウザに表示されるツールチップを避けたい場合は、この章の最初のセクションである「ハンドリングイベント」と呼ばれるセクションのStopDefaultaction関数を使用して、マウスオーバーのデフォルトアクションを停止する必要があります。これは、ハイパーリンク用のステータスバーアドレスディスプレイなど、他のマウスオーバーの動作にも影響することに注意してください。 ツールチップのスタイリングのフックを提供するために、Tooltip要素にターゲット要素のID（TargetIdTooltip）に基づいたIDを割り当て、ツールチップのクラスを設定します。このアプローチでは、CSSを通じてスタイルを適用することができますが、ツールチップの位置を事前に計算することはできません。したがって、イベントがトリガーされたときに計算されたマウスカーソルの座標を使用する必要があります。

残っているのは、ツールチップ要素を本体に追加することです。そのため、リンクの上にマウスをマウスすると魔法のように表示されます。 CSSの少しを使用すると、図13.1、「マウスオーバーに表示される動的に生成されたレイヤー」のように見える可能性があります。

図13.1。マウスオーバーに表示される動的に生成されたレイヤー

マウスが要素から移動すると、ドキュメントからツールチップを削除すると消えます。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

以前には、showtipでは、ターゲット要素のプロパティとしてツールチップ要素への参照を作成しました。それを行ったので、DOM全体を検索する必要なく、ここで削除できます。ツールチップを削除する前に、そのコンテンツを取得してターゲット要素のタイトルに挿入してください。

これらのオブジェクトは存在しますか？

他のイベントリスナーで作成されたオブジェクトが実際に操作しようとする前に存在することを確認する必要があります。これは、イベントがしばしば失敗する可能性があり、それらが設定された順序で発生することを保証することはできないからです。

ディスカッション

上記のコードの問題の1つは、ターゲット要素がブラウザウィンドウの右端または下端に近い場合、ツールチップが切り取られることです。これを回避するには、ツールチップに十分なスペースがあることを確認し、それに応じて配置する必要があります。 各寸法で、マウスの位置がブラウザのウィンドウサイズよりも少ないかどうかをチェックすることにより、ツールチップサイズを引いたものであるかどうかを確認できます。

この関数は、ツールチップ要素の挿入に到達するまで、以前のバージョンと同じです。要素を挿入する直前に、その可視性を「隠し」に設定します。これは、ページに配置されると、レイヤーが表示された場合と同じスペースを占めるが、ユーザーはページに表示されないことを意味します。これにより、ツールチップの寸法を測定し、ユーザーが元の位置でフラッシュアップするのを見ずに再配置できます。 レイヤーがビューポートの外側に表示されるかどうかを検出するために、ビューポートに対するカーソルの位置を使用します。これは理論的にはclientx/clientyを使用して取得できますが、覚えておいてください。Safariはこのプロパティに誤った価値を与えます。代わりに、クロスブラウザー値をCursorposition内で使用し、スクロール位置（ClientX/Clientyに相当）を減算します。ビューポートのサイズは、第7章で作成したgetViewportsize関数を使用して取得され、ウィンドウとフレームを使用して作業し、各ディメンションで、カーソルの位置とレイヤーのサイズがビューポートサイズよりも大きいかどうかを確認します（スクロールバーの手当を引いた）。 レイヤーの一部がビューポートの外に表示される場合、ビューポートサイズから寸法を差し引くことで配置します。それ以外の場合は、カーソルの位置を使用して正常に配置されます。

注意すべき唯一の例外は、レイヤーが通常両方の寸法でビューポートの外に表示される場合、垂直に配置するとき、カーソルの上に自動的に配置されることです。これにより、レイヤーがカーソルの上に直接表示され、マウスアウトイベントのトリガーが防止されます。また、ターゲット要素がツールチップによって完全に不明瞭になるのを防ぎます。これにより、ユーザーがクリックすることができなくなります。 目に見えるツールチップの寸法の測定

ツールチップの寸法を測定するには、最初にドキュメントに追加する必要があります。これにより、ページに自動的に表示されるようになるため、ユーザーが間違った位置に表示されるのを防ぐには、非表示にする必要があります。ツールチップの位置を確定するまで、その可視性を「隠し」に設定することでそうします。

ここでは、よりよく知られているディスプレイプロパティを使用することはできません。「none」に設定されたオブジェクトはまったくレンダリングされていないため、測定する寸法はありません。 列によるテーブルの並べ替え

テーブルは、情報の鉱山である可能性がありますが、それらを適切に理解できる場合のみです。異なる列でテーブルを並べ替える機能により、ユーザーは自分にとって理にかなっている方法でデータを表示でき、最終的にはより深い理解の機会を提供できます。

solution

開始するには、意味的に意味のあるHTMLテーブルを使用します。これにより、イベントリスナーを挿入し、余分な要素を注入し、データをソートするために必要な構造が提供されます。

最初に、テーブルの各見出しセルにイベントリスナーをセットアップする必要があります。これらは列のクリックを聞き、クリックされた列のソートをトリガーします。

Mac用インターネットエクスプローラー5は、動的に生成されたテーブルコンテンツに対処するのに苦労しているため、テーブルのいずれかをソート可能にすることから具体的に除外する必要があります。 クラスのsortabletableを持つテーブルのみがソート可能なテーブルに変換されるため、initsortabletableはDOMをナビゲートして、これらのテーブルのテーブルの見出しセルを見つけます。それらが見つかると、各見出しセルの内容はハイパーリンクに包まれます。これにより、キーボードユーザーは列を選択してテーブルをソートすることができます - そして、これらのリンクにイベントリスナーが設定され、クリックイベントを監視し、それに応じてソートコラムを実行します。各リンクのタイトル属性も設定されており、リンクがクリックされたときに何が起こるかについての情報をユーザーに提供します。 ソートコラム関数は、見出しセルがクリックされるたびにテーブル構造全体をナビゲートして再配置する必要があるため、かなり長いです。

<script type="text/javascript"> <br>
function saySomething(message) <br>
{ <br>
  alert(message); <br>
} <br>
saySomething('Hello world!'); <br>
</script>

すべての構造変数が定義された後に発生するループの最初のループは、それらのいずれかをクリックしたときに各テーブル見出しセルのそれぞれの状態を設定します。クラスは、テーブルが現在ソートされている見出しセルを識別するために維持されているだけでなく、各セルに特別なソートオーダープロパティが維持され、その列がソートされる順序を決定します。最初は、列が降順でソートされますが、見出しセルが連続して2回クリックされると、並べ替えの順序が変更され、昇順のシーケンスが反映されます。各見出しセルは、最近示したソートオーダー状態を覚えており、その見出しセルが再選択されると、列がその状態に戻されます。クリックされた見出しセルのハイパーリンクのタイトルも、現在のソート順序と、ユーザーが再びクリックした場合のソート順序に応じて書き直されます。

ループの2番目は、テーブルの本体に含まれる各行を並べ替えます。元のTbodyのコピーは、並べ替えられたテーブルの行を保存するために作成されており、最初はこのコピーが空です。元のTbodyの各行がスキャンされるため、ソート中の列のテーブルセルの内容は、既にコピーの行と比較されます。

テーブルセルの内容を見つけるために、関数getInternalText：

sortcolumnが、ソートされたテーブルセルの値がスキャンしているものよりも「少ない」コピーに行を見つけた場合、スキャンされた行のコピーをコピーしたtbodyに挿入します。昇順の列の場合、この比較を逆転させるだけです。コピーの行の値は、スキャンされた行の値よりも「大きい」必要があります。 ただし、比較が行われる前に、ソートされたテーブルセルの内容が整数またはフロートとして解釈できるかどうかを確認します。その場合、比較値が変換されます。これにより、数値を含む列が適切にソートされていることを確認します。文字列比較は、数の比較とは異なる結果を生成します

<ul > <br>
  <li><a href="/">Home</a></li> <br>
  <li><a href="/about/">About</a></li> <br>
  <li><a href="/contact/">Contact</a></li> <br>
</ul> <br>
 <br>
<script type="text/javascript" src="menu.js"></script>

元の行がすべて新しいTbodyにコピーされたら、その要素は古いものを置き換えるために使用され、並べ替えられたテーブルがあります！ 現在ソートされているテーブル見出しセルに割り当てられているsortableSeScendingと並べ替えのクラスを使用して、CSSを使用して、テーブルの並べ替えられた列の列をユーザーに通知できます。

<script type="text/javascript" src="menu.js"></script> <br>
 <br>
<noscript> <br>
  <ul> <br>
    <li><a href="/">Home</a></li> <br>
    <li><a href="/about/">About</a></li> <br>
    <li><a href="/contact/">Contact</a></li> <br>
  </ul> <br>
</noscript>

図13.2。 4番目の列で下降順にソートされたソート可能なテーブル

図13.3。 2番目の列で昇順でソートされたソート可能なテーブル要約

DHTMLの2つの主要な柱は、イベントのキャプチャと、DOMを介したページ要素の再編成と作成です。これらの原則を使用して、ユーザーがページと対話し、それに応じてインターフェイスを応答させるさまざまな方法の多くをキャプチャすることが可能です。

現在利用可能になったJavaScript強化Webアプリケーションの数と品質でわかるように、DHTMLが新しいインターフェイスにもたらす機能は、革新的なJavaScriptの最大の成長分野の1つを表しています。この章に示されている基礎と基本的な例は、ユーザーのブラウザ内で提供できる力の感覚を提供します。いくつかの本当に興味深いインターフェイスを構築する際に、次の章でこれをさらに拡張します。

それは、

javascriptアンソロジーのサンプル：101エッセンシャルヒント、トリック、ハックのサンプルです。次は何ですか？ オフラインで読むために、このサンプルをPDFとしてダウンロードします。本の目次をチェックして、それが他にカバーしているものを確認してください。そして、他の人が本についてどう思うかを見てください - JavaScriptアンソロジーのライブカスタマーレビュー：101 Essential Tips、Tricks＆Hacks

。

ゼロからのJavaScriptに関するよくある質問（FAQ） Web開発におけるJavaScriptの重要性は何ですか？

JavaScriptは、Web開発における重要なコンポーネントです。これは、Webページに複雑な機能を実装できるプログラミング言語です。 Webページが、タイムリーなコンテンツの更新、インタラクティブマップ、アニメーション化されたグラフィックス、ビデオジュークボックスのスクロールなど、静的な情報を表示するだけでなく、JavaScriptが関与します。標準的なWebテクノロジーのレイヤーケーキの3番目のレイヤーであり、そのうち2つ（HTMLとCSS）が以前の記事で広範囲に使用しました。 Web開発の基礎を形成するHTMLとCSSの基本を理解することから始めます。次に、変数、データ型、関数、ループ、条件などのJavaScriptの基本に徐々に進むことができます。練習はJavaScriptの学習の鍵ですので、定期的にコーディングすることを確認してください。 JavaScriptは独自の概念と構造を備えたユニークな言語であり、より複雑なトピックに移る前にこれらを理解することが重要です。学んだ概念の定期的な練習と適用は、JavaScriptの習得に重要です。

以前のプログラミングの経験なしでjavaScriptを学ぶことができますか？

はい、以前のプログラミングの経験なしでJavaScriptを学ぶことができます。プログラミングのバックグラウンドを持つことは学習プロセスを簡単にすることができますが、前提条件ではありません。 JavaScriptは、Web開発での寛容な構文と幅広い使用法のために、初心者にとって良い第一言語として多くの場合推奨されます。平均して、ゼロから始めて毎日数時間捧げている場合、数週間から数ヶ月で基本を学ぶことが期待できます。 Codecademy、Udemy、FreeCodecampなどのオンラインプラットフォームは、包括的なコースを提供しています。 「Eloquent JavaScript」や「You Do n’t Know JS」などの本も強くお勧めします。さらに、Mozilla Developer Network（MDN）には、JavaScriptに関する広範なドキュメントがあります。スライダー、フォーム検証、ポップアップなどの機能を作成するために使用できます。また、ドキュメントオブジェクトモデル（DOM）を操作して、リアルタイムでWebページのコンテンツとレイアウトを変更できるようにすることもできます。 node.jsは、サーバーでJavaScriptを実行できるJavaScriptランタイムです。 node.jsを使用すると、JavaScriptだけを使用してWebアプリケーション全体を構築できます。これらは、JavaScriptコードの構造を提供し、大規模で保守可能なスケーラブルなWebアプリケーションを簡単に構築できるようにします。例には、React.js、Angular.js、およびvue.js.

javascriptの未来は何ですか？

javascriptは引き続きWeb開発において支配的な力であり、その将来は有望に見えます。 React、Angular、Vueなどのフレームワークの台頭により、JavaScriptはより強力で多用途になりつつあります。さらに、node.jsの開発により、JavaScriptのリーチがサーバー側に拡張され、フルスタック言語になりました。 Webアプリケーションが複雑になり続けているため、熟練したJavaScript開発者の需要は高いままである可​​能性があります。

以上がスクリプトスマート：Quality JavaScriptの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。