From 6ef1fa4618e08426b874529619a66adbd3d1fcf0 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:07:59 +0100 Subject: unslug ja: move --- .../audiocontext/mozaudiochanneltype/index.html | 95 ++++ .../readablestreamdefaultcontroller/index.html | 107 ++++ .../web/api/window/getattention/index.html | 25 + .../broken_table_layout.html/index.html | 67 +++ .../compatibility_faq/cut_off_text.html/index.html | 60 ++ .../empty_background_color.html/index.html | 58 ++ files/ja/orphaned/web/compatibility_faq/index.html | 91 +++ .../invalid_icon_size.html/index.html | 92 +++ .../misaligned_icon.html/index.html | 128 +++++ .../misaligned_text.html/index.html | 116 ++++ .../misaligned_text_inside_icon.html/index.html | 100 ++++ .../no_background_shown.html/index.html | 60 ++ .../no_border_line_shown.html/index.html | 60 ++ .../no_checkbox_check_shown.html/index.html | 54 ++ .../no_decoreation_shown.html/index.html | 82 +++ .../no_icon_shown.html/index.html | 147 +++++ .../web/compatibility_faq/no_wrap.html/index.html | 122 ++++ .../overwrapped_icon.html/index.html | 62 +++ .../overwrapped_navigation.html/index.html | 83 +++ .../tips_default_style_difference.html/index.html | 62 +++ .../tips_vendor_prefix.html/index.html | 198 +++++++ .../underline_color_diffrence.html/index.html | 77 +++ files/ja/orphaned/web/css/@media/index/index.html | 12 + .../web/css/_colon_-moz-alt-text/index.html | 19 + files/ja/orphaned/web/css/index/index.html | 10 + .../web/guide/ajax/other_resources/index.html | 21 + .../orphaned/web/html/element/command/index.html | 109 ++++ .../orphaned/web/html/element/element/index.html | 64 +++ .../web/html/global_attributes/dropzone/index.html | 48 ++ .../orphaned/web/html/html_extensions/index.html | 12 + .../index.html | 25 + .../guide/core_language_features/index.html | 10 + .../guide/creating_a_regular_expression/index.html | 31 ++ .../defining_getters_and_setters/index.html | 89 +++ .../defining_methods/index.html | 39 ++ .../index.html | 13 + .../deleting_properties/index.html | 20 + .../guide/creating_new_objects/index.html | 17 + .../indexing_object_properties/index.html | 9 + .../using_a_constructor_function/index.html | 57 ++ .../using_object_initializers/index.html | 23 + .../using_this_for_object_references/index.html | 25 + .../web/javascript/guide/expressions/index.html | 16 + .../loop_statements/break_statement/index.html | 24 + .../loop_statements/continue_statement/index.html | 46 ++ .../do...while_statement/index.html | 19 + .../guide/loop_statements/for_statement/index.html | 50 ++ .../javascript/guide/loop_statements/index.html | 17 + .../loop_statements/label_statement/index.html | 19 + .../loop_statements/while_statement/index.html | 35 ++ .../object_manipulation_statements/index.html | 51 ++ .../guide/objects_and_properties/index.html | 32 ++ .../operators/arithmetic_operators/index.html | 47 ++ .../operators/assignment_operators/index.html | 61 ++ .../operators/comparison_operators/index.html | 67 +++ .../guide/operators/logical_operators/index.html | 63 +++ .../guide/operators/special_operators/index.html | 197 +++++++ .../guide/operators/string_operators/index.html | 8 + .../escape_and_unescape_functions/index.html | 14 + .../predefined_functions/eval_function/index.html | 12 + .../guide/predefined_functions/index.html | 17 + .../creating_the_hierarchy/index.html | 134 +++++ .../guide/the_employee_example/index.html | 31 ++ .../object_properties/adding_properties/index.html | 19 + .../object_properties/index.html | 13 + .../inheriting_properties/index.html | 24 + .../guide/using_the_arguments_object/index.html | 36 ++ .../web/javascript/guide/variables/index.html | 62 +++ .../index.html | 193 +++++++ .../global_objects/array/index/index.html | 22 + .../global_objects/array/input/index.html | 25 + .../global_objects/array/prototype/index.html | 176 ++++++ .../asyncfunction/prototype/index.html | 109 ++++ .../finalizationregistry/cleanupsome/index.html | 74 +++ .../reference/operators/special/index.html | 5 + .../operators/special_operators/index.html | 5 + .../orphaned/web/manifest/serviceworker/index.html | 77 +++ .../information_security_basics/index.html | 39 ++ .../ja/orphaned/web/specification_list/index.html | 614 +++++++++++++++++++++ .../web_components/status_in_firefox/index.html | 58 ++ 80 files changed, 5110 insertions(+) create mode 100644 files/ja/orphaned/web/api/audiocontext/mozaudiochanneltype/index.html create mode 100644 files/ja/orphaned/web/api/readablestreamdefaultcontroller/readablestreamdefaultcontroller/index.html create mode 100644 files/ja/orphaned/web/api/window/getattention/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/broken_table_layout.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/cut_off_text.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/empty_background_color.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/invalid_icon_size.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/misaligned_icon.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/misaligned_text.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/misaligned_text_inside_icon.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/no_background_shown.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/no_border_line_shown.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/no_checkbox_check_shown.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/no_decoreation_shown.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/no_icon_shown.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/no_wrap.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/overwrapped_icon.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/overwrapped_navigation.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/tips_default_style_difference.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/tips_vendor_prefix.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/underline_color_diffrence.html/index.html create mode 100644 files/ja/orphaned/web/css/@media/index/index.html create mode 100644 files/ja/orphaned/web/css/_colon_-moz-alt-text/index.html create mode 100644 files/ja/orphaned/web/css/index/index.html create mode 100644 files/ja/orphaned/web/guide/ajax/other_resources/index.html create mode 100644 files/ja/orphaned/web/html/element/command/index.html create mode 100644 files/ja/orphaned/web/html/element/element/index.html create mode 100644 files/ja/orphaned/web/html/global_attributes/dropzone/index.html create mode 100644 files/ja/orphaned/web/html/html_extensions/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/class-based_vs._prototype-based_languages/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/core_language_features/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/creating_a_regular_expression/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/creating_new_objects/defining_getters_and_setters/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/creating_new_objects/defining_methods/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/creating_new_objects/defining_properties_for_an_object_type/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/creating_new_objects/deleting_properties/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/creating_new_objects/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/creating_new_objects/indexing_object_properties/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/creating_new_objects/using_a_constructor_function/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/creating_new_objects/using_object_initializers/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/creating_new_objects/using_this_for_object_references/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/expressions/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/loop_statements/break_statement/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/loop_statements/continue_statement/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/loop_statements/do...while_statement/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/loop_statements/for_statement/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/loop_statements/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/loop_statements/label_statement/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/loop_statements/while_statement/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/object_manipulation_statements/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/objects_and_properties/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/operators/arithmetic_operators/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/operators/assignment_operators/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/operators/comparison_operators/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/operators/logical_operators/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/operators/special_operators/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/operators/string_operators/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/predefined_functions/eval_function/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/predefined_functions/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/the_employee_example/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/adding_properties/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/using_the_arguments_object/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/variables/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/writing_a_regular_expression_pattern/index.html create mode 100644 files/ja/orphaned/web/javascript/reference/global_objects/array/index/index.html create mode 100644 files/ja/orphaned/web/javascript/reference/global_objects/array/input/index.html create mode 100644 files/ja/orphaned/web/javascript/reference/global_objects/array/prototype/index.html create mode 100644 files/ja/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html create mode 100644 files/ja/orphaned/web/javascript/reference/global_objects/finalizationregistry/cleanupsome/index.html create mode 100644 files/ja/orphaned/web/javascript/reference/operators/special/index.html create mode 100644 files/ja/orphaned/web/javascript/reference/operators/special_operators/index.html create mode 100644 files/ja/orphaned/web/manifest/serviceworker/index.html create mode 100644 files/ja/orphaned/web/security/information_security_basics/index.html create mode 100644 files/ja/orphaned/web/specification_list/index.html create mode 100644 files/ja/orphaned/web/web_components/status_in_firefox/index.html (limited to 'files/ja/orphaned/web') 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 +--- +

{{APIRef("Web Audio API")}} {{Non-standard_header}}

+ +

{{domxref("AudioContext")}}インターフェースのmozAudioChannelType読み取り専用プロパティは、Firefox OS デバイスで、オーディオコンテキスト要素で再生される音声を再生するオーディオチャンネルを設定するために使えます。

+ +

これはAudioChannels APIに定義された非標準のプロパティです。詳細はUsing the AudioChannels APIを参照してください。

+ +

構文

+ +
var audioCtx = new AudioContext();
+var myAudioChannelType = audioCtx.mozAudioChannelType;
+
+ +

AudioContextのオーディオチャンネルタイプを設定できるのは、次のコンストラクタを使う場合のみです。

+ +
var audioCtx = new AudioContext('ringer');
+ +

値

+ +

{{domxref("DOMString")}}

+ +

例

+ +

TBD

+ +

仕様

+ +

現在はAudioChannels APIには公式の仕様はありません。実装、WebIDLなどの詳細はhttps://wiki.mozilla.org/WebAPI/AudioChannelsを参照してください。

+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
General support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
General support{{CompatNo}}{{CompatNo}}{{CompatNo}}1.2{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

参考

+ + 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 +--- +
{{APIRef("Streams")}}
+ +

ReadableStreamDefaultController() コンストラクターは、ReadableStreamDefaultController オブジェクトのインスタンスを作成して返します。

+ +
+

注: このコンストラクターを手動で使用することはありません — これは、{{domxref("ReadableStream")}} オブジェクトの構築中に使用されます。

+
+ +

構文

+ +
var readableStreamDefaultController = new ReadableStreamDefaultController(stream, underlyingSource, size, highWaterMark);
+ +

パラメーター

+ +
+
stream
+
制御される {{domxref("ReadableStream")}}。
+
underlyingSource
+
構築されたストリームインスタンスの動作を定義するメソッドとプロパティを含むオブジェクト。 詳細については、ReadableStream() コンストラクターのパラメーター定義を参照してください。
+
size
+
 パラメーター chunk を含むメソッド — これは、各チャンクに使用するサイズをバイト単位で示します。
+
highWaterMark
+
負でない整数 — これは、バックプレッシャーが適用される前に内部キューに含めることができるチャンクの総数を定義します。
+
+ +

戻り値

+ +

{{domxref("ReadableStreamDefaultController")}} オブジェクトのインスタンス。

+ +

例外

+ +
+
TypeError
+
指定された stream パラメーターは {{domxref("ReadableStream")}} ではないか、既にコントローラーが関連付けられています。
+
+ +

例

+ +

次の単純な例では、コンストラクターを使用してカスタムの ReadableStream を作成します（完全なコードについては、単純なランダムストリームの例を参照）。 start() 関数は、1秒ごとにテキストのランダムな文字列を生成し、それをストリームのキューに入れます。 {{domxref("ReadableStream.cancel()")}} が何らかの理由で呼び出された場合、生成を停止するための cancel() 関数も提供します。

+ +

{{domxref("ReadableStreamDefaultController")}} オブジェクトは、start() 関数および pull() 関数のパラメーターとして提供されることに注意してください。

+ +

ボタンが押されると、生成を停止し、{{domxref("ReadableStreamDefaultController.close()")}} を使用してストリームを閉じ、ストリームからデータを読み取る別の関数を実行します。

+ +
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);
+  }
+});
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName("Streams","#rs-default-controller-constructor","ReadableStreamDefaultController()")}}{{Spec2('Streams')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.ReadableStreamDefaultController.ReadableStreamDefaultController")}}

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 +--- +
+ {{ApiRef}}
+

概要

+

ユーザの注意を引きつける動作をします。これがどのような動作になるかは、OS と ウィンドウマネージャー次第で変化します。

+

構文

+
window.getAttention();
+
+

注記

+

Windows では、ウィンドウのタスクバーのボタンが点滅します（ユーザがこれを無効化していない場合）。

+

Linux では、挙動はウィンドウマネージャーによって変化します。タスクバーボタンが点滅するのもあれば、直ちにウィンドウにフォーカスするものもあります。これは調整可能であるかもしれません。

+

Macintosh では、デスクトップの右上端のアイコンが点滅します。

+

この関数は、Web コンテンツでは、無効化されています。Gecko も Internet Explorer も、現在はこの機能を Web コンテンツに対してはサポートしていません。getAttention は、Gecko アプリケーションでの chrome から利用したときには、いまだに動作します。

+

仕様

+

{{DOM0}}

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 +--- +

概要

+ +

　テーブルのセル幅に統一性がなく、テーブル全体のレイアウトが崩れます。

+ +
　　
+ +

左：Firefox　右：他ブラウザ

+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    テーブルのセル幅の未指定

    + +

    　テーブルのセル幅が明示的に指定されていないため、セルの横幅がテーブル各行左側のセルのサイズに合わせて伸縮しています。

    + + 
    　　#maincontent section.category .list div{
+	display: table;
+	width: 100%;
+	border-top: #b2b2b2 1px solid;
+　　}
    + +

    　上記のようなテーブル指定に加えて、更に横並びのセルが左右均等となるような配置指定が必要となります。
    +  

    +
    2. +
+ +

解決策

+ +

　解決策の代表例として以下があります。

+ +
    +
  1. +

    テーブルのセル幅の未指定

    + +

    テーブルの配置指定に table-layout: fixed; を適用させます。
    + table-layout: fixed; の指定により、横並びのセル幅が左右均等になります。

    + + 
    　　#maincontent section.category .list div{
+	display: table;
+	table-layout: fixed;
+	width: 100%;
+	border-top: #b2b2b2 1px solid;
+　　}
    + +

     

    +
    2. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。
+ 　・細かいpxの指定をせずにテーブルの見た目を整えることができます。
+ 　・また、後続するセルのコンテンツが用意された列幅をオーバーフロー(はみ出し)した場合にも、
+ 　　発生したセルに対してoverflowプロパティを用いればはみ出したセルの内容を表示できるようになるなど、セルの内容変更にも柔軟に対応できます。

+ +


+ 戻る

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 +--- +

概要

+ +

　検索等のテキストボックス内のプレースホルダーが見切れています。
+ 　プレースホルダーの文字列が全て表示できず、途中で見切れている場合があります。

+ +

　　　表示画面

+ +

+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    表示領域が足りていない
    + 表示領域のwidthプロパティの値が表示させるテキストの文字数分のpx数より小さいことで見切れています。
    + テキストを全て表示させるには、テキストよりも大きなwidthプロパティの値を設定する必要があります。

    + + 
    　　input[type=text] {
+	margin:0 6px;
+	width:165px;
+　　}
    + +

     

    +
    2. +
+ +

解決策

+ +

　各要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    表示領域が足りていない
    + 表示領域のwidthプロパティを要素のテキストに合わせて、再設定することで正しく表示されます。
    + 表示するテキストが長すぎてテキストボックスを超えてしまう場合は、テキストボックスの横幅の調整も必要となります。

    + + 
    　　input[type=text] {
+	margin:0 6px;
+	width: 200px;
+　　}
    + +

     

    +
    2. +
+ +

メリット

+ +

　・少ない調整で正しく表示を行えるようになります。
+ 　・要素内のpx指定の変更のみなので、他ブラウザへの影響がありません。

+ +

戻る

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 +--- +

概要

+ +

　他ブラウザで表示されるアイコンやバナーの色が、mobile版Firefoxでは表示されません。
+ 　領域が真っ白な表示になっていたり、下レイヤーの要素の背景が表示される場合があります。

+ +
+

+
+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + 表示に必要なベンダープレフィックス付きプロパティが記述されていない場合があります。

    + + 
    　　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)));
+　　}
    + +

    上記の backgound: -webkit-gradient(); は、webkitブラウザ用の記述となります。
    + また、gradient値を指定する代替の記述もないため、結果として、背景からグラデーション装飾が抜けてしまいました。

    +
    2. +
+ +

解決策

+ +

　要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + CSS3準拠の backgound: linear-gradient(); を追記します。

    + + 
    　　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)));
+	background: linear-gradient(to bottom, #ff4466 90%, #ffffff);
+　　}
    + +

    注意：gradient値やlinear-gradient()関数はブラウザやバージョンごとに構文が異なりますので注意が必要です。

    +
    2. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。
+ 　・追記のみで対応可能です。

+ +

戻る

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 +--- +
+

モバイルデバイスを利用する上で、特定のデバイス／ブラウザに依存せず、どのブラウザでもサイトが正常表示可能な環境が理想的と考えています。
+ 本稿では、主にAndroid版Firefoxで発生しているよくあるサイト表示不具合をパターン毎に分類し、Web標準に従ったコンテンツ記載によりブラウザ間の表示互換性を保てるノウハウをご紹介します。

+ +

目次

+ +
+

1. 画面レイアウトが崩れる

+ + + +

2. 装飾が抜ける

+ + + +

3. 画面要素の一部が表示されない

+ + + +
+

TIPS

+ + + +
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 +--- +

概要

+ +

　アイコンや画像が期待と異なるサイズで表示されます。
+ 　他のブラウザと比較した場合や、同ページで複数使用されている同アイコンで比較した場合に、画像が小さく表示されたり、大きく表示されたりします。
+ 　結果、他の要素と並んだ場合に不自然な表示となってしまいます。

+ +
+

　　表示画面

+ +

 

+
+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + 他のブラウザで正しく表示出来ている場合でもFirefoxで表示が崩れている場合は、ベンダープレフィックスの指定が入っていることがあります。
    + -webkit-linear-gradient()関数等の指定で表示領域を設定していると、Firefoxでは認識できず、指定されていない状態になっています。

    + + + 
    　　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);
+　　}
    + +

     

    +
    2. +
  2. +

    各アイコンの配置指定方法が統一されていない
    + 各アイコンの配置指定方法が統一されていない為、各アイコンの表示状態が異なってしまう場合があります。
    + インラインでの装飾指定とそれぞれのアイコンにおける%指定やfloatなどの指定が統一していない場合に、ブラウザによっては、表示サイズや配置が異なってしまうことがあります。

    + + + 
    　　インライン {background: url('/images/shared/arw_r_black_01.png') no-repeat scroll 97.5% 50% #EFEFEF !important;}
+　　インライン {float: right; clear: both;}
    + +

     

    +
    3. +
+ +

解決策

+ +

　各要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + webkit指定が入っている場合は、他ブラウザ互換用に別途指定を行う必要があります。
    + -webkit-linear-gradient()関数の場合は、linear-gradient()関数を追記することでFirefoxでも指定を行うことができます。
    + ただし、-webkit-linear-gradient()関数とlinear-gradient()関数は、伴う引数が異なる為、例に従って記載してください。

    + + 
    　　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);
+	background: url(../images/icon_serach.png) no-repeat center center, linear-gradient(to top, #ffffff 1%, #e5c21f 2%, #e6a227 90%, #e6a026);
+　　}
    + +

     

    +
    2. +
  2. +

    各アイコンの配置指定方法が統一されていない
    + 各アイコンの配置指定方法を統一することで解消されます。
    + インラインで各アイコンの指定を行うと統一できていない場合があるので、別途CSSファイルを作成し、統一した指定を定義するとよいでしょう。

    +
    3. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。
+ 　・HTML全体の指定を出来る限り統一し、CSSファイルで定義することで変更修正が容易になります。

+ +

戻る

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 +--- +

概要

+ +

　アイコンや画像の表示位置がずれて表示されてしまいます。
+ 　他のブラウザと比較した場合、上下左右にずれて表示されたり、横並びに表示されるべきアイコンや画像が縦並びに表示されたりします。

+ +

 　

+ +

+ +
 
+ +

 

+ +

要因

+ +

　複数の要因が考えられますが、代表例として以下があります。

+ +
    +
  1. +

    アイコンや画像が横幅に収まらず、折り返されている
    + span要素等のブロックが横幅に収まらずに折り返されて表示されている場合があります。
    + ブラウザの違いによりインラインブロック間にできる間隔が異なる事がありますので、他のブラウザで横並びに表示できていても
    + Firefoxで表示すると折り返され、縦並びに表示されてしまいます。

    + + + 
    　　.btn-pulldown-main {
+	box-sizing: border-box;
+	width: 49.2%;
+	display: inline-block;
+	padding: 9px 0;
+　　}
    + +

     

    +
    2. +
  2. +

    zoomプロパティが使用されている
    + zoomプロパティが使用されている場合、Firefoxでは適応されません。
    + 他のブラウザでは、適応されているプロパティがFirefoxでは適応されていない場合、見栄えに差異が出てしまいます。
    + よって、他のブラウザで調整した表示位置が、Firefoxでは誤った表示となってしまいます。

    + + + 
    　　.menu {
+	display:　block;
+	position: absolute;
+	top: 0px;
+	right: 0px;
+	zoom: 0.5;
+　　}
    + +

     

    +
    3. +
  3. +

    ブラウザの解像度の違いによる表示差異
    + ブラウザの解像度の違いによって、px指定されているマージンが表示上、異なってしまう場合があります。
    + 結果、アイコンや画像の表示位置がブラウザ間でずれて表示されてしまいます。

    + + + 
    　　img.message {
+	position: relative;
+	margin-top: -52px;
+　　}
    + +

     

    +
    4. +
+ +

解決策

+ +

　各要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    アイコンや画像が横幅に収まらず、折り返されている
    + 各ブロックの横幅を調整することで解消されます。
    + ブラウザによってインラインブロック間のマージンが異なる場合があるため、実際に表示させながら、横幅に各ブロックが収まる(折り返されない)様に調整していきます。

    + + 
    　　.btn-pulldown-main {
+	box-sizing: border-box;
+	width: 49.0%;
+	display: inline-block;
+	padding: 9px 0;
+　　}
    + +

     

    +
    2. +
  2. +

    zoomプロパティが使用されている
    + zoomプロパティはFirefoxでは適応されないため、heightプロパティで位置を指定するのがよいです。
    + その他の指定もpx指定で調整することで、他のブラウザとの表示差異はなくなります。

    + + 
    　　インライン { height: 80px;}
+
+　　.menu {
+	display: block;
+	position: absolute;
+	top: -15px;
+	right: -10px;
+　　}
    + +

     

    +
    3. +
  3. +

    ブラウザの解像度の違いによる表示差異
    + アイコンの位置をpaddingプロパティで再調整することで正しく表示させることが可能となります。

    + + + 
    　　img.message {
+	position: relative;
+	margin-top: -52px;
+	padding: 0 0 6px 0;
+　　}
    + +

     

    +
    4. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。

+ +

戻る

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 +--- +

概要

+ +

　文字列の表示位置が上下左右にずれて表示されたり、プルダウンメニュー等の表示領域をはみ出して表示したりすることがあります。
+ 　その場合、横スクロールが行えないことを想定したモバイル向けwebページで横スクロールが可能となってしまいます。

+ +
表示画面
+ +

+ +

要因

+ +

　複数の要因が考えられますが、代表例として以下があります。

+ +
    +
  1. +

    ブラウザ間でのデフォルト値の差異
    + ブラウザ毎でデフォルト値を持っています。 line-height: normal; 等で指定するとデフォルト値で表示されます。
    + しかし、ブラウザによってはデフォルト値が異なるため、同じようにnormalで指定してもブラウザ比較すると異なる表示となってしまうことがあります。

    + + 
    　　.recommended {
+	text-decoration: none;
+	display: inline;
+	width: auto;
+	height: auto;
+	line-height: normal;
+	vertical-align: baseline;
+　　}
    + + +
    2. +
  2. +

    ベンダープレフィックス
    + 他のブラウザで正しく表示出来ているが、Firefoxで表示が崩れている場合は、ベンダープレフィックスの指定が入っていることが考えられます。
    + -webkit-box-sizingプロパティ等で指定している場合、Firefoxでは認識できないため、表示崩れが発生します。

    + + 
    　　#button-06 {
+	display: table;
+	width: 99.9%;
+	-webkit-box-sizing: border-box;
+　　}
    + + +
    3. +
  3. +

    ブラウザ間でのpx指定の差異
    + 様々なアイコン上の文字列をCSSのpaddingプロパティ等を使用して、配置を指定している場合、ブラウザ間で表示がずれてしまう場合があります。
    + これは、ブラウザ間でpx指定の差異があるために発生しています。

    + + 
    　　.gender-type {
+	padding-top: 3px;
+　　}
    + + +
    4. +
+ +

解決策

+ +

　各要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    ブラウザ間でのデフォルト値の差異
    + デフォルト値で設定するとそれぞれのブラウザで解釈の差異が生まれてしまう可能性があるため、
    + 明示的に値を指定することで正しく表示できます。

    + + 
    　　.recommended {
+	text-decoration: none; display: inline;
+	width: auto;
+	height: auto;
+	line-height: 1;
+	vertical-align: baseline;
+　　}
    + + +
    2. +
  2. +

    ベンダープレフィックス
    + webkit指定が入っている場合は、他のブラウザとの互換用に別途指定を行う必要があります。
    + -webkit-box-sizingプロパティの場合は、box-sizingプロパティを追記することでFirefoxでも指定を行うことができます。

    + + 
    　　#button-06 {
+	display: table;
+	width: 99.9%;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+　　}
    + + +
    3. +
  3. +

    ブラウザ間でのpx指定の差異
    + 指定に差異が出てしまっているものに関しては、個々の要素にpaddingプロパティ指定を追記し、
    + それぞれで調整を行うことで、想定の表示を行うことが可能となります。

    + + 
    　　.gender-type.blc-hdr-rgt {
+	float: right;
+	padding: 1.5px;
+　　}
    + + +
    4. +
+ +

メリット

+ +

　・デフォルト値ではなく、明示的に値を指定することで、他のブラウザで差異があった場合にも対応できます。

+ +

戻る

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 +--- +

概要

+ +

　アイコンの中身が外にはみ出して形が崩れてしまいます。

+ +
表示画面
+ +

+ +

要因

+ +

　複数の要因が考えられますが、代表例として以下があります。

+ +
    +
  1. +

    アイコンの横幅指定が誤っている
    + アイコンの横幅指定が画面横幅を超えて指定されている為、画面の外にアイコンがはみ出してしまい、形が崩れています。
    + 横幅にmax-widthプロパティを指定した場合、横画面表示時のサイズで指定されてしまうため、横幅が可変した場合に対応できません。

    + + + 
    　　img {
+	max-width: 100%;
+	height: auto;
+	vertical-align: middle;
+	border: 0px none;
+　　}
    + +

     

    +
    2. +
  2. +

    ベンダープレフィックス
    + 他のブラウザで正しく表示出来ているが、Firefoxで表示が崩れている場合は、ベンダープレフィックスの指定が入っていることが考えられます。
    + -webkit-background-sizeプロパティ等の指定で表示領域を設定していると、Firefoxでは認識できず、指定されていない状態になっています。

    + + + 
    　　h3 {
+	padding: 10px 40px 10px 10px;
+	background: url(/images/open.gif) no-repeat 98% 50%;
+	-webkit-background-size: 21px 21px;
+	font-weight: bold;
+	font-size: 12px;
+	cursor: pointer;
+　　}
    + +

     

    +
    3. +
+ +

解決策

+ +

　各要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    アイコンの横幅指定が誤っている
    + max-width: 100%; で指定されている場合は、横画面表示時のサイズで指定されてしまうため、width: 100%; に修正することで縦画面表示のサイズにも対応できます。

    + + + 
    　　img {
+	width: 100%;
+	height: auto;
+	vertical-align: middle;
+	border: 0px none;
+　　}
    + +

     

    +
    2. +
  2. +

    ベンダープレフィックス
    + webkit指定が入っている場合は、他ブラウザ互換用に別途指定を行う必要があります。
    + -webkit-background-sizeプロパティの場合は、background-sizeプロパティを追記することでFirefoxでも指定を行うことができます。
    + 引数は同様のものが使用可能です。

    + + + 
    　　h3 {
+	padding: 10px 40px 10px 10px;
+	background: url(/images/open.gif) no-repeat 98% 50%;
+	-webkit-background-size: 21px 21px;
+	background-size: 21px 21px;
+	font-weight: bold;
+	font-size: 12px;
+	cursor: pointer;
+　　}
    + +

     

    +
    3. +
+ +

メリット

+ +

　・画面サイズの可変に対応可能となります。
+ 　・他のブラウザでも互換性を維持することができます。

+ +

戻る

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 +--- +

概要

+ +

　他ブラウザにて表示される背景色が、mobile版Firefoxにて表示されません。
+ 　領域が真っ白な表示になっていたり、下レイヤーの要素の背景が表示されたりします。

+ +
+
表示画面
+ +

+
+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + 必要なベンダープレフィックス付きプロパティが記述されていない場合があります。

    + + 
    　　.bg_hoge {
+	background: -webkit-gradient( linear, center top, center bottom, from(#ff4466), color-stop(0.9, #ff4466), to(rgba(255,255,255,0.0)));
+　　}
    + +

    上記の backgound: -webkit-gradient(); は、webkitブラウザ用の記述となります。
    + また、gradient値を指定する代替の記述もないため、結果として、背景からグラデーション装飾が抜けてしまいます。

    +
    2. +
+ +

解決策

+ +

　要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + CSS3準拠の backgound: linear-gradient(); を追記します。

    + + 
    　　.bg_hoge {
+	background: -webkit-gradient( linear, center top, center bottom, from(#ff4466), color-stop(0.9, #ff4466), to(rgba(255,255,255,0.0)));
+	background: linear-gradient(to bottom, #ff4466 90%, #ffffff);
+　　}
    + +

    注意：gradient値やlinear-gradient()関数はブラウザやバージョンごとに構文が異なりますので注意が必要です。

    +
    2. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。
+ 　・追記のみの対応のため改修が容易です。

+ +

戻る

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 +--- +

概要

+ +

　他ブラウザで表示されている罫線が、Firefoxで表示されない場合があります。

+ +

+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    他ブラウザで独自のCSSが適応されている
    + 例えば、Chromeではブラウザ独自のCSSにて、hr要素にbackground-colorプロパティを指定することができます。
    + そのため、Firefoxで表示されていない罫線がChromeでは表示されるということが起きてしまいます。
    + 特に、コンテンツの記述やFirefoxの動作が問題になっているわけではありません。

    +
    2. +
+ +

解決策

+ +

　要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    他ブラウザで独自のCSSが適応されている
    + Firefox側のコンテンツの記述、動作に問題はありませんが、下記の方法で統一することが可能です。
    + まず、表示させたい要素のインラインに罫線(border-top: thin solid;)を指定します。
    + そして、他ブラウザ(この場合はChrome)で入っている指定をリセット記述(background-colorプロパティを利用)にて非表示にします。

    + + + 
    　　インライン {
+	border-top: thin solid;
+　　}
+
+　　hr {
+	display: block;
+	height: 1px;
+	border: 0;
+	border-top: 1px solid #cccccc;
+	margin: 1em 0;
+	padding: 0;
+	background-color: rgb(255,255,255);
+　　}
    + 上記の修正にて、他ブラウザとの互換がとれるようになります。
    2. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。
+ 　・作成者の把握できていないブラウザ独自の装飾をリセットすることで作成時の想定に近いコンテンツが作成できます。

+ +

戻る

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 +--- +

概要

+ +

　チェックボックスをタップし、チェックを入れる操作を行ってもレ点が表示されません。

+ +

+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + チェックボックスの装飾をwebkit指定で行っている場合、Firefoxでは認識できないため、正しく表示が行えません。
    + または、Firefox用にlinear-gradient()関数を記述している場合は、引数の指定方法が-webkit-linear-gradient()関数と異なるため、注意が必要です。

    + + 
    　　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), linear-gradient(top, #00397b 0%, #01afeb 100%);
+　　}
    + +

     

    +
    2. +
+ +

解決策

+ +

　要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + -webkit-linear-gradient()関数の第一引数に「top」が指定されている時に、他ブラウザとの互換性を維持するためにlinear-gradient()関数を使用します。
    + その場合、第一引数には例のように「to top」を指定することで正しく表示されます。

    + + 
    　　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), linear-gradient(to top, #00397b 0%, #01afeb 100%);
+　　}
    +
    2. +
+ +

メリット

+ +

　・プロパティを正しく使用することで各ブラウザでの表示差異がなくなります。

+ +

戻る

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 +--- +

概要

+ +

　枠のシャドウ(影付け装飾)や角丸(アイコンやボタンの角の丸み)が表示されません。

+ +
+

+
+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + webkitブラウザ向けの記述がされている場合、この現象が発生します。
    + 例えば、以下のような場合です。

    + +
      +
    • +

      シャドウの場合

      + + 
      　　.hoge {
+	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
+　　}
      +
      • +
    • +

      角丸の場合

      + + 
      　　.hoge {
+	-moz-border-radius: 6px;
+	-webkit-border-radius: 6px;
+　　}
      +
      • +
    +
    2. +
+ +

解決策

+ +

　要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + 他ブラウザで互換性を維持する為に、以下のようなbox-shadowプロパティ、border-radiusプロパティの記述を追加します。

    + +
      +
    • +

      シャドウの場合

      + + 
      　　.hoge {
+	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
+	box-shadow: 0 1px 2px rgba(0,0,0,.4);
+　　}
      +
      • +
    • +

      角丸の場合

      + + 
      　　.hoge {
+	-moz-border-radius: 6px;
+	-webkit-border-radius: 6px;
+	border-radius: 6px;
+　　}
      +
      • +
    +
    2. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。
+ 　・追記のみの対応のため改修が容易です。

+ +

戻る

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 +--- +

概要

+ +

　一部のアイコンやバナーが表示されません。
+ 　メニューのボタンや、検索実行ボタン、バナーなどがFirefoxのみで非表示となってしまいます。

+ +
+

+
+ +

要因

+ +

　複数要因がありますが、代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + 描画やサイズ指定でwebkit指定を使用している場合は、Firefoxでは認識できないため、非表示となってしまう場合があります。
    + また、背景色をwebkit指定で行い、白抜きのアイコンを描画していた場合も背景色が認識できません。
    + 背景色が白で表示されると、白文字を指定した場合、同色となり非表示となるケースもあります。

    +  下記は、描画指定の例になります。 + + 
    　　top li{
+	font-size: 90%;
+	-webkit-border-radius: 3px;
+	border: 1px solid #e5e5e5;
+	background-color: #ffffff;
+	background: -webkit-gradient(linear, left bottom, left top, from(#f6f6f6), to(#ffffff));
+	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+	margin: 0 0 0 5px;
+	position: relative;
+	bottom: 15px;
+　　}
+
+　　.icn_search a:before {
+	content: "" "";
+	width: 7px;
+	height: 7px;
+	border: 2px solid #e4006f;
+	background: transparent;
+	-webkit-border-radius: 12px;
+　　}
+
+　　.icn_search a:after {
+	content: "" "";
+	left: 18px;
+	width: 2px;
+	height: 7px;
+	margin-top: 0;
+	-webkit-transform: rotate(-45deg);
+　　}
    + +

    下記は、サイズ指定の例になります。

    + + 
    　　single_02 {
+	background: url(http://common/icon.png) no-repeat 0 -625px;
+	-webkit-background-size: 26px auto;
+　　}
    + +

     

    +
    2. +
  2. +

    全体のレイアウトに誤りがある
    + 全体のレイアウトに誤りがあり、結果一部のバナー等が非表示となっている場合があります。
    + floatプロパティ等の配置指定に誤りがあり、結果、一部の要素が画面に収まりきれずに表示できていません。

    +
    3. +
+ +

解決策

+ +

　各要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + webkit指定の描画やサイズ指定を他ブラウザでも互換性を維持できるよう下記記載のものに修正することで正しく表示可能となります。

    + + + +

    詳しくは、「mobile版Firefox向けベンダープレフィックス対処方法まとめ」をご覧ください。

    + +

    下記は、描画指定の例になります。

    + + 
    　　navtop li {
+	font-size:90%;
+	border-radius: 3px;
+	border: 1px solid #e5e5e5;
+	background-color: #ffffff;
+	background: linear-gradient(to bottom, #f6f6f6 0%, #ffffff 100%);
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+	margin: 0 0 0 5px;
+	position: relative;
+	bottom: 15px;
+　　}
+
+　　.icn_search a:before {
+	content: "" "";
+	width: 7px;
+	height: 7px;
+	border: 2px solid #e4006f;
+	background: transparent;
+	border-radius: 12px;
+　　}
+
+　　.icn_search a:after {
+	content: "" "";
+	left: 18px;
+	width: 2px;
+	height: 7px;
+	margin-top: 0;
+	transform: rotate(-45deg);
+　　}
    + +

    下記は、サイズ指定の例になります。

    + + 
    　　single_02 {
+	background: url(http://common/icon.png) no-repeat 0 -625px;
+	-webkit-background-size: 26px auto;
+	background-size: 26px auto;
+　　}
    + +

     

    +
    2. +
  2. +

    全体のレイアウトに誤りがある
    + 表示されていない部分のみが問題ではない場合もありますので、ページ全体のレイアウトを見直し、部品の一つ一つが想定の位置に正しく配置されていることを確認してください。

    +
    3. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。
+ 　・全体のレイアウトを見直すことにより、その後の変更修正も容易になります。

+ +

戻る

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 +--- +

概要

+ +

　一部のコンテンツが画面の右側にはみ出して表示されることにより、はみ出していないコンテンツの右側に空白が出来てしまう場合があります。
+ 　その場合、横スクロールが行えない想定のモバイル向けwebページで横スクロールが可能となってしまいます。

+ +
+
表示画面
+ +

+
+ +

 

+ +

要因

+ +

　複数要因がありますが、代表例として以下があります。

+ +
    +
  1. +

    テーブルの列幅指定がされていない
    + テーブルの列幅が指定されていないため、一部要素が画面右側に流れ出してしまっています。
    + よって、画面に表示されていない部分を表示するため、横スクロールが可能となり、要素が流れ出していない部分に空白ができています。

    + +

    なお、要素が流れ出さないため、テーブルの列幅は画面サイズに合わせて指定する必要があります。
    + 指定されていない理由としては、そもそも指定を行っていないか、もしくは表示するブラウザに対応していないタグを使用している可能性があります。

    +
    2. +
  2. +

    アイテムの横幅指定が誤っている
    + アイテムの横幅指定が画面横幅を超えて指定されているため、その他の要素の右側に空白ができています。
    + アイテムの横幅指定は、widthプロパティの指定方法または値の誤り、アイテムを表示しているブロックの指定の誤り等があります。

    + +

    下記の指定方法は、max-widthプロパティ等で、横画面切替表示時の横幅で指定されてしまうため、縦画面に対応されなくなってしまう例になります。
    + その他に、テーブル同様そもそも指定を行っていないか、もしくは表示するブラウザに対応していないタグを使用している可能性もあります。

    + + + 
    　　img {
+	max-width: 100%;
+	height: auto;
+	vertical-align: middle;
+	border: 0px none;
+　　}
    + +

    なお、ブロックの指定誤りとしては、様々ありますが、その他の表示しているアイテムの幅も考慮した上で、px指定または%指定する必要があります。

    + +

     

    +
    3. +
+ +

解決策

+ +

　各要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    テーブルの列幅指定がされていない
    + 画面全体に table-layout: fixed; を指定します。
    + この指定により、テーブルの列幅が画面に合わされますので、画面右側の空白はなくなります。

    + + + 
    　　html, body, div, span... {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	vertical-align: top;
+	table-layout: fixed;
+　　}
    + +

     

    + +

    また、テーブルの幅指定を display: table; で行っている場合、Firefoxでは認識できません。
    + 他ブラウザ互換のために display: inline-block; を追記することで、画面幅に指定することができます。

    + + + 
    　　#navigation ul {
+	display: table;
+	display: inline-block;
+	width: 99.9%;
+　　}
    + +

     

    +
    2. +
  2. +

    アイテムの横幅指定が誤っている
    + max-width: 100%; で指定されている場合は、横画面表示時のサイズで表示されてしまうため、 width: 100%; に修正することで縦画面表示時のサイズにも対応できます。

    + + + 
    　　img {
+	width: 100%;
+	height: auto;
+	vertical-align: middle;
+	border: 0px none;
+　　}
    + +

     

    + +

    display:-moz-box; 等、mobile版ブラウザで対応されていないタグを使用している場合や、そもそも指定がない場合は、display: inline-block; に修正することで指定できます。

    + + + 
    　　box li {
+	width: 100%;
+	display: box;
+	display: inline-block;
+　　}
    + +

     

    +
    3. +
+ +

メリット

+ +

　・画面サイズに列幅を合わせることにより、様々な画面サイズのデバイスに対応可能となります。
+ 　・また、アイテム一つ一つの幅を正しく指定することで、他のコンテンツの表示崩れ等の併発を防ぐことができます。

+ +

戻る

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 +--- +

概要

+ +

　アイコンが隣接する他のアイコンと重なってしまい、正しく表示できません。
+ 　隣のアイコンと重なっている部分が、欠けてしまったり、隣のアイコンの上に表示されてしまう場合があります。

+ +
+
表示画面
+ +

 

+
+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    アイコンの表示領域が足りていない
    + アイコン内の数値が変動する(桁数が変わる)場合は、最大桁数が考慮されていないと、桁数によっては隣のアイコンと被ってしまうことがあります。
    + 表示領域をpx指定していると、他のアイコンが押し出される等の問題は発生しませんが、指定しているアイコン自身の表示欠け等が発生します。

    + + + 
    　　.icon {width: 100px !important;}
    + +

     

    +
    2. +
+ +

解決策

+ +

　解決策の代表例として以下があります。

+ +
    +
  1. +

    アイコンの表示領域が足りていない
    + アイコン内の数値の最大桁数を考慮し、表示領域の横幅を再設定することで正しく表示されます。
    + その時に、全体の横幅が画面サイズを超えて指定してしまうと、横並びになっていたアイコンが折り返されてしまうことがあるので、全体の横幅に注意し、表示領域の再設定を行ってください。

    + + 
    　　.icon {width: 120px !important;}
    + +

    また、widthプロパティを「auto」で指定し、数値の変動に合わせ、表示領域も変動するように指定する方法もよいです。
    + ただし、「auto」で指定した場合は、他のアイコンが折り返される可能性があるので、他のアイコンをmarginプロパティ等で表示位置を調整する必要があります。

    + + 
    　　.icon {width: auto;}
    + +

     

    +
    2. +
+ +

メリット

+ +

　・px指定した場合は、少ない修正で横幅の変動するアイコンに対応できます。
+ 　・「auto」で指定した場合は、他のアイコンの表示位置指定を全体的に見直す必要がありますが、桁数の少ない場合と多い場合で、それぞれ合った表示を行うことが可能となります。

+ +

戻る

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 +--- +

概要

+ +

　他のブラウザで正しく表示されているナビゲーションメニューが、Firefoxで表示すると大幅に崩れてしまう場合があります。
+ 　一列に並ぶべきアイコンが画面横幅に収まっておらず、他のアイコンと重なって表示されてしまい、周辺のアイコンが全体的に配置崩れを起こしてしまいます。
+
+
+ 　
+  

+ +

要因

+ +

　要因の代表例としては以下があります。

+ +
    +
  1. +

    テーブルの列幅が指定されていない
    + display: table; でテーブルの列幅を指定している場合、Firefoxでは認識できていません。
    + 列幅を指定していないことで、アイコンが画面の横幅に収まらず、配置崩れを起こしてしまいます。

    + + 
    　　navigation ul {
+	display: table;
+	width: 99.9%;
+　　}
    + +

    また、display: -moz-box; が指定されている場合も、mobile版Firefoxでは認識できませんので、同様の現象が発生します。

    + + 
    　　.go_contents_btn {
+	display: -webkit-box !important;
+	display: -moz-box !important;
+	-webkit-box-pack: center !important;
+	-moz-box-pack: center !important;
+	width: 100%;
+　　}
    +
    2. +
+ +

解決策

+ +

　解決策の代表例として以下があります。

+ +
    +
  1. +

    テーブルの列幅が指定されていない
    + Firefoxでは、display: table; の指定(mobile版Firefoxでは「-moz-box」も含む)は動作しないため、テーブルの列幅の指定にdisplay: inline-block; やdisplay: flex; を追記します。

    + +

    display: inline-block; の場合

    + + 
    　　navigation ul{
+	display: table;
+	display: inline-block;
+	width: 99.9%;
+　　}
    + +

    また、親要素をflex設定にした場合、自動的に子要素はflexアイテムになります。flexアイテム用に横方向寄せを設定しているプロパティをjustify-contentプロパティに変更します。
    + 縦方向寄せを設定しているプロパティもalign-itemsプロパティに変更します。

    + +

    display: flex; の場合

    + + 
    　　.go_contents_btn {
+	display: -webkit-box !important;
+	display: -moz-box !important;
+	display: flex !important;
+	-webkit-box-pack: center !important;
+	justify-content: center !important;
+	width: 100%;
+　　}
    + +

     

    +
    2. +
+ +

メリット

+ +

　・少ない修正で他ブラウザとの互換性が取れます。

+ +

戻る

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 +--- +

概要

+ +

　ブラウザ毎で独自のスタイルシートを持っており、使用するタグによっては、ブラウザ毎で表示が異なる場合があります。
+ 　多少デザインが異なる程度の為、ユーザー観点や操作上の問題はない場合が多いですが、代表的な例を紹介します。

+ +

例

+ +
    +
  1. +

    デフォルトのフォントが異なる
    + ブラウザ毎でデフォルトのフォントが異なる場合があります。font-styleプロパティを明示的に指定すると統一できますが、font-style: normal; で指定した場合は、表示が多少異なります。
    + 部分的に細かいpx指定をしていると、稀にレイアウトの崩れを起こすことがありますので、その場合は、明示的に指定を行う必要があります。

    + + 
    　　body {
+	margin: 0;
+	padding: 0;
+	font-style: normal;
+　　}
    + +

    +
    2. +
  2. +

    テキストの太さが異なる
    + 見出しのテキストで使用するh要素ですが、同様の要素(h2要素など)で指定しても、ブラウザによっては僅かな差異が発生する場合があります。

    + +

    +
    3. +
  3. +

    チェックボックスのデザインが異なる
    + チェックボックスの表示がブラウザ間で異なる場合があります。
    + チェックボックスには、ブラウザ毎で独自のCSSが適応されるため、多少デザインが異なります。
    + 統一させる為には、デフォルトの装飾をリセットし、別途スタイル指定を行う必要があります。

    + +

    注意：2014/12現在、mobile版Firefoxでは、ブラウザ側のスタイルをリセットするappearanceプロパティが使用できない不具合があります。

    + +

    +
    4. +
  4. +

    プルダウンメニューのデザインが異なる
    + プルダウンメニューに関しても、チェックボックスのデザインと同様に、ブラウザ毎でデザインが異なる場合があります。

    + +

    +
    5. +
+ +

ブラウザ毎で独自のCSSが適応されていますが、下記のような方法でデザインを指定することで、統一することも可能です。

+ +
　　.ipt_select_01 {
+	width: 100%;
+	color: #000;
+	background-color: ButtonFase;
+	border-color: #A9A9A9;
+　　}
+ +

戻る

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 +--- +

概要

+ +

　ベンダープレフィックス(接頭辞)付きのプロパティや値は、Firefox、Chrome等のブラウザ毎に実装が異なり、またPC版とmobile版でも異なるため、細かな配慮が必要です。
+ 　例えば、PC版Firefoxでは有効な接頭辞-moz-がmobile版Firefoxではサポートされていません。
+ 　本稿では、mobile版Chromeと同Firefoxとの実装方法の比較、Firefoxにて適用されないベンダープレフィックス付きプロパティの一覧、その書き換えの方法等の情報をまとめます。

+ +

　以下、PC版Firefox、mobile版Chrome向けの記述とmobile版Firefox向けの記述を比較した表です。

+ +
+

Mozilla CSS 拡張仕様 (-moz-)

+ +

詳細は、Mozilla 独自の CSS 拡張 をご覧ください。

+ +

＜表1 : -moz-指定された値とmobile版Firefox向け対処法＞

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
プロパティ・値意味PC版Firefox向け記述例mobile版Firefox向け対処法
-moz-box要素をボックス配置するdisplay: -moz-box;display: inline-block;
-moz-border-radius枠線の角丸を設定する-moz-border-radius: 10px;border-radius: 10px;
-moz-linear-gradientグラデーション装飾を付与するbackground: -moz-linear-gradient(top, #F0F0F0 0%, #ccc);background: linear-gradient(to top, #F0F0F0 0%, #ccc);
+ +
+

Webkit CSS 拡張仕様 (-webkit-)

+ +

詳細は、WebKit 独自の CSS 拡張 をご覧ください。

+ +

＜表2 : -webkit-指定された値とmobile版Firefox向け対処法＞

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
プロパティ・値意味mobile版Chrome向け記述例mobile版Firefox向け対処法
-webkit-appearanceブラウザデフォルトの装飾設定を適用する-webkit-appearance: none;代替指定が存在しないため、明示的にスタイル指定する
-webkit-background-size背景サイズを指定する-webkit-background-size: 26px auto;background-size: 26px auto;
-webkit-border-radius枠線の角丸を設定する-webkit-border-radius: 5px;border-radius: 5px;
-webkit-box-shadow領域のシャドーを設定する-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-sizing領域のサイズを設定する-webkit-box-sizing: border-box;box-sizing: border-box;
-webkit-gradientグラデーション装飾を付与するbackground: -webkit-gradient(linear, left bottom, left top, from(#ffffff), to(#f6f6f6));background: linear-gradient(to bottom, #ffffff, #f6f6f6);
-webkit-linear-gradientグラデーション装飾を付与するbackground: -webkit-linear-gradient(top, #00397b 0%, #01afeb 100%);background: linear-gradient(to top, #00397b 0%, #01afeb 100%);
-webkit-transform要素を移動、回転、スケーリング、傾斜させる-webkit-transform: rotate(-45deg);transform: rotate(-45deg);
-webkit-transition-durationトランジションによるアニメーションが完了するまでの所要時間を指定する-webkit-transition-duration: 100ms;JavaScriptで実装する
-webkit-transition-propertyトランジションさせるプロパティを指定する-webkit-transition-property: opacity;JavaScriptで実装する
-webkit-transition-timing-functionトランジション実行中の値の変更速度を操作する-webkit-transition-timing-function: ease-in-out;JavaScriptで実装する
+ +
+

考察

+ +

　・ベンダープレフィックスの使用は互換性を損なうため、Web標準であるCSS3での記述に統一すべきです。
+ 　　そうすることで、一つのコンテンツ記述でマルチ・ブラウザ対応が可能となります。

+ +

　・appearanceプロパティ、transitionプロパティ等(アニメーション系のCSS指定)は代替要素がないため、JavaScriptで実装し直す方が容易で確実と考えられます。

+ +

注意：backgrouond: gradient; 系統のスタイル指定については、たびたび構文が変更されており、特に注意が必要です。
+ 　　　以下のように、PC版ChromeとPC版Firefoxを比較してみても、目まぐるしく仕様変更されています。

+ +


+ ＜表3 : ブラウザとバージョンごとに異なるgradientプロパティの構文＞

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ブラウザ/バージョン構文
Chrome/3-9-webkit-gradient();
Chrome/10-25-webkit-linear-gradient();
Chrome/26以降linear-gradient();
Firefox/3.6-15-moz-linear-gradient();
Firefox/16(2012.10リリース)以降linear-gradient();
+ +

　mobile版FirefoxはCSS3準拠のため、MDN等のリファレンスを参照し、適正な設定を行うことが必要です。

+ +

参考

+ +

　・CSS グラデーションの利用 - Web developer guide | MDN
+ 　　https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_gradients

+ +

戻る

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 +--- +

概要

+ +

　mobile版Firefoxと他ブラウザで、文字列の下に引かれる下線の色が相違します。

+ +
+

+
+ +

要因

+ +

　以下のような要因が考えられます。

+ +
    +
  1. +

    mobile版Firefoxで適用されるプロパティが他ブラウザで反映されない場合
    + text-decoration-color, text-decoration-line, text-decoration-styleに相当するプロパティが他ブラウザには存在しないため、表示の差異が発生します。

    + + 
    　　インライン {
+	text-decoration: underline;
+	-moz-text-decoration-color: -moz-use-text-color;
+	-moz-text-decoration-line: underline;
+	-moz-text-decoration-style: solid;
+　　}
    +
    2. +
  2. +

    色指定の方法に間違えている場合
    + 例えば、以下のように記述されていると、下線の色は文字色となります。文字色の指定方法が間違っていた場合、下線の色が期待通りに設定されなくなります。
    + なお、text-decoration-colorは非推奨APIですのでCSS3準拠に書き替えが必要です。

    + + 
    　　text-decoration-color: -moz-use-text-color;
    +
    3. +
+ +

解決策

+ +

　各要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    mobile版Firefoxで適用されるプロパティが他ブラウザで反映されない場合

    + +

    例えば、Chromeでは下線色は文字色と等しくなり、個別設定ができません。
    + そのため、コンテンツタグの記述はFirefoxと他ブラウザとの見た目の統一が図れるよう、どのブラウザでもサポートしている装飾のみを用いる等の対処が必要です。

    + + 
    　　インライン {
+	text-decoration: underline;
+	-moz-text-decoration-color: -moz-use-text-color;
+	-moz-text-decoration-line: underline;
+	-moz-text-decoration-style: solid;
+　　}
    +
    2. +
  2. +

    色指定の方法に間違えている場合
    + text-decoration-color: -moz-use-text-color; を border-color: currentColor; に書き換えます。
    + なお、記載を修正してもまだ下線色が期待通りにならない場合は、フォント色の設定状態を確認することをお勧めします。

    + + 
    　　インライン {
+	text-decoration: underline;
+	border-color: currentColor;
+	-moz-text-decoration-line: underline;
+	-moz-text-decoration-style: solid;
+　　}
    +
    3. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。

+ +

戻る

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 +--- +

{{CSSRef}}

+ +

{{Index("/ja/docs/Web/CSS/@media")}}

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 +--- +

{{Non-standard_header}}{{ CSSRef() }}{{ Fx_minversion_header(3) }}

+ +

概要

+ +

:-moz-alt-text は読み込まれなかった画像のための代替テキストを提供する要素にマッチします。

+ +

このセレクタは主にテーマ開発者によって使用されるものです。

+ +

Bugzilla

+ +

{{ Bug(11011) }}

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 +--- +

{{Index("/ja/docs/Web/CSS")}}

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 +--- + 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: ': HTML コマンド要素' +slug: Web/HTML/Element/command +tags: + - Command + - HTML + - HTML commands + - HTML5 + - 'HTML:Element' + - 'HTML:Element Reference' + - Obsolete +translation_of: Web/HTML/Element/command +--- +
{{obsolete_header()}}
+ +

HTML のコマンド要素 (<command>) はユーザーが実行することができるコマンドを表します。コマンドは普通、メニューやツールバーのコンテンツの一部として使われます。しかし、ページ上のどこでも使用できます。

+ +
+

<command> 要素は W3C の仕様書に含まれていますが、 WHATWG の仕様書には含まれておらず、ブラウザーの互換性もありません。非標準で Edge と Firefox でしか対応していませんが、代わりに {{HTMLElement("menuitem")}} 要素を使用してください。

+
+ + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリフローコンテンツ, 記述コンテンツ, メタデータコンテンツ
許可されている内容なし。これは{{Glossary("empty element", "空要素")}}です。
タグの省略開始タグは必須です。終了タグは、空要素であるため使用できません。
許可されている親要素{{HTMLElement("colgroup")}} のみですが、これは開始要素が必須ではないので暗黙的に定義されることがあります。 {{HTMLElement("colgroup")}} は {{HTMLElement("span")}} を子として持ってはなりません。
DOM インターフェイス{{domxref("HTMLCommandElement")}}
+ +

属性

+ +

この要素にはグローバル属性があります。

+ +
+
{{htmlattrdef("checked")}}
+
コマンドが選択されているかを示します。 type 属性が checkbox または radio でなければ指定できません。
+
{{htmlattrdef("disabled")}}
+
コマンドが使用不可であることを示します。
+
{{htmlattrdef("icon")}}
+
コマンドを表す画像を与えます。
+
{{htmlattrdef("label")}}
+
ユーザに対して表示する、コマンドの名称です。
+
{{htmlattrdef("radiogroup")}}
+
この属性はコマンド自身を切り替えた時に切り替えられる、 type が radio であるコマンドのグループ名を与えます。この属性は、 type 属性が radio でなければ指定できません。
+
{{htmlattrdef("type")}}
+
この属性は、コマンドの種類を示します。以下の3つの値のうち1つが使用できます。 +
    +
  • +

    command または空文字列はデフォルトの状態で、通常のコマンドを示します。

    +
    • +
  • +

    checkbox は、コマンドがチェックボックスで切り替え可能であることを示します。

    +
    • +
  • +

    radio は、コマンドがラジオボタンで切り替え可能であることを示します。

    +
    • +
+
+
+ +

例

+ +
<command type="command" label="Save"
+    icon="icons/save.png" onclick="save()">
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.elements.command")}}

+ +

{{ HTMLRef }}

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: ': カスタム要素 (廃止)' +slug: Web/HTML/Element/element +tags: + - Element + - HTML + - Obsolete + - Web Components + - custom elements + - shadow dom +translation_of: Web/HTML/Element/element +--- +
{{HTMLRef}}{{obsolete_header}}
+ +

廃止された HTML の <element> 要素は、ウェブコンポーネントの仕様書の一部でした。新しいカスタム DOM 要素を定義するために使用することを意図していました。これは JavaScript からの新しいカスタム要素を生成する方法に取って代わられ、削除されました。

+ +
+

メモ: この要素は仕様書から削除されました。仕様書の編集者からの情報はこちらを参照してください。

+
+ + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリー透過的コンテンツ
許可されているコンテンツ???
タグの省略{{no_tag_omission}}
許可されている親コンテンツ???
DOM インターフェイス{{domxref("HTMLElement")}}
+ +

属性

+ +

この要素にはグローバル属性があります。

+ +

仕様書

+ +

<element> 要素は以前、カスタム要素の仕様書の草稿に含まれていましたが、削除されました。

+ +

ブラウザーの互換性

+ + + +

{{Compat("html.elements.element")}}

+ +

関連情報

+ +
    +
  • ウェブコンポーネント: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, {{HTMLElement("template")}}
    • +
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 +--- +
{{HTMLSidebar("Global_attributes")}}{{deprecated_header}}
+ +

dropzone グローバル属性 は、 HTML Drag and Drop API を使用して要素上にどのようなコンテンツをドロップできるかを示す列挙型属性です。以下の値を使用できます。

+ +
    +
  • copy: ドロップにより、ドロップした要素のコピーを生成することを示す
    • +
  • move: ドロップされた要素は新しい場所に移動されることを示す
    • +
  • link: ドラッグしたデータへのリンクを生成する
    • +
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML5.1')}}{{SpecName('HTML WHATWG')}} のスナップショット、初回定義。
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.dropzone")}}

+ +

関連情報

+ + 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 +--- +

Mozilla ブラウザは、標準を拡張するいくつかの HTML タグをサポートしています。その一部がドキュメント化されています。

+ +
+

{{ languages( { "en": "en/HTML/HTML_Extensions" } ) }}

+
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 +--- +

クラスベース言語とプロトタイプベース言語

+

Java や C++ といったクラスベースのオブジェクト指向言語はクラスとインスタンスという 2 つの異なる実体があるという概念に基づいています。

+
  • クラスはあるオブジェクトの集合を特徴付けるすべてのプロパティ（Java ではメソッドとフィールドを、C++ ではメンバをプロパティと見なす）を定義する。クラスとはそれが表すオブジェクトの集合の特定のメンバではなく、抽象的なものである。例えば、Employee クラスで従業員すべてを含む集合を表す。
  • 一方、インスタンスはクラスを実例にしたものである。つまり、そのメンバの 1 つということである。例えば、Victoria は Employee クラスのインスタンスとなることができる。このクラスは特定の個人を従業者として表すものである。インスタンスはその親クラスのプロパティを正確に保持する（それに他ならない）。
    • +
+

JavaScript のようなプロトタイプベース言語はこの区別がありません。単にオブジェクトがあるだけです。プロトタイプベース言語には原型的なオブジェクトという概念があります。このオブジェクトは新しいオブジェクトの初期プロパティを取得する元になるテンプレートとして使用されます。どのオブジェクトもそれ独自のプロパティを指定できます。オブジェクト作成時にも実行時にも可能です。さらに、どのオブジェクトも別のオブジェクトに対するプロトタイプとして関連付けることができます。2 つ目のオブジェクトが 1 つ目のオブジェクトのプロトタイプを共有するということもできます。

+

クラスの定義

+

クラスベース言語ではクラス定義ごとにクラスを定義します。定義では特殊なメソッドを指定してそのクラスのインスタンスを作成することができます。そのようなメソッドはコンストラクタと呼びます。コンストラクタメソッドはインスタンスのプロパティに対する初期値を指定することができます。また、作成時に他の適当な処理を実行することもできます。new 演算子をコンストラクタメソッドと一緒に用いることでクラスのインスタンスを作成できます。

+

JavaScript は同様のモデルに従っていますが、コンストラクタと別になっているクラス定義がありません。その代わりに、プロパティと値からなる特定の初期的なセットを持つオブジェクトを作成するコンストラクタ関数を定義します。どの JavaScript 関数もコンストラクタとして使用できます。new 演算子をコンストラクタ関数とともに使用することで新しいオブジェクトを作成します。

+

サブクラスと継承

+

クラスベース言語ではクラス定義を通じてクラスの階層を作ります。クラス定義では新しいクラスがある既存のクラスのサブクラスになるように指定することができます。サブクラスはスーパークラスの全プロパティを継承します。さらに新しくプロパティを追加したり継承したものを変更することもできます。例えば、Employee クラスが name および dept プロパティのみを含んでおり、Manager は reports プロパティを追加する Employee のサブクラスであるとします。この場合、Manager クラスのインスタンスは name、dept、reports という 3 つのプロパティをすべて持つことになります。

+

JavaScript では、原型的なオブジェクトをどのコンストラクタ関数にも結びつけることができるようにして継承を実装しています。そのため、全く同じような Employee と Manager の例を作成することができますが、使用する用語が若干異なります。まず、Employee コンストラクタ関数を定義します。これは name および dept プロパティを指定します。次に Manager コンストラクタ関数を定義します。これは reports プロパティを指定します。最後に新しい Employee オブジェクトを Manager コンストラクタ関数に対するプロトタイプとして代入します。そして新しい Manager を作成すると、このオブジェクトは Employee オブジェクトから name および dept プロパティを継承します。

+

プロパティの追加と削除

+

クラスベース言語では一般的にクラスをコンパイル時に生成し、コンパイル時または実行時にクラスのインスタンスを作成します。クラス定義後にそのクラスのプロパティの数や型を変更することはできません。しかし、JavaScript ではどんなオブジェクトでも実行時にプロパティを追加したり削除したりすることができます。あるオブジェクトのセットでプロトタイプとして使用されているオブジェクトにプロパティを追加すると、そのプロトタイプの使用元であるオブジェクトにも新しいプロパティが追加されます。

+

違いの概要

+

次の表でこれらの違いをいくつか短くまとめてみます。この章の残りで、JavaScript のコンストラクタとプロトタイプを用いてオブジェクト階層を作成することについての詳細を説明していきます。また、この方法が Java ではどう変わるかという比較もします。

+ +
クラスベース (Java) プロトタイプベース (JavaScript)
クラスとインスタンスは異なる実体である。 すべてのオブジェクトはインスタンスである。
クラス定義を用いてクラスを定義する。また、コンストラクタメソッドを用いてクラスをインスタンス化する。 コンストラクタ関数を用いてオブジェクトのセットを定義し、作成する。
new 演算子を用いて単一のオブジェクトを作成する。 同じ。
既存のクラスのサブクラスを定義するクラス定義を用いてオブジェクト階層を構築する。 コンストラクタ関数に結びつけられたプロトタイプとしてオブジェクトを代入することでオブジェクト階層を構築する。
クラスチェーンに従ってプロパティを継承する。 プロトタイプチェーンに従ってプロパティを継承する。
クラス定義がクラスの全インスタンスの全プロパティを指定する。実行時に動的にプロパティを追加することはできない。 コンストラクタ関数またはプロトタイプがプロパティの初期セットを指定する。個々のオブジェクトやオブジェクトの全体のセットに動的にプロパティを追加したり、それらからプロパティを除去したりできる。
+
+

{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Core_Objects:String_Object", "Core_JavaScript_1.5_Guide:The_Employee_Example") }}

+
+

{{ 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" } ) }}

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 +--- +
+{{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()")}}
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 +--- +

正規表現の作成

+

正規表現は 2 つの方法で作ることができます。

+
    +
  • 次のように、正規表現リテラルを使用する。
    • +
+
var re = /ab+c/;
+
+
+
+
+ 正規表現リテラルでは、スクリプトが評価されるときにその正規表現をコンパイルします。正規表現を定数として残しておくときは、この方法を使用するとよりよいパフォーマンスが得られます。
+
+
+
+
    +
  • 次のように、RegExp オブジェクトのコンストラクタ関数を呼び出す。
    • +
+
var re = new RegExp("ab+c");
+
+
+
+
+ コンストラクタ関数を使用すると、実行時にその正規表現をコンパイルします。正規表現パターンが変わることがわかっている場合や、パターンがわからない場合、ユーザが入力するなど、別のソースからパターンを取得する場合はコンストラクタ関数を使用してください。
+
+
+
+

{{ PreviousNext("JavaScript/Guide/Operators/Special_Operators", "JavaScript/Guide/Writing_a_Regular_Expression_Pattern") }}

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 +--- +

ゲッターとセッターの定義

+ +

ゲッターはある属性の値を取得するメソッドです。セッターは属性に値を設定するメソッドです。全ての定義済みコアオブジェクトと、新しいプロパティの追加をサポートしているユーザ定義オブジェクトに対してゲッターとセッターを定義できます。ゲッターとセッターの定義にはオブジェクトリテラル構文を使用します。

+ +

以下の例では、ユーザ定義オブジェクト o についてゲッターとセッターがどのように機能するかを説明します。JavaScript シェル とは JavaScript コードをバッチモードで、またはインタラクティブにテストすることができる、開発者向けのアプリケーションのことです。

+ +

o オブジェクトのプロパティは以下のとおりです。

+ +
    +
  • o.a - 数値
    • +
  • o.b - o.a に 1 を加えて返すゲッター
    • +
  • o.c - o.a の値にその値の 1/2 の値をセットするセッター
    • +
+ +
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>
+
+ +

次の例では、 Date プロトタイプを拡張して定義済み Date クラスの全インスタンスに year プロパティを追加する様子を表しています。Date クラスの既存の getFullYear および setFullYear メソッドを使用して year プロパティのゲッターとセッターを実装します。

+ +

これらの文は year プロパティに対するゲッターとセッターを定義しています。

+ +
js> var d = Date.prototype;
+js> d.__defineGetter__("year", function() { return this.getFullYear(); });
+js> d.__defineSetter__("year", function(y) { this.setFullYear(y); });
+
+ +

これらの文は Date オブジェクトで定義したゲッターとセッターを使用しています。

+ +
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
+
+ +
JavaScript 1.5 の開発期間中に getter = や setter = といった式を使用して新しいゲッターやセッターを既存のオブジェクトで定義するようになっていた時期がありました。この構文は現在は廃止予定であり、現行の JS 1.5 エンジンでは警告を発します。また、将来的には構文エラーになります。使用を避けるようにしてください
+ +

 

+ +

概要

+ +

原則的にゲッターとセッターは次のどちらかに属します。

+ +
    +
  • オブジェクト初期化子 を用いて定義されたもの
    • +
  • ゲッターやセッターを追加するメソッドを用いてオブジェクトに後から追加されたもの
    • +
+ +

オブジェクト初期化子 を用いてゲッターやセッターを定義する際には、ゲッターメソッドの先頭に get を、セッターメソッドの先頭に set をそれぞれ付けなくてはなりません。セッターメソッドはセットする新しい値を受けわたすための引数を 1 つだけ持ちます。ゲッターメソッドはパラメータを受け取るようにしてはいけません。

+ +
o = {
+  a:7,
+  get b() { return this.a+1; },
+  set c(x) { this.a = x/2; }
+};
+
+ +

ゲッターもセッターも、__defineGetter__ および __defineSetter__ という 2 つの特別なメソッドを用いて、オブジェクト作成後でも、そのオブジェクトに追加することができます。両メソッドの第 1 引数にはそのゲッターやセッターの名前を文字列で指定します。第 2 引数にはゲッターやセッターとして呼び出す関数を指定します。前の例を別の方法で実装したものを以下に示します。

+ +
o.__defineGetter__("b", function() { return this.a+1; });
+o.__defineSetter__("c", function(x) { this.a = x/2; });
+
+ +

2 つの形式のうちどちらを選択するかはあなたのプログラミングスタイルや、目の前の課題次第によります。プロトタイプの定義時にオブジェクト初期化子を使用しているのであれば、最初の形式を選択するのがよいでしょう。この形式はよりコンパクトかつ自然です。ゲッターやセッターを後から追加する必要がある場合は、プロトタイプや特定のオブジェクトを書いていないため、第 2 の形式しか使用できません。第 2 の形式は JavaScript の動的性質をおそらく最もよく表していますが、コードが可読性が下がったり、理解しづらいものとなることがあります。

+ +
+

Firefox 3.0 より前のバージョンではゲッターとセッターが DOM 要素に対してサポートされていません。古いバージョンの Firefox では例外を投げることなく失敗します。そのときに例外が必要であれば、HTMLElement のプロトタイプを変更し (HTMLElement.prototype.__define{{ mediawiki.external('SG') }}etter__)、例外を投げるようにして回避してください。

+ +

Firefox 3.0 では、定義済みのプロパティでゲッターとセッターを定義すると例外が投げられます。そのプロパティは事前に削除しておく必要があります。これは古いバージョンの Firefox には当てはまりません。

+
+ +

{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Using_this_for_Object_References", "JavaScript/Guide/Creating_New_Objects/Deleting_Properties") }}

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 +--- +

メソッドの定義

+

メソッドとはあるオブジェクトに結びつけられた関数のことです。メソッドは、通常の関数の定義と同じ方法で定義します。既存のオブジェクトに関数を結びつけるには次の構文を使用します。

+
object.methodname = function_name
+
+

ここで、object は既存のオブジェクトを、methodname はメソッドに割り当てる名前を、function_name は関数の名前をそれぞれ表しています。

+

すると、次のようにしてオブジェクトのコンテキストでそのメソッドを呼び出すことができます。

+
object.methodname(params);
+
+

オブジェクトのコンストラクタ関数にメソッドの定義を含めることで、あるオブジェクトの種類についてのメソッドを定義することができます。例えば、以前に定義した car オブジェクトのプロパティを整形して表示する関数を定義します。

+
function displayCar() {
+   var result = "A Beautiful " + this.year + " " + this.make
+      + " " + this.model;
+   pretty_print(result);
+}
+
+

pretty_print は水平方向の罫線と文字列を表示する関数です。this を使用してそのメソッドを抱えているオブジェクトを参照しています。

+

次の文

+
this.displayCar = displayCar;
+
+

をオブジェクトの定義に加えることで、この関数を car のメソッドにすることができます。そうすると、car の完全な定義は次のようになります。

+
function car(make, model, year, owner) {
+   this.make = make;
+   this.model = model;
+   this.year = year;
+   this.owner = owner;
+   this.displayCar = displayCar;
+}
+
+

すると、次のようにして各オブジェクトについて displayCar メソッドを呼び出すことができます。

+
car1.displayCar()
+car2.displayCar()
+
+

こうすると次の図のような出力が得られます。

+

Image:obja.gif 図 7.1：メソッドの出力の表示

+

{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type", "JavaScript/Guide/Creating_New_Objects/Using_this_for_Object_References") }}

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 +--- +

あるオブジェクトの種類に対するプロパティの定義

+

prototype プロパティを用いて、定義済みのオブジェクトの種類にプロパティを追加することができます。この方法では、指定した種類のすべてのオブジェクトで共有されるプロパティを定義することになります。そのオブジェクトのあるインスタンス 1 つだけということではありません。次のコードは color プロパティを car という種類の全オブジェクトに追加し、値をオブジェクト car1 の color プロパティに代入します。

+
car.prototype.color=null;
+car1.color="black";
+
+

詳しくは コア JavaScript リファレンス 内の Function オブジェクトの prototype プロパティ を参照してください。

+ +

{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Indexing_Object_Properties", "JavaScript/Guide/Creating_New_Objects/Defining_Methods") }}

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 +--- +

プロパティの削除

+

delete 演算子を用いることでプロパティを除去することができます。次のコードでプロパティの除去方法を示します。

+
// 新しいオブジェクト myobj を作成。2 つのプロパティ、a および b を持つ。
+myobj = new Object;
+myobj.a = 5;
+myobj.b = 12;
+
+// a プロパティを除去。myobj には b プロパティだけが残っている。
+delete myobj.a;
+
+

delete を使用することでグローバル変数を削除することもできます。ただし、これは var キーワードを使用せずにその変数を宣言した場合のみです。

+
g = 17;
+delete g;
+
+

さらなる情報については delete をご覧ください。

+

{{PreviousNext("JavaScript/Guide/Creating_New_Objects/Defining_Getters_and_Setters", "JavaScript/Guide/Predefined_Core_Objects")}}

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 +--- +

新しいオブジェクトの作成

+

JavaScript には多くの定義済みオブジェクトがあります。さらに、自分でオブジェクトを作り出すことができます。JavaScript 1.2 以降では、オブジェクト初期化子を用いてオブジェクトを作成できます。もう 1 つの方法として、まずコンストラクタ関数を作成し、それからその関数と new 演算子を用いてオブジェクトのインスタンスを作成することもできます。

+ +

{{ PreviousNext("JavaScript/Guide/Objects_and_Properties", "JavaScript/Guide/Creating_New_Objects/Using_Object_Initializers") }}

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 +--- +

オブジェクトのプロパティのインデックス付け

+

JavaScript 1.0 では、オブジェクトのプロパティを、そのプロパティ名や順序のインデックスで参照できます。しかしながら、JavaScript 1.1 以降では、最初にプロパティをその名前で定義すると、常にその名前で参照しなければならず、また、最初にプロパティをインデックスで定義すると、常にそのインデックスで参照しなければなりません。

+

先の Car というオブジェクトの種類の例のようにコンストラクタ関数を用いてオブジェクトとそのプロパティを作成したとき、また、それぞれのプロパティを明示的に定義したとき（例：myCar.color = "red"）に、これは適用されます。そのため、myCar{{ mediawiki.external(5) }} = "25 mpg" のように、最初にインデックスを用いてオブジェクトのプロパティを定義した場合、myCar{{ mediawiki.external(5) }} のようにそのプロパティを後から参照できるようになります。

+

このルールの例外は、forms 配列のように HTML から反映されたオブジェクトです。これらの配列内のオブジェクトは、その順番を表す数（文書内のどこにあるかに基づく）か、またはその名前（定義されている場合）のどちらかで常に参照できます。例えば、文書内の 2 番目の <FORM> タグが "myForm" という NAME 属性を持っている場合、document.forms{{ mediawiki.external(1) }} や document.forms{{ mediawiki.external('\"myForm\"') }} や document.myForm とすることでそのフォームを参照できます。

+

{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function", "JavaScript/Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type") }}

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 +--- +

コンストラクタ関数の使用

+

もう 1 つの方法として、次の 2 つのステップでオブジェクトを作成することができます。

+
    +
  1. コンストラクタ関数を書くことでオブジェクトの種類を定義する。
    2. +
  2. new を用いてそのオブジェクトのインスタンスを作成する。
    3. +
+

オブジェクトの種類を定義するために、その名前、プロパティ、メソッドを定義する関数を作成する必要があります。例えば、車についてのオブジェクトの種類を作成したいとします。そしてこの種類のオブジェクトに car という名前を付け、make、model、および year というプロパティを持たせたいとします。こうするためには次のような関数を書きます。

+
function car(make, model, year) {
+   this.make = make;
+   this.model = model;
+   this.year = year;
+}
+
+

関数に渡された値に基づいてオブジェクトのプロパティに値を代入するために this を使用しています。

+

すると、次のようにして mycar というオブジェクトを作成することができるようになります。

+
mycar = new car("Eagle", "Talon TSi", 1993);
+
+

この文は mycar を作成し、そのプロパティ用に指定した値を代入します。その結果、mycar.make の値は "Eagle" という文字列、mycar.year は 1993 という整数というようになります。

+

new を呼び出すことで car オブジェクトをいくらでも作ることができます。

+
kenscar = new car("Nissan", "300ZX", 1992);
+vpgscar = new car("Mazda", "Miata", 1990);
+
+

それ自身別のオブジェクトであるというようなプロパティを持つオブジェクトを作ることができます。例えば、次のように person というオブジェクトを定義するとします。

+
function person(name, age, sex) {
+   this.name = name;
+   this.age = age;
+   this.sex = sex;
+}
+
+

そして、次のように 2 つの新しい person オブジェクトのインスタンスを作成します。

+
rand = new person("Rand McKinnon", 33, "M");
+ken = new person("Ken Jones", 39, "M");
+
+

次のようにして、car の定義を書き換えて、person オブジェクトをとる owner プロパティを持たせることができます。

+
function car(make, model, year, owner) {
+   this.make = make;
+   this.model = model;
+   this.year = year;
+   this.owner = owner;
+}
+
+

新しいオブジェクトのインスタンスを作成するために、次のようにします。

+
car1 = new car("Eagle", "Talon TSi", 1993, rand);
+car2 = new car("Nissan", "300ZX", 1992, ken);
+
+

新しいオブジェクトの作成時に文字列リテラルや整数値を渡す代わりに、上記の文ではオブジェクト rand および ken を所有者を表す引数として渡しています。car2 の所有者の名前を知りたい場合は次のプロパティにアクセスすることで可能になります。

+
car2.owner.name
+
+

以前に定義したオブジェクトにいつでもプロパティを追加できることに注意してください。例えば次の文

+
car1.color = "black"
+
+

はプロパティ color を car1 に追加し、それに "black" という値を代入します。しかしながら、この方法では他のどのオブジェクトにも影響を与えません。同じ種類の全オブジェクトに新しいプロパティを追加するには、そのプロパティを car というオブジェクトの種類の定義に追加する必要があります。

+

{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Using_Object_Initializers", "JavaScript/Guide/Creating_New_Objects/Indexing_Object_Properties") }}

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 +--- +

オブジェクト初期化子の使用

+

コンストラクタ関数を使用してオブジェクトを作成する方法だけではなく、オブジェクト初期化子を使用してもオブジェクトを作成することができます。オブジェクト初期化子を使うことはリテラル表示を用いてオブジェクトを作成するということです。「オブジェクト初期化子」は C++ でも同じ意味で使用されている用語です。

+

オブジェクト初期化子を使用したオブジェクトの構文は次のとおりです。

+
var obj = { property_1:   value_1,   // property_# は識別子でもよい
+            2:            value_2,   // あるいは数値でもよい
+            ...,
+            "property_n": value_n }; // あるいは文字列でもよい
+
+

ここで、obj は新しいオブジェクトの名前を、各 property_i は識別子（名前、数値、文字列リテラルのいずれか）を、各 value_i はその値を property_i に代入する式をそれぞれ表しています。obj および代入部分はなくてもかまいません。このオブジェクトを別の場所で参照する必要がないのであれば変数に代入する必要はありません。（文が期待されているところにオブジェクトリテラルを置く場合、リテラルを丸括弧で囲み、ブロック文と間違われないようにする必要があるかもしれません。）

+

トップレベルのスクリプトでオブジェクト初期化子を使用してオブジェクトを作成した場合、JavaScript はオブジェクトリテラルを含む式を評価するたびにそのオブジェクトを解釈します。さらに、関数内で使用された初期化子はその関数が呼び出されるたびに作成されます。

+

次の文は、式 cond が true の場合かつその場合に限り、あるオブジェクトを作成し、それを変数 x に代入します。

+
if (cond) x = {hi:"there"};
+
+

次の例は 3 つのプロパティを持つ myHonda を作成します。engine プロパティは自らもプロパティを持つオブジェクトでもあることに注意してください。

+
myHonda = {color:"red",wheels:4,engine:{cylinders:4,size:2.2}};
+
+

オブジェクト初期化子を使用して配列を作成することもできます。配列リテラル を参照してください。

+

JavaScript 1.1 以前ではオブジェクト初期化子を使用することはできません。コンストラクタ関数を使用するか、他のオブジェクトが備えているそのような用途の関数を使用しないとオブジェクトを作成できません。コンストラクタ関数の使用 をご覧ください。

+

{{ PreviousNext("JavaScript/Guide/Creating_New_Objects", "JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function") }}

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 +--- +

this を用いたオブジェクト参照

+

JavaScript にはカレントオブジェクトを参照するメソッド内で使用できる特殊なキーワード、this があります。例えば、あるオブジェクトの value プロパティの妥当性を確認する validate という関数があるとします。関数にはそのオブジェクトと、上限および下限の値を渡します。

+
function validate(obj, lowval, hival) {
+   if ((obj.value < lowval) || (obj.value > hival))
+      alert("Invalid Value!");
+}
+
+

各フォーム要素の onchange イベントハンドラにおいて validate を呼び出します。this を使うことで form 要素を渡すことができます。次の例をご覧ください。

+
<input type="text" name="age" size="3"
+   onChange="validate(this, 18, 99)">
+
+

一般に this はあるメソッド内でそのメソッドを呼び出したオブジェクトを参照します。

+

form プロパティと組み合わせることで、this はカレントオブジェクトの親のフォームを参照できます。次の例では、myForm というフォームに Text オブジェクトとボタンが格納されています。ユーザがボタンをクリックすると、Text オブジェクトの値にフォーム名がセットされます。ボタンの onclick イベントハンドラは this.form を利用して親のフォームである myForm を参照します。

+
<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>
+
+

{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Defining_Methods", "JavaScript/Guide/Creating_New_Objects/Defining_Getters_and_Setters") }}

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 +--- +
{{ 英語版章題("Expressions") }}
+

式

+

式とは、リテラル、変数、演算子、そして単一の値に評価する式からなる有効なセットです。この値には数値、文字列、論理値が使用できます。

+

概念的に、式は 2 つの種類に分けることができます。ある値を変数に代入するものと、単純にある値を持つものです。例えば、x = 7 という式は x に 7 という値を代入する式です。この式自体の評価結果は 7 です。このような式では代入演算子を用います。一方、3 + 4 という式では単純に評価結果が 7 になります。この式は代入を行いません。このような式で用いられる演算子は単に演算子と呼ばれます。

+

JavaScript には以下の種類の式があります。

+
    +
  • 算術式：数値に評価する。例えば 3.14159。（一般に 算術演算子 を使用）
    • +
  • 文字列式：文字列に評価する。例えば "Fred" や "234"。（一般に 文字列演算子 を使用）
    • +
  • 論理式：true または false に評価する。（よく 論理演算子 を用いる)
    • +
  • オブジェクト式：オブジェクトに評価する。（オブジェクトに評価するさまざまな例については 特殊演算子 を参照）
    • +
+

{{ PreviousNext("JavaScript/Guide/Unicode", "JavaScript/Guide/Operators") }}

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 +--- +

break 文

+

break 文は loop 文や switch 文、label 文から抜け出すために使用します。

+
    +
  • break にラベルを使用しないと、最も内側にある while や do-while、for、switch から抜け、続く文にコントロールを移します。
    • +
  • break にラベルを使用すると、指定されたラベルの付いた文から抜けます。
    • +
+

break 文は次のように使用します。

+
    +
  1. break;
    2. +
  2. break label;
    3. +
+

１番目の形式の構文は最も内側のループもしくは switch から抜けます。２番目の形式の構文は指定した label 文から抜けます。

+

例
+ 次の例は、その値が theValue である要素のインデックスが見つかるまで、配列の要素について繰り返します。

+
for (i = 0; i < a.length; i++) {
+   if (a[i] == theValue)
+      break;
+}
+
+

{{ PreviousNext("JavaScript/Guide/Loop_Statements/label_Statement", "JavaScript/Guide/Loop_Statements/continue_Statement") }}

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 +--- +

continue 文

+

continue 文は while 文、do-while 文、for 文、label 文をリスタートさせるために用います。

+
    +
  • ラベルを用いずに continue を使用した場合、現在繰り返している最も内側にある while 文 do-while 文、for 文を終了し、次の反復の実行に移ります。break 文とは異なり、continue はループ全体の実行を終了しません。while ループでは条件比較部分に戻ります。for ループではインクリメントの式に移ります。
    • +
  • ラベルを用いて continue を使用した場合、label で指定されたループ文に移ります。
    • +
+

continue 文は次のように使用します。

+
    +
  1. continue
    2. +
  2. continue label
    3. +
+

例 1
+ 次の例では、i の値が 3 のときに実行される continue 文を用いた while ループを示します。こうすることで n は順に 1、3、7、12 という値をとります。

+
i = 0;
+n = 0;
+while (i < 5) {
+   i++;
+   if (i == 3)
+      continue;
+   n += i;
+}
+
+

例 2
+ checkiandj というラベルの付いた文の中に checkj というラベルの付いた文があります。continue に出くわすと、プログラムは checkj の現在の反復を終了し、次の反復を始めます。continue に出くわすたびに、条件が false になるまで checkj を繰り返します。false が返されると checkiandj 文の残りを完了し、条件が false を返すまで checkiandj を繰り返します。false が返されると checkiandj に続く文が実行されます。

+

continue が checkiandj というラベルを持っているとプログラムは checkiandj 文の最初から続けます。

+
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/>");
+   }
+
+

{{ PreviousNext("JavaScript/Guide/Loop_Statements/break_Statement", "JavaScript/Guide/Object_Manipulation_Statements") }}

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 +--- +

do...while 文

+

do...while 文は指定した条件が false に評価されるまで繰り返します。do...while 文は次のように使用します。

+
do
+   statement
+while (condition);
+
+

statement は条件がチェックされる前に一度実行されます。複数の文を実行するにはブロック文 ({ ... }) を使用して文をグループ化してください。condition が true の場合、その文が再び実行されます。毎回実行された後に条件がチェックされます。条件が false ときは実行が停止され、コントロールが do...while の後に続く文に渡されます。

+

例
+ 次の例では do ループは最低 1 回は反復され、i が 5 より小さくなくなるまで反復されます。

+
do {
+   i += 1;
+   document.write(i);
+} while (i < 5);
+
+

{{ PreviousNext("JavaScript/Guide/Loop_Statements/for_Statement", "JavaScript/Guide/Loop_Statements/while_Statement") }}

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 +--- +

for 文

+

for ループは指定した条件が false に評価されるまで繰り返します。JavaScript の for ループは Java や C の for ループに似ています。for 文は次のように使用します。

+
for ([initialExpression]; [condition]; [incrementExpression])
+   statement
+
+

for ループを実行すると以下のことが起こります。

+
    +
  1. 初期化式 initialExpression があれば実行されます。この式は通常、1 つかそれ以上のループカウンタを初期化しますが、構文的にはある程度複雑な式も指定できます。また、この式は変数を宣言することもできます。
    2. +
  2. condition 式が評価されます。condition の値が true であればループ文が実行されます。condition が false の場合は for ループは終了します。condition 式が完全に省略されている場合、条件は true であると仮定されます。
    3. +
  3. statement が実行されます。複数の式を実行するにはブロック文 ({ ... }) を使用して文をグループ化してください。
    4. +
  4. 更新式 incrementExpression があれば実行されます。そしてコントロールがステップ 2 に戻ります。
    5. +
+

例
+ 次の関数には、スクローリングリスト（複数選択できる Select オブジェクト）で選択されたオプションの数を数える for 文が含まれています。for 文では変数 i が宣言され、それが 0 に初期化されています。i が Select オブジェクトのオプションの個数より小さいかをチェックし、続く if 文を実行し、ループが 1 回りしたら i を 1 だけ増加させます。

+
<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>
+
+

{{ PreviousNext("JavaScript/Guide/Loop_Statements", "JavaScript/Guide/Loop_Statements/do...while_Statement") }}

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 +--- +

ループ文

+

ループは指定した条件が満たされている限り繰り返し実行されるコマンドのセットです。JavaScript は、label はもちろん、for、do while、while といったループ文をサポートしています（label 自体はループ文ではありませんが、これらの文とともに頻繁に使用されます）。さらに、break および continue 文をループ文の中で使うことができます。

+

さらに for...in 文も文を繰り返し実行しますが、これはオブジェクトの操作に使用します。オブジェクト操作文 をご覧ください。

+

ループ文は以下のとおりです。

+ +

{{ PreviousNext("JavaScript/Guide/Conditional_Statements", "JavaScript/Guide/Loop_Statements/for_Statement") }}

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 +--- +

label 文

+

label を使うと、そのプログラムのどこからでも参照できる、識別子を持った文を作ることができます。例えば、ラベルを使用してあるループに名前を付けると、break 文や continue 文を使用してプログラムがループを脱出するべきかそのまま実行を継続するべきかを示すことができます。

+

label 文は次のように使用します。

+
label :
+   statement
+
+

label の値は予約語でなければどんな JavaScript の識別子でも使用できます。ラベルを用いて名前を付ける statement はどんな文でも結構です。

+

例
+ この例では markLoop というラベルを用いて while ループに名前を付けています。

+
markLoop:
+while (theMark == true)
+   doSomething();
+}
+
+

{{ PreviousNext("JavaScript/Guide/Loop_Statements/while_Statement", "JavaScript/Guide/Loop_Statements/break_Statement") }}

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 +--- +

while 文

+

while 文は、指定した条件が true に評価される限り文を実行します。while 文は次のように使用します。

+
while (condition)
+   statement
+
+

条件が false になるとループ内の statement の実行が停止し、ループの後に続く文にコントロールが渡されます。

+

ループの statement を実行する前に条件がテストされます。条件が true を返すと statement が実行され、再び条件がテストされます。条件が false を返すと、実行が停止され、while の後に続く文にコントロールが渡されます。

+

複数の文を実行するにはブロック文 ({ ... }) を用いて文をグループ化してください。

+

例 1
+ 次の while ループでは n が 3 より小さい限り反復されます。

+
n = 0;
+x = 0;
+while (n < 3) {
+   n++;
+   x += n;
+}
+
+

それぞれの反復で、ループは n をインクリメントし、その値を x に加えています。その結果、x と n は次の値をとります。

+
    +
  • 第 1 段階終了後：n = 1、x = 1
    • +
  • 第 2 段階終了後：n = 2、x = 3
    • +
  • 第 3 段階終了後：n = 3、x = 6
    • +
+

第 3 段階が完了すると条件 n < 3 が true ではなくなっているため、ループは終了します。

+

例 2
+ 無限ループは避けてください。ループの条件が最終的には false になることを確認してください。そうしないとループが終了しなくなります。次の while ループ内の文は永久に実行されます。条件が決して false にならないためです。

+
while (true) {
+   alert("Hello, world");
+}
+
+

{{ PreviousNext("JavaScript/Guide/Loop_Statements/do...while_Statement", "JavaScript/Guide/Loop_Statements/label_Statement") }}

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 +--- +

オブジェクト操作文

+

JavaScript はオブジェクトの操作に for...in、for each...in および with 文を使用します。

+

for...in 文

+

for...in 文は指定した変数をオブジェクトの全プロパティに対して反復します。それぞれのプロパティに対して JavaScript は指定した文を実行します。for...in 文は次のように使用します。

+
for (variable in object) {
+   statements
+}
+
+

例
+ 次の関数は、あるオブジェクトとそのオブジェクトの名前を引数にとります。そしてそのオブジェクトの全プロパティに対して反復し、プロパティ名とその値のリストにした文字列を返します。

+
function dump_props(obj, obj_name) {
+   var result = "";
+   for (var i in obj) {
+      result += obj_name + "." + i + " = " + obj[i] + "<br>";
+   }
+   result += "<hr>";
+   return result;
+}
+
+

make および model というプロパティを持つ car というオブジェクトでは次のような結果が得られます。

+
car.make = Ford
+car.model = Mustang
+
+

配列
+ Array の要素に対して反復する方法としてこれを用いることは魅力的かもしれませんが、for...in 文はその配列の要素に加えてユーザ定義プロパティに対して繰り返すため、独自のプロパティやメソッドを追加するなどして Array オブジェクトに変更を加えると for...in 文は数値のインデックスに加えてユーザ定義プロパティの名前を返します。したがって、配列に対して反復したいときには数値のインデックスを用いた従来の for ループを使用したほうがいいでしょう。

+

for each...in 文

+

for each...in は JavaScript 1.6 で導入されるループ文です。これは for...in に似ていますが、オブジェクトのプロパティの名前ではなく、プロパティの値に対して反復します。

+

with 文

+

with 文はデフォルトのオブジェクトについて文のセットを実行します。JavaScript はその文のセットにおいて非修飾名を検索し、その名前がデフォルトのオブジェクトのプロパティであるかを決定します。非修飾名がプロパティにマッチすると、そのプロパティがその文で使われます。そうでない場合はローカル変数かグローバル変数が使われます。

+

with 文は次のように使用します。

+
with (object) {
+   statements
+}
+
+

例
+ 次の with 文では Math オブジェクトがデフォルトのオブジェクトに指定されています。with 文内の文は PI プロパティや cos および sin メソッドを参照していますが、オブジェクトは指定していません。JavaScript はこれらの参照は Math オブジェクトへのものであると想定します。

+
var a, x, y;
+var r = 10;
+with (Math) {
+   a = PI * r * r;
+   x = r * cos(PI);
+   y = r * sin(PI/2);
+}
+
+

注意：with 文を使うことでプログラムをより簡潔にすることができますが、with の不適切な使用はプログラムを大幅にスローダウンさせることに繋がります。Core JavaScript 1.5 Reference:Statements:with を参照してください。

+ +

{{ PreviousNext("JavaScript/Guide/Loop_Statements/continue_Statement", "JavaScript/Guide/Comments") }}

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 +--- +

オブジェクトとプロパティ

+

JavaScript のオブジェクトには、それに結びつけられたプロパティがあります。簡単な記法でオブジェクトのプロパティにアクセスできます。

+
objectName.propertyName
+
+

オブジェクト名もプロパティ名も大文字と小文字を区別します。プロパティの定義は、そのプロパティに値を代入することで行います。例えば、myCar という名前のオブジェクトがあるとします（今回はオブジェクトが既に存在していると仮定）。次のようにして、そのオブジェクトに make、model、year という名前のプロパティをそれぞれ作成することができます。

+
myCar.make = "Ford";
+myCar.model = "Mustang";
+myCar.year = 1969;
+
+

配列はある単一の変数名に結びつけられた値の順序集合です。JavaScript におけるプロパティと配列は密接に関連しています。事実、それらは同一のデータ構造への異なるインタフェースなのです。そのため、例えば次のようにして myCar オブジェクトのプロパティにアクセスすることができます。

+
myCar["make"] = "Ford";
+myCar["model"] = "Mustang";
+myCar["year"] = 1969;
+
+

この手の配列は連想配列として知られています。それぞれのインデックスの要素が文字列にも結びつけられているからです。これがどう動作するかというと、次の関数は引数としてオブジェクトとそのオブジェクトの名前を渡すとオブジェクトのプロパティを表示します。

+
function show_props(obj, obj_name) {
+   var result = "";
+   for (var i in obj)
+      result += obj_name + "." + i + " = " + obj[i] + "\n";
+   return result;
+}
+
+

関数 show_props(myCar, "myCar") を呼び出すと以下の結果が返されます。

+
myCar.make = Ford
+myCar.model = Mustang
+myCar.year = 1969
+
+

{{ PreviousNext("JavaScript/Guide/Predefined_Functions/escape_and_unescape_Functions", "JavaScript/Guide/Creating_New_Objects") }}

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 +--- +

算術演算子

+

算術演算子は、そのオペランドに数値（リテラルか変数）をとり、1 つの数値を返します。標準的な算術演算子は、加算 (+)、減算 (-)、乗算 (*)、除算 (/) です。これらの演算子は他のほとんどのプログラミング言語と同じように機能しますが、そのときの数値は、浮動小数点数として扱われます（0 で除算した結果は、NaN になることにも注意してください）。

+
1 / 2 // JavaScript では 0.5 を返す
+1 / 2 // Java では 0 を返す（どちらの数も浮動小数点数として明記されていない）
+
+1.0 / 2.0  // JavaScript でも Java でも 0.5 を返す
+
+

さらに、JavaScript では以下の表で示された算術演算子も使用できます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
演算子説明例
%
+ （モジュロ）		2 項演算子。2 つのオペランドで除算したときの整数の余りを返す。12 % 5 は 2 を返す。
++
+ （インクリメント）		単項演算子。オペランドに 1 を加える。前置演算子 (++x) を使った場合、オペランドに 1 を加えた後にその値を返す。後置演算子 (x++) を使った場合、オペランドに 1 を加える前にその値を返す。x が 3 のとき、++x は x に 4 をセットし、4 を返す。一方、x++ は x に 4 をセットし、3 を返す。
--
+ （デクリメント）		単項演算子。オペランドから 1 を引く。戻り値はインクリメント演算子のものと同様。x が 3 のとき、--x は x に 2 をセットし、2 を返す。一方、x-- は x に 2 をセットし、3 を返す。
-
+ （符号反転）		単項演算子。オペランドの符号を反転してその値を返す。x が 3 のとき、-x は -3 を返す。
+

表 3.4：算術演算子

+

{{ PreviousNext("JavaScript/Guide/Operators/Comparison_Operators", "JavaScript/Guide/Operators/Bitwise_Operators") }}

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 +--- +

代入演算子

+

代入演算子は、右のオペランドの値に基づいた値を左のオペランドに代入します。基本的な代入演算子はイコール (=) ですが、これは右のオペランドの値を左のオペランドに代入します。すなわち、x = y では y の値を x に代入します。

+

他の代入演算子は標準的な演算をするための短縮表記があります。次の表でそれを示します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
短縮表記した演算子意味
x += yx = x + y
x -= yx = x - y
x *= yx = x * y
x /= yx = x / y
x %= yx = x % y
x <<= yx = x << y
x >>= yx = x >> y
x >>>= yx = x >>> y
x &= yx = x & y
x ^= yx = x ^ y
x |= yx = x | y
+

表 3.2：代入演算子

+

{{ PreviousNext("JavaScript/Guide/Operators", "JavaScript/Guide/Operators/Comparison_Operators") }}

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 +--- +

比較演算子

+

This seems to me kind of poorly explained, mostly the diference betwen "==" and "==="... 比較演算子は、オペランドを比較し、比較結果に基づいた論理値を返します。オペランドには数値、文字列、論理値、オブジェクトが使用できます。文字列は、Unicode 値を用いて標準的な辞書順に基づいて比較されます。ほとんどの場合、2 つのオペランドが異なる型ならば JavaScript はそのオペランドを比較に適した型に変換しようとします（このルールの唯一の例外は === および !== であり、これらは厳密に等値か否かを判断し、等値性をチェックする前にオペランドを適合する型に変換するということはありません）。これは一般に数値の比較が実行されることになります。次の表では比較演算子について説明します。次のコードで考えます。

+
var var1 = 3, var2 = 4;
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
演算子説明true を返す例
等しい (==)オペランドが等しい場合に true を返す。3 == var1
+

"3" == var1

+ 3 == '3'
等しくない (!=)オペランドが等しくない場合に true を返す。var1 != 4
+ var2 != "3"
厳密に等しい (===)オペランドが等しく、かつ同じ型である場合に true を返す。3 === var1
厳密には等しくない (!==)オペランドが等しくなく、かつ/または同じ型でない場合に true を返す。var1 !== "3"
+ 3 !== '3'
より大きい (>)左のオペランドが右のオペランドよりも大きい場合に true を返す。var2 > var1
+ "12" > 2
以上 (>=)左のオペランドが右のオペランド以上である場合に true を返す。var2 >= var1
+ var1 >= 3
より小さい (<)左のオペランドが右のオペランドよりも小さい場合に true を返す。var1 < var2
+ "12" < "2"
以下 (<=)左のオペランドが右のオペランド以下である場合に true を返す。var1 <= var2
+ var2 <= 5
+

表 3.3：比較演算子

+

{{ PreviousNext("JavaScript/Guide/Operators/Assignment_Operators", "JavaScript/Guide/Operators/Arithmetic_Operators")}}

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 +--- +

論理演算子

+

論理演算子では基本的に真偽（論理）値を用います。そのような値があると真偽値を返します。しかし、&& および || 演算子は実際には指定されたオペランドの一方の値を返します。そのため、非真偽値とともに論理演算子が使われると非真偽値を返します。論理演算子について次の表で説明します。

+ + + + + + + + + + + + + + + + + + + + + + + +
演算子使用法説明
&&expr1 && expr2（論理 AND）expr1 を false と見ることができる場合は expr1 を返す。そうでない場合は expr2 を返す。したがって、真偽値が使われた場合、両オペランドが true の場合は && は true を返し、そうでない場合は false を返す。
||expr1 || expr2（論理 OR）expr1 を true と見ることができる場合は expr1 を返す。そうでない場合は expr2 を返す。したがって、真偽値が使われた場合、どちらかのオペランドが true の場合は || は true を返し、両方とも false の場合は false を返す。
!!expr（論理 NOT）オペランドを true と見ることができる場合は false を返す。そうでない場合は true を返す。
+

表 3.7：論理演算子

+

false と見ることができる式とは、null、0、空文字列 ("")、または undefined に評価される式のことです。

+

以下のコードで &&（論理 AND）演算子の例を示します。

+
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 を返す
+
+

以下のコードで ||（論理 OR）演算子の例を示します。

+
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 を返す
+
+

以下のコードで !（論理 NOT）演算子の例を示します。

+
n1=!true              // !t は false を返す
+n2=!false             // !f は true を返す
+n3=!"Cat"             // !t は false を返す
+
+

ショートサーキット評価

+

論理式は左から右に評価されるため、以下のルールを用いることで「ショートサーキット」評価ができるようになっています。

+
    +
  • false && anything は false にショートサーキット評価する。
    • +
  • true || anything は true ショートサーキット評価する。
    • +
+

論理のルールはこれらの評価が常に正確であることを保証しています。上記の式の anything の部分は評価されないため、何らかの副作用が生じないように注意してください。

+

{{ PreviousNext("JavaScript/Guide/Operators/Bitwise_Operators", "JavaScript/Guide/Operators/String_Operators") }}

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 +--- +

特殊演算子

+

JavaScript は以下の特殊演算子があります。

+
    +
  • {{ Anch("条件演算子") }}
    • +
  • {{ Anch("コンマ演算子") }}
    • +
  • {{ Anch("delete") }}
    • +
  • {{ Anch("in") }}
    • +
  • {{ Anch("instanceof") }}
    • +
  • {{ Anch("new") }}
    • +
  • {{ Anch("this") }}
    • +
  • {{ Anch("typeof") }}
    • +
  • {{ Anch("void") }}
    • +
+

条件演算子

+

条件演算子は JavaScript では唯一の 3 つのオペランドをとる演算子です。演算子は条件に基づいて 2 つの値のうち、1 つを選択します。構文は次のとおりです。

+
condition ? val1 : val2
+
+

condition が true の場合、演算子は val1 の値を選択します。そうでない場合は val2 の値を選択します。標準的な演算子が使用できる場所でならどこででも条件演算子を使用することができます。

+

例えば、

+
status = (age >= 18) ? "adult" : "minor"
+
+

この文では、age が 18 以上の場合 "adult" という値を変数 status に代入します。そうでない場合は "minor" という値を status に代入します。

+

コンマ演算子

+

コンマ演算子 (,) は単に両方のオペランドを評価し、第 2 のオペランドの値を返します。この演算子は主に for ループ内で使用されます。このことでループのたびに複数の変数を更新できるようになります。

+

例えば、a が一辺が 10 要素の 2 次元配列のとき、以下のコードではコンマ演算子を用いることで 2 変数を同時にインクリメントしています。このコードでは配列の対角成分の値を出力します。

+
for (var i=0, j=9; i <= 9; i++, j--)
+   document.writeln("a["+i+"]["+j+"]= " + a[i][j])
+
+

delete

+

delete 演算子はオブジェクトやオブジェクトのプロパティ、配列の指定されたインデックスの要素を削除します。構文は以下のとおりです。

+
delete objectName
+delete objectName.property
+delete objectName[index]
+delete property // with 文内でのみ有効
+
+

ここで、objectName はオブジェクトの名前を、property は既存のプロパティを、index は配列の要素の位置を表す整数をそれぞれ表しています。

+

4 番目の形式は with 文内でのみ有効で、これはあるオブジェクトからプロパティを削除します。

+

delete 演算子を使うことで暗黙的に宣言された変数を削除することができますが、var 文を用いて宣言された変数は削除できません。

+

delete 演算子が成功すると、そのプロパティや要素には undefined がセットされます。また、演算が可能な場合は delete 演算子は true を返します。演算が不可能な場合は false を返します。

+
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 を返す（暗黙的に宣言されているならば削除可能）
+
+

配列要素の削除
+ 配列要素を削除したとき、配列の長さには影響を及ぼしません。例えば a{{ mediawiki.external(3) }} を削除したとき、a{{ mediawiki.external(4) }} は依然 a{{ mediawiki.external(4) }} のままで、a{{ mediawiki.external(3) }} は undefined になります。

+

delete 演算子で配列要素を除去すると、もうその要素はその配列からなくなります。次の例では tree{{ mediawiki.external(3) }} は delete によって除去されます。

+
trees=new Array("redwood","bay","cedar","oak","maple")
+delete trees[3]
+if (3 in trees) {
+   // ここは実行されない
+}
+
+

配列要素は存在させたいが、値は未定義にしたいという場合は、delete 演算子の代わりに undefined キーワードを使用してください。次の例では trees{{ mediawiki.external(3) }} には undefined という値が代入されますが、その配列要素は存在したままになります。

+
trees=new Array("redwood","bay","cedar","oak","maple")
+trees[3]=undefined
+if (3 in trees) {
+   // ここは実行される
+}
+
+

in

+

in 演算子は、指定されたプロパティが指定されたオブジェクトにある場合に true を返します。構文は以下のとおりです。

+
propNameOrNumber in objectName
+
+

ここで、propNameOrNumber はプロパティ名か配列のインデックスを表す文字列式または数値式を、objectName はオブジェクトの名前をそれぞれ表しています。

+

次の例では in 演算子の使用法を示します。

+
// 配列
+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 を返す
+
+

instanceof

+

instanceof 演算子は、指定されたオブジェクトが指定されたオブジェクトの種類である場合に true を返します。構文は次のとおりです。

+
objectName instanceof objectType
+
+

ここで、objectName は objectType と比較するオブジェクトの名前を、objectType は Date や Array のようなオブジェクトの種類をそれぞれ表しています。

+

実行時にオブジェクトの種類を確認する必要があるときは instanceof を使用してください。例えば、例外を受け取るとき、投げられた例外の種類によって別々の例外を扱うコードに分岐させることができます。

+

例えば、次のコードでは instanceof を使用することで theDay が Date オブジェクトであるかどうかを決定しています。theDay は Date オブジェクトなので if 文の中の文は実行されます。

+
theDay=new Date(1995, 12, 17)
+if (theDay instanceof Date) {
+   // 実行される文
+}
+
+

new

+

new 演算子は、ユーザ定義オブジェクトや、Array、Boolean、Date、Function、Image、Number、Object、Option、RegExp、String といった定義済みオブジェクトのインスタンスを作成するのに使用します。サーバでは DbPool、Lock、File、SendMail といったオブジェクトも使用できます。new の使用法は以下のとおりです。

+
objectName = new objectType ( param1 [,param2] ...[,paramN] )
+
+

オブジェクト初期化子を使用してもオブジェクトを作成することができます。オブジェクト初期化子の使用 にて説明しています。

+

詳しくはコア JavaScript リファレンスの new 演算子 のページを参照してください。

+

this

+

this キーワードを使うことでカレントオブジェクトを参照することができます。一般に this はあるメソッド内でそのメソッドを呼び出したオブジェクトを参照します。使用法は以下のとおりです。

+
this[.propertyName]
+
+

例 1
+ あるオブジェクトの value プロパティの妥当性を確認する validate という関数を想定します。関数にはそのオブジェクトと、上限および下限の値を渡します。

+
function validate(obj, lowval, hival) {
+   if ((obj.value < lowval) || (obj.value > hival))
+      alert("Invalid Value!")
+}
+
+

各フォーム要素の onChange イベントハンドラにおいて validate を呼び出します。this を使うことでフォーム要素を渡すことができます。次の例をご覧ください。

+
<B>Enter a number between 18 and 99:</B>
+<INPUT TYPE = "text" NAME = "age" SIZE = 3
+   onChange="validate(this, 18, 99)">
+
+

例 2
+ form プロパティと組み合わせると this でカレントオブジェクトの親のフォームを参照できます。次の例では、myForm というフォームに Text オブジェクトとボタンが格納されています。ユーザがボタンをクリックすると、Text オブジェクトの値にフォーム名がセットされます。ボタンの onClick イベントハンドラは this.form を利用して親のフォームである myForm を参照します。

+
<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>
+
+

typeof

+

typeof 演算子は次の方法のうち、どちらかの方法で使用します。

+
1. typeof operand
+2. typeof (operand)
+
+

typeof 演算子は、未評価のオペランドの型を指す文字列を返します。operand は返される型を調べる対象となる文字列、変数、キーワード、オブジェクトです。括弧はあってもなくてもかまいません。

+

以下の変数を定義することを想定します。

+
var myFun = new Function("5+2")
+var shape="round"
+var size=1
+var today=new Date()
+
+

typeof 演算子はこれらの変数に対して以下の結果を返します。

+
typeof myFun is function
+typeof shape is string
+typeof size is number
+typeof today is object
+typeof dontExist is undefined
+
+

true や null というキーワードに対して、typeof 演算子は以下の結果を返します。

+
typeof true is boolean
+typeof null is object
+
+

数値や文字列に対して、typeof 演算子は以下の結果を返します。

+
typeof 62 is number
+typeof 'Hello world' is string
+
+

プロパティ値に対して、typeof 演算子はプロパティ値の型を返します。

+
typeof document.lastModified is string
+typeof window.length is number
+typeof Math.LN2 is number
+
+

メソッドや関数に対して、typeof 演算子は以下の結果を返します。

+
typeof blur is function
+typeof eval is function
+typeof parseInt is function
+typeof shape.split is function
+
+

定義済みオブジェクトに対して、typeof 演算子は以下の結果を返します。

+
typeof Date is function
+typeof Function is function
+typeof Math is function
+typeof Option is function
+typeof String is function
+
+

void

+

void 演算子は次の方法のうち、どちらかの方法で使用します。

+
1. void (expression)
+2. void expression
+
+

void 演算子は値を返さずに評価する式を指定します。expression は評価する JavaScript の式です。式の周りの括弧はあってもなくてもかまいませんが、使用したほうが見た目はいいです。

+

void 演算子を使用することで式をハイパーテキストリンクとして指定することができます。式は評価されますが、開いている文書の代わりに読み込まれるということはありません。

+

以下のコードはユーザがクリックしても何も起こらないハイパーテキストリンクを作成します。ユーザがリンクをクリックすると void(0) は undefined に評価され、JavaScript としては影響を及ぼしません。

+
<A HREF="javascript:void(0)">Click here to do nothing</A>
+
+

以下のコードはユーザがクリックするとフォームが送信されるハイパーテキストリンクを作成します。

+
<A HREF="javascript:void(document.form.submit())">
+Click here to submit</A>
+
+

{{ PreviousNext("JavaScript/Guide/Operators/String_Operators", "JavaScript/Guide/Creating_a_Regular_Expression") }}

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 +--- +

文字列演算子

+

比較演算子は文字列に使用できますが、これに加えて 2 つの文字列を結合する結合演算子 (+) も使用できます。これは 2 つのオペランドの文字列を結合した文字列を返します。例えば、"my " + "string" は "my string" という文字列を返します。

+

短縮表記した代入演算子 += も文字列の結合に使用できます。例えば、変数 mystring に "alpha" という値が格納されているとき、式 mystring += "bet" の評価結果は "alphabet" となり、この値を mystring に代入します。

+

{{ PreviousNext("JavaScript/Guide/Operators/Logical_Operators", "JavaScript/Guide/Operators/Special_Operators") }}

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 +--- +
+

escape および unescape 関数

+

escape および unescape 関数は文字列をエンコードしたりデコードしたりします。escape 関数は ISO Latin 文字セットで表された引数の 16 進エンコーディングを返します。unescape は指定した 16 進エンコーディングの値に対する ASCII 文字列を返します。

+

これらの関数の構文は以下のとおりです。

+ 
escape(string)
+unescape(string)
+
+

これらの関数は主にサーバサイド JavaScript で URL 中の名前と値のペアのエンコードやデコードに使用されます。

+ escape および unescape 関数は 非 ASCII 文字に対しては正しく機能せず、廃止予定になっています。JavaScript 1.5 以降では encodeURI、decodeURI、encodeURIComponent および decodeURIComponent を使用してください。
+

{{ PreviousNext("JavaScript/Guide/Predefined_Functions/Number_and_String_Functions", "JavaScript/Guide/Objects_and_Properties") }}

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 +--- +
+

eval 関数

+

eval 関数は JavaScript のコードの文字列を特定のオブジェクトを参照することなく評価します。eval の構文は次のとおりです。

+ 
eval(expr)
+
+

ここで expr は評価される文字列です。

+ 文字列が式を表している場合は eval はその式を評価します。また、1 つ以上の JavaScript の文を表している場合は eval はその式を実行します。eval のコードのスコープは呼び出し元コードのスコープと同じです。演算式を評価するために eval を呼び出さないでください。JavaScript は自動的に演算式を評価します。
+

{{ PreviousNext("JavaScript/Guide/Predefined_Functions", "JavaScript/Guide/Predefined_Functions/isFinite_Function") }}

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 +--- +
+

定義済み関数

+

JavaScript にはトップレベルの定義済み関数がいくつかあります。

+ +
+

{{ PreviousNext("JavaScript/Guide/Using_the_arguments_object", "JavaScript/Guide/Predefined_Functions/eval_Function") }}

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 +--- +

階層の作成

+

Employee の階層を実装するための適当なコンストラクタ関数を定義する方法はいくつかあります。これの定義に何を選択するかは、アプリケーションで何ができるようにしたいかに大きくよります。

+

このセクションではとても単純（かつ比較的柔軟でない）定義の使用方法を示し、継承を機能させる方法を実際に示します。これらの定義では、オブジェクト作成時に何らかのプロパティの値を指定することはできません。新しく作成されるオブジェクトは単にデフォルトの値を取得するだけです。これは後から変更できます。図 8.2 ではこれらの単純な定義を備えた階層を例示します。

+

実際のアプリケーションでは、オブジェクト作成時にプロパティの値を設定できるようにするコンストラクタを定義することになるでしょう（詳しくは より柔軟なコンストラクタ を参照）。今回はこれらの単純な定義を使用して、継承はどのようにして起こるのかを実際に示していくことにします。

+

Image:hier02.gif
+ 図 8.2：Employee オブジェクトの定義

+

以下に示すように、Java と JavaScript の Employee の定義は似ています。唯一の相違点は、Java では各プロパティに対して型を指定する必要があるのに対して、JavaScript ではその必要がないことです。また、Java のクラスでは明示的なコンストラクタメソッドを作成する必要があります。

+ + + + + + + + + + + +
JavaScriptJava
+ 
+function Employee () {
+this.name = "";
+this.dept = "general";
+}
+
+ 		+ 
+public class Employee {
+   public String name;
+   public String dept;
+   public Employee () {
+      this.name = "";
+      this.dept = "general";
+   }
+}
+
+
+

Manager および WorkerBee の定義では、継承の連鎖において上である次のオブジェクトの指定方法に違いがあります。JavaScript では原型的なインスタンスをコンストラクタ関数の prototype プロパティとして追加します。コンストラクタを定義した後ならいつでもそれをすることができます。Java ではクラス定義内でスーパークラスを指定します。クラス定義の外部でスーパークラスを変更することはできません。

+ + + + + + + + + + + +
JavaScriptJava
+ 
+function Manager () {
+this.reports = [];
+}
+Manager.prototype = new Employee;
+
+function WorkerBee () {
+this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+ 		+ 
+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];
+   }
+}
+
+
+

Engineer および SalesPerson の定義は、WorkerBee の子孫、それゆえに Employee の子孫であるオブジェクトを作成します。これらの種類のオブジェクトは連鎖において上にある全オブジェクトのプロパティを持ちます。さらに、これらの定義は dept プロパティの継承された値をこれらのオブジェクト固有の新しい値で上書きします。

+ + + + + + + + + + + +
JavaScriptJava
+ 
+function SalesPerson () {
+   this.dept = "sales";
+   this.quota = 100;
+}
+SalesPerson.prototype = new WorkerBee;
+
+function Engineer () {
+   this.dept = "engineering";
+   this.machine = "";
+}
+Engineer.prototype = new WorkerBee;
+
+ 		+ 
+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 = "";
+   }
+}
+
+
+

これらの定義を使用して、そのプロパティのデフォルト値を取得するこれらのオブジェクトのインスタンスを作成することができます。図 8.3 ではこれらの JavaScript の定義を使用して新しいオブジェクトを作成する方法を示しています。また、新しいオブジェクトに対するプロパティの値も示しています。

+

注意：インスタンスという用語はクラスベース言語においてはある特定の技術的な意味を持っています。これらの言語では、インスタンスとはクラスの個々のメンバであり、クラスとは根本的に異なるものです。JavaScript では「インスタンス」はこの技術的な意味を持っていません。なぜならば JavaScript にはクラスとインスタンスとの間のこの違いがないからです。しかしながら、JavaScript について話す際に、「インスタンス」をある特定のコンストラクタ関数を用いて作成したオブジェクトを意味する言葉として正式ではない形で使用することがあります。例えば、jane は Engineer のインスタンスであると砕けた言い方をすることもできます。同様に、親、子、祖先、そして子孫という用語は JavaScript において正式な意味を持ちませんが、プロトタイプチェーンにおいて上や下にあるオブジェクトについて言及する際にそれらを正式ではない形で使用してもかまいません。

+

Image:hier03.gif
+ 図 8.3：単純な定義を用いたオブジェクトの作成

+
+

{{ PreviousNext("Core_JavaScript_1.5_Guide:The_Employee_Example", "Core_JavaScript_1.5_Guide:The_Employee_Example:Object_Properties") }}

+
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 +--- +

従業員の例

+

この章の残りは次の図で示す従業員の階層を使用していきます。

+

Image:hier01.gif

+

図 8.1：単純なオブジェクト階層

+

これの例では以下のオブジェクトを使用しています。

+
    +
  • Employee はプロパティ name（デフォルトの値は空文字列）および dept（デフォルトの値は "general"）を持つ。
    • +
  • Manager は Employee をベースとしている。これは reports プロパティ（デフォルトの値は空の配列、その値として Employee オブジェクトの配列を持たせる）を追加する。
    • +
  • WorkerBee も Employee をベースとしている。これは projects プロパティ（デフォルトの値は空の配列、その値として文字列の配列を持たせる）を追加する。
    • +
  • SalesPerson は WorkerBee をベースとしている。これは quota プロパティ（デフォルトの値は 100）を追加する。さらに dept プロパティを "sales" という値で上書きする。これは販売員は全員同じ部署に所属していることを示す。
    • +
  • Engineer は WorkerBee をベースとしている。これは machine プロパティ（デフォルトの値は空文字列）を追加し、さらに dept プロパティを "engineering" という値で上書きする。
    • +
+

残りの例：

+ +
+

{{ PreviousNext("Core_JavaScript_1.5_Guide:Class-Based_vs._Prototype-Based_Languages", "Core_JavaScript_1.5_Guide:The_Employee_Example:Creating_the_Hierarchy") }}

+
+

 

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 +--- +

プロパティの追加

+

JavaScript では実行時にどんなオブジェクトにもプロパティを追加することができます。コンストラクタ関数で与えられるプロパティだけを使う必要はありません。ある 1 つのオブジェクト固有のプロパティを追加するには、次のようにしてオブジェクトに値を代入します。

+
mark.bonus = 3000;
+
+

すると、mark オブジェクトには bonus プロパティができます。しかし、他のどの WorkerBee にもこのプロパティは存在しません。

+

あるコンストラクタ関数に対するプロトタイプとして使用されているオブジェクトに新しいプロパティを追加する場合、プロトタイプからプロパティを継承する全オブジェクトへそのプロパティを追加することになります。例えば、次の文を使用すると specialty プロパティをすべての従業員に対して追加することができます。

+
Employee.prototype.specialty = "none";
+
+

JavaScript がこの文を実行するとすぐに mark オブジェクトも "none" という値を持つ specialty プロパティを持つようになります。次の図ではこのプロパティを Employee プロトタイプに追加し、さらに Engineer プロトタイプに対するそれを上書きしたときの効果を示します。

+

Image:hier04.gif
+ 図 8.4：プロパティの追加

+
+

{{ PreviousNext("Core_JavaScript_1.5_Guide:The_Employee_Example:Object_Properties:Inheriting_Properties", "Core_JavaScript_1.5_Guide:The_Employee_Example:More_Flexible_Constructors") }}

+
+

 

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 +--- +

オブジェクトのプロパティ

+

このセクションでは、プロトタイプチェーンにおいてオブジェクトが他のオブジェクトからどのようにプロパティを継承するのか、また、実行時にプロパティを追加すると何が起きるのかについて論じます。

+ +
+

{{ PreviousNext("Core_JavaScript_1.5_Guide:The_Employee_Example:Creating_the_Hierarchy", "Core_JavaScript_1.5_Guide:The_Employee_Example:Object_Properties:Inheriting_Properties") }}

+
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 +--- +

プロパティの継承

+

次の文を用いて（図 8.3 で示したように）mark オブジェクトを WorkerBee として作成するとします。

+
mark = new WorkerBee;
+
+

JavaScript は new 演算子に出くわすと、新しく汎用オブジェクトを生成し、この新しいオブジェクトを this キーワードの値として WorkerBee コンストラクタ関数に渡します。コンストラクタ関数は明示的に projects プロパティの値をセットします。さらに、内部的な __proto__ プロパティの値として WorkerBee.prototype の値をセットします。（このプロパティ名は最初と最後に 2 文字ずつのアンダースコアが付いています。）__proto__ プロパティはプロパティの値を返すのに使用されるプロトタイプチェーンを決定します。これらのプロパティがセットされると JavaScript は新しいオブジェクトを返し、代入文は変数 mark にそのオブジェクトをセットします。

+

このプロセスでは mark がプロトタイプチェーンから継承するプロパティとして明示的には mark オブジェクトに値（ローカルの値）を格納しません。プロパティの値を使用するとき、JavaScript はまずその値がそのオブジェクトに存在しているかどうかを確認します。存在している場合はその値が返されます。値がローカルには存在していない場合、JavaScript はプロトタイプチェーンを確認します（__proto__ プロパティを使用）。プロトタイプチェーン内のオブジェクトがそのプロパティの値を持っている場合、その値が返されます。そのようなプロパティが見つからない場合は JavaScript はそのオブジェクトにはそのプロパティがないと報告します。このようにして、mark オブジェクトには次のようなプロパティと値が入ることになります。

+
mark.name = "";
+mark.dept = "general";
+mark.projects = [];
+
+

mark オブジェクトは mark.__proto__ の原型的なオブジェクトから name および dept プロパティの値を継承します。WorkerBee コンストラクタによって projects プロパティにローカルの値が代入されます。このことでプロパティとその値を継承することができます。このプロセスの細かいところは プロパティの継承、再び にて議論します。

+

これらのコンストラクタにインスタンス固有の値を渡せないため、この情報は汎用的になります。プロパティの値は WorkerBee によって作成されるすべての新しいオブジェクトに共有される、デフォルトの値になります。もちろん、これらのどのプロパティのでもその値を変えることができます。そのためには次のようにして mark に固有の情報を与えます。

+
mark.name = "Doe, Mark";
+mark.dept = "admin";
+mark.projects = ["navigator"];
+
+
+

{{ PreviousNext("Core JavaScript 1.5 Guide:The Employee Example:Object Properties", "Core JavaScript 1.5 Guide:The Employee Example:Object Properties:Adding Properties") }}

+
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 +--- +
+

arguments オブジェクトの使用

+

関数の引数は配列のようなオブジェクトで管理されます。関数内では、次のようにして渡された引数を指すことができます。

+ 
arguments[i]
+
+

ここで i は引数の順序を表す数を指します。これは 0 から始まります。関数に渡された第 1 引数は arguments{{ mediawiki.external(0) }} となります。引数のトータルの数は arguments.length で示されます。

+

arguments オブジェクトを使用すると、宣言時の仮引数の数よりも多くの引数を使って関数を呼び出すことができます。これはその関数に渡す引数の数が前もってわかっていない場合に役立ちます。arguments.length を使用することで実際にその関数に渡された引数の数を特定することができます。また、arguments オブジェクトを使用することで各引数を扱うことができます。

+

例えば、複数の文字列を連結する関数を考えます。この関数の仮引数は、連結するアイテムを区切るのに用いる文字列のみです。この関数は次のように定義されています。

+ 
function myConcat(separator) {
+   var result = ""; // リストを初期化する
+   // 引数について繰り返し
+   for (var i = 1; i < arguments.length; i++) {
+      result += arguments[i] + separator;
+   }
+   return result;
+}
+
+

この関数に引数をいくつも渡すことができます。そして各引数を文字列のリストに連結します。

+ 
// "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");
+
+

さらなる情報については、コア JavaScript リファレンスの Function オブジェクト をご覧ください。

+

JavaScript 1.3 以前のバージョン
+ arguments オブジェクトは Function オブジェクトのプロパティであり、次のように関数の名前を前に付けることができます。

+ functionName.arguments{{ mediawiki.external('i') }}
+

{{ PreviousNext("JavaScript/Guide/Calling_Functions", "JavaScript/Guide/Predefined_Functions") }}

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 +--- +

{{ 英語版章題("Variables") }}

+

変数

+

アプリケーションで値を識別する名前として変数を使用します。変数の名前はあるルールに従って付けなくてはなりません。変数の名前は識別子とも呼ばれます。

+

JavaScript の識別子は必ずアルファベットかアンダースコア (_) かドル記号 ($) から始まらなくてはなりません。続く文字は数字 (0-9) も使えます。JavaScript は大文字・小文字を区別するため、使えるアルファベットは "A" から "Z"（大文字）と "a" から "z"（小文字）です。

+

JavaScript 1.5 からは å や ü といった ISO 8859-1 や Unicode のアルファベットも識別子に使えます。Unicode エスケープシーケンス のページに列挙されている \uXXXX 形式の Unicode エスケープシーケンスも識別子に使用できます。

+

Number_hits や temp99 や _name が使用できる名前の例です。

+

{{ 英語版章題("Declaring Variables") }}

+

変数の宣言

+

2 つの方法で変数を宣言できます。

+
    +
  • var というキーワードを使う。例えば、var x = 42。この構文は ローカルおよびグローバル 変数どちらの宣言にも使用可能です。
    • +
  • 単に値を代入する。例えば、x = 42。これはいつでも グローバル変数 を宣言できますが、{{ 原語併記("厳格な JavaScript 警告", "strict JavaScript warning") }}が発生します。この方法は使用すべきではありません。
    • +
+

{{ 英語版章題("Evaluating Variables") }}

+

変数の評価

+

var 文を使用し、初期化せずに宣言された変数は undefined の値をとります。

+

未宣言の変数にアクセスしようとすると、ReferenceError 例外が投げられます。

+
var a;
+print("a の値は " + a); // "a の値は undefined" を出力
+print("b の値は " + b); // ReferenceError 例外を投げる
+
+

undefined を使うと変数に値が入っているかどうかを確かめられます。以下のコードでは、変数 input には値が代入されておらず、if 文での評価結果は true です。

+
var input;
+if(input === undefined){
+  doThis();
+} else {
+  doThat();
+}
+
+

Not sure how the following is related to "Variables" section undefined は真偽値コンテキストで使用されると false として振る舞います。例えば以下のコードでは、myArray の要素が未定義であるために関数 myFunction が実行されます。

+
var myArray = new Array();
+if (!myArray[0]) myFunction();
+
+

null 変数を評価すると、数値コンテキストにおいては null 値は 0 として振る舞います。また、真偽値コンテキストでは false として振る舞います。

+
var n = null;
+print(n * 32); // prints 0
+
+

{{ 英語版章題("Variable Scope") }}

+

変数のスコープ

+

変数を関数の外側で宣言すると、その変数はその文書のどのコードからも使用できるようになるため、グローバル（大域）変数と呼ばれます。変数を関数の内部で宣言すると、その変数はその関数の中でしか使用できないため、ローカル（局所）変数と呼ばれます。

+

JavaScript には ブロック文 のスコープがありません。むしろ、そのブロックを内包しているコードに対して局所化されます。例えば以下のコードは condition が false のとき、例外を投げずに 0 が出力されます。

+
if (condition) {
+  var x = 5;
+}
+print(x ? x : 0);
+
+

JavaScript の変数に関する独特なこととして、後に宣言される変数を例外を発生させることなく参照できるというのも挙げられます。

+
print(x === undefined); // "true" を出力
+var x = 3;
+
+

{{ 英語版章題("Global Variables") }}

+

グローバル変数

+

need links to pages discussing scope chains and the global object グローバル変数は実際にはグローバルオブジェクトのプロパティです。ウェブページではグローバルオブジェクトは window です。そのため、window.variable という構文を使うことでグローバル変数をセットしたり、グローバル変数にアクセスしたりすることができます。

+

したがって、あるウィンドウやフレームで宣言したグローバル変数に、そのウィンドウやフレームの名前を指定すれば別のウィンドウやフレームからアクセスできます。例えば、phoneNumber という変数を FRAMESET 文書内で宣言すると、子フレームから parent.phoneNumber としてこの変数を参照することができます。

+

{{ 英語版章題("See Also") }}

+

関連項目

+

JavaScript のシャープ変数

+

{{ PreviousNext("JavaScript/Guide/Values", "JavaScript/Guide/Constants") }}

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 +--- +

正規表現パターンを書く

+ +

正規表現パターンは、/abc/ のような単純な文字、または /ab*c/ や /Chapter (\d+)\.\d*/ のような単純な文字と特殊文字との組み合わせからなります。最後の例では記憶装置として使われている丸括弧が含まれています。パターンのこの部分でなされたマッチは後で使用できるように記憶されます。詳しくは 括弧で囲まれた部分文字列のマッチの使用 を参照してください。

+ +

単純なパターンの使用

+ +

単純なパターンは、直接マッチしている部分を見つけたい文字で構成されます。例えば、/abc/ というパターンは、実際に 'abc' という文字が一緒にその順で存在しているときにだけ、文字列中の文字の組み合わせにマッチします。"Hi, do you know your abc's?" や "The latest airplane designs evolved from slabcraft." といった文字列でのマッチは成功します。どちらの場合でも 'abc' という部分文字列にマッチします。"Grab crab" という文字列では 'abc' という部分文字列が含まれていないためマッチしません。

+ +

特殊文字の使用

+ +

1 つ以上の b を見つけたり、ホワイトスペースを見つけたりといった直接マッチより高度なマッチの検索では、パターンに特殊文字を使用します。例えば /ab*c/ というパターンでは 1 つの 'a' とその後ろに続く 0 個以上の 'b'（* は直前のアイテムの 0 回以上の出現を意味する）とそのすぐ後ろに続く 'c' からなる文字の組み合わせにマッチします。"cbbabbbbcdebc" という文字列ではこのパターンは 'abbbbc' という部分文字列にマッチします。

+ +

以下の表で正規表現で使用できる特殊文字とその意味を詳しく説明します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
文字意味
\次のうちのどちらか。 +
    +
  • 通常は文字どおり扱われる文字に対して、次の文字は特殊であり、文字どおりに解釈すべきではないと指示する。例えば、/b/ は 'b' という文字にマッチする。b の前にバックスラッシュを置き、/\b/ とすると、その文字は単語の区切りにマッチすることを意味する特殊文字になる。
    • +
  • 通常は特殊文字として扱われる文字に対して、次の文字は特殊ではなく、文字どおりに解釈すべきであると指示する。例えば、* は直前のアイテムの 0 回以上の出現にマッチさせることを意味する特殊文字である。つまり、例えば /a*/ は a の 0 文字以上の a へのマッチを意味する。* という文字そのものにマッチさせるには、その直前にバックスラッシュを置く。例えば、/a\*/ は 'a*' にマッチする。
    • +
+
^入力の先頭にマッチする。複数行フラグが true にセットされている場合は、改行文字直後にもマッチする。 例えば、/^A/ は "an A" の 'A' にはマッチしないが、"An A" の最初の 'A' にはマッチする。
$入力の末尾にマッチする。複数行フラグが true にセットされている場合は、改行文字直前にもマッチする。 例えば、/t$/ は "eater" の 't' にはマッチしないが、"eat" の 't' にはマッチする。
*直前の文字の 0 回以上の繰り返しにマッチする。 例えば、/bo*/ は "A ghost booooed" の 'boooo' や "A bird warbled" の 'b' にはマッチするが、"A goat grunted" ではマッチしない。
+直前の文字の 1 回以上の繰り返しにマッチする。{1,} と同等。 例えば、/a+/ は "candy" の 'a' や、"caaaaaaandy" のすべての a にマッチする。
?直前の文字の 0 回か 1 回の繰り返しにマッチする。 +

例えば、/e?le?/ は "angel" の 'el' や "angle" の 'le' にマッチする。

+ +

*、+、?、{} といった量指定子の直後に使用した場合、その量指定子をスキップ優先（最小回数にマッチ）にする。これはデフォルトとは逆であり、デフォルトは繰り返し優先（最大回数にマッチ）。例えば、/\d+/ は非グローバルで "123abc" の "123" にマッチするが、/\d+?/ の場合、"1" だけにマッチする。

+ 先読み表現内でも使用できるが、これはこの表の x(?=y) および x(?!y) にて説明。
.小数点は改行文字以外のどの 1 文字にもマッチする。 例えば、/.n/ は "nay, an apple is on the tree" の 'an' や 'on' にはマッチするが、'nay' にはマッチしない。
(x)'x' にマッチし、マッチしたものを記憶しておく。これはキャプチャする括弧と呼ぶ。 例えば、/(foo)/ は "foo bar" の 'foo' にマッチし、これを記憶する。マッチした部分文字列は結果として生成される配列の要素 1, ..., b から参照できる。
(?:x)'x' にマッチするが、マッチしたものは記憶しない。これはキャプチャしない括弧と呼ぶ。マッチした部分文字列は先程のような配列の要素 1, ..., n から参照することはできない。
x(?=y)'x' に 'y' が続く場合のみ 'x' にマッチする。例えば、/Jack(?=Sprat)/ は 'Jack' の後ろに 'Sprat' が続く場合のみ 'Jack' にマッチする。/Jack(?=Sprat|Frost)/ は 'Jack' の後ろに 'Sprat' または 'Frost' が続く場合のみ 'Jack' にマッチする。しかしながら、'Sprat' も 'Frost' もマッチの結果には現れない。
x(?!y)'x' に 'y' が続かない場合のみ 'x' にマッチする。例えば、/\d+(?!\.)/ はある数に小数点が続かない場合のみその数にマッチする。正規表現 /\d+(?!\.)/.exec("3.141") は 141 にはマッチするが 3.141 にはマッチしない。
x|y'x' または 'y' にマッチする。 例えば、/green|red/ は "green apple" の "green' や "red apple" の 'red' にマッチする。
{n}n には正の整数が入る。直前の文字がちょうど n 回出現するものにマッチする。 例えば、/a{2}/ は "candy" の 'a' にはマッチしないが、"caandy" の すべての a にマッチする。また、"caaandy" の最初の 2 つの a にマッチする。
{n,}n には正の整数が入る。直前の文字が少なくとも n 回出現するものにマッチする。 例えば、/a{2,}/ は "candy" の 'a' にはマッチしないが、"caandy" や "caaaaaaandy" の すべての a にマッチする。
{n,m}n および m には正の整数が入る。直前の文字が少なくとも n 回、多くとも m 回出現するものにマッチする。 例えば、/a{1,3}/ は "cndy" ではマッチせず、"candy" の 'a'、"caandy" の最初の 2 つの a、"caaaaaaandy" の最初の 3 つの a にマッチする。"caaaaaaandy" では元の文字列に a が 4 つ以上あるが、マッチするのは "aaa" であることに注意。
[xyz]文字の集合。囲まれた文字のどれにでもマッチする。ハイフンを用いて文字の範囲を指定することも可能。 例えば、/[abcd]/ は /[a-d]/ と同じ。これは "brisket" の 'b' や "city" の 'c' にマッチする。
[^xyz]文字の集合の否定または補集合。角括弧で囲まれていないものにマッチする。ハイフンを用いて文字の範囲を指定することも可能。 例えば、/[^abc]/ は /[^a-c]/ と同じ。これは "brisket" の 'r' や "chop" の 'h' にマッチする。
[\b]後退にマッチする。（\b と混同してはならない。）
\bスペースや改行文字のような単語の区切りにマッチする。（[\b] と混同してはならない。） 例えば、/\bn\w/ は "noonday" の 'no' にマッチする。また、/\wy\b/ は "possibly yesterday" の 'ly' にマッチする。
\B単語の区切り以外の文字にマッチする。 例えば、/\w\Bn/ は "noonday" の 'on' にマッチする。また、/y\B\w/ は "possibly yesterday" の 'ye' にマッチする。
\cXX には制御文字が入る。文字列中の制御文字にマッチする。 例えば、/\cM/ は文字列中の control-M にマッチする。
\d数字にマッチする。[0-9] と同等。 例えば、/\d/ や /[0-9]/ は "B2 is the suite number" の '2' にマッチする。
\D数字以外の文字にマッチする。[^0-9] と同等。 例えば、/\D/ や /[^0-9]/ は "B2 is the suite number" の 'B' にマッチする。
\f改ページにマッチする。
\n改行にマッチする。
\r復帰にマッチする。
\sスペース、タブ、改ページ、改行を含む、1 つのホワイトスペース文字にマッチする。 [ \f\n\r\t\v\u00A0\u1680\u180E\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF] と同等。 例えば、/\s\w*/ は "foo bar" の ' bar' にマッチする。
\Sホワイトスペース以外の 1 文字にマッチする。[^ \f\n\r\t\v\u00A0\u1680\u180E\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF] と同等。 例えば、/\S\w*/ は "foo bar" の 'foo' にマッチする。
\tタブにマッチする。
\v垂直タブにマッチする。
\wアンダースコアを含むどの英数字にもマッチする。[A-Za-z0-9_] と同等。 例えば、/\w/ は "apple" の 'a' や "$5.28" の '5' や "3D" の '3' にマッチする。
\W前述以外の文字にマッチする。[^A-Za-z0-9_] と同等。 例えば、/\W/ や /[^$A-Za-z0-9_]/ は "50%" の '%' にマッチする。
\nn には正の整数が入る。その正規表現の n 番目の括弧の部分にマッチする最後の部分文字列への後方参照（左括弧をカウントする）。 例えば、/apple(,)\sorange\1/ は "apple, orange, cherry, peach" の 'apple, orange,' にマッチする。
\0NUL 文字にマッチする。この後ろに他の数字を続けてはならない。
\xhhhh（2 桁の 16 進数）というコードを持つ文字にマッチする。
\uhhhhhhhh（4 桁の 16 進数）というコードを持つ文字にマッチする。
+ +

表 4.1正規表現における特殊文字

+ +

括弧の使用

+ +

正規表現パターンの一部分を括弧で囲むことで、マッチした部分文字列のその部分を記憶しておくことができます。一度記憶すると、後からその部分文字列を呼び戻すことができます。これに関しては 括弧で囲まれた部分文字列のマッチの使用 で説明しています。

+ +

例えば、/Chapter (\d+)\.\d*/ というパターンでは、エスケープされた文字と特殊文字の部分がその例で、その部分を記憶するように指示しています。これは 'Chapter ' という文字列、それに続く 1 文字以上の数字（\d はいずれかの数字を意味し、+ は 1 回以上の繰り返しを意味する）、それに続く小数点（それ自体は特殊文字であり、小数点の前の \ はパターンが '.' という文字そのものを探すようにすることを意味する）、それに続く 0 文字以上の数字（\d は数字を意味し、* は 0 回以上の繰り返しを意味する）にマッチします。さらに、括弧を使うことで最初のマッチした数値を記憶させます。

+ +

このパターンは "Open Chapter 4.3, paragraph 6" という文字列で見つかり、'4' が記憶されます。このパターンは "Chapter 3 and 4" では見つかりません。この文字列は '3' の後ろにピリオドがないためです。

+ +

マッチした部分を記憶させることなく部分文字列にマッチさせたい場合は、その括弧においてパターンの前に ?: を付けてください。例えば、(?:\d+) は 1 文字以上の数字にマッチしますが、マッチした文字は記憶されません。

+ +

{{ PreviousNext("JavaScript/Guide/Creating_a_Regular_Expression", "JavaScript/Guide/Working_with_Regular_Expressions") }}

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 +--- +

概要

+

正規表現マッチにより作成された配列において、文字列中での一致部分の、0 から始まるインデックス。

+ + + + + + + + + + + + + + + +
Array のプロパティ
静的
実装されたバージョンJavaScript 1.2
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 +--- +

+

{{ 英語版章題("Summary") }} +

+

概要

+

正規表現マッチにより作成された配列において、正規表現がマッチを行った元の文字列を反映します。 +

+ + + + + + + + + + + +
Array のプロパティ
静的
実装されたバージョン:JavaScript 1.2, NES 3.0
+
+
+{{ 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 +--- +
{{JSRef}}
+ +

解説

+ +

{{jsxref("Array")}} インスタンスは、 Array.prototype を継承しています。すべてのコンストラクターと同様に、コンストラクターの prototype オブジェクトを変更して、すべての {{jsxref("Array")}} インスタンスを変更することができます。例えば、新しいメソッドやプロパティを追加して、すべての Array オブジェクトを拡張することができます。例えば、これは{{Glossary("Polyfill", "ポリフィル")}}に使用されます。

+ +

ただし、配列オブジェクトに標準外メソッドを追加すると、後で独自のコードに問題が発生したり、 JavaScript への機能の追加の際に問題が発生することがあります。

+ +

豆知識: Array.prototype はそれ自体が {{jsxref("Array")}} です。

+ +
Array.isArray(Array.prototype); // true
+
+ +

{{js_property_attributes(0, 0, 0)}}

+ +

プロパティ

+ +
+
Array.prototype.constructor
+
オブジェクトの prototype を生成する関数を指定します。
+
{{jsxref("Array.prototype.length")}}
+
配列内の要素数を反映します。
+
{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}
+
with バインディングのスコープから除外されるプロパティ名を保持するシンボル。
+
+ +

メソッド

+ +

Mutator メソッド

+ +

これらのメソッドは、配列を書き換えます。

+ +
+
{{jsxref("Array.prototype.copyWithin()")}}
+
配列内で配列内の連続した要素をコピーします。
+
{{jsxref("Array.prototype.fill()")}}
+
配列内の指定した開始位置から終了位置までの要素を固定値で埋めます。
+
{{jsxref("Array.prototype.pop()")}}
+
配列から最後の要素を取り除き、戻り値として返します。
+
{{jsxref("Array.prototype.push()")}}
+
配列の最後に 1 個以上の要素を追加し、新しい配列の長さを返します。
+
{{jsxref("Array.prototype.reverse()")}}
+
配列の要素の順番を逆転させます (最初の要素は最後に、最後の要素は最初になります)。
+
{{jsxref("Array.prototype.shift()")}}
+
配列から最初の要素を取り除き、その要素を返します。
+
{{jsxref("Array.prototype.sort()")}}
+
配列内で要素を整列し、配列を返します。
+
{{jsxref("Array.prototype.splice()")}}
+
配列に対して複数の要素を追加したり取り除いたりします。
+
{{jsxref("Array.prototype.unshift()")}}
+
配列の最初に 1 個以上の要素を追加し、配列の変更後の長さを返します。
+
+ +

アクセサーメソッド

+ +

これらのメソッドは呼び出し対象の配列を書き換えず、配列を何らかの形で表したものを返します。

+ +
+
{{jsxref("Array.prototype.concat()")}}
+
この配列に他の配列や値を結合して新しい配列を返します。
+
{{jsxref("Array.prototype.includes()")}}
+
この配列が特定の要素を含むかどうか判定し、その結果を true または false で返します。
+
{{jsxref("Array.prototype.indexOf()")}}
+
指定された値と等しい値を持つ最初の (添字の一番小さい) 要素の添字を返します。見つからない場合、-1 を返します。
+
{{jsxref("Array.prototype.join()")}}
+
配列のすべての要素を結合した文字列を返します。
+
{{jsxref("Array.prototype.lastIndexOf()")}}
+
指定された値と等しい値を持つ最後の (添字の一番大きい) 要素の添字を返します。見つからない場合、-1 を返します。
+
{{jsxref("Array.prototype.slice()")}}
+
配列の一部を取り出して新しい配列として返します。
+
{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}
+
指定された配列を表す配列リテラルを返します。この値を使って新しい配列を作れます。{{jsxref("Object.prototype.toSource()")}} メソッドを上書きしています。
+
{{jsxref("Array.prototype.toString()")}}
+
配列とその要素を表す文字列を返します。{{jsxref("Object.prototype.toString()")}} メソッドを上書きしています。
+
{{jsxref("Array.prototype.toLocaleString()")}}
+
配列とその要素を表すロケールに従った文字列を返します。{{jsxref("Object.prototype.toLocaleString()")}} メソッドを上書きしています。
+
+ +

反復メソッド

+ +

いくつかのメソッドは、配列を処理する際にコールバックされる関数を引数に取ります。これらのメソッドが呼ばれる時、配列の length 値を一時記憶するため、コールバック中にこの長さを超えて追加された要素にはアクセスしません。配列に対するその他の変更 (要素の値の書き換えや削除) は、変更された要素にメソッドが後でアクセスした場合の操作結果に影響を及ぼす可能性があります。そのような場合におけるこれらのメソッドの振る舞いは正確に定義されていますが、コードの読者を混乱させないよう、その振る舞いに依存すべきではありません。配列を変化させなければならない場合は、代わりに新しい配列にコピーしてください。

+ +
+
{{jsxref("Array.prototype.entries()")}}
+
新しい Array Iterator オブジェクトを返します。このオブジェクトは、配列中の各インデックスに対する key/value ペアを保持しています。
+
{{jsxref("Array.prototype.every()")}}
+
指定したテスト関数を配列中のすべての要素が満たした場合に true を返します。
+
{{jsxref("Array.prototype.filter()")}}
+
指定したフィルタリング関数が true を返す、配列中の要素を格納した新しい配列を生成します。
+
{{jsxref("Array.prototype.find()")}}
+
指定したテスト関数を満たす、配列中の要素の値を返します。1 個も見つからない場合は undefined を返します。
+
{{jsxref("Array.prototype.findIndex()")}}
+
指定したテスト関数を満たす、配列中の要素のインデックスを返します。1 個も見つからない場合は -1 を返します。
+
{{jsxref("Array.prototype.forEach()")}}
+
配列中のそれぞれの要素について関数を呼び出します。
+
{{jsxref("Array.prototype.keys()")}}
+
新しい Array Iterator を返します。このオブジェクトは配列中の各インデックスのキーを保持します。
+
{{jsxref("Array.prototype.map()")}}
+
配列内のすべての要素に対して与えられた関数を呼び出し、その結果を格納した新しい配列を生成します。
+
{{jsxref("Array.prototype.reduce()")}}
+
アキュムレータと配列内のすべての要素に対して (左から右の順で) 関数を適用し、単一の値に還元します。
+
{{jsxref("Array.prototype.reduceRight()")}}
+
アキュムレータと配列内のすべての要素に対して (右から左の順で) 関数を適用し、単一の値に還元します。
+
{{jsxref("Array.prototype.some()")}}
+
指定したテスト関数を配列中の少なくとも 1 個の要素が満たした場合に true を返します。
+
{{jsxref("Array.prototype.values()")}}
+
新しい Array Iterator オブジェクトを返します。このオブジェクトは、配列中の各インデックスの値を保持します。
+
{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}
+
新しい Array Iterator オブジェクトを返します。このオブジェクトは、配列中の各インデックスの値を保持します。
+
+ +

ジェネリックメソッド (非標準)

+ +

JavaScript の Array オブジェクト上の多くのメソッドは、配列型 (array-like) のあらゆるオブジェクトに対し広く適用されるよう設計されています。すなわち、どんなオブジェクトでも length プロパティを持ち、数値プロパティ名を使う (array[5] のような) アクセスが有効なら、それらを適用できます。{{jsxref("Array.join", "join")}} のような一部のメソッドは、呼び出し対象オブジェクトの length や数値プロパティを読み取るだけです。 一方、{{jsxref("Array.reverse", "reverse")}} のようなメソッドは、対象オブジェクトの数値プロパティや length が変更可能であることを要求するため、length プロパティや設定される合成数値プロパティの変更を許さない {{jsxref("String")}} のようなオブジェクトに対して呼び出すことができません。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('ES1')}}{{Spec2('ES1')}}初回定義
{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES6')}}copyWithin(), fill(), entries(), keys(), values(), find(), findIndex() メソッドを追加
{{SpecName('ES7', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES7')}}includes() メソッドを追加
{{SpecName('ESDraft', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ESDraft')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("javascript.builtins.Array.prototype")}}

+ +

関連情報

+ +
    +
  • {{jsxref("Array")}}
    • +
  • {{jsxref("Function.prototype")}}
    • +
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 +--- +
{{JSRef}}
+ +

AsyncFunction.prototype プロパティは、{{jsxref("AsyncFunction")}} プロトタイプオブジェクトを表します。

+ +

説明

+ +

{{jsxref("AsyncFunction")}} オブジェクトは、AsyncFunction.prototype を継承します。AsyncFunction.prototype は修正できません。

+ +

プロパティ

+ +
+
AsyncFunction.constructor
+
初期値は {{jsxref("AsyncFunction")}}。
+
AsyncFunction.prototype[@@toStringTag]
+
"AsyncFunction" を返す。
+
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('Async Function', '#async-function-definitions', 'async function')}}{{Spec2('Async Function')}}提案
+ +

ブラウザー実装状況

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet Explorer EdgeOperaSafari (WebKit)
基本サポート{{CompatUnknown}}{{CompatGeckoDesktop("52.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
基本サポート{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("52.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

関連項目

+ +
    +
  • {{jsxref("AsyncFunction")}}
    • +
  • {{jsxref("Function")}}
    • +
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 +--- +
{{JSRef}}
+ +

cleanupSome() メソッドは、 {{jsxref("FinalizationRegistry")}} 内のオブジェクトのうち、まだコールバックが呼ばれていないが回収されているオブジェクトの数が実装で選択された場合に、クリーンアップコールバックを起動します。このメソッドはオプションです。

+ +

構文

+ +
registry.cleanupSome([callback]);
+
+ +

引数

+ +
+
callback {{optional_inline}}
+
この cleanupSome への呼び出しによって起動されるコールバックだけに使用するコールバックを指定します。指定した場合、このコールバックは FinalizationRegistry で作成されたものの代わりに使用されます。
+
+ +

返値

+ +

undefined です。

+ +

注

+ +

通常、この関数を呼び出すことはありません。コールバックを適切に行うためには、 JavaScript エンジンのガベージコレクターに任せてください。この関数は主に、イベントループを発生させない、通常の JavaScript コードよりも WebAssembly で出てくる可能性の高い、長期に実行されるコードに対応するために存在します。また、コールバックが呼び出されない場合があることにも注意してください (例えば、ターゲットが回収されたレジストリ項目が存在しない場合)。

+ +

レジストリからクリーンアップされる (クリーンアップコールバックを呼び出す) 回収オブジェクトの項目数は、実装で定義されています。実装によっては、対象となる項目を一つだけ削除したり、対象となるすべての項目を削除したり、あるいはその間のどこかで削除したりすることもあります。

+ +

例

+ +

cleanupSome の使用

+ +
registry.cleanupSome?.(heldValue => {
+  // ...
+});
+
+ +

このメソッドはオプションであり、実装によってはこのメソッドを持たない場合があります。詳細は HTML issue #5446 を参照してください。このメソッドはオプションなので、それを呼び出す前にそのメソッドが存在することを確認する必要があります。そのための一つの方法は、上の例のようにオプション連結 (?.) を使用することです。

+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('WeakRefs', '#sec-finalization-registry.prototype.cleanupSome', 'FinalizationRegistry.prototype.cleanupSome')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("javascript.builtins.FinalizationRegistry.cleanupSome")}}

+ +

関連情報

+ +
    +
  • {{jsxref("FinalizationRegistry")}}
    • +
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 +--- +
{{QuickLinksWithSubpages("/ja/docs/Web/Manifest")}}
+ +
{{obsolete_header}}
+ + + + + + + + + + + + +
型Object
必須いいえ
+ +

serviceworker メンバーは開発者が PWA を制御するためにインストールするサービスワーカーを記述します。

+ +

例

+ +
"serviceworker": {
+  "src": "./serviceworker.js",
+  "scope": "/app",
+  "type": "",
+  "update_via_cache": "none"
+}
+
+ +

値

+ +

サービスワーカーには以下の値が含まれます (src のみが必須です)。

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
メンバー説明
srcサービスワーカーのスクリプトのダウンロード元となる URL。これだけが serviceworker メンバーで必須です。
scopeサービスワーカーの登録スコープを定義する URL を表す文字列で、サービスワーカーが制御できる URL の範囲を表します。これは通常、アプリケーションのベース URL からの相対 URL です。既定では、サービスワーカー登録のスコープ値は、サービスワーカーのスクリプトが置かれているディレクトリに設定されています。
type?
update_via_cache +

ユーザーエージェントがサービスワーカーを読み込むときにキャッシュを回避するかどうかです。

+
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.manifest.serviceworker")}}

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 +--- +

情報セキュリティを基本的に理解しておくことは、ソフトウェアやサイトが危険で脆弱なままで、資産を奪ったりその他の悪意の理由のために弱点を悪用されるのを防ぐのに役立ちます。これらの記事は知るべきことを学ぶのに役立ちます。 この情報から、ウェブ開発を通じて、またそれ以外のコンテンツのデプロイにおいても、セキュリティの役割と重要性に気づくでしょう。

+ +
+
機密性、完全性、可用性
+
セキュリティを理解する上で絶対的な基礎となる、セキュリティの第一の目的を説明します。
+
セキュリティの制御
+
セキュリティ制御の主要なカテゴリを定義し、潜在的な欠点を議論します。
+
TCP/IP セキュリティ
+
SSL のセキュリティの考慮事項に焦点を当てた TCP/IP モデルの概要です。
+
脅威
+
主要な脅威の概念を簡単に案内します。
+
+ +
+
脆弱性
+
主要な分野の脆弱性を定義し、すべてのソフトウェアの脆弱性の存在を議論します。
+
+ +

関連情報

+ + + +

{{QuickLinksWithSubpages("/ja/docs/Web/Security")}}

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 +--- +

Open Webの基盤は幾つもの仕様書によって定義されています。このページではそれらの仕様書をリストしています。

+ +

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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Specification状態API Introduction & Landing pagesTutorialReferenceDoc status
HTML (one page)
+ {{ SpecName("HTML WHATWG") }}
+  		{{ Spec2("HTML WHATWG") }}  + + +

The HTML Elements.
+ HTML element-related interfaces:
+ {{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)
+ Other DOM-related interfaces/events/... :
+ {{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")}} Document getter? {{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")}} (Event|Document) {{event("load")}} (Event|XMLDocument, HTMLLinkElement, HTMLStyleElement, HTMLScriptElement, HTMLImageElement) {{event("load")}} (ProgressEvent|HTMLImageElement){{event("click")}} (Event|any interactive element) {{event("error")}} (Event|HTMLLinkElement, HTMLStyleElement, HTMLScriptElement, HTMLImageElement) {{event("beforescriptexecute")}} (Event|HTMLScriptElement) {{event("afterscriptexecute")}} (Event|HTMLScriptElement) {{event("loadstart")}} (ProgressEvent|HTMLImageElement) {{event("loadend")}} (Event|HTMLImageElement) {{event("loadend")}} (ProgressEvent|HTMLImageElement) {{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)
+ Events on any HTML*Element, Document and Window objects:
+ {{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")}}
+ Events on any HTML*Element (except HTMLBodyElement and HTMLFrameSetElement), Document and Window objects:
+ {{event("blur")}} {{event("error")}} {{event("focus")}} {{event("load")}} {{event("scroll")}}
+ Events on the Window objects:
+ {{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")}}
+ Events on the Document objects: {{event("readystatechange")}}

+ 		HTML API
 CSSVariableGetting StartedCSS TutorialsThe CSS3 page list them & the CSS Reference has the list of properties, functions, pseudo-classes and pseudo-elements. Some specifications also add APIs.
+ {{SpecName("CSS3 Fonts")}}: {{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)
+ {{SpecName("CSS3 Transitions")}}: {{domxref("TransitionEvent")}} {{event("transitionend")}} (event)
+ {{SpecName("CSS3 Animations")}}: {{domxref("AnimationEvent")}} {{event("animationstart")}} (event) {{event("animationend")}} (event) {{event("animationiteration")}} (event) {{domxref("CSSKeyframeRule")}} {{domxref("CSSKeyframesRule")}}
+ {{SpecName("CSS3 Conditional")}}: {{domxref("CSSGroupingRule")}} {{domxref("CSSConditionRule")}} {{domxref("CSSMediaRule")}} (new inheritance) {{domxref("CSSSupportsRule")}} {{domxref("CSS")}}
+ {{SpecName("CSS3 Device")}}: {{domxref("CSSViewportRule")}}
+ {{SpecName("CSS3 Variables")}}: {{domxref("CSSStyleDeclaration.CSSVariablesDeclaration")}} {{domxref("CSSVariablesDeclaration")}}		CSSOM
{{SpecName("HTML5 Web Messaging")}} (also in WHATWG HTML){{Spec2("HTML5 Web Messaging")}}  {{domxref("MessageEvent")}} {{domxref("Window.postMessage")}}HTML API
{{SpecName("ES5.1")}}
+ {{SpecName("ES6")}}
+ {{SpecName("ES Int 1.0")}}		{{Spec2('ES5.1')}}
+ {{Spec2('ES6')}}
+ {{Spec2('ES Int 1.0')}}		  JavaScript referenceJavaScript
+

{{SpecName("SVG1.1")}}

+ 		    SVG
WebGL    HTML API
{{SpecName("MathML3")}}    MathML
{{SpecName("DOM WHATWG") }}{{ Spec2("DOM WHATWG") }}DOM Reference  {{ 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") }}DOM
{{SpecName("UI Events")}}{{Spec2("UI Events")}}  {{domxref("UIEvent")}} {{domxref("FocusEvent")}} {{domxref("MouseEvent")}} {{domxref("WheelEvent")}} {{domxref("KeyboardEvent")}} {{domxref("CompositionEvent")}}DOM
{{SpecName("CSSOM")}}{{ Spec2("CSSOM")}}CSSOM {{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()")}} +

{{domxref("CSSMarginRule")}}

+ 		CSSOM
{{SpecName("CSSOM View")}}{{ Spec2("CSSOM View")}}  {{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")}}CSSOM
{{SpecName("Geometry Interfaces")}}{{Spec2("Geometry Interfaces")}}  {{domxref("DOMPointReadOnly")}} {{domxref("DOMPoint")}} {{domxref("DOMRect")}} {{domxref("DOMRectReadOnly")}} {{domxref("DOMRectList")}} {{domxref("DOMQuad")}} {{domxref("DOMMatrixReadOnly")}} {{domxref("DOMMatrix")}}DOM
{{SpecName("DOM Parsing")}}{{ Spec2("DOM Parsing")}}  {{domxref("DOMParser")}} {{domxref("XMLSerializer")}} {{domxref("Element.innerHTML")}} {{domxref("Element.outerHTML")}} {{domxref("Element.insertAdjacentHTML")}} {{domxref("Text.serializeAsCDATA")}} {{domxref("Range.createContextualFragment")}}DOM
{{SpecName("Web Workers")}} (also in WHATWG HTML){{ Spec2("Web Workers")}} Using web workers{{domxref("WorkerGlobalScope")}} {{domxref("DedicatedWorkerGlobalScope")}} {{domxref("SharedWorkerGlobalScope")}} {{domxref("AbstractWorker")}} {{domxref("Worker")}} {{domxref("SharedWorker")}} {{domxref("WorkerNavigator")}} {{domxref("WorkerUtils")}} {{domxref("WorkerLocation")}}WebWorkers
{{SpecName("Element Traversal")}}{{Spec2("Element Traversal")}}  {{domxref("ElementTraversal")}} {{domxref("Element")}} (new inheritance)DOM
{{SpecName("File API")}}{{Spec2("File API")}}  {{domxref("File")}} {{domxref("Blob")}} {{domxref("FileList")}} {{domxref("FileReader")}} {{domxref("FileReaderSync")}} {{domxref("URL.createObjectURL")}} {{domxref("URL.revokeObjectURL")}}File API
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}} Using fullscreen mode{{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)HTML API
{{SpecName("IndexedDB")}}{{Spec2("IndexedDB")}}IndexedDBUsing IndexedDB Using IndexedDB in chrome{{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")}}IndexedDB
{{SpecName("Web Audio API")}}{{Spec2("Web Audio API")}}  {{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")}}WebAudio
{{SpecName("WebRTC 1.0")}}{{Spec2("WebRTC 1.0")}}  {{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")}}WebRTC
{{SpecName("Media Capture")}}{{Spec2("Media Capture")}}  {{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")}}WebRTC
{{SpecName("MediaStream Recording")}}{{Spec2("MediaStream Recording")}}  {{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")}}WebRTC
{{SpecName("Media Source Extensions")}}{{Spec2("Media Source Extensions")}}  {{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")}} 
{{SpecName("Pointer Lock")}}{{Spec2("Pointer Lock")}} Pointer Lock API{{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")}}DOM
{{SpecName("Vibration API")}}{{Spec2("Vibration API")}} Vibration API{{domxref("Navigator.vibrate()")}}Device API
{{SpecName("Battery API")}}{{Spec2("Battery API")}}Battery Status API {{domxref("Navigator.battery")}} {{domxref("BatteryManager")}} {{event("chargingchange")}} (event) {{event("chargingtimechange")}} (event) {{event("dischargingtimechange")}} (event) {{event("levelchange")}} (event)Device API
{{SpecName("Geolocation")}}{{Spec2("Geolocation")}} Using geolocation{{domxref("NavigatorGeolocation")}} {{domxref("Geolocation")}} {{domxref("Navigator")}} (implements NavigatorGeolocation) {{domxref("Position")}} {{domxref("PositionOptions")}} {{domxref("Coordinates")}} {{domxref("PositionError")}}Device API
{{SpecName("Device Orientation")}}{{Spec2("Device Orientation")}}  {{event("deviceorientation")}} (event){{domxref("DeviceOrientationEvent")}} {{event("compassneedscalibration")}} (event) {{event("devicemotion")}} (event) {{domxref("DeviceMotionEvent")}} {{domxref("DeviceAcceleration")}} {{domxref("DeviceRotationRate")}}Device API
{{SpecName("Screen Orientation")}}{{Spec2("Screen Orientation")}}  {{domxref("Screen.orientation")}} {{domxref("Screen.lockOrientation()")}}{{domxref("Screen.unlockOrientation()")}} {{domxref("Screen.onorientationchange")}} {{event("orientationchange")}} (event)CSSOM
{{SpecName("Web Notifications")}}{{Spec2("Web Notifications")}} Using Web notifications{{domxref("Notification")}} {{event("click")}} (event) {{event("show")}} (event) {{event("error")}} (event) {{event("close")}} (event)HTML API
{{SpecName("AmbientLight")}}{{Spec2("AmbientLight")}} Using light events{{domxref("window.ondevicelight")}} {{domxref("DeviceLightEvent")}} {{event("devicelight")}} (event)Device API
{{SpecName("Proximity Events")}}{{Spec2("Proximity Events")}}Proximity Events {{domxref("window.ondeviceproximity")}} {{domxref("DeviceProximityEvent")}} {{event("deviceproximity")}} (event) {{domxref("window.onuserproximity")}} {{domxref("UserProximityEvent")}} {{event("userproximity")}} (event)Device API
{{SpecName("WebIDL")}}{{Spec2("WebIDL")}}    
{{SpecName("XMLHttpRequest")}}{{Spec2("XMLHttpRequest")}} Using FormData objects{{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")}}HTML API
{{SpecName("Highres Time")}}{{Spec2("Highres Time")}}  {{domxref("DOMHighResTimestamp")}} {{domxref("Performance.now()")}}DOM
{{SpecName("Websockets")}} (also in WHATWG HTML){{Spec2("Websockets")}}WebSockets WebSockets referenceWriting WebSocket client applications{{domxref("WebSocket")}} {{event("open")}} (event) {{event("message")}} (event) {{event("error")}} (event) {{event("close")}} (event) {{domxref("CloseEvent")}}WebSockets
{{SpecName("Page Visibility API")}}{{Spec2("Page Visibility API")}} Using the Page Visibility API{{domxref("Document.hidden")}} {{domxref("Document.visibilityState")}} {{event("visibilitychange")}} (event)DOM
{{SpecName("RequestAnimationFrame")}}{{Spec2("RequestAnimationFrame")}}  {{domxref("Window.requestAnimationFrame()")}} {{domxref("Window.cancelAnimationFrame()")}}HTML API
{{SpecName("Server-sent events")}} (also in WHATWG HTML){{Spec2("Server-sent events")}}  {{domxref("EventSource")}} {{event("open")}} (event) {{event("error")}} (event) {{event("message")}} (event)HTML API
{{SpecName("Network Information")}}{{Spec2("Network Information")}} Network Information{{domxref("NetworkInformation")}} {{domxref("Connection")}} {{domxref("Navigator")}} (implements NetworkInformation) {{event("change")}} (event)Device API
{{SpecName("Web Storage")}} (also in WHATWG HTML){{Spec2("Web Storage")}} DOM Storage Guide{{domxref("Storage")}} {{domxref("WindowSessionStorage")}} {{domxref("WindowLocalStorage")}} {{event("storage")}} {{domxref("StorageEvent")}}WebStorage
{{SpecName("Selectors API Level 1")}}{{Spec2("Selectors API Level 1")}}  {{domxref("Document.querySelector()")}} {{domxref("Document.querySelectorAll()")}} {{domxref("DocumentFragment.querySelector()")}} {{domxref("DocumentFragment.querySelectorAll()")}} {{domxref("Element.querySelector()")}} {{domxref("Element.querySelectorAll()")}}DOM
{{SpecName("Selectors API Level 2")}}{{Spec2("Selectors API Level 2")}}  {{cssxref(":scope")}} {{domxref("Document.find()")}} {{domxref("Document.findAll()")}} {{domxref("DocumentFragment.find()")}} {{domxref("DocumentFragment.findAll()")}}
+ {{domxref("Element.find()")}} {{domxref("Element.findAll()")}} {{domxref("Element.matches()")}}		DOM
{{SpecName("Progress Events")}}{{Spec2("Progress Events")}}  {{domxref("ProgressEvent")}}DOM
{{SpecName("Typed Array")}}{{Spec2("Typed Array")}} JavaScript Typed arrays{{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")}}JavaScript
{{SpecName("Gamepad")}}{{Spec2("Gamepad")}}  {{domxref("Gamepad")}} {{domxref("window.navigator.getGamepads()")}} {{domxref("GamepadEvent")}} {{event("gamepadconnected")}} (event) {{event("gamepaddisconnected")}}Device API
{{SpecName("Navigation Timing")}}{{Spec2("Navigation Timing")}}Navigation Timing APINavigation Timing{{domxref("PerformanceTiming")}} {{domxref("PerformanceNavigation")}} {{domxref("Performance")}} {{domxref("window.performance")}}DOM
{{SpecName("WOFF1.0")}}{{Spec2("WOFF1.0")}}About the Web Open Font Format   
{{SpecName("WebVTT")}}{{Spec2("WebVTT")}}WebVTT {{cssxref("::cue")}} {{cssxref(":past")}} {{cssxref(":future")}} {{domxref("WebVTTCue")}}HTML API
{{SpecName("Custom Elements")}} aka WebComponents{{Spec2("Custom Elements")}}  {{domxref("document.register()")}} {{cssxref(":unresolved")}} {{domxref("document.createElement()")}}  (new optional argument) {{domxref("document.createElementNS()")}} (new optional argument)Web Components
{{SpecName("Shadow DOM")}}, part of WebComponents{{Spec2("Shadow DOM")}}  Still in flux (lists what looks stable enough).
+ {{HTMLElement("shadow")}} {{domxref("ShadowRoot")}} {{domxref("HTMLShadowElement")}} {{HTMLElement("content")}} {{domxref("HTMLContentElement")}} {{domxref("Element.createShadowRoot()")}} {{domxref("Element.shadowRoot")}}		Web Components
{{SpecName("HTML Templates")}}, part of WebComponents{{Spec2("HTML Templates")}}  {{HTMLElement("template")}} {{domxref("HTMLTemplateElement")}}Web Components
{{SpecName("Touch Events")}}{{Spec2("Touch Events")}} Touch Events{{domxref("Touch")}} {{domxref("TouchList")}} {{domxref("TouchEvent")}} {{event("touchstart")}} (event) {{event("touchend")}} (event) {{event("touchmove")}} (event) {{event("touchcancel")}} (event) {{domxref("Document.createTouch()")}} {{domxref("Document.createTouchList()")}}DOM
{{SpecName("Pointer Events")}}{{Spec2("Pointer Events")}}  {{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")}}DOM
 {{SpecName("HTML Editing")}}{{Spec2("HTML Editing")}}  {{domxref("Selection")}} {{domxref("Document.getSelection()")}} {{domxref("Window.getSelection()")}} {{domxref("EditingBeforeInputEvent")}} {{domxref("EditingInputEvent")}}HTML API
{{SpecName("Web Crypto API")}}{{Spec2("Web Crypto API")}}  {{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")}}Web Crypto
{{SpecName("Undo Manager")}}{{Spec2("Undo Manager")}}  {{domxref("UndoManager")}} {{domxref("Element.undoScope")}} {{domxref("Element.undoManager")}} {{domxref("DOMTransaction")}} {{domxref("DOMTransactionEvent")}}DOM
WebSocket Protocol     
{{SpecName("CORS")}}{{Spec2("CORS")}}    
HTTP HTTP   
TLS     
MediaFragment     
Link: header     
Content-Disposition: header     
{{SpecName("URL")}}{{Spec2("URL")}}  {{domxref("URL")}} {{domxref("URLUtils")}} (no interface object) {{domxref("URLUtilsReadOnly")}} (no interface object) {{domxref("URLQuery")}}DOM
{{SpecName("Encoding")}}{{Spec2("Encoding")}}Encoding API {{domxref("TextDecoder")}} {{domxref("TextEncoder")}}DOM
{{SpecName("Clipboard API")}}{{Spec2("Clipboard API")}}  {{domxref("ClipboardEvent")}} {{event("cut")}} (event) {{event("copy")}} (event) {{event("paste")}} (event)DOM
{{SpecName("Selection API")}}{{Spec2("Selection API")}}    
+ +

 

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 +--- +

{{DefaultAPISidebar("Web Components")}}{{SeeCompatTable}}

+ +

Web Components は、とても新しい技術で、ブラウザ実装者や Web 開発者が実際に利用した経験を集めて仕様を考案しています。実装状況は変化しやすく、次々と進化していきます。この記事は、Firefox や Firefox OS で使用されている Gecko での実装状況の一覧を示します。

+ +
+
+

ネイティブサポート

+ +

Firefox と Firefox OS では、以下の機能が実装されており、デフォルトで有効です:

+ +
    +
  • {{HTMLElement("template")}}
    • +
+ +

今後実装予定の機能

+ +
    +
  • 新しい同意に基づいた Shadow DOM の実装は、2016 年 Q1 にリリース予定です。Anne と Wilson のブログ投稿に詳細が記述されています。しかし、まだ仕様について 多くの議論や課題 があり、すべてのブラウザへの実装は将来となるでしょう。
    • +
  • Custom elements は、最初からやり直しで、ECMAScript 6 の文法を使用してリビルドする計画 (つまり、より少ないプロトタイプを基に作成) です。Apple の Ryosuke Niwa が、実装をいくつか具体化しています。 +
      +
    • 古い文法は、しばらくの間、新しい文法と共に Chrome で動作するでしょう (例えば、{{domxref("Element.attachShadow()")}} に対して {{domxref("Element.createShadowRoot()")}})、しかし、Firefox ではネイティブでは動作しないでしょう。
      • +
    +
    • +
  • これらの問題について、2016 年 1 月の会議 でベンダが議論するでしょう。
    • +
+ +

放棄された機能

+ +

これらの機能は、実装の検討がされており、実験的に実装されていたものもあります。今後は改良もされず、削除されるでしょう。

+ +
    +
  • HTML imports の使用は、ES6 モジュールで開発者が何ができるかを確認することは、待って欲しいです (まだ実装されていません。{{bug(568953)}} をご覧ください)。Firefox から削除される予定の未完了の import の実装がありました。
    • +
+ +

Firefox でポリフィルを使用する

+ +

Firefox でポリフィルを使用する際に考慮すべき注意事項があります:

+ +
    +
  • about:config の {{pref("dom.webcomponents.enabled")}} 設定を true に変更して Firefox で Web Components を有効にすると、完全でないネイティブ実装が動き始め、ポリフィルが混乱する可能性があります。
    • +
  • webcomponents.js ポリフィルを使用した Shadow DOM のポリフィルは、スタイルをカプセル化できません。そのため、スタイルは bleed through でしょう。ポリフィルを使用して構築されたサイトは、ネイティブの Shadow DOM を サポートした 環境と異なる見た目になることに注意してください。
    • +
  • Shadow DOM のポリフィルは、機能にフックするために DOM 要素のプロトタイプをリライトするため、とても動作が遅いです (ポリフィルというよりポリリプレイスです!)。
    • +
  • Shadow DOM を使用する必要がない場合、webcomponents.js ポリフィルの webcomponents-lite.js バージョンを使用することをお勧めします。このバージョンは、Shadow DOM を使用しないポリフィルです。
    • +
+
+
-- cgit v1.2.3-54-g00ecf