diff options
Diffstat (limited to 'files/ja/orphaned/web')
80 files changed, 5110 insertions, 0 deletions
diff --git a/files/ja/orphaned/web/api/audiocontext/mozaudiochanneltype/index.html b/files/ja/orphaned/web/api/audiocontext/mozaudiochanneltype/index.html new file mode 100644 index 0000000000..62f6879ebe --- /dev/null +++ b/files/ja/orphaned/web/api/audiocontext/mozaudiochanneltype/index.html @@ -0,0 +1,95 @@ +--- +title: AudioContext.mozAudioChannelType +slug: Web/API/AudioContext/mozAudioChannelType +translation_of: Web/API/AudioContext/mozAudioChannelType +--- +<p>{{APIRef("Web Audio API")}} {{Non-standard_header}}</p> + +<p>{{domxref("AudioContext")}}インターフェースの<code>mozAudioChannelType</code>読み取り専用プロパティは、Firefox OS デバイスで、オーディオコンテキスト要素で再生される音声を再生するオーディオチャンネルを設定するために使えます。</p> + +<p>これは<a href="/en-US/docs/Web/API/AudioChannels_API">AudioChannels API</a>に定義された非標準のプロパティです。詳細は<a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a>を参照してください。</p> + +<h2 id="構文">構文</h2> + +<pre class="brush: js">var audioCtx = new AudioContext(); +var myAudioChannelType = audioCtx.mozAudioChannelType; +</pre> + +<p><code>AudioContext</code>のオーディオチャンネルタイプを設定できるのは、次のコンストラクタを使う場合のみです。</p> + +<pre class="brush: js">var audioCtx = new AudioContext('ringer');</pre> + +<h3 id="値">値</h3> + +<p>{{domxref("DOMString")}}</p> + +<h2 id="例">例</h2> + +<p>TBD</p> + +<h2 id="仕様">仕様</h2> + +<p>現在はAudioChannels APIには公式の仕様はありません。実装、WebIDLなどの詳細は<a href="https://wiki.mozilla.org/WebAPI/AudioChannels">https://wiki.mozilla.org/WebAPI/AudioChannels</a>を参照してください。</p> + +<h2 id="ブラウザ互換性">ブラウザ互換性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>General support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>General support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>1.2</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参考">参考</h2> + +<ul> + <li><a href="/en-US/Apps/Build/App_permissions">App permissions for Firefox OS</a></li> + <li><a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a></li> + <li>{{domxref("Navigator.mozAudioChannelManager","navigator.mozAudioChannelManager")}}</li> + <li>{{domxref("AudioContext")}}</li> +</ul> diff --git a/files/ja/orphaned/web/api/readablestreamdefaultcontroller/readablestreamdefaultcontroller/index.html b/files/ja/orphaned/web/api/readablestreamdefaultcontroller/readablestreamdefaultcontroller/index.html new file mode 100644 index 0000000000..16574bebce --- /dev/null +++ b/files/ja/orphaned/web/api/readablestreamdefaultcontroller/readablestreamdefaultcontroller/index.html @@ -0,0 +1,107 @@ +--- +title: ReadableStreamDefaultController.ReadableStreamDefaultController() +slug: Web/API/ReadableStreamDefaultController/ReadableStreamDefaultController +tags: + - API + - Constructor + - ReadableStreamDefaultController + - Reference + - Streams +translation_of: Web/API/ReadableStreamDefaultController/ReadableStreamDefaultController +--- +<div>{{APIRef("Streams")}}</div> + +<p class="summary"><span class="seoSummary"><strong><code>ReadableStreamDefaultController()</code></strong> コンストラクターは、<code>ReadableStreamDefaultController</code> オブジェクトのインスタンスを作成して返します。</span></p> + +<div class="note"> +<p><strong>注</strong>: このコンストラクターを手動で使用することはありません — これは、{{domxref("ReadableStream")}} オブジェクトの構築中に使用されます。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>readableStreamDefaultController</em> = new ReadableStreamDefaultController(<em>stream</em>, <em>underlyingSource</em>, <em>size</em>, <em>highWaterMark</em>);</pre> + +<h3 id="Parameters" name="Parameters">パラメーター</h3> + +<dl> + <dt>stream</dt> + <dd>制御される {{domxref("ReadableStream")}}。</dd> + <dt>underlyingSource</dt> + <dd>構築されたストリームインスタンスの動作を定義するメソッドとプロパティを含むオブジェクト。 詳細については、<a href="/ja/docs/Web/API/ReadableStream/ReadableStream#Parameters"><code>ReadableStream()</code> コンストラクターのパラメーター定義</a>を参照してください。</dd> + <dt>size</dt> + <dd> パラメーター <code>chunk</code> を含むメソッド — これは、各チャンクに使用するサイズをバイト単位で示します。</dd> + <dt>highWaterMark</dt> + <dd>負でない整数 — これは、バックプレッシャーが適用される前に内部キューに含めることができるチャンクの総数を定義します。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p>{{domxref("ReadableStreamDefaultController")}} オブジェクトのインスタンス。</p> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<dl> + <dt>TypeError</dt> + <dd>指定された <code>stream</code> パラメーターは {{domxref("ReadableStream")}} ではないか、既にコントローラーが関連付けられています。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次の単純な例では、コンストラクターを使用してカスタムの <code>ReadableStream</code> を作成します（完全なコードについては、<a href="https://mdn.github.io/dom-examples/streams/simple-random-stream/">単純なランダムストリームの例</a>を参照）。 <code>start()</code> 関数は、1秒ごとにテキストのランダムな文字列を生成し、それをストリームのキューに入れます。 {{domxref("ReadableStream.cancel()")}} が何らかの理由で呼び出された場合、生成を停止するための <code>cancel()</code> 関数も提供します。</p> + +<p>{{domxref("ReadableStreamDefaultController")}} オブジェクトは、<code>start()</code> 関数および <code>pull()</code> 関数のパラメーターとして提供されることに注意してください。</p> + +<p>ボタンが押されると、生成を停止し、{{domxref("ReadableStreamDefaultController.close()")}} を使用してストリームを閉じ、ストリームからデータを読み取る別の関数を実行します。</p> + +<pre class="brush: js">const stream = new ReadableStream({ + start(controller) { + interval = setInterval(() => { + let string = randomChars(); + + // ストリームに文字列を追加 + controller.enqueue(string); + + // それを画面に表示 + let listItem = document.createElement('li'); + listItem.textContent = string; + list1.appendChild(listItem); + }, 1000); + + button.addEventListener('click', function() { + clearInterval(interval); + fetchStream(); + controller.close(); + }) + }, + pull(controller) { + // この例では実際には pull は必要ありません + }, + cancel() { + // リーダーがキャンセルされた場合に呼び出されるため、 + // 文字列の生成を停止する必要があります + clearInterval(interval); + } +});</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName("Streams","#rs-default-controller-constructor","ReadableStreamDefaultController()")}}</td> + <td>{{Spec2('Streams')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.ReadableStreamDefaultController.ReadableStreamDefaultController")}}</p> diff --git a/files/ja/orphaned/web/api/window/getattention/index.html b/files/ja/orphaned/web/api/window/getattention/index.html new file mode 100644 index 0000000000..4376715018 --- /dev/null +++ b/files/ja/orphaned/web/api/window/getattention/index.html @@ -0,0 +1,25 @@ +--- +title: window.getAttention +slug: Web/API/Window/getAttention +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/Window/getAttention +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>ユーザの注意を引きつける動作をします。これがどのような動作になるかは、OS と ウィンドウマネージャー次第で変化します。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox">window.getAttention(); +</pre> +<h2 id="Notes" name="Notes">注記</h2> +<p>Windows では、ウィンドウのタスクバーのボタンが点滅します（ユーザがこれを無効化していない場合）。</p> +<p>Linux では、挙動はウィンドウマネージャーによって変化します。タスクバーボタンが点滅するのもあれば、直ちにウィンドウにフォーカスするものもあります。これは調整可能であるかもしれません。</p> +<p>Macintosh では、デスクトップの右上端のアイコンが点滅します。</p> +<p>この関数は、Web コンテンツでは、無効化されています。Gecko も Internet Explorer も、現在はこの機能を Web コンテンツに対してはサポートしていません。<code>getAttention</code> は、Gecko アプリケーションでの <a href="/ja/docs/Chrome">chrome</a> から利用したときには、いまだに動作します。</p> +<h2 id="Specification" name="Specification">仕様</h2> +<p>{{DOM0}}</p> diff --git a/files/ja/orphaned/web/compatibility_faq/broken_table_layout.html/index.html b/files/ja/orphaned/web/compatibility_faq/broken_table_layout.html/index.html new file mode 100644 index 0000000000..32dc4a39a4 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/broken_table_layout.html/index.html @@ -0,0 +1,67 @@ +--- +title: テーブルのレイアウトが崩れている +slug: Web/Compatibility_FAQ/Broken_Table_Layout.html +tags: + - Compatibility + - Layout +--- +<h2 id="概要">概要</h2> + +<p> テーブルのセル幅に統一性がなく、テーブル全体のレイアウトが崩れます。</p> + +<div style=""><img alt="" src="https://mdn.mozillademos.org/files/9963/0107_1.jpg" style="width: 266px; height: 500px; margin-right: 10px; margin-left: 10px;"> <img alt="" src="https://mdn.mozillademos.org/files/9965/0107_2.jpg" style="width: 271px; height: 500px; margin-right: 10px; margin-left: 10px;"></div> + +<p>左：Firefox 右：他ブラウザ</p> + +<h2 id="要因">要因</h2> + +<p> 要因の代表例として以下があります。</p> + +<ol> + <li> + <p><strong>テーブルのセル幅の未指定</strong></p> + + <p> テーブルのセル幅が明示的に指定されていないため、セルの横幅がテーブル各行左側のセルのサイズに合わせて伸縮しています。</p> + + <pre><code><font size="3"> #maincontent section.category .list div{ + display: table; + width: 100%; + border-top: #b2b2b2 1px solid; + } </font></code></pre> + + <p> 上記のようなテーブル指定に加えて、更に横並びのセルが左右均等となるような配置指定が必要となります。<br> + </p> + </li> +</ol> + +<h2 id="解決策">解決策</h2> + +<p> 解決策の代表例として以下があります。</p> + +<ol> + <li> + <p><strong>テーブルのセル幅の未指定</strong></p> + + <p>テーブルの配置指定に <a href="https://developer.mozilla.org/ja/docs/Web/CSS/table-layout">table-layout</a>: fixed; を適用させます。<br> + <a href="https://developer.mozilla.org/ja/docs/Web/CSS/table-layout">table-layout</a>: fixed; の指定により、横並びのセル幅が左右均等になります。</p> + + <pre><code><font size="3"> #maincontent section.category .list div{ + display: table; + <font>table-layout</font>: <b>fixed</b>; + width: 100%; + border-top: #b2b2b2 1px solid; + } </font></code></pre> + + <p> </p> + </li> +</ol> + +<h2 id="メリット">メリット</h2> + +<p> ・他のブラウザでも互換性を維持することができます。<br> + ・細かいpxの指定をせずにテーブルの見た目を整えることができます。<br> + ・また、後続するセルのコンテンツが用意された列幅をオーバーフロー(はみ出し)した場合にも、<br> + 発生したセルに対して<a href="https://developer.mozilla.org/ja/docs/Web/CSS/overflow">overflow</a>プロパティを用いればはみ出したセルの内容を表示できるようになるなど、セルの内容変更にも柔軟に対応できます。</p> + +<p><br> + <a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/orphaned/web/compatibility_faq/cut_off_text.html/index.html b/files/ja/orphaned/web/compatibility_faq/cut_off_text.html/index.html new file mode 100644 index 0000000000..9824d3d62d --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/cut_off_text.html/index.html @@ -0,0 +1,60 @@ +--- +title: 文字列の一部が表示されずに見切れる +slug: Web/Compatibility_FAQ/Cut_Off_Text.html +tags: + - Compatibility + - Layout +--- +<h2 id="概要">概要</h2> + +<p> 検索等のテキストボックス内のプレースホルダーが見切れています。<br> + プレースホルダーの文字列が全て表示できず、途中で見切れている場合があります。</p> + +<p> 表示画面</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9967/0108.png" style="width: 289px; height: 120px; margin-right: 50px; margin-left: 50px;"></p> + +<h2 id="要因">要因</h2> + +<p> 要因の代表例として以下があります。</p> + +<ol> + <li> + <p><strong>表示領域が足りていない </strong><br> + 表示領域の<a href="https://developer.mozilla.org/ja/docs/Web/CSS/width">width</a>プロパティの値が表示させるテキストの文字数分のpx数より小さいことで見切れています。<br> + テキストを全て表示させるには、テキストよりも大きな<a href="https://developer.mozilla.org/ja/docs/Web/CSS/width">width</a>プロパティの値を設定する必要があります。</p> + + <pre><code><font size="3"> input[type=text] { + margin:0 6px; + <font>width</font>:165px; + } </font></code></pre> + + <p> </p> + </li> +</ol> + +<h2 id="解決策">解決策</h2> + +<p> 各要因の解決策の代表例として以下があります。</p> + +<ol> + <li> + <p><strong>表示領域が足りていない</strong><br> + 表示領域の<a href="https://developer.mozilla.org/ja/docs/Web/CSS/width">width</a>プロパティを要素のテキストに合わせて、再設定することで正しく表示されます。<br> + 表示するテキストが長すぎてテキストボックスを超えてしまう場合は、テキストボックスの横幅の調整も必要となります。</p> + + <pre><code><font size="3"> input[type=text] { + margin:0 6px; + <font>width</font>: <strong>200px;</strong> + } </font></code></pre> + + <p> </p> + </li> +</ol> + +<h2 id="メリット">メリット</h2> + +<p> ・少ない調整で正しく表示を行えるようになります。<br> + ・要素内のpx指定の変更のみなので、他ブラウザへの影響がありません。</p> + +<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/orphaned/web/compatibility_faq/empty_background_color.html/index.html b/files/ja/orphaned/web/compatibility_faq/empty_background_color.html/index.html new file mode 100644 index 0000000000..0574ed49ff --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/empty_background_color.html/index.html @@ -0,0 +1,58 @@ +--- +title: 'アイコン,バナーの色が抜けている' +slug: Web/Compatibility_FAQ/Empty_Background_Color.html +tags: + - Compatibility + - Decoration +--- +<h2 id="概要">概要</h2> + +<p> 他ブラウザで表示されるアイコンやバナーの色が、mobile版Firefoxでは表示されません。<br> + 領域が真っ白な表示になっていたり、下レイヤーの要素の背景が表示される場合があります。</p> + +<div> +<p><img alt="" src="https://mdn.mozillademos.org/files/9969/0202.jpg" style="width: 493px; height: 250px; margin-right: 50px; margin-left: 50px;"></p> +</div> + +<h2 id="要因">要因</h2> + +<p> 要因の代表例として以下があります。</p> + +<ol> + <li> + <p><strong>ベンダープレフィックス</strong><br> + 表示に必要なベンダープレフィックス付きプロパティが記述されていない場合があります。</p> + + <pre><code><font size="3"> a.button_hoge { + background: -webkit-gradient( linear, center top, center bottom, from(#ff4466), color-stop(0.9, #ff4466), to(rgba(255,255,255,0.0))); + } </font></code></pre> + + <p>上記の backgound: -webkit-gradient(); は、webkitブラウザ用の記述となります。<br> + また、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/gradient">gradient</a>値を指定する代替の記述もないため、結果として、背景からグラデーション装飾が抜けてしまいました。</p> + </li> +</ol> + +<h2 id="解決策">解決策</h2> + +<p> 要因の解決策の代表例として以下があります。</p> + +<ol> + <li> + <p><strong>ベンダープレフィックス</strong><br> + CSS3準拠の backgound: <a href="https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient">linear-gradient</a>(); を追記します。</p> + + <pre><code><font size="3"> a.button_hoge { + background: -webkit-gradient( linear, center top, center bottom, from(#ff4466), color-stop(0.9, #ff4466), to(rgba(255,255,255,0.0))); + <font>background</font>: <strong>linear-gradient(to bottom, #ff4466 90%, #ffffff);</strong> + } </font></code></pre> + + <p>注意：<a href="https://developer.mozilla.org/ja/docs/Web/CSS/gradient">gradient</a>値や<a href="https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient">linear-gradient()</a>関数はブラウザやバージョンごとに構文が異なりますので注意が必要です。</p> + </li> +</ol> + +<h2 id="メリット">メリット</h2> + +<p> ・他のブラウザでも互換性を維持することができます。<br> + ・追記のみで対応可能です。</p> + +<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/orphaned/web/compatibility_faq/index.html b/files/ja/orphaned/web/compatibility_faq/index.html new file mode 100644 index 0000000000..752ad7c6ff --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/index.html @@ -0,0 +1,91 @@ +--- +title: サイト表示互換性に関するノウハウ +slug: Web/Compatibility_FAQ +tags: + - Compatibility +--- +<hr> +<p>モバイルデバイスを利用する上で、特定のデバイス／ブラウザに依存せず、どのブラウザでもサイトが正常表示可能な環境が理想的と考えています。<br> + 本稿では、主にAndroid版Firefoxで発生しているよくあるサイト表示不具合をパターン毎に分類し、Web標準に従ったコンテンツ記載によりブラウザ間の表示互換性を保てるノウハウをご紹介します。</p> + +<h2 id="目次">目次</h2> + +<hr> +<h3 id="1._画面レイアウトが崩れる"><strong>1. 画面レイアウトが崩れる</strong></h3> + +<ul> + <li> + <h4 id="画面外に不要な空白が発生する"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/No_Wrap.html">画面外に不要な空白が発生する</a></code></strong></h4> + </li> + <li> + <h4 id="ナビゲーションメニューが他のアイコンと重なって表示されたり、画面からはみ出たりしてしまう"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/Overwrapped_Navigation.html">ナビゲーションメニューが他のアイコンと重なって表示されたり、画面からはみ出たりしてしまう</a></code></strong></h4> + </li> + <li> + <h4 id="アイコンの中身が外側にはみ出すなどして形が壊れている"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/Misaligned_Text_Inside_Icon.html">アイコンの中身が外側にはみ出すなどして形が壊れている</a></code></strong></h4> + </li> + <li> + <h4 id="アイコン画像の表示位置がずれる"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/Misaligned_Icon.html">アイコン,画像の表示位置がずれる</a></code></strong></h4> + </li> + <li> + <h4 id="アイコン画像が期待と異なるサイズで表示される"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/Invalid_Icon_Size.html">アイコン,画像が期待と異なるサイズで表示される</a></code></strong></h4> + </li> + <li> + <h4 id="アイコンが隣接する他のアイコンと重なってしまう"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/Overwrapped_Icon.html">アイコンが隣接する他のアイコンと重なってしまう</a></code></strong></h4> + </li> + <li> + <h4 id="テーブルのレイアウトが崩れている"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/Broken_Table_Layout.html">テーブルのレイアウトが崩れている</a></code></strong></h4> + </li> + <li> + <h4 id="文字列の一部が表示されずに見切れる"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/Cut_Off_Text.html">文字列の一部が表示されずに見切れる</a></code></strong></h4> + </li> + <li> + <h4 id="文字列の表示位置がずれる"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/Misaligned_Text.html">文字列の表示位置がずれる</a></code></strong></h4> + </li> +</ul> + +<h3 id="2._装飾が抜ける"><strong>2. 装飾が抜ける</strong></h3> + +<ul> + <li> + <h4 id="ページの背景色が抜けている"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/No_Background_Shown.html">ページの背景色が抜けている</a></code></strong></h4> + </li> + <li> + <h4 id="アイコンバナーの色が抜けている"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/Empty_Background_Color.html">アイコン,バナーの色が抜けている</a></code></strong></h4> + </li> + <li> + <h4 id="mobile版Firefoxと他ブラウザで下線の色が相違している"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/Underline_Color_Diffrence.html">mobile版Firefoxと他ブラウザで下線の色が相違している</a></code></strong></h4> + </li> + <li> + <h4 id="枠のシャドウや角丸が抜けている"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/No_Decoreation_Shown.html">枠のシャドウや角丸が抜けている</a></code></strong></h4> + </li> +</ul> + +<h3 id="3._画面要素の一部が表示されない"><strong>3. 画面要素の一部が表示されない</strong></h3> + +<ul> + <li> + <h4 id="アイコンが表示されない"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/No_Icon_Shown.html">アイコンが表示されない</a></code></strong></h4> + </li> + <li> + <h4 id="罫線が表示されない"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/No_Border_Line_Shown.html">罫線が表示されない</a></code></strong></h4> + </li> + <li> + <h4 id="チェックボックスのレ点が表示されない"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/No_Checkbox_Check_Shown.html">チェックボックスのレ点が表示されない</a></code></strong></h4> + </li> +</ul> + +<hr> +<h3 id="TIPS"><strong>TIPS</strong></h3> + +<ul> + <li> + <h4 id="mobile版Firefox向けベンダープレフィックス対処方法まとめ"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/Tips_Vendor_Prefix.html">mobile版Firefox向けベンダープレフィックス対処方法まとめ</a></code></strong></h4> + </li> + <li> + <h4 id="ブラウザごとの表示の違い(User-Agent-Stylesheetによる表示差異)"><strong><code><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/Tips_Default_Style_Difference.html">ブラウザごとの表示の違い(User-Agent-Stylesheetによる表示差異)</a></code></strong></h4> + + <p> </p> + </li> +</ul> + +<hr> diff --git a/files/ja/orphaned/web/compatibility_faq/invalid_icon_size.html/index.html b/files/ja/orphaned/web/compatibility_faq/invalid_icon_size.html/index.html new file mode 100644 index 0000000000..520c573e75 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/invalid_icon_size.html/index.html @@ -0,0 +1,92 @@ +--- +title: アイコン、画像が期待と異なるサイズで表示される +slug: Web/Compatibility_FAQ/Invalid_Icon_Size.html +tags: + - Compatibility + - Layout +--- +<h2 id="概要">概要</h2> + +<p> アイコンや画像が期待と異なるサイズで表示されます。<br> + 他のブラウザと比較した場合や、同ページで複数使用されている同アイコンで比較した場合に、画像が小さく表示されたり、大きく表示されたりします。<br> + 結果、他の要素と並んだ場合に不自然な表示となってしまいます。</p> + +<div> +<p> 表示画面</p> +<img alt="" src="https://mdn.mozillademos.org/files/9971/0105.jpg" style="width: 481px; height: 80px; margin-right: 50px; margin-left: 50px;"> +<p> </p> +</div> + +<h2 id="要因">要因</h2> + +<p> 要因の代表例として以下があります。</p> + +<ol> + <li> + <p><strong>ベンダープレフィックス </strong><br> + 他のブラウザで正しく表示出来ている場合でもFirefoxで表示が崩れている場合は、ベンダープレフィックスの指定が入っていることがあります。<br> + -webkit-linear-gradient()関数等の指定で表示領域を設定していると、Firefoxでは認識できず、指定されていない状態になっています。</p> + + + <pre><code><font size="3"> input[type="submit"] { + position: absolute; + right: 15px; + width: 40px; + border-radius: 5px; + padding: 6px 19px; + margin-top: 10px; + background: url(../images/icon_serach.png) no-repeat center center, <strong>-webkit-linear-gradient(top, #ffffff 1%, #e5c21f 2%, #e6a227 90%, #e6a026);</strong> + } </font></code></pre> + + <p> </p> + </li> + <li> + <p><strong>各アイコンの配置指定方法が統一されていない</strong><br> + 各アイコンの配置指定方法が統一されていない為、各アイコンの表示状態が異なってしまう場合があります。<br> + インラインでの装飾指定とそれぞれのアイコンにおける%指定やfloatなどの指定が統一していない場合に、ブラウザによっては、表示サイズや配置が異なってしまうことがあります。</p> + + + <pre><code><font size="3"> インライン {background: url('/images/shared/arw_r_black_01.png') no-repeat scroll 97.5% 50% #EFEFEF !important;} + インライン {float: right; clear: both;} </font></code></pre> + + <p> </p> + </li> +</ol> + +<h2 id="解決策">解決策</h2> + +<p> 各要因の解決策の代表例として以下があります。</p> + +<ol> + <li> + <p><strong>ベンダープレフィックス</strong><br> + webkit指定が入っている場合は、他ブラウザ互換用に別途指定を行う必要があります。<br> + -webkit-linear-gradient()関数の場合は、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient">linear-gradient()</a>関数を追記することでFirefoxでも指定を行うことができます。<br> + ただし、-webkit-linear-gradient()関数と<a href="https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient">linear-gradient()</a>関数は、伴う引数が異なる為、例に従って記載してください。</p> + + <pre><code><font size="3"> input[type="submit"] { + position: absolute; + right: 15px; + width: 40px; + border-radius: 5px; + padding: 6px 19px; + margin-top: 10px; + background: url(../images/icon_serach.png) no-repeat center center, -webkit-linear-gradient(top, #ffffff 1%, #e5c21f 2%, #e6a227 90%, #e6a026); + <font>background</font>: <strong>url(../images/icon_serach.png) no-repeat center center, linear-gradient(to top, #ffffff 1%, #e5c21f 2%, #e6a227 90%, #e6a026);</strong> + } </font></code></pre> + + <p> </p> + </li> + <li> + <p><strong>各アイコンの配置指定方法が統一されていない</strong><br> + 各アイコンの配置指定方法を統一することで解消されます。<br> + インラインで各アイコンの指定を行うと統一できていない場合があるので、別途CSSファイルを作成し、統一した指定を定義するとよいでしょう。</p> + </li> +</ol> + +<h2 id="メリット">メリット</h2> + +<p> ・他のブラウザでも互換性を維持することができます。<br> + ・HTML全体の指定を出来る限り統一し、CSSファイルで定義することで変更修正が容易になります。</p> + +<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/orphaned/web/compatibility_faq/misaligned_icon.html/index.html b/files/ja/orphaned/web/compatibility_faq/misaligned_icon.html/index.html new file mode 100644 index 0000000000..f3fbfffcca --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/misaligned_icon.html/index.html @@ -0,0 +1,128 @@ +--- +title: アイコン、画像の表示位置がずれる +slug: Web/Compatibility_FAQ/Misaligned_Icon.html +tags: + - Compatibility + - Layout +--- +<h2 id="概要">概要</h2> + +<p> アイコンや画像の表示位置がずれて表示されてしまいます。<br> + 他のブラウザと比較した場合、上下左右にずれて表示されたり、横並びに表示されるべきアイコンや画像が縦並びに表示されたりします。</p> + +<p> <img alt="" src="https://mdn.mozillademos.org/files/9973/0104_1.png" style="width: 500px; height: 240px;"> </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9975/0104_2.png" style="width: 621px; height: 240px; margin-right: 0px; margin-left: 0px;"></p> + +<div style="float: left;"> </div> + +<p> </p> + +<h2 id="要因">要因</h2> + +<p> 複数の要因が考えられますが、代表例として以下があります。</p> + +<ol> + <li> + <p><strong>アイコンや画像が横幅に収まらず、折り返されている</strong><br> + span要素等のブロックが横幅に収まらずに折り返されて表示されている場合があります。<br> + ブラウザの違いによりインラインブロック間にできる間隔が異なる事がありますので、他のブラウザで横並びに表示できていても<br> + Firefoxで表示すると折り返され、縦並びに表示されてしまいます。</p> + + + <pre><code><font size="3"> .btn-pulldown-main { + box-sizing: border-box; + <font>width</font>: <strong>49.2%;</strong> + display: inline-block; + padding: 9px 0; + } </font></code></pre> + + <p> </p> + </li> + <li> + <p><strong>zoomプロパティが使用されている</strong><br> + zoomプロパティが使用されている場合、Firefoxでは適応されません。<br> + 他のブラウザでは、適応されているプロパティがFirefoxでは適応されていない場合、見栄えに差異が出てしまいます。<br> + よって、他のブラウザで調整した表示位置が、Firefoxでは誤った表示となってしまいます。</p> + + + <pre><code><font size="3"> .menu { + display: block; + position: absolute; + top: 0px; + right: 0px; + <font>zoom</font>: <strong>0.5;</strong> + } </font></code></pre> + + <p> </p> + </li> + <li> + <p><strong>ブラウザの解像度の違いによる表示差異</strong><br> + ブラウザの解像度の違いによって、px指定されているマージンが表示上、異なってしまう場合があります。<br> + 結果、アイコンや画像の表示位置がブラウザ間でずれて表示されてしまいます。</p> + + + <pre><code><font size="3"> img.message { + position: relative; + margin-top: -52px; + } </font></code></pre> + + <p> </p> + </li> +</ol> + +<h2 id="解決策">解決策</h2> + +<p> 各要因の解決策の代表例として以下があります。</p> + +<ol> + <li> + <p><strong>アイコンや画像が横幅に収まらず、折り返されている</strong><br> + 各ブロックの横幅を調整することで解消されます。<br> + ブラウザによってインラインブロック間のマージンが異なる場合があるため、実際に表示させながら、横幅に各ブロックが収まる(折り返されない)様に調整していきます。</p> + + <pre><code><font size="3"> .btn-pulldown-main { + box-sizing: border-box; + <font>width</font>: <strong>49.0%;</strong> + display: inline-block; + padding: 9px 0; + } </font></code></pre> + + <p> </p> + </li> + <li> + <p><strong>zoomプロパティが使用されている</strong><br> + zoomプロパティはFirefoxでは適応されないため、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/height">height</a>プロパティで位置を指定するのがよいです。<br> + その他の指定もpx指定で調整することで、他のブラウザとの表示差異はなくなります。</p> + + <pre><code><font size="3"> インライン { <font>height</font>: <strong>80px;</strong>} + + .menu { + display: block; + position: absolute; + <font>top</font>: <strong>-15px;</strong> + <font>right</font>: <strong>-10px;</strong> + } </font></code></pre> + + <p> </p> + </li> + <li> + <p><strong>ブラウザの解像度の違いによる表示差異</strong><br> + アイコンの位置を<a href="https://developer.mozilla.org/ja/docs/Web/CSS/padding">padding</a>プロパティで再調整することで正しく表示させることが可能となります。</p> + + + <pre><code><font size="3"> img.message { + position: relative; + margin-top: -52px; + <font>padding</font>:<strong> 0 0 6px 0;</strong> + } </font></code></pre> + + <p> </p> + </li> +</ol> + +<h2 id="メリット">メリット</h2> + +<p> ・他のブラウザでも互換性を維持することができます。</p> + +<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/orphaned/web/compatibility_faq/misaligned_text.html/index.html b/files/ja/orphaned/web/compatibility_faq/misaligned_text.html/index.html new file mode 100644 index 0000000000..fe57d3e89a --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/misaligned_text.html/index.html @@ -0,0 +1,116 @@ +--- +title: 文字列の表示位置がずれる +slug: Web/Compatibility_FAQ/Misaligned_Text.html +tags: + - Compatibility + - Layout +--- +<h2 id="概要">概要</h2> + +<p> 文字列の表示位置が上下左右にずれて表示されたり、プルダウンメニュー等の表示領域をはみ出して表示したりすることがあります。<br> + その場合、横スクロールが行えないことを想定したモバイル向けwebページで横スクロールが可能となってしまいます。</p> + +<div style="margin-left: 50px;">表示画面</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9977/0109.jpg" style="height: 320px; margin-left: 50px; margin-right: 50px; width: 567px;"></p> + +<h2 id="要因">要因</h2> + +<p> 複数の要因が考えられますが、代表例として以下があります。</p> + +<ol> + <li> + <p><strong>ブラウザ間でのデフォルト値の差異</strong><br> + ブラウザ毎でデフォルト値を持っています。 <a href="https://developer.mozilla.org/ja/docs/Web/CSS/line-height">line-height</a>: normal; 等で指定するとデフォルト値で表示されます。<br> + しかし、ブラウザによってはデフォルト値が異なるため、同じようにnormalで指定してもブラウザ比較すると異なる表示となってしまうことがあります。</p> + + <pre class="notranslate"><code><font size="3"> .recommended { + text-decoration: none; + display: inline; + width: auto; + height: auto; + <font>line-height</font>: <strong>normal;</strong> + vertical-align: baseline; + } </font></code></pre> + + + </li> + <li> + <p><strong>ベンダープレフィックス</strong><br> + 他のブラウザで正しく表示出来ているが、Firefoxで表示が崩れている場合は、ベンダープレフィックスの指定が入っていることが考えられます。<br> + -webkit-box-sizingプロパティ等で指定している場合、Firefoxでは認識できないため、表示崩れが発生します。</p> + + <pre class="notranslate"><code><font size="3"> #button-06 { + display: table; + width: 99.9%; + <font>-webkit-box-sizing</font>: <strong>border-box;</strong> + } </font></code></pre> + + + </li> + <li> + <p><strong>ブラウザ間でのpx指定の差異</strong><br> + 様々なアイコン上の文字列をCSSの<a href="https://developer.mozilla.org/ja/docs/Web/CSS/padding">padding</a>プロパティ等を使用して、配置を指定している場合、ブラウザ間で表示がずれてしまう場合があります。<br> + これは、ブラウザ間でpx指定の差異があるために発生しています。</p> + + <pre class="notranslate"><code><font size="3"> .gender-type { + <font>padding-top</font>: <strong>3px;</strong> + } </font></code></pre> + + + </li> +</ol> + +<h2 id="解決策">解決策</h2> + +<p> 各要因の解決策の代表例として以下があります。</p> + +<ol> + <li> + <p><strong>ブラウザ間でのデフォルト値の差異</strong><br> + デフォルト値で設定するとそれぞれのブラウザで解釈の差異が生まれてしまう可能性があるため、<br> + 明示的に値を指定することで正しく表示できます。</p> + + <pre class="notranslate"><code><font size="3"> .recommended { + text-decoration: none; display: inline; + width: auto; + height: auto; + <font>line-height</font>: <strong>1;</strong> + vertical-align: baseline; + } </font></code></pre> + + + </li> + <li> + <p><strong>ベンダープレフィックス</strong><br> + webkit指定が入っている場合は、他のブラウザとの互換用に別途指定を行う必要があります。<br> + -webkit-box-sizingプロパティの場合は、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing">box-sizing</a>プロパティを追記することでFirefoxでも指定を行うことができます。</p> + + <pre class="notranslate"><code><font size="3"> #button-06 { + display: table; + width: 99.9%; + -webkit-box-sizing: border-box; + <font>box-sizing</font>: <strong>border-box;</strong> + } </font></code></pre> + + + </li> + <li> + <p><strong>ブラウザ間でのpx指定の差異</strong><br> + 指定に差異が出てしまっているものに関しては、個々の要素に<a href="https://developer.mozilla.org/ja/docs/Web/CSS/padding">padding</a>プロパティ指定を追記し、<br> + それぞれで調整を行うことで、想定の表示を行うことが可能となります。</p> + + <pre class="notranslate"><code><font size="3"> .gender-type.blc-hdr-rgt { + float: right; + <font>padding</font>: <strong>1.5px;</strong> + } </font></code></pre> + + + </li> +</ol> + +<h2 id="メリット">メリット</h2> + +<p> ・デフォルト値ではなく、明示的に値を指定することで、他のブラウザで差異があった場合にも対応できます。</p> + +<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/orphaned/web/compatibility_faq/misaligned_text_inside_icon.html/index.html b/files/ja/orphaned/web/compatibility_faq/misaligned_text_inside_icon.html/index.html new file mode 100644 index 0000000000..bb9afac07e --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/misaligned_text_inside_icon.html/index.html @@ -0,0 +1,100 @@ +--- +title: アイコンの中身が外側にはみ出すなどして形が壊れている +slug: Web/Compatibility_FAQ/Misaligned_Text_Inside_Icon.html +tags: + - Compatibility + - Layout +--- +<h2 id="概要">概要</h2> + +<p> アイコンの中身が外にはみ出して形が崩れてしまいます。</p> + +<div style="margin-left: 50px;">表示画面</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9979/0103.jpg" style="width: 318px; height: 180px; margin-right: 50px; margin-left: 50px;"></p> + +<h2 id="要因">要因</h2> + +<p> 複数の要因が考えられますが、代表例として以下があります。</p> + +<ol> + <li> + <p><strong>アイコンの横幅指定が誤っている</strong><br> + アイコンの横幅指定が画面横幅を超えて指定されている為、画面の外にアイコンがはみ出してしまい、形が崩れています。<br> + 横幅に<a href="https://developer.mozilla.org/ja/docs/Web/CSS/max-width">max-width</a>プロパティを指定した場合、横画面表示時のサイズで指定されてしまうため、横幅が可変した場合に対応できません。</p> + + + <pre><code><font size="3"> img { + <font>max-width</font>: <strong>100%;</strong> + height: auto; + vertical-align: middle; + border: 0px none; + } </font></code></pre> + + <p> </p> + </li> + <li> + <p><strong>ベンダープレフィックス</strong><br> + 他のブラウザで正しく表示出来ているが、Firefoxで表示が崩れている場合は、ベンダープレフィックスの指定が入っていることが考えられます。<br> + -webkit-background-sizeプロパティ等の指定で表示領域を設定していると、Firefoxでは認識できず、指定されていない状態になっています。</p> + + + <pre><code><font size="3"> h3 { + padding: 10px 40px 10px 10px; + background: url(/images/open.gif) no-repeat 98% 50%; + <font>-webkit-background-size</font>: <strong>21px 21px;</strong> + font-weight: bold; + font-size: 12px; + cursor: pointer; + } </font></code></pre> + + <p> </p> + </li> +</ol> + +<h2 id="解決策">解決策</h2> + +<p> 各要因の解決策の代表例として以下があります。</p> + +<ol> + <li> + <p><strong>アイコンの横幅指定が誤っている</strong><br> + <a href="https://developer.mozilla.org/ja/docs/Web/CSS/max-width">max-width</a>: 100%; で指定されている場合は、横画面表示時のサイズで指定されてしまうため、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/width">width</a>: 100%; に修正することで縦画面表示のサイズにも対応できます。</p> + + + <pre><code><font size="3"> img { + <font>width</font>: <strong>100%;</strong> + height: auto; + vertical-align: middle; + border: 0px none; + } </font></code></pre> + + <p> </p> + </li> + <li> + <p><strong>ベンダープレフィックス </strong><br> + webkit指定が入っている場合は、他ブラウザ互換用に別途指定を行う必要があります。<br> + -webkit-background-sizeプロパティの場合は、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/background-size">background-size</a>プロパティを追記することでFirefoxでも指定を行うことができます。<br> + 引数は同様のものが使用可能です。</p> + + + <pre><code><font size="3"> h3 { + padding: 10px 40px 10px 10px; + background: url(/images/open.gif) no-repeat 98% 50%; + -webkit-background-size: 21px 21px; + <font>background-size</font>: <strong>21px 21px;</strong> + font-weight: bold; + font-size: 12px; + cursor: pointer; + } </font></code></pre> + + <p> </p> + </li> +</ol> + +<h2 id="メリット">メリット</h2> + +<p> ・画面サイズの可変に対応可能となります。<br> + ・他のブラウザでも互換性を維持することができます。</p> + +<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/orphaned/web/compatibility_faq/no_background_shown.html/index.html b/files/ja/orphaned/web/compatibility_faq/no_background_shown.html/index.html new file mode 100644 index 0000000000..a89fb50986 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/no_background_shown.html/index.html @@ -0,0 +1,60 @@ +--- +title: ページの背景色が抜けている +slug: Web/Compatibility_FAQ/No_Background_Shown.html +tags: + - Compatibility + - Decoration +--- +<h2 id="概要">概要</h2> + +<p> 他ブラウザにて表示される背景色が、mobile版Firefoxにて表示されません。<br> + 領域が真っ白な表示になっていたり、下レイヤーの要素の背景が表示されたりします。</p> + +<div> +<div style="margin-left: 50px;">表示画面</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9981/0201.jpg" style="width: 493px; height: 250px; margin-right: 50px; margin-left: 50px;"></p> +</div> + +<h2 id="要因">要因</h2> + +<p> 要因の代表例として以下があります。</p> + +<ol> + <li> + <p><strong>ベンダープレフィックス</strong><br> + 必要なベンダープレフィックス付きプロパティが記述されていない場合があります。</p> + + <pre><code><font size="3"> .bg_hoge { + background: -webkit-gradient( linear, center top, center bottom, from(#ff4466), color-stop(0.9, #ff4466), to(rgba(255,255,255,0.0))); + } </font></code></pre> + + <p>上記の backgound: -webkit-gradient(); は、webkitブラウザ用の記述となります。<br> + また、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/gradient">gradient</a>値を指定する代替の記述もないため、結果として、背景からグラデーション装飾が抜けてしまいます。</p> + </li> +</ol> + +<h2 id="解決策">解決策</h2> + +<p> 要因の解決策の代表例として以下があります。</p> + +<ol> + <li> + <p><strong>ベンダープレフィックス</strong><br> + CSS3準拠の backgound: <a href="https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient">linear-gradient</a>(); を追記します。</p> + + <pre><code><font size="3"> .bg_hoge { + background: -webkit-gradient( linear, center top, center bottom, from(#ff4466), color-stop(0.9, #ff4466), to(rgba(255,255,255,0.0))); + <font>background</font>: <strong>linear-gradient(to bottom, #ff4466 90%, #ffffff);</strong> + } </font></code></pre> + + <p>注意：<a href="https://developer.mozilla.org/ja/docs/Web/CSS/gradient">gradient</a>値や<a href="https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient">linear-gradient()</a>関数はブラウザやバージョンごとに構文が異なりますので注意が必要です。</p> + </li> +</ol> + +<h2 id="メリット">メリット</h2> + +<p> ・他のブラウザでも互換性を維持することができます。<br> + ・追記のみの対応のため改修が容易です。</p> + +<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/orphaned/web/compatibility_faq/no_border_line_shown.html/index.html b/files/ja/orphaned/web/compatibility_faq/no_border_line_shown.html/index.html new file mode 100644 index 0000000000..2a00bcebe7 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/no_border_line_shown.html/index.html @@ -0,0 +1,60 @@ +--- +title: 罫線が表示されない +slug: Web/Compatibility_FAQ/No_Border_Line_Shown.html +tags: + - Compatibility + - Invisible element +--- +<h2 id="概要">概要</h2> + +<p> 他ブラウザで表示されている罫線が、Firefoxで表示されない場合があります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9983/0302.jpg" style="width: 468px; height: 250px; margin-right: 50px; margin-left: 50px;"></p> + +<h2 id="要因">要因</h2> + +<p> 要因の代表例として以下があります。</p> + +<ol> + <li> + <p><strong>他ブラウザで独自のCSSが適応されている</strong><br> + 例えば、Chromeではブラウザ独自のCSSにて、hr要素に<a href="https://developer.mozilla.org/ja/docs/Web/CSS/background-color">background-color</a>プロパティを指定することができます。<br> + そのため、Firefoxで表示されていない罫線がChromeでは表示されるということが起きてしまいます。<br> + 特に、コンテンツの記述やFirefoxの動作が問題になっているわけではありません。</p> + </li> +</ol> + +<h2 id="解決策">解決策</h2> + +<p> 要因の解決策の代表例として以下があります。</p> + +<ol> + <li> + <p><strong>他ブラウザで独自のCSSが適応されている</strong><br> + Firefox側のコンテンツの記述、動作に問題はありませんが、下記の方法で統一することが可能です。<br> + まず、表示させたい要素のインラインに罫線(<a href="https://developer.mozilla.org/ja/docs/Web/CSS/border-top">border-top</a>: thin solid;)を指定します。<br> + そして、他ブラウザ(この場合はChrome)で入っている指定をリセット記述(<a href="https://developer.mozilla.org/ja/docs/Web/CSS/background-color">background-color</a>プロパティを利用)にて非表示にします。</p> + + + <pre><code><font size="3"> インライン { + <font>border-top</font>: <strong>thin solid;</strong> + } + + hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #cccccc; + margin: 1em 0; + padding: 0; + <font>background-color</font>: <strong>rgb(255,255,255);</strong> + } </font></code></pre> + 上記の修正にて、他ブラウザとの互換がとれるようになります。</li> +</ol> + +<h2 id="メリット">メリット</h2> + +<p> ・他のブラウザでも互換性を維持することができます。<br> + ・作成者の把握できていないブラウザ独自の装飾をリセットすることで作成時の想定に近いコンテンツが作成できます。</p> + +<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/orphaned/web/compatibility_faq/no_checkbox_check_shown.html/index.html b/files/ja/orphaned/web/compatibility_faq/no_checkbox_check_shown.html/index.html new file mode 100644 index 0000000000..df2f8d3625 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/no_checkbox_check_shown.html/index.html @@ -0,0 +1,54 @@ +--- +title: チェックボックスのレ点が表示されない +slug: Web/Compatibility_FAQ/No_Checkbox_Check_Shown.html +tags: + - Compatibility + - Invisible element +--- +<h2 id="概要">概要</h2> + +<p> チェックボックスをタップし、チェックを入れる操作を行ってもレ点が表示されません。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9985/0303.jpg" style="width: 520px; height: 250px; margin-right: 50px; margin-left: 50px;"></p> + +<h2 id="要因">要因</h2> + +<p> 要因の代表例として以下があります。</p> + +<ol> + <li> + <p><strong>ベンダープレフィックス</strong><br> + チェックボックスの装飾をwebkit指定で行っている場合、Firefoxでは認識できないため、正しく表示が行えません。<br> + または、Firefox用に<a href="https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient">linear-gradient()</a>関数を記述している場合は、引数の指定方法が-webkit-linear-gradient()関数と異なるため、注意が必要です。</p> + + <pre><code><font size="3"> input[type="checkbox"]:checked { + background-image: url(../contents/bg_08.png), -webkit-linear-gradient(top, #00397b 0%, #01afeb 100%); + background-image: url(../contents/bg_08.png), <strong>linear-gradient(top, #00397b 0%, #01afeb 100%)</strong>; + } </font></code></pre> + + <p> </p> + </li> +</ol> + +<h2 id="解決策">解決策</h2> + +<p> 要因の解決策の代表例として以下があります。</p> + +<ol> + <li> + <p><strong>ベンダープレフィックス</strong><br> + -webkit-linear-gradient()関数の第一引数に「top」が指定されている時に、他ブラウザとの互換性を維持するために<a href="https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient">linear-gradient()</a>関数を使用します。<br> + その場合、第一引数には例のように「to top」を指定することで正しく表示されます。</p> + + <pre><code><font size="3"> input[type="checkbox"]:checked { + background-image: url(../contents/bg_08.png), -webkit-linear-gradient(top, #00397b 0%, #01afeb 100%); + background-image: url(../contents/bg_08.png), <strong>linear-gradient(to top, #00397b 0%, #01afeb 100%)</strong>; + } </font></code></pre> + </li> +</ol> + +<h2 id="メリット">メリット</h2> + +<p> ・プロパティを正しく使用することで各ブラウザでの表示差異がなくなります。</p> + +<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/orphaned/web/compatibility_faq/no_decoreation_shown.html/index.html b/files/ja/orphaned/web/compatibility_faq/no_decoreation_shown.html/index.html new file mode 100644 index 0000000000..e41d42f33d --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/no_decoreation_shown.html/index.html @@ -0,0 +1,82 @@ +--- +title: 枠のシャドウや角丸が抜けている +slug: Web/Compatibility_FAQ/No_Decoreation_Shown.html +tags: + - Compatibility + - Decoration +--- +<h2 id="概要">概要</h2> + +<p> 枠のシャドウ(影付け装飾)や角丸(アイコンやボタンの角の丸み)が表示されません。</p> + +<div> +<p><img alt="" src="https://mdn.mozillademos.org/files/9987/0204.jpg" style="width: 497px; height: 250px; margin-right: 50px; margin-left: 50px;"></p> +</div> + +<h2 id="要因">要因</h2> + +<p> 要因の代表例として以下があります。</p> + +<ol> + <li> + <p><strong>ベンダープレフィックス</strong><br> + webkitブラウザ向けの記述がされている場合、この現象が発生します。<br> + 例えば、以下のような場合です。</p> + + <ul> + <li> + <p><strong>シャドウの場合</strong></p> + + <pre><code><font size="3"> .hoge { + -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4); + } </font></code></pre> + </li> + <li> + <p><strong>角丸の場合</strong></p> + + <pre><code><font size="3"> .hoge { + -moz-border-radius: 6px; + -webkit-border-radius: 6px; + } </font></code></pre> + </li> + </ul> + </li> +</ol> + +<h2 id="解決策">解決策</h2> + +<p> 要因の解決策の代表例として以下があります。</p> + +<ol> + <li> + <p><strong>ベンダープレフィックス</strong><br> + 他ブラウザで互換性を維持する為に、以下のような<a href="https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow">box-shadow</a>プロパティ、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/border-radius">border-radius</a>プロパティの記述を追加します。</p> + + <ul> + <li> + <p><strong>シャドウの場合</strong></p> + + <pre><code><font size="3"> .hoge { + -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4); + <font>box-shadow</font>: <strong>0 1px 2px rgba(0,0,0,.4);</strong> + } </font></code></pre> + </li> + <li> + <p><strong>角丸の場合</strong></p> + + <pre><code><font size="3"> .hoge { + -moz-border-radius: 6px; + -webkit-border-radius: 6px; + <font>border-radius</font>: <strong>6px;</strong> + } </font></code></pre> + </li> + </ul> + </li> +</ol> + +<h2 id="メリット">メリット</h2> + +<p> ・他のブラウザでも互換性を維持することができます。<br> + ・追記のみの対応のため改修が容易です。</p> + +<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/orphaned/web/compatibility_faq/no_icon_shown.html/index.html b/files/ja/orphaned/web/compatibility_faq/no_icon_shown.html/index.html new file mode 100644 index 0000000000..5845f90804 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/no_icon_shown.html/index.html @@ -0,0 +1,147 @@ +--- +title: アイコンが表示されない +slug: Web/Compatibility_FAQ/No_Icon_Shown.html +tags: + - Compatibility + - Invisible element +--- +<h2 id="概要">概要</h2> + +<p> 一部のアイコンやバナーが表示されません。<br> + メニューのボタンや、検索実行ボタン、バナーなどがFirefoxのみで非表示となってしまいます。</p> + +<div> +<p><img alt="" src="https://mdn.mozillademos.org/files/9989/0301.jpg" style="width: 439px; height: 250px; margin-right: 50px; margin-left: 50px;"></p> +</div> + +<h2 id="要因">要因</h2> + +<p> 複数要因がありますが、代表例として以下があります。</p> + +<ol> + <li> + <p><strong>ベンダープレフィックス </strong><br> + 描画やサイズ指定でwebkit指定を使用している場合は、Firefoxでは認識できないため、非表示となってしまう場合があります。<br> + また、背景色をwebkit指定で行い、白抜きのアイコンを描画していた場合も背景色が認識できません。<br> + 背景色が白で表示されると、白文字を指定した場合、同色となり非表示となるケースもあります。</p> + 下記は、描画指定の例になります。 + + <pre><code><font size="3"> top li{ + font-size: 90%; + <font>-webkit-border-radius</font>: <strong>3px;</strong> + border: 1px solid #e5e5e5; + background-color: #ffffff; + <font>background</font>: <strong>-webkit-gradient(linear, left bottom, left top, from(#f6f6f6), to(#ffffff));</strong> + <font>-webkit-box-shadow</font>: <strong>0 1px 1px rgba(0, 0, 0, 0.05);</strong> + margin: 0 0 0 5px; + position: relative; + bottom: 15px; + } + + .icn_search a:before { + content: "" ""; + width: 7px; + height: 7px; + border: 2px solid #e4006f; + background: transparent; + <font>-webkit-border-radius</font>: <strong>12px;</strong> + } + + .icn_search a:after { + content: "" ""; + left: 18px; + width: 2px; + height: 7px; + margin-top: 0; + <font>-webkit-transform</font>: <strong>rotate(-45deg);</strong> + } </font></code></pre> + + <p>下記は、サイズ指定の例になります。</p> + + <pre><code><font size="3"> single_02 { + background: url(http://common/icon.png) no-repeat 0 -625px; + <font>-webkit-background-size</font>: <strong>26px auto;</strong> + } </font></code></pre> + + <p> </p> + </li> + <li> + <p><strong>全体のレイアウトに誤りがある</strong><br> + 全体のレイアウトに誤りがあり、結果一部のバナー等が非表示となっている場合があります。<br> + <a href="https://developer.mozilla.org/ja/docs/Web/CSS/float">float</a>プロパティ等の配置指定に誤りがあり、結果、一部の要素が画面に収まりきれずに表示できていません。</p> + </li> +</ol> + +<h2 id="解決策">解決策</h2> + +<p> 各要因の解決策の代表例として以下があります。</p> + +<ol> + <li> + <p><strong>ベンダープレフィックス </strong><br> + webkit指定の描画やサイズ指定を他ブラウザでも互換性を維持できるよう下記記載のものに修正することで正しく表示可能となります。</p> + + <ul> + <li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/border-radius">border-radius</a>プロパティ</li> + <li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient">linear-gradient()</a>関数</li> + <li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow">box-shadow</a>プロパティ</li> + <li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/transform">transform</a>プロパティ</li> + <li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/background-size">background-size</a>プロパティ</li> + </ul> + + <p>詳しくは、「<a href="./Tips_Vendor_Prefix.html">mobile版Firefox向けベンダープレフィックス対処方法まとめ</a>」をご覧ください。</p> + + <p>下記は、描画指定の例になります。</p> + + <pre><code><font size="3"> navtop li { + font-size:90%; + <font>border-radius</font>: <strong>3px;</strong> + border: 1px solid #e5e5e5; + background-color: #ffffff; + <font>background</font>: <strong>linear-gradient(to bottom, #f6f6f6 0%, #ffffff 100%);</strong> + <font>box-shadow</font>: <strong>0 1px 1px rgba(0, 0, 0, 0.05);</strong> + margin: 0 0 0 5px; + position: relative; + bottom: 15px; + } + + .icn_search a:before { + content: "" ""; + width: 7px; + height: 7px; + border: 2px solid #e4006f; + background: transparent; + <font>border-radius</font>: <strong>12px;</strong> + } + + .icn_search a:after { + content: "" ""; + left: 18px; + width: 2px; + height: 7px; + margin-top: 0; + <font>transform</font>: <strong>rotate(-45deg);</strong> + } </font></code></pre> + + <p>下記は、サイズ指定の例になります。</p> + + <pre><code><font size="3"> single_02 { + background: url(http://common/icon.png) no-repeat 0 -625px; + -webkit-background-size: 26px auto; + <font>background-size</font>: <strong>26px auto;</strong> + } </font></code></pre> + + <p> </p> + </li> + <li> + <p><strong>全体のレイアウトに誤りがある</strong><br> + 表示されていない部分のみが問題ではない場合もありますので、ページ全体のレイアウトを見直し、部品の一つ一つが想定の位置に正しく配置されていることを確認してください。</p> + </li> +</ol> + +<h2 id="メリット">メリット</h2> + +<p> ・他のブラウザでも互換性を維持することができます。<br> + ・全体のレイアウトを見直すことにより、その後の変更修正も容易になります。</p> + +<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/orphaned/web/compatibility_faq/no_wrap.html/index.html b/files/ja/orphaned/web/compatibility_faq/no_wrap.html/index.html new file mode 100644 index 0000000000..c36f167bfe --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/no_wrap.html/index.html @@ -0,0 +1,122 @@ +--- +title: 画面外に不要な空白が発生する +slug: Web/Compatibility_FAQ/No_Wrap.html +tags: + - Compatibility + - Layout +--- +<h2 id="概要">概要</h2> + +<p> 一部のコンテンツが画面の右側にはみ出して表示されることにより、はみ出していないコンテンツの右側に空白が出来てしまう場合があります。<br> + その場合、横スクロールが行えない想定のモバイル向けwebページで横スクロールが可能となってしまいます。</p> + +<div> +<div style="margin-left: 50px;">表示画面</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9991/0101.jpg" style="width: 421px; height: 522px;"></p> +</div> + +<p> </p> + +<h2 id="要因">要因</h2> + +<p> 複数要因がありますが、代表例として以下があります。</p> + +<ol> + <li> + <p><strong>テーブルの列幅指定がされていない </strong><br> + テーブルの列幅が指定されていないため、一部要素が画面右側に流れ出してしまっています。<br> + よって、画面に表示されていない部分を表示するため、横スクロールが可能となり、要素が流れ出していない部分に空白ができています。</p> + + <p>なお、要素が流れ出さないため、テーブルの列幅は画面サイズに合わせて指定する必要があります。<br> + 指定されていない理由としては、そもそも指定を行っていないか、もしくは表示するブラウザに対応していないタグを使用している可能性があります。</p> + </li> + <li> + <p><strong>アイテムの横幅指定が誤っている</strong><br> + アイテムの横幅指定が画面横幅を超えて指定されているため、その他の要素の右側に空白ができています。<br> + アイテムの横幅指定は、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/width">width</a>プロパティの指定方法または値の誤り、アイテムを表示しているブロックの指定の誤り等があります。</p> + + <p>下記の指定方法は、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/max-width">max-width</a>プロパティ等で、横画面切替表示時の横幅で指定されてしまうため、縦画面に対応されなくなってしまう例になります。<br> + その他に、テーブル同様そもそも指定を行っていないか、もしくは表示するブラウザに対応していないタグを使用している可能性もあります。</p> + + + <pre><code><font size="3"> img { + <font>max-width</font>: <strong>100%;</strong> + height: auto; + vertical-align: middle; + border: 0px none; + } </font></code></pre> + + <p>なお、ブロックの指定誤りとしては、様々ありますが、その他の表示しているアイテムの幅も考慮した上で、px指定または%指定する必要があります。</p> + + <p> </p> + </li> +</ol> + +<h2 id="解決策">解決策</h2> + +<p> 各要因の解決策の代表例として以下があります。</p> + +<ol> + <li> + <p><strong>テーブルの列幅指定がされていない</strong><br> + 画面全体に <a href="https://developer.mozilla.org/ja/docs/Web/CSS/table-layout">table-layout</a>: fixed; を指定します。<br> + この指定により、テーブルの列幅が画面に合わされますので、画面右側の空白はなくなります。</p> + + + <pre><code><font size="3"> html, body, div, span... { + margin: 0; + padding: 0; + border: 0; + outline: 0; + vertical-align: top; + <font>table-layout</font>: <strong>fixed;</strong> + } </font></code></pre> + + <p> </p> + + <p>また、テーブルの幅指定を <a href="https://developer.mozilla.org/ja/docs/Web/CSS/display">display</a>: table; で行っている場合、Firefoxでは認識できません。<br> + 他ブラウザ互換のために <a href="https://developer.mozilla.org/ja/docs/Web/CSS/display">display</a>: inline-block; を追記することで、画面幅に指定することができます。</p> + + + <pre><code><font size="3"> #navigation ul { + display: table; + <font>display</font>: <strong>inline-block;</strong> + width: 99.9%; + } </font></code></pre> + + <p> </p> + </li> + <li> + <p><strong>アイテムの横幅指定が誤っている</strong><br> + <a href="https://developer.mozilla.org/ja/docs/Web/CSS/max-width">max-width</a>: 100%; で指定されている場合は、横画面表示時のサイズで表示されてしまうため、 <a href="https://developer.mozilla.org/ja/docs/Web/CSS/width">width</a>: 100%; に修正することで縦画面表示時のサイズにも対応できます。</p> + + + <pre><code><font size="3"> img { + <font>width</font>: <strong>100%;</strong> + height: auto; + vertical-align: middle; + border: 0px none; + } </font></code></pre> + + <p> </p> + + <p><a href="https://developer.mozilla.org/ja/docs/Web/CSS/display">display</a>:-moz-box; 等、mobile版ブラウザで対応されていないタグを使用している場合や、そもそも指定がない場合は、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/display">display</a>: inline-block; に修正することで指定できます。</p> + + + <pre><code><font size="3"> box li { + width: 100%; + display: box; + <font>display</font>: <strong>inline-block;</strong> + } </font></code></pre> + + <p> </p> + </li> +</ol> + +<h2 id="メリット">メリット</h2> + +<p> ・画面サイズに列幅を合わせることにより、様々な画面サイズのデバイスに対応可能となります。<br> + ・また、アイテム一つ一つの幅を正しく指定することで、他のコンテンツの表示崩れ等の併発を防ぐことができます。</p> + +<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/orphaned/web/compatibility_faq/overwrapped_icon.html/index.html b/files/ja/orphaned/web/compatibility_faq/overwrapped_icon.html/index.html new file mode 100644 index 0000000000..d6ccdc4655 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/overwrapped_icon.html/index.html @@ -0,0 +1,62 @@ +--- +title: アイコンが隣接する他のアイコンと重なってしまう +slug: Web/Compatibility_FAQ/Overwrapped_Icon.html +tags: + - Compatibility + - Layout +--- +<h2 id="概要">概要</h2> + +<p> アイコンが隣接する他のアイコンと重なってしまい、正しく表示できません。<br> + 隣のアイコンと重なっている部分が、欠けてしまったり、隣のアイコンの上に表示されてしまう場合があります。</p> + +<div> +<div style="margin-left: 50px;">表示画面</div> +<img alt="" src="https://mdn.mozillademos.org/files/9993/0106.jpg" style="width: 291px; height: 270px;"> +<p> </p> +</div> + +<h2 id="要因">要因</h2> + +<p> 要因の代表例として以下があります。</p> + +<ol> + <li> + <p><strong>アイコンの表示領域が足りていない</strong><br> + アイコン内の数値が変動する(桁数が変わる)場合は、最大桁数が考慮されていないと、桁数によっては隣のアイコンと被ってしまうことがあります。<br> + 表示領域をpx指定していると、他のアイコンが押し出される等の問題は発生しませんが、指定しているアイコン自身の表示欠け等が発生します。</p> + + + <pre><code><font size="3"> .icon {<font>width</font>: <strong>100px !important;</strong>} </font></code></pre> + + <p> </p> + </li> +</ol> + +<h2 id="解決策">解決策</h2> + +<p> 解決策の代表例として以下があります。</p> + +<ol> + <li> + <p><strong>アイコンの表示領域が足りていない</strong><br> + アイコン内の数値の最大桁数を考慮し、表示領域の横幅を再設定することで正しく表示されます。<br> + その時に、全体の横幅が画面サイズを超えて指定してしまうと、横並びになっていたアイコンが折り返されてしまうことがあるので、全体の横幅に注意し、表示領域の再設定を行ってください。</p> + + <pre><code><font size="3"> .icon {<font>width</font>: <strong>120px !important;</strong>} </font></code></pre> + + <p>また、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/width">width</a>プロパティを「auto」で指定し、数値の変動に合わせ、表示領域も変動するように指定する方法もよいです。<br> + ただし、「auto」で指定した場合は、他のアイコンが折り返される可能性があるので、他のアイコンを<a href="https://developer.mozilla.org/ja/docs/Web/CSS/margin">margin</a>プロパティ等で表示位置を調整する必要があります。</p> + + <pre><code><font size="3"> .icon {<font>width</font>: <strong>auto;</strong>} </font></code></pre> + + <p> </p> + </li> +</ol> + +<h2 id="メリット">メリット</h2> + +<p> ・px指定した場合は、少ない修正で横幅の変動するアイコンに対応できます。<br> + ・「auto」で指定した場合は、他のアイコンの表示位置指定を全体的に見直す必要がありますが、桁数の少ない場合と多い場合で、それぞれ合った表示を行うことが可能となります。</p> + +<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/orphaned/web/compatibility_faq/overwrapped_navigation.html/index.html b/files/ja/orphaned/web/compatibility_faq/overwrapped_navigation.html/index.html new file mode 100644 index 0000000000..4e8a4bd9c5 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/overwrapped_navigation.html/index.html @@ -0,0 +1,83 @@ +--- +title: ナビゲーションメニューが他のアイコンと重なって表示されたり、画面からはみ出たりしてしまう +slug: Web/Compatibility_FAQ/Overwrapped_Navigation.html +tags: + - Compatibility + - Layout +--- +<h2 id="概要">概要</h2> + +<p> 他のブラウザで正しく表示されているナビゲーションメニューが、Firefoxで表示すると大幅に崩れてしまう場合があります。<br> + 一列に並ぶべきアイコンが画面横幅に収まっておらず、他のアイコンと重なって表示されてしまい、周辺のアイコンが全体的に配置崩れを起こしてしまいます。<br> + <br> + <br> + <img alt="" src="https://mdn.mozillademos.org/files/9995/0102.jpg" style="width: 258px; height: 320px; margin-right: 50px; margin-left: 50px;"><br> + </p> + +<h2 id="要因">要因</h2> + +<p> 要因の代表例としては以下があります。</p> + +<ol> + <li> + <p><strong>テーブルの列幅が指定されていない</strong><br> + <a href="https://developer.mozilla.org/ja/docs/Web/CSS/display">display</a>: table; でテーブルの列幅を指定している場合、Firefoxでは認識できていません。<br> + 列幅を指定していないことで、アイコンが画面の横幅に収まらず、配置崩れを起こしてしまいます。</p> + + <pre><code><font size="3"> navigation ul { + <font>display</font>: <strong>table;</strong> + width: 99.9%; + } </font></code></pre> + + <p>また、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/display">display</a>: -moz-box; が指定されている場合も、mobile版Firefoxでは認識できませんので、同様の現象が発生します。</p> + + <pre><code><font size="3"> .go_contents_btn { + display: -webkit-box !important; + <font>display</font>: <strong>-moz-box !important;</strong> + -webkit-box-pack: center !important; + <font>-moz-box-pack</font>: <strong>center !important;</strong> + width: 100%; + } </font></code></pre> + </li> +</ol> + +<h2 id="解決策">解決策</h2> + +<p> 解決策の代表例として以下があります。</p> + +<ol> + <li> + <p><strong>テーブルの列幅が指定されていない</strong><br> + Firefoxでは、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/display">display</a>: table; の指定(mobile版Firefoxでは「-moz-box」も含む)は動作しないため、テーブルの列幅の指定に<a href="https://developer.mozilla.org/ja/docs/Web/CSS/display">display</a>: inline-block; や<a href="https://developer.mozilla.org/ja/docs/Web/CSS/display">display</a>: flex; を追記します。</p> + + <p>display: inline-block; の場合</p> + + <pre><code><font size="3"> navigation ul{ + display: table; + <font>display</font>: <strong>inline-block;</strong> + width: 99.9%; + } </font></code></pre> + + <p>また、親要素を<a href="https://developer.mozilla.org/ja/docs/Web/CSS/flex">flex</a>設定にした場合、自動的に子要素は<a href="https://developer.mozilla.org/ja/docs/Web/CSS/flex">flex</a>アイテムになります。<a href="https://developer.mozilla.org/ja/docs/Web/CSS/flex">flex</a>アイテム用に横方向寄せを設定しているプロパティを<a href="https://developer.mozilla.org/ja/docs/Web/CSS/justify-content">justify-content</a>プロパティに変更します。<br> + 縦方向寄せを設定しているプロパティも<a href="https://developer.mozilla.org/ja/docs/Web/CSS/align-items">align-items</a>プロパティに変更します。</p> + + <p>display: flex; の場合</p> + + <pre><code><font size="3"> .go_contents_btn { + display: -webkit-box !important; + display: -moz-box !important; + <font>display</font>: <strong>flex !important;</strong> + -webkit-box-pack: center !important; + <font>justify-content</font>: <strong>center !important;</strong> + width: 100%; + } </font></code></pre> + + <p> </p> + </li> +</ol> + +<h2 id="メリット">メリット</h2> + +<p> ・少ない修正で他ブラウザとの互換性が取れます。</p> + +<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/orphaned/web/compatibility_faq/tips_default_style_difference.html/index.html b/files/ja/orphaned/web/compatibility_faq/tips_default_style_difference.html/index.html new file mode 100644 index 0000000000..4285cff266 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/tips_default_style_difference.html/index.html @@ -0,0 +1,62 @@ +--- +title: ブラウザごとの表示の違い(User-Agent-Stylesheetによる表示差異) +slug: Web/Compatibility_FAQ/Tips_Default_Style_Difference.html +tags: + - Compatibility + - StyleSheet +--- +<h2 id="概要">概要</h2> + +<p> ブラウザ毎で独自のスタイルシートを持っており、使用するタグによっては、ブラウザ毎で表示が異なる場合があります。<br> + 多少デザインが異なる程度の為、ユーザー観点や操作上の問題はない場合が多いですが、代表的な例を紹介します。</p> + +<h2 id="例">例</h2> + +<ol> + <li> + <p><strong>デフォルトのフォントが異なる</strong><br> + ブラウザ毎でデフォルトのフォントが異なる場合があります。<a href="https://developer.mozilla.org/ja/docs/Web/CSS/font-style">font-style</a>プロパティを明示的に指定すると統一できますが、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/font-style">font-style</a>: normal; で指定した場合は、表示が多少異なります。<br> + 部分的に細かいpx指定をしていると、稀にレイアウトの崩れを起こすことがありますので、その場合は、明示的に指定を行う必要があります。</p> + + <pre><code><font size="3"> body { + margin: 0; + padding: 0; + <font>font-style</font>: <strong>normal</strong>; + } </font></code></pre> + + <p><img alt="" src="https://mdn.mozillademos.org/files/10007/ex2_3.png" style="width: 336px; height: 120px; margin-right: 50px; margin-left: 50px;"></p> + </li> + <li> + <p><strong>テキストの太さが異なる</strong><br> + 見出しのテキストで使用するh要素ですが、同様の要素(h2要素など)で指定しても、ブラウザによっては僅かな差異が発生する場合があります。</p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/9997/ex2_1.png" style="width: 286px; height: 120px; margin-right: 50px; margin-left: 50px;"></p> + </li> + <li> + <p><strong>チェックボックスのデザインが異なる</strong><br> + チェックボックスの表示がブラウザ間で異なる場合があります。<br> + チェックボックスには、ブラウザ毎で独自のCSSが適応されるため、多少デザインが異なります。<br> + 統一させる為には、デフォルトの装飾をリセットし、別途スタイル指定を行う必要があります。</p> + + <p class="attention">注意：2014/12現在、mobile版Firefoxでは、ブラウザ側のスタイルをリセットする<a href="https://developer.mozilla.org/ja/docs/Web/CSS/-moz-appearance">appearance</a>プロパティが使用できない不具合があります。</p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/9999/ex2_2.png" style="width: 385px; height: 150px; margin-right: 50px; margin-left: 50px;"></p> + </li> + <li> + <p><strong>プルダウンメニューのデザインが異なる</strong><br> + プルダウンメニューに関しても、チェックボックスのデザインと同様に、ブラウザ毎でデザインが異なる場合があります。</p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/10003/ex2_4.png" style="width: 453px; height: 80px; margin-right: 50px; margin-left: 50px;"></p> + </li> +</ol> + +<p>ブラウザ毎で独自のCSSが適応されていますが、下記のような方法でデザインを指定することで、統一することも可能です。</p> + +<pre><code><font size="3"> .ipt_select_01 { + width: 100%; + <font>color</font>: <strong>#000;</strong> + <font>background-color</font>: <strong>ButtonFase;</strong> + <font>border-color</font>: <strong>#A9A9A9;</strong> + } </font></code></pre> + +<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/orphaned/web/compatibility_faq/tips_vendor_prefix.html/index.html b/files/ja/orphaned/web/compatibility_faq/tips_vendor_prefix.html/index.html new file mode 100644 index 0000000000..cb1475537f --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/tips_vendor_prefix.html/index.html @@ -0,0 +1,198 @@ +--- +title: mobile版Firefox向けベンダープレフィックス対処方法まとめ +slug: Web/Compatibility_FAQ/Tips_Vendor_Prefix.html +tags: + - Compatibility + - Vendor prefix +--- +<h2 id="概要">概要</h2> + +<p> ベンダープレフィックス(接頭辞)付きのプロパティや値は、Firefox、Chrome等のブラウザ毎に実装が異なり、またPC版とmobile版でも異なるため、細かな配慮が必要です。<br> + 例えば、PC版Firefoxでは有効な接頭辞-moz-がmobile版Firefoxではサポートされていません。<br> + 本稿では、mobile版Chromeと同Firefoxとの実装方法の比較、Firefoxにて適用されないベンダープレフィックス付きプロパティの一覧、その書き換えの方法等の情報をまとめます。</p> + +<p> 以下、PC版Firefox、mobile版Chrome向けの記述とmobile版Firefox向けの記述を比較した表です。</p> + +<hr> +<h3 id="Mozilla_CSS_拡張仕様_(-moz-)">Mozilla CSS 拡張仕様 (-moz-)</h3> + +<p>詳細は、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Mozilla_Extensions">Mozilla 独自の CSS 拡張</a> をご覧ください。</p> + +<p>＜表1 : -moz-指定された値とmobile版Firefox向け対処法＞</p> + +<table> + <thead> + <tr> + </tr> + <tr> + <th><strong>プロパティ・値</strong></th> + <th><strong>意味</strong></th> + <th><strong>PC版Firefox向け記述例</strong></th> + <th><strong>mobile版Firefox向け対処法</strong></th> + </tr> + </thead> + <tbody> + <tr> + <td>-moz-box</td> + <td>要素をボックス配置する</td> + <td>display: -moz-box;</td> + <td>display: inline-block;</td> + </tr> + <tr> + <td>-moz-border-radius</td> + <td>枠線の角丸を設定する</td> + <td>-moz-border-radius: 10px;</td> + <td>border-radius: 10px;</td> + </tr> + <tr> + <td>-moz-linear-gradient</td> + <td>グラデーション装飾を付与する</td> + <td>background: -moz-linear-gradient(top, #F0F0F0 0%, #ccc);</td> + <td>background: linear-gradient(to top, #F0F0F0 0%, #ccc);</td> + </tr> + </tbody> +</table> + +<hr> +<h3 id="Webkit_CSS_拡張仕様_(-webkit-)">Webkit CSS 拡張仕様 (-webkit-)</h3> + +<p>詳細は、<a class="new" href="https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Webkit_Extensions" style="color: rgb(153, 0, 0); text-decoration: underline;">WebKit 独自の CSS 拡張</a> をご覧ください。</p> + +<p>＜表2 : -webkit-指定された値とmobile版Firefox向け対処法＞</p> + +<table> + <thead> + <tr> + </tr> + <tr> + <th><strong>プロパティ・値</strong></th> + <th><strong>意味</strong></th> + <th><strong>mobile版Chrome向け記述例</strong></th> + <th><strong>mobile版Firefox向け対処法</strong></th> + </tr> + </thead> + <tbody> + <tr> + <td>-webkit-appearance</td> + <td>ブラウザデフォルトの装飾設定を適用する</td> + <td>-webkit-appearance: none;</td> + <td>代替指定が存在しないため、明示的にスタイル指定する</td> + </tr> + <tr> + <td>-webkit-background-size</td> + <td>背景サイズを指定する</td> + <td>-webkit-background-size: 26px auto;</td> + <td>background-size: 26px auto;</td> + </tr> + <tr> + <td>-webkit-border-radius</td> + <td>枠線の角丸を設定する</td> + <td>-webkit-border-radius: 5px;</td> + <td>border-radius: 5px;</td> + </tr> + <tr> + <td>-webkit-box-shadow</td> + <td>領域のシャドーを設定する</td> + <td>-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);</td> + <td>box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);</td> + </tr> + <tr> + <td>-webkit-box-sizing</td> + <td>領域のサイズを設定する</td> + <td>-webkit-box-sizing: border-box;</td> + <td>box-sizing: border-box;</td> + </tr> + <tr> + <td>-webkit-gradient</td> + <td>グラデーション装飾を付与する</td> + <td>background: -webkit-gradient(linear, left bottom, left top, from(#ffffff), to(#f6f6f6));</td> + <td>background: linear-gradient(to bottom, #ffffff, #f6f6f6);</td> + </tr> + <tr> + <td>-webkit-linear-gradient</td> + <td>グラデーション装飾を付与する</td> + <td>background: -webkit-linear-gradient(top, #00397b 0%, #01afeb 100%);</td> + <td>background: linear-gradient(to top, #00397b 0%, #01afeb 100%);</td> + </tr> + <tr> + <td>-webkit-transform</td> + <td>要素を移動、回転、スケーリング、傾斜させる</td> + <td>-webkit-transform: rotate(-45deg);</td> + <td>transform: rotate(-45deg);</td> + </tr> + <tr> + <td>-webkit-transition-duration</td> + <td>トランジションによるアニメーションが完了するまでの所要時間を指定する</td> + <td>-webkit-transition-duration: 100ms;</td> + <td>JavaScriptで実装する</td> + </tr> + <tr> + <td>-webkit-transition-property</td> + <td>トランジションさせるプロパティを指定する</td> + <td>-webkit-transition-property: opacity;</td> + <td>JavaScriptで実装する</td> + </tr> + <tr> + <td>-webkit-transition-timing-function</td> + <td>トランジション実行中の値の変更速度を操作する</td> + <td>-webkit-transition-timing-function: ease-in-out;</td> + <td>JavaScriptで実装する</td> + </tr> + </tbody> +</table> + +<hr> +<h2 id="考察">考察</h2> + +<p> ・ベンダープレフィックスの使用は互換性を損なうため、Web標準であるCSS3での記述に統一すべきです。<br> + そうすることで、一つのコンテンツ記述でマルチ・ブラウザ対応が可能となります。</p> + +<p> ・appearanceプロパティ、transitionプロパティ等(アニメーション系のCSS指定)は代替要素がないため、JavaScriptで実装し直す方が容易で確実と考えられます。</p> + +<p class="attention">注意：backgrouond: gradient; 系統のスタイル指定については、たびたび構文が変更されており、特に注意が必要です。<br> + 以下のように、PC版ChromeとPC版Firefoxを比較してみても、目まぐるしく仕様変更されています。</p> + +<p><br> + ＜表3 : ブラウザとバージョンごとに異なるgradientプロパティの構文＞</p> + +<table> + <thead> + <tr> + </tr> + <tr> + <th><strong>ブラウザ/バージョン</strong></th> + <th><strong>構文</strong></th> + </tr> + </thead> + <tbody> + <tr> + <td>Chrome/3-9</td> + <td>-webkit-gradient();</td> + </tr> + <tr> + <td>Chrome/10-25</td> + <td>-webkit-linear-gradient();</td> + </tr> + <tr> + <td>Chrome/26以降</td> + <td>linear-gradient();</td> + </tr> + <tr> + <td>Firefox/3.6-15</td> + <td>-moz-linear-gradient();</td> + </tr> + <tr> + <td>Firefox/16(2012.10リリース)以降</td> + <td>linear-gradient();</td> + </tr> + </tbody> +</table> + +<p> mobile版FirefoxはCSS3準拠のため、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient">MDN</a>等のリファレンスを参照し、適正な設定を行うことが必要です。</p> + +<h2 id="参考">参考</h2> + +<p> ・CSS グラデーションの利用 - Web developer guide | MDN<br> + <a href="https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_gradients">https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_gradients</a></p> + +<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/orphaned/web/compatibility_faq/underline_color_diffrence.html/index.html b/files/ja/orphaned/web/compatibility_faq/underline_color_diffrence.html/index.html new file mode 100644 index 0000000000..2df04e427d --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/underline_color_diffrence.html/index.html @@ -0,0 +1,77 @@ +--- +title: 下線の色が相違している +slug: Web/Compatibility_FAQ/Underline_Color_Diffrence.html +tags: + - Compatibility + - Decoration +--- +<h2 id="概要">概要</h2> + +<p> mobile版Firefoxと他ブラウザで、文字列の下に引かれる下線の色が相違します。</p> + +<div> +<p><img alt="" src="https://mdn.mozillademos.org/files/10005/0203.jpg" style="width: 401px; height: 50px; margin-right: 50px; margin-left: 50px;"></p> +</div> + +<h2 id="要因">要因</h2> + +<p> 以下のような要因が考えられます。</p> + +<ol> + <li> + <p><strong>mobile版Firefoxで適用されるプロパティが他ブラウザで反映されない場合</strong><br> + <a href="https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration-color">text-decoration-color</a>, <a href="https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration-line">text-decoration-line</a>, <a href="https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration-style">text-decoration-style</a>に相当するプロパティが他ブラウザには存在しないため、表示の差異が発生します。</p> + + <pre><code><font size="3"> インライン { + text-decoration: underline; + <font>-moz-text-decoration-color</font>: -moz-use-text-color; + <font>-moz-text-decoration-line</font>: underline; + <font>-moz-text-decoration-style</font>: solid; + } </font></code></pre> + </li> + <li> + <p><strong>色指定の方法に間違えている場合 </strong><br> + 例えば、以下のように記述されていると、下線の色は文字色となります。文字色の指定方法が間違っていた場合、下線の色が期待通りに設定されなくなります。<br> + なお、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration-color">text-decoration-color</a>は非推奨APIですのでCSS3準拠に書き替えが必要です。</p> + + <pre><code><font size="3"> <font>text-decoration-color</font>: -moz-use-text-color; </font></code></pre> + </li> +</ol> + +<h2 id="解決策">解決策</h2> + +<p> 各要因の解決策の代表例として以下があります。</p> + +<ol> + <li> + <p><strong>mobile版Firefoxで適用されるプロパティが他ブラウザで反映されない場合</strong></p> + + <p>例えば、Chromeでは下線色は文字色と等しくなり、個別設定ができません。<br> + そのため、コンテンツタグの記述はFirefoxと他ブラウザとの見た目の統一が図れるよう、どのブラウザでもサポートしている装飾のみを用いる等の対処が必要です。</p> + + <pre><code><font size="3"> インライン { + <font>text-decoration</font>: underline; + -moz-text-decoration-color: -moz-use-text-color; + -moz-text-decoration-line: underline; + -moz-text-decoration-style: solid; + } </font></code></pre> + </li> + <li> + <p><strong>色指定の方法に間違えている場合</strong><br> + <a href="https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration-color">text-decoration-color</a>: -moz-use-text-color; を <a href="https://developer.mozilla.org/ja/docs/Web/CSS/border-color">border-color</a>: currentColor; に書き換えます。<br> + なお、記載を修正してもまだ下線色が期待通りにならない場合は、フォント色の設定状態を確認することをお勧めします。</p> + + <pre><code><font size="3"> インライン { + text-decoration: underline; + <font>border-color</font>: <b>currentColor</b>; + -moz-text-decoration-line: underline; + -moz-text-decoration-style: solid; + } </font></code></pre> + </li> +</ol> + +<h2 id="メリット">メリット</h2> + +<p> ・他のブラウザでも互換性を維持することができます。</p> + +<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p> diff --git a/files/ja/orphaned/web/css/@media/index/index.html b/files/ja/orphaned/web/css/@media/index/index.html new file mode 100644 index 0000000000..b8b8d56198 --- /dev/null +++ b/files/ja/orphaned/web/css/@media/index/index.html @@ -0,0 +1,12 @@ +--- +title: 索引 +slug: Web/CSS/@media/Index +tags: + - '@media' + - CSS + - 索引 +translation_of: Web/CSS/@media/Index +--- +<p>{{CSSRef}}</p> + +<p>{{Index("/ja/docs/Web/CSS/@media")}}</p> diff --git a/files/ja/orphaned/web/css/_colon_-moz-alt-text/index.html b/files/ja/orphaned/web/css/_colon_-moz-alt-text/index.html new file mode 100644 index 0000000000..be215a2997 --- /dev/null +++ b/files/ja/orphaned/web/css/_colon_-moz-alt-text/index.html @@ -0,0 +1,19 @@ +--- +title: ':-moz-alt-text' +slug: 'Web/CSS/:-moz-alt-text' +tags: + - CSS + - CSS Reference + - Non-standard +--- +<p>{{Non-standard_header}}{{ CSSRef() }}{{ Fx_minversion_header(3) }}</p> + +<h2 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h2> + +<p><code>:-moz-alt-text</code> は読み込まれなかった画像のための代替テキストを提供する要素にマッチします。</p> + +<p>このセレクタは主にテーマ開発者によって使用されるものです。</p> + +<h2 id="Bugzilla" name="Bugzilla">Bugzilla</h2> + +<p>{{ Bug(11011) }}</p> diff --git a/files/ja/orphaned/web/css/index/index.html b/files/ja/orphaned/web/css/index/index.html new file mode 100644 index 0000000000..20ef75d74b --- /dev/null +++ b/files/ja/orphaned/web/css/index/index.html @@ -0,0 +1,10 @@ +--- +title: CSS 関連ドキュメントの索引 +slug: Web/CSS/Index +tags: + - CSS + - Index + - MDN Meta +translation_of: Web/CSS/Index +--- +<p>{{Index("/ja/docs/Web/CSS")}}</p> diff --git a/files/ja/orphaned/web/guide/ajax/other_resources/index.html b/files/ja/orphaned/web/guide/ajax/other_resources/index.html new file mode 100644 index 0000000000..1475956d30 --- /dev/null +++ b/files/ja/orphaned/web/guide/ajax/other_resources/index.html @@ -0,0 +1,21 @@ +--- +title: AJAX に関するその他の資料 +slug: Web/Guide/AJAX/Other_Resources +tags: + - AJAX +translation_of: Web/Guide/AJAX/Other_Resources +--- +<ul> + <li><a href="http://www.ajaxreview.com/">AJAX Review</a></li> + <li><a href="http://www.maxkiesler.com/index.php/mhub/">mHub : Ajax and rails examples & how-to's</a></li> + <li><a href="http://www.maxkiesler.com/">AJAX Blog at maxkiesler.com</a></li> + <li><a href="http://ajaxblog.com/">AJAX Blog</a></li> + <li><a href="http://www.ajaxian.com/">Ajaxian Blog</a></li> + <li><a href="http://www.fiftyfoureleven.com/resources/programming/xmlhttprequest">AJAX Blog at fiftyfoureleven.com</a></li> + <li><a href="http://www.ajaxmatters.com/">AJAX Matters</a></li> + <li><a href="http://www.ajaxpatterns.org/Main_Page">AJAX Patterns</a></li> + <li><a href="http://www.ajaxtoday.com">AJAX Today Your ajax tutorials, articles, patterns, blogs</a></li> + <li><a href="http://www.ajaxlines.com/">AJAX Lines</a></li> + <li><a href="http://explash.com/" title="http://explash.com/">eXplash - Ajax and Web 2.0 applications directory</a></li> + <li><a href="http://www.afterhoursprogramming.com/tutorial/JavaScript/XMLHttpRequest-Object/" title="http://www.afterhoursprogramming.com/tutorial/JavaScript/XMLHttpRequest-Object/">XMLHttpRequest Object</a></li> +</ul> diff --git a/files/ja/orphaned/web/html/element/command/index.html b/files/ja/orphaned/web/html/element/command/index.html new file mode 100644 index 0000000000..ff02ae0e96 --- /dev/null +++ b/files/ja/orphaned/web/html/element/command/index.html @@ -0,0 +1,109 @@ +--- +title: '<command>: HTML コマンド要素' +slug: Web/HTML/Element/command +tags: + - Command + - HTML + - HTML commands + - HTML5 + - 'HTML:Element' + - 'HTML:Element Reference' + - Obsolete +translation_of: Web/HTML/Element/command +--- +<div>{{obsolete_header()}}</div> + +<p><span class="seoSummary"><strong>HTML のコマンド要素</strong> (<strong><code><command></code></strong>) はユーザーが実行することができるコマンドを表します。コマンドは普通、メニューやツールバーのコンテンツの一部として使われます。</span>しかし、ページ上のどこでも使用できます。</p> + +<div class="note"> +<p><code><command></code> 要素は W3C の仕様書に含まれていますが、 WHATWG の仕様書には含まれておらず、ブラウザーの互換性もありません。非標準で Edge と Firefox でしか対応していませんが、代わりに {{HTMLElement("menuitem")}} 要素を使用してください。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, メタデータコンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>なし。これは{{Glossary("empty element", "空要素")}}です。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグは必須です。終了タグは、空要素であるため使用できません。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("colgroup")}} のみですが、これは開始要素が必須ではないので暗黙的に定義されることがあります。 {{HTMLElement("colgroup")}} は {{HTMLElement("span")}} を子として持ってはなりません。</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLCommandElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("checked")}}</dt> + <dd>コマンドが選択されているかを示します。 <code>type</code> 属性が <code>checkbox</code> または <code>radio</code> でなければ指定できません。</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>コマンドが使用不可であることを示します。</dd> + <dt>{{htmlattrdef("icon")}}</dt> + <dd>コマンドを表す画像を与えます。</dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>ユーザに対して表示する、コマンドの名称です。</dd> + <dt>{{htmlattrdef("radiogroup")}}</dt> + <dd>この属性はコマンド自身を切り替えた時に切り替えられる、 <code>type</code> が <code>radio</code> であるコマンドのグループ名を与えます。この属性は、 <code>type</code> 属性が <code>radio</code> でなければ指定できません。</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>この属性は、コマンドの種類を示します。以下の3つの値のうち1つが使用できます。 + <ul> + <li> + <p><code>command</code> または空文字列はデフォルトの状態で、通常のコマンドを示します。</p> + </li> + <li> + <p><code>checkbox</code> は、コマンドがチェックボックスで切り替え可能であることを示します。</p> + </li> + <li> + <p><code>radio</code> は、コマンドがラジオボタンで切り替え可能であることを示します。</p> + </li> + </ul> + </dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html notranslate"><command type="command" label="Save" + icon="icons/save.png" onclick="save()"> +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.command")}}</p> + +<p>{{ HTMLRef }}</p> diff --git a/files/ja/orphaned/web/html/element/element/index.html b/files/ja/orphaned/web/html/element/element/index.html new file mode 100644 index 0000000000..5bc66fccb6 --- /dev/null +++ b/files/ja/orphaned/web/html/element/element/index.html @@ -0,0 +1,64 @@ +--- +title: '<element>: カスタム要素 (廃止)' +slug: Web/HTML/Element/element +tags: + - Element + - HTML + - Obsolete + - Web Components + - custom elements + - shadow dom +translation_of: Web/HTML/Element/element +--- +<div>{{HTMLRef}}{{obsolete_header}}</div> + +<p><span class="seoSummary">廃止された <strong>HTML の <code><element></code> 要素</strong>は、<a href="/en-US/docs/Web/Web_Components">ウェブコンポーネント</a>の仕様書の一部でした。新しいカスタム DOM 要素を定義するために使用することを意図していました。</span>これは JavaScript からの新しいカスタム要素を生成する方法に取って代わられ、削除されました。</p> + +<div class="warning"> +<p><strong>メモ:</strong> この要素は仕様書から削除されました。仕様書の編集者からの情報は<a href="http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">こちら</a>を参照してください。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">コンテンツカテゴリー</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content">透過的コンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されているコンテンツ</th> + <td>???</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親コンテンツ</th> + <td>???</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/en-US/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<p><code><element></code> 要素は以前、<a href="http://w3c.github.io/webcomponents/spec/custom/">カスタム要素</a>の仕様書の草稿に含まれていましたが、削除されました。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.element")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>ウェブコンポーネント: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, {{HTMLElement("template")}}</li> +</ul> diff --git a/files/ja/orphaned/web/html/global_attributes/dropzone/index.html b/files/ja/orphaned/web/html/global_attributes/dropzone/index.html new file mode 100644 index 0000000000..290b577040 --- /dev/null +++ b/files/ja/orphaned/web/html/global_attributes/dropzone/index.html @@ -0,0 +1,48 @@ +--- +title: dropzone +slug: Web/HTML/Global_attributes/dropzone +tags: + - Deprecated + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/dropzone +--- +<div>{{HTMLSidebar("Global_attributes")}}{{deprecated_header}}</div> + +<p><strong><code>dropzone</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a> は、 <a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">HTML Drag and Drop API</a> を使用して要素上にどのようなコンテンツをドロップできるかを示す列挙型属性です。以下の値を使用できます。</p> + +<ul> + <li><code>copy</code>: ドロップにより、ドロップした要素のコピーを生成することを示す</li> + <li><code>move</code>: ドロップされた要素は新しい場所に移動されることを示す</li> + <li><code>link</code>: ドラッグしたデータへのリンクを生成する</li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショット、初回定義。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.dropzone")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li> +</ul> diff --git a/files/ja/orphaned/web/html/html_extensions/index.html b/files/ja/orphaned/web/html/html_extensions/index.html new file mode 100644 index 0000000000..6e0d715d5d --- /dev/null +++ b/files/ja/orphaned/web/html/html_extensions/index.html @@ -0,0 +1,12 @@ +--- +title: HTML Extensions +slug: Web/HTML/HTML_Extensions +tags: + - HTML +--- +<p>Mozilla ブラウザは、標準を拡張するいくつかの HTML タグをサポートしています。その一部がドキュメント化されています。</p> +<ul> <li>BLINK</li> <li><a class="internal" href="/ja/HTML/HTML_Extensions/KEYGEN_Tag" title="ja/HTML/HTML Extensions/KEYGEN Tag">KEYGEN</a></li> +</ul> +<div class="noinclude"> +<p>{{ languages( { "en": "en/HTML/HTML_Extensions" } ) }}</p> +</div> diff --git a/files/ja/orphaned/web/javascript/guide/class-based_vs._prototype-based_languages/index.html b/files/ja/orphaned/web/javascript/guide/class-based_vs._prototype-based_languages/index.html new file mode 100644 index 0000000000..800f222ea4 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/class-based_vs._prototype-based_languages/index.html @@ -0,0 +1,25 @@ +--- +title: Class-Based vs. Prototype-Based Languages +slug: Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages +--- +<h3 id=".E3.82.AF.E3.83.A9.E3.82.B9.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E.E3.81.A8.E3.83.97.E3.83.AD.E3.83.88.E3.82.BF.E3.82.A4.E3.83.97.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E" name=".E3.82.AF.E3.83.A9.E3.82.B9.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E.E3.81.A8.E3.83.97.E3.83.AD.E3.83.88.E3.82.BF.E3.82.A4.E3.83.97.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E">クラスベース言語とプロトタイプベース言語</h3> +<p>Java や C++ といったクラスベースのオブジェクト指向言語はクラスとインスタンスという 2 つの異なる実体があるという概念に基づいています。</p> +<ul> <li>クラスはあるオブジェクトの集合を特徴付けるすべてのプロパティ（Java ではメソッドとフィールドを、C++ ではメンバをプロパティと見なす）を定義する。クラスとはそれが表すオブジェクトの集合の特定のメンバではなく、抽象的なものである。例えば、Employee クラスで従業員すべてを含む集合を表す。</li> <li>一方、インスタンスはクラスを実例にしたものである。つまり、そのメンバの 1 つということである。例えば、Victoria は Employee クラスのインスタンスとなることができる。このクラスは特定の個人を従業者として表すものである。インスタンスはその親クラスのプロパティを正確に保持する（それに他ならない）。</li> +</ul> +<p>JavaScript のようなプロトタイプベース言語はこの区別がありません。単にオブジェクトがあるだけです。プロトタイプベース言語には原型的なオブジェクトという概念があります。このオブジェクトは新しいオブジェクトの初期プロパティを取得する元になるテンプレートとして使用されます。どのオブジェクトもそれ独自のプロパティを指定できます。オブジェクト作成時にも実行時にも可能です。さらに、どのオブジェクトも別のオブジェクトに対するプロトタイプとして関連付けることができます。2 つ目のオブジェクトが 1 つ目のオブジェクトのプロトタイプを共有するということもできます。</p> +<h4 id=".E3.82.AF.E3.83.A9.E3.82.B9.E3.81.AE.E5.AE.9A.E7.BE.A9" name=".E3.82.AF.E3.83.A9.E3.82.B9.E3.81.AE.E5.AE.9A.E7.BE.A9">クラスの定義</h4> +<p>クラスベース言語ではクラス定義ごとにクラスを定義します。定義では特殊なメソッドを指定してそのクラスのインスタンスを作成することができます。そのようなメソッドはコンストラクタと呼びます。コンストラクタメソッドはインスタンスのプロパティに対する初期値を指定することができます。また、作成時に他の適当な処理を実行することもできます。new 演算子をコンストラクタメソッドと一緒に用いることでクラスのインスタンスを作成できます。</p> +<p>JavaScript は同様のモデルに従っていますが、コンストラクタと別になっているクラス定義がありません。その代わりに、プロパティと値からなる特定の初期的なセットを持つオブジェクトを作成するコンストラクタ関数を定義します。どの JavaScript 関数もコンストラクタとして使用できます。new 演算子をコンストラクタ関数とともに使用することで新しいオブジェクトを作成します。</p> +<h4 id=".E3.82.B5.E3.83.96.E3.82.AF.E3.83.A9.E3.82.B9.E3.81.A8.E7.B6.99.E6.89.BF" name=".E3.82.B5.E3.83.96.E3.82.AF.E3.83.A9.E3.82.B9.E3.81.A8.E7.B6.99.E6.89.BF">サブクラスと継承</h4> +<p>クラスベース言語ではクラス定義を通じてクラスの階層を作ります。クラス定義では新しいクラスがある既存のクラスのサブクラスになるように指定することができます。サブクラスはスーパークラスの全プロパティを継承します。さらに新しくプロパティを追加したり継承したものを変更することもできます。例えば、Employee クラスが name および dept プロパティのみを含んでおり、Manager は reports プロパティを追加する Employee のサブクラスであるとします。この場合、Manager クラスのインスタンスは name、dept、reports という 3 つのプロパティをすべて持つことになります。</p> +<p>JavaScript では、原型的なオブジェクトをどのコンストラクタ関数にも結びつけることができるようにして継承を実装しています。そのため、全く同じような Employee と Manager の例を作成することができますが、使用する用語が若干異なります。まず、Employee コンストラクタ関数を定義します。これは name および dept プロパティを指定します。次に Manager コンストラクタ関数を定義します。これは reports プロパティを指定します。最後に新しい Employee オブジェクトを Manager コンストラクタ関数に対するプロトタイプとして代入します。そして新しい Manager を作成すると、このオブジェクトは Employee オブジェクトから name および dept プロパティを継承します。</p> +<h4 id=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.BF.BD.E5.8A.A0.E3.81.A8.E5.89.8A.E9.99.A4" name=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.BF.BD.E5.8A.A0.E3.81.A8.E5.89.8A.E9.99.A4">プロパティの追加と削除</h4> +<p>クラスベース言語では一般的にクラスをコンパイル時に生成し、コンパイル時または実行時にクラスのインスタンスを作成します。クラス定義後にそのクラスのプロパティの数や型を変更することはできません。しかし、JavaScript ではどんなオブジェクトでも実行時にプロパティを追加したり削除したりすることができます。あるオブジェクトのセットでプロトタイプとして使用されているオブジェクトにプロパティを追加すると、そのプロトタイプの使用元であるオブジェクトにも新しいプロパティが追加されます。</p> +<h4 id=".E9.81.95.E3.81.84.E3.81.AE.E6.A6.82.E8.A6.81" name=".E9.81.95.E3.81.84.E3.81.AE.E6.A6.82.E8.A6.81">違いの概要</h4> +<p>次の表でこれらの違いをいくつか短くまとめてみます。この章の残りで、JavaScript のコンストラクタとプロトタイプを用いてオブジェクト階層を作成することについての詳細を説明していきます。また、この方法が Java ではどう変わるかという比較もします。</p> +<table class="fullwidth-table"> <tbody> <tr> <th>クラスベース (Java)</th> <th>プロトタイプベース (JavaScript)</th> </tr> <tr> <td>クラスとインスタンスは異なる実体である。</td> <td>すべてのオブジェクトはインスタンスである。</td> </tr> <tr> <td>クラス定義を用いてクラスを定義する。また、コンストラクタメソッドを用いてクラスをインスタンス化する。</td> <td>コンストラクタ関数を用いてオブジェクトのセットを定義し、作成する。</td> </tr> <tr> <td><code>new</code> 演算子を用いて単一のオブジェクトを作成する。</td> <td>同じ。</td> </tr> <tr> <td>既存のクラスのサブクラスを定義するクラス定義を用いてオブジェクト階層を構築する。</td> <td>コンストラクタ関数に結びつけられたプロトタイプとしてオブジェクトを代入することでオブジェクト階層を構築する。</td> </tr> <tr> <td>クラスチェーンに従ってプロパティを継承する。</td> <td>プロトタイプチェーンに従ってプロパティを継承する。</td> </tr> <tr> <td>クラス定義がクラスの全インスタンスの全プロパティを指定する。実行時に動的にプロパティを追加することはできない。</td> <td>コンストラクタ関数またはプロトタイプがプロパティの初期セットを指定する。個々のオブジェクトやオブジェクトの全体のセットに動的にプロパティを追加したり、それらからプロパティを除去したりできる。</td> </tr> </tbody> +</table> +<div class="noinclude"> +<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Core_Objects:String_Object", "Core_JavaScript_1.5_Guide:The_Employee_Example") }}</p> +</div> +<p>{{ languages( { "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/以類別為基礎的語言_vs._以原型為基礎的語言", "en": "en/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages", "es": "es/Gu\u00eda_JavaScript_1.5/Lenguajes_basados_en_clases_frente_a_basados_en_prototipos", "fr": "fr/Guide_JavaScript_1.5/Langages_bas\u00e9s_sur_les_classes_et_langages_bas\u00e9s_sur_les_prototypes", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/J\u0119zyki_oparte_na_klasach_vs._oparte_na_prototypach", "zh-cn": "cn/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages" } ) }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/core_language_features/index.html b/files/ja/orphaned/web/javascript/guide/core_language_features/index.html new file mode 100644 index 0000000000..2161ec589e --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/core_language_features/index.html @@ -0,0 +1,10 @@ +--- +title: Core Language Features +slug: Web/JavaScript/Guide/Core_Language_Features +--- +<div> +{{page("/ja/docs/Core_JavaScript_1.5_Guide/Values()")}} +{{page("/ja/docs/Core_JavaScript_1.5_Guide/Variables()")}} +{{page("/ja/docs/Core_JavaScript_1.5_Guide/Constants()")}} +{{page("/ja/docs/Core_JavaScript_1.5_Guide/Literals()")}} +{{page("/ja/docs/Core_JavaScript_1.5_Guide/Unicode()")}}</div> diff --git a/files/ja/orphaned/web/javascript/guide/creating_a_regular_expression/index.html b/files/ja/orphaned/web/javascript/guide/creating_a_regular_expression/index.html new file mode 100644 index 0000000000..19935b8b55 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/creating_a_regular_expression/index.html @@ -0,0 +1,31 @@ +--- +title: 正規表現の作成 +slug: Web/JavaScript/Guide/Creating_a_Regular_Expression +--- +<h2 id="正規表現の作成">正規表現の作成</h2> +<p>正規表現は 2 つの方法で作ることができます。</p> +<ul> + <li>次のように、正規表現リテラルを使用する。</li> +</ul> +<pre>var re = /ab+c/; </pre> +<dl> + <dd> + <dl> + <dd> + 正規表現リテラルでは、スクリプトが評価されるときにその正規表現をコンパイルします。正規表現を定数として残しておくときは、この方法を使用するとよりよいパフォーマンスが得られます。</dd> + </dl> + </dd> +</dl> +<ul> + <li>次のように、<a href="/ja/JavaScript/Reference/Global_Objects/RegExp" title="ja/JavaScript/Reference/Global_Objects/RegExp">RegExp</a> オブジェクトのコンストラクタ関数を呼び出す。</li> +</ul> +<pre>var re = new RegExp("ab+c"); </pre> +<dl> + <dd> + <dl> + <dd> + コンストラクタ関数を使用すると、実行時にその正規表現をコンパイルします。正規表現パターンが変わることがわかっている場合や、パターンがわからない場合、ユーザが入力するなど、別のソースからパターンを取得する場合はコンストラクタ関数を使用してください。</dd> + </dl> + </dd> +</dl> +<p>{{ PreviousNext("JavaScript/Guide/Operators/Special_Operators", "JavaScript/Guide/Writing_a_Regular_Expression_Pattern") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/creating_new_objects/defining_getters_and_setters/index.html b/files/ja/orphaned/web/javascript/guide/creating_new_objects/defining_getters_and_setters/index.html new file mode 100644 index 0000000000..8ee9381575 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/creating_new_objects/defining_getters_and_setters/index.html @@ -0,0 +1,89 @@ +--- +title: ゲッターとセッターの定義 +slug: Web/JavaScript/Guide/Creating_New_Objects/Defining_Getters_and_Setters +--- +<h3 id=".E3.82.B2.E3.83.83.E3.82.BF.E3.81.A8.E3.82.BB.E3.83.83.E3.82.BF.E3.81.AE.E5.AE.9A.E7.BE.A9" name=".E3.82.B2.E3.83.83.E3.82.BF.E3.81.A8.E3.82.BB.E3.83.83.E3.82.BF.E3.81.AE.E5.AE.9A.E7.BE.A9">ゲッターとセッターの定義</h3> + +<p>ゲッターはある属性の値を取得するメソッドです。セッターは属性に値を設定するメソッドです。全ての定義済みコアオブジェクトと、新しいプロパティの追加をサポートしているユーザ定義オブジェクトに対してゲッターとセッターを定義できます。ゲッターとセッターの定義にはオブジェクトリテラル構文を使用します。</p> + +<p>以下の例では、ユーザ定義オブジェクト o についてゲッターとセッターがどのように機能するかを説明します。<a href="/ja/docs/SpiderMonkey/Introduction_to_the_JavaScript_shell">JavaScript シェル</a> とは JavaScript コードをバッチモードで、またはインタラクティブにテストすることができる、開発者向けのアプリケーションのことです。</p> + +<p><code>o</code> オブジェクトのプロパティは以下のとおりです。</p> + +<ul> + <li>o.a - 数値</li> + <li>o.b - o.a に 1 を加えて返すゲッター</li> + <li>o.c - o.a の値にその値の 1/2 の値をセットするセッター</li> +</ul> + +<pre>js> o = new Object; +[object Object] +js> o = {a:7, get b() {return this.a+1; }, set c(x) {this.a = x/2}}; +[object Object] +js> o.a +7 +js> o.b +8 +js> o.c = 50 +js> o.a +25 +js> +</pre> + +<p>次の例では、 Date プロトタイプを拡張して定義済み <code>Date</code> クラスの全インスタンスに year プロパティを追加する様子を表しています。<code>Date</code> クラスの既存の <code>getFullYear</code> および <code>setFullYear</code> メソッドを使用して year プロパティのゲッターとセッターを実装します。</p> + +<p>これらの文は year プロパティに対するゲッターとセッターを定義しています。</p> + +<pre>js> var d = Date.prototype; +js> d.__defineGetter__("year", function() { return this.getFullYear(); }); +js> d.__defineSetter__("year", function(y) { this.setFullYear(y); }); +</pre> + +<p>これらの文は <code>Date</code> オブジェクトで定義したゲッターとセッターを使用しています。</p> + +<pre>js> var now = new Date; +js> print(now.year); +2000 +js> now.year=2001; +987617605170 +js> print(now); +Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001 +</pre> + +<div class="note">JavaScript 1.5 の開発期間中に <code>getter =</code> や <code>setter =</code> といった式を使用して新しいゲッターやセッターを既存のオブジェクトで定義するようになっていた時期がありました。この構文は現在は廃止予定であり、現行の JS 1.5 エンジンでは警告を発します。また、将来的には構文エラーになります。使用を避けるようにしてください</div> + +<p> </p> + +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> + +<p>原則的にゲッターとセッターは次のどちらかに属します。</p> + +<ul> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers" title="ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers">オブジェクト初期化子</a> を用いて定義されたもの</li> + <li>ゲッターやセッターを追加するメソッドを用いてオブジェクトに後から追加されたもの</li> +</ul> + +<p><a href="/ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers" title="ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers">オブジェクト初期化子</a> を用いてゲッターやセッターを定義する際には、ゲッターメソッドの先頭に <code>get</code> を、セッターメソッドの先頭に <code>set</code> をそれぞれ付けなくてはなりません。セッターメソッドはセットする新しい値を受けわたすための引数を 1 つだけ持ちます。ゲッターメソッドはパラメータを受け取るようにしてはいけません。</p> + +<pre class="eval">o = { + a:7, + <strong>get</strong> b() { return this.a+1; }, + <strong>set</strong> c(x) { this.a = x/2; } +}; +</pre> + +<p>ゲッターもセッターも、<code>__defineGetter__</code> および <code>__defineSetter__</code> という 2 つの特別なメソッドを用いて、オブジェクト作成後でも、そのオブジェクトに追加することができます。両メソッドの第 1 引数にはそのゲッターやセッターの名前を文字列で指定します。第 2 引数にはゲッターやセッターとして呼び出す関数を指定します。前の例を別の方法で実装したものを以下に示します。</p> + +<pre class="eval">o.__defineGetter__("b", function() { return this.a+1; }); +o.__defineSetter__("c", function(x) { this.a = x/2; }); +</pre> + +<p>2 つの形式のうちどちらを選択するかはあなたのプログラミングスタイルや、目の前の課題次第によります。プロトタイプの定義時にオブジェクト初期化子を使用しているのであれば、最初の形式を選択するのがよいでしょう。この形式はよりコンパクトかつ自然です。ゲッターやセッターを後から追加する必要がある場合は、プロトタイプや特定のオブジェクトを書いていないため、第 2 の形式しか使用できません。第 2 の形式は JavaScript の動的性質をおそらく最もよく表していますが、コードが可読性が下がったり、理解しづらいものとなることがあります。</p> + +<div class="note"> +<p>Firefox 3.0 より前のバージョンではゲッターとセッターが DOM 要素に対してサポートされていません。古いバージョンの Firefox では例外を投げることなく失敗します。そのときに例外が必要であれば、HTMLElement のプロトタイプを変更し <code>(HTMLElement.prototype.__define{{ mediawiki.external('SG') }}etter__)</code>、例外を投げるようにして回避してください。</p> + +<p>Firefox 3.0 では、定義済みのプロパティでゲッターとセッターを定義すると例外が投げられます。そのプロパティは事前に削除しておく必要があります。これは古いバージョンの Firefox には当てはまりません。</p> +</div> + +<p>{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Using_this_for_Object_References", "JavaScript/Guide/Creating_New_Objects/Deleting_Properties") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/creating_new_objects/defining_methods/index.html b/files/ja/orphaned/web/javascript/guide/creating_new_objects/defining_methods/index.html new file mode 100644 index 0000000000..74731a99d1 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/creating_new_objects/defining_methods/index.html @@ -0,0 +1,39 @@ +--- +title: メソッドの定義 +slug: Web/JavaScript/Guide/Creating_New_Objects/Defining_Methods +--- +<h3 id=".E3.83.A1.E3.82.BD.E3.83.83.E3.83.89.E3.81.AE.E5.AE.9A.E7.BE.A9" name=".E3.83.A1.E3.82.BD.E3.83.83.E3.83.89.E3.81.AE.E5.AE.9A.E7.BE.A9">メソッドの定義</h3> +<p><em>メソッド</em>とはあるオブジェクトに結びつけられた関数のことです。メソッドは、通常の関数の定義と同じ方法で定義します。既存のオブジェクトに関数を結びつけるには次の構文を使用します。</p> +<pre>object.methodname = function_name +</pre> +<p>ここで、<code>object</code> は既存のオブジェクトを、<code>methodname</code> はメソッドに割り当てる名前を、<code>function_name</code> は関数の名前をそれぞれ表しています。</p> +<p>すると、次のようにしてオブジェクトのコンテキストでそのメソッドを呼び出すことができます。</p> +<pre>object.methodname(params); +</pre> +<p>オブジェクトのコンストラクタ関数にメソッドの定義を含めることで、あるオブジェクトの種類についてのメソッドを定義することができます。例えば、以前に定義した car オブジェクトのプロパティを整形して表示する関数を定義します。</p> +<pre>function displayCar() { + var result = "A Beautiful " + this.year + " " + this.make + + " " + this.model; + pretty_print(result); +} +</pre> +<p><code>pretty_print</code> は水平方向の罫線と文字列を表示する関数です。<code>this</code> を使用してそのメソッドを抱えているオブジェクトを参照しています。</p> +<p>次の文</p> +<pre>this.displayCar = displayCar; +</pre> +<p>をオブジェクトの定義に加えることで、この関数を car のメソッドにすることができます。そうすると、<code>car</code> の完全な定義は次のようになります。</p> +<pre>function car(make, model, year, owner) { + this.make = make; + this.model = model; + this.year = year; + this.owner = owner; + this.displayCar = displayCar; +} +</pre> +<p>すると、次のようにして各オブジェクトについて <code>displayCar</code> メソッドを呼び出すことができます。</p> +<pre>car1.displayCar() +car2.displayCar() +</pre> +<p>こうすると次の図のような出力が得られます。</p> +<p><img alt="Image:obja.gif" class="internal" src="/@api/deki/files/1941/=Obja.gif"> <small><strong>図 7.1：メソッドの出力の表示</strong></small></p> +<p>{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type", "JavaScript/Guide/Creating_New_Objects/Using_this_for_Object_References") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/creating_new_objects/defining_properties_for_an_object_type/index.html b/files/ja/orphaned/web/javascript/guide/creating_new_objects/defining_properties_for_an_object_type/index.html new file mode 100644 index 0000000000..b5136b203e --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/creating_new_objects/defining_properties_for_an_object_type/index.html @@ -0,0 +1,13 @@ +--- +title: Defining Properties for an Object Type +slug: >- + Web/JavaScript/Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type +--- +<h3 id=".E3.81.82.E3.82.8B.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AE.E7.A8.AE.E9.A1.9E.E3.81.AB.E5.AF.BE.E3.81.99.E3.82.8B.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E5.AE.9A.E7.BE.A9" name=".E3.81.82.E3.82.8B.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AE.E7.A8.AE.E9.A1.9E.E3.81.AB.E5.AF.BE.E3.81.99.E3.82.8B.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E5.AE.9A.E7.BE.A9">あるオブジェクトの種類に対するプロパティの定義</h3> +<p><code>prototype</code> プロパティを用いて、定義済みのオブジェクトの種類にプロパティを追加することができます。この方法では、指定した種類のすべてのオブジェクトで共有されるプロパティを定義することになります。そのオブジェクトのあるインスタンス 1 つだけということではありません。次のコードは <code>color</code> プロパティを <code>car</code> という種類の全オブジェクトに追加し、値をオブジェクト <code>car1</code> の <code>color</code> プロパティに代入します。</p> +<pre>car.prototype.color=null; +car1.color="black"; +</pre> +<p>詳しくは <a href="/ja/Core_JavaScript_1.5_Reference" title="ja/Core_JavaScript_1.5_Reference">コア JavaScript リファレンス</a> 内の Function オブジェクトの <a href="/ja/Core_JavaScript_1.5_Reference/Objects/Function#.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3" title="ja/Core_JavaScript_1.5_Reference/Objects/Function#.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3"><code>prototype</code> プロパティ</a> を参照してください。</p> + +<p>{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Indexing_Object_Properties", "JavaScript/Guide/Creating_New_Objects/Defining_Methods") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/creating_new_objects/deleting_properties/index.html b/files/ja/orphaned/web/javascript/guide/creating_new_objects/deleting_properties/index.html new file mode 100644 index 0000000000..749ee722f5 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/creating_new_objects/deleting_properties/index.html @@ -0,0 +1,20 @@ +--- +title: プロパティの削除 +slug: Web/JavaScript/Guide/Creating_New_Objects/Deleting_Properties +--- +<h2 id="プロパティの削除">プロパティの削除</h2> +<p><code>delete</code> 演算子を用いることでプロパティを除去することができます。次のコードでプロパティの除去方法を示します。</p> +<pre>// 新しいオブジェクト myobj を作成。2 つのプロパティ、a および b を持つ。 +myobj = new Object; +myobj.a = 5; +myobj.b = 12; + +// a プロパティを除去。myobj には b プロパティだけが残っている。 +delete myobj.a; +</pre> +<p><code>delete</code> を使用することでグローバル変数を削除することもできます。ただし、これは <code>var</code> キーワードを使用せずにその変数を宣言した場合のみです。</p> +<pre>g = 17; +delete g; +</pre> +<p>さらなる情報については <a href="/ja/Core_JavaScript_1.5_Guide/Operators/Special_Operators#delete" title="ja/Core_JavaScript_1.5_Guide/Operators/Special_Operators#delete">delete</a> をご覧ください。</p> +<p>{{PreviousNext("JavaScript/Guide/Creating_New_Objects/Defining_Getters_and_Setters", "JavaScript/Guide/Predefined_Core_Objects")}}</p> diff --git a/files/ja/orphaned/web/javascript/guide/creating_new_objects/index.html b/files/ja/orphaned/web/javascript/guide/creating_new_objects/index.html new file mode 100644 index 0000000000..0cbbc1753c --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/creating_new_objects/index.html @@ -0,0 +1,17 @@ +--- +title: 新しいオブジェクトの作成 +slug: Web/JavaScript/Guide/Creating_New_Objects +--- +<h3 id=".E6.96.B0.E3.81.97.E3.81.84.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AE.E4.BD.9C.E6.88.90" name=".E6.96.B0.E3.81.97.E3.81.84.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AE.E4.BD.9C.E6.88.90">新しいオブジェクトの作成</h3> +<p>JavaScript には多くの定義済みオブジェクトがあります。さらに、自分でオブジェクトを作り出すことができます。JavaScript 1.2 以降では、オブジェクト初期化子を用いてオブジェクトを作成できます。もう 1 つの方法として、まずコンストラクタ関数を作成し、それからその関数と new 演算子を用いてオブジェクトのインスタンスを作成することもできます。</p> +<ul> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers" title="ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers">オブジェクト初期化子の使用</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function" title="ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function">コンストラクタ関数の使用</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties" title="ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties">オブジェクトのプロパティのインデックス付け</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type" title="ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type">あるオブジェクトの種類に対するプロパティの定義</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods" title="ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods">メソッドの定義</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References" title="ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References">this を用いたオブジェクト参照</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters" title="ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters">ゲッタとセッタの定義</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties" title="ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties">プロパティの削除</a></li> +</ul> +<p>{{ PreviousNext("JavaScript/Guide/Objects_and_Properties", "JavaScript/Guide/Creating_New_Objects/Using_Object_Initializers") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/creating_new_objects/indexing_object_properties/index.html b/files/ja/orphaned/web/javascript/guide/creating_new_objects/indexing_object_properties/index.html new file mode 100644 index 0000000000..024de85654 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/creating_new_objects/indexing_object_properties/index.html @@ -0,0 +1,9 @@ +--- +title: オブジェクトのプロパティに対するインデックス付け +slug: Web/JavaScript/Guide/Creating_New_Objects/Indexing_Object_Properties +--- +<h3 id=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E3.82.A4.E3.83.B3.E3.83.87.E3.83.83.E3.82.AF.E3.82.B9.E4.BB.98.E3.81.91" name=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E3.82.A4.E3.83.B3.E3.83.87.E3.83.83.E3.82.AF.E3.82.B9.E4.BB.98.E3.81.91">オブジェクトのプロパティのインデックス付け</h3> +<p>JavaScript 1.0 では、オブジェクトのプロパティを、そのプロパティ名や順序のインデックスで参照できます。しかしながら、JavaScript 1.1 以降では、最初にプロパティをその名前で定義すると、常にその名前で参照しなければならず、また、最初にプロパティをインデックスで定義すると、常にそのインデックスで参照しなければなりません。</p> +<p>先の Car というオブジェクトの種類の例のようにコンストラクタ関数を用いてオブジェクトとそのプロパティを作成したとき、また、それぞれのプロパティを明示的に定義したとき（例：<code>myCar.color = "red"</code>）に、これは適用されます。そのため、<code>myCar{{ mediawiki.external(5) }} = "25 mpg"</code> のように、最初にインデックスを用いてオブジェクトのプロパティを定義した場合、<code>myCar{{ mediawiki.external(5) }}</code> のようにそのプロパティを後から参照できるようになります。</p> +<p>このルールの例外は、<code>forms</code> 配列のように HTML から反映されたオブジェクトです。これらの配列内のオブジェクトは、その順番を表す数（文書内のどこにあるかに基づく）か、またはその名前（定義されている場合）のどちらかで常に参照できます。例えば、文書内の 2 番目の <code><FORM></code> タグが "myForm" という <code>NAME</code> 属性を持っている場合、<code>document.forms{{ mediawiki.external(1) }}</code> や <code>document.forms{{ mediawiki.external('\"myForm\"') }}</code> や <code>document.myForm</code> とすることでそのフォームを参照できます。</p> +<p>{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function", "JavaScript/Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/creating_new_objects/using_a_constructor_function/index.html b/files/ja/orphaned/web/javascript/guide/creating_new_objects/using_a_constructor_function/index.html new file mode 100644 index 0000000000..f3abc30e89 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/creating_new_objects/using_a_constructor_function/index.html @@ -0,0 +1,57 @@ +--- +title: コンストラクタ関数の使用 +slug: Web/JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function +--- +<h3 id=".E3.82.B3.E3.83.B3.E3.82.B9.E3.83.88.E3.83.A9.E3.82.AF.E3.82.BF.E9.96.A2.E6.95.B0.E3.81.AE.E4.BD.BF.E7.94.A8" name=".E3.82.B3.E3.83.B3.E3.82.B9.E3.83.88.E3.83.A9.E3.82.AF.E3.82.BF.E9.96.A2.E6.95.B0.E3.81.AE.E4.BD.BF.E7.94.A8">コンストラクタ関数の使用</h3> +<p>もう 1 つの方法として、次の 2 つのステップでオブジェクトを作成することができます。</p> +<ol> + <li>コンストラクタ関数を書くことでオブジェクトの種類を定義する。</li> + <li>new を用いてそのオブジェクトのインスタンスを作成する。</li> +</ol> +<p>オブジェクトの種類を定義するために、その名前、プロパティ、メソッドを定義する関数を作成する必要があります。例えば、車についてのオブジェクトの種類を作成したいとします。そしてこの種類のオブジェクトに <code>car</code> という名前を付け、make、model、および year というプロパティを持たせたいとします。こうするためには次のような関数を書きます。</p> +<pre>function car(make, model, year) { + this.make = make; + this.model = model; + this.year = year; +} +</pre> +<p>関数に渡された値に基づいてオブジェクトのプロパティに値を代入するために <code>this</code> を使用しています。</p> +<p>すると、次のようにして <code>mycar</code> というオブジェクトを作成することができるようになります。</p> +<pre>mycar = new car("Eagle", "Talon TSi", 1993); +</pre> +<p>この文は <code>mycar</code> を作成し、そのプロパティ用に指定した値を代入します。その結果、<code>mycar.make</code> の値は "Eagle" という文字列、<code>mycar.year</code> は 1993 という整数というようになります。</p> +<p><code>new</code> を呼び出すことで <code>car</code> オブジェクトをいくらでも作ることができます。</p> +<pre>kenscar = new car("Nissan", "300ZX", 1992); +vpgscar = new car("Mazda", "Miata", 1990); +</pre> +<p>それ自身別のオブジェクトであるというようなプロパティを持つオブジェクトを作ることができます。例えば、次のように <code>person</code> というオブジェクトを定義するとします。</p> +<pre>function person(name, age, sex) { + this.name = name; + this.age = age; + this.sex = sex; +} +</pre> +<p>そして、次のように 2 つの新しい person オブジェクトのインスタンスを作成します。</p> +<pre>rand = new person("Rand McKinnon", 33, "M"); +ken = new person("Ken Jones", 39, "M"); +</pre> +<p>次のようにして、car の定義を書き換えて、<code>person</code> オブジェクトをとる owner プロパティを持たせることができます。</p> +<pre>function car(make, model, year, owner) { + this.make = make; + this.model = model; + this.year = year; + this.owner = owner; +} +</pre> +<p>新しいオブジェクトのインスタンスを作成するために、次のようにします。</p> +<pre>car1 = new car("Eagle", "Talon TSi", 1993, rand); +car2 = new car("Nissan", "300ZX", 1992, ken); +</pre> +<p>新しいオブジェクトの作成時に文字列リテラルや整数値を渡す代わりに、上記の文ではオブジェクト <code>rand</code> および <code>ken</code> を所有者を表す引数として渡しています。car2 の所有者の名前を知りたい場合は次のプロパティにアクセスすることで可能になります。</p> +<pre>car2.owner.name +</pre> +<p>以前に定義したオブジェクトにいつでもプロパティを追加できることに注意してください。例えば次の文</p> +<pre>car1.color = "black" +</pre> +<p>はプロパティ <code>color</code> を car1 に追加し、それに "black" という値を代入します。しかしながら、この方法では他のどのオブジェクトにも影響を与えません。同じ種類の全オブジェクトに新しいプロパティを追加するには、そのプロパティを car というオブジェクトの種類の定義に追加する必要があります。</p> +<p>{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Using_Object_Initializers", "JavaScript/Guide/Creating_New_Objects/Indexing_Object_Properties") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/creating_new_objects/using_object_initializers/index.html b/files/ja/orphaned/web/javascript/guide/creating_new_objects/using_object_initializers/index.html new file mode 100644 index 0000000000..0a817b5407 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/creating_new_objects/using_object_initializers/index.html @@ -0,0 +1,23 @@ +--- +title: オブジェクト初期化子の使用 +slug: Web/JavaScript/Guide/Creating_New_Objects/Using_Object_Initializers +--- +<h3 id=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E5.88.9D.E6.9C.9F.E5.8C.96.E5.AD.90.E3.81.AE.E4.BD.BF.E7.94.A8" name=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E5.88.9D.E6.9C.9F.E5.8C.96.E5.AD.90.E3.81.AE.E4.BD.BF.E7.94.A8">オブジェクト初期化子の使用</h3> +<p>コンストラクタ関数を使用してオブジェクトを作成する方法だけではなく、オブジェクト初期化子を使用してもオブジェクトを作成することができます。オブジェクト初期化子を使うことはリテラル表示を用いてオブジェクトを作成するということです。「オブジェクト初期化子」は C++ でも同じ意味で使用されている用語です。</p> +<p>オブジェクト初期化子を使用したオブジェクトの構文は次のとおりです。</p> +<pre class="eval">var obj = { property_1: value_1, // property_# は識別子でもよい + 2: value_2, // あるいは数値でもよい + ..., + "property_n": value_n }; // あるいは文字列でもよい +</pre> +<p>ここで、<code>obj</code> は新しいオブジェクトの名前を、各 <code>property_<em>i</em></code> は識別子（名前、数値、文字列リテラルのいずれか）を、各 <code>value_<em>i</em></code> はその値を <code>property_<em>i</em></code> に代入する式をそれぞれ表しています。<code>obj</code> および代入部分はなくてもかまいません。このオブジェクトを別の場所で参照する必要がないのであれば変数に代入する必要はありません。（文が期待されているところにオブジェクトリテラルを置く場合、リテラルを丸括弧で囲み、ブロック文と間違われないようにする必要があるかもしれません。）</p> +<p>トップレベルのスクリプトでオブジェクト初期化子を使用してオブジェクトを作成した場合、JavaScript はオブジェクトリテラルを含む式を評価するたびにそのオブジェクトを解釈します。さらに、関数内で使用された初期化子はその関数が呼び出されるたびに作成されます。</p> +<p>次の文は、式 cond が true の場合かつその場合に限り、あるオブジェクトを作成し、それを変数 <code>x</code> に代入します。</p> +<pre class="eval">if (cond) x = {hi:"there"}; +</pre> +<p>次の例は 3 つのプロパティを持つ <code>myHonda</code> を作成します。<code>engine</code> プロパティは自らもプロパティを持つオブジェクトでもあることに注意してください。</p> +<pre class="eval">myHonda = {color:"red",wheels:4,engine:{cylinders:4,size:2.2}}; +</pre> +<p>オブジェクト初期化子を使用して配列を作成することもできます。<a href="/ja/Core_JavaScript_1.5_Guide/Literals#.E9.85.8D.E5.88.97.E3.83.AA.E3.83.86.E3.83.A9.E3.83.AB" title="ja/Core_JavaScript_1.5_Guide/Literals#.E9.85.8D.E5.88.97.E3.83.AA.E3.83.86.E3.83.A9.E3.83.AB">配列リテラル</a> を参照してください。</p> +<p>JavaScript 1.1 以前ではオブジェクト初期化子を使用することはできません。コンストラクタ関数を使用するか、他のオブジェクトが備えているそのような用途の関数を使用しないとオブジェクトを作成できません。<a href="/ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function" title="ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function">コンストラクタ関数の使用</a> をご覧ください。</p> +<p>{{ PreviousNext("JavaScript/Guide/Creating_New_Objects", "JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/creating_new_objects/using_this_for_object_references/index.html b/files/ja/orphaned/web/javascript/guide/creating_new_objects/using_this_for_object_references/index.html new file mode 100644 index 0000000000..5fbd3b8aff --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/creating_new_objects/using_this_for_object_references/index.html @@ -0,0 +1,25 @@ +--- +title: this を用いたオブジェクト参照 +slug: Web/JavaScript/Guide/Creating_New_Objects/Using_this_for_Object_References +--- +<h3 id="this_.E3.82.92.E7.94.A8.E3.81.84.E3.81.9F.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E5.8F.82.E7.85.A7" name="this_.E3.82.92.E7.94.A8.E3.81.84.E3.81.9F.E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E5.8F.82.E7.85.A7">this を用いたオブジェクト参照</h3> +<p>JavaScript にはカレントオブジェクトを参照するメソッド内で使用できる特殊なキーワード、this があります。例えば、あるオブジェクトの value プロパティの妥当性を確認する <code>validate</code> という関数があるとします。関数にはそのオブジェクトと、上限および下限の値を渡します。</p> +<pre>function validate(obj, lowval, hival) { + if ((obj.value < lowval) || (obj.value > hival)) + alert("Invalid Value!"); +} +</pre> +<p>各フォーム要素の <code>onchange</code> イベントハンドラにおいて <code>validate</code> を呼び出します。this を使うことで <code>form</code> 要素を渡すことができます。次の例をご覧ください。</p> +<pre><input type="text" name="age" size="3" + onChange="validate(this, 18, 99)"> +</pre> +<p>一般に <code>this</code> はあるメソッド内でそのメソッドを呼び出したオブジェクトを参照します。</p> +<p><code>form</code> プロパティと組み合わせることで、<code>this</code> はカレントオブジェクトの親のフォームを参照できます。次の例では、<code>myForm</code> というフォームに <code>Text</code> オブジェクトとボタンが格納されています。ユーザがボタンをクリックすると、<code>Text</code> オブジェクトの値にフォーム名がセットされます。ボタンの <code>onclick</code> イベントハンドラは <code>this.form</code> を利用して親のフォームである <code>myForm</code> を参照します。</p> +<pre><form name="myForm"> +<p><label>Form name:<input type="text" name="text1" value="Beluga"></label> +<p><input name="button1" type="button" value="Show Form Name" + onclick="this.form.text1.value=this.form.name"> +</p> +</form> +</pre> +<p>{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Defining_Methods", "JavaScript/Guide/Creating_New_Objects/Defining_Getters_and_Setters") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/expressions/index.html b/files/ja/orphaned/web/javascript/guide/expressions/index.html new file mode 100644 index 0000000000..4feb2b1aa8 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/expressions/index.html @@ -0,0 +1,16 @@ +--- +title: Expressions +slug: Web/JavaScript/Guide/Expressions +--- +<div>{{ 英語版章題("Expressions") }}</div> +<h2 id="式">式</h2> +<p><em>式</em>とは、リテラル、変数、演算子、そして単一の値に評価する式からなる有効なセットです。この値には数値、文字列、論理値が使用できます。</p> +<p>概念的に、式は 2 つの種類に分けることができます。ある値を変数に代入するものと、単純にある値を持つものです。例えば、<code>x = 7</code> という式は x に 7 という値を代入する式です。この式自体の評価結果は 7 です。このような式では<em>代入演算子</em>を用います。一方、<code>3 + 4</code> という式では単純に評価結果が 7 になります。この式は代入を行いません。このような式で用いられる演算子は単に<em>演算子</em>と呼ばれます。</p> +<p>JavaScript には以下の種類の式があります。</p> +<ul> + <li>算術式：数値に評価する。例えば 3.14159。（一般に <a href="/ja/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators" title="ja/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators">算術演算子</a> を使用）</li> + <li>文字列式：文字列に評価する。例えば "Fred" や "234"。（一般に <a href="/ja/Core_JavaScript_1.5_Guide/Operators/String_Operators" title="ja/Core_JavaScript_1.5_Guide/Operators/String_Operators">文字列演算子</a> を使用）</li> + <li>論理式：true または false に評価する。（よく <a href="/ja/Core_JavaScript_1.5_Guide/Operators/Logical_Operators" title="ja/Core_JavaScript_1.5_Guide/Operators/Logical_Operators">論理演算子</a> を用いる)</li> + <li>オブジェクト式：オブジェクトに評価する。（オブジェクトに評価するさまざまな例については <a href="/ja/Core_JavaScript_1.5_Guide/Operators/Special_Operators" title="ja/Core_JavaScript_1.5_Guide/Operators/Special_Operators">特殊演算子</a> を参照）</li> +</ul> +<p>{{ PreviousNext("JavaScript/Guide/Unicode", "JavaScript/Guide/Operators") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/loop_statements/break_statement/index.html b/files/ja/orphaned/web/javascript/guide/loop_statements/break_statement/index.html new file mode 100644 index 0000000000..35cc94abdf --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/loop_statements/break_statement/index.html @@ -0,0 +1,24 @@ +--- +title: break 文 +slug: Web/JavaScript/Guide/Loop_Statements/break_Statement +--- +<h3 id="break_.E6.96.87" name="break_.E6.96.87">break 文</h3> +<p><code>break</code> 文は <code>loop</code> 文や <code>switch</code> 文、<code>label</code> 文から抜け出すために使用します。</p> +<ul> + <li><code>break</code> にラベルを使用しないと、最も内側にある <code>while</code> や <code>do-while</code>、<code>for</code>、<code>switch</code> から抜け、続く文にコントロールを移します。</li> + <li><code>break</code> にラベルを使用すると、指定されたラベルの付いた文から抜けます。</li> +</ul> +<p>break 文は次のように使用します。</p> +<ol> + <li><code>break;</code></li> + <li><code>break label;</code></li> +</ol> +<p>１番目の形式の構文は最も内側のループもしくは <code>switch</code> から抜けます。２番目の形式の構文は指定した label 文から抜けます。</p> +<p><strong>例</strong><br> + 次の例は、その値が <code>theValue</code> である要素のインデックスが見つかるまで、配列の要素について繰り返します。</p> +<pre>for (i = 0; i < a.length; i++) { + if (a[i] == theValue) + break; +} +</pre> +<p>{{ PreviousNext("JavaScript/Guide/Loop_Statements/label_Statement", "JavaScript/Guide/Loop_Statements/continue_Statement") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/loop_statements/continue_statement/index.html b/files/ja/orphaned/web/javascript/guide/loop_statements/continue_statement/index.html new file mode 100644 index 0000000000..f7a5697eeb --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/loop_statements/continue_statement/index.html @@ -0,0 +1,46 @@ +--- +title: continue 文 +slug: Web/JavaScript/Guide/Loop_Statements/continue_Statement +--- +<h3 id="continue_.E6.96.87" name="continue_.E6.96.87">continue 文</h3> +<p><code>continue</code> 文は <code>while</code> 文、<code>do-while</code> 文、<code>for</code> 文、<code>label</code> 文をリスタートさせるために用います。</p> +<ul> + <li>ラベルを用いずに <code>continue</code> を使用した場合、現在繰り返している最も内側にある <code>while</code> 文 <code>do-while</code> 文、<code>for</code> 文を終了し、次の反復の実行に移ります。<code>break</code> 文とは異なり、<code>continue</code> はループ全体の実行を終了しません。<code>while</code> ループでは条件比較部分に戻ります。<code>for</code> ループではインクリメントの式に移ります。</li> + <li>ラベルを用いて <code>continue</code> を使用した場合、<code>label</code> で指定されたループ文に移ります。</li> +</ul> +<p><code>continue</code> 文は次のように使用します。</p> +<ol> + <li><code>continue</code></li> + <li><code>continue label</code></li> +</ol> +<p><strong>例 1</strong><br> + 次の例では、<code>i</code> の値が 3 のときに実行される <code>continue</code> 文を用いた <code>while</code> ループを示します。こうすることで <code>n</code> は順に 1、3、7、12 という値をとります。</p> +<pre class="eval">i = 0; +n = 0; +while (i < 5) { + i++; + if (i == 3) + continue; + n += i; +} +</pre> +<p><strong>例 2</strong><br> + <code>checkiandj</code> というラベルの付いた文の中に <code>checkj</code> というラベルの付いた文があります。<code>continue</code> に出くわすと、プログラムは <code>checkj</code> の現在の反復を終了し、次の反復を始めます。<code>continue</code> に出くわすたびに、条件が false になるまで <code>checkj</code> を繰り返します。false が返されると <code>checkiandj</code> 文の残りを完了し、条件が false を返すまで <code>checkiandj</code> を繰り返します。false が返されると <code>checkiandj</code> に続く文が実行されます。</p> +<p><code>continue</code> が <code>checkiandj</code> というラベルを持っているとプログラムは <code>checkiandj</code> 文の最初から続けます。</p> +<pre>checkiandj : + while (i < 4) { + document.write(i + "<br/>"); + i += 1; + checkj : + while (j > 4) { + document.write(j + "<br/>"); + j -= 1; + if ((j % 2) == 0) + continue checkj; + document.write(j + " is odd.<br/>"); + } + document.write("i = " + i + "<br/>"); + document.write("j = " + j + "<br/>"); + } +</pre> +<p>{{ PreviousNext("JavaScript/Guide/Loop_Statements/break_Statement", "JavaScript/Guide/Object_Manipulation_Statements") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/loop_statements/do...while_statement/index.html b/files/ja/orphaned/web/javascript/guide/loop_statements/do...while_statement/index.html new file mode 100644 index 0000000000..6e1df1e586 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/loop_statements/do...while_statement/index.html @@ -0,0 +1,19 @@ +--- +title: do...while 文 +slug: Web/JavaScript/Guide/Loop_Statements/do...while_Statement +--- +<h3 id="do...while_.E6.96.87" name="do...while_.E6.96.87">do...while 文</h3> +<p><code>do...while</code> 文は指定した条件が false に評価されるまで繰り返します。<code>do...while</code> 文は次のように使用します。</p> +<pre class="eval">do + statement +while (condition); +</pre> +<p><code>statement</code> は条件がチェックされる前に一度実行されます。複数の文を実行するにはブロック文 (<code>{ ... }</code>) を使用して文をグループ化してください。<code>condition</code> が true の場合、その文が再び実行されます。毎回実行された後に条件がチェックされます。条件が false ときは実行が停止され、コントロールが <code>do...while</code> の後に続く文に渡されます。</p> +<p><strong>例</strong><br> + 次の例では do ループは最低 1 回は反復され、i が 5 より小さくなくなるまで反復されます。</p> +<pre class="eval">do { + i += 1; + document.write(i); +} while (i < 5); +</pre> +<p>{{ PreviousNext("JavaScript/Guide/Loop_Statements/for_Statement", "JavaScript/Guide/Loop_Statements/while_Statement") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/loop_statements/for_statement/index.html b/files/ja/orphaned/web/javascript/guide/loop_statements/for_statement/index.html new file mode 100644 index 0000000000..b2dccec25b --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/loop_statements/for_statement/index.html @@ -0,0 +1,50 @@ +--- +title: for 文 +slug: Web/JavaScript/Guide/Loop_Statements/for_Statement +--- +<h3 id="for_.E6.96.87" name="for_.E6.96.87">for 文</h3> +<p><code>for</code> ループは指定した条件が false に評価されるまで繰り返します。JavaScript の for ループは Java や C の for ループに似ています。<code>for</code> 文は次のように使用します。</p> +<pre class="eval">for ([initialExpression]; [condition]; [incrementExpression]) + statement +</pre> +<p><code>for</code> ループを実行すると以下のことが起こります。</p> +<ol> + <li>初期化式 <code>initialExpression</code> があれば実行されます。この式は通常、1 つかそれ以上のループカウンタを初期化しますが、構文的にはある程度複雑な式も指定できます。また、この式は変数を宣言することもできます。</li> + <li><code>condition</code> 式が評価されます。<code>condition</code> の値が true であればループ文が実行されます。<code>condition</code> が false の場合は <code>for</code> ループは終了します。<code>condition</code> 式が完全に省略されている場合、条件は true であると仮定されます。</li> + <li><code>statement</code> が実行されます。複数の式を実行するにはブロック文 (<code>{ ... }</code>) を使用して文をグループ化してください。</li> + <li>更新式 <code>incrementExpression</code> があれば実行されます。そしてコントロールがステップ 2 に戻ります。</li> +</ol> +<p><strong>例</strong><br> + 次の関数には、スクローリングリスト（複数選択できる Select オブジェクト）で選択されたオプションの数を数える <code>for</code> 文が含まれています。<code>for</code> 文では変数 <code>i</code> が宣言され、それが 0 に初期化されています。<code>i</code> が <code>Select</code> オブジェクトのオプションの個数より小さいかをチェックし、続く <code>if</code> 文を実行し、ループが 1 回りしたら <code>i</code> を 1 だけ増加させます。</p> +<pre><script type="text/javascript">//<![CDATA[ + +function howMany(selectObject) { + var numberSelected = 0; + for (var i = 0; i < selectObject.options.length; i++) { + if (selectObject.options[i].selected) + numberSelected++; + } + return numberSelected; +} + +//]]></script> +<form name="selectForm"> + <p> + <strong>Choose some music types, then click the button below:</strong> + <br/> + <select name="musicTypes" multiple="multiple"> + <option selected="selected">R&B</option> + <option>Jazz</option> + <option>Blues</option> + <option>New Age</option> + <option>Classical</option> + <option>Opera</option> + </select> + </p> + <p> + <input type="button" value="How many are selected?" + onclick="alert ('Number of options selected: ' + howMany(document.selectForm.musicTypes))"/> + </p> +</form> +</pre> +<p>{{ PreviousNext("JavaScript/Guide/Loop_Statements", "JavaScript/Guide/Loop_Statements/do...while_Statement") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/loop_statements/index.html b/files/ja/orphaned/web/javascript/guide/loop_statements/index.html new file mode 100644 index 0000000000..54ef32d2c9 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/loop_statements/index.html @@ -0,0 +1,17 @@ +--- +title: ループ文 +slug: Web/JavaScript/Guide/Loop_Statements +--- +<h2 id=".E3.83.AB.E3.83.BC.E3.83.97.E6.96.87" name=".E3.83.AB.E3.83.BC.E3.83.97.E6.96.87">ループ文</h2> +<p>ループは指定した条件が満たされている限り繰り返し実行されるコマンドのセットです。JavaScript は、label はもちろん、for、do while、while といったループ文をサポートしています（label 自体はループ文ではありませんが、これらの文とともに頻繁に使用されます）。さらに、<code>break</code> および <code>continue</code> 文をループ文の中で使うことができます。</p> +<p>さらに <code>for...in</code> 文も文を繰り返し実行しますが、これはオブジェクトの操作に使用します。<a href="/ja/Core_JavaScript_1.5_Guide/Object_Manipulation_Statements" title="ja/Core_JavaScript_1.5_Guide/Object_Manipulation_Statements">オブジェクト操作文</a> をご覧ください。</p> +<p>ループ文は以下のとおりです。</p> +<ul> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/for_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/for_Statement">for 文</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/do...while_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/do...while_Statement">do...while 文</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/while_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/while_Statement">while 文</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/label_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/label_Statement">label 文</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/break_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/break_Statement">break 文</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/continue_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/continue_Statement">continue 文</a></li> +</ul> +<p>{{ PreviousNext("JavaScript/Guide/Conditional_Statements", "JavaScript/Guide/Loop_Statements/for_Statement") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/loop_statements/label_statement/index.html b/files/ja/orphaned/web/javascript/guide/loop_statements/label_statement/index.html new file mode 100644 index 0000000000..d0b878455b --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/loop_statements/label_statement/index.html @@ -0,0 +1,19 @@ +--- +title: label 文 +slug: Web/JavaScript/Guide/Loop_Statements/label_Statement +--- +<h3 id="label_.E6.96.87" name="label_.E6.96.87">label 文</h3> +<p><code>label</code> を使うと、そのプログラムのどこからでも参照できる、識別子を持った文を作ることができます。例えば、ラベルを使用してあるループに名前を付けると、<code>break</code> 文や <code>continue</code> 文を使用してプログラムがループを脱出するべきかそのまま実行を継続するべきかを示すことができます。</p> +<p><code>label</code> 文は次のように使用します。</p> +<pre>label : + statement +</pre> +<p><code>label</code> の値は予約語でなければどんな JavaScript の識別子でも使用できます。ラベルを用いて名前を付ける <code>statement</code> はどんな文でも結構です。</p> +<p><strong>例</strong><br> + この例では <code>markLoop</code> というラベルを用いて while ループに名前を付けています。</p> +<pre>markLoop: +while (theMark == true) + doSomething(); +} +</pre> +<p>{{ PreviousNext("JavaScript/Guide/Loop_Statements/while_Statement", "JavaScript/Guide/Loop_Statements/break_Statement") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/loop_statements/while_statement/index.html b/files/ja/orphaned/web/javascript/guide/loop_statements/while_statement/index.html new file mode 100644 index 0000000000..77fd191f75 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/loop_statements/while_statement/index.html @@ -0,0 +1,35 @@ +--- +title: while 文 +slug: Web/JavaScript/Guide/Loop_Statements/while_Statement +--- +<h3 id="while_.E6.96.87" name="while_.E6.96.87">while 文</h3> +<p><code>while</code> 文は、指定した条件が true に評価される限り文を実行します。<code>while</code> 文は次のように使用します。</p> +<pre class="eval">while (condition) + statement +</pre> +<p>条件が false になるとループ内の <code>statement</code> の実行が停止し、ループの後に続く文にコントロールが渡されます。</p> +<p>ループの <code>statement</code> を実行する前に条件がテストされます。条件が true を返すと <code>statement</code> が実行され、再び条件がテストされます。条件が false を返すと、実行が停止され、<code>while</code> の後に続く文にコントロールが渡されます。</p> +<p>複数の文を実行するにはブロック文 ({ ... }) を用いて文をグループ化してください。</p> +<p><strong>例 1</strong><br> + 次の <code>while</code> ループでは <code>n</code> が 3 より小さい限り反復されます。</p> +<pre class="eval">n = 0; +x = 0; +while (n < 3) { + n++; + x += n; +} +</pre> +<p>それぞれの反復で、ループは <code>n</code> をインクリメントし、その値を <code>x</code> に加えています。その結果、<code>x</code> と <code>n</code> は次の値をとります。</p> +<ul> + <li>第 1 段階終了後：<code>n</code> = 1、<code>x</code> = 1</li> + <li>第 2 段階終了後：<code>n</code> = 2、<code>x</code> = 3</li> + <li>第 3 段階終了後：<code>n</code> = 3、<code>x</code> = 6</li> +</ul> +<p>第 3 段階が完了すると条件 <code>n</code> < 3 が true ではなくなっているため、ループは終了します。</p> +<p><strong>例 2</strong><br> + 無限ループは避けてください。ループの条件が最終的には false になることを確認してください。そうしないとループが終了しなくなります。次の <code>while</code> ループ内の文は永久に実行されます。条件が決して false にならないためです。</p> +<pre class="eval">while (true) { + alert("Hello, world"); +} +</pre> +<p>{{ PreviousNext("JavaScript/Guide/Loop_Statements/do...while_Statement", "JavaScript/Guide/Loop_Statements/label_Statement") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/object_manipulation_statements/index.html b/files/ja/orphaned/web/javascript/guide/object_manipulation_statements/index.html new file mode 100644 index 0000000000..ddf781e031 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/object_manipulation_statements/index.html @@ -0,0 +1,51 @@ +--- +title: Object Manipulation Statements +slug: Web/JavaScript/Guide/Object_Manipulation_Statements +--- +<h3 id=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E6.93.8D.E4.BD.9C.E6.96.87" name=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E6.93.8D.E4.BD.9C.E6.96.87">オブジェクト操作文</h3> +<p>JavaScript はオブジェクトの操作に <code>for...in</code>、<code>for each...in</code> および <code>with</code> 文を使用します。</p> +<h4 id="for...in_.E6.96.87" name="for...in_.E6.96.87">for...in 文</h4> +<p><a href="/ja/Core_JavaScript_1.5_Reference/Statements/for...in" title="ja/Core_JavaScript_1.5_Reference/Statements/for...in"><code>for...in</code></a> 文は指定した変数をオブジェクトの全プロパティに対して反復します。それぞれのプロパティに対して JavaScript は指定した文を実行します。<code>for...in</code> 文は次のように使用します。</p> +<pre>for (variable in object) { + statements +} +</pre> +<p><strong>例</strong><br> + 次の関数は、あるオブジェクトとそのオブジェクトの名前を引数にとります。そしてそのオブジェクトの全プロパティに対して反復し、プロパティ名とその値のリストにした文字列を返します。</p> +<pre>function dump_props(obj, obj_name) { + var result = ""; + for (var i in obj) { + result += obj_name + "." + i + " = " + obj[i] + "<br>"; + } + result += "<hr>"; + return result; +} +</pre> +<p><code>make</code> および <code>model</code> というプロパティを持つ <code>car</code> というオブジェクトでは次のような結果が得られます。</p> +<pre class="eval">car.make = Ford +car.model = Mustang +</pre> +<p><strong>配列</strong><br> + <a href="/ja/Core_JavaScript_1.5_Reference/Global_Objects/Array" title="ja/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a> の要素に対して反復する方法としてこれを用いることは魅力的かもしれませんが、<strong>for...in</strong> 文はその配列の要素に加えてユーザ定義プロパティに対して繰り返すため、独自のプロパティやメソッドを追加するなどして Array オブジェクトに変更を加えると <strong>for...in</strong> 文は数値のインデックスに加えてユーザ定義プロパティの名前を返します。したがって、配列に対して反復したいときには数値のインデックスを用いた従来の <a href="/ja/Core_JavaScript_1.5_Reference/Statements/for" title="ja/Core_JavaScript_1.5_Reference/Statements/for">for</a> ループを使用したほうがいいでしょう。</p> +<h4 id="for_each...in_.E6.96.87" name="for_each...in_.E6.96.87">for each...in 文</h4> +<p><a href="/ja/Core_JavaScript_1.5_Reference/Statements/for_each...in" title="ja/Core_JavaScript_1.5_Reference/Statements/for_each...in"><code>for each...in</code></a> は <a href="/ja/New_in_JavaScript_1.6" title="ja/New_in_JavaScript_1.6">JavaScript 1.6</a> で導入されるループ文です。これは <code>for...in</code> に似ていますが、オブジェクトのプロパティの名前ではなく、プロパティの値に対して反復します。</p> +<h4 id="with_.E6.96.87" name="with_.E6.96.87">with 文</h4> +<p><a href="/ja/Core_JavaScript_1.5_Reference/Statements/with" title="ja/Core_JavaScript_1.5_Reference/Statements/with"><code>with</code></a> 文はデフォルトのオブジェクトについて文のセットを実行します。JavaScript はその文のセットにおいて非修飾名を検索し、その名前がデフォルトのオブジェクトのプロパティであるかを決定します。非修飾名がプロパティにマッチすると、そのプロパティがその文で使われます。そうでない場合はローカル変数かグローバル変数が使われます。</p> +<p><code>with</code> 文は次のように使用します。</p> +<pre>with (object) { + statements +} +</pre> +<p><strong>例</strong><br> + 次の <code>with</code> 文では <code>Math</code> オブジェクトがデフォルトのオブジェクトに指定されています。<code>with</code> 文内の文は <code>PI</code> プロパティや <code>cos</code> および <code>sin</code> メソッドを参照していますが、オブジェクトは指定していません。JavaScript はこれらの参照は <code>Math</code> オブジェクトへのものであると想定します。</p> +<pre>var a, x, y; +var r = 10; +with (Math) { + a = PI * r * r; + x = r * cos(PI); + y = r * sin(PI/2); +} +</pre> +<p>注意：<code>with</code> 文を使うことでプログラムをより簡潔にすることができますが、<code>with</code> の不適切な使用はプログラムを大幅にスローダウンさせることに繋がります。<a href="/ja/Core_JavaScript_1.5_Reference/Statements/with" title="ja/Core_JavaScript_1.5_Reference/Statements/with">Core JavaScript 1.5 Reference:Statements:with</a> を参照してください。</p> + +<p>{{ PreviousNext("JavaScript/Guide/Loop_Statements/continue_Statement", "JavaScript/Guide/Comments") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/objects_and_properties/index.html b/files/ja/orphaned/web/javascript/guide/objects_and_properties/index.html new file mode 100644 index 0000000000..f2679c1d00 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/objects_and_properties/index.html @@ -0,0 +1,32 @@ +--- +title: オブジェクトとプロパティ +slug: Web/JavaScript/Guide/Objects_and_Properties +--- +<h3 id=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.A8.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3" name=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.A8.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3">オブジェクトとプロパティ</h3> +<p>JavaScript のオブジェクトには、それに結びつけられたプロパティがあります。簡単な記法でオブジェクトのプロパティにアクセスできます。</p> +<pre>objectName.propertyName +</pre> +<p>オブジェクト名もプロパティ名も大文字と小文字を区別します。プロパティの定義は、そのプロパティに値を代入することで行います。例えば、<code>myCar</code> という名前のオブジェクトがあるとします（今回はオブジェクトが既に存在していると仮定）。次のようにして、そのオブジェクトに <code>make</code>、<code>model</code>、<code>year</code> という名前のプロパティをそれぞれ作成することができます。</p> +<pre>myCar.make = "Ford"; +myCar.model = "Mustang"; +myCar.year = 1969; +</pre> +<p>配列はある単一の変数名に結びつけられた値の順序集合です。JavaScript におけるプロパティと配列は密接に関連しています。事実、それらは同一のデータ構造への異なるインタフェースなのです。そのため、例えば次のようにして <code>myCar</code> オブジェクトのプロパティにアクセスすることができます。</p> +<pre>myCar["make"] = "Ford"; +myCar["model"] = "Mustang"; +myCar["year"] = 1969; +</pre> +<p>この手の配列は<em>連想配列</em>として知られています。それぞれのインデックスの要素が文字列にも結びつけられているからです。これがどう動作するかというと、次の関数は引数としてオブジェクトとそのオブジェクトの名前を渡すとオブジェクトのプロパティを表示します。</p> +<pre>function show_props(obj, obj_name) { + var result = ""; + for (var i in obj) + result += obj_name + "." + i + " = " + obj[i] + "\n"; + return result; +} +</pre> +<p>関数 <code>show_props(myCar, "myCar")</code> を呼び出すと以下の結果が返されます。</p> +<pre>myCar.make = Ford +myCar.model = Mustang +myCar.year = 1969 +</pre> +<p>{{ PreviousNext("JavaScript/Guide/Predefined_Functions/escape_and_unescape_Functions", "JavaScript/Guide/Creating_New_Objects") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/operators/arithmetic_operators/index.html b/files/ja/orphaned/web/javascript/guide/operators/arithmetic_operators/index.html new file mode 100644 index 0000000000..4aa9662292 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/operators/arithmetic_operators/index.html @@ -0,0 +1,47 @@ +--- +title: 算術演算子 +slug: Web/JavaScript/Guide/Operators/Arithmetic_Operators +--- +<h3 id=".E7.AE.97.E8.A1.93.E6.BC.94.E7.AE.97.E5.AD.90" name=".E7.AE.97.E8.A1.93.E6.BC.94.E7.AE.97.E5.AD.90">算術演算子</h3> +<p>算術演算子は、そのオペランドに数値（リテラルか変数）をとり、1 つの数値を返します。標準的な算術演算子は、加算 (+)、減算 (-)、乗算 (*)、除算 (/) です。これらの演算子は他のほとんどのプログラミング言語と同じように機能しますが、そのときの数値は、浮動小数点数として扱われます（0 で除算した結果は、<a href="/ja/Core_JavaScript_1.5_Reference/Global_Properties/NaN" title="ja/Core_JavaScript_1.5_Reference/Global_Properties/NaN"><code>NaN</code></a> になることにも注意してください）。</p> +<pre>1 / 2 // JavaScript では 0.5 を返す +1 / 2 // Java では 0 を返す（どちらの数も浮動小数点数として明記されていない） + +1.0 / 2.0 // JavaScript でも Java でも 0.5 を返す +</pre> +<p>さらに、JavaScript では以下の表で示された算術演算子も使用できます。</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>演算子</th> + <th>説明</th> + <th>例</th> + </tr> + <tr> + <td>%<br> + （モジュロ）</td> + <td>2 項演算子。2 つのオペランドで除算したときの整数の余りを返す。</td> + <td>12 % 5 は 2 を返す。</td> + </tr> + <tr> + <td>++<br> + （インクリメント）</td> + <td>単項演算子。オペランドに 1 を加える。前置演算子 (++x) を使った場合、オペランドに 1 を加えた後にその値を返す。後置演算子 (x++) を使った場合、オペランドに 1 を加える前にその値を返す。</td> + <td><code>x</code> が 3 のとき、<code>++x</code> は <code>x</code> に 4 をセットし、4 を返す。一方、<code>x++</code> は <code>x</code> に 4 をセットし、3 を返す。</td> + </tr> + <tr> + <td>--<br> + （デクリメント）</td> + <td>単項演算子。オペランドから 1 を引く。戻り値はインクリメント演算子のものと同様。</td> + <td><code>x</code> が 3 のとき、<code>--x</code> は <code>x</code> に 2 をセットし、2 を返す。一方、<code>x--</code> は <code>x</code> に 2 をセットし、3 を返す。</td> + </tr> + <tr> + <td>-<br> + （符号反転）</td> + <td>単項演算子。オペランドの符号を反転してその値を返す。</td> + <td><code>x</code> が 3 のとき、<code>-x</code> は -3 を返す。</td> + </tr> + </tbody> +</table> +<p><small><strong>表 3.4：算術演算子</strong></small></p> +<p>{{ PreviousNext("JavaScript/Guide/Operators/Comparison_Operators", "JavaScript/Guide/Operators/Bitwise_Operators") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/operators/assignment_operators/index.html b/files/ja/orphaned/web/javascript/guide/operators/assignment_operators/index.html new file mode 100644 index 0000000000..88a0b0beb7 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/operators/assignment_operators/index.html @@ -0,0 +1,61 @@ +--- +title: 代入演算子 +slug: Web/JavaScript/Guide/Operators/Assignment_Operators +--- +<h3 id=".E4.BB.A3.E5.85.A5.E6.BC.94.E7.AE.97.E5.AD.90" name=".E4.BB.A3.E5.85.A5.E6.BC.94.E7.AE.97.E5.AD.90">代入演算子</h3> +<p>代入演算子は、右のオペランドの値に基づいた値を左のオペランドに代入します。基本的な代入演算子はイコール (=) ですが、これは右のオペランドの値を左のオペランドに代入します。すなわち、x = y では y の値を x に代入します。</p> +<p>他の代入演算子は標準的な演算をするための短縮表記があります。次の表でそれを示します。</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>短縮表記した演算子</th> + <th>意味</th> + </tr> + <tr> + <td>x += y</td> + <td>x = x + y</td> + </tr> + <tr> + <td>x -= y</td> + <td>x = x - y</td> + </tr> + <tr> + <td>x *= y</td> + <td>x = x * y</td> + </tr> + <tr> + <td>x /= y</td> + <td>x = x / y</td> + </tr> + <tr> + <td>x %= y</td> + <td>x = x % y</td> + </tr> + <tr> + <td>x <<= y</td> + <td>x = x << y</td> + </tr> + <tr> + <td>x >>= y</td> + <td>x = x >> y</td> + </tr> + <tr> + <td>x >>>= y</td> + <td>x = x >>> y</td> + </tr> + <tr> + <td>x &= y</td> + <td>x = x & y</td> + </tr> + <tr> + <td>x ^= y</td> + <td>x = x ^ y</td> + </tr> + <tr> + <td>x |= y</td> + <td>x = x | y</td> + </tr> + </tbody> +</table> +<p><small><strong>表 3.2：代入演算子</strong></small></p> +<p>{{ PreviousNext("JavaScript/Guide/Operators", "JavaScript/Guide/Operators/Comparison_Operators") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/operators/comparison_operators/index.html b/files/ja/orphaned/web/javascript/guide/operators/comparison_operators/index.html new file mode 100644 index 0000000000..182802bb5a --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/operators/comparison_operators/index.html @@ -0,0 +1,67 @@ +--- +title: 比較演算子 +slug: Web/JavaScript/Guide/Operators/Comparison_Operators +--- +<h3 id=".E6.AF.94.E8.BC.83.E6.BC.94.E7.AE.97.E5.AD.90" name=".E6.AF.94.E8.BC.83.E6.BC.94.E7.AE.97.E5.AD.90">比較演算子</h3> +<p><span class="comment">This seems to me kind of poorly explained, mostly the diference betwen "==" and "==="...</span> 比較演算子は、オペランドを比較し、比較結果に基づいた論理値を返します。オペランドには数値、文字列、論理値、オブジェクトが使用できます。文字列は、Unicode 値を用いて標準的な辞書順に基づいて比較されます。ほとんどの場合、2 つのオペランドが異なる型ならば JavaScript はそのオペランドを比較に適した型に変換しようとします（このルールの唯一の例外は <code>===</code> および <code>!==</code> であり、これらは厳密に等値か否かを判断し、等値性をチェックする前にオペランドを適合する型に変換するということはありません）。これは一般に数値の比較が実行されることになります。次の表では比較演算子について説明します。次のコードで考えます。</p> +<pre class="eval">var var1 = 3, var2 = 4; +</pre> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>演算子</th> + <th>説明</th> + <th>true を返す例</th> + </tr> + <tr> + <td>等しい (==)</td> + <td>オペランドが等しい場合に true を返す。</td> + <td><code>3 == var1</code><br> + <p><code>"3" == var1</code></p> + <code>3 == '3'</code></td> + </tr> + <tr> + <td>等しくない (!=)</td> + <td>オペランドが等しくない場合に true を返す。</td> + <td><code>var1 != 4<br> + var2 != "3"</code></td> + </tr> + <tr> + <td>厳密に等しい (===)</td> + <td>オペランドが等しく、かつ同じ型である場合に true を返す。</td> + <td><code>3 === var1</code></td> + </tr> + <tr> + <td>厳密には等しくない (!==)</td> + <td>オペランドが等しくなく、かつ/または同じ型でない場合に true を返す。</td> + <td><code>var1 !== "3"<br> + 3 !== '3'</code></td> + </tr> + <tr> + <td>より大きい (>)</td> + <td>左のオペランドが右のオペランドよりも大きい場合に true を返す。</td> + <td><code>var2 > var1<br> + "12" > 2</code></td> + </tr> + <tr> + <td>以上 (>=)</td> + <td>左のオペランドが右のオペランド以上である場合に true を返す。</td> + <td><code>var2 >= var1<br> + var1 >= 3</code></td> + </tr> + <tr> + <td>より小さい (<)</td> + <td>左のオペランドが右のオペランドよりも小さい場合に true を返す。</td> + <td><code>var1 < var2<br> + "12" < "2"</code></td> + </tr> + <tr> + <td>以下 (<=)</td> + <td>左のオペランドが右のオペランド以下である場合に true を返す。</td> + <td><code>var1 <= var2<br> + var2 <= 5</code></td> + </tr> + </tbody> +</table> +<p><small><strong>表 3.3：比較演算子</strong></small></p> +<p>{{ PreviousNext("JavaScript/Guide/Operators/Assignment_Operators", "JavaScript/Guide/Operators/Arithmetic_Operators")}}</p> diff --git a/files/ja/orphaned/web/javascript/guide/operators/logical_operators/index.html b/files/ja/orphaned/web/javascript/guide/operators/logical_operators/index.html new file mode 100644 index 0000000000..fa6fa08068 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/operators/logical_operators/index.html @@ -0,0 +1,63 @@ +--- +title: 論理演算子 +slug: Web/JavaScript/Guide/Operators/Logical_Operators +--- +<h3 id=".E8.AB.96.E7.90.86.E6.BC.94.E7.AE.97.E5.AD.90" name=".E8.AB.96.E7.90.86.E6.BC.94.E7.AE.97.E5.AD.90">論理演算子</h3> +<p>論理演算子では基本的に真偽（論理）値を用います。そのような値があると真偽値を返します。しかし、&& および || 演算子は実際には指定されたオペランドの一方の値を返します。そのため、非真偽値とともに論理演算子が使われると非真偽値を返します。論理演算子について次の表で説明します。</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>演算子</th> + <th>使用法</th> + <th>説明</th> + </tr> + <tr> + <td>&&</td> + <td>expr1 && expr2</td> + <td>（論理 AND）expr1 を false と見ることができる場合は expr1 を返す。そうでない場合は expr2 を返す。したがって、真偽値が使われた場合、両オペランドが true の場合は && は true を返し、そうでない場合は false を返す。</td> + </tr> + <tr> + <td>||</td> + <td>expr1 || expr2</td> + <td>（論理 OR）expr1 を true と見ることができる場合は expr1 を返す。そうでない場合は expr2 を返す。したがって、真偽値が使われた場合、どちらかのオペランドが true の場合は || は true を返し、両方とも false の場合は false を返す。</td> + </tr> + <tr> + <td>!</td> + <td>!expr</td> + <td>（論理 NOT）オペランドを true と見ることができる場合は false を返す。そうでない場合は true を返す。</td> + </tr> + </tbody> +</table> +<p><small><strong>表 3.7：論理演算子</strong></small></p> +<p>false と見ることができる式とは、null、0、空文字列 ("")、または undefined に評価される式のことです。</p> +<p>以下のコードで &&（論理 AND）演算子の例を示します。</p> +<pre>a1=true && true // t && t は true を返す +a2=true && false // t && f は false を返す +a3=false && true // f && t は false を返す +a4=false && (3 == 4) // f && f は false を返す +a5="Cat" && "Dog" // t && t は Dog を返す +a6=false && "Cat" // f && t は false を返す +a7="Cat" && false // t && f は false を返す +</pre> +<p>以下のコードで ||（論理 OR）演算子の例を示します。</p> +<pre>o1=true || true // t || t は true を返す +o2=false || true // f || t は true を返す +o3=true || false // t || f は true を返す +o4=false || (3 == 4) // f || f は false を返す +o5="Cat" || "Dog" // t || t は Cat を返す +o6=false || "Cat" // f || t は Cat を返す +o7="Cat" || false // t || f は Cat を返す +</pre> +<p>以下のコードで !（論理 NOT）演算子の例を示します。</p> +<pre>n1=!true // !t は false を返す +n2=!false // !f は true を返す +n3=!"Cat" // !t は false を返す +</pre> +<h4 id=".E3.82.B7.E3.83.A7.E3.83.BC.E3.83.88.E3.82.B5.E3.83.BC.E3.82.AD.E3.83.83.E3.83.88.E8.A9.95.E4.BE.A1" name=".E3.82.B7.E3.83.A7.E3.83.BC.E3.83.88.E3.82.B5.E3.83.BC.E3.82.AD.E3.83.83.E3.83.88.E8.A9.95.E4.BE.A1">ショートサーキット評価</h4> +<p>論理式は左から右に評価されるため、以下のルールを用いることで「ショートサーキット」評価ができるようになっています。</p> +<ul> + <li><code>false</code> && <em>anything</em> は false にショートサーキット評価する。</li> + <li><code>true</code> || <em>anything</em> は true ショートサーキット評価する。</li> +</ul> +<p>論理のルールはこれらの評価が常に正確であることを保証しています。上記の式の <em>anything</em> の部分は評価されないため、何らかの副作用が生じないように注意してください。</p> +<p>{{ PreviousNext("JavaScript/Guide/Operators/Bitwise_Operators", "JavaScript/Guide/Operators/String_Operators") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/operators/special_operators/index.html b/files/ja/orphaned/web/javascript/guide/operators/special_operators/index.html new file mode 100644 index 0000000000..226faf2b3c --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/operators/special_operators/index.html @@ -0,0 +1,197 @@ +--- +title: 特殊演算子 +slug: Web/JavaScript/Guide/Operators/Special_Operators +--- +<h3 id=".E7.89.B9.E6.AE.8A.E6.BC.94.E7.AE.97.E5.AD.90" name=".E7.89.B9.E6.AE.8A.E6.BC.94.E7.AE.97.E5.AD.90">特殊演算子</h3> +<p>JavaScript は以下の特殊演算子があります。</p> +<ul> + <li>{{ Anch("条件演算子") }}</li> + <li>{{ Anch("コンマ演算子") }}</li> + <li>{{ Anch("delete") }}</li> + <li>{{ Anch("in") }}</li> + <li>{{ Anch("instanceof") }}</li> + <li>{{ Anch("new") }}</li> + <li>{{ Anch("this") }}</li> + <li>{{ Anch("typeof") }}</li> + <li>{{ Anch("void") }}</li> +</ul> +<h4 id=".E6.9D.A1.E4.BB.B6.E6.BC.94.E7.AE.97.E5.AD.90" name=".E6.9D.A1.E4.BB.B6.E6.BC.94.E7.AE.97.E5.AD.90">条件演算子</h4> +<p>条件演算子は JavaScript では唯一の 3 つのオペランドをとる演算子です。演算子は条件に基づいて 2 つの値のうち、1 つを選択します。構文は次のとおりです。</p> +<pre>condition ? val1 : val2 +</pre> +<p><code>condition</code> が true の場合、演算子は <code>val1</code> の値を選択します。そうでない場合は <code>val2</code> の値を選択します。標準的な演算子が使用できる場所でならどこででも条件演算子を使用することができます。</p> +<p>例えば、</p> +<pre>status = (age >= 18) ? "adult" : "minor" +</pre> +<p>この文では、<code>age</code> が 18 以上の場合 "adult" という値を変数 <code>status</code> に代入します。そうでない場合は "minor" という値を <code>status</code> に代入します。</p> +<h4 id=".E3.82.B3.E3.83.B3.E3.83.9E.E6.BC.94.E7.AE.97.E5.AD.90" name=".E3.82.B3.E3.83.B3.E3.83.9E.E6.BC.94.E7.AE.97.E5.AD.90">コンマ演算子</h4> +<p>コンマ演算子 (,) は単に両方のオペランドを評価し、第 2 のオペランドの値を返します。この演算子は主に <code>for</code> ループ内で使用されます。このことでループのたびに複数の変数を更新できるようになります。</p> +<p>例えば、a が一辺が 10 要素の 2 次元配列のとき、以下のコードではコンマ演算子を用いることで 2 変数を同時にインクリメントしています。このコードでは配列の対角成分の値を出力します。</p> +<pre>for (var i=0, j=9; i <= 9; i++, j--) + document.writeln("a["+i+"]["+j+"]= " + a[i][j]) +</pre> +<h4 id="delete" name="delete">delete</h4> +<p>delete 演算子はオブジェクトやオブジェクトのプロパティ、配列の指定されたインデックスの要素を削除します。構文は以下のとおりです。</p> +<pre>delete objectName +delete objectName.property +delete objectName[index] +delete property // with 文内でのみ有効 +</pre> +<p>ここで、<code>objectName</code> はオブジェクトの名前を、<code>property</code> は既存のプロパティを、<code>index</code> は配列の要素の位置を表す整数をそれぞれ表しています。</p> +<p>4 番目の形式は <code>with</code> 文内でのみ有効で、これはあるオブジェクトからプロパティを削除します。</p> +<p><code>delete</code> 演算子を使うことで暗黙的に宣言された変数を削除することができますが、<code>var</code> 文を用いて宣言された変数は削除できません。</p> +<p><code>delete</code> 演算子が成功すると、そのプロパティや要素には <code>undefined</code> がセットされます。また、演算が可能な場合は <code>delete</code> 演算子は true を返します。演算が不可能な場合は false を返します。</p> +<pre>x=42 +var y= 43 +myobj=new Number() +myobj.h=4 // プロパティ h を作成 +delete x // true を返す（暗黙的に宣言されているならば削除可能） +delete y // false を返す（var 付きで宣言されているなら削除不可能） +delete Math.PI // false を返す（定義済みプロパティは削除不可能） +delete myobj.h // true を返す（ユーザ定義プロパティは削除可能） +delete myobj // true を返す（暗黙的に宣言されているならば削除可能） +</pre> +<p><strong>配列要素の削除</strong><br> + 配列要素を削除したとき、配列の長さには影響を及ぼしません。例えば a{{ mediawiki.external(3) }} を削除したとき、a{{ mediawiki.external(4) }} は依然 a{{ mediawiki.external(4) }} のままで、a{{ mediawiki.external(3) }} は undefined になります。</p> +<p><code>delete</code> 演算子で配列要素を除去すると、もうその要素はその配列からなくなります。次の例では tree{{ mediawiki.external(3) }} は <code>delete</code> によって除去されます。</p> +<pre>trees=new Array("redwood","bay","cedar","oak","maple") +delete trees[3] +if (3 in trees) { + // ここは実行されない +} +</pre> +<p>配列要素は存在させたいが、値は未定義にしたいという場合は、<code>delete</code> 演算子の代わりに <code>undefined</code> キーワードを使用してください。次の例では <code>trees{{ mediawiki.external(3) }}</code> には <code>undefined</code> という値が代入されますが、その配列要素は存在したままになります。</p> +<pre>trees=new Array("redwood","bay","cedar","oak","maple") +trees[3]=undefined +if (3 in trees) { + // ここは実行される +} +</pre> +<h4 id="in" name="in">in</h4> +<p><code>in</code> 演算子は、指定されたプロパティが指定されたオブジェクトにある場合に true を返します。構文は以下のとおりです。</p> +<pre>propNameOrNumber in objectName +</pre> +<p>ここで、<code>propNameOrNumber</code> はプロパティ名か配列のインデックスを表す文字列式または数値式を、<code>objectName</code> はオブジェクトの名前をそれぞれ表しています。</p> +<p>次の例では <code>in</code> 演算子の使用法を示します。</p> +<pre>// 配列 +trees=new Array("redwood","bay","cedar","oak","maple") +0 in trees // true を返す +3 in trees // true を返す +6 in trees // false を返す +"bay" in trees // false を返す（インデックスの指す値ではなく、 + // インデックスの数字を指定しなければならない） +"length" in trees // true を返す（length は Array のプロパティ） + +// 定義済みオブジェクト +"PI" in Math // true を返す +myString=new String("coral") +"length" in myString // true を返す + +// ユーザ定義オブジェクト +mycar = {make:"Honda",model:"Accord",year:1998} +"make" in mycar // true を返す +"model" in mycar // true を返す +</pre> +<h4 id="instanceof" name="instanceof">instanceof</h4> +<p><code>instanceof</code> 演算子は、指定されたオブジェクトが指定されたオブジェクトの種類である場合に true を返します。構文は次のとおりです。</p> +<pre>objectName instanceof objectType +</pre> +<p>ここで、<code>objectName</code> は <code>objectType</code> と比較するオブジェクトの名前を、<code>objectType</code> は <code>Date</code> や <code>Array</code> のようなオブジェクトの種類をそれぞれ表しています。</p> +<p>実行時にオブジェクトの種類を確認する必要があるときは <code>instanceof</code> を使用してください。例えば、例外を受け取るとき、投げられた例外の種類によって別々の例外を扱うコードに分岐させることができます。</p> +<p>例えば、次のコードでは <code>instanceof</code> を使用することで <code>theDay</code> が <code>Date</code> オブジェクトであるかどうかを決定しています。<code>theDay</code> は <code>Date</code> オブジェクトなので <code>if</code> 文の中の文は実行されます。</p> +<pre>theDay=new Date(1995, 12, 17) +if (theDay instanceof Date) { + // 実行される文 +} +</pre> +<h4 id="new" name="new">new</h4> +<p><code>new</code> 演算子は、ユーザ定義オブジェクトや、<code>Array</code>、<code>Boolean</code>、<code>Date</code>、<code>Function</code>、<code>Image</code>、<code>Number</code>、<code>Object</code>、<code>Option</code>、<code>RegExp</code>、<code>String</code> といった定義済みオブジェクトのインスタンスを作成するのに使用します。サーバでは <code>DbPool</code>、<code>Lock</code>、<code>File</code>、<code>SendMail</code> といったオブジェクトも使用できます。<code>new</code> の使用法は以下のとおりです。</p> +<pre>objectName = new objectType ( param1 [,param2] ...[,paramN] ) +</pre> +<p>オブジェクト初期化子を使用してもオブジェクトを作成することができます。<a href="/ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers" title="ja/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_Object_Initializers">オブジェクト初期化子の使用</a> にて説明しています。</p> +<p>詳しくはコア JavaScript リファレンスの <a href="/ja/Core_JavaScript_1.5_Reference/Operators/Special_Operators/new_Operator" title="ja/Core_JavaScript_1.5_Reference/Operators/Special_Operators/new_Operator">new 演算子</a> のページを参照してください。</p> +<h4 id="this" name="this">this</h4> +<p><code>this</code> キーワードを使うことでカレントオブジェクトを参照することができます。一般に <code>this</code> はあるメソッド内でそのメソッドを呼び出したオブジェクトを参照します。使用法は以下のとおりです。</p> +<pre>this[.propertyName] +</pre> +<p><strong>例 1</strong><br> + あるオブジェクトの <code>value</code> プロパティの妥当性を確認する <code>validate</code> という関数を想定します。関数にはそのオブジェクトと、上限および下限の値を渡します。</p> +<pre>function validate(obj, lowval, hival) { + if ((obj.value < lowval) || (obj.value > hival)) + alert("Invalid Value!") +} +</pre> +<p>各フォーム要素の <code>onChange</code> イベントハンドラにおいて <code>validate</code> を呼び出します。<code>this</code> を使うことでフォーム要素を渡すことができます。次の例をご覧ください。</p> +<pre><B>Enter a number between 18 and 99:</B> +<INPUT TYPE = "text" NAME = "age" SIZE = 3 + onChange="validate(this, 18, 99)"> +</pre> +<p><strong>例 2</strong><br> + <code>form</code> プロパティと組み合わせると <code>this</code> でカレントオブジェクトの親のフォームを参照できます。次の例では、<code>myForm</code> というフォームに <code>Text</code> オブジェクトとボタンが格納されています。ユーザがボタンをクリックすると、<code>Text</code> オブジェクトの値にフォーム名がセットされます。ボタンの <code>onClick</code> イベントハンドラは <code>this.form</code> を利用して親のフォームである <code>myForm</code> を参照します。</p> +<pre><FORM NAME="myForm"> +Form name:<INPUT TYPE="text" NAME="text1" VALUE="Beluga"> +<P> +<INPUT NAME="button1" TYPE="button" VALUE="Show Form Name" + onClick="this.form.text1.value=this.form.name"> +</FORM> +</pre> +<h4 id="typeof" name="typeof">typeof</h4> +<p><code>typeof</code> 演算子は次の方法のうち、どちらかの方法で使用します。</p> +<pre>1. typeof operand +2. typeof (operand) +</pre> +<p><code>typeof</code> 演算子は、未評価のオペランドの型を指す文字列を返します。<code>operand</code> は返される型を調べる対象となる文字列、変数、キーワード、オブジェクトです。括弧はあってもなくてもかまいません。</p> +<p>以下の変数を定義することを想定します。</p> +<pre>var myFun = new Function("5+2") +var shape="round" +var size=1 +var today=new Date() +</pre> +<p><code>typeof</code> 演算子はこれらの変数に対して以下の結果を返します。</p> +<pre>typeof myFun is function +typeof shape is string +typeof size is number +typeof today is object +typeof dontExist is undefined +</pre> +<p><code>true</code> や <code>null</code> というキーワードに対して、<code>typeof</code> 演算子は以下の結果を返します。</p> +<pre>typeof true is boolean +typeof null is object +</pre> +<p>数値や文字列に対して、<code>typeof</code> 演算子は以下の結果を返します。</p> +<pre>typeof 62 is number +typeof 'Hello world' is string +</pre> +<p>プロパティ値に対して、<code>typeof</code> 演算子はプロパティ値の型を返します。</p> +<pre>typeof document.lastModified is string +typeof window.length is number +typeof Math.LN2 is number +</pre> +<p>メソッドや関数に対して、<code>typeof</code> 演算子は以下の結果を返します。</p> +<pre>typeof blur is function +typeof eval is function +typeof parseInt is function +typeof shape.split is function +</pre> +<p>定義済みオブジェクトに対して、<code>typeof</code> 演算子は以下の結果を返します。</p> +<pre>typeof Date is function +typeof Function is function +typeof Math is function +typeof Option is function +typeof String is function +</pre> +<h4 id="void" name="void">void</h4> +<p><code>void</code> 演算子は次の方法のうち、どちらかの方法で使用します。</p> +<pre>1. void (expression) +2. void expression +</pre> +<p><code>void</code> 演算子は値を返さずに評価する式を指定します。<code>expression</code> は評価する JavaScript の式です。式の周りの括弧はあってもなくてもかまいませんが、使用したほうが見た目はいいです。</p> +<p><code>void</code> 演算子を使用することで式をハイパーテキストリンクとして指定することができます。式は評価されますが、開いている文書の代わりに読み込まれるということはありません。</p> +<p>以下のコードはユーザがクリックしても何も起こらないハイパーテキストリンクを作成します。ユーザがリンクをクリックすると <code>void(0)</code> は undefined に評価され、JavaScript としては影響を及ぼしません。</p> +<pre><A HREF="javascript:void(0)">Click here to do nothing</A> +</pre> +<p>以下のコードはユーザがクリックするとフォームが送信されるハイパーテキストリンクを作成します。</p> +<pre><A HREF="javascript:void(document.form.submit())"> +Click here to submit</A> +</pre> +<p>{{ PreviousNext("JavaScript/Guide/Operators/String_Operators", "JavaScript/Guide/Creating_a_Regular_Expression") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/operators/string_operators/index.html b/files/ja/orphaned/web/javascript/guide/operators/string_operators/index.html new file mode 100644 index 0000000000..41bf8bbc44 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/operators/string_operators/index.html @@ -0,0 +1,8 @@ +--- +title: 文字列演算子 +slug: Web/JavaScript/Guide/Operators/String_Operators +--- +<h2 id=".E6.96.87.E5.AD.97.E5.88.97.E6.BC.94.E7.AE.97.E5.AD.90" name=".E6.96.87.E5.AD.97.E5.88.97.E6.BC.94.E7.AE.97.E5.AD.90">文字列演算子</h2> +<p>比較演算子は文字列に使用できますが、これに加えて 2 つの文字列を結合する結合演算子 (+) も使用できます。これは 2 つのオペランドの文字列を結合した文字列を返します。例えば、<code>"my " + "string"</code> は <code>"my string"</code> という文字列を返します。</p> +<p>短縮表記した代入演算子 += も文字列の結合に使用できます。例えば、変数 <code>mystring</code> に "alpha" という値が格納されているとき、式 <code>mystring += "bet"</code> の評価結果は "alphabet" となり、この値を <code>mystring</code> に代入します。</p> +<p>{{ PreviousNext("JavaScript/Guide/Operators/Logical_Operators", "JavaScript/Guide/Operators/Special_Operators") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html b/files/ja/orphaned/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html new file mode 100644 index 0000000000..aecb8a81f1 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html @@ -0,0 +1,14 @@ +--- +title: escape 関数と unescape 関数 +slug: Web/JavaScript/Guide/Predefined_Functions/escape_and_unescape_Functions +--- +<div class="onlyinclude"> + <h3 id="escape_.E3.81.8A.E3.82.88.E3.81.B3_unescape_.E9.96.A2.E6.95.B0" name="escape_.E3.81.8A.E3.82.88.E3.81.B3_unescape_.E9.96.A2.E6.95.B0">escape および unescape 関数</h3> + <p><code>escape</code> および <code>unescape</code> 関数は文字列をエンコードしたりデコードしたりします。<code>escape</code> 関数は ISO Latin 文字セットで表された引数の 16 進エンコーディングを返します。<code>unescape</code> は指定した 16 進エンコーディングの値に対する ASCII 文字列を返します。</p> + <p>これらの関数の構文は以下のとおりです。</p> + <pre>escape(string) +unescape(string) +</pre> + <p>これらの関数は主にサーバサイド JavaScript で URL 中の名前と値のペアのエンコードやデコードに使用されます。</p> + <code>escape</code> および <code>unescape</code> 関数は 非 ASCII 文字に対しては正しく機能せず、廃止予定になっています。JavaScript 1.5 以降では <code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURI" title="ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURI">encodeURI</a></code>、<code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/decodeURI" title="ja/Core_JavaScript_1.5_Reference/Global_Functions/decodeURI">decodeURI</a></code>、<code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURIComponent" title="ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURIComponent">encodeURIComponent</a></code> および <code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/decodeURIComponent" title="ja/Core_JavaScript_1.5_Reference/Global_Functions/decodeURIComponent">decodeURIComponent</a></code> を使用してください。</div> +<p>{{ PreviousNext("JavaScript/Guide/Predefined_Functions/Number_and_String_Functions", "JavaScript/Guide/Objects_and_Properties") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/predefined_functions/eval_function/index.html b/files/ja/orphaned/web/javascript/guide/predefined_functions/eval_function/index.html new file mode 100644 index 0000000000..3945955e86 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/predefined_functions/eval_function/index.html @@ -0,0 +1,12 @@ +--- +title: eval 関数 +slug: Web/JavaScript/Guide/Predefined_Functions/eval_Function +--- +<div class="onlyinclude"> + <h3 id="eval_.E9.96.A2.E6.95.B0" name="eval_.E9.96.A2.E6.95.B0">eval 関数</h3> + <p><code>eval</code> 関数は JavaScript のコードの文字列を特定のオブジェクトを参照することなく評価します。eval の構文は次のとおりです。</p> + <pre>eval(expr) +</pre> + <p>ここで <code>expr</code> は評価される文字列です。</p> + 文字列が式を表している場合は <code>eval</code> はその式を評価します。また、1 つ以上の JavaScript の文を表している場合は eval はその式を実行します。<code>eval</code> のコードのスコープは呼び出し元コードのスコープと同じです。演算式を評価するために <code>eval</code> を呼び出さないでください。JavaScript は自動的に演算式を評価します。</div> +<p>{{ PreviousNext("JavaScript/Guide/Predefined_Functions", "JavaScript/Guide/Predefined_Functions/isFinite_Function") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/predefined_functions/index.html b/files/ja/orphaned/web/javascript/guide/predefined_functions/index.html new file mode 100644 index 0000000000..758c6f22a0 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/predefined_functions/index.html @@ -0,0 +1,17 @@ +--- +title: 定義済み関数 +slug: Web/JavaScript/Guide/Predefined_Functions +--- +<div class="onlyinclude"> + <h3 id=".E5.AE.9A.E7.BE.A9.E6.B8.88.E3.81.BF.E9.96.A2.E6.95.B0" name=".E5.AE.9A.E7.BE.A9.E6.B8.88.E3.81.BF.E9.96.A2.E6.95.B0">定義済み関数</h3> + <p>JavaScript にはトップレベルの定義済み関数がいくつかあります。</p> + <ul> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/eval_Function" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/eval_Function">eval</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isFinite_Function" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isFinite_Function">isFinite</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isNaN_Function" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isNaN_Function">isNaN</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/parseInt_and_parseFloat_Functions" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/parseInt_and_parseFloat_Functions">parseInt と parseFloat</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/Number_and_String_Functions" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/Number_and_String_Functions">Number と String</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/escape_and_unescape_Functions" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/escape_and_unescape_Functions">encodeURI と decodeURI、encodeURIComponent、decodeURIComponent（すべて Javascript 1.5 以降で使用可能）</a></li> + </ul> +</div> +<p>{{ PreviousNext("JavaScript/Guide/Using_the_arguments_object", "JavaScript/Guide/Predefined_Functions/eval_Function") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html b/files/ja/orphaned/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html new file mode 100644 index 0000000000..2340536ff7 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html @@ -0,0 +1,134 @@ +--- +title: Creating the Hierarchy +slug: Web/JavaScript/Guide/The_Employee_Example/Creating_the_Hierarchy +--- +<h3 id=".E9.9A.8E.E5.B1.A4.E3.81.AE.E4.BD.9C.E6.88.90" name=".E9.9A.8E.E5.B1.A4.E3.81.AE.E4.BD.9C.E6.88.90">階層の作成</h3> +<p>Employee の階層を実装するための適当なコンストラクタ関数を定義する方法はいくつかあります。これの定義に何を選択するかは、アプリケーションで何ができるようにしたいかに大きくよります。</p> +<p>このセクションではとても単純（かつ比較的柔軟でない）定義の使用方法を示し、継承を機能させる方法を実際に示します。これらの定義では、オブジェクト作成時に何らかのプロパティの値を指定することはできません。新しく作成されるオブジェクトは単にデフォルトの値を取得するだけです。これは後から変更できます。図 8.2 ではこれらの単純な定義を備えた階層を例示します。</p> +<p>実際のアプリケーションでは、オブジェクト作成時にプロパティの値を設定できるようにするコンストラクタを定義することになるでしょう（詳しくは <a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors">より柔軟なコンストラクタ</a> を参照）。今回はこれらの単純な定義を使用して、継承はどのようにして起こるのかを実際に示していくことにします。</p> +<p><img alt="Image:hier02.gif" class="internal" src="/@api/deki/files/1905/=Hier02.gif"><br> + <small><strong>図 8.2：Employee オブジェクトの定義</strong></small></p> +<p>以下に示すように、Java と JavaScript の <code>Employee</code> の定義は似ています。唯一の相違点は、Java では各プロパティに対して型を指定する必要があるのに対して、JavaScript ではその必要がないことです。また、Java のクラスでは明示的なコンストラクタメソッドを作成する必要があります。</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>JavaScript</th> + <th>Java</th> + </tr> + <tr> + <td> + <pre> +function Employee () { +this.name = ""; +this.dept = "general"; +} +</pre> + </td> + <td> + <pre> +public class Employee { + public String name; + public String dept; + public Employee () { + this.name = ""; + this.dept = "general"; + } +} +</pre> + </td> + </tr> + </tbody> +</table> +<p><code>Manager</code> および <code>WorkerBee</code> の定義では、継承の連鎖において上である次のオブジェクトの指定方法に違いがあります。JavaScript では原型的なインスタンスをコンストラクタ関数の <code>prototype</code> プロパティとして追加します。コンストラクタを定義した後ならいつでもそれをすることができます。Java ではクラス定義内でスーパークラスを指定します。クラス定義の外部でスーパークラスを変更することはできません。</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>JavaScript</th> + <th>Java</th> + </tr> + <tr> + <td> + <pre> +function Manager () { +this.reports = []; +} +Manager.prototype = new Employee; + +function WorkerBee () { +this.projects = []; +} +WorkerBee.prototype = new Employee; +</pre> + </td> + <td> + <pre> +public class Manager extends Employee { + public Employee[] reports; + public Manager () { + this.reports = new Employee[0]; + } +} + +public class WorkerBee extends Employee { + public String[] projects; + public WorkerBee () { + this.projects = new String[0]; + } +} +</pre> + </td> + </tr> + </tbody> +</table> +<p><code>Engineer</code> および <code>SalesPerson</code> の定義は、<code>WorkerBee</code> の子孫、それゆえに <code>Employee</code> の子孫であるオブジェクトを作成します。これらの種類のオブジェクトは連鎖において上にある全オブジェクトのプロパティを持ちます。さらに、これらの定義は <code>dept</code> プロパティの継承された値をこれらのオブジェクト固有の新しい値で上書きします。</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>JavaScript</th> + <th>Java</th> + </tr> + <tr> + <td> + <pre> +function SalesPerson () { + this.dept = "sales"; + this.quota = 100; +} +SalesPerson.prototype = new WorkerBee; + +function Engineer () { + this.dept = "engineering"; + this.machine = ""; +} +Engineer.prototype = new WorkerBee; +</pre> + </td> + <td> + <pre> +public class SalesPerson extends WorkerBee { + public double quota; + public SalesPerson () { + this.dept = "sales"; + this.quota = 100.0; + } +} + +public class Engineer extends WorkerBee { + public String machine; + public Engineer () { + this.dept = "engineering"; + this.machine = ""; + } +} +</pre> + </td> + </tr> + </tbody> +</table> +<p>これらの定義を使用して、そのプロパティのデフォルト値を取得するこれらのオブジェクトのインスタンスを作成することができます。図 8.3 ではこれらの JavaScript の定義を使用して新しいオブジェクトを作成する方法を示しています。また、新しいオブジェクトに対するプロパティの値も示しています。</p> +<p><strong>注意</strong>：<em>インスタンス</em>という用語はクラスベース言語においてはある特定の技術的な意味を持っています。これらの言語では、インスタンスとはクラスの個々のメンバであり、クラスとは根本的に異なるものです。JavaScript では「インスタンス」はこの技術的な意味を持っていません。なぜならば JavaScript にはクラスとインスタンスとの間のこの違いがないからです。しかしながら、JavaScript について話す際に、「インスタンス」をある特定のコンストラクタ関数を用いて作成したオブジェクトを意味する言葉として正式ではない形で使用することがあります。例えば、<code>jane</code> は <code>Engineer</code> のインスタンスであると砕けた言い方をすることもできます。同様に、<em>親</em>、<em>子</em>、<em>祖先</em>、そして<em>子孫</em>という用語は JavaScript において正式な意味を持ちませんが、プロトタイプチェーンにおいて上や下にあるオブジェクトについて言及する際にそれらを正式ではない形で使用してもかまいません。</p> +<p><img alt="Image:hier03.gif" class="internal" src="/@api/deki/files/1906/=Hier03.gif"><br> + <small><strong>図 8.3：単純な定義を用いたオブジェクトの作成</strong></small></p> +<div class="noinclude"> + <p>{{ PreviousNext("Core_JavaScript_1.5_Guide:The_Employee_Example", "Core_JavaScript_1.5_Guide:The_Employee_Example:Object_Properties") }}</p> +</div> diff --git a/files/ja/orphaned/web/javascript/guide/the_employee_example/index.html b/files/ja/orphaned/web/javascript/guide/the_employee_example/index.html new file mode 100644 index 0000000000..63176fa7e2 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/the_employee_example/index.html @@ -0,0 +1,31 @@ +--- +title: The Employee Example +slug: Web/JavaScript/Guide/The_Employee_Example +--- +<h3 id=".E5.BE.93.E6.A5.AD.E5.93.A1.E3.81.AE.E4.BE.8B" name=".E5.BE.93.E6.A5.AD.E5.93.A1.E3.81.AE.E4.BE.8B">従業員の例</h3> +<p>この章の残りは次の図で示す従業員の階層を使用していきます。</p> +<p><img alt="Image:hier01.gif" class="internal" src="/@api/deki/files/1904/=Hier01.gif"></p> +<p><small><strong>図 8.1：単純なオブジェクト階層</strong></small></p> +<p>これの例では以下のオブジェクトを使用しています。</p> +<ul> + <li>Employee はプロパティ name（デフォルトの値は空文字列）および dept（デフォルトの値は "general"）を持つ。</li> + <li>Manager は Employee をベースとしている。これは reports プロパティ（デフォルトの値は空の配列、その値として Employee オブジェクトの配列を持たせる）を追加する。</li> + <li>WorkerBee も Employee をベースとしている。これは projects プロパティ（デフォルトの値は空の配列、その値として文字列の配列を持たせる）を追加する。</li> + <li>SalesPerson は WorkerBee をベースとしている。これは quota プロパティ（デフォルトの値は 100）を追加する。さらに dept プロパティを "sales" という値で上書きする。これは販売員は全員同じ部署に所属していることを示す。</li> + <li>Engineer は WorkerBee をベースとしている。これは machine プロパティ（デフォルトの値は空文字列）を追加し、さらに dept プロパティを "engineering" という値で上書きする。</li> +</ul> +<p>残りの例：</p> +<ul> + <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy">階層の作成</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties">オブジェクトのプロパティ</a> + <ul> + <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties">プロパティの継承</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Adding_Properties" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Adding_Properties">プロパティの追加</a></li> + </ul> + </li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors">より柔軟なコンストラクタ</a></li> +</ul> +<div class="noinclude"> + <p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Class-Based_vs._Prototype-Based_Languages", "Core_JavaScript_1.5_Guide:The_Employee_Example:Creating_the_Hierarchy") }}</p> +</div> +<p> </p> diff --git a/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/adding_properties/index.html b/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/adding_properties/index.html new file mode 100644 index 0000000000..c6d536602b --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/adding_properties/index.html @@ -0,0 +1,19 @@ +--- +title: Adding Properties +slug: Web/JavaScript/Guide/The_Employee_Example/Object_Properties/Adding_Properties +--- +<h3 id=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.BF.BD.E5.8A.A0" name=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.BF.BD.E5.8A.A0">プロパティの追加</h3> +<p>JavaScript では実行時にどんなオブジェクトにもプロパティを追加することができます。コンストラクタ関数で与えられるプロパティだけを使う必要はありません。ある 1 つのオブジェクト固有のプロパティを追加するには、次のようにしてオブジェクトに値を代入します。</p> +<pre>mark.bonus = 3000; +</pre> +<p>すると、<code>mark</code> オブジェクトには bonus プロパティができます。しかし、他のどの <code>WorkerBee</code> にもこのプロパティは存在しません。</p> +<p>あるコンストラクタ関数に対するプロトタイプとして使用されているオブジェクトに新しいプロパティを追加する場合、プロトタイプからプロパティを継承する全オブジェクトへそのプロパティを追加することになります。例えば、次の文を使用すると <code>specialty</code> プロパティをすべての従業員に対して追加することができます。</p> +<pre>Employee.prototype.specialty = "none"; +</pre> +<p>JavaScript がこの文を実行するとすぐに <code>mark</code> オブジェクトも "<code>none</code>" という値を持つ specialty プロパティを持つようになります。次の図ではこのプロパティを Employee プロトタイプに追加し、さらに <code>Engineer</code> プロトタイプに対するそれを上書きしたときの効果を示します。</p> +<p><img alt="Image:hier04.gif" class="internal" src="/@api/deki/files/1907/=Hier04.gif"><br> + <small><strong>図 8.4：プロパティの追加</strong></small></p> +<div class="noinclude"> + <p>{{ PreviousNext("Core_JavaScript_1.5_Guide:The_Employee_Example:Object_Properties:Inheriting_Properties", "Core_JavaScript_1.5_Guide:The_Employee_Example:More_Flexible_Constructors") }}</p> +</div> +<p> </p> diff --git a/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/index.html b/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/index.html new file mode 100644 index 0000000000..e529b8bb52 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/index.html @@ -0,0 +1,13 @@ +--- +title: Object Properties +slug: Web/JavaScript/Guide/The_Employee_Example/Object_Properties +--- +<h3 id=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3" name=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3">オブジェクトのプロパティ</h3> +<p>このセクションでは、プロトタイプチェーンにおいてオブジェクトが他のオブジェクトからどのようにプロパティを継承するのか、また、実行時にプロパティを追加すると何が起きるのかについて論じます。</p> +<ul> + <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties">プロパティの継承</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Adding_Properties" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Adding_Properties">プロパティの追加</a></li> +</ul> +<div class="noinclude"> + <p>{{ PreviousNext("Core_JavaScript_1.5_Guide:The_Employee_Example:Creating_the_Hierarchy", "Core_JavaScript_1.5_Guide:The_Employee_Example:Object_Properties:Inheriting_Properties") }}</p> +</div> diff --git a/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html b/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html new file mode 100644 index 0000000000..798746ead6 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html @@ -0,0 +1,24 @@ +--- +title: Inheriting Properties +slug: >- + Web/JavaScript/Guide/The_Employee_Example/Object_Properties/Inheriting_Properties +--- +<h3 id=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E7.B6.99.E6.89.BF" name=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E7.B6.99.E6.89.BF">プロパティの継承</h3> +<p>次の文を用いて（<a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy">図 8.3</a> で示したように）<code>mark</code> オブジェクトを <code>WorkerBee</code> として作成するとします。</p> +<pre class="eval">mark = new WorkerBee; +</pre> +<p>JavaScript は new 演算子に出くわすと、新しく汎用オブジェクトを生成し、この新しいオブジェクトを <code>this</code> キーワードの値として WorkerBee コンストラクタ関数に渡します。コンストラクタ関数は明示的に <code>projects</code> プロパティの値をセットします。さらに、内部的な <code>__proto__</code> プロパティの値として <code>WorkerBee.prototype</code> の値をセットします。（このプロパティ名は最初と最後に 2 文字ずつのアンダースコアが付いています。）<code>__proto__</code> プロパティはプロパティの値を返すのに使用されるプロトタイプチェーンを決定します。これらのプロパティがセットされると JavaScript は新しいオブジェクトを返し、代入文は変数 <code>mark</code> にそのオブジェクトをセットします。</p> +<p>このプロセスでは <code>mark</code> がプロトタイプチェーンから継承するプロパティとして明示的には <code>mark</code> オブジェクトに値（<em>ローカルの</em>値）を格納しません。プロパティの値を使用するとき、JavaScript はまずその値がそのオブジェクトに存在しているかどうかを確認します。存在している場合はその値が返されます。値がローカルには存在していない場合、JavaScript はプロトタイプチェーンを確認します（<code>__proto__</code> プロパティを使用）。プロトタイプチェーン内のオブジェクトがそのプロパティの値を持っている場合、その値が返されます。そのようなプロパティが見つからない場合は JavaScript はそのオブジェクトにはそのプロパティがないと報告します。このようにして、<code>mark</code> オブジェクトには次のようなプロパティと値が入ることになります。</p> +<pre class="eval">mark.name = ""; +mark.dept = "general"; +mark.projects = []; +</pre> +<p><code>mark</code> オブジェクトは <code>mark.__proto__</code> の原型的なオブジェクトから name および dept プロパティの値を継承します。WorkerBee コンストラクタによって projects プロパティにローカルの値が代入されます。このことでプロパティとその値を継承することができます。このプロセスの細かいところは <a href="/ja/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited" title="ja/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited">プロパティの継承、再び</a> にて議論します。</p> +<p>これらのコンストラクタにインスタンス固有の値を渡せないため、この情報は汎用的になります。プロパティの値は WorkerBee によって作成されるすべての新しいオブジェクトに共有される、デフォルトの値になります。もちろん、これらのどのプロパティのでもその値を変えることができます。そのためには次のようにして <code>mark</code> に固有の情報を与えます。</p> +<pre class="eval">mark.name = "Doe, Mark"; +mark.dept = "admin"; +mark.projects = ["navigator"]; +</pre> +<div class="noinclude"> + <p>{{ PreviousNext("Core JavaScript 1.5 Guide:The Employee Example:Object Properties", "Core JavaScript 1.5 Guide:The Employee Example:Object Properties:Adding Properties") }}</p> +</div> diff --git a/files/ja/orphaned/web/javascript/guide/using_the_arguments_object/index.html b/files/ja/orphaned/web/javascript/guide/using_the_arguments_object/index.html new file mode 100644 index 0000000000..10c2d9e3ff --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/using_the_arguments_object/index.html @@ -0,0 +1,36 @@ +--- +title: arguments オブジェクトの使用 +slug: Web/JavaScript/Guide/Using_the_arguments_object +--- +<div class="onlyinclude"> + <h3 id="arguments_オブジェクトの使用"><code>arguments</code> オブジェクトの使用</h3> + <p>関数の引数は配列のようなオブジェクトで管理されます。関数内では、次のようにして渡された引数を指すことができます。</p> + <pre class="eval">arguments[i] +</pre> + <p>ここで <code>i</code> は引数の順序を表す数を指します。これは 0 から始まります。関数に渡された第 1 引数は <code>arguments{{ mediawiki.external(0) }}</code> となります。引数のトータルの数は <code>arguments.length</code> で示されます。</p> + <p><code>arguments</code> オブジェクトを使用すると、宣言時の仮引数の数よりも多くの引数を使って関数を呼び出すことができます。これはその関数に渡す引数の数が前もってわかっていない場合に役立ちます。<code>arguments</code>.length を使用することで実際にその関数に渡された引数の数を特定することができます。また、<code>arguments</code> オブジェクトを使用することで各引数を扱うことができます。</p> + <p>例えば、複数の文字列を連結する関数を考えます。この関数の仮引数は、連結するアイテムを区切るのに用いる文字列のみです。この関数は次のように定義されています。</p> + <pre class="eval">function myConcat(separator) { + var result = ""; // リストを初期化する + // 引数について繰り返し + for (var i = 1; i < arguments.length; i++) { + result += arguments[i] + separator; + } + return result; +} +</pre> + <p>この関数に引数をいくつも渡すことができます。そして各引数を文字列のリストに連結します。</p> + <pre class="eval">// "red, orange, blue, " を返す +myConcat(", ", "red", "orange", "blue"); + +// "elephant; giraffe; lion; cheetah; " を返す +myConcat("; ", "elephant", "giraffe", "lion", "cheetah"); + +// "sage. basil. oregano. pepper. parsley. " を返す +myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley"); +</pre> + <p>さらなる情報については、コア JavaScript リファレンスの <a href="/ja/Core_JavaScript_1.5_Reference/Objects/Function" title="ja/Core_JavaScript_1.5_Reference/Objects/Function">Function オブジェクト</a> をご覧ください。</p> + <p><strong>JavaScript 1.3 以前のバージョン</strong><br> + arguments オブジェクトは <code>Function</code> オブジェクトのプロパティであり、次のように関数の名前を前に付けることができます。</p> + functionName.arguments{{ mediawiki.external('i') }}</div> +<p>{{ PreviousNext("JavaScript/Guide/Calling_Functions", "JavaScript/Guide/Predefined_Functions") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/variables/index.html b/files/ja/orphaned/web/javascript/guide/variables/index.html new file mode 100644 index 0000000000..cebaecc949 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/variables/index.html @@ -0,0 +1,62 @@ +--- +title: 変数 +slug: Web/JavaScript/Guide/Variables +--- +<p>{{ 英語版章題("Variables") }}</p> +<h3 id=".E5.A4.89.E6.95.B0" name=".E5.A4.89.E6.95.B0">変数</h3> +<p>アプリケーションで値を識別する名前として変数を使用します。変数の名前はあるルールに従って付けなくてはなりません。変数の名前は<em>識別子</em>とも呼ばれます。</p> +<p>JavaScript の識別子は必ずアルファベットかアンダースコア (_) かドル記号 ($) から始まらなくてはなりません。続く文字は数字 (0-9) も使えます。JavaScript は大文字・小文字を区別するため、使えるアルファベットは "A" から "Z"（大文字）と "a" から "z"（小文字）です。</p> +<p>JavaScript 1.5 からは å や ü といった ISO 8859-1 や Unicode のアルファベットも識別子に使えます。<a href="/ja/Core_JavaScript_1.5_Guide/Unicode#Unicode_Escape_Sequences" title="ja/Core_JavaScript_1.5_Guide/Unicode#Unicode_Escape_Sequences">Unicode エスケープシーケンス</a> のページに列挙されている \uXXXX 形式の Unicode エスケープシーケンスも識別子に使用できます。</p> +<p><code>Number_hits</code> や <code>temp99</code> や <code>_name</code> が使用できる名前の例です。</p> +<p>{{ 英語版章題("Declaring Variables") }}</p> +<h4 id=".E5.A4.89.E6.95.B0.E3.81.AE.E5.AE.A3.E8.A8.80" name=".E5.A4.89.E6.95.B0.E3.81.AE.E5.AE.A3.E8.A8.80">変数の宣言</h4> +<p>2 つの方法で変数を宣言できます。</p> +<ul> + <li><a href="/ja/Core_JavaScript_1.5_Reference/Statements/var" title="ja/Core_JavaScript_1.5_Reference/Statements/var">var</a> というキーワードを使う。例えば、<code>var x = 42</code>。この構文は <a href="#.E5.A4.89.E6.95.B0.E3.81.AE.E3.82.B9.E3.82.B3.E3.83.BC.E3.83.97">ローカルおよびグローバル</a> 変数どちらの宣言にも使用可能です。</li> + <li>単に値を代入する。例えば、<code>x = 42</code>。これはいつでも <a href="#.E3.82.B0.E3.83.AD.E3.83.BC.E3.83.90.E3.83.AB.E5.A4.89.E6.95.B0">グローバル変数</a> を宣言できますが、{{ 原語併記("厳格な JavaScript 警告", "strict JavaScript warning") }}が発生します。この方法は使用すべきではありません。</li> +</ul> +<p>{{ 英語版章題("Evaluating Variables") }}</p> +<h4 id=".E5.A4.89.E6.95.B0.E3.81.AE.E8.A9.95.E4.BE.A1" name=".E5.A4.89.E6.95.B0.E3.81.AE.E8.A9.95.E4.BE.A1">変数の評価</h4> +<p><code>var</code> 文を使用し、初期化せずに宣言された変数は <a href="/ja/Core_JavaScript_1.5_Reference/Global_Properties/undefined" title="ja/Core_JavaScript_1.5_Reference/Global_Properties/undefined">undefined</a> の値をとります。</p> +<p>未宣言の変数にアクセスしようとすると、ReferenceError 例外が投げられます。</p> +<pre class="eval">var a; +print("a の値は " + a); // "a の値は undefined" を出力 +print("b の値は " + b); // ReferenceError 例外を投げる +</pre> +<p><code>undefined</code> を使うと変数に値が入っているかどうかを確かめられます。以下のコードでは、変数 <code>input</code> には値が代入されておらず、<code><a href="/ja/Core_JavaScript_1.5_Reference/Statements/if...else" title="ja/Core_JavaScript_1.5_Reference/Statements/if...else">if</a></code> 文での評価結果は <code>true</code> です。</p> +<pre class="eval">var input; +if(input === undefined){ + doThis(); +} else { + doThat(); +} +</pre> +<p><span class="comment">Not sure how the following is related to "Variables" section</span> <code>undefined</code> は真偽値コンテキストで使用されると <code>false</code> として振る舞います。例えば以下のコードでは、<code>myArray</code> の要素が未定義であるために関数 <code>myFunction</code> が実行されます。</p> +<pre class="eval">var myArray = new Array(); +if (!myArray[0]) myFunction(); +</pre> +<p>null 変数を評価すると、数値コンテキストにおいては null 値は 0 として振る舞います。また、真偽値コンテキストでは false として振る舞います。</p> +<pre class="eval">var n = null; +print(n * 32); // prints 0 +</pre> +<p>{{ 英語版章題("Variable Scope") }}</p> +<h4 id=".E5.A4.89.E6.95.B0.E3.81.AE.E3.82.B9.E3.82.B3.E3.83.BC.E3.83.97" name=".E5.A4.89.E6.95.B0.E3.81.AE.E3.82.B9.E3.82.B3.E3.83.BC.E3.83.97">変数のスコープ</h4> +<p>変数を関数の外側で宣言すると、その変数はその文書のどのコードからも使用できるようになるため、<em>グローバル</em>（大域）変数と呼ばれます。変数を関数の内部で宣言すると、その変数はその関数の中でしか使用できないため、<em>ローカル</em>（局所）変数と呼ばれます。</p> +<p>JavaScript には <a href="/ja/Core_JavaScript_1.5_Guide/Block_Statement#.E3.83.96.E3.83.AD.E3.83.83.E3.82.AF.E6.96.87" title="ja/Core_JavaScript_1.5_Guide/Block_Statement#.E3.83.96.E3.83.AD.E3.83.83.E3.82.AF.E6.96.87">ブロック文</a> のスコープがありません。むしろ、そのブロックを内包しているコードに対して局所化されます。例えば以下のコードは <code>condition</code> が <code>false</code> のとき、例外を投げずに 0 が出力されます。</p> +<pre class="eval">if (condition) { + var x = 5; +} +print(x ? x : 0); +</pre> +<p>JavaScript の変数に関する独特なこととして、後に宣言される変数を例外を発生させることなく参照できるというのも挙げられます。</p> +<pre class="eval">print(x === undefined); // "true" を出力 +var x = 3; +</pre> +<p>{{ 英語版章題("Global Variables") }}</p> +<h4 id=".E3.82.B0.E3.83.AD.E3.83.BC.E3.83.90.E3.83.AB.E5.A4.89.E6.95.B0" name=".E3.82.B0.E3.83.AD.E3.83.BC.E3.83.90.E3.83.AB.E5.A4.89.E6.95.B0">グローバル変数</h4> +<p><span class="comment">need links to pages discussing scope chains and the global object</span> グローバル変数は実際には<em>グローバルオブジェクト</em>のプロパティです。ウェブページではグローバルオブジェクトは <a href="/ja/DOM/window" title="ja/DOM/window">window</a> です。そのため、<code>window.<em>variable</em></code> という構文を使うことでグローバル変数をセットしたり、グローバル変数にアクセスしたりすることができます。</p> +<p>したがって、あるウィンドウやフレームで宣言したグローバル変数に、そのウィンドウやフレームの名前を指定すれば別のウィンドウやフレームからアクセスできます。例えば、<code>phoneNumber</code> という変数を <code>FRAMESET</code> 文書内で宣言すると、子フレームから <code>parent.phoneNumber</code> としてこの変数を参照することができます。</p> +<p>{{ 英語版章題("See Also") }}</p> +<h4 id=".E9.96.A2.E9.80.A3.E9.A0.85.E7.9B.AE" name=".E9.96.A2.E9.80.A3.E9.A0.85.E7.9B.AE">関連項目</h4> +<p><a href="/ja/Sharp_variables_in_JavaScript" title="ja/Sharp_variables_in_JavaScript">JavaScript のシャープ変数</a></p> +<p>{{ PreviousNext("JavaScript/Guide/Values", "JavaScript/Guide/Constants") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/writing_a_regular_expression_pattern/index.html b/files/ja/orphaned/web/javascript/guide/writing_a_regular_expression_pattern/index.html new file mode 100644 index 0000000000..64da075317 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/writing_a_regular_expression_pattern/index.html @@ -0,0 +1,193 @@ +--- +title: 正規表現パターンの記述 +slug: Web/JavaScript/Guide/Writing_a_Regular_Expression_Pattern +--- +<h3 id=".E6.AD.A3.E8.A6.8F.E8.A1.A8.E7.8F.BE.E3.83.91.E3.82.BF.E3.83.BC.E3.83.B3.E3.82.92.E6.9B.B8.E3.81.8F" name=".E6.AD.A3.E8.A6.8F.E8.A1.A8.E7.8F.BE.E3.83.91.E3.82.BF.E3.83.BC.E3.83.B3.E3.82.92.E6.9B.B8.E3.81.8F">正規表現パターンを書く</h3> + +<p>正規表現パターンは、<code>/abc/</code> のような単純な文字、または <code>/ab*c/</code> や <code>/Chapter (\d+)\.\d*/</code> のような単純な文字と特殊文字との組み合わせからなります。最後の例では記憶装置として使われている丸括弧が含まれています。パターンのこの部分でなされたマッチは後で使用できるように記憶されます。詳しくは <a href="/ja/docs/JavaScript/Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches" title="ja/docs/JavaScript/Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches">括弧で囲まれた部分文字列のマッチの使用</a> を参照してください。</p> + +<h4 id="単純なパターンの使用">単純なパターンの使用</h4> + +<p>単純なパターンは、直接マッチしている部分を見つけたい文字で構成されます。例えば、/abc/ というパターンは、実際に 'abc' という文字が一緒にその順で存在しているときにだけ、文字列中の文字の組み合わせにマッチします。"Hi, do you know your abc's?" や "The latest airplane designs evolved from slabcraft." といった文字列でのマッチは成功します。どちらの場合でも 'abc' という部分文字列にマッチします。"Grab crab" という文字列では 'abc' という部分文字列が含まれていないためマッチしません。</p> + +<h4 id="特殊文字の使用">特殊文字の使用</h4> + +<p>1 つ以上の b を見つけたり、ホワイトスペースを見つけたりといった直接マッチより高度なマッチの検索では、パターンに特殊文字を使用します。例えば <code>/ab*c/</code> というパターンでは 1 つの 'a' とその後ろに続く 0 個以上の 'b'（* は直前のアイテムの 0 回以上の出現を意味する）とそのすぐ後ろに続く 'c' からなる文字の組み合わせにマッチします。"cbbabbbbcdebc" という文字列ではこのパターンは 'abbbbc' という部分文字列にマッチします。</p> + +<p>以下の表で正規表現で使用できる特殊文字とその意味を詳しく説明します。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>文字</th> + <th>意味</th> + </tr> + <tr> + <td>\</td> + <td>次のうちのどちらか。 + <ul> + <li>通常は文字どおり扱われる文字に対して、次の文字は特殊であり、文字どおりに解釈すべきではないと指示する。例えば、<code>/b/ </code> は 'b' という文字にマッチする。b の前にバックスラッシュを置き、<code>/\b/</code> とすると、その文字は単語の区切りにマッチすることを意味する特殊文字になる。</li> + <li>通常は特殊文字として扱われる文字に対して、次の文字は特殊ではなく、文字どおりに解釈すべきであると指示する。例えば、* は直前のアイテムの 0 回以上の出現にマッチさせることを意味する特殊文字である。つまり、例えば <code>/a*/</code> は a の 0 文字以上の a へのマッチを意味する。* という文字そのものにマッチさせるには、その直前にバックスラッシュを置く。例えば、<code>/a\*/</code> は 'a*' にマッチする。</li> + </ul> + </td> + </tr> + <tr> + <td>^</td> + <td>入力の先頭にマッチする。複数行フラグが true にセットされている場合は、改行文字直後にもマッチする。 例えば、<code>/^A/</code> は "an A" の 'A' にはマッチしないが、"An A" の最初の 'A' にはマッチする。</td> + </tr> + <tr> + <td>$</td> + <td>入力の末尾にマッチする。複数行フラグが true にセットされている場合は、改行文字直前にもマッチする。 例えば、<code>/t$/</code> は "eater" の 't' にはマッチしないが、"eat" の 't' にはマッチする。</td> + </tr> + <tr> + <td>*</td> + <td>直前の文字の 0 回以上の繰り返しにマッチする。 例えば、<code>/bo*/</code> は "A ghost booooed" の 'boooo' や "A bird warbled" の 'b' にはマッチするが、"A goat grunted" ではマッチしない。</td> + </tr> + <tr> + <td>+</td> + <td>直前の文字の 1 回以上の繰り返しにマッチする。{1,} と同等。 例えば、<code>/a+/</code> は "candy" の 'a' や、"caaaaaaandy" のすべての a にマッチする。</td> + </tr> + <tr> + <td>?</td> + <td>直前の文字の 0 回か 1 回の繰り返しにマッチする。 + <p>例えば、<code>/e?le?/</code> は "angel" の 'el' や "angle" の 'le' にマッチする。</p> + + <p><span class="nowiki">*</span>、+、?、{} といった量指定子の直後に使用した場合、その量指定子をスキップ優先（最小回数にマッチ）にする。これはデフォルトとは逆であり、デフォルトは繰り返し優先（最大回数にマッチ）。例えば、/\d+/ は非グローバルで "123abc" の "123" にマッチするが、/\d+?/ の場合、"1" だけにマッチする。</p> + 先読み表現内でも使用できるが、これはこの表の x(?=y) および x(?!y) にて説明。</td> + </tr> + <tr> + <td>.</td> + <td>小数点は改行文字以外のどの 1 文字にもマッチする。 例えば、<code>/.n/</code> は "nay, an apple is on the tree" の 'an' や 'on' にはマッチするが、'nay' にはマッチしない。</td> + </tr> + <tr> + <td>(x)</td> + <td>'x' にマッチし、マッチしたものを記憶しておく。これはキャプチャする括弧と呼ぶ。 例えば、<code>/(foo)/</code> は "foo bar" の 'foo' にマッチし、これを記憶する。マッチした部分文字列は結果として生成される配列の要素 1, ..., b から参照できる。</td> + </tr> + <tr> + <td>(?:x)</td> + <td>'x' にマッチするが、マッチしたものは記憶しない。これはキャプチャしない括弧と呼ぶ。マッチした部分文字列は先程のような配列の要素 1, ..., n から参照することはできない。</td> + </tr> + <tr> + <td>x(?=y)</td> + <td>'x' に 'y' が続く場合のみ 'x' にマッチする。例えば、<code>/Jack(?=Sprat)/</code> は 'Jack' の後ろに 'Sprat' が続く場合のみ 'Jack' にマッチする。<code>/Jack(?=Sprat|Frost)/</code> は 'Jack' の後ろに 'Sprat' または 'Frost' が続く場合のみ 'Jack' にマッチする。しかしながら、'Sprat' も 'Frost' もマッチの結果には現れない。</td> + </tr> + <tr> + <td>x(?!y)</td> + <td>'x' に 'y' が続かない場合のみ 'x' にマッチする。例えば、<code>/\d+(?!\.)/</code> はある数に小数点が続かない場合のみその数にマッチする。正規表現 <code>/\d+(?!\.)/.exec("3.141")</code> は 141 にはマッチするが 3.141 にはマッチしない。</td> + </tr> + <tr> + <td>x|y</td> + <td>'x' または 'y' にマッチする。 例えば、<code>/green|red/</code> は "green apple" の "green' や "red apple" の 'red' にマッチする。</td> + </tr> + <tr> + <td>{n}</td> + <td>n には正の整数が入る。直前の文字がちょうど n 回出現するものにマッチする。 例えば、<code>/a{2}/</code> は "candy" の 'a' にはマッチしないが、"caandy" の すべての a にマッチする。また、"caaandy" の最初の 2 つの a にマッチする。</td> + </tr> + <tr> + <td>{n,}</td> + <td>n には正の整数が入る。直前の文字が少なくとも n 回出現するものにマッチする。 例えば、<code>/a{2,}/</code> は "candy" の 'a' にはマッチしないが、"caandy" や "caaaaaaandy" の すべての a にマッチする。</td> + </tr> + <tr> + <td>{n,m}</td> + <td>n および m には正の整数が入る。直前の文字が少なくとも n 回、多くとも m 回出現するものにマッチする。 例えば、<code>/a{1,3}/</code> は "cndy" ではマッチせず、"candy" の 'a'、"caandy" の最初の 2 つの a、"caaaaaaandy" の最初の 3 つの a にマッチする。"caaaaaaandy" では元の文字列に a が 4 つ以上あるが、マッチするのは "aaa" であることに注意。</td> + </tr> + <tr> + <td>[xyz]</td> + <td>文字の集合。囲まれた文字のどれにでもマッチする。ハイフンを用いて文字の範囲を指定することも可能。 例えば、<code>/[abcd]/</code> は <code>/[a-d]/</code> と同じ。これは "brisket" の 'b' や "city" の 'c' にマッチする。</td> + </tr> + <tr> + <td>[^xyz]</td> + <td>文字の集合の否定または補集合。角括弧で囲まれていないものにマッチする。ハイフンを用いて文字の範囲を指定することも可能。 例えば、<code>/[^abc]/</code> は <code>/[^a-c]/</code> と同じ。これは "brisket" の 'r' や "chop" の 'h' にマッチする。</td> + </tr> + <tr> + <td>[\b]</td> + <td>後退にマッチする。（\b と混同してはならない。）</td> + </tr> + <tr> + <td>\b</td> + <td>スペースや改行文字のような単語の区切りにマッチする。（[\b] と混同してはならない。） 例えば、<code>/\bn\w/</code> は "noonday" の 'no' にマッチする。また、<code>/\wy\b/</code> は "possibly yesterday" の 'ly' にマッチする。</td> + </tr> + <tr> + <td>\B</td> + <td>単語の区切り以外の文字にマッチする。 例えば、<code>/\w\Bn/</code> は "noonday" の 'on' にマッチする。また、<code>/y\B\w/</code> は "possibly yesterday" の 'ye' にマッチする。</td> + </tr> + <tr> + <td>\cX</td> + <td>X には制御文字が入る。文字列中の制御文字にマッチする。 例えば、<code>/\cM/</code> は文字列中の control-M にマッチする。</td> + </tr> + <tr> + <td>\d</td> + <td>数字にマッチする。<code>[0-9]</code> と同等。 例えば、<code>/\d/</code> や <code>/[0-9]/</code> は "B2 is the suite number" の '2' にマッチする。</td> + </tr> + <tr> + <td>\D</td> + <td>数字以外の文字にマッチする。<code>[^0-9]</code> と同等。 例えば、<code>/\D/</code> や <code>/[^0-9]/</code> は "B2 is the suite number" の 'B' にマッチする。</td> + </tr> + <tr> + <td>\f</td> + <td>改ページにマッチする。</td> + </tr> + <tr> + <td>\n</td> + <td>改行にマッチする。</td> + </tr> + <tr> + <td>\r</td> + <td>復帰にマッチする。</td> + </tr> + <tr> + <td>\s</td> + <td>スペース、タブ、改ページ、改行を含む、1 つのホワイトスペース文字にマッチする。 <code>[ \f\n\r\t\v\u00A0\u1680\u180E\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]</code> と同等。 例えば、<code>/\s\w*/</code> は "foo bar" の ' bar' にマッチする。</td> + </tr> + <tr> + <td>\S</td> + <td>ホワイトスペース以外の 1 文字にマッチする。<code>[^ \f\n\r\t\v\u00A0\u1680\u180E\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF]</code> と同等。 例えば、<code>/\S\w*/</code> は "foo bar" の 'foo' にマッチする。</td> + </tr> + <tr> + <td>\t</td> + <td>タブにマッチする。</td> + </tr> + <tr> + <td>\v</td> + <td>垂直タブにマッチする。</td> + </tr> + <tr> + <td>\w</td> + <td>アンダースコアを含むどの英数字にもマッチする。<code>[A-Za-z0-9_]</code> と同等。 例えば、<code>/\w/</code> は "apple" の 'a' や "$5.28" の '5' や "3D" の '3' にマッチする。</td> + </tr> + <tr> + <td>\W</td> + <td>前述以外の文字にマッチする。<code>[^A-Za-z0-9_]</code> と同等。 例えば、<code>/\W/</code> や <code>/[^$A-Za-z0-9_]/</code> は "50%" の '%' にマッチする。</td> + </tr> + <tr> + <td>\n</td> + <td>n には正の整数が入る。その正規表現の n 番目の括弧の部分にマッチする最後の部分文字列への後方参照（左括弧をカウントする）。 例えば、<code>/apple(,)\sorange\1/</code> は "apple, orange, cherry, peach" の 'apple, orange,' にマッチする。</td> + </tr> + <tr> + <td>\0</td> + <td>NUL 文字にマッチする。この後ろに他の数字を続けてはならない。</td> + </tr> + <tr> + <td>\xhh</td> + <td>hh（2 桁の 16 進数）というコードを持つ文字にマッチする。</td> + </tr> + <tr> + <td>\uhhhh</td> + <td>hhhh（4 桁の 16 進数）というコードを持つ文字にマッチする。</td> + </tr> + </tbody> +</table> + +<p><small><strong>表 4.1正規表現における特殊文字</strong></small></p> + +<h4 id="括弧の使用">括弧の使用</h4> + +<p>正規表現パターンの一部分を括弧で囲むことで、マッチした部分文字列のその部分を記憶しておくことができます。一度記憶すると、後からその部分文字列を呼び戻すことができます。これに関しては <a href="/ja/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches" title="ja/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches">括弧で囲まれた部分文字列のマッチの使用</a> で説明しています。</p> + +<p>例えば、<code>/Chapter (\d+)\.\d*/</code> というパターンでは、エスケープされた文字と特殊文字の部分がその例で、その部分を記憶するように指示しています。これは 'Chapter ' という文字列、それに続く 1 文字以上の数字（\d はいずれかの数字を意味し、+ は 1 回以上の繰り返しを意味する）、それに続く小数点（それ自体は特殊文字であり、小数点の前の \ はパターンが '.' という文字そのものを探すようにすることを意味する）、それに続く 0 文字以上の数字（\d は数字を意味し、* は 0 回以上の繰り返しを意味する）にマッチします。さらに、括弧を使うことで最初のマッチした数値を記憶させます。</p> + +<p>このパターンは "Open Chapter 4.3, paragraph 6" という文字列で見つかり、'4' が記憶されます。このパターンは "Chapter 3 and 4" では見つかりません。この文字列は '3' の後ろにピリオドがないためです。</p> + +<p>マッチした部分を記憶させることなく部分文字列にマッチさせたい場合は、その括弧においてパターンの前に <code>?:</code> を付けてください。例えば、<code>(?:\d+)</code> は 1 文字以上の数字にマッチしますが、マッチした文字は記憶されません。</p> + +<p>{{ PreviousNext("JavaScript/Guide/Creating_a_Regular_Expression", "JavaScript/Guide/Working_with_Regular_Expressions") }}</p> diff --git a/files/ja/orphaned/web/javascript/reference/global_objects/array/index/index.html b/files/ja/orphaned/web/javascript/reference/global_objects/array/index/index.html new file mode 100644 index 0000000000..1d2e7a4797 --- /dev/null +++ b/files/ja/orphaned/web/javascript/reference/global_objects/array/index/index.html @@ -0,0 +1,22 @@ +--- +title: index +slug: Web/JavaScript/Reference/Global_Objects/Array/index +--- +<h2 id="Summary" name="Summary">概要</h2> +<p>正規表現マッチにより作成された配列において、文字列中での一致部分の、0 から始まるインデックス。</p> +<table class="standard-table"> + <thead> + <tr> + <td class="header" colspan="2"><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a> のプロパティ</td> + </tr> + </thead> + <tbody> + <tr> + <td colspan="2"><b>静的</b></td> + </tr> + <tr> + <td>実装されたバージョン</td> + <td>JavaScript 1.2</td> + </tr> + </tbody> +</table> diff --git a/files/ja/orphaned/web/javascript/reference/global_objects/array/input/index.html b/files/ja/orphaned/web/javascript/reference/global_objects/array/input/index.html new file mode 100644 index 0000000000..166ed28656 --- /dev/null +++ b/files/ja/orphaned/web/javascript/reference/global_objects/array/input/index.html @@ -0,0 +1,25 @@ +--- +title: input +slug: Web/JavaScript/Reference/Global_Objects/Array/input +--- +<p> +</p><p>{{ 英語版章題("Summary") }} +</p> +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81"> 概要 </h3> +<p>正規表現マッチにより作成された配列において、正規表現がマッチを行った元の文字列を反映します。 +</p> +<table class="fullwidth-table"> +<tbody><tr> +<td class="header" colspan="2"><a href="ja/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a> のプロパティ</td> +</tr> +<tr> +<td colspan="2"><b>静的</b></td> +</tr> +<tr> +<td>実装されたバージョン:</td> +<td>JavaScript 1.2, NES 3.0</td> +</tr> +</tbody></table> +<div class="noinclude"> +</div> +{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Global_Objects/Array/input", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Objets_globaux/Array/input", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/Obiekty/Array/input" } ) }} diff --git a/files/ja/orphaned/web/javascript/reference/global_objects/array/prototype/index.html b/files/ja/orphaned/web/javascript/reference/global_objects/array/prototype/index.html new file mode 100644 index 0000000000..dc20c31a41 --- /dev/null +++ b/files/ja/orphaned/web/javascript/reference/global_objects/array/prototype/index.html @@ -0,0 +1,176 @@ +--- +title: Array.prototype +slug: Web/JavaScript/Reference/Global_Objects/Array/prototype +tags: + - Array + - JavaScript + - Junk + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype +--- +<div>{{JSRef}}</div> + +<h2 id="Description" name="Description">解説</h2> + +<p>{{jsxref("Array")}} インスタンスは、 <code>Array.prototype</code> を継承しています。すべてのコンストラクターと同様に、コンストラクターの prototype オブジェクトを変更して、すべての {{jsxref("Array")}} インスタンスを変更することができます。例えば、新しいメソッドやプロパティを追加して、すべての <code>Array</code> オブジェクトを拡張することができます。例えば、これは{{Glossary("Polyfill", "ポリフィル")}}に使用されます。</p> + +<p>ただし、配列オブジェクトに標準外メソッドを追加すると、後で独自のコードに問題が発生したり、 <a href="https://developers.google.com/web/updates/2018/03/smooshgate">JavaScript への機能の追加</a>の際に問題が発生することがあります。</p> + +<p>豆知識: <code>Array.prototype</code> はそれ自体が {{jsxref("Array")}} です。</p> + +<pre class="brush: js notranslate">Array.isArray(Array.prototype); // true +</pre> + +<p>{{js_property_attributes(0, 0, 0)}}</p> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<dl> + <dt><code>Array.prototype.constructor</code></dt> + <dd>オブジェクトの prototype を生成する関数を指定します。</dd> + <dt>{{jsxref("Array.prototype.length")}}</dt> + <dd>配列内の要素数を反映します。</dd> + <dt>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</dt> + <dd><code><a href="/ja/docs/Web/JavaScript/Reference/Statements/with">with</a></code> バインディングのスコープから除外されるプロパティ名を保持するシンボル。</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<h3 id="Mutator_methods" name="Mutator_methods">Mutator メソッド</h3> + +<p>これらのメソッドは、配列を書き換えます。</p> + +<dl> + <dt>{{jsxref("Array.prototype.copyWithin()")}}</dt> + <dd>配列内で配列内の連続した要素をコピーします。</dd> + <dt>{{jsxref("Array.prototype.fill()")}}</dt> + <dd>配列内の指定した開始位置から終了位置までの要素を固定値で埋めます。</dd> + <dt>{{jsxref("Array.prototype.pop()")}}</dt> + <dd>配列から最後の要素を取り除き、戻り値として返します。</dd> + <dt>{{jsxref("Array.prototype.push()")}}</dt> + <dd>配列の最後に 1 個以上の要素を追加し、新しい配列の長さを返します。</dd> + <dt>{{jsxref("Array.prototype.reverse()")}}</dt> + <dd>配列の要素の順番を逆転させます (最初の要素は最後に、最後の要素は最初になります)。</dd> + <dt>{{jsxref("Array.prototype.shift()")}}</dt> + <dd>配列から最初の要素を取り除き、その要素を返します。</dd> + <dt>{{jsxref("Array.prototype.sort()")}}</dt> + <dd>配列内で要素を整列し、配列を返します。</dd> + <dt>{{jsxref("Array.prototype.splice()")}}</dt> + <dd>配列に対して複数の要素を追加したり取り除いたりします。</dd> + <dt>{{jsxref("Array.prototype.unshift()")}}</dt> + <dd>配列の最初に 1 個以上の要素を追加し、配列の変更後の長さを返します。</dd> +</dl> + +<h3 id="Accessor_methods" name="Accessor_methods">アクセサーメソッド</h3> + +<p>これらのメソッドは呼び出し対象の配列を書き換えず、配列を何らかの形で表したものを返します。</p> + +<dl> + <dt>{{jsxref("Array.prototype.concat()")}}</dt> + <dd>この配列に他の配列や値を結合して新しい配列を返します。</dd> + <dt>{{jsxref("Array.prototype.includes()")}}</dt> + <dd>この配列が特定の要素を含むかどうか判定し、その結果を <code>true</code> または <code>false</code> で返します。</dd> + <dt>{{jsxref("Array.prototype.indexOf()")}}</dt> + <dd>指定された値と等しい値を持つ最初の (添字の一番小さい) 要素の添字を返します。見つからない場合、-1 を返します。</dd> + <dt>{{jsxref("Array.prototype.join()")}}</dt> + <dd>配列のすべての要素を結合した文字列を返します。</dd> + <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt> + <dd>指定された値と等しい値を持つ最後の (添字の一番大きい) 要素の添字を返します。見つからない場合、-1 を返します。</dd> + <dt>{{jsxref("Array.prototype.slice()")}}</dt> + <dd>配列の一部を取り出して新しい配列として返します。</dd> + <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>指定された配列を表す配列リテラルを返します。この値を使って新しい配列を作れます。{{jsxref("Object.prototype.toSource()")}} メソッドを上書きしています。</dd> + <dt>{{jsxref("Array.prototype.toString()")}}</dt> + <dd>配列とその要素を表す文字列を返します。{{jsxref("Object.prototype.toString()")}} メソッドを上書きしています。</dd> + <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt> + <dd>配列とその要素を表すロケールに従った文字列を返します。{{jsxref("Object.prototype.toLocaleString()")}} メソッドを上書きしています。</dd> +</dl> + +<h3 id="Iteration_methods" name="Iteration_methods">反復メソッド</h3> + +<p>いくつかのメソッドは、配列を処理する際にコールバックされる関数を引数に取ります。これらのメソッドが呼ばれる時、配列の <code>length</code> 値を一時記憶するため、コールバック中にこの長さを超えて追加された要素にはアクセスしません。配列に対するその他の変更 (要素の値の書き換えや削除) は、変更された要素にメソッドが後でアクセスした場合の操作結果に影響を及ぼす可能性があります。そのような場合におけるこれらのメソッドの振る舞いは正確に定義されていますが、コードの読者を混乱させないよう、その振る舞いに依存すべきではありません。配列を変化させなければならない場合は、代わりに新しい配列にコピーしてください。</p> + +<dl> + <dt>{{jsxref("Array.prototype.entries()")}}</dt> + <dd>新しい <code>Array Iterator</code> オブジェクトを返します。このオブジェクトは、配列中の各インデックスに対する key/value ペアを保持しています。</dd> + <dt>{{jsxref("Array.prototype.every()")}}</dt> + <dd>指定したテスト関数を配列中のすべての要素が満たした場合に <code>true</code> を返します。</dd> + <dt>{{jsxref("Array.prototype.filter()")}}</dt> + <dd>指定したフィルタリング関数が <code>true</code> を返す、配列中の要素を格納した新しい配列を生成します。</dd> + <dt>{{jsxref("Array.prototype.find()")}}</dt> + <dd>指定したテスト関数を満たす、配列中の要素の値を返します。1 個も見つからない場合は <code>undefined</code> を返します。</dd> + <dt>{{jsxref("Array.prototype.findIndex()")}}</dt> + <dd>指定したテスト関数を満たす、配列中の要素のインデックスを返します。1 個も見つからない場合は <code>-1</code> を返します。</dd> + <dt>{{jsxref("Array.prototype.forEach()")}}</dt> + <dd>配列中のそれぞれの要素について関数を呼び出します。</dd> + <dt>{{jsxref("Array.prototype.keys()")}}</dt> + <dd>新しい <code>Array Iterator</code> を返します。このオブジェクトは配列中の各インデックスのキーを保持します。</dd> + <dt>{{jsxref("Array.prototype.map()")}}</dt> + <dd>配列内のすべての要素に対して与えられた関数を呼び出し、その結果を格納した新しい配列を生成します。</dd> + <dt>{{jsxref("Array.prototype.reduce()")}}</dt> + <dd>アキュムレータと配列内のすべての要素に対して (左から右の順で) 関数を適用し、単一の値に還元します。</dd> + <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt> + <dd>アキュムレータと配列内のすべての要素に対して (右から左の順で) 関数を適用し、単一の値に還元します。</dd> + <dt>{{jsxref("Array.prototype.some()")}}</dt> + <dd>指定したテスト関数を配列中の少なくとも 1 個の要素が満たした場合に <code>true</code> を返します。</dd> + <dt>{{jsxref("Array.prototype.values()")}}</dt> + <dd>新しい <code>Array Iterator</code> オブジェクトを返します。このオブジェクトは、配列中の各インデックスの値を保持します。</dd> + <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}</dt> + <dd>新しい <code>Array Iterator</code> オブジェクトを返します。このオブジェクトは、配列中の各インデックスの値を保持します。</dd> +</dl> + +<h3 id="Generic_methods_non-standard" name="Generic_methods_(non-standard)">ジェネリックメソッド (非標準)</h3> + +<p>JavaScript の <code>Array</code> オブジェクト上の多くのメソッドは、配列型 (array-like) のあらゆるオブジェクトに対し広く適用されるよう設計されています。すなわち、どんなオブジェクトでも <code>length</code> プロパティを持ち、数値プロパティ名を使う (<code>array[5]</code> のような) アクセスが有効なら、それらを適用できます。{{jsxref("Array.join", "join")}} のような一部のメソッドは、呼び出し対象オブジェクトの <code>length</code> や数値プロパティを読み取るだけです。 一方、{{jsxref("Array.reverse", "reverse")}} のようなメソッドは、対象オブジェクトの数値プロパティや <code>length</code> が変更可能であることを要求するため、<code>length</code> プロパティや設定される合成数値プロパティの変更を許さない {{jsxref("String")}} のようなオブジェクトに対して呼び出すことができません。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>初回定義</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td><code>copyWithin()</code>, <code>fill()</code>, <code>entries()</code>, <code>keys()</code>, <code>values()</code>, <code>find()</code>, <code>findIndex()</code> メソッドを追加</td> + </tr> + <tr> + <td>{{SpecName('ES7', '#sec-array.prototype', 'Array.prototype')}}</td> + <td>{{Spec2('ES7')}}</td> + <td><code>includes()</code> メソッドを追加</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype', 'Array.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Array.prototype")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/ja/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html b/files/ja/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html new file mode 100644 index 0000000000..46bf817819 --- /dev/null +++ b/files/ja/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html @@ -0,0 +1,109 @@ +--- +title: AsyncFunction.prototype +slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype +tags: + - Experimental + - JavaScript + - Property + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype +--- +<div>{{JSRef}}</div> + +<p><code><strong>AsyncFunction.prototype</strong></code> プロパティは、{{jsxref("AsyncFunction")}} プロトタイプオブジェクトを表します。</p> + +<h2 id="説明">説明</h2> + +<p>{{jsxref("AsyncFunction")}} オブジェクトは、<code>AsyncFunction.prototype</code> を継承します。<code>AsyncFunction.prototype</code> は修正できません。</p> + +<h2 id="プロパティ">プロパティ</h2> + +<dl> + <dt><code><strong>AsyncFunction.constructor</strong></code></dt> + <dd>初期値は {{jsxref("AsyncFunction")}}。</dd> + <dt><code><strong>AsyncFunction.prototype[@@toStringTag]</strong></code></dt> + <dd>"AsyncFunction" を返す。</dd> +</dl> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">ステータス</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Async Function', '#async-function-definitions', 'async function')}}</td> + <td>{{Spec2('Async Function')}}</td> + <td>提案</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th> Edge</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("52.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("52.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{jsxref("AsyncFunction")}}</li> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/ja/orphaned/web/javascript/reference/global_objects/finalizationregistry/cleanupsome/index.html b/files/ja/orphaned/web/javascript/reference/global_objects/finalizationregistry/cleanupsome/index.html new file mode 100644 index 0000000000..c25d3dd476 --- /dev/null +++ b/files/ja/orphaned/web/javascript/reference/global_objects/finalizationregistry/cleanupsome/index.html @@ -0,0 +1,74 @@ +--- +title: FinalizationRegistry.prototype.cleanupSome() +slug: Web/JavaScript/Reference/Global_Objects/FinalizationRegistry/cleanupSome +tags: + - FinalizationRegistry + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/FinalizationRegistry/cleanupSome +--- +<div>{{JSRef}}</div> + +<p><strong>cleanupSome()</strong> メソッドは、 {{jsxref("FinalizationRegistry")}} 内のオブジェクトのうち、まだコールバックが呼ばれていないが回収されているオブジェクトの数が実装で選択された場合に、クリーンアップコールバックを起動します。このメソッドはオプションです。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><code><var>registry</var>.cleanupSome([<var>callback</var>]);</code> +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>callback</var></code> {{optional_inline}}</dt> + <dd>この <code>cleanupSome</code> への呼び出しによって起動されるコールバックだけに使用するコールバックを指定します。指定した場合、このコールバックは <code>FinalizationRegistry</code> で作成されたものの代わりに使用されます。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><code>undefined</code> です。</p> + +<h2 id="Notes" name="Notes">注</h2> + +<p>通常、この関数を呼び出すことはありません。コールバックを適切に行うためには、 JavaScript エンジンのガベージコレクターに任せてください。この関数は主に、イベントループを発生させない、通常の JavaScript コードよりも WebAssembly で出てくる可能性の高い、長期に実行されるコードに対応するために存在します。また、コールバックが呼び出されない場合があることにも注意してください (例えば、ターゲットが回収されたレジストリ項目が存在しない場合)。</p> + +<p>レジストリからクリーンアップされる (クリーンアップコールバックを呼び出す) 回収オブジェクトの項目数は、実装で定義されています。実装によっては、対象となる項目を一つだけ削除したり、対象となるすべての項目を削除したり、あるいはその間のどこかで削除したりすることもあります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_cleanupSome" name="Using_cleanupSome">cleanupSome の使用</h3> + +<pre class="brush: js notranslate">registry.cleanupSome?.(heldValue => { + // ... +}); +</pre> + +<p>このメソッドはオプションであり、実装によってはこのメソッドを持たない場合があります。詳細は <a href="https://github.com/whatwg/html/issues/5446">HTML issue #5446</a> を参照してください。このメソッドはオプションなので、それを呼び出す前にそのメソッドが存在することを確認する必要があります。そのための一つの方法は、上の例のように<a href="/ja/docs/Web/JavaScript/Reference/Operators/Optional_chaining">オプション連結</a> (<code>?.</code>) を使用することです。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WeakRefs', '#sec-finalization-registry.prototype.cleanupSome', 'FinalizationRegistry.prototype.cleanupSome')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.FinalizationRegistry.cleanupSome")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("FinalizationRegistry")}}</li> +</ul> diff --git a/files/ja/orphaned/web/javascript/reference/operators/special/index.html b/files/ja/orphaned/web/javascript/reference/operators/special/index.html new file mode 100644 index 0000000000..cb220a008d --- /dev/null +++ b/files/ja/orphaned/web/javascript/reference/operators/special/index.html @@ -0,0 +1,5 @@ +--- +title: Special +slug: Web/JavaScript/Reference/Operators/Special +--- +This page was auto-generated because a user created a sub-page to this page. diff --git a/files/ja/orphaned/web/javascript/reference/operators/special_operators/index.html b/files/ja/orphaned/web/javascript/reference/operators/special_operators/index.html new file mode 100644 index 0000000000..febf3ac3d6 --- /dev/null +++ b/files/ja/orphaned/web/javascript/reference/operators/special_operators/index.html @@ -0,0 +1,5 @@ +--- +title: Special Operators +slug: Web/JavaScript/Reference/Operators/Special_Operators +--- +This page was auto-generated because a user created a sub-page to this page. diff --git a/files/ja/orphaned/web/manifest/serviceworker/index.html b/files/ja/orphaned/web/manifest/serviceworker/index.html new file mode 100644 index 0000000000..7215a877d7 --- /dev/null +++ b/files/ja/orphaned/web/manifest/serviceworker/index.html @@ -0,0 +1,77 @@ +--- +title: serviceworker +slug: Web/Manifest/serviceworker +tags: + - Manifest + - ServiceWorker + - Web + - マニフェスト +translation_of: Web/Manifest/serviceworker +--- +<div>{{QuickLinksWithSubpages("/ja/docs/Web/Manifest")}}</div> + +<div>{{obsolete_header}}</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">型</th> + <td><code>Object</code></td> + </tr> + <tr> + <th scope="row">必須</th> + <td>いいえ</td> + </tr> + </tbody> +</table> + +<p><dfn><code>serviceworker</code></dfn> メンバーは開発者が PWA を制御するためにインストールする<a href="/en-US/docs/Web/API/Service_Worker_API">サービスワーカー</a>を記述します。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: json">"serviceworker": { + "src": "./serviceworker.js", + "scope": "/app", + "type": "", + "update_via_cache": "none" +} +</pre> + +<h2 id="Values" name="Values">値</h2> + +<p>サービスワーカーには以下の値が含まれます (<code>src</code> のみが必須です)。</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col">メンバー</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>src</code></td> + <td>サービスワーカーのスクリプトのダウンロード元となる URL。これだけが <code>serviceworker</code> メンバーで必須です。</td> + </tr> + <tr> + <td><code>scope</code></td> + <td>サービスワーカーの登録スコープを定義する URL を表す文字列で、サービスワーカーが制御できる URL の範囲を表します。これは通常、アプリケーションのベース URL からの相対 URL です。既定では、サービスワーカー登録のスコープ値は、サービスワーカーのスクリプトが置かれているディレクトリに設定されています。</td> + </tr> + <tr> + <td><code>type</code></td> + <td>?</td> + </tr> + <tr> + <td><code>update_via_cache</code></td> + <td> + <p>ユーザーエージェントがサービスワーカーを読み込むときにキャッシュを回避するかどうかです。</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.manifest.serviceworker")}}</p> diff --git a/files/ja/orphaned/web/security/information_security_basics/index.html b/files/ja/orphaned/web/security/information_security_basics/index.html new file mode 100644 index 0000000000..4eaeff0350 --- /dev/null +++ b/files/ja/orphaned/web/security/information_security_basics/index.html @@ -0,0 +1,39 @@ +--- +title: 情報セキュリティの基本 +slug: Web/Security/Information_Security_Basics +tags: + - Beginner + - Landing + - Security + - セキュリティ +translation_of: Web/Security/Information_Security_Basics +--- +<p><span class="seoSummary">情報セキュリティを基本的に理解しておくことは、ソフトウェアやサイトが危険で脆弱なままで、資産を奪ったりその他の悪意の理由のために弱点を悪用されるのを防ぐのに役立ちます。これらの記事は知るべきことを学ぶのに役立ちます。</span> この情報から、ウェブ開発を通じて、またそれ以外のコンテンツのデプロイにおいても、セキュリティの役割と重要性に気づくでしょう。</p> + +<dl> + <dt><a href="/ja/docs/Web/Security/Information_Security_Basics/Confidentiality,_Integrity,_and_Availability">機密性、完全性、可用性</a></dt> + <dd>セキュリティを理解する上で絶対的な基礎となる、セキュリティの第一の目的を説明します。</dd> + <dt><a href="/ja/docs/Web/Security/Information_Security_Basics/Security_Controls">セキュリティの制御</a></dt> + <dd>セキュリティ制御の主要なカテゴリを定義し、潜在的な欠点を議論します。</dd> + <dt><a href="/ja/docs/Web/Security/Information_Security_Basics/TCP_IP_Security">TCP/IP セキュリティ</a></dt> + <dd>SSL のセキュリティの考慮事項に焦点を当てた TCP/IP モデルの概要です。</dd> + <dt><a href="/ja/docs/Web/Security/Information_Security_Basics/Threats">脅威</a></dt> + <dd>主要な脅威の概念を簡単に案内します。</dd> +</dl> + +<dl> + <dt><a href="/ja/docs/Web/Security/Information_Security_Basics/Vulnerabilities">脆弱性</a></dt> + <dd>主要な分野の脆弱性を定義し、すべてのソフトウェアの脆弱性の存在を議論します。</dd> +</dl> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Mozilla/Security">ブラウザーセキュリティ</a></li> + <li><a href="/ja/docs/Web/Security">ウェブセキュリティ</a></li> + <li><a href="/ja/docs/Web/Security/Securing_your_site">サイトを安全にする</a></li> + <li><a href="/ja/docs/Security/Firefox_Security_Basics_For_Developers">開発者向け Firefox セキュリティの基本</a></li> + <li><a href="/ja/docs/Web/Privacy">プライバシー、アクセス制限、情報セキュリティ</a></li> +</ul> + +<p>{{QuickLinksWithSubpages("/ja/docs/Web/Security")}}</p> diff --git a/files/ja/orphaned/web/specification_list/index.html b/files/ja/orphaned/web/specification_list/index.html new file mode 100644 index 0000000000..fb1ee99700 --- /dev/null +++ b/files/ja/orphaned/web/specification_list/index.html @@ -0,0 +1,614 @@ +--- +title: Specification List +slug: Web/Specification_list +translation_of: Web/Specification_list +--- +<p>Open Webの基盤は幾つもの仕様書によって定義されています。このページではそれらの仕様書をリストしています。</p> + +<p>The Open Web Platform is defined in numerous specifications. This page lists these specifications, as well as links to MDN's documentation (including both tutorials and reference content), and links to status documentation about how complete our documentation project is in that topic.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">状態</th> + <th scope="col">API Introduction & Landing pages</th> + <th scope="col">Tutorial</th> + <th scope="col">Reference</th> + <th scope="col">Doc status</th> + </tr> + </thead> + <tbody> + <tr> + <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">HTML</a> (one page)<br> + {{ SpecName("HTML WHATWG") }}<br> + </td> + <td>{{ Spec2("HTML WHATWG") }}</td> + <td> </td> + <td> + <ul> + <li>Constraint Validation API</li> + <li>Microdata API</li> + <li>Browsing context (that is <code>_blank</code>, ...)</li> + <li>Session History</li> + <li><a href="/en-US/docs/HTML/Using_the_application_cache" title="/en-US/docs/HTML/Using_the_application_cache">Using the application cache</a></li> + <li>Drag and Drop</li> + <li>Using scoped stylesheet</li> + <li><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history">Using the History API</a></li> + <li><a href="/en-US/docs/Online_and_offline_events" title="/en-US/docs/Online_and_offline_events">Online and offline events</a></li> + <li><a href="/en-US/docs/Web/Guide/DOM/The_structured_clone_algorithm" title="/en-US/docs/Web/Guide/DOM/The_structured_clone_algorithm">The structured clone algorithm</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Using_data_attributes" title="/en-US/docs/Web/Guide/HTML/Using_data_attributes">Using data attributes</a></li> + </ul> + </td> + <td> + <p>The <a href="/en-US/docs/HTML/Element" title="/en-US/docs/HTML/Element">HTML Elements</a>.<br> + <em>HTML element-related interfaces:</em><br> + {{domxref("HTMLElement")}} {{domxref("HTMLUnknownElement")}} {{domxref("HTMLHtmlElement")}} {{domxref("HTMLHeadElement")}} {{domxref("HTMLTitleElement")}} {{domxref("HTMLBaseElement")}} {{domxref("HTMLLinkElement")}} {{domxref("HTMLMetaElement")}} {{domxref("HTMLStyleElement")}} {{domxref("HTMLScriptElement")}} {{domxref("HTMLBodyElement")}} {{domxref("HTMLHeadingElement")}} {{domxref("HTMLParagraphElement")}} {{domxref("HTMLHRElement")}} {{domxref("HTMLPreElement")}} {{domxref("HTMLQuoteElement")}} {{domxref("HTMLOListElement")}} {{domxref("HTMLUListElement")}} {{domxref("HTMLLIElement")}} {{domxref("HTMLDListElement")}} {{domxref("HTMLDivElement")}} {{domxref("HTMLAnchorElement")}} {{domxref("HTMLDataElement")}} {{domxref("HTMLTimeElement")}} {{domxref("HTMLSpanElement")}} {{domxref("HTMLBRElement")}} {{domxref("HTMLModElement")}} {{domxref("HTMLImageElement")}} {{domxref("HTMLIFrameElement")}} {{domxref("HTMLEmbedElement")}} {{domxref("HTMLObjectElement")}} {{domxref("HTMLParamElement")}} {{domxref("HTMLVideoElement")}} {{domxref("HTMLAudioElement")}} {{domxref("HTMLMediaElement")}} {{domxref("HTMLSourceElement")}} {{domxref("HTMLTrackElement")}} {{domxref("HTMLCanvasElement")}} {{domxref("HTMLMapElement")}} {{domxref("HTMLAreaElement")}} {{domxref("HTMLTableElement")}} {{domxref("HTMLTableCaptionElement")}} {{domxref("HTMLTableCellElement")}} {{domxref("HTMLTableColElement")}} {{domxref("HTMLTableSectionElement")}} {{domxref("HTMLTableRowElement")}} {{domxref("HTMLTableDataCellElement")}} {{domxref("HTMLTableHeaderCellElement")}} {{domxref("HTMLFormElement")}} {{domxref("HTMLFieldSetElement")}} {{domxref("HTMLLegendElement")}} {{domxref("HTMLInputElement")}} {{domxref("HTMLButtonElement")}} {{domxref("HTMLSelectElement")}} {{domxref("HTMLDataListElement")}} {{domxref("HTMLOptGroupElement")}} {{domxref("HTMLOptionElement")}} {{domxref("HTMLTextAreaElement")}} {{domxref("HTMLKeygenElement")}} {{domxref("HTMLOutputElement")}} {{domxref("HTMLProgressElement")}} {{domxref("HTMLMeterElement")}} {{domxref("HTMLDetailsElement")}} {{domxref("HTMLMenuElement")}} {{domxref("HTMLMenuItemElement")}} {{domxref("HTMLDialogElement")}} {{domxref("HTMLAppletElement")}} (obsolete) {{domxref("HTMLMarqueeElement")}} (obsolete) {{domxref("HTMLFrameSetElement")}} (obsolete) {{domxref("HTMLFrameElement")}} (obsolete) {{domxref("HTMLDirectoryElement")}} (obsolete) {{domxref("HTMLFontElement")}} (obsolete)<br> + <em>Other DOM-related interfaces/events/... :</em><br> + {{domxref("HTMLAllCollection")}} {{domxref("HTMLFormControlsCollection")}} {{domxref("HTMLOptionsCollection")}} {{domxref("HTMLPropertiesCollection")}} {{domxref("RadioNodeList")}} {{domxref("DOMStringMap")}} {{domxref("DOMElementMap")}} {{domxref("ImageData")}} {{domxref("ImageBitmap")}} {{domxref("CanvasImageSource")}} {{domxref("WindowEventHandlers")}} {{domxref("Document.location")}} {{domxref("Document.domain")}} {{domxref("Document.referrer")}} {{domxref("Document.cookie")}} {{domxref("Document.lastModified")}} {{domxref("Document.readyState")}} <code>Document getter? </code>{{domxref("Document.title")}} {{domxref("Document.dir")}} {{domxref("Document.body")}} {{domxref("Document.head")}} {{domxref("Document.images")}} {{domxref("Document.embeds")}} {{domxref("Document.plugins")}} {{domxref("Document.forms")}} {{domxref("Document.scripts")}} {{domxref("Document.getElementsByName()")}} {{domxref("Document.getItems()")}} {{domxref("Document.cssElementMap")}} {{domxref("Document.currentScript")}} {{domxref("Document.open()")}} (2x) {{domxref("Document.close()")}} {{domxref("Document.write()")}} {{domxref("Document.writeln()")}} {{domxref("Document.defaultView")}} {{domxref("Document.activeElement")}} {{domxref("Document.hasFocus()")}} {{domxref("Document.designMode")}} {{domxref("Document.execCommand()")}} {{domxref("Document.queryCommandEnabled()")}} {{domxref("Document.queryCommandIndeterm()")}} {{domxref("Document.queryCommandState()")}} {{domxref("Document.queryCommandValue()")}} {{domxref("Document.commands")}} {{domxref("Document.onreadystatechange")}} (+Document obsolete members) {{event("readystatechange")}} (<code>Event</code>|<code>Document</code>) {{event("load")}} (<code>Event</code>|<code>XMLDocument</code>, <code>HTMLLinkElement</code>, <code>HTMLStyleElement</code>, <code>HTMLScriptElement</code>, <code>HTMLImageElement</code>) {{event("load")}} (<code>ProgressEvent</code>|<code>HTMLImageElement</code>){{event("click")}} (<code>Event</code>|<em>any interactive element</em>) {{event("error")}} (<code>Event</code>|<code>HTMLLinkElement</code>, <code>HTMLStyleElement</code>, <code>HTMLScriptElement</code>, <code>HTMLImageElement</code>) {{event("beforescriptexecute")}} (<code>Event</code>|<code>HTMLScriptElement</code>) {{event("afterscriptexecute")}} (<code>Event</code>|<code>HTMLScriptElement</code>) {{event("loadstart")}} (<code>ProgressEvent</code>|<code>HTMLImageElement</code>) {{event("loadend")}} (<code>Event</code>|<code>HTMLImageElement</code>) {{event("loadend")}} (<code>ProgressEvent</code>|<code>HTMLImageElement</code>) {{domxref("Window")}} {{domxref("GlobalEventHandlers")}} {{domxref("MediaError")}} {{domxref("AudioTrackList")}} {{domxref("VideoTrackList")}} {{domxref("AudioTrack")}} {{domxref("VideoTrack")}} {{domxref("MediaController")}} {{event("playing")}} (event) {{event("waiting")}} (event) {{event("ended")}} (event) {{event("emptied")}} (event) {{event("loadedmetadata")}} (event) {{event("loadeddata")}} (event) {{event("canplay")}} (event) {{event("canplaythrough")}} (event) {{event("durationchange")}} (event) {{event("timeupdate")}} (event) {{event("play")}} (event) {{event("pause")}} (event) {{event("ratechange")}} (event) {{event("valuechange")}} (event) {{domxref("TextTrackList")}} {{event("addtrack")}} (event) {{event("removetrack")}} (event) {{domxref("TextTrack")}} {{event("cuechange")}} (event) {{domxref("TextTrackCueList")}} {{domxref("TextTrackCue")}} {{event("enter")}} (event) {{event("exit")}} (event) {{domxref("TimeRanges")}} {{domxref("TrackEvent")}} {{domxref("CanvasProxy")}} {{domxref("CanvasRenderingContext2D")}} {{domxref("CanvasGradient")}} {{domxref("CanvasPattern")}} {{domxref("TextMetrics")}} {{domxref("DrawingStyle")}} {{domxref("CanvasDrawingStyles")}} {{domxref("Path")}} {{domxref("CanvasPathMethods")}} {{domxref("Screen.canvasResolution")}} {{domxref("RelatedEvent")}} {{cssxref("anchor-point")}} {{domxref("BarProp")}} {{domxref("Location")}} {{domxref("History")}} {{domxref("PopStateEvent")}} {{event("popstate")}} (event) {{domxref("PageTransitionEvent")}} {{event("pageshow")}} (event) {{event("pagehide")}} (event) {{domxref("HashChangeEvent")}} {{event("hashchange")}} (event) {{domxref("BeforeUnloadEvent")}} {{event("checking")}} (event, manifest) {{event("noupdate")}} (event, manifest) {{event("downloading")}} (event, manifest) {{event("progress")}} (event, manifest) {{event("cached")}} (event, manifest) {{event("updateready")}} (event, manifest) {{event("obsolete")}} (event, manifest) {{event("error")}} (event, manifest) {{domxref("WindowProxy")}} (special) {{domxref("ValidityState")}} {{domxref("ApplicationCache")}} {{domxref("NavigatorOnLine")}} {{domxref("WindowTimers")}} {{domxref("WindowBase64")}} {{domxref("WindowModal")}} {{domxref("Navigator")}} {{domxref("NavigatorID")}} {{domxref("NavigatorLanguage")}} {{domxref("NavigatorContentUtils")}} {{domxref("NavigatorStorageUtils")}} {{domxref("NavigatorPlugins")}} {{domxref("PluginArray")}} {{domxref("MimeTypeArray")}} {{domxref("Plugin")}} {{domxref("MimeType")}} {{domxref("External")}} {{domxref("ImageBitmapFactories")}} {{domxref("Transferable")}} {{domxref("DataTransfer")}} {{domxref("DataTransferItemList")}} {{domxref("DataTransferItem")}} {{domxref("DragEvent")}} {{domxref("ErrorEvent")}} {{domxref("MessageEvent")}} {{domxref("MessageChannel")}} {{domxref("MessagePort")}} {{event("message")}} (event)<br> + <em>Events on any <code>HTML*Element</code>, <code>Document</code> and <code>Window</code> objects:</em><br> + {{event("abort")}} {{event("cancel")}} {{event("canplay")}} {{event("canplaythrough")}} {{event("change")}} {{event("click")}} {{event("close")}} {{event("contextmenu")}} {{event("cuechange")}} {{event("dblclick")}} {{event("drag")}} {{event("dragend")}} {{event("dragenter")}} {{event("dragexit")}} {{event("dragleave")}} {{event("dragover")}} {{event("dragstart")}} {{event("drop")}} {{event("durationchange")}} {{event("emptied")}} {{event("ended")}} {{event("input")}} {{event("invalid")}} {{event("keydown")}} {{event("keypress")}} {{event("keyup")}} {{event("loadeddata")}} {{event("loadedmetadata")}} {{event("loadstart")}} {{event("mousedown")}} {{event("mouseenter")}} {{event("mouseleave")}} {{event("mousemove")}} {{event("mouseout")}} {{event("mouseover")}} {{event("mouseup")}} {{event("mousewheel")}} {{event("pause")}} {{event("play")}} {{event("playing")}} {{event("progress")}} {{event("ratechange")}} {{event("reset")}} {{event("seeked")}} {{event("seeking")}} {{event("select")}} {{event("show")}} {{event("sort")}} {{event("stalled")}} {{event("submit")}} {{event("submit")}} {{event("suspend")}} {{event("timeupdate")}} {{event("volumechange")}} {{event("waiting")}}<br> + Events on any <code>HTML*Element</code> (except <code>HTMLBodyElement and HTMLFrameSetElement</code>), <code>Document</code> and <code>Window</code> objects:<br> + {{event("blur")}} {{event("error")}} {{event("focus")}} {{event("load")}} {{event("scroll")}}<br> + <em>Events on the <code>Window</code> objects:</em><br> + {{event("afterprint")}} {{event("beforeprint")}} {{event("beforeunload")}} {{event("hashchange")}} {{event("message")}} {{event("offline")}} {{event("online")}} {{event("pagehide")}} {{event("pageshow")}} {{event("popstate")}} {{event("resize")}} {{event("storage")}} {{event("unload")}}<br> + <em>Events on the </em><code>Document</code><em> objects: </em>{{event("readystatechange")}}</p> + </td> + <td><a href="/en-US/docs/MDN/Doc_status/API/HTML_API">HTML API</a></td> + </tr> + <tr> + <td> CSS</td> + <td><em>Variable</em></td> + <td><a href="/en-US/docs/CSS/Getting_Started" title="/en-US/docs/CSS/Getting_Started">Getting Started</a></td> + <td>CSS Tutorials</td> + <td>The <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a> page list them & the <a href="/en-US/docs/CSS/CSS_Reference" title="/en-US/docs/CSS/CSS_Reference">CSS Reference</a> has the list of properties, functions, pseudo-classes and pseudo-elements. Some specifications also add APIs.<br> + <em>{{SpecName("CSS3 Fonts")}}</em>: {{domxref("CSSFontFaceRule")}} {{domxref("CSSFontFeatureValuesRule")}} {{domxref("Document.fontLoader")}} {{domxref("CSSFontFaceLoadEvent")}} {{domxref("FontLoader")}} {{event("loading")}} (event) {{event("loadingdone")}} (event) {{event("loadstart")}} (event) {{event("load")}} (evnet) {{event("error")}} (event)<br> + <em>{{SpecName("CSS3 Transitions")}}</em>: {{domxref("TransitionEvent")}} {{event("transitionend")}} (event)<br> + <em>{{SpecName("CSS3 Animations")}}</em>: {{domxref("AnimationEvent")}} {{event("animationstart")}} (event) {{event("animationend")}} (event) {{event("animationiteration")}} (event) {{domxref("CSSKeyframeRule")}} {{domxref("CSSKeyframesRule")}}<br> + <em>{{SpecName("CSS3 Conditional")}}</em>: {{domxref("CSSGroupingRule")}} {{domxref("CSSConditionRule")}} {{domxref("CSSMediaRule")}} (new inheritance) {{domxref("CSSSupportsRule")}} {{domxref("CSS")}}<br> + <em>{{SpecName("CSS3 Device")}}</em>: {{domxref("CSSViewportRule")}}<br> + <em>{{SpecName("CSS3 Variables")}}</em>: {{domxref("CSSStyleDeclaration.CSSVariablesDeclaration")}} {{domxref("CSSVariablesDeclaration")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/CSSOM">CSSOM</a></td> + </tr> + <tr> + <td>{{SpecName("HTML5 Web Messaging")}} (also in WHATWG HTML)</td> + <td>{{Spec2("HTML5 Web Messaging")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("MessageEvent")}} {{domxref("Window.postMessage")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/HTML_API">HTML API</a></td> + </tr> + <tr> + <td>{{SpecName("ES5.1")}}<br> + {{SpecName("ES6")}}<br> + {{SpecName("ES Int 1.0")}}</td> + <td>{{Spec2('ES5.1')}}<br> + {{Spec2('ES6')}}<br> + {{Spec2('ES Int 1.0')}}</td> + <td> </td> + <td> </td> + <td><a href="/en-US/docs/Web/JavaScript/Reference">JavaScript reference</a></td> + <td><a href="/en-US/docs/MDN/Doc_status/JavaScript">JavaScript</a></td> + </tr> + <tr> + <td> + <p>{{SpecName("SVG1.1")}}</p> + </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td><a href="/en-US/docs/MDN/Doc_status/SVG">SVG</a></td> + </tr> + <tr> + <td>WebGL</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td><a href="/en-US/docs/MDN/Doc_status/API/HTML_API">HTML API</a></td> + </tr> + <tr> + <td>{{SpecName("MathML3")}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td><a href="/en-US/docs/MDN/Doc_status/MathML">MathML</a></td> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG") }}</td> + <td>{{ Spec2("DOM WHATWG") }}</td> + <td><a href="/en-US/docs/Gecko_DOM_Reference" title="/en-US/docs/Gecko_DOM_Reference">DOM Reference </a></td> + <td> </td> + <td>{{ domxref("Attr") }} {{ domxref("CharacterData") }} {{ domxref("ChildNode") }} {{ domxref("Comment") }} {{ domxref("CustomEvent") }} {{ domxref("Document")}} {{ domxref("DocumentFragment") }} {{ domxref("DocumentType") }} {{ domxref("DOMError") }} {{ domxref("DOMImplementation") }} {{ domxref("DOMSettableTokenList") }} {{ domxref("DOMTokenList") }} {{ domxref("Element")}} {{ domxref("Event")}} {{ domxref("EventTarget")}} {{ domxref("Promise")}} {{ domxref("PromiseResolver")}} {{ domxref("HTMLCollection") }} {{ domxref("MutationObserver")}} {{ domxref("MutationRecord")}} {{ domxref("Node") }} {{ domxref("NodeFilter") }} {{ domxref("NodeIterator") }} {{ domxref("NodeList") }} {{ domxref("ParentNode")}} {{ domxref("ProcessingInstruction") }} {{ domxref("Text") }} {{ domxref("TimeRanges") }} {{ domxref("Treewalker") }} {{ domxref("XMLDocument")}} {{ domxref("Range") }}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> + </tr> + <tr> + <td>{{SpecName("UI Events")}}</td> + <td>{{Spec2("UI Events")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("UIEvent")}} {{domxref("FocusEvent")}} {{domxref("MouseEvent")}} {{domxref("WheelEvent")}} {{domxref("KeyboardEvent")}} {{domxref("CompositionEvent")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> + </tr> + <tr> + <td>{{SpecName("CSSOM")}}</td> + <td>{{ Spec2("CSSOM")}}</td> + <td><a href="/en-US/docs/Web/CSSOM" title="/en-US/docs/Web/CSSOM">CSSOM</a></td> + <td> </td> + <td>{{domxref("MediaList")}} {{domxref("Stylesheet")}} {{domxref("CSSStylesheet")}} {{domxref("StylesheetList")}} {{domxref("Document.styleSheets")}} {{domxref("Document.selectedStyleSheetSet")}} {{domxref("Document.lastStyleSheetSet")}} {{domxref("Document.preferredStyleSheetSet")}} {{domxref("Document.styleSheetSets")}} {{domxref("Document.enableStyleSheetsForSet()")}} {{domxref("LinkStyle")}} {{domxref("CSSRuleList")}} {{domxref("CSSRule")}} {{domxref("CSSCharsetRule")}} {{domxref("CSSImportRule")}} {{domxref("CSSMediaRule")}} {{domxref("CSSFontFaceRule")}} {{domxref("CSSPageRule")}} {{domxref("CSSNamespaceRule")}} {{domxref("CSSStyleDeclaration")}} {{domxref("ElementCSSInlineStyle")}} {{domxref("Window.getComputedStyle()")}} {{domxref("Window.getDefaultComputedStyle()")}} + <p>{{domxref("CSSMarginRule")}}</p> + </td> + <td><a href="/en-US/docs/MDN/Doc_status/API/CSSOM">CSSOM</a></td> + </tr> + <tr> + <td>{{SpecName("CSSOM View")}}</td> + <td>{{ Spec2("CSSOM View")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("Window.matchMedia()")}} {{domxref("Window.screen")}} {{domxref("Window.innerHeight")}} {{domxref("Window.innerWidth")}} {{domxref("Window.scrollX")}} {{domxref("Window.scrollY")}} {{domxref("Window.pageXOffset")}} {{domxref("Window.pageYOffset")}} {{domxref("Window.scroll()")}} {{domxref("Window.scrollTo()")}} {{domxref("Window.scrollBy()")}} {{domxref("Window.screenX")}} {{domxref("Window.screenY")}} {{domxref("Window.outerWidth")}} {{domxref("Window.outerHeight")}} {{domxref("MediaQueryList")}} {{domxref("Screen")}} {{domxref("Document.elementFromPoint()")}} {{domxref("Document.caretPositionFromPoint()")}} {{domxref("CaretPosition")}} {{domxref("MediaList")}} {{domxref("MediaQueryListListener")}} {{domxref("HTMLElement.offsetParent")}} {{domxref("HTMLElement.offsetTop")}} {{domxref("HTMLElement.offsetLeft")}} {{domxref("HTMLElement.offsetWidth")}} {{domxref("HTMLElement.offsetRight")}} {{domxref("Element.getClientRects()")}} {{domxref("Element.getBoundingClientRect()")}} {{domxref("Element.scrollIntoView()")}} {{domxref("Element.scrollTop")}} {{domxref("Element.scrollLeft")}} {{domxref("Element.scrollWidth")}} {{domxref("Element.scrollHeight")}} {{domxref("Element.clientTop")}} {{domxref("Element.clientLeft")}} {{domxref("Element.clientWidth")}} {{domxref("Element.clientHeight")}} {{domxref("Range.getClientRects()")}} {{domxref("Range.getBoundingClientRect()")}} {{domxref("MouseEvent.screenX")}} {{domxref("MouseEvent.screenY")}} {{domxref("MouseEvent.pageX")}} {{domxref("MouseEvent.pageY")}} {{domxref("MouseEvent.clientX")}} {{domxref("MouseEvent.clientY")}} {{domxref("MouseEvent.x")}} {{domxref("MouseEvent.y")}} {{domxref("MouseEvent.offsetX")}} {{domxref("MouseEvent.offsetY")}} {{domxref("ClientRectList")}} {{domxref("ClientRect")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/CSSOM">CSSOM</a></td> + </tr> + <tr> + <td>{{SpecName("Geometry Interfaces")}}</td> + <td>{{Spec2("Geometry Interfaces")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("DOMPointReadOnly")}} {{domxref("DOMPoint")}} {{domxref("DOMRect")}} {{domxref("DOMRectReadOnly")}} {{domxref("DOMRectList")}} {{domxref("DOMQuad")}} {{domxref("DOMMatrixReadOnly")}} {{domxref("DOMMatrix")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> + </tr> + <tr> + <td>{{SpecName("DOM Parsing")}}</td> + <td>{{ Spec2("DOM Parsing")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("DOMParser")}} {{domxref("XMLSerializer")}} {{domxref("Element.innerHTML")}} {{domxref("Element.outerHTML")}} {{domxref("Element.insertAdjacentHTML")}} {{domxref("Text.serializeAsCDATA")}} {{domxref("Range.createContextualFragment")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> + </tr> + <tr> + <td>{{SpecName("Web Workers")}} (also in WHATWG HTML)</td> + <td>{{ Spec2("Web Workers")}}</td> + <td> </td> + <td><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers" title="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></td> + <td>{{domxref("WorkerGlobalScope")}} {{domxref("DedicatedWorkerGlobalScope")}} {{domxref("SharedWorkerGlobalScope")}} {{domxref("AbstractWorker")}} {{domxref("Worker")}} {{domxref("SharedWorker")}} {{domxref("WorkerNavigator")}} {{domxref("WorkerUtils")}} {{domxref("WorkerLocation")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/WebWorkers">WebWorkers</a></td> + </tr> + <tr> + <td>{{SpecName("Element Traversal")}}</td> + <td>{{Spec2("Element Traversal")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("ElementTraversal")}} {{domxref("Element")}} (new inheritance)</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> + </tr> + <tr> + <td>{{SpecName("File API")}}</td> + <td>{{Spec2("File API")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("File")}} {{domxref("Blob")}} {{domxref("FileList")}} {{domxref("FileReader")}} {{domxref("FileReaderSync")}} {{domxref("URL.createObjectURL")}} {{domxref("URL.revokeObjectURL")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/File_API">File API</a></td> + </tr> + <tr> + <td>{{SpecName("Fullscreen")}}</td> + <td>{{Spec2("Fullscreen")}}</td> + <td> </td> + <td><a href="/en-US/docs/DOM/Using_fullscreen_mode" title="/en-US/docs/DOM/Using_fullscreen_mode">Using fullscreen mode</a></td> + <td>{{cssxref(":fullscreen")}} {{cssxref("::backdrop")}} {{domxref("Element.requestFullscreen()")}} {{domxref("Document.fullscreenEnabled")}} {{domxref("Document.fullscreenElement")}} {{domxref("Document.exitFullscreen()")}} {{domxref("Document.onfullscreenchange()")}} {{domxref("Document.onfullscreenerror()")}} {{event("fullscreenchange")}} (event) {{event("fullscreenerror")}} (event)</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/HTML_API">HTML API</a></td> + </tr> + <tr> + <td>{{SpecName("IndexedDB")}}</td> + <td>{{Spec2("IndexedDB")}}</td> + <td><a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a></td> + <td><a href="/en-US/docs/IndexedDB/Using_IndexedDB" title="/en-US/docs/IndexedDB/Using_IndexedDB">Using IndexedDB</a> <a href="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome" title="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome">Using IndexedDB in chrome</a></td> + <td>{{domxref("IDBDatabase")}} {{domxref("IDBObjectStore")}} {{domxref("IDBIndex")}} {{domxref("IDBRequest")}} {{domxref("IDBTransaction")}} {{domxref("IDBFactory")}} {{domxref("IDBKeyRange")}} {{domxref("IDBCursor")}} {{domxref("IDBObjectStoreParameters")}} {{domxref("IDBIndexParameters")}} {{domxref("IDBOpenDBRequest")}} {{domxref("IDBVersionChangeEvent")}} {{domxref("IDBEnvironment")}} {{domxref("Window")}} (new inheritance) {{domxref("WorkerUtils")}} (new inheritance) {{domxref("IDBCursorWithValue")}} {{domxref("IDBTransactionMode")}} {{domxref("IDBCursorWithValueSync")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/IndexedDB">IndexedDB</a></td> + </tr> + <tr> + <td>{{SpecName("Web Audio API")}}</td> + <td>{{Spec2("Web Audio API")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("AnalyserNode")}} {{domxref("AudioBuffer")}} {{domxref("AudioBufferSourceNode")}} {{domxref("AudioContext")}} {{domxref("AudioDestinationNode")}} {{domxref("AudioListener")}} {{domxref("AudioNode")}} {{domxref("AudioParam")}} {{event("audioprocess")}} (event) {{domxref("AudioProcessingEvent")}} {{domxref("BiquadFilterNode")}} {{domxref("ChannelMergerNode")}} {{domxref("ChannelSplitterNode")}} {{event("complete")}} (event) {{domxref("ConvolverNode")}} {{domxref("DelayNode")}}{{domxref("DynamicsCompressorNode")}} {{event("ended_(Web_Audio)", "ended")}} (event) {{domxref("GainNode")}} {{domxref("MediaElementAudioSourceNode")}} {{domxref("MediaStreamAudioDestinationNode")}} {{domxref("MediaStreamAudioSourceNode")}} {{domxref("OfflineAudioCompletionEvent")}} {{domxref("OfflineAudioContext")}} {{domxref("OscillatorNode")}} {{domxref("PannerNode")}}{{domxref("PeriodicWave")}} {{domxref("ScriptProcessorNode")}} {{domxref("WaveShaperNode")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/WebAudio">WebAudio</a></td> + </tr> + <tr> + <td>{{SpecName("WebRTC 1.0")}}</td> + <td>{{Spec2("WebRTC 1.0")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("RTCConfiguration")}} {{domxref("RTCIceServer")}} {{domxref("RTCPeerConnection")}} {{domxref("RTCError")}} {{domxref("RTCSdpError")}} {{domxref("RTCSessionDescription")}} {{domxref("RTCIceCandidate")}} {{domxref("RTCPeerConnectionIceEvent")}} {{domxref("RTCDataChannel")}} {{domxref("RTCDataChannelEvent")}} {{domxref("RTCDTMFSender")}} {{domxref("RTCToneChangeEvent")}} {{domxref("MediaStreamEvent")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/WebRTC">WebRTC</a></td> + </tr> + <tr> + <td>{{SpecName("Media Capture")}}</td> + <td>{{Spec2("Media Capture")}}</td> + <td> </td> + <td> </td> + <td>{{event("addtrack")}} (event) {{domxref("AudioStreamTrack")}} {{domxref("BlobEvent")}} {{event("ended (MediaStream)")}} (event) {{event("ended (MediaStreamTrack)")}} (event) {{domxref("MediaStream")}} {{domxref("MediaStreamConstraints")}} {{domxref("MediaStreamTrack")}} {{domxref("MediaStreamTrackEvent")}} {{domxref("MediaStreamTrackList")}} {{domxref("MediaTrackConstraints")}} {{event("muted")}} (event) {{domxref("NavigatorUserMedia")}} {{domxref("NavigatorUserMediaError")}} {{event("overconstrained")}} (event) {{event("removetrack")}} (event) {{event("started")}} (event) {{event("unmuted")}} (event) {{domxref("URL")}} {{domxref("VideoStreamTrack")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/WebRTC">WebRTC</a></td> + </tr> + <tr> + <td>{{SpecName("MediaStream Recording")}}</td> + <td>{{Spec2("MediaStream Recording")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("MediaRecorder")}} {{event("start")}} (event) {{event("stop")}} (event) {{event("dataavailable")}} (event) {{event("pause")}} (event) {{event("resume")}} (event) {{event("error")}} (event) {{event("warning")}} (event) {{domxref("BlobEvent")}} {{domxref("RecordingError")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/WebRTC">WebRTC</a></td> + </tr> + <tr> + <td>{{SpecName("Media Source Extensions")}}</td> + <td>{{Spec2("Media Source Extensions")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("MediaSource")}} {{domxref("SourceBuffer")}} {{event("updatestart")}} (event) {{event("update")}} (event) {{event("updateevent")}} (event) {{event("error")}} (event) {{event("abort")}} (event) {{domxref("SourceBufferList")}} {{event("addsourcebuffer")}} (event) {{event("removesourcebuffer")}} (event) {{domxref("VideoPlaybackQuality")}} {{domxref("URL.createObjectURL(MediaSource)")}} {{domxref("HTMLVideoElement.getVideoPlaybackQuality")}} {{domxref("AudioTrack.kind")}} {{domxref("AudioTrack.language")}} {{domxref("AudioTrack.sourceBuffer")}} {{domxref("VideoTrack.kind")}} {{domxref("VideoTrack.language")}} {{domxref("VideoTrack.sourceBuffer")}} {{domxref("TextTrack.kind")}} {{domxref("TextTrack.language")}} {{domxref("TextTrack.sourceBuffer")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("Pointer Lock")}}</td> + <td>{{Spec2("Pointer Lock")}}</td> + <td> </td> + <td><a href="/en-US/docs/WebAPI/Pointer_Lock" title="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock API</a></td> + <td>{{event("pointerlockchange")}} (event) {{event("pointerlockerror")}} (event) {{domxref("Element.requestPointerLock")}} {{domxref("Document.onpointerlockchange")}} {{domxref("Document.onpointerlockerror")}} {{domxref("Document.pointerLockElement")}} {{domxref("Document.exitPointerLock()")}} {{domxref("MouseEvent.movementX")}} {{domxref("MouseEvent.movementY")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> + </tr> + <tr> + <td>{{SpecName("Vibration API")}}</td> + <td>{{Spec2("Vibration API")}}</td> + <td> </td> + <td><a href="/en-US/docs/WebAPI/Vibration" title="/en-US/docs/WebAPI/Vibration">Vibration API</a></td> + <td>{{domxref("Navigator.vibrate()")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/Device_API">Device API</a></td> + </tr> + <tr> + <td>{{SpecName("Battery API")}}</td> + <td>{{Spec2("Battery API")}}</td> + <td><a href="/en-US/docs/WebAPI/Battery_Status" title="/en-US/docs/WebAPI/Battery_Status">Battery Status API</a></td> + <td> </td> + <td>{{domxref("Navigator.battery")}} {{domxref("BatteryManager")}} {{event("chargingchange")}} (event) {{event("chargingtimechange")}} (event) {{event("dischargingtimechange")}} (event) {{event("levelchange")}} (event)</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/Device_API">Device API</a></td> + </tr> + <tr> + <td>{{SpecName("Geolocation")}}</td> + <td>{{Spec2("Geolocation")}}</td> + <td> </td> + <td><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></td> + <td>{{domxref("NavigatorGeolocation")}} {{domxref("Geolocation")}} {{domxref("Navigator")}} (implements <code>NavigatorGeolocation</code>) {{domxref("Position")}} {{domxref("PositionOptions")}} {{domxref("Coordinates")}} {{domxref("PositionError")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/Device_API">Device API</a></td> + </tr> + <tr> + <td>{{SpecName("Device Orientation")}}</td> + <td>{{Spec2("Device Orientation")}}</td> + <td> </td> + <td> </td> + <td>{{event("deviceorientation")}} (event){{domxref("DeviceOrientationEvent")}} {{event("compassneedscalibration")}} (event) {{event("devicemotion")}} (event) {{domxref("DeviceMotionEvent")}} {{domxref("DeviceAcceleration")}} {{domxref("DeviceRotationRate")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/Device_API">Device API</a></td> + </tr> + <tr> + <td>{{SpecName("Screen Orientation")}}</td> + <td>{{Spec2("Screen Orientation")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("Screen.orientation")}} {{domxref("Screen.lockOrientation()")}}{{domxref("Screen.unlockOrientation()")}} {{domxref("Screen.onorientationchange")}} {{event("orientationchange")}} (event)</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/CSSOM">CSSOM</a></td> + </tr> + <tr> + <td>{{SpecName("Web Notifications")}}</td> + <td>{{Spec2("Web Notifications")}}</td> + <td> </td> + <td><a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Using Web notifications</a></td> + <td>{{domxref("Notification")}} {{event("click")}} (event) {{event("show")}} (event) {{event("error")}} (event) {{event("close")}} (event)</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/HTML_API">HTML API</a></td> + </tr> + <tr> + <td>{{SpecName("AmbientLight")}}</td> + <td>{{Spec2("AmbientLight")}}</td> + <td> </td> + <td><a href="/en-US/docs/WebAPI/Using_Light_Events" title="/en-US/docs/WebAPI/Using_Light_Events">Using light events</a></td> + <td>{{domxref("window.ondevicelight")}} {{domxref("DeviceLightEvent")}} {{event("devicelight")}} (event)</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/Device_API">Device API</a></td> + </tr> + <tr> + <td>{{SpecName("Proximity Events")}}</td> + <td>{{Spec2("Proximity Events")}}</td> + <td><a href="/en-US/docs/Web/API/Proximity_Events">Proximity Events</a></td> + <td> </td> + <td>{{domxref("window.ondeviceproximity")}} {{domxref("DeviceProximityEvent")}} {{event("deviceproximity")}} (event) {{domxref("window.onuserproximity")}} {{domxref("UserProximityEvent")}} {{event("userproximity")}} (event)</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/Device_API">Device API</a></td> + </tr> + <tr> + <td>{{SpecName("WebIDL")}}</td> + <td>{{Spec2("WebIDL")}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("XMLHttpRequest")}}</td> + <td>{{Spec2("XMLHttpRequest")}}</td> + <td> </td> + <td><a href="/en-US/docs/Web/Guide/Using_FormData_Objects" title="/en-US/docs/Web/Guide/Using_FormData_Objects">Using FormData objects</a></td> + <td>{{domxref("XMLHttpRequest")}} {{domxref("XMLHttpRequestEventTarget")}} {{domxref("XMLHttpRequestUpload")}} {{event("loadstart")}} (event) {{event("error")}} (event) {{event("timeout")}} (event) {{event("progress")}} (event) {{event("abort")}} (event) {{event("load")}} (event) {{event("loadend")}} (event) {{event("readystatechange")}} (event) {{domxref("FormData")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/HTML_API">HTML API</a></td> + </tr> + <tr> + <td>{{SpecName("Highres Time")}}</td> + <td>{{Spec2("Highres Time")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("DOMHighResTimestamp")}} {{domxref("Performance.now()")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> + </tr> + <tr> + <td>{{SpecName("Websockets")}} (also in WHATWG HTML)</td> + <td>{{Spec2("Websockets")}}</td> + <td><a href="/en-US/docs/WebSockets" title="/en-US/docs/WebSockets">WebSockets</a> <a href="/en-US/docs/WebSockets/WebSockets_reference" title="/en-US/docs/WebSockets/WebSockets_reference">WebSockets reference</a></td> + <td><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications" title="/en-US/docs/WebSockets/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></td> + <td>{{domxref("WebSocket")}} {{event("open")}} (event) {{event("message")}} (event) {{event("error")}} (event) {{event("close")}} (event) {{domxref("CloseEvent")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/WebSockets">WebSockets</a></td> + </tr> + <tr> + <td>{{SpecName("Page Visibility API")}}</td> + <td>{{Spec2("Page Visibility API")}}</td> + <td> </td> + <td><a href="/en-US/docs/DOM/Using_the_Page_Visibility_API" title="/en-US/docs/DOM/Using_the_Page_Visibility_API">Using the Page Visibility API</a></td> + <td>{{domxref("Document.hidden")}} {{domxref("Document.visibilityState")}} {{event("visibilitychange")}} (event)</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> + </tr> + <tr> + <td>{{SpecName("RequestAnimationFrame")}}</td> + <td>{{Spec2("RequestAnimationFrame")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("Window.requestAnimationFrame()")}} {{domxref("Window.cancelAnimationFrame()")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/HTML_API">HTML API</a></td> + </tr> + <tr> + <td>{{SpecName("Server-sent events")}} (also in WHATWG HTML)</td> + <td>{{Spec2("Server-sent events")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("EventSource")}} {{event("open")}} (event) {{event("error")}} (event) {{event("message")}} (event)</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/HTML_API">HTML API</a></td> + </tr> + <tr> + <td>{{SpecName("Network Information")}}</td> + <td>{{Spec2("Network Information")}}</td> + <td> </td> + <td><a href="/en-US/docs/WebAPI/Network_Information" title="/en-US/docs/WebAPI/Network_Information">Network Information</a></td> + <td>{{domxref("NetworkInformation")}} {{domxref("Connection")}} {{domxref("Navigator")}} (implements <code>NetworkInformation</code>) {{event("change")}} (event)</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/Device_API">Device API</a></td> + </tr> + <tr> + <td>{{SpecName("Web Storage")}} (also in WHATWG HTML)</td> + <td>{{Spec2("Web Storage")}}</td> + <td> </td> + <td><a href="/en-US/docs/Web/Guide/DOM/Storage" title="/en-US/docs/Web/Guide/DOM/Storage">DOM Storage Guide</a></td> + <td>{{domxref("Storage")}} {{domxref("WindowSessionStorage")}} {{domxref("WindowLocalStorage")}} {{event("storage")}} {{domxref("StorageEvent")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/WebStorage">WebStorage</a></td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 1")}}</td> + <td>{{Spec2("Selectors API Level 1")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("Document.querySelector()")}} {{domxref("Document.querySelectorAll()")}} {{domxref("DocumentFragment.querySelector()")}} {{domxref("DocumentFragment.querySelectorAll()")}} {{domxref("Element.querySelector()")}} {{domxref("Element.querySelectorAll()")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 2")}}</td> + <td>{{Spec2("Selectors API Level 2")}}</td> + <td> </td> + <td> </td> + <td>{{cssxref(":scope")}} {{domxref("Document.find()")}} {{domxref("Document.findAll()")}} {{domxref("DocumentFragment.find()")}} {{domxref("DocumentFragment.findAll()")}}<br> + {{domxref("Element.find()")}} {{domxref("Element.findAll()")}} {{domxref("Element.matches()")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> + </tr> + <tr> + <td>{{SpecName("Progress Events")}}</td> + <td>{{Spec2("Progress Events")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("ProgressEvent")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> + </tr> + <tr> + <td>{{SpecName("Typed Array")}}</td> + <td>{{Spec2("Typed Array")}}</td> + <td> </td> + <td><a href="/en-US/docs/JavaScript/Typed_arrays" title="/en-US/docs/JavaScript/Typed_arrays">JavaScript Typed arrays</a></td> + <td>{{domxref("Int8Array")}} {{domxref("Int16Array")}} {{domxref("Int32Array")}} {{domxref("Uint8Array")}} {{domxref("Uint16Array")}} {{domxref("Uint32Array")}} {{domxref("Uint8ClampedArray")}} {{domxref("Float32Array")}} {{domxref("Float64Array")}}, {{domxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("TypedArray")}}, {{domxref("DataView")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/JavaScript">JavaScript</a></td> + </tr> + <tr> + <td>{{SpecName("Gamepad")}}</td> + <td>{{Spec2("Gamepad")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("Gamepad")}} {{domxref("window.navigator.getGamepads()")}} {{domxref("GamepadEvent")}} {{event("gamepadconnected")}} (event) {{event("gamepaddisconnected")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/Device_API">Device API</a></td> + </tr> + <tr> + <td>{{SpecName("Navigation Timing")}}</td> + <td>{{Spec2("Navigation Timing")}}</td> + <td><a href="/en-US/docs/Navigation_timing" title="/en-US/docs/Navigation_timing">Navigation Timing API</a></td> + <td><a href="/en-US/docs/Navigation_timing/Using_Navigation_Timing" title="/en-US/docs/Navigation_timing/Using_Navigation_Timing">Navigation Timing</a></td> + <td>{{domxref("PerformanceTiming")}} {{domxref("PerformanceNavigation")}} {{domxref("Performance")}} {{domxref("window.performance")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> + </tr> + <tr> + <td>{{SpecName("WOFF1.0")}}</td> + <td>{{Spec2("WOFF1.0")}}</td> + <td><a href="/en-US/docs/WOFF" title="/en-US/docs/WOFF">About the Web Open Font Format</a></td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("WebVTT")}}</td> + <td>{{Spec2("WebVTT")}}</td> + <td><a href="/en-US/docs/HTML/WebVTT" title="/en-US/docs/HTML/WebVTT">WebVTT</a></td> + <td> </td> + <td>{{cssxref("::cue")}} {{cssxref(":past")}} {{cssxref(":future")}} {{domxref("WebVTTCue")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/HTML_API">HTML API</a></td> + </tr> + <tr> + <td>{{SpecName("Custom Elements")}} aka WebComponents</td> + <td>{{Spec2("Custom Elements")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("document.register()")}} {{cssxref(":unresolved")}} {{domxref("document.createElement()")}} (new optional argument) {{domxref("document.createElementNS()")}} (new optional argument)</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/WebComponents">Web Components</a></td> + </tr> + <tr> + <td>{{SpecName("Shadow DOM")}}, part of WebComponents</td> + <td>{{Spec2("Shadow DOM")}}</td> + <td> </td> + <td> </td> + <td><em>Still in flux (lists what looks stable enough).</em><br> + {{HTMLElement("shadow")}} {{domxref("ShadowRoot")}} {{domxref("HTMLShadowElement")}} {{HTMLElement("content")}} {{domxref("HTMLContentElement")}} {{domxref("Element.createShadowRoot()")}} {{domxref("Element.shadowRoot")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/WebComponents">Web Components</a></td> + </tr> + <tr> + <td>{{SpecName("HTML Templates")}}, part of WebComponents</td> + <td>{{Spec2("HTML Templates")}}</td> + <td> </td> + <td> </td> + <td>{{HTMLElement("template")}} {{domxref("HTMLTemplateElement")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/WebComponents">Web Components</a></td> + </tr> + <tr> + <td>{{SpecName("Touch Events")}}</td> + <td>{{Spec2("Touch Events")}}</td> + <td> </td> + <td><a href="/en-US/docs/Web/Guide/Touch_events" title="/en-US/docs/Web/Guide/Touch_events">Touch Events</a></td> + <td>{{domxref("Touch")}} {{domxref("TouchList")}} {{domxref("TouchEvent")}} {{event("touchstart")}} (event) {{event("touchend")}} (event) {{event("touchmove")}} (event) {{event("touchcancel")}} (event) {{domxref("Document.createTouch()")}} {{domxref("Document.createTouchList()")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> + </tr> + <tr> + <td>{{SpecName("Pointer Events")}}</td> + <td>{{Spec2("Pointer Events")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("PointerEvent")}} {{event("pointerdown")}} (event) {{event("pointerup")}} (event) {{event("pointercancel")}} (event) {{event("pointermove")}} (event) {{event("pointerover")}} (event) {{event("pointerout")}} (event) {{event("pointerenter")}} (event) {{event("pointerleave")}} (event) {{event("gotpointercapture")}} (event) {{event("lostpointercapture")}} (event) {{domxref("Element.ongotpointercapture")}} {{domxref("Element.onlostpointercapture")}} {{domxref("Element.setPointerCapture()")}} {{domxref("Element.releasePointerCapture()")}} {{domxref("GlobalEventHandlers.onpointerdown")}} {{domxref("GlobalEventHandlers.onpointerup")}} {{domxref("GlobalEventHandlers.onpointercancel")}} {{domxref("GlobalEventHandlers.onpointermove")}} {{domxref("GlobalEventHandlers.onpointerover")}} {{domxref("GlobalEventHandlers.onpointerout")}} {{domxref("GlobalEventHandlers.onpointerenter")}} {{domxref("GlobalEventHandlers.onpointerleave")}} {{domxref("Navigator.pointerEnabled")}} {{domxref("Navigator.maxTouchPoints")}} {{cssxref("touch-action")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> + </tr> + <tr> + <td> {{SpecName("HTML Editing")}}</td> + <td>{{Spec2("HTML Editing")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("Selection")}} {{domxref("Document.getSelection()")}} {{domxref("Window.getSelection()")}} {{domxref("EditingBeforeInputEvent")}} {{domxref("EditingInputEvent")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/HTML_API">HTML API</a></td> + </tr> + <tr> + <td>{{SpecName("Web Crypto API")}}</td> + <td>{{Spec2("Web Crypto API")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("Key")}} {{domxref("CryptoOperation")}} {{event("abort")}} (event) {{event("error")}} (event) {{event("progress")}} (event) {{event("complete")}} (event) {{domxref("KeyOperation")}} {{domxref("Crypto")}} {{domxref("SubtleCrypto")}} {{domxref("Window.crypto")}} {{domxref("WorkerCrypto")}} {{domxref("WorkerGlobalScope.crypto")}} {{domxref("KeyPair")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/WebCrypto">Web Crypto</a></td> + </tr> + <tr> + <td>{{SpecName("Undo Manager")}}</td> + <td>{{Spec2("Undo Manager")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("UndoManager")}} {{domxref("Element.undoScope")}} {{domxref("Element.undoManager")}} {{domxref("DOMTransaction")}} {{domxref("DOMTransactionEvent")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> + </tr> + <tr> + <td>WebSocket Protocol</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CORS")}}</td> + <td>{{Spec2("CORS")}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>HTTP</td> + <td> </td> + <td><a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP</a></td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>TLS</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>MediaFragment</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>Link: header</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>Content-Disposition: header</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("URL")}}</td> + <td>{{Spec2("URL")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("URL")}} {{domxref("URLUtils")}} (no interface object) {{domxref("URLUtilsReadOnly")}} (no interface object) {{domxref("URLQuery")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> + </tr> + <tr> + <td>{{SpecName("Encoding")}}</td> + <td>{{Spec2("Encoding")}}</td> + <td><a href="/en-US/docs/WebAPI/Encoding_API" title="/en-US/docs/WebAPI/Encoding_API">Encoding API</a></td> + <td> </td> + <td>{{domxref("TextDecoder")}} {{domxref("TextEncoder")}}</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> + </tr> + <tr> + <td>{{SpecName("Clipboard API")}}</td> + <td>{{Spec2("Clipboard API")}}</td> + <td> </td> + <td> </td> + <td>{{domxref("ClipboardEvent")}} {{event("cut")}} (event) {{event("copy")}} (event) {{event("paste")}} (event)</td> + <td><a href="/en-US/docs/MDN/Doc_status/API/DOM">DOM</a></td> + </tr> + <tr> + <td>{{SpecName("Selection API")}}</td> + <td>{{Spec2("Selection API")}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/ja/orphaned/web/web_components/status_in_firefox/index.html b/files/ja/orphaned/web/web_components/status_in_firefox/index.html new file mode 100644 index 0000000000..0fa1b2248b --- /dev/null +++ b/files/ja/orphaned/web/web_components/status_in_firefox/index.html @@ -0,0 +1,58 @@ +--- +title: Firefox での Web Components のサポート状況 +slug: Web/Web_Components/Status_in_Firefox +tags: + - API + - Experimental + - Firefox + - Guide + - Web Components + - status +translation_of: Web/Web_Components/Status_in_Firefox +--- +<p>{{DefaultAPISidebar("Web Components")}}{{SeeCompatTable}}</p> + +<p><a href="/docs/Web/Web_Components">Web Components</a> は、とても新しい技術で、ブラウザ実装者や Web 開発者が実際に利用した経験を集めて仕様を考案しています。実装状況は変化しやすく、次々と進化していきます。この記事は、Firefox や Firefox OS で使用されている <a href="/docs/Mozilla/Gecko">Gecko</a> での実装状況の一覧を示します。</p> + +<div class="blob instapaper_body" id="readme"> +<article class="markdown-body entry-content"> +<h2 id="ネイティブサポート">ネイティブサポート</h2> + +<p>Firefox と Firefox OS では、以下の機能が実装されており、デフォルトで有効です:</p> + +<ul> + <li>{{HTMLElement("template")}}</li> +</ul> + +<h2 id="今後実装予定の機能">今後実装予定の機能</h2> + +<ul> + <li>新しい同意に基づいた <a href="/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a> の実装は、2016 年 Q1 にリリース予定です。<a href="https://annevankesteren.nl/2015/07/shadow-dom-custom-elements-update">Anne</a> と <a href="https://hacks.mozilla.org/2015/06/the-state-of-web-components/">Wilson</a> のブログ投稿に詳細が記述されています。しかし、まだ仕様について <a href="https://github.com/w3c/webcomponents/labels/shadow-dom">多くの議論や課題</a> があり、すべてのブラウザへの実装は将来となるでしょう。</li> + <li><strong>Custom elements</strong> は、最初からやり直しで、ECMAScript 6 の文法を使用してリビルドする計画 (つまり、より少ないプロトタイプを基に作成) です。Apple の Ryosuke Niwa が、実装をいくつか具体化しています。 + <ul> + <li>古い文法は、しばらくの間、新しい文法と共に Chrome で動作するでしょう (例えば、{{domxref("Element.attachShadow()")}} に対して {{domxref("Element.createShadowRoot()")}})、しかし、Firefox ではネイティブでは動作しないでしょう。</li> + </ul> + </li> + <li>これらの問題について、<a href="https://github.com/w3c/WebPlatformWG/blob/gh-pages/meetings/29janWC.md">2016 年 1 月の会議</a> でベンダが議論するでしょう。</li> +</ul> + +<h2 id="放棄された機能">放棄された機能</h2> + +<p>これらの機能は、実装の検討がされており、実験的に実装されていたものもあります。今後は改良もされず、削除されるでしょう。</p> + +<ul> + <li><strong>HTML imports</strong> の使用は、ES6 モジュールで開発者が何ができるかを確認することは、待って欲しいです (まだ実装されていません。{{bug(568953)}} をご覧ください)。Firefox から削除される予定の未完了の import の実装がありました。</li> +</ul> + +<h2 id="Firefox_でポリフィルを使用する">Firefox でポリフィルを使用する</h2> + +<p>Firefox でポリフィルを使用する際に考慮すべき注意事項があります:</p> + +<ul> + <li><code>about:config</code> の {{pref("dom.webcomponents.enabled")}} 設定を <code>true</code> に変更して Firefox で Web Components を有効にすると、完全でないネイティブ実装が動き始め、ポリフィルが混乱する可能性があります。</li> + <li><a href="https://github.com/webcomponents/webcomponentsjs">webcomponents.js</a> ポリフィルを使用した Shadow DOM のポリフィルは、スタイルをカプセル化できません。そのため、スタイルは bleed through でしょう。ポリフィルを使用して構築されたサイトは、ネイティブの Shadow DOM を <strong>サポートした</strong> 環境と異なる見た目になることに注意してください。</li> + <li>Shadow DOM のポリフィルは、機能にフックするために DOM 要素のプロトタイプをリライトするため、とても動作が遅いです (ポリフィルというよりポリリプレイスです!)。</li> + <li>Shadow DOM を使用する必要がない場合、webcomponents.js ポリフィルの <a href="https://github.com/webcomponents/webcomponentsjs">webcomponents-lite.js</a> バージョンを使用することをお勧めします。このバージョンは、Shadow DOM を使用しないポリフィルです。</li> +</ul> +</article> +</div> |