diff options
| author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
| commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
| tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/vi/web/api | |
| parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
| download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip | |
remove retired locales (#699)
Diffstat (limited to 'files/vi/web/api')
37 files changed, 0 insertions, 6564 deletions
diff --git a/files/vi/web/api/audiocontext/index.html b/files/vi/web/api/audiocontext/index.html deleted file mode 100644 index da175915e4..0000000000 --- a/files/vi/web/api/audiocontext/index.html +++ /dev/null @@ -1,305 +0,0 @@ ---- -title: AudioContext -slug: Web/API/AudioContext -tags: - - API - - Audio - - AudioContext - - Interface - - NeedsTranslation - - Reference - - TopicStub - - Web Audio API - - sound -translation_of: Web/API/AudioContext ---- -<p>{{APIRef("Web Audio API")}}</p> - -<div> -<p>The <code>AudioContext</code> interface represents an audio-processing graph built from audio modules linked together, each represented by an {{domxref("AudioNode")}}. An audio context controls both the creation of the nodes it contains and the execution of the audio processing, or decoding. You need to create an AudioContext before you do anything else, as everything happens inside a context.</p> -</div> - -<p>An <code>AudioContext</code> can be a target of events, therefore it implements the {{domxref("EventTarget")}} interface.</p> - -<p>{{InheritanceDiagram}}</p> - -<h2 id="Constructor">Constructor</h2> - -<dl> - <dt>{{domxref("AudioContext.AudioContext", "AudioContext()")}}</dt> - <dd>Creates and returns a new <code>AudioContext</code> object.</dd> -</dl> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{domxref("AudioContext.currentTime")}} {{readonlyInline}}</dt> - <dd>Returns a double representing an ever-increasing hardware time in seconds used for scheduling. It starts at <code>0</code>.</dd> - <dt>{{domxref("AudioContext.destination")}} {{readonlyInline}}</dt> - <dd>Returns an {{domxref("AudioDestinationNode")}} representing the final destination of all audio in the context. It can be thought of as the audio-rendering device.</dd> - <dt>{{domxref("AudioContext.listener")}} {{readonlyInline}}</dt> - <dd>Returns the {{domxref("AudioListener")}} object, used for 3D spatialization.</dd> - <dt>{{domxref("AudioContext.sampleRate")}} {{readonlyInline}}</dt> - <dd>Returns a float representing the sample rate (in samples per second) used by all nodes in this context. The sample-rate of an {{domxref("AudioContext")}} cannot be changed.</dd> - <dt>{{domxref("AudioContext.state")}} {{readonlyInline}}</dt> - <dd>Returns the current state of the <code>AudioContext</code>.</dd> - <dt>{{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}}</dt> - <dd>Used to return the audio channel that the sound playing in an {{domxref("AudioContext")}} will play in, on a Firefox OS device.</dd> -</dl> - -<h3 id="Event_handlers">Event handlers</h3> - -<dl> - <dt>{{domxref("AudioContext.onstatechange")}}</dt> - <dd>An event handler that runs when an event of type {{event("statechange")}} has fired. This occurs when the <code>AudioContext</code>'s state changes, due to the calling of one of the state change methods ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, or {{domxref("AudioContext.close")}}).</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>Also implements methods from the interface </em>{{domxref("EventTarget")}}.</p> - -<dl> - <dt>{{domxref("AudioContext.close()")}}</dt> - <dd>Closes the audio context, releasing any system audio resources that it uses.</dd> - <dt>{{domxref("AudioContext.createBuffer()")}}</dt> - <dd>Creates a new, empty {{ domxref("AudioBuffer") }} object, which can then be populated by data and played via an {{ domxref("AudioBufferSourceNode") }}.</dd> - <dt>{{domxref("AudioContext.createConstantSource()")}}</dt> - <dd>Creates a {{domxref("ConstantSourceNode")}} object, which is an audio source that continuously outputs a monaural (one-channel) sound signal whose samples all have the same value.</dd> - <dt>{{domxref("AudioContext.createBufferSource()")}}</dt> - <dd>Creates an {{domxref("AudioBufferSourceNode")}}, which can be used to play and manipulate audio data contained within an {{ domxref("AudioBuffer") }} object. {{ domxref("AudioBuffer") }}s are created using {{domxref("AudioContext.createBuffer")}} or returned by {{domxref("AudioContext.decodeAudioData")}} when it successfully decodes an audio track.</dd> - <dt>{{domxref("AudioContext.createMediaElementSource()")}}</dt> - <dd>Creates a {{domxref("MediaElementAudioSourceNode")}} associated with an {{domxref("HTMLMediaElement")}}. This can be used to play and manipulate audio from {{HTMLElement("video")}} or {{HTMLElement("audio")}} elements.</dd> - <dt>{{domxref("AudioContext.createMediaStreamSource()")}}</dt> - <dd>Creates a {{domxref("MediaStreamAudioSourceNode")}} associated with a {{domxref("MediaStream")}} representing an audio stream which may come from the local computer microphone or other sources.</dd> - <dt>{{domxref("AudioContext.createMediaStreamDestination()")}}</dt> - <dd>Creates a {{domxref("MediaStreamAudioDestinationNode")}} associated with a {{domxref("MediaStream")}} representing an audio stream which may be stored in a local file or sent to another computer.</dd> - <dt>{{domxref("AudioContext.createScriptProcessor()")}}</dt> - <dd>Creates a {{domxref("ScriptProcessorNode")}}, which can be used for direct audio processing via JavaScript.</dd> - <dt>{{domxref("AudioContext.createStereoPanner()")}}</dt> - <dd>Creates a {{domxref("StereoPannerNode")}}, which can be used to apply stereo panning to an audio source.</dd> - <dt>{{domxref("AudioContext.createAnalyser()")}}</dt> - <dd>Creates an {{domxref("AnalyserNode")}}, which can be used to expose audio time and frequency data and for example to create data visualisations.</dd> - <dt>{{domxref("AudioContext.createBiquadFilter()")}}</dt> - <dd>Creates a {{domxref("BiquadFilterNode")}}, which represents a second order filter configurable as several different common filter types: high-pass, low-pass, band-pass, etc.</dd> - <dt>{{domxref("AudioContext.createChannelMerger()")}}</dt> - <dd>Creates a {{domxref("ChannelMergerNode")}}, which is used to combine channels from multiple audio streams into a single audio stream.</dd> - <dt>{{domxref("AudioContext.createChannelSplitter()")}}</dt> - <dd>Creates a {{domxref("ChannelSplitterNode")}}, which is used to access the individual channels of an audio stream and process them separately.</dd> - <dt>{{domxref("AudioContext.createConvolver()")}}</dt> - <dd>Creates a {{domxref("ConvolverNode")}}, which can be used to apply convolution effects to your audio graph, for example a reverberation effect.</dd> - <dt>{{domxref("AudioContext.createDelay()")}}</dt> - <dd>Creates a {{domxref("DelayNode")}}, which is used to delay the incoming audio signal by a certain amount. This node is also useful to create feedback loops in a Web Audio API graph.</dd> - <dt>{{domxref("AudioContext.createDynamicsCompressor()")}}</dt> - <dd>Creates a {{domxref("DynamicsCompressorNode")}}, which can be used to apply acoustic compression to an audio signal.</dd> - <dt>{{domxref("AudioContext.createGain()")}}</dt> - <dd>Creates a {{domxref("GainNode")}}, which can be used to control the overall volume of the audio graph.</dd> - <dt>{{domxref("AudioContext.createIIRFilter()")}}</dt> - <dd>Creates an {{domxref("IIRFilterNode")}}, which represents a second order filter configurable as several different common filter types.</dd> - <dt>{{domxref("AudioContext.createOscillator()")}}</dt> - <dd>Creates an {{domxref("OscillatorNode")}}, a source representing a periodic waveform. It basically generates a tone.</dd> - <dt>{{domxref("AudioContext.createPanner()")}}</dt> - <dd>Creates a {{domxref("PannerNode")}}, which is used to spatialise an incoming audio stream in 3D space.</dd> - <dt>{{domxref("AudioContext.createPeriodicWave()")}}</dt> - <dd>Creates a {{domxref("PeriodicWave")}}, used to define a periodic waveform that can be used to determine the output of an {{ domxref("OscillatorNode") }}.</dd> - <dt>{{domxref("AudioContext.createWaveShaper()")}}</dt> - <dd>Creates a {{domxref("WaveShaperNode")}}, which is used to implement non-linear distortion effects.</dd> - <dt>{{domxref("AudioContext.createAudioWorker()")}}</dt> - <dd>Creates an {{domxref("AudioWorkerNode")}}, which can interact with a web worker thread to generate, process, or analyse audio directly. This was added to the spec on August 29 2014, and is not implemented in any browser yet.</dd> - <dt>{{domxref("AudioContext.decodeAudioData()")}}</dt> - <dd>Asynchronously decodes audio file data contained in an {{domxref("ArrayBuffer")}}. In this case, the ArrayBuffer is usually loaded from an {{domxref("XMLHttpRequest")}}'s <code>response</code> attribute after setting the <code>responseType</code> to <code>arraybuffer</code>. This method only works on complete files, not fragments of audio files.</dd> - <dt>{{domxref("AudioContext.getOutputTimestamp()")}}</dt> - <dd>Returns a new <code>AudioTimestamp</code> containing two correlated context's audio stream position values: the <code>AudioTimestamp.contextTime</code> member contains the time of the sample frame which is currently being rendered by the audio output device (i.e., output audio stream position), in the same units and origin as context's {{domxref("AudioContext.currentTime")}}; the AudioTimestamp.performanceTime member contains the time estimating the moment when the sample frame corresponding to the stored contextTime value was rendered by the audio output device, in the same units and origin as {{domxref("performance.now()")}}.</dd> - <dt>{{domxref("AudioContext.resume()")}}</dt> - <dd>Resumes the progression of time in an audio context that has previously been suspended.</dd> - <dt>{{domxref("AudioContext.suspend()")}}</dt> - <dd>Suspends the progression of time in the audio context, temporarily halting audio hardware access and reducing CPU/battery usage in the process.</dd> -</dl> - -<h2 id="Obsolete_methods">Obsolete methods</h2> - -<dl> - <dt>{{domxref("AudioContext.createJavaScriptNode()")}}</dt> - <dd>Creates a {{domxref("JavaScriptNode")}}, used for direct audio processing via JavaScript. This method is obsolete, and has been replaced by {{domxref("AudioContext.createScriptProcessor()")}}.</dd> - <dt>{{domxref("AudioContext.createWaveTable()")}}</dt> - <dd>Creates a {{domxref("WaveTableNode")}}, used to define a periodic waveform. This method is obsolete, and has been replaced by {{domxref("AudioContext.createPeriodicWave()")}}.</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<p>Basic audio context declaration:</p> - -<pre class="brush: js">var audioCtx = new AudioContext();</pre> - -<p>Cross browser variant:</p> - -<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext; -var audioCtx = new AudioContext(); - -var oscillatorNode = audioCtx.createOscillator(); -var gainNode = audioCtx.createGain(); -var finish = audioCtx.destination; -// etc.</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#the-audiocontext-interface', 'AudioContext')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}<br> - 35</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(25.0)}} </td> - <td>{{CompatNo}}</td> - <td>15.0{{property_prefix("webkit")}}<br> - 22</td> - <td>6.0{{property_prefix("webkit")}}</td> - </tr> - <tr> - <td><code>createStereoPanner()</code></td> - <td>{{CompatChrome(42.0)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(37.0)}} </td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(40.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatSafari(8.0)}}</td> - </tr> - <tr> - <td><code>createConstantSource()</code></td> - <td>{{CompatChrome(56.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop(52)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatOpera(43)}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>Unprefixed</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android Webview</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(37.0)}} </td> - <td>2.2</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>createStereoPanner()</code></td> - <td>{{CompatChrome(42.0)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(42.0)}}</td> - </tr> - <tr> - <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>createConstantSource()</code></td> - <td>{{CompatChrome(56.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile(52)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(56.0)}}</td> - </tr> - <tr> - <td>Unprefixed</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatOperaMobile(43)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul style="margin-left: 40px;"> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> - <li>{{domxref("OfflineAudioContext")}}</li> -</ul> diff --git a/files/vi/web/api/baseaudiocontext/createoscillator/index.html b/files/vi/web/api/baseaudiocontext/createoscillator/index.html deleted file mode 100644 index 1cef402134..0000000000 --- a/files/vi/web/api/baseaudiocontext/createoscillator/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: AudioContext.createOscillator() -slug: Web/API/BaseAudioContext/createOscillator -translation_of: Web/API/BaseAudioContext/createOscillator -original_slug: Web/API/AudioContext/createOscillator ---- -<p>{{ APIRef("Web Audio API") }}</p> - -<div> -<p>Phương thức <code>createOscillator()</code> của giao thức {{ domxref("AudioContext") }} tạo một cái {{ domxref("OscillatorNode") }} (nút máy dao động). Tức là ta cái nguồn từ dạng sóng.</p> -</div> - -<h2 id="Cú_pháp">Cú pháp</h2> - -<pre class="brush: js">var audioCtx = new AudioContext(); -var oscillator = audioCtx.createOscillator();</pre> - -<h3 id="Description" name="Description">Trả về</h3> - -<p>Một cái {{domxref("OscillatorNode")}}.</p> - -<h2 id="Examples" name="Examples">Ví dụ</h2> - -<p>Ví dụ này trình bày sử dụng đơn giản của một cái AudioContext để tạo một cái OsillatorNode. Để biết thêm thông tin, xem biểu hiện, và trang {{domxref("OscillatorNode")}} của chúng tôi</p> - -<p>Ví dụ này trình bày sử dụng đơn giản của một cái AudioContext để tạo một cái OsillatorNode. Để biết thêm thông tin, xem biểu hiện <a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a> (<a href="https://github.com/mdn/violent-theremin/blob/gh-pages/scripts/app.js">app.js</a>); và trang {{ domxref("OscillatorNode") }} của chúng tôi.</p> - -<pre class="brush: js">// create web audio api context -var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); - -// create Oscillator node -var oscillator = audioCtx.createOscillator(); - -oscillator.type = 'square'; -oscillator.frequency.value = 3000; // Hz -<code>oscillator.connect(audioCtx.destination); -</code>oscillator.start();</pre> - -<h2 id="Quy_cách">Quy cách</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Quy cách</th> - <th scope="col">Địa vị</th> - <th scope="col">Chú thích</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#widl-AudioContext-createOscillator-OscillatorNode', 'createOscillator')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Tương_thích_trình_duyệt">Tương thích trình duyệt</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Đặc trưng</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(25.0)}} </td> - <td>{{CompatNo}}</td> - <td>15.0{{property_prefix("webkit")}}<br> - 22 (unprefixed)</td> - <td>6.0{{property_prefix("webkit")}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Đặc trưng</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>26.0</td> - <td>1.2</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>33.0</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Xem_thêm">Xem thêm</h2> - -<ul> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> -</ul> diff --git a/files/vi/web/api/canvas_api/index.html b/files/vi/web/api/canvas_api/index.html deleted file mode 100644 index dc582ea7ce..0000000000 --- a/files/vi/web/api/canvas_api/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Canvas API -slug: Web/API/Canvas_API -translation_of: Web/API/Canvas_API ---- -<div>{{CanvasSidebar}}</div> - -<p class="summary"><strong>Canvas API</strong> cung cấp phương tiện để vẽ đồ họa thông qua <a href="/en-US/docs/Web/JavaScript">JavaScript</a> và <a href="/en-US/docs/Web/HTML">HTML</a> {{HtmlElement("canvas")}} thuộc tính. Nó có thể được sử dụng cho hình động, đồ họa game, trực quan hóa dữ liệu, xử lí ảnh và video trong thời gian thực.</p> - -<p>Canvas API tập trung vào đồ họa 2D. <a href="/en-US/docs/Web/WebGL">WebGL API</a>, nó cũng sử dụng <code><canvas></code> , để vẽ đồ họa 2D và 3D.</p> - -<h2 id="Ví_dụ_đơn_giản">Ví dụ đơn giản</h2> - -<p>This simple example draws a green rectangle onto a canvas.</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<p>The {{domxref("Document.getElementById()")}} method gets a reference to the HTML <code><canvas></code> element. Next, the {{domxref("HTMLCanvasElement.getContext()")}} method gets that element's context—the thing onto which the drawing will be rendered.</p> - -<p>The actual drawing is done using the {{domxref("CanvasRenderingContext2D")}} interface. The {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} property makes the rectangle green. The {{domxref("CanvasRenderingContext2D.fillRect()", "fillRect()")}} method places its top-left corner at (10, 10), and gives it a size of 150 units wide by 100 tall.</p> - -<pre class="brush: js">const canvas = document.getElementById('canvas'); -const ctx = canvas.getContext('2d'); - -ctx.fillStyle = 'green'; -ctx.fillRect(10, 10, 150, 100); -</pre> - -<h3 id="Result">Result</h3> - -<p>{{ EmbedLiveSample('Basic_example', 700, 180) }}</p> - -<h2 id="Reference">Reference</h2> - -<div class="index"> -<ul> - <li>{{domxref("HTMLCanvasElement")}}</li> - <li>{{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasGradient")}}</li> - <li>{{domxref("CanvasImageSource")}}</li> - <li>{{domxref("CanvasPattern")}}</li> - <li>{{domxref("ImageBitmap")}}</li> - <li>{{domxref("ImageData")}}</li> - <li>{{domxref("RenderingContext")}}</li> - <li>{{domxref("TextMetrics")}}</li> - <li>{{domxref("OffscreenCanvas")}} {{experimental_inline}}</li> - <li>{{domxref("Path2D")}} {{experimental_inline}}</li> - <li>{{domxref("ImageBitmapRenderingContext")}} {{experimental_inline}}</li> -</ul> -</div> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> The interfaces related to the <code>WebGLRenderingContext</code> are referenced under <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p> -</div> - -<p>{{domxref("CanvasCaptureMediaStream")}} is a related interface.</p> - -<h2 id="Guides_and_tutorials">Guides and tutorials</h2> - -<dl> - <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></dt> - <dd>A comprehensive tutorial covering both the basic usage of the Canvas API and its advanced features.</dd> - <dt><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Canvas Deep Dive</a></dt> - <dd>A hands-on, book-length introduction to the Canvas API and WebGL.</dd> - <dt><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Canvas Handbook</a></dt> - <dd>A handy reference for the Canvas API.</dd> - <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demo: A basic ray-caster</a></dt> - <dd>A demo of ray-tracing animation using canvas.</dd> - <dt><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulating video using canvas</a></dt> - <dd>Combining {{HTMLElement("video")}} and {{HTMLElement("canvas")}} to manipulate video data in real time.</dd> -</dl> - -<h2 id="Libraries">Libraries</h2> - -<p>The Canvas API is extremely powerful, but not always simple to use. The libraries listed below can make the creation of canvas-based projects faster and easier.</p> - -<ul> - <li><a href="http://www.createjs.com/easeljs">EaselJS</a> is an open-source canvas library that makes creating games, generative art, and other highly graphical experiences easy.</li> - <li><a href="http://fabricjs.com">Fabric.js</a> is an open-source canvas library with SVG parsing capabilities.</li> - <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> is an open-source library for creating canvas-based data heat maps.</li> - <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> creates interactive data visualizations.</li> - <li><a href="https://konvajs.github.io/">Konva.js</a> is a 2D canvas library for desktop and mobile applications.</li> - <li><a href="https://p5js.org/">p5.js </a>has a full set of canvas drawing functionality for artists, designers, educators, and beginners.</li> - <li><a href="http://paperjs.org/">Paper.js</a> is an open-source vector graphics scripting framework that runs on top of the HTML5 Canvas.</li> - <li><a href="https://phaser.io/">Phaser</a> is a fast, free and fun open source framework for Canvas and WebGL powered browser games.</li> - <li><a href="http://processingjs.org">Processing.js</a> is a port of the Processing visualization language.</li> - <li><a href="https://ptsjs.org">Pts.js</a> is a library for creative coding and visualization in canvas and SVG.</li> - <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> is an animation key-framing API for Canvas.</li> - <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> is an open-source JavaScript library for creating and manipulating 2D canvas elements.</li> - <li>The <a href="http://zimjs.com">ZIM</a> framework provides conveniences, components, and controls for coding creativity on the canvas — includes accessibility and hundreds of colorful tutorials.</li> -</ul> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> See the <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL API</a> for 2D and 3D libaries that use WebGL.</p> -</div> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#2dcontext', 'the 2D rendering context')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>Mozilla applications gained support for <code><canvas></code> starting with Gecko 1.8 (<a href="/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>). The element was originally introduced by Apple for the OS X Dashboard and Safari. Internet Explorer supports <code><canvas></code> from version 9 onwards; for earlier versions of IE, a page can effectively add support for <code><canvas></code> by including a script from Google's <a href="https://github.com/arv/explorercanvas">Explorer Canvas</a> project. Google Chrome and Opera 9 also support <code><canvas></code>.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li> -</ul> diff --git a/files/vi/web/api/childnode/index.html b/files/vi/web/api/childnode/index.html deleted file mode 100644 index ff71a15d51..0000000000 --- a/files/vi/web/api/childnode/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: ChildNode -slug: Web/API/ChildNode -tags: - - API - - DOM - - Experimental - - Interface - - NeedsTranslation - - Node - - TopicStub -translation_of: Web/API/ChildNode ---- -<div>{{APIRef("DOM")}}</div> - -<p>The <code><strong>ChildNode</strong></code> interface contains methods that are particular to {{domxref("Node")}} objects that can have a parent.</p> - -<p><code>ChildNode</code> is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, {{domxref("DocumentType")}}, and {{domxref("CharacterData")}} objects.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>There are neither inherited, nor specific properties.</em></p> - -<h2 id="Methods">Methods</h2> - -<p><em>There are no inherited methods.</em></p> - -<dl> - <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt> - <dd>Removes this <code>ChildNode</code> from the children list of its parent.</dd> - <dt>{{domxref("ChildNode.before()")}} {{experimental_inline}}</dt> - <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>ChildNode</code>'s parent, just before this <code>ChildNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> - <dt>{{domxref("ChildNode.after()")}} {{experimental_inline}}</dt> - <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>ChildNode</code>'s parent, just after this <code>ChildNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> - <dt>{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}</dt> - <dd>Replaces this <code>ChildNode</code> in the children list of its parent with a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Split the <code>ElementTraversal</code> interface in {{domxref("ParentNode")}} and <code>ChildNode</code>. <code>previousElementSibling</code> and <code>nextElementSibling</code> are now defined on the latter. The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces. Added the <code>remove()</code>, <code>before()</code>, <code>after()</code> and <code>replaceWith()</code> methods.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Polyfill">Polyfill</h2> - -<p>External on github: <a href="https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js">childNode.js</a></p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.ChildNode")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The {{domxref("ParentNode")}} pure interface.</li> - <li> - <div class="syntaxbox">Object types implementing this pure interface: {{domxref("CharacterData")}}, {{domxref("Element")}}, and {{domxref("DocumentType")}}.</div> - </li> -</ul> diff --git a/files/vi/web/api/childnode/remove/index.html b/files/vi/web/api/childnode/remove/index.html deleted file mode 100644 index 3c0fde3e18..0000000000 --- a/files/vi/web/api/childnode/remove/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: ChildNode.remove() -slug: Web/API/ChildNode/remove -tags: - - API - - ChildNode - - DOM - - Phương Thức - - Đang thử nghiệm -translation_of: Web/API/ChildNode/remove ---- -<div>{{APIRef("DOM")}}</div> - -<p>Phương thức <code><strong>ChildNode.remove()</strong></code> dùng để loại bỏ chính đối tượng gọi nó ra khỏi cây cấu trúc.</p> - -<h2 id="Cú_pháp">Cú pháp</h2> - -<pre class="syntaxbox"><em>node</em>.remove(); -</pre> - -<h2 id="Ví_dụ">Ví dụ</h2> - -<h3 id="Cách_dùng_remove()">Cách dùng <code>remove()</code></h3> - -<pre class="brush: html"><div id="div-01">Đây là div-01</div> -<div id="div-02">Đây là div-02</div> -<div id="div-03">Đây là div-03</div> -</pre> - -<pre class="brush: js">var el = document.getElementById('div-02'); -el.remove(); // Gỡ bỏ div có id là 'div-02' -</pre> - -<h3 id="ChildNode.remove()_is_unscopable"><code>ChildNode.remove()</code> is unscopable</h3> - -<p>The <code>remove()</code> method is not scoped into the <code>with</code> statement. See {{jsxref("Symbol.unscopables")}} for more information.</p> - -<pre class="brush: js">with(node) { - remove(); -} -// ReferenceError: remove is not defined </pre> - -<h2 id="Giải_pháp_thay_thế">Giải pháp thay thế</h2> - -<p>Ta có thể thay thế phương thức <code>remove()</code> bằng đoạn mã sau để chạy trên Internet Explorer 9 và những đời sau này:</p> - -<pre class="brush: js">// Nguồn: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('remove')) { - return; - } - Object.defineProperty(item, 'remove', { - configurable: true, - enumerable: true, - writable: true, - value: function remove() { - if (this.parentNode !== null) - this.parentNode.removeChild(this); - } - }); - }); -})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre> - -<h2 id="Thông_số_kỹ_thuật">Thông số kỹ thuật</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Thông số kỹ thuật</th> - <th scope="col">Trạng thái</th> - <th scope="col">Chú thích</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Lần đầu được định nghĩa.</td> - </tr> - </tbody> -</table> - -<h2 id="Tính_tương_thích_trên_trình_duyệt">Tính tương thích trên trình duyệt</h2> - -<div> - - -<p>{{Compat("api.ChildNode.remove")}}</p> -</div> - -<h2 id="Xem_thêm">Xem thêm</h2> - -<ul> - <li>The {{domxref("ChildNode")}} pure interface.</li> - <li> - <div class="syntaxbox">Object types implementing this pure interface: {{domxref("CharacterData")}}, {{domxref("Element")}}, and {{domxref("DocumentType")}}.</div> - </li> -</ul> diff --git a/files/vi/web/api/document_object_model/index.html b/files/vi/web/api/document_object_model/index.html deleted file mode 100644 index d00ed4aeea..0000000000 --- a/files/vi/web/api/document_object_model/index.html +++ /dev/null @@ -1,387 +0,0 @@ ---- -title: Document Object Model (DOM) -slug: Web/API/Document_Object_Model -tags: - - API - - DOM - - DOM Reference - - Intermediate - - NeedsTranslation - - Reference - - TopicStub -translation_of: Web/API/Document_Object_Model ---- -<p>{{DefaultAPISidebar("DOM")}}</p> - -<p>The <strong>Document Object Model (<em>DOM</em>)</strong> is a programming interface for HTML, XML and SVG documents. It provides a structured representation of the document as a tree. The DOM defines methods that allow access to the tree, so that they can change the document structure, style and content. The DOM provides a representation of the document as a structured group of nodes and objects, possessing various properties and methods. Nodes can also have event handlers attached to them, and once an event is triggered, the event handlers get executed. Essentially, it connects web pages to scripts or programming languages.</p> - -<p>Although the DOM is often accessed using JavaScript, it is not a part of the JavaScript language. It can also be accessed by other languages.</p> - -<p>An <a href="/en-US/docs/DOM/DOM_Reference/Introduction">introduction</a> to the DOM is available.</p> - -<h2 id="DOM_interfaces">DOM interfaces</h2> - -<div class="index"> -<ul> - <li>{{domxref("Attr")}}</li> - <li>{{domxref("CharacterData")}}</li> - <li>{{domxref("ChildNode")}} {{experimental_inline}}</li> - <li>{{domxref("Comment")}}</li> - <li>{{domxref("CustomEvent")}}</li> - <li>{{domxref("Document")}}</li> - <li>{{domxref("DocumentFragment")}}</li> - <li>{{domxref("DocumentType")}}</li> - <li>{{domxref("DOMError")}}</li> - <li>{{domxref("DOMException")}}</li> - <li>{{domxref("DOMImplementation")}}</li> - <li>{{domxref("DOMString")}}</li> - <li>{{domxref("DOMTimeStamp")}}</li> - <li>{{domxref("DOMSettableTokenList")}}</li> - <li>{{domxref("DOMStringList")}}</li> - <li>{{domxref("DOMTokenList")}}</li> - <li>{{domxref("Element")}}</li> - <li>{{domxref("Event")}}</li> - <li>{{domxref("EventTarget")}}</li> - <li>{{domxref("HTMLCollection")}}</li> - <li>{{domxref("MutationObserver")}}</li> - <li>{{domxref("MutationRecord")}}</li> - <li>{{domxref("Node")}}</li> - <li>{{domxref("NodeFilter")}}</li> - <li>{{domxref("NodeIterator")}}</li> - <li>{{domxref("NodeList")}}</li> - <li>{{domxref("ParentNode")}} {{experimental_inline}}</li> - <li>{{domxref("ProcessingInstruction")}}</li> - <li>{{domxref("Range")}}</li> - <li>{{domxref("Text")}}</li> - <li>{{domxref("TreeWalker")}}</li> - <li>{{domxref("URL")}}</li> - <li>{{domxref("Window")}}</li> - <li>{{domxref("Worker")}}</li> - <li>{{domxref("XMLDocument")}} {{experimental_inline}}</li> -</ul> -</div> - -<h2 id="Obsolete_DOM_interfaces">Obsolete DOM interfaces</h2> - -<p>The Document Object Model has been highly simplified. To achieve this, the following interfaces present in the different DOM level 3 or earlier specification have been removed. It is still not very clear whether some may be reintroduced or not, but for the time being they have to be considered as obsolete and should be avoided:</p> - -<div class="index"> -<ul> - <li>{{domxref("CDATASection")}}</li> - <li>{{domxref("DOMConfiguration")}}</li> - <li>{{domxref("DOMErrorHandler")}}</li> - <li>{{domxref("DOMImplementationList")}}</li> - <li>{{domxref("DOMImplementationRegistry")}}</li> - <li>{{domxref("DOMImplementationSource")}}</li> - <li>{{domxref("DOMLocator")}}</li> - <li>{{domxref("DOMObject")}}</li> - <li>{{domxref("DOMUserData")}}</li> - <li>{{domxref("Entity")}}</li> - <li>{{domxref("EntityReference")}}</li> - <li>{{domxref("NamedNodeMap")}}</li> - <li>{{domxref("NameList")}}</li> - <li>{{domxref("Notation")}}</li> - <li>{{domxref("TypeInfo")}}</li> - <li>{{domxref("UserDataHandler")}}</li> - <li> </li> -</ul> -</div> - -<h2 id="HTML_interfaces">HTML interfaces</h2> - -<p>A document containing HTML is described using the {{domxref("HTMLDocument")}} interface. Note that the HTML specification also extends the {{domxref("Document")}} interface.</p> - -<p>An <code>HTMLDocument</code> object also gives access to various features of browsers like the tab or the window, in which a page is drawn using the {{domxref("Window")}} interface, the {{domxref("window.style", "Style")}} associated to it (usually CSS), the history of the browser relative to the context, {{domxref("window.history", "History")}}. Eventually, {{domxref("Selection")}} is done on the document.</p> - -<h3 id="HTML_element_interfaces">HTML element interfaces</h3> - -<div class="index"> -<ul> - <li>{{domxref("HTMLAnchorElement")}}</li> - <li>{{domxref("HTMLAppletElement")}}</li> - <li>{{domxref("HTMLAreaElement")}}</li> - <li>{{domxref("HTMLAudioElement")}}</li> - <li>{{domxref("HTMLBaseElement")}}</li> - <li>{{domxref("HTMLBodyElement")}}</li> - <li>{{domxref("HTMLBRElement")}}</li> - <li>{{domxref("HTMLButtonElement")}}</li> - <li>{{domxref("HTMLCanvasElement")}}</li> - <li>{{domxref("HTMLDataElement")}}</li> - <li>{{domxref("HTMLDataListElement")}}</li> - <li>{{domxref("HTMLDialogElement")}}</li> - <li>{{domxref("HTMLDirectoryElement")}}</li> - <li>{{domxref("HTMLDivElement")}}</li> - <li>{{domxref("HTMLDListElement")}}</li> - <li>{{domxref("HTMLElement")}}</li> - <li>{{domxref("HTMLEmbedElement")}}</li> - <li>{{domxref("HTMLFieldSetElement")}}</li> - <li>{{domxref("HTMLFontElement")}}</li> - <li>{{domxref("HTMLFormElement")}}</li> - <li>{{domxref("HTMLFrameElement")}}</li> - <li>{{domxref("HTMLFrameSetElement")}}</li> - <li>{{domxref("HTMLHeadElement")}}</li> - <li>{{domxref("HTMLHeadingElement")}}</li> - <li>{{domxref("HTMLHtmlElement")}}</li> - <li>{{domxref("HTMLHRElement")}}</li> - <li>{{domxref("HTMLIFrameElement")}}</li> - <li>{{domxref("HTMLImageElement")}}</li> - <li>{{domxref("HTMLInputElement")}}</li> - <li>{{domxref("HTMLKeygenElement")}}</li> - <li>{{domxref("HTMLLabelElement")}}</li> - <li>{{domxref("HTMLLegendElement")}}</li> - <li>{{domxref("HTMLLIElement")}}</li> - <li>{{domxref("HTMLLinkElement")}}</li> - <li>{{domxref("HTMLMapElement")}}</li> - <li>{{domxref("HTMLMediaElement")}}</li> - <li>{{domxref("HTMLMenuElement")}}</li> - <li>{{domxref("HTMLMetaElement")}}</li> - <li>{{domxref("HTMLMeterElement")}}</li> - <li>{{domxref("HTMLModElement")}}</li> - <li>{{domxref("HTMLObjectElement")}}</li> - <li>{{domxref("HTMLOListElement")}}</li> - <li>{{domxref("HTMLOptGroupElement")}}</li> - <li>{{domxref("HTMLOptionElement")}}</li> - <li>{{domxref("HTMLOutputElement")}}</li> - <li>{{domxref("HTMLParagraphElement")}}</li> - <li>{{domxref("HTMLParamElement")}}</li> - <li>{{domxref("HTMLPreElement")}}</li> - <li>{{domxref("HTMLProgressElement")}}</li> - <li>{{domxref("HTMLQuoteElement")}}</li> - <li>{{domxref("HTMLScriptElement")}}</li> - <li>{{domxref("HTMLSelectElement")}}</li> - <li>{{domxref("HTMLSourceElement")}}</li> - <li>{{domxref("HTMLSpanElement")}}</li> - <li>{{domxref("HTMLStyleElement")}}</li> - <li>{{domxref("HTMLTableElement")}}</li> - <li>{{domxref("HTMLTableCaptionElement")}}</li> - <li>{{domxref("HTMLTableCellElement")}}</li> - <li>{{domxref("HTMLTableDataCellElement")}}</li> - <li>{{domxref("HTMLTableHeaderCellElement")}}</li> - <li>{{domxref("HTMLTableColElement")}}</li> - <li>{{domxref("HTMLTableRowElement")}}</li> - <li>{{domxref("HTMLTableSectionElement")}}</li> - <li>{{domxref("HTMLTextAreaElement")}}</li> - <li>{{domxref("HTMLTimeElement")}}</li> - <li>{{domxref("HTMLTitleElement")}}</li> - <li>{{domxref("HTMLTrackElement")}}</li> - <li>{{domxref("HTMLUListElement")}}</li> - <li>{{domxref("HTMLUnknownElement")}}</li> - <li>{{domxref("HTMLVideoElement")}}</li> -</ul> -</div> - -<h3 id="Other_interfaces">Other interfaces</h3> - -<div class="index"> -<ul> - <li>{{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasGradient")}}</li> - <li>{{domxref("CanvasPattern")}}</li> - <li>{{domxref("TextMetrics")}}</li> - <li>{{domxref("ImageData")}}</li> - <li>{{domxref("CanvasPixelArray")}}</li> - <li>{{domxref("NotifyAudioAvailableEvent")}}</li> - <li>{{domxref("HTMLAllCollection")}}</li> - <li>{{domxref("HTMLFormControlsCollection")}}</li> - <li>{{domxref("HTMLOptionsCollection")}}</li> - <li>{{domxref("HTMLPropertiesCollection")}}</li> - <li>{{domxref("DOMStringMap")}}</li> - <li>{{domxref("RadioNodeList")}}</li> - <li>{{domxref("MediaError")}}</li> -</ul> -</div> - -<h3 id="Obsolete_HTML_interfaces">Obsolete HTML interfaces</h3> - -<div class="index"> -<ul> - <li>{{domxref("HTMLBaseFontElement")}}</li> - <li>{{domxref("HTMLIsIndexElement")}}</li> -</ul> -</div> - -<h2 id="SVG_interfaces">SVG interfaces</h2> - -<h3 id="SVG_element_interfaces">SVG element interfaces</h3> - -<div class="index"> -<ul> - <li>{{domxref("SVGAElement")}}</li> - <li>{{domxref("SVGAltGlyphElement")}}</li> - <li>{{domxref("SVGAltGlyphDefElement")}}</li> - <li>{{domxref("SVGAltGlyphItemElement")}}</li> - <li>{{domxref("SVGAnimationElement")}}</li> - <li>{{domxref("SVGAnimateElement")}}</li> - <li>{{domxref("SVGAnimateColorElement")}}</li> - <li>{{domxref("SVGAnimateMotionElement")}}</li> - <li>{{domxref("SVGAnimateTransformElement")}}</li> - <li>{{domxref("SVGCircleElement")}}</li> - <li>{{domxref("SVGClipPathElement")}}</li> - <li>{{domxref("SVGColorProfileElement")}}</li> - <li>{{domxref("SVGComponentTransferFunctionElement")}}</li> - <li>{{domxref("SVGCursorElement")}}</li> - <li>{{domxref("SVGDefsElement")}}</li> - <li>{{domxref("SVGDescElement")}}</li> - <li>{{domxref("SVGElement")}}</li> - <li>{{domxref("SVGEllipseElement")}}</li> - <li>{{domxref("SVGFEBlendElement")}}</li> - <li>{{domxref("SVGFEColorMatrixElement")}}</li> - <li>{{domxref("SVGFEComponentTransferElement")}}</li> - <li>{{domxref("SVGFECompositeElement")}}</li> - <li>{{domxref("SVGFEConvolveMatrixElement")}}</li> - <li>{{domxref("SVGFEDiffuseLightingElement")}}</li> - <li>{{domxref("SVGFEDisplacementMapElement")}}</li> - <li>{{domxref("SVGFEDistantLightElement")}}</li> - <li>{{domxref("SVGFEFloodElement")}}</li> - <li>{{domxref("SVGFEGaussianBlurElement")}}</li> - <li>{{domxref("SVGFEImageElement")}}</li> - <li>{{domxref("SVGFEMergeElement")}}</li> - <li>{{domxref("SVGFEMergeNodeElement")}}</li> - <li>{{domxref("SVGFEMorphologyElement")}}</li> - <li>{{domxref("SVGFEOffsetElement")}}</li> - <li>{{domxref("SVGFEPointLightElement")}}</li> - <li>{{domxref("SVGFESpecularLightingElement")}}</li> - <li>{{domxref("SVGFESpotLightElement")}}</li> - <li>{{domxref("SVGFETileElement")}}</li> - <li>{{domxref("SVGFETurbulenceElement")}}</li> - <li>{{domxref("SVGFEFuncRElement")}}</li> - <li>{{domxref("SVGFEFuncGElement")}}</li> - <li>{{domxref("SVGFEFuncBElement")}}</li> - <li>{{domxref("SVGFEFuncAElement")}}</li> - <li>{{domxref("SVGFilterElement")}}</li> - <li>{{domxref("SVGFilterPrimitiveStandardAttributes")}}</li> - <li>{{domxref("SVGFontElement")}}</li> - <li>{{domxref("SVGFontFaceElement")}}</li> - <li>{{domxref("SVGFontFaceFormatElement")}}</li> - <li>{{domxref("SVGFontFaceNameElement")}}</li> - <li>{{domxref("SVGFontFaceSrcElement")}}</li> - <li>{{domxref("SVGFontFaceUriElement")}}</li> - <li>{{domxref("SVGForeignObjectElement")}}</li> - <li>{{domxref("SVGGElement")}}</li> - <li>{{domxref("SVGGlyphElement")}}</li> - <li>{{domxref("SVGGlyphRefElement")}}</li> - <li>{{domxref("SVGGradientElement")}}</li> - <li>{{domxref("SVGHKernElement")}}</li> - <li>{{domxref("SVGImageElement")}}</li> - <li>{{domxref("SVGLinearGradientElement")}}</li> - <li>{{domxref("SVGLineElement")}}</li> - <li>{{domxref("SVGMarkerElement")}}</li> - <li>{{domxref("SVGMaskElement")}}</li> - <li>{{domxref("SVGMetadataElement")}}</li> - <li>{{domxref("SVGMissingGlyphElement")}}</li> - <li>{{domxref("SVGMPathElement")}}</li> - <li>{{domxref("SVGPathElement")}}</li> - <li>{{domxref("SVGPatternElement")}}</li> - <li>{{domxref("SVGPolylineElement")}}</li> - <li>{{domxref("SVGPolygonElement")}}</li> - <li>{{domxref("SVGRadialGradientElement")}}</li> - <li>{{domxref("SVGRectElement")}}</li> - <li>{{domxref("SVGScriptElement")}}</li> - <li>{{domxref("SVGSetElement")}}</li> - <li>{{domxref("SVGStopElement")}}</li> - <li>{{domxref("SVGStyleElement")}}</li> - <li>{{domxref("SVGSVGElement")}}</li> - <li>{{domxref("SVGSwitchElement")}}</li> - <li>{{domxref("SVGSymbolElement")}}</li> - <li>{{domxref("SVGTextElement")}}</li> - <li>{{domxref("SVGTextPathElement")}}</li> - <li>{{domxref("SVGTitleElement")}}</li> - <li>{{domxref("SVGTRefElement")}}</li> - <li>{{domxref("SVGTSpanElement")}}</li> - <li>{{domxref("SVGUseElement")}}</li> - <li>{{domxref("SVGViewElement")}}</li> - <li>{{domxref("SVGVKernElement")}}</li> -</ul> -</div> - -<h3 id="SVG_data_type_interfaces">SVG data type interfaces</h3> - -<p>Here are the DOM API for data types used in the definitions of SVG properties and attributes.</p> - -<div class="note"> -<p><strong>Note:</strong> Starting in {{Gecko("5.0")}}, the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed ; in addition, they have a length property indicating the number of items in the lists: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}}, and {{domxref("SVGPointList")}}.</p> -</div> - -<h4 id="Static_type">Static type</h4> - -<div class="index"> -<ul> - <li>{{domxref("SVGAngle")}}</li> - <li>{{domxref("SVGColor")}}</li> - <li>{{domxref("SVGICCColor")}}</li> - <li>{{domxref("SVGElementInstance")}}</li> - <li>{{domxref("SVGElementInstanceList")}}</li> - <li>{{domxref("SVGLength")}}</li> - <li>{{domxref("SVGLengthList")}}</li> - <li>{{domxref("SVGMatrix")}}</li> - <li>{{domxref("SVGNumber")}}</li> - <li>{{domxref("SVGNumberList")}}</li> - <li>{{domxref("SVGPaint")}}</li> - <li>{{domxref("SVGPoint")}}</li> - <li>{{domxref("SVGPointList")}}</li> - <li>{{domxref("SVGPreserveAspectRatio")}}</li> - <li>{{domxref("SVGRect")}}</li> - <li>{{domxref("SVGStringList")}}</li> - <li>{{domxref("SVGTransform")}}</li> - <li>{{domxref("SVGTransformList")}}</li> -</ul> -</div> - -<h4 id="Animated_type">Animated type</h4> - -<div class="index"> -<ul> - <li>{{domxref("SVGAnimatedAngle")}}</li> - <li>{{domxref("SVGAnimatedBoolean")}}</li> - <li>{{domxref("SVGAnimatedEnumeration")}}</li> - <li>{{domxref("SVGAnimatedInteger")}}</li> - <li>{{domxref("SVGAnimatedLength")}}</li> - <li>{{domxref("SVGAnimatedLengthList")}}</li> - <li>{{domxref("SVGAnimatedNumber")}}</li> - <li>{{domxref("SVGAnimatedNumberList")}}</li> - <li>{{domxref("SVGAnimatedPreserveAspectRatio")}}</li> - <li>{{domxref("SVGAnimatedRect")}}</li> - <li>{{domxref("SVGAnimatedString")}}</li> - <li>{{domxref("SVGAnimatedTransformList")}}</li> -</ul> -</div> - -<h3 id="SMIL_related_interfaces">SMIL related interfaces</h3> - -<div class="index"> -<ul> - <li>{{domxref("ElementTimeControl")}}</li> - <li>{{domxref("TimeEvent")}}</li> -</ul> -</div> - -<h3 id="Other_SVG_interfaces">Other SVG interfaces</h3> - -<div class="index"> -<ul> - <li>{{domxref("SVGAnimatedPathData")}}</li> - <li>{{domxref("SVGAnimatedPoints")}}</li> - <li>{{domxref("SVGColorProfileRule")}}</li> - <li>{{domxref("SVGCSSRule")}}</li> - <li>{{domxref("SVGExternalResourcesRequired")}}</li> - <li>{{domxref("SVGFitToViewBox")}}</li> - <li>{{domxref("SVGLangSpace")}}</li> - <li>{{domxref("SVGLocatable")}}</li> - <li>{{domxref("SVGRenderingIntent")}}</li> - <li>{{domxref("SVGStylable")}}</li> - <li>{{domxref("SVGTests")}}</li> - <li>{{domxref("SVGTextContentElement")}}</li> - <li>{{domxref("SVGTextPositioningElement")}}</li> - <li>{{domxref("SVGTransformable")}}</li> - <li>{{domxref("SVGUnitTypes")}}</li> - <li>{{domxref("SVGURIReference")}}</li> - <li>{{domxref("SVGViewSpec")}}</li> - <li>{{domxref("SVGZoomAndPan")}}</li> -</ul> -</div> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/DOM/DOM_Reference/Examples">DOM Examples</a></li> -</ul> diff --git a/files/vi/web/api/document_object_model/introduction/index.html b/files/vi/web/api/document_object_model/introduction/index.html deleted file mode 100644 index 7a1ef163ee..0000000000 --- a/files/vi/web/api/document_object_model/introduction/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: Introduction to the DOM -slug: Web/API/Document_Object_Model/Introduction -translation_of: Web/API/Document_Object_Model/Introduction ---- -<p>Phần này cung cấp một giới thiệu khái niệm ngắn gọn về <a href="https://developer.mozilla.org/en-US/docs/DOM" title="DOM">DOM</a>: nó là gì, nó cung cấp cấu trúc cho HTML và XML như thế nào, bạn có thể truy cập nó thế nào, và API này trình bày thông tin và các ví dụ tham khảo.</p> - -<h2 id="What_is_the_DOM" name="What_is_the_DOM">DOM là gì?</h2> - -<p>The Document Object Model (DOM) là một giao diện lập trình cho tài liệu HTML và XML. Nó cung cấp đại diện cấu trúc của tài liệu và nó xác định con đường mà cấu trúc có thể được truy cập từ các chương trình để chúng có thể thay đổi cấu trúc, phong cách và nội dung tài liệu. DOM cung cấp một sự trình bày của tài liệu như một nhóm cấu trúc của các nút và đối tượng mà có các thuộc tính và phương thức. Về cơ bản, nó kết nối các trang web tới các đoạn mã hay các ngôn ngữ lập trình.</p> - -<p>Một trang Web là một tài liệu. Tài liệu này có thể hoặc là được hiển thị trong cửa sổ trình duyệt hoặc là như mã nguồn HTML. Nhưng nó cùng là tài liệu trong cả hai trường hợp. The Document Object Model (DOM) cung cấp cách khác để hiển thị, lưu trữ và thao tác cùng tài liệu. DOM là một đại diện hướng đối tượng hoàn toàn của trang web, và nó có thể được chỉnh sửa với một ngôn ngữ kịch bản như JavaScript.</p> - -<p>Các tiêu chuẩn <a class="external" href="http://www.w3.org/DOM/">W3C DOM</a> và <a class="external" href="https://dom.spec.whatwg.org">WHATWG DOM</a> tạo thành nền tảng của DOM được thực hiện trong hầu hết các trình duyệt hiện đại . Nhiều trình duyệt cung cấp các mở rộng bên ngoài chuẩn, nên phải cẩn thận khi sử dụng chúng trên web nơi các tài liệu có thể được truy cập bởi các trình duyệt khác nhau với các DOM khác nhau.</p> - -<p>Ví dụ, DOM chuẩn quy định rằng phương thức getElementsByTagName trong code bên dưới phải trả về một danh sách của tất cả phần tử <p> trong tài liệu:</p> - -<pre class="brush: js">var paragraphs = document.getElementsByTagName("P"); -// paragraphs[0] is the first <p> element -// paragraphs[1] is the second <p> element, etc. -alert(paragraphs[0].nodeName); -</pre> - -<p>Tất cả các thuộc tính, phương thức và sự kiện được sử dụng để thao tác và tạo ra các trang web được tổ chức dưới dạng các đối tượng (objects) (vd: đối tượng <code>document</code> đại diện cho trang tài liệu, đối tượng <code>table</code> kế thừa từ <code>HTMLTableElement</code>, một DOM interface đặc thù, cho phép truy cập HTML tables, v.v...). Phần này sẽ giới thiệu từng đối tượng DOM, được kế thừa trong các trình duyệt chạy trên nền Gecko.</p> - -<h2 id="DOM_and_JavaScript" name="DOM_and_JavaScript">DOM and JavaScript</h2> - -<p>The short example above, like nearly all of the examples in this reference, is <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>. That is to say, it's <em>written</em> in JavaScript, but it <em>uses</em> the DOM to access the document and its elements. The DOM is not a programming language, but without it, the JavaScript language wouldn't have any model or notion of web pages, HTML documents, XML documents, and their component parts (e.g. elements). Every element in a document—the document as a whole, the head, tables within the document, table headers, text within the table cells—is part of the document object model for that document, so they can all be accessed and manipulated using the DOM and a scripting language like JavaScript.</p> - -<p>In the beginning, JavaScript and the DOM were tightly intertwined, but eventually they evolved into separate entities. The page content is stored in the DOM and may be accessed and manipulated via JavaScript, so that we may write this approximative equation:</p> - -<p>API (HTML or XML page) = DOM + JS (scripting language)</p> - -<p>The DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus exclusively on JavaScript in this reference documentation, implementations of the DOM can be built for any language, as this Python example demonstrates:</p> - -<pre class="brush: python"># Python DOM example -import xml.dom.minidom as m -doc = m.parse("C:\\Projects\\Py\\chap1.xml"); -doc.nodeName # DOM property of document object; -p_list = doc.getElementsByTagName("para"); -</pre> - -<p>For more information on what technologies are involved in writing JavaScript on the web, see <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p> - -<h2 id="How_Do_I_Access_the_DOM.3F" name="How_Do_I_Access_the_DOM.3F">How Do I Access the DOM?</h2> - -<p>You don't have to do anything special to begin using the DOM. Different browsers have different implementations of the DOM, and these implementations exhibit varying degrees of conformance to the actual DOM standard (a subject we try to avoid in this documentation), but every web browser uses some document object model to make web pages accessible to script.</p> - -<p>When you create a script–whether it's inline in a <code><script></code> element or included in the web page by means of a script loading instruction–you can immediately begin using the API for the <code><a href="/en-US/docs/DOM/document" title="DOM/document">document</a></code> or <code><a href="/en-US/docs/DOM/window" title="DOM/window">window</a></code> elements to manipulate the document itself or to get at the children of that document, which are the various elements in the web page. Your DOM programming may be something as simple as the following, which displays an alert message by using the <code><a href="/en-US/docs/DOM/window.alert" title="DOM/window.alert">alert()</a></code> function from the <code><a href="/en-US/docs/DOM/window" title="DOM/window">window</a></code> object, or it may use more sophisticated DOM methods to actually create new content, as in the longer example below.</p> - -<pre class="brush: html"><body onload="window.alert('Welcome to my home page!');"> -</pre> - -<p>Aside from the <code><script></code> element in which the JavaScript is defined, this JavaScript sets a function to run when the document is loaded (and when the whole DOM is available for use). This function creates a new H1 element, adds text to that element, and then adds the <code>H1</code> to the tree for this document:</p> - -<pre class="brush: html"><html> - <head> - <script> - // run this function when the document is loaded - window.onload = function() { - - // create a couple of elements in an otherwise empty HTML page - var heading = document.createElement("h1"); - var heading_text = document.createTextNode("Big Head!"); - heading.appendChild(heading_text); - document.body.appendChild(heading); - } - </script> - </head> - <body> - </body> -</html> -</pre> - -<h2 id="Important_Data_Types" name="Important_Data_Types">Important Data Types</h2> - -<p>This reference tries to describe the various objects and types in as simple a way as possible. But there are a number of different data types being passed around the API that you should be aware of. For the sake of simplicity, syntax examples in this API reference typically refer to nodes as <code>element</code>s, to arrays of nodes as <code>nodeList</code>s (or simply <code>element</code>s), and to <code>attribute</code> nodes simply as <code>attribute</code>s.</p> - -<p>The following table briefly describes these data types.</p> - -<table class="standard-table"> - <tbody> - <tr> - <td><code>document</code></td> - <td>When a member returns an object of type <code>document</code> (e.g., the <strong><code>ownerDocument</code></strong> property of an element returns the <code>document</code> to which it belongs), this object is the root <code>document</code> object itself. The <a href="/en-US/docs/DOM/document" title="DOM/document">DOM <code>document</code> Reference</a> chapter describes the <code>document</code> object.</td> - </tr> - <tr> - <td><code>element</code></td> - <td><code>element</code> refers to an element or a node of type <code>element</code> returned by a member of the DOM API. Rather than saying, for example, that the <a href="/en-US/docs/Web/API/Document/createElement">document.createElement()</a> method returns an object reference to a <code>node</code>, we just say that this method returns the <code>element</code> that has just been created in the DOM. <code>element</code> objects implement the DOM <code>Element</code> interface and also the more basic <code>Node</code> interface, both of which are included together in this reference.</td> - </tr> - <tr> - <td><code>nodeList</code></td> - <td>A <code>nodeList</code> is an array of elements, like the kind that is returned by the method <a href="/en-US/docs/Web/API/Document/getElementsByTagName">document.getElementsByTagName()</a>. Items in a <code>nodeList</code> are accessed by index in either of two ways: - <ul> - <li>list.item(1)</li> - <li>list[1]</li> - </ul> - These two are equivalent. In the first, <strong><code>item()</code></strong> is the single method on the <code>nodeList</code> object. The latter uses the typical array syntax to fetch the second item in the list.</td> - </tr> - <tr> - <td><code>attribute</code></td> - <td>When an <code>attribute</code> is returned by a member (e.g., by the <strong><code>createAttribute()</code></strong> method), it is an object reference that exposes a special (albeit small) interface for attributes. Attributes are nodes in the DOM just like elements are, though you may rarely use them as such.</td> - </tr> - <tr> - <td><code>namedNodeMap</code></td> - <td>A <code>namedNodeMap</code> is like an array, but the items are accessed by name or index, though this latter case is merely a convenience for enumeration, as they are in no particular order in the list. A <code>namedNodeMap</code> has an item() method for this purpose, and you can also add and remove items from a <code>namedNodeMap</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="DOM_interfaces" name="DOM_interfaces">DOM interfaces</h2> - -<p>This guide is about the objects and the actual <em>things</em> you can use to manipulate the DOM hierarchy. There are many points where understanding how these work can be confusing. For example, the object representing the <code>HTML form</code> element gets its <strong><code>name</code></strong> property from the <code>HTMLFormElement</code> interface but its <strong><code>className</code></strong> property from the <code>HTMLElement</code> interface proper. In both cases, the property you want is simply in that form object.</p> - -<p>But the relationship between objects and the interfaces that they implement in the DOM can be confusing, and so this section attempts to say a little something about the actual interfaces in the DOM specification and how they are made available.</p> - -<h3 id="Interfaces_and_Objects" name="Interfaces_and_Objects">Interfaces and Objects</h3> - -<p>Many objects borrow from several different interfaces. The table object, for example, implements a specialized <a href="/en-US/docs/DOM/HTMLTableElement" title="DOM/table">HTML Table Element Interface</a>, which includes such methods as <code>createCaption</code> and <code>insertRow</code>. But since it's also an HTML element, <code>table</code> implements the <code>Element</code> interface described in the <a href="/en-US/docs/DOM/element" title="DOM/element">DOM <code>element</code> Reference</a> chapter. And finally, since an HTML element is also, as far as the DOM is concerned, a node in the tree of nodes that make up the object model for an HTML or XML page, the table element also implements the more basic <code>Node</code> interface, from which <code>Element</code> derives.</p> - -<p>When you get a reference to a <code>table</code> object, as in the following example, you routinely use all three of these interfaces interchangeably on the object, perhaps without knowing it.</p> - -<pre class="brush: js">var table = document.getElementById("table"); -var tableAttrs = table.attributes; // Node/Element interface -for (var i = 0; i < tableAttrs.length; i++) { - // HTMLTableElement interface: border attribute - if(tableAttrs[i].nodeName.toLowerCase() == "border") - table.border = "1"; -} -// HTMLTableElement interface: summary attribute -table.summary = "note: increased border"; -</pre> - -<h3 id="Core_Interfaces_in_the_DOM" name="Core_Interfaces_in_the_DOM">Core Interfaces in the DOM</h3> - -<p>This section lists some of the most commonly-used interfaces in the DOM. The idea is not to describe what these APIs do here but to give you an idea of the sorts of methods and properties you will see very often as you use the DOM. These common APIs are used in the longer examples in the <a href="/en-US/docs/Gecko_DOM_Reference/Examples" title="Gecko_DOM_Reference/Examples">DOM Examples</a> chapter at the end of this book.</p> - -<p><code>Document</code> and <code>window</code> objects are the objects whose interfaces you generally use most often in DOM programming. In simple terms, the <code>window</code> object represents something like the browser, and the <code>document</code> object is the root of the document itself. <code>Element</code> inherits from the generic <code>Node</code> interface, and together these two interfaces provide many of the methods and properties you use on individual elements. These elements may also have specific interfaces for dealing with the kind of data those elements hold, as in the <code>table</code> object example in the previous section.</p> - -<p>The following is a brief list of common APIs in web and XML page scripting using the DOM.</p> - -<ul> - <li><code><a href="/en-US/docs/DOM/document.getElementById" title="DOM/document.getElementById">document.getElementById</a>(id)</code></li> - <li><code>document.<a href="/en-US/docs/Web/API/Element.getElementsByTagName" title="DOM/element.getElementsByTagName">getElementsByTagName</a>(name)</code></li> - <li><code><a href="/en-US/docs/DOM/document.createElement" title="DOM/document.createElement">document.createElement</a>(name)</code></li> - <li><code>parentNode.<a href="/en-US/docs/DOM/Node.appendChild" title="DOM/Node.appendChild">appendChild</a>(node)</code></li> - <li><code>element.<a href="/en-US/docs/DOM/element.innerHTML" title="DOM/element.innerHTML">innerHTML</a></code></li> - <li><code>element.<a href="/en-US/docs/DOM/element.style" title="DOM/element.style">style</a>.left</code></li> - <li><code>element.<a href="/en-US/docs/DOM/element.setAttribute" title="DOM/element.setAttribute">setAttribute</a></code></li> - <li><code>element.<a href="/en-US/docs/DOM/element.getAttribute" title="DOM/element.getAttribute">getAttribute</a></code></li> - <li><code>element.<a href="/en-US/docs/DOM/element.addEventListener" title="DOM/element.addEventListener">addEventListener</a></code></li> - <li><code><a href="/en-US/docs/DOM/window.content" title="DOM/window.content">window.content</a></code></li> - <li><code><a href="/en-US/docs/DOM/window.onload" title="DOM/window.onload">window.onload</a></code></li> - <li><code><a href="/en-US/docs/DOM/window.dump" title="DOM/window.dump">window.dump</a></code></li> - <li><code><a href="/en-US/docs/DOM/window.scrollTo" title="DOM/window.scrollTo">window.scrollTo</a></code></li> -</ul> - -<h2 id="Testing_the_DOM_API" name="Testing_the_DOM_API">Testing the DOM API</h2> - -<p>This document provides samples for every interface that you can use in your own web development. In some cases, the samples are complete HTML pages, with the DOM access in a <code><script></code> element, the interface (e.g, buttons) necessary to fire up the script in a form, and the HTML elements upon which the DOM operates listed as well. When this is the case, you can cut and paste the example into a new HTML document, save it, and run the example from the browser.</p> - -<p>There are some cases, however, when the examples are more concise. To run examples that only demonstrate the basic relationship of the interface to the HTML elements, you may want to set up a test page in which interfaces can be easily accessed from scripts. The following very simple web page provides a <code><script></code> element in the header in which you can place functions that test the interface, a few HTML elements with attributes that you can retrieve, set, or otherwise manipulate, and the web user interface necessary to call those functions from the browser.</p> - -<p>You can use this test page or create a similar one to test the DOM interfaces you are interested in and see how they work on the browser platform. You can update the contents of the <code>test()</code> function as needed, create more buttons, or add elements as necessary.</p> - -<pre class="brush: html"><html> - <head> - <title>DOM Tests</title> - <script type="application/javascript"> - function setBodyAttr(attr, value){ - if (document.body) eval('document.body.'+attr+'="'+value+'"'); - else notSupported(); - } - </script> - </head> - <body> - <div style="margin: .5in; height: 400;"> - <p><b><tt>text</tt></b></p> - <form> - <select onChange="setBodyAttr('text', - this.options[this.selectedIndex].value);"> - <option value="black">black - <option value="darkblue">darkblue - </select> - <p><b><tt>bgColor</tt></b></p> - <select onChange="setBodyAttr('bgColor', - this.options[this.selectedIndex].value);"> - <option value="white">white - <option value="lightgrey">gray - </select> - <p><b><tt>link</tt></b></p> - <select onChange="setBodyAttr('link', - this.options[this.selectedIndex].value);"> - <option value="blue">blue - <option value="green">green - </select> <small> - <a href="http://www.brownhen.com/dom_api_top.html" id="sample"> - (sample link)</a></small><br> - </form> - <form> - <input type="button" value="version" onclick="ver()" /> - </form> - </div> - </body> -</html> -</pre> - -<p>To test a lot of interfaces in a single page-for example, a "suite" of properties that affect the colors of a web page-you can create a similar test page with a whole console of buttons, textfields, and other HTML elements. The following screenshot gives you some idea of how interfaces can be grouped together for testing.</p> - -<figure> -<figcaption>Figure 0.1 Sample DOM Test Page</figcaption> -<img alt="Image:DOM_Ref_Introduction_to_the_DOM.gif" class="internal" src="/@api/deki/files/173/=DOM_Ref_Introduction_to_the_DOM.gif"></figure> - -<p>In this example, the dropdown menus dynamically update such DOM-accessible aspects of the web page as its background color (<code>bgColor</code>), the color of the hyperlinks (<code>aLink</code>), and color of the text (<code>text</code>). However you design your test pages, testing the interfaces as you read about them is an important part of learning how to use the DOM effectively.</p> - -<h2 id="Subnav">Subnav</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li> -</ul> diff --git a/files/vi/web/api/eventsource/index.html b/files/vi/web/api/eventsource/index.html deleted file mode 100644 index 36a35382dd..0000000000 --- a/files/vi/web/api/eventsource/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: EventSource -slug: Web/API/EventSource -tags: - - API - - Communications - - EventSource - - Interface - - NeedsTranslation - - Reference - - Server Sent Events - - Server-sent events - - TopicStub - - messaging -translation_of: Web/API/EventSource ---- -<div>{{APIRef("Server Sent Events")}}</div> - -<p><span class="seoSummary">The <strong><code>EventSource</code></strong> interface is web content's interface to <a href="/en-US/docs/Web/API/Server-sent_events">server-sent events</a>. An <code>EventSource</code> instance opens a persistent connection to an <a href="/en-US/docs/Web/HTTP">HTTP</a> server, which sends <a href="/en-US/docs/Web/API/Document_Object_Model/Events">events</a> in <code>text/event-stream</code> format.</span> The connection remains open until closed by calling {{domxref("EventSource.close()")}}.</p> - -<p>Once the connection is opened, incoming messages from the server are delivered to your code in the form of {{event("message")}} events.</p> - -<p>Unlike <a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a>, server-sent events are unidirectional; that is, data messages are delivered in one direction, from the server to the client (such as a user's web browser). That makes them an excellent choice when there's no need to send data from the client to the server in message form. For example, <code>EventSource</code> is a useful approach for handling things like social media status updates, news feeds, or delivering data into a <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">client-side storage</a> mechanism like <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> or <a href="/en-US/docs/Web/API/Web_Storage_API">web storage</a>.</p> - -<h2 id="Constructor">Constructor</h2> - -<dl> - <dt>{{domxref("EventSource.EventSource", "EventSource()")}}</dt> - <dd>Creates a new <code>EventSource</code> to handle receiving server-sent events from a specified URL, optionally in credentials mode.</dd> -</dl> - -<h2 id="Properties">Properties</h2> - -<p><em>This interface also inherits properties from its parent, {{domxref("EventTarget")}}.</em></p> - -<dl> - <dt>{{domxref("EventSource.readyState")}} {{readonlyinline}}</dt> - <dd>A number representing the state of the connection. Possible values are <code>CONNECTING</code> (<code>0</code>), <code>OPEN</code> (<code>1</code>), or <code>CLOSED</code> (<code>2</code>).</dd> - <dt>{{domxref("EventSource.url")}} {{readonlyinline}}</dt> - <dd>A {{domxref("DOMString")}} representing the URL of the source.</dd> - <dt>{{domxref("EventSource.withCredentials")}} {{readonlyinline}}</dt> - <dd>A {{domxref("Boolean")}} indicating whether the <code>EventSource</code> object was instantiated with cross-origin (<a href="/en-US/docs/Web/HTTP/CORS">CORS</a>) credentials set (<code>true</code>), or not (<code>false</code>, the default).</dd> -</dl> - -<h3 id="Event_handlers">Event handlers</h3> - -<dl> - <dt>{{domxref("EventSource.onerror")}}</dt> - <dd>Is an {{domxref("EventHandler")}} called when an error occurs and the {{domxref("EventSource/error_event", "error")}} event is dispatched on an <code>EventSource</code> object.</dd> - <dt>{{domxref("EventSource.onmessage")}}</dt> - <dd>Is an {{domxref("EventHandler")}} called when a {{domxref("EventSource/message_event", "message")}} event is received, that is when a message is coming from the source.</dd> - <dt>{{domxref("EventSource.onopen")}}</dt> - <dd>Is an {{domxref("EventHandler")}} called when an {{domxref("EventSource/open_event", "open")}} event is received, that is when the connection was just opened.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>This interface also inherits methods from its parent, {{domxref("EventTarget")}}.</em></p> - -<dl> - <dt>{{domxref("EventSource.close()")}}</dt> - <dd>Closes the connection, if any, and sets the <code>readyState</code> attribute to <code>CLOSED</code>. If the connection is already closed, the method does nothing.</dd> -</dl> - -<h2 id="Events">Events</h2> - -<dl> - <dt>{{domxref("EventSource/error_event", "error")}}</dt> - <dd>Fired when a connection to an event source failed to open.</dd> - <dt>{{domxref("EventSource/message_event", "message")}}</dt> - <dd>Fired when data is received from an event source.</dd> - <dt>{{domxref("EventSource/open_event", "open")}}</dt> - <dd>Fired when a connection to an event source has opened.</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<p>In this basic example, an <code>EventSource</code> is created to receive events from the server; a page with the name <code>sse.php</code> is responsible for generating the events.</p> - -<pre class="brush: js">var evtSource = new EventSource('sse.php'); -var eventList = document.querySelector('ul'); - -evtSource.onmessage = function(e) { - var newElement = document.createElement("li"); - - newElement.textContent = "message: " + e.data; - eventList.appendChild(newElement); -}</pre> - -<p>Each received event causes our <code>EventSource</code> object's <code>onmessage</code> event handler to be run. It, in turn, creates a new {{HTMLElement("li")}} element and writes the message's data into it, then appends the new element to the list element already in the document.</p> - -<div class="note"> -<p><strong>Note</strong>: You can find a full example on GitHub — see <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p> -</div> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "comms.html#the-eventsource-interface", "EventSource")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - </tr> - </tbody> -</table> - -<ul> -</ul> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("api.EventSource")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Server-sent_events">Server-sent events</a></li> - <li><a href="/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events">Using server-sent events</a></li> -</ul> diff --git a/files/vi/web/api/eventsource/url/index.html b/files/vi/web/api/eventsource/url/index.html deleted file mode 100644 index 2af6554db0..0000000000 --- a/files/vi/web/api/eventsource/url/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: EventSource.url -slug: Web/API/EventSource/url -translation_of: Web/API/EventSource/url ---- -<div>{{APIRef('WebSockets API')}}</div> - -<p><code><strong>url</strong></code> là thuộc tính chỉ đọc của giao diện {{domxref("EventSource")}} trả về {{domxref("DOMString")}} đại diện cho URL của nguồn.</p> - -<h2 id="Cú_pháp">Cú pháp</h2> - -<pre class="syntaxbox">var myUrl = eventSource.url;</pre> - -<h3 id="Giá_trị">Giá trị</h3> - -<p>{{domxref("DOMString")}} đại diện cho URL của nguồn.</p> - -<h2 id="Ví_dụ">Ví dụ</h2> - -<pre class="brush: js">var evtSource = new EventSource('sse.php'); -console.log(evtSource.url);</pre> - -<div class="note"> -<p><strong>Ghi chú: </strong>bạn có thể xem ví dụ đầy đủ trên GitHub — xem <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p> -</div> - -<h2 id="Thông_số_kĩ_thuật">Thông số kĩ thuật</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Thông số kĩ thuật</th> - <th scope="col">Trạng thái</th> - <th scope="col">Chú thích</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "comms.html#dom-eventsource-url", "url")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Định nghĩa ban đầu</td> - </tr> - </tbody> -</table> - -<ul> -</ul> - -<h2 id="Trình_duyệt_tương_thích">Trình duyệt tương thích</h2> - -<div> - - -<p>{{Compat("api.EventSource.url")}}</p> -</div> - -<h2 id="Liên_quan">Liên quan</h2> - -<ul> - <li>{{domxref("EventSource")}}</li> -</ul> diff --git a/files/vi/web/api/fetch_api/index.html b/files/vi/web/api/fetch_api/index.html deleted file mode 100644 index cc728a4eb1..0000000000 --- a/files/vi/web/api/fetch_api/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Fetch API -slug: Web/API/Fetch_API -translation_of: Web/API/Fetch_API ---- -<div>{{DefaultAPISidebar("Fetch API")}}</div> - -<p class="summary"><span class="seoSummary">The Fetch API cung cấp giao diện để tìm nạp tài nguyên (bao gồm thông qua mạng). It will seem familiar to anyone who has used {{DOMxRef("XMLHttpRequest")}}, but the new API provides a more powerful and flexible feature set.</span></p> - -<h2 id="Concepts_and_usage">Concepts and usage</h2> - -<p>Fetch cung cấp một định nghĩa chung về các đối tượng {{DOMxRef("Request")}} and {{DOMxRef("Response")}} (và mọi thứ khác liên quan đến các request network). Điều này cho phép chúng được sử dụng ở bất cứ nơi nào cần chúng trong tương lai, cho dù đó là service workers, Cache API, và những thứ tương tự khác mà có khả năng xử lý hoặc sửa đổi các request và responses, hoặc bất kỳ trường hợp nào mà yêu cầu bạn tự tạo ra responses trong chương trình của chính mình.</p> - -<p>Nó cũng cung cấp một định nghĩa cho các khái niệm liên quan như CORS and the HTTP Header, thay thế các định nghĩa riêng biệt của chúng ở nơi khác.</p> - -<p>Để thực hiện một request và tìm nạp tài nguyên, use the {{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}} method. Nó được triển khai trong nhiều interfaces, đặc biệt là {{DOMxRef("Window")}} và {{DOMxRef("WorkerGlobalScope")}}. Điều này làm cho nó có sẵn trong hầu hết mọi ngữ cảnh mà bạn có thể muốn tìm nạp tài nguyên.</p> - -<p>The <code>fetch()</code> method có một đối số bắt buộc, đó chính là đường dẫn đến tài nguyên bạn tìm nạp. Nó returns a {{DOMxRef("Promise")}} thứ mà sẽ giải quyết và đưa ra một {{DOMxRef("Response")}} cho request đó, bất kể là thành công hay thất bại. Bạn có thể tùy chỉnh việc truyền một đối tượng tùy chỉnh init như là một đối số thữ hai (see {{DOMxRef("Request")}}).</p> - -<p>Cho đến khi một {{DOMxRef("Response")}} được truy xuất, có một số methods có sẵn để xác định nội dung body là gì và cách nó được xử lý như thế nào. (see {{DOMxRef("Body")}}).</p> - -<p>Bạn có thể tạo ra một request và response trực tiếp bằng cách sử dụng {{DOMxRef("Request.Request", "Request()")}} và {{DOMxRef("Response.Response", "Response()")}} constructors, nhưng cách làm này là không phổ biến. Thay vào đó, những thứ này có thể được tạo ra bằng cách là kết quả trả về của các hành động API khác (ví dụ, {{DOMxRef("FetchEvent.respondWith()")}} from service workers).</p> - -<h3 id="Differences_from_jQuery">Differences from jQuery</h3> - -<p>The <code>fetch</code> khác với <code>jQuery.ajax()</code> in ba điểm chính sau:</p> - -<ul> - <li>The Promise được trả về từ <code>fetch()</code> <strong>sẽ không từ chối trạng thái lỗi</strong> ngay cả khi response là HTTP <code>404</code> or <code>500</code>. Thay vào đó, nó sẽ xử lý bình thường (với trạng thái OK được set thành <code>false</code>), và nó sẽ chỉ từ chối khi gặp lỗi network hoặc có bất cứ thứ gì ngăn chặn hoàn thành request.</li> - <li><code>fetch()</code> sẽ không nhận<strong> cross-site cookies. </strong>You không thể thiết lập một cross site session bằng <code>fetch()</code>. <code><a href="/en-US/docs/Web/HTTP/Headers/Set-Cookie">Set-Cookie</a></code> headers từ các site khác sẽ âm thầm bị bỏ qua.</li> - <li><code>fetch()</code> sẽ không<strong> send cookies</strong>, trừ khi bạn set the <code><var>credentials</var></code> <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters">init option</a>. - <ul> - <li>Từ <a href="https://github.com/whatwg/fetch/pull/585" rel="nofollow noopener">Tháng 8 25, 2017</a>: Thông số kĩ thuật đã thay đổi từ thông tin đăng nhập mặc định thành <code>same-origin</code>. Firefox đã thay đổi từ phiên bản 61.0b13.)</li> - </ul> - </li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: Tìm hiểu thêm về cách sử dụng Fetch API tại <a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a>, và học các khái niệm tại <a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a>.</p> -</div> - -<h3 id="Huỷ_bỏ_fetch">Huỷ bỏ fetch</h3> - -<p>Browsers have started to add experimental support for the {{DOMxRef("AbortController")}} and {{DOMxRef("AbortSignal")}} interfaces (aka The Abort API), which allow operations like Fetch and XHR to be aborted if they have not already completed. See the interface pages for more details.</p> - -<h2 id="Fetch_Interfaces">Fetch Interfaces</h2> - -<dl> - <dt>{{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}}</dt> - <dd>The <code>fetch()</code> method được sử dụng để tìm nạp tài nguyên.</dd> - <dt>{{DOMxRef("Headers")}}</dt> - <dd>Đại diện cho các response/request headers, cho phép bạn truy vấn chúng and thực hiện các hành động khác nhau phụ thuộc vào các kết quả..</dd> - <dt>{{DOMxRef("Request")}}</dt> - <dd>Đại điện cho một request tài nguyên.</dd> - <dt>{{DOMxRef("Response")}}</dt> - <dd>Đại điện cho một Response của một Request.</dd> -</dl> - -<h2 id="Fetch_mixin">Fetch mixin</h2> - -<dl> - <dt>{{DOMxRef("Body")}}</dt> - <dd>Cung cấp các methods liên quan đến body của response/request, cho phép bạn khai báo kiểu nội dung của chúng và cách chúng được xử lý.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Fetch")}}</td> - <td>{{Spec2("Fetch")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Using Fetch</a></li> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> - <li><a href="https://github.com/github/fetch">Fetch polyfill</a></li> - <li><a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a></li> -</ul> diff --git a/files/vi/web/api/file/index.html b/files/vi/web/api/file/index.html deleted file mode 100644 index 3722df4e46..0000000000 --- a/files/vi/web/api/file/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: File -slug: Web/API/File -tags: - - API - - File API - - Interface - - Reference - - Web -translation_of: Web/API/File ---- -<div>{{APIRef}}</div> - -<p><strong><code>File</code></strong> cung cấp thông tin về các tệp và cho phép Javascript truy cập nội dung của chúng.</p> - -<p><code>File</code> thường được lấy từ một {{DOMxRef("FileList")}} đối tượng trả về như là kết quả của người dùng chọn files sử dụng phần tử {{HTMLElement("input")}}, từ thao tác kéo và thả đối tượng {{DOMxRef("DataTransfer")}}, hoặc là từ <code>mozGetAsFile()</code> API trên một {{DOMxRef("HTMLCanvasElement")}}.</p> - -<p>Đối tượng file là một loại {{DOMxRef("Blob")}}, và có thể sử dụng trong mọi hoàn cảnh mà Blob có thể sử dụng. Cụ thể, {{DOMxRef("FileReader")}}, {{DOMxRef("URL.createObjectURL()")}}, {{DOMxRef("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, và {{DOMxRef("XMLHttpRequest", "", "send()")}} chấp nhận cả <code>Blob</code>s và <code>File</code>s.</p> - -<p>Đọc <a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a> để biết thêm thông tin và ví dụ.</p> - -<p>{{InheritanceDiagram}}</p> - -<h2 id="Constructor">Constructor</h2> - -<dl> - <dt>{{DOMxRef("File.File", "File()")}}</dt> - <dd>Trả về một constructed <code>File mới</code>.</dd> -</dl> - -<h2 id="Thuộc_tính">Thuộc tính</h2> - -<dl> - <dt>{{DOMxRef("File.lastModified")}} {{ReadOnlyInline}}</dt> - <dd>Trả về thời gian sửa đổi cuối cùng của file, tính bằng mili giây kể từ kỉ nguyên UNIX (January 1st, 1970 at Midnight).</dd> - <dt>{{DOMxRef("File.lastModifiedDate")}} {{Deprecated_Inline}} {{ReadOnlyInline}}</dt> - <dd>Returns the last modified {{JSxRef("Date")}} of the file referenced by the <code>File</code> object.</dd> - <dt>{{DOMxRef("File.name")}}{{ReadOnlyInline}}</dt> - <dd>Trả về tên của tệp referenced by the <code>File</code> object.</dd> - <dt>{{DOMxRef("File.webkitRelativePath")}} {{Non-standard_Inline}} {{ReadOnlyInline}}</dt> - <dd>Trả về đường dẫn (URL) của {{DOMxRef("File")}} có liên quan.</dd> -</dl> - -<p><code>File</code> bổ sung {{DOMxRef("Blob")}}, Vì vậy, nó cũng có các thuộc tính có sẵn:</p> - -<dl> - <dt>{{DOMxRef("File.size")}} {{ReadOnlyInline}}</dt> - <dd>Trả về kích thước của file (tính bằng bytes)</dd> - <dt>{{DOMxRef("File.type")}} {{ReadOnlyInline}}</dt> - <dd>Trả về thể loại <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME</a> của file file.</dd> -</dl> - -<h2 id="Phương_thức">Phương thức</h2> - -<p><em>File không có phương thức nào, nhưng nó thừa kế từ {{DOMxRef("Blob")}}:</em></p> - -<dl> - <dt>{{DOMxRef("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt> - <dd>Trả về một đối tượng Blob mới có nội dung trong phạm vi bytes chỉ định của Blob</dd> - <dt>{{DOMxRef("Blob.stream()")}}</dt> - <dd>Chuyển đổi file thành {{DOMxRef("ReadableStream")}} vì vậy có thể sử dụng để đọc nội dung file.</dd> - <dt>{{DOMxRef("Blob.text()")}}</dt> - <dd>Chuyển đổi file thành stream và đọc nó để hoàn thành. Nó trả về một promise có thể giải quyết với {{DOMxRef("USVString")}} (text).</dd> - <dt>{{DOMxRef("Blob.arrayBuffer()")}}</dt> - <dd>Chuyển đổi file thành stream và đọc nó để hoàn thành. Nó trả về một promise có thể giải quyết với {{DOMxRef("ArrayBuffer")}}.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('File API', "#file-section", "The <code>File</code> interface")}}</td> - <td>{{Spec2('File API')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div class="hidden">Bảng tương thích trên trang này được tạo từ dữ liệu có cấu trúc. Nếu bạn muốn đóng góp cho dữ liệu, vui lòng xem https://github.com/mdn/browser-compat-data và gửi cho chúng tôi yêu cầu</div> - -<p>{{Compat("api.File")}}</p> - -<h2 id="Xem_thêm">Xem thêm</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a></li> - <li>{{DOMxRef("FileReader")}}</li> - <li><a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">Using the DOM File API in chrome code</a> (for privileged code running in Gecko, such as Firefox add-ons)</li> -</ul> diff --git a/files/vi/web/api/geolocation_api/index.html b/files/vi/web/api/geolocation_api/index.html deleted file mode 100644 index 0286a06249..0000000000 --- a/files/vi/web/api/geolocation_api/index.html +++ /dev/null @@ -1,244 +0,0 @@ ---- -title: Geolocation API -slug: Web/API/Geolocation_API -translation_of: Web/API/Geolocation_API ---- -<p>{{securecontext_header}} {{APIRef("API định vị địa lý")}}</p> - -<p>Các <strong>API Định vị</strong> cho phép người dùng để cung cấp vị trí của họ vào các ứng dụng web nếu họ mong muốn. Vì lý do riêng tư, người dùng được yêu cầu cho phép báo cáo thông tin vị trí.</p> - -<h2 id="Đối_tượng_định_vị_địa_lý">Đối tượng định vị địa lý</h2> - -<p>Các <a href="/en-US/docs/Web/API/Geolocation">Định vị</a> API được công bố thông qua {{domxref( "navigator.geolocation")}} đối tượng.</p> - -<p>Nếu đối tượng tồn tại, dịch vụ định vị địa lý có sẵn. Do đó, bạn có thể kiểm tra sự hiện diện của vị trí địa lý:</p> - -<pre class="brush: js">if ("geolocation" in navigator) { - / * định vị địa lý có sẵn * / -} else { - / * định vị địa lý KHÔNG có sẵn * / -} -</pre> - -<div class="note"> -<p><strong>Lưu ý:</strong> Trên Firefox 24 và các phiên bản cũ hơn, <code>"geolocation" in navigator</code>luôn được trả về <code>true</code>ngay cả khi API bị tắt. Điều này đã được sửa với <a href="/en-US/docs/Mozilla/Firefox/Releases/25/Site_Compatibility">Firefox 25</a> để tuân thủ thông số kỹ thuật. ({{bug(884921)}}).</p> -</div> - -<h3 id="Lấy_vị_trí_hiện_tại">Lấy vị trí hiện tại</h3> - -<p>Để có được vị trí hiện tại của người dùng, bạn có thể gọi phương thức {{domxref("geolocation.getCurrentPosition()", "getCurrentPosition()")}}. Điều này bắt đầu một yêu cầu không đồng bộ để phát hiện vị trí của người dùng và truy vấn phần cứng định vị để có được thông tin cập nhật. Khi vị trí được xác định, chức năng gọi lại được xác định sẽ được thực thi. Bạn có thể tùy chọn cung cấp chức năng gọi lại thứ hai để được thực thi nếu xảy ra lỗi. Tham số thứ ba, tùy chọn, là một đối tượng tùy chọn trong đó bạn có thể đặt tuổi tối đa của vị trí được trả về, thời gian chờ yêu cầu và nếu bạn muốn độ chính xác cao cho vị trí.</p> - -<div class="note"> -<p><strong>Lưu ý:</strong> Theo mặc định, {{domxref("Geolocation.getCurrentPosition ()", "getCurrentPosition()")}} cố gắng trả lời nhanh nhất có thể với kết quả chính xác thấp. Nó rất hữu ích nếu bạn cần một câu trả lời nhanh bất kể độ chính xác. Chẳng hạn, các thiết bị có GPS có thể mất một phút hoặc hơn để sửa lỗi GPS, do đó, dữ liệu kém chính xác hơn(vị trí IP hoặc wifi) có thể được trả về {{domxref("Geolocation.getCurrentPosition()", "getCurrentPosition() ")}}.</p> -</div> - -<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) { - do_something(location.coords.latitude, location.coords.longitude); -});</pre> - -<p>Ví dụ trên sẽ khiến <code>do_something()</code>hàm thực thi khi lấy được vị trí.</p> - -<h3 id="Xem_vị_trí_hiện_tại">Xem vị trí hiện tại</h3> - -<p>Nếu dữ liệu vị trí thay đổi (theo chuyển động của thiết bị hoặc nếu có thông tin địa lý chính xác hơn), bạn có thể thiết lập chức năng gọi lại được gọi với thông tin vị trí được cập nhật đó. Điều này được thực hiện bằng cách sử dụng hàm {{domxref("Geolocation.watchPocation ()", "watchPosition()")}}, có cùng tham số đầu vào như {{domxref("Geolocation.getCurrentPosition()", "getCurrentPosition() ")}}. Chức năng gọi lại được gọi nhiều lần, cho phép trình duyệt cập nhật vị trí của bạn khi bạn di chuyển hoặc cung cấp vị trí chính xác hơn vì các kỹ thuật khác nhau được sử dụng để định vị địa lý cho bạn. Hàm gọi lại lỗi, là tùy chọn giống như đối với {{domxref("Geolocation.getCurrentPosition()", "getCurrentPosition()")}}, có thể được gọi lặp lại.</p> - -<div class="note"> -<p><strong>Lưu ý:</strong> Bạn có thể sử dụng {{domxref("Geolocation.watchPosition()", "watchPosition()")}} mà không cần một cuộc gọi {{domxref("Geolocation.getCienPocation ()", "getCienPocation ()")}}.</p> -</div> - -<pre class="brush: js">var watchID = navigator.geolocation.watchPosition(function(location) { - do_something(location.coords.latitude, location.coords.longitude); -});</pre> - -<p>Phương thức {{domxref("Geolocation.watchPosition()", "watchPosition()")}} trả về số ID có thể được sử dụng để xác định duy nhất trình theo dõi vị trí được yêu cầu; bạn sử dụng giá trị này song song với phương thức {{domxref("Geolocation.clearWatch()", "clearWatch()")}} để dừng xem vị trí của người dùng.</p> - -<pre class="brush: js">navigator.geolocation.clearWatch(watchID); -</pre> - -<h3 id="Phản_ứng_tinh_chỉnh">Phản ứng tinh chỉnh</h3> - -<p>Both {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} and {{domxref("Geolocation.watchPosition()","watchPosition()")}} accept a success callback, an optional error callback, and an optional <a href="/en-US/docs/Web/API/PositionOptions">PositionOptions</a> object.</p> - -<p>{{page("/en-US/docs/DOM/navigator.geolocation.getCurrentPosition","PositionOptions")}}</p> - -<p>A call to {{domxref("Geolocation.watchPosition()","watchPosition")}} could look like:</p> - -<pre class="brush: js">function geo_success(position) { - do_something(position.coords.latitude, position.coords.longitude); -} - -function geo_error() { - alert("Sorry, no position available."); -} - -var geo_options = { - enableHighAccuracy: true, - maximumAge : 30000, - timeout : 27000 -}; - -var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);</pre> - -<h2 id="Describing_a_position">Describing a position</h2> - -<p>The user's location is described using a {{domxref("Position")}} object referencing a {{domxref("Coordinates")}} object.</p> - -<p>{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Position")}}</p> - -<p>{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","Coordinates")}}</p> - -<h2 id="Handling_errors">Handling errors</h2> - -<p>The error callback function, if provided when calling <code>getCurrentPosition()</code> or <code>watchPosition()</code>, expects a <a href="/en-US/docs/Web/API/PositionError">PositionError</a> object as its first parameter.</p> - -<pre class="brush: js">function errorCallback(error) { - alert('ERROR(' + error.code + '): ' + error.message); -}; -</pre> - -<p>{{page("/en-US/docs/DOM/navigator/geolocation/getCurrentPosition","PositionError")}}</p> - -<h2 id="Geolocation_Live_Example">Geolocation Live Example</h2> - -<div class="hidden"> -<pre class="brush: css">body { - padding: 20px; - background-color:#ffffc9 -} - -button { - margin: .5rem 0; -} -</pre> -</div> - -<h3 id="HTML_Content">HTML Content</h3> - -<pre class="brush: html;"><button id = "find-me">Show my location</button><br/> -<p id = "status"></p> -<a id = "map-link" target="_blank"></a> -</pre> - -<h3 id="JavaScript_Content">JavaScript Content</h3> - -<pre class="brush: js">function geoFindMe() { - - const status = document.querySelector('#status'); - const mapLink = document.querySelector('#map-link'); - - mapLink.href = ''; - mapLink.textContent = ''; - - function success(position) { - const latitude = position.coords.latitude; - const longitude = position.coords.longitude; - - status.textContent = ''; - mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`; - mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`; - } - - function error() { - status.textContent = 'Unable to retrieve your location'; - } - - if (!navigator.geolocation) { - status.textContent = 'Geolocation is not supported by your browser'; - } else { - status.textContent = 'Locating…'; - navigator.geolocation.getCurrentPosition(success, error); - } - -} - -document.querySelector('#find-me').addEventListener('click', geoFindMe); -</pre> - -<h3 id="Live_Result">Live Result</h3> - -<p>{{EmbedLiveSample('Geolocation_Live_Example', 350, 150, "", "", "", "geolocation")}}</p> - -<h2 id="Prompting_for_permission">Prompting for permission</h2> - -<p>Any add-on hosted on <a href="https://addons.mozilla.org/">addons.mozilla.org</a> which makes use of geolocation data must explicitly request permission before doing so. The following function will request permission in a manner similar to the automatic prompt displayed for web pages. The user's response will be saved in the preference specified by the <code>pref</code> parameter, if applicable. The function provided in the <code>callback</code> parameter will be called with a boolean value indicating the user's response. If <code>true</code>, the add-on may access geolocation data.</p> - -<pre class="brush: js">function prompt(window, pref, message, callback) { - let branch = Components.classes["@mozilla.org/preferences-service;1"] - .getService(Components.interfaces.nsIPrefBranch); - - if (branch.getPrefType(pref) === branch.PREF_STRING) { - switch (branch.getCharPref(pref)) { - case "always": - return callback(true); - case "never": - return callback(false); - } - } - - let done = false; - - function remember(value, result) { - return function() { - done = true; - branch.setCharPref(pref, value); - callback(result); - } - } - - let self = window.PopupNotifications.show( - window.gBrowser.selectedBrowser, - "geolocation", - message, - "geo-notification-icon", - { - label: "Share Location", - accessKey: "S", - callback: function(notification) { - done = true; - callback(true); - } - }, [ - { - label: "Always Share", - accessKey: "A", - callback: remember("always", true) - }, - { - label: "Never Share", - accessKey: "N", - callback: remember("never", false) - } - ], { - eventCallback: function(event) { - if (event === "dismissed") { - if (!done) callback(false); - done = true; - window.PopupNotifications.remove(self); - } - }, - persistWhileVisible: true - }); -} - -prompt(window, - "extensions.foo-addon.allowGeolocation", - "Foo Add-on wants to know your location.", - function callback(allowed) { alert(allowed); }); -</pre> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("api.Geolocation")}}</p> - -<h3 id="khả_dụng">khả dụng</h3> - -<p>Vì định vị dựa trên WiFi thường được cung cấp bởi Google, API định vị vanilla có thể không khả dụng ở Trung Quốc. Bạn có thể sử dụng các nhà cung cấp bên thứ ba địa phương như <a href="http://lbsyun.baidu.com/index.php?title=jspopular/guide/geolocation">Baidu</a> , <a href="https://lbs.amap.com/api/javascript-api/guide/services/geolocation#geolocation">Autonavi</a> hoặc <a href="http://lbs.qq.com/tool/component-geolocation.html">Tencent</a> . Các dịch vụ này sử dụng địa chỉ IP của người dùng và / hoặc ứng dụng cục bộ để cung cấp định vị nâng cao.</p> - -<h2 id="Xem_thêm">Xem thêm</h2> - -<ul> - <li>{{domxref("navigator.geolocation")}}</li> - <li><a href="/en-US/Apps/Build/gather_and_modify_data/Plotting_yourself_on_the_map">Vẽ sơ đồ trên bản đồ</a></li> - <li><a href="https://www.w3.org/TR/geolocation-API/" rel="external">API định vị địa lý trên w3.org</a></li> - <li><a href="https://hacks.mozilla.org/2013/10/who-moved-my-geolocation/">Ai đã di chuyển vị trí địa lý của tôi? </a>(Blog hack)</li> -</ul> diff --git a/files/vi/web/api/htmlcanvaselement/getcontext/index.html b/files/vi/web/api/htmlcanvaselement/getcontext/index.html deleted file mode 100644 index b2478fba5d..0000000000 --- a/files/vi/web/api/htmlcanvaselement/getcontext/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: HTMLCanvasElement.getContext() -slug: Web/API/HTMLCanvasElement/getContext -tags: - - TV -translation_of: Web/API/HTMLCanvasElement/getContext ---- -<div>{{APIRef("Canvas API")}}</div> - -<p><span class="seoSummary">The <strong><code>HTMLCanvasElement.getContext()</code></strong> method returns a drawing context on the canvas, or {{jsxref("null")}} if the context identifier is not supported.</span></p> - -<p>Later calls to this method on the same canvas element return the same drawing context instance as was returned the last time the method was invoked with the same <code>contextType</code> argument. To get a different drawing context object you need to pass a different <code>contextType</code> or call the method on a different canvas element. </p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox">var <em>ctx</em> = <em>canvas</em>.getContext(<em>contextType</em>); -var <em>ctx</em> = <em>canvas</em>.getContext(<em>contextType</em>, <em>contextAttributes</em>); -</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code>contextType</code></dt> - <dd>Is a {{domxref("DOMString")}} containing the context identifier defining the drawing context associated to the canvas. Possible values are: - <ul> - <li><code>"2d"</code>, leading to the creation of a {{domxref("CanvasRenderingContext2D")}} object representing a two-dimensional rendering context.</li> - <li><code>"webgl"</code> (or <code>"experimental-webgl"</code>) which will create a {{domxref("WebGLRenderingContext")}} object representing a three-dimensional rendering context. This context is only available on browsers that implement <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> version 1 (OpenGL ES 2.0).</li> - <li><code>"webgl2"</code> which will create a {{domxref("WebGL2RenderingContext")}} object representing a three-dimensional rendering context. This context is only available on browsers that implement <a href="https://developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a> version 2 (OpenGL ES 3.0). {{experimental_inline}}</li> - <li><code>"bitmaprenderer"</code> which will create an {{domxref("ImageBitmapRenderingContext")}} which only provides functionality to replace the content of the canvas with a given {{domxref("ImageBitmap")}}.</li> - </ul> - - <div class="note"> - <p><strong>Note</strong>: The identifier <code>"experimental-webgl"</code> is used in new implementations of WebGL. These implementations have either not reached test suite conformance, or the graphics drivers on the platform are not yet stable. The <a href="https://www.khronos.org/">Khronos Group</a> certifies WebGL implementations under certain <a href="https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt">conformance rules</a>.</p> - </div> - </dd> - <dt><code>contextAttributes</code></dt> - <dd> - <p>You can use several context attributes when creating your rendering context, for example:</p> - - <pre class="brush: js">const gl = canvas.getContext('webgl', { - antialias: false, - depth: false -});</pre> - 2d context attributes: - - <ul> - <li><strong><code>alpha</code></strong>: Boolean that indicates if the canvas contains an alpha channel. If set to <code>false</code>, the browser now knows that the backdrop is always opaque, which can speed up drawing of transparent content and images.</li> - <li>{{non-standard_inline}} (Gecko only) <strong><code>willReadFrequently</code></strong>: Boolean that indicates whether or not a lot of read-back operations are planned. This will force the use of a software (instead of hardware accelerated) 2D canvas and can save memory when calling {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} frequently. This option is only available, if the flag <code>gfx.canvas.willReadFrequently.enable</code> is set to <code>true</code> (which, by default, is only the case for B2G/Firefox OS).</li> - <li>{{non-standard_inline}} (Blink only) <strong><code>storage</code></strong>: String that indicates which storage is used ("persistent" by default).</li> - </ul> - WebGL context attributes: - - <ul> - <li><strong><code>alpha</code></strong>: Boolean that indicates if the canvas contains an alpha buffer.</li> - <li><strong><code>antialias</code></strong>: Boolean that indicates whether or not to perform anti-aliasing.</li> - <li><strong><code>depth</code></strong>: Boolean that indicates that the drawing buffer has a depth buffer of at least 16 bits.</li> - <li><code><strong>failIfMajorPerformanceCaveat</strong></code>: Boolean that indicates if a context will be created if the system performance is low.</li> - <li><code><strong>powerPreference</strong></code>: A hint to the user agent indicating what configuration of GPU is suitable for the WebGL context. Possible values are: - <ul> - <li><code>"default"</code>: Let the user agent decide which GPU configuration is most suitable. This is the default value.</li> - <li><code>"high-performance"</code>: Prioritizes rendering performance over power consumption.</li> - <li><code>"low-power"</code>: Prioritizes power saving over rendering performance.</li> - </ul> - </li> - <li><strong><code>premultipliedAlpha</code></strong>: Boolean that indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha.</li> - <li><strong><code>preserveDrawingBuffer</code></strong>: If the value is true the buffers will not be cleared and will preserve their values until cleared or overwritten by the author.</li> - <li><strong><code>stencil</code></strong>: Boolean that indicates that the drawing buffer has a stencil buffer of at least 8 bits.</li> - </ul> - </dd> -</dl> - -<h3 id="Return_value">Return value</h3> - -<p>A {{domxref("RenderingContext")}} which is either a</p> - -<ul> - <li>{{domxref("CanvasRenderingContext2D")}} for <code>"2d"</code>,</li> - <li>{{domxref("WebGLRenderingContext")}} for <code>"webgl"</code> and <code>"experimental-webgl"</code>,</li> - <li>{{domxref("WebGL2RenderingContext")}} for <code>"webgl2"</code> or</li> - <li>{{domxref("ImageBitmapRenderingContext")}} for <code>"bitmaprenderer"</code>.</li> -</ul> - -<p>If the <code>contextType</code> doesn't match a possible drawing context, <code>null</code> is returned.</p> - -<h2 id="Examples">Examples</h2> - -<p>Given this {{HTMLElement("canvas")}} element:</p> - -<pre class="brush: html"><canvas id="canvas" width="300" height="300"></canvas> -</pre> - -<p>You can get a <code>2d</code> context of the canvas with the following code:</p> - -<pre class="brush: js">var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); -console.log(ctx); // CanvasRenderingContext2D { ... } -</pre> - -<p>Now you have the <a href="/en-US/docs/Web/API/CanvasRenderingContext2D">2D rendering context</a> for a canvas and you can draw within it.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "semantics-scripting.html#dom-htmlcanvaselement-getcontext", "HTMLCanvasElement.getContext")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.HTMLCanvasElement.getContext")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The interface defining it, {{domxref("HTMLCanvasElement")}}.</li> - <li>{{domxref("OffscreenCanvas.getContext()")}}</li> - <li>Available rendering contexts: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} and {{domxref("WebGL2RenderingContext")}} and {{domxref("ImageBitmapRenderingContext")}}.</li> -</ul> diff --git a/files/vi/web/api/htmlcanvaselement/index.html b/files/vi/web/api/htmlcanvaselement/index.html deleted file mode 100644 index 50b2592322..0000000000 --- a/files/vi/web/api/htmlcanvaselement/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: HTMLCanvasElement -slug: Web/API/HTMLCanvasElement -tags: - - API - - Canvas - - HTML DOM - - Interface - - NeedsTranslation - - Reference - - TopicStub -translation_of: Web/API/HTMLCanvasElement ---- -<div> -<div>{{APIRef("Canvas API")}}</div> -</div> - -<p>The <strong><code>HTMLCanvasElement</code></strong> interface provides properties and methods for manipulating the layout and presentation of {{HtmlElement("canvas")}} elements. The <code>HTMLCanvasElement</code> interface also inherits the properties and methods of the {{domxref("HTMLElement")}} interface.</p> - -<p>{{InheritanceDiagram(600, 120)}}</p> - -<h2 id="Properties">Properties</h2> - -<p><em>Inherits properties from its parent, </em><em>{{domxref("HTMLElement")}}.</em></p> - -<dl> - <dt>{{domxref("HTMLCanvasElement.height")}}</dt> - <dd>Is a positive <code>integer</code> reflecting the {{htmlattrxref("height", "canvas")}} HTML attribute of the {{HTMLElement("canvas")}} element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of <code>150</code> is used.</dd> - <dt>{{domxref("HTMLCanvasElement.width")}}</dt> - <dd>Is a positive <code>integer</code> reflecting the {{htmlattrxref("width", "canvas")}} HTML attribute of the {{HTMLElement("canvas")}} element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of <code>300</code> is used.</dd> - <dt>{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>Is a {{jsxref("Boolean")}} reflecting the {{htmlattrxref("moz-opaque", "canvas")}} HTML attribute of the {{HTMLElement("canvas")}} element. It lets the canvas know whether or not translucency will be a factor. If the canvas knows there's no translucency, painting performance can be optimized. This is only supported in Mozilla-based browsers; use the standardized {{domxref("HTMLCanvasElement.getContext()", "canvas.getContext('2d', { alpha: false })")}} instead.</dd> - <dt>{{domxref("HTMLCanvasElement.mozPrintCallback")}}{{non-standard_inline}}</dt> - <dd>Is a <code>function</code> that is Initially null. Web content can set this to a JavaScript function that will be called when the canvas is to be redrawn while the page is being printed. When called, the callback is passed a "printState" object that implements the <a href="https://searchfox.org/mozilla-central/search?q=interface MozCanvasPrintState&path=HTMLCanvasElement.webidl">MozCanvasPrintState</a> interface. The callback can get the context to draw to from the printState object and must then call done() on it when finished. The purpose of <code>mozPrintCallback</code> is to obtain a higher resolution rendering of the canvas at the resolution of the printer being used. <a href="https://blog.mozilla.org/labs/2012/09/a-new-way-to-control-printing-output/">See this blog post.</a></dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>Inherits methods from its parent, </em><em>{{domxref("HTMLElement")}}.</em></p> - -<dl> - <dt>{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}</dt> - <dd>Returns a {{domxref("CanvasCaptureMediaStream")}} that is a real-time video capture of the surface of the canvas.</dd> - <dt>{{domxref("HTMLCanvasElement.getContext()")}}</dt> - <dd>Returns a drawing context on the canvas, or null if the context ID is not supported. A drawing context lets you draw on the canvas. Calling getContext with <code>"2d"</code> returns a {{domxref("CanvasRenderingContext2D")}} object, whereas calling it with <code>"webgl"</code> (or <code>"experimental-webgl"</code>) returns a {{domxref("WebGLRenderingContext")}} object. This context is only available on browsers that implement <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd> - <dt>{{domxref("HTMLCanvasElement.toDataURL()")}}</dt> - <dd>Returns a data-URL containing a representation of the image in the format specified by the <code>type</code> parameter (defaults to <code>png</code>). The returned image is in a resolution of 96dpi.</dd> - <dt>{{domxref("HTMLCanvasElement.toBlob()")}}</dt> - <dd>Creates a {{domxref("Blob")}} object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent.</dd> - <dt>{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}</dt> - <dd>Transfers control to an {{domxref("OffscreenCanvas")}} object, either on the main thread or on a worker.</dd> - <dt>{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>Returns a {{domxref("File")}} object representing the image contained in the canvas; this file is a memory-based file, with the specified <code>name</code>. If <code>type</code> is not specified, the image type is <code>image/png</code>.</dd> -</dl> - -<h2 id="Events">Events</h2> - -<p>Listen to these events using <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>.</p> - -<dl> - <dt><code><a href="/en-US/docs/Web/API/HTMLCanvasElement/webglcontextcreationerror_event">webglcontextcreationerror</a></code></dt> - <dd>Fired if the user agent is unable to create a <code>WebGLRenderingContext</code> or <code>WebGL2RenderingContext</code> context.</dd> - <dt><code><a href="/en-US/docs/Web/API/HTMLCanvasElement/webglcontextlost_event">webglcontextlost</a></code></dt> - <dd>Fired if the user agent detects that the drawing buffer associated with a <code>WebGLRenderingContext</code> or <code>WebGL2RenderingContext</code> object has been lost.</dd> - <dt><code><a href="/en-US/docs/Web/API/HTMLCanvasElement/webglcontextrestored_event">webglcontextrestored</a></code></dt> - <dd>Fired if the user agent restores the drawing buffer for a <code>WebGLRenderingContext</code> or <code>WebGL2RenderingContext</code> object.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}</td> - <td>{{Spec2('Media Capture DOM Elements')}}</td> - <td>Adds the method <code>captureStream()</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "#htmlcanvaselement", "HTMLCanvasElement")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>The method <code>getContext()</code> now returns a {{domxref("RenderingContext")}} rather than an opaque <code>object</code>.<br> - The <code>transferControlToOffscreen()</code>method has been added.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("api.HTMLCanvasElement")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>HTML element implementing this interface: {{HTMLElement("canvas")}}</li> -</ul> diff --git a/files/vi/web/api/htmlelement/index.html b/files/vi/web/api/htmlelement/index.html deleted file mode 100644 index 1a625a2a5b..0000000000 --- a/files/vi/web/api/htmlelement/index.html +++ /dev/null @@ -1,268 +0,0 @@ ---- -title: HTMLElement -slug: Web/API/HTMLElement -tags: - - API - - HTML DOM - - Interface -translation_of: Web/API/HTMLElement ---- -<div>{{ APIRef("HTML DOM") }}</div> - -<p>Interface <strong><code>HTMLElement</code></strong> đại diện cho mọi phần tử <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a>. Một vài phần tử sử dụng trực tiếp interface này, một vài phần tử khác lại sử dụng nó thông qua các lớp khác kế thừa nó.</p> - -<p>{{InheritanceDiagram}}</p> - -<h2 id="Các_thuộc_tính">Các thuộc tính</h2> - -<p><em>Được kế thừa từ {{domxref("Element")}}, và sử dụng chúng từ {{domxref("GlobalEventHandlers")}} và {{domxref("TouchEventHandlers")}}.</em></p> - -<dl> - <dt>{{domxref("HTMLElement.accessKey")}}</dt> - <dd>Là một {{domxref("DOMString")}} trả về từ khoá truy cập được gán cho phần tử.</dd> - <dt>{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}</dt> - <dd>Trả về một {{domxref("DOMString")}} chứa các từ khoá truy cập đã được gán của phần tử.</dd> - <dt>{{domxref("HTMLElement.contentEditable")}}</dt> - <dd>Là một {{domxref("DOMString")}}, nếu giá trị là <code>"true"</code>, ta có thể chỉnh sửa phần tử này và ngược lại nếu giá trị là <code>"false"</code>.</dd> - <dt>{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}</dt> - <dd>Trả về giá trị {{domxref("Boolean")}} cho biết nội dung của phần tử có được phép chỉnh sửa hay không.</dd> - <dt>{{domxref("HTMLElement.contextMenu")}} {{deprecated_inline}}</dt> - <dd>Là một {{domxref("HTMLMenuElement")}} trả về một menu tóm lược liên kết các phần tử. Giá trị có thể là <code>null</code>.</dd> - <dt>{{domxref("HTMLElement.dataset")}} {{readonlyInline}}</dt> - <dd>Trả về một {{domxref("DOMStringMap")}} cho phép ta thao tác với <a href="/en-US/docs/Web/Guide/HTML/Using_data_attributes">các thuộc tính dữ liệu tùy biến</a> của phần tử (<code>data-*</code>) .</dd> - <dt>{{domxref("HTMLElement.dir")}}</dt> - <dd>Là một {{domxref("DOMString")}}, tương tự với thuộc tính global <code>dir</code>, đại diện cho hướng hiển thị của phần tử. Các giá trị cho phép là <code>"ltr"</code>, <code>"rtl"</code>, và <code>"auto"</code>.</dd> - <dt>{{domxref("HTMLElement.draggable")}}</dt> - <dd>Có kiểu {{jsxref("Boolean")}} cho ta biết phần tử có thể được kéo (drag) hay không.</dd> - <dt>{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}</dt> - <dd>Trả về một {{domxref("DOMSettableTokenList")}} tương tự với thuộc tính global <code>dropzone</code> mô tả hành vi của phần tử liên quan đến hành động thả (drop).</dd> - <dt>{{domxref("HTMLElement.hidden")}}</dt> - <dd>Có kiểu {{jsxref("Boolean")}} cho ta biết phần tử có ẩn hay không.</dd> - <dt>{{domxref("HTMLElement.inert")}}</dt> - <dd>Có kiểu {{jsxref("Boolean")}} cho ta biết <a href="https://en.wikipedia.org/wiki/User_agent">user agent</a> must act as though the given node is absent đối với các sự kiện tương tác của người dùng, tìm kiếm văn bản trong trang, và lựa chọn văn bản.</dd> - <dt>{{domxref("HTMLElement.innerText")}}</dt> - <dd>Trả về nội dung văn bản được "render" từ một node và phần tử con của nó. Điều này tương tự với việc người dùng bôi đen văn bản và sao chép chúng.</dd> - <dt>{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}</dt> - <dd>Có kiểu {{jsxref("Boolean")}} cho biết scope của item.</dd> - <dt>{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Trả về một {{domxref("DOMSettableTokenList")}}…</dd> - <dt>{{domxref("HTMLElement.itemId")}} {{experimental_inline}}</dt> - <dd>Là một {{domxref("DOMString")}} cho biết ID của item.</dd> - <dt>{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Là một {{domxref("DOMSettableTokenList")}}…</dd> - <dt>{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Trả về một {{domxref("DOMSettableTokenList")}}…</dd> - <dt>{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}</dt> - <dd>Trả về một {{jsxref("Object")}} cho biết giá trị của item.</dd> - <dt>{{domxref("HTMLElement.lang")}}</dt> - <dd>Là một {{domxref("DOMString")}} cho biết ngôn ngữ của thuộc tính của một phần tử, của văn bản và của nội dung phần tử đó.</dd> - <dt>{{domxref("HTMLElement.noModule")}}</dt> - <dd>Có kiểu {{jsxref("Boolean")}} cho biết rằng việc nhúng đoạn script có thể được thực thi bởi <a href="https://en.wikipedia.org/wiki/User_agent">user agent</a> (có hỗ trợ module scripts) hay không.</dd> - <dt>{{domxref("HTMLElement.nonce")}}</dt> - <dd>Returns the cryptographic number used once that is used by Content Security Policy to determine whether a given fetch will be allowed to proceed.</dd> - <dt>{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a <code>double</code> containing the height of an element, relative to the layout.</dd> - <dt>{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a <code>double</code>, the distance from this element's left border to its <code>offsetParent</code>'s left border.</dd> - <dt>{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a {{domxref("Element")}} that is the element from which all offset calculations are currently computed.</dd> - <dt>{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a <code>double</code>, the distance from this element's top border to its <code>offsetParent</code>'s top border.</dd> - <dt>{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a <code>double</code> containing the width of an element, relative to the layout.</dd> - <dt>{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a {{domxref("HTMLPropertiesCollection")}}…</dd> - <dt>{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}</dt> - <dd>Is a {{jsxref("Boolean")}} that controls <a href="/en-US/docs/HTML/Controlling_spell_checking_in_HTML_forms" title="en/Controlling_spell_checking_in_HTML_forms">spell-checking</a>. It is present on all HTML elements, though it doesn't have an effect on all of them.</dd> - <dt>{{domxref("HTMLElement.style")}}</dt> - <dd>Is a {{domxref("CSSStyleDeclaration")}}, an object representing the declarations of an element's style attributes.</dd> - <dt>{{domxref("HTMLElement.tabIndex")}}</dt> - <dd>Is a <code>long</code> representing the position of the element in the tabbing order.</dd> - <dt>{{domxref("HTMLElement.title")}}</dt> - <dd>Is a {{domxref("DOMString")}} containing the text that appears in a popup box when mouse is over the element.</dd> - <dt>{{domxref("HTMLElement.translate")}} {{experimental_inline}}</dt> - <dd>Is a {{jsxref("Boolean")}} representing the translation.</dd> -</dl> - -<h3 id="Event_handlers">Event handlers</h3> - -<p>Most event handler properties, of the form <code>onXYZ</code>, are defined on the {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}} interfaces and implemented by <code>HTMLElement</code>. In addition, the following handlers are specific to <code>HTMLElement</code>.</p> - -<dl> - <dt>{{ domxref("HTMLElement.oncopy") }} {{ non-standard_inline() }}</dt> - <dd>Returns the event handling code for the <code>copy</code> event ({{bug("280959")}}).</dd> - <dt>{{ domxref("HTMLElement.oncut") }} {{ non-standard_inline() }}</dt> - <dd>Returns the event handling code for the <code>cut</code> event ({{bug("280959")}}).</dd> - <dt>{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}</dt> - <dd>Returns the event handling code for the <code>paste</code> event ({{bug("280959")}}).</dd> - <dt>{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}</dt> - <dd>Returns the event handling code for the {{event("touchstart")}} event.</dd> - <dt>{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}</dt> - <dd>Returns the event handling code for the {{event("touchend")}} event.</dd> - <dt>{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}</dt> - <dd>Returns the event handling code for the {{event("touchmove")}} event.</dd> - <dt>{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}</dt> - <dd>Returns the event handling code for the {{event("touchenter")}} event.</dd> - <dt>{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}</dt> - <dd>Returns the event handling code for the {{event("touchleave")}} event.</dd> - <dt>{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}</dt> - <dd>Returns the event handling code for the {{event("touchcancel")}} event.</dd> -</dl> - -<h2 id="Các_phương_thức">Các phương thức</h2> - -<p><em>Được kế thừa từ {{domxref("Element")}}.</em></p> - -<dl> - <dt>{{domxref("HTMLElement.blur()")}}</dt> - <dd>Bỏ truy cập phần tử hiện tại.</dd> - <dt>{{domxref("HTMLElement.click()")}}</dt> - <dd>Gửi một sự kiện click chuột đến phần tử.</dd> - <dt>{{domxref("HTMLElement.focus()")}}</dt> - <dd>Truy cập đến phần tử hiện tại (truy cập bằng cách click vào phần tử hoặc nhấn phím <kbd>Tab</kbd> để di chuyển đến).</dd> - <dt>{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}</dt> - <dd>Kiểm tra chính tả nội dung của phần tử.</dd> -</dl> - -<h2 id="Các_sự_kiện">Các sự kiện</h2> - -<p>Bắt các sự kiện bằng cách sự dụng phương thức <code>addEventListener()</code> hoặc bằng cách gán một thuộc tính sự sự kiện <code>on_tên_sự_kiện</code> dựa trên interface này.</p> - -<dl> - <dt><code><a href="/en-US/docs/Web/API/HTMLElement/invalid_event">invalid</a></code></dt> - <dd>Được gọi khi một phần tử không thỏa điều kiện khi đang xác minh (validation) thông tin.<br> - Dùng tương tự với thuộc tính <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/oninvalid">oninvalid</a></code>.</dd> -</dl> - -<h3 id="Các_sự_kiện_animation">Các sự kiện animation</h3> - -<dl> - <dt><code><a href="/en-US/docs/Web/API/HTMLElement/animationcancel_event">animationcancel</a></code></dt> - <dd>Được gọi khi một animation dừng đột ngột.<br> - Dùng tương tự với thuộc tính <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationcancel">onanimationcancel</a></code>.</dd> - <dt><code><a href="/en-US/docs/Web/API/HTMLElement/animationend_event">animationend</a></code></dt> - <dd>Được gọi khi một animation kết thúc.<br> - Dùng tương tự với thuộc tính <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationend">onanimationend</a></code>.</dd> - <dt><code><a href="/en-US/docs/Web/API/HTMLElement/animationiteration_event">animationiteration</a></code></dt> - <dd>Được gọi khi một vòng lặp animation kết thúc.<br> - Dùng tương tự với thuộc tính <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationiteration">onanimationiteration</a></code>.</dd> - <dt><code><a href="/en-US/docs/Web/API/HTMLElement/animationstart_event">animationstart</a></code></dt> - <dd>Fired when an animation starts.<br> - Dùng tương tự với thuộc tính <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationstart">onanimationstart</a></code>.</dd> -</dl> - -<h3 id="Các_sự_kiện_input">Các sự kiện input</h3> - -<dl> - <dt><code><a href="/en-US/docs/Web/API/HTMLElement/beforeinput_event">beforeinput</a></code></dt> - <dd>Được gọi khi giá trị của một phần tử {{HTMLElement("input")}}, {{HTMLElement("select")}}, hoặc {{HTMLElement("textarea")}} sắp được chỉnh sửa.</dd> - <dt><code><a href="/en-US/docs/Web/API/HTMLElement/input_event">input</a></code></dt> - <dd>Được gọi khi giá trị của một phần tử {{HTMLElement("input")}}, {{HTMLElement("select")}}, hoặc {{HTMLElement("textarea")}} đã được chỉnh sửa.<br> - Dùng tương tự với thuộc tính <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/oninput">oninput</a></code>.</dd> -</dl> - -<h3 id="Pointer_events">Pointer events</h3> - -<dl> - <dt><code><a href="/en-US/docs/Web/API/HTMLElement/gotpointercapture_event">gotpointercapture</a></code></dt> - <dd>Fired when an element captures a pointer using <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture">setPointerCapture()</a></code>.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ongotpointercapture">ongotpointercapture</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/HTMLElement/lostpointercapture_event">lostpointercapture</a></code></dt> - <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events#Pointer_capture">captured pointer</a> is released.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onlostpointercapture">onlostpointercapture</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/HTMLElement/pointercancel_event">pointercancel</a></code></dt> - <dd>Fired when a pointer event is canceled.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointercancel">onpointercancel</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/HTMLElement/pointerdown_event">pointerdown</a></code></dt> - <dd>Fired when a pointer becomes active.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointerdown">onpointerdown</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/HTMLElement/pointerenter_event">pointerenter</a></code></dt> - <dd>Fired when a pointer is moved into the hit test boundaries of an element or one of its descendants.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointerenter">onpointerenter</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/HTMLElement/pointerleave_event">pointerleave</a></code></dt> - <dd>Fired when a pointer is moved out of the hit test boundaries of an element.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointerleave">onpointerleave</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/HTMLElement/pointermove_event">pointermove</a></code></dt> - <dd>Fired when a pointer changes coordinates.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointermove">onpointermove</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/HTMLElement/pointerout_event">pointerout</a></code></dt> - <dd>Fired when a pointer is moved out of the <em>hit test</em> boundaries of an element (among other reasons).<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointerout">onpointerout</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/HTMLElement/pointerover_event">pointerover</a></code></dt> - <dd>Fired when a pointer is moved into an element's hit test boundaries.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointerover">onpointerover</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/HTMLElement/pointerup_event">pointerup</a></code></dt> - <dd>Fired when a pointer is no longer active.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointerup">onpointerup</a></code> property.</dd> -</dl> - -<h3 class="highlight-spanned" id="Các_sự_kiện_transition"><span class="highlight-span">Các sự kiện transition</span></h3> - -<dl> - <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitioncancel_event">transitioncancel</a></code></dt> - <dd>Được gọi khi một <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> bị hủy.<br> - Dùng tương tự với thuộc tính <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontransitioncancel">ontransitioncancel</a></code>.</dd> - <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event">transitionend</a></code></dt> - <dd>Được gọi khi một <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> hoàn thành.<br> - Dùng tương tự với thuộc tính <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend">ontransitionend</a></code>.</dd> - <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionrun_event">transitionrun</a></code></dt> - <dd>Được gọi khi một <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> được tạo ra đầu tiên.<br> - Dùng tương tự với thuộc tính <code><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontransitionrun" rel="nofollow">ontransitionrun</a></code>.</dd> - <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionstart_event">transitionstart</a></code></dt> - <dd>Được gọi khi một <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> thực sự bắt đầu.<br> - Dùng tương tự với thuộc tính <code><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontransitionstart" rel="nofollow">ontransitionstart</a></code>.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}</td> - <td>{{Spec2('CSSOM View')}}</td> - <td>Added the following properties: <code>offsetParent</code>, <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, and <code>offsetHeight</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Added the following properties: <code>translate</code>, <code>itemScope</code>, <code>itemType</code>, <code>itemId</code>, <code>itemRef</code>, <code>itemProp</code>, <code>properties</code>, and <code>itemValue</code>.<br> - Added the following method: <code>forceSpellcheck()</code>.<br> - Moved the <code>onXYZ</code> attributes to the {{domxref("GlobalEventHandlers")}} interface and added an inheritance from it.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Added the following properties: <code>dataset</code>, <code>hidden</code>, <code>tabindex</code>, <code>accessKey</code>, <code>accessKeyLabel</code>, <code>draggable</code>, <code>dropzone</code>, <code>contentEditable</code>, <code>isContentEditable</code>, <code>contextMenu</code>, <code>spellcheck</code>, <code>commandType</code>, <code>commandLabel</code>, <code>commandIcon</code>, <code>commandHidden</code>, <code>commandDisabled</code>, <code>commandChecked</code>, <code>style</code>, and all the <code>onXYZ</code> properties.<br> - Moved the <code>id</code> and <code>className</code> properties to the {{domxref("Element")}} interface.</td> - </tr> - <tr> - <td>{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}</td> - <td>{{Spec2('DOM2 HTML')}}</td> - <td>No change from {{SpecName('DOM2 HTML')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Khả_năng_tương_thích_của_trình_duyệt">Khả năng tương thích của trình duyệt</h2> - - - -<p>{{Compat("api.HTMLElement")}}</p> - -<h2 id="Xem_thêm">Xem thêm</h2> - -<ul> - <li>{{domxref("Element")}}</li> -</ul> diff --git a/files/vi/web/api/htmlformelement/index.html b/files/vi/web/api/htmlformelement/index.html deleted file mode 100644 index d80fb120a2..0000000000 --- a/files/vi/web/api/htmlformelement/index.html +++ /dev/null @@ -1,246 +0,0 @@ ---- -title: HTMLFormElement -slug: Web/API/HTMLFormElement -tags: - - API - - DOM - - Form Element - - Forms - - HTML - - HTML DOM - - HTML Form Element - - HTML forms - - HTMLFormElement - - Interface - - NeedsTranslation - - Reference - - TopicStub -translation_of: Web/API/HTMLFormElement ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p><span class="seoSummary">The <strong>{{domxref("HTMLFormElement")}}</strong> interface represents a {{HTMLElement("form")}} element in the DOM; it allows access to and in some cases modification of aspects of the form, as well as access to its component elements.</span></p> - -<p>{{InheritanceDiagram(600,120)}}</p> - -<h2 id="Properties">Properties</h2> - -<p><em>This interface also inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p> - -<dl> - <dt>{{domxref("HTMLFormElement.elements")}} {{ReadOnlyInline}}</dt> - <dd>A {{domxref("HTMLFormControlsCollection")}} holding all form controls belonging to this form element.</dd> - <dt>{{domxref("HTMLFormElement.length")}}{{ReadOnlyInline}}</dt> - <dd>A <code>long</code> reflecting the number of controls in the form.</dd> - <dt>{{domxref("HTMLFormElement.name")}}</dt> - <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("name", "form") }} HTML attribute, containing the name of the form.</dd> - <dt>{{domxref("HTMLFormElement.method")}}</dt> - <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("method", "form") }} HTML attribute, indicating the HTTP method used to submit the form. Only specified values can be set.</dd> - <dt>{{domxref("HTMLFormElement.target")}}</dt> - <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("target", "form") }} HTML attribute, indicating where to display the results received from submitting the form.</dd> - <dt>{{domxref("HTMLFormElement.action")}}</dt> - <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("action", "form") }} HTML attribute, containing the URI of a program that processes the information submitted by the form.</dd> - <dt>{{domxref("HTMLFormElement.encoding")}} or {{domxref("HTMLFormElement.enctype")}}</dt> - <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("enctype", "form") }} HTML attribute, indicating the type of content that is used to transmit the form to the server. Only specified values can be set. The two properties are synonyms.</dd> - <dt>{{domxref("HTMLFormElement.acceptCharset")}}</dt> - <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("accept-charset", "form") }} HTML attribute, representing the character encoding that the server accepts.</dd> - <dt>{{domxref("HTMLFormElement.autocomplete")}}</dt> - <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("autocomplete", "form") }} HTML attribute, indicating whether the controls in this form can have their values automatically populated by the browser.</dd> - <dt>{{domxref("HTMLFormElement.noValidate")}}</dt> - <dd>A {{jsxref("Boolean")}} reflecting the value of the form's {{ htmlattrxref("novalidate", "form") }} HTML attribute, indicating whether the form should not be validated.</dd> -</dl> - -<p>Named inputs are added to their owner form instance as properties, and can overwrite native properties if they share the same name (eg a form with an input named <code>action</code> will have its <code>action</code> property return that input instead of the form's {{ htmlattrxref("action", "form") }} HTML attribute).</p> - -<h2 id="Methods">Methods</h2> - -<p><em>This interface also inherits methods from its parent, {{domxref("HTMLElement")}}.</em></p> - -<dl> - <dt>{{domxref("HTMLFormElement.submit()")}}</dt> - <dd>Submits the form to the server.</dd> - <dt>{{domxref("HTMLFormElement.reset()")}}</dt> - <dd>Resets the form to its initial state.</dd> - <dt>{{domxref("HTMLFormElement.checkValidity()")}}</dt> - <dd>Returns <code>true</code> if the element's child controls are subject to <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> and satisfy those contraints; returns <code>false</code> if some controls do not satisfy their constraints. Fires an event named {{event("invalid")}} at any control that does not satisfy its constraints; such controls are considered invalid if the event is not canceled. It is up to the programmer to decide how to respond to <code>false</code>.</dd> - <dt>{{domxref("HTMLFormElement.reportValidity()")}}</dt> - <dd>Returns <code>true</code> if the element's child controls satisfy their <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">validation constraints</a>. When <code>false</code> is returned, cancelable {{Event("invalid")}} events are fired for each invalid child and validation problems are reported to the user.</dd> - <dt>{{domxref("HTMLFormElement.requestAutocomplete()")}} {{obsolete_inline}}</dt> - <dd>Triggers a native browser interface to assist the user in completing the fields which have an <a href="https://html.spec.whatwg.org/#autofill-field-name">autofill field name</a> value that is not <code>off</code> or <code>on</code>. The form will receive an event once the user has finished with the interface, the event will either be {{event("autocomplete")}} when the fields have been filled or {{event("autocompleteerror")}} when there was a problem. <strong>This method has been removed from Chrome and Firefox — see {{bug(1270740)}} for background information on why.</strong></dd> -</dl> - -<h2 id="Events">Events</h2> - -<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p> - -<dl> - <dt><code><a href="/en-US/docs/Web/API/HTMLFormElement/reset_event">reset</a></code></dt> - <dd><span class="hidden"> </span>The <code>reset</code> event fires when a form is reset.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onreset">onreset</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/HTMLFormElement/submit_event">submit</a></code></dt> - <dd>The <code>submit</code> event fires when a form is submitted.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a></code> property.</dd> -</dl> - -<h2 id="Usage_notes">Usage notes</h2> - -<h3 id="Obtaining_a_form_element_object">Obtaining a form element object</h3> - -<p>To obtain an <code>HTMLFormElement</code> object, you can use a <a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS selector</a> with {{domxref("ParentNode.querySelector", "querySelector()")}}, or you can get a list of all of the forms in the document using its {{domxref("Document.forms", "forms")}} property.</p> - -<p>{{domxref("Document.forms")}} returns an array of <code>HTMLFormElement</code> objects listing each of the forms on the page. You can then use any of the following syntaxes to get an individual form:</p> - -<dl> - <dt><code>document.forms[<em>index</em>]</code></dt> - <dd>Returns the form at the specified <code>index</code> into the array of forms.</dd> - <dt><code>document.forms[<em>id</em>]</code></dt> - <dd>Returns the form whose ID is <code>id</code>.</dd> - <dt><code>document.forms[<em>name</em>]</code></dt> - <dd>Returns the form whose {{domxref("Element.name", "name")}} attribute's value is <code>name</code>.</dd> -</dl> - -<h3 id="Accessing_the_forms_elements">Accessing the form's elements</h3> - -<p>You can access the list of the form's data-containing elements by examining the form's {{domxref("HTMLFormElement.elements", "elements")}} property. This returns an {{domxref("HTMLFormControlsCollection")}} listing all of the form's user data entry elements, both those which are descendants of the <code><form></code> and those which are made members of the form using their <code>form</code> attributes.</p> - -<h3 id="Elements_that_are_considered_form_controls">Elements that are considered form controls</h3> - -<p>The elements which are included by <code>HTMLFormElement.elements</code> and <code>HTMLFormElement.length</code> are:</p> - -<ul> - <li>{{HTMLElement("button")}}</li> - <li>{{HTMLElement("fieldset")}}</li> - <li>{{HTMLElement("input")}} (with the exception that any whose {{htmlattrxref("type", "input")}} is <code>"image"</code> are omitted for historical reasons)</li> - <li>{{HTMLElement("object")}}</li> - <li>{{HTMLElement("output")}}</li> - <li>{{HTMLElement("select")}}</li> - <li>{{HTMLElement("textarea")}}</li> -</ul> - -<p>No other elements are included in the list returned by <code>elements</code>, which makes it an excellent way to get at the elements most important when processing forms.</p> - -<h2 id="Examples">Examples</h2> - -<p>Creating a new form element, modifying its attributes, then submitting it:</p> - -<pre class="brush: js">var f = document.createElement("form");// Create a form -document.body.appendChild(f); // Add it to the document body -f.action = "/cgi-bin/some.cgi"; // Add action and method attributes -f.method = "POST"; -f.submit(); // Call the form's submit method -</pre> - -<p>Extract information from a form element and set some of its attributes:</p> - -<pre class="brush: html"><form name="formA" action="/cgi-bin/test" method="post"> - <p>Press "Info" for form details, or "Set" to change those details.</p> - <p> - <button type="button" onclick="getFormInfo();">Info</button> - <button type="button" onclick="setFormInfo(this.form);">Set</button> - <button type="reset">Reset</button> - </p> - - <textarea id="form-info" rows="15" cols="20"></textarea> -</form> - -<script> - function getFormInfo(){ - // Get a reference to the form via its name - var f = document.forms["formA"]; - // The form properties we're interested in - var properties = [ 'elements', 'length', 'name', 'charset', 'action', 'acceptCharset', 'action', 'enctype', 'method', 'target' ]; - // Iterate over the properties, turning them into a string that we can display to the user - var info = properties.map(function(property) { return property + ": " + f[property] }).join("\n"); - - // Set the form's <textarea> to display the form's properties - document.forms["formA"].elements['form-info'].value = info; - } - - function setFormInfo(f){ // Argument should be a form element reference. - f.action = "a-different-url.cgi"; - f.name = "a-different-name"; - } -</script> -</pre> - -<p>Submit a form into a new window:</p> - -<pre class="brush: html"><!doctype html> -<html> -<head> -<meta charset="utf-8"> -<title>Example new-window form submission</title> -</head> -<body> - -<form action="test.php" target="_blank"> - <p><label>First name: <input type="text" name="firstname"></label></p> - <p><label>Last name: <input type="text" name="lastname"></label></p> - <p><label><input type="password" name="pwd"></label></p> - - <fieldset> - <legend>Pet preference</legend> - <p><label><input type="radio" name="pet" value="cat"> Cat</label></p> - <p><label><input type="radio" name="pet" value="dog"> Dog</label></p> - </fieldset> - - <fieldset> - <legend>Owned vehicles</legend> - - <p><label><input type="checkbox" name="vehicle" value="Bike">I have a bike</label></p> - <p><label><input type="checkbox" name="vehicle" value="Car">I have a car</label></p> - </fieldset> - - <p><button>Submit</button></p> -</form> - -</body> -</html></pre> - -<h3 id="Submitting_forms_and_uploading_files_using_XMLHttpRequest">Submitting forms and uploading files using <code>XMLHttpRequest</code></h3> - -<p>If you want to know how to serialize and submit a form using the {{domxref("XMLHttpRequest")}} API, please read <a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">this paragraph</a>.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "#htmlformelement", "HTMLFormElement")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>The following method has been added: <code>requestAutocomplete()</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "forms.html#the-form-element", "HTMLFormElement")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>The elements properties returns an {{domxref("HTMLFormControlsCollection")}} instead of a raw {{domxref("HTMLCollection")}}. This is mainly a technical change. The following method has been added: <code>checkValidity()</code>. The following properties have been added: <code>autocomplete</code>, <code>noValidate</code>, and <code>encoding</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM2 HTML', 'html.html#ID-40002357', 'HTMLFormElement')}}</td> - <td>{{Spec2('DOM2 HTML')}}</td> - <td>No change</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-html.html#ID-40002357', 'HTMLFormElement')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.HTMLFormElement")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The HTML element implementing this interface: {{ HTMLElement("form") }}.</li> -</ul> diff --git a/files/vi/web/api/htmlformelement/reset/index.html b/files/vi/web/api/htmlformelement/reset/index.html deleted file mode 100644 index dc68298cab..0000000000 --- a/files/vi/web/api/htmlformelement/reset/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: HTMLFormElement.reset() -slug: Web/API/HTMLFormElement/reset -translation_of: Web/API/HTMLFormElement/reset ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p>Phương thức HTMLFormEuity.reset () khôi phục các giá trị mặc định của thành phần biểu mẫu. Phương pháp này thực hiện tương tự như nhấp vào nút đặt lại của biểu mẫu</p> - -<p>Nếu một điều khiển biểu mẫu (chẳng hạn như nút đặt lại) có tên hoặc id của thiết lập lại, nó sẽ che dấu phương thức đặt lại của biểu mẫu. Nó không thiết lập lại các thuộc tính khác trong đầu vào, chẳng hạn như bị vô hiệu hóa.</p> - -<h2 id="Syntax" name="Syntax">Syntax</h2> - -<pre class="syntaxbox"><em>HTMLFormElement</em>.reset() -</pre> - -<h2 id="Example" name="Example">Example</h2> - -<pre class="brush: js">document.getElementById('myform').reset(); -</pre> - -<h2 id="Specification" name="Specification">Specification</h2> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.HTMLFormElement.reset")}}</p> diff --git a/files/vi/web/api/htmlorforeignelement/dataset/index.html b/files/vi/web/api/htmlorforeignelement/dataset/index.html deleted file mode 100644 index ad2617ab56..0000000000 --- a/files/vi/web/api/htmlorforeignelement/dataset/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: HTMLElement.dataset -slug: Web/API/HTMLOrForeignElement/dataset -tags: - - API - - HTML DOM - - HTMLElement - - Tham khảo - - Thuộc tính - - dataset -translation_of: Web/API/HTMLOrForeignElement/dataset -original_slug: Web/API/HTMLElement/dataset ---- -<div>{{ APIRef("HTML DOM") }}</div> - -<p><span class="seoSummary">The <code><strong>dataset</strong></code> property on the {{domxref("HTMLElement")}} interface provides read/write access to all the <a href="/en/HTML/Global_attributes#attr-data-*" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">custom data attributes</a> (<code>data-*</code>) set on the element.</span> This access is available both in HTML and within the DOM. It is a <a href="/en/DOM/DOMStringMap" title="en/DOM/DOMStringMap">map of DOMString</a>, one entry for each custom data attribute. Note that the<strong> </strong><code>dataset</code><strong> </strong>property itself can be read, but not directly written. Instead, all writes must be to the individual properties within the <code>dataset</code>, which in turn represent the data attributes. Note also that an HTML <code><strong>data-</strong></code><em>attribute</em> and its corresponding DOM<strong> </strong><code>dataset.</code><em>property</em> do not share the same name, but they are always similar:</p> - -<ul> - <li>The name of a custom data attribute in HTML begins with <code>data-</code>. It must contain only letters, numbers and the following characters: dash (<code>-</code>), dot (<code>.</code>), colon (<code>:</code>), underscore (<code>_</code>) -- but NOT any ASCII capital letters (<code>A</code> to <code>Z</code>).</li> - <li>The name of a custom data attribute in JavaScript is the name of the same HTML attribute but in camelCase and with no dashes, dots, etc.</li> -</ul> - -<p>In addition to the information below, you'll find a how-to guide for using HTML data attributes in our article <a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes.</a></p> - -<h3 id="Chuyển_đổi_tên">Chuyển đổi tên</h3> - -<p>Từ <code>dash-style</code> (kiểu-gạch-nối) sang <code>camelCase</code> (bướuLạcĐà): Tên thuộc tính dữ liệu tùy biến được chuyển đổi thành khóa cho {{ domxref("DOMStringMap") }} dự trên quy định sau:</p> - -<ul> - <li>Loại bỏ tiền tố <code>data-</code> (cùng gạch nối);</li> - <li>những gạch nối (<code>U+002D</code>) theo sau chữ cái in thường ASCII, từ <code>a</code><span style="line-height: 1.5;"> tới </span><code>z</code><span style="line-height: 1.5;">, sẽ bị loại bỏ và chữ cái đó sẽ chuyển đổi thành dạng in hoa;</span></li> - <li>những ký tự còn lại (bao gồm gạch nối khác) được giữ nguyên.</li> -</ul> - -<p>Từ <code>camelCase</code> (bướuLạcĐà) sang <code>dash-style</code> (kiểu-gạch-nối): Cách chuyển đổi ngược lại, dò theo khóa để tìm ra tên thuộc tính, bằng quy định sau:</p> - -<ul> - <li>Rằng buộc: Gạch nối bị cấm đi liền đuôi chữ cái (từ <code>a</code> đến <code>z</code>) ở dạng in thường ASCII (trước khi biến đổi);</li> - <li>thêm tiền tố <code>data-</code>;</li> - <li>bất cứ chữ cái in hoa ASCII từ <code>A</code> tới <code>Z</code> sẽ được đổi thành gạch nối theo sau chữ cái dạng in thường tương ứng.</li> - <li>những ký tự còn lại không đổi.</li> -</ul> - -<p>Việc có rằng buộc trong quy định trên nhằm đảm bảo việc chuyển đổi có thể đảo ngược cho nhau.</p> - -<p>Ví dụ, thuộc tính có tên <code>data-abc-def</code> sẽ có khóa tương ứng <code>abcDef</code>.</p> - -<ul> -</ul> - -<h3 id="Truy_cập_giá_trị">Truy cập giá trị</h3> - -<ul> - <li>Attributes can be set and read by using the camelCase name (the key) like an object property of the dataset, as in <em>element.</em>dataset.<em>keyname</em></li> - <li>Attributes can also be set and read using the object-properties bracket-syntax, as in <em>element.</em>dataset[<em>keyname</em>]</li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/in">Toán tử in</a> có thể dùng để kiểm tra xem thuộc tính đó có (tồn tại) hay không.</li> -</ul> - -<h3 id="Loại_giá_trị">Loại giá trị</h3> - -<ul> - <li>Khi một thuộc tính được gán, giá trị dữ liệu đó sẽ luôn được chuyển đổi thành định dạng chuỗi. Ví dụ, <code>null</code> sẽ được chuyển thành chuỗi <code>"null"</code>.</li> - <li>Phòng khi cần xóa thuộc tính, ta có thể dùng <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">toán tử delete</a>. (tiếng Anh)</li> -</ul> - -<h2 id="Cú_pháp">Cú pháp</h2> - -<ul> - <li><em>string</em> = <em>element</em>.<strong>dataset</strong>.<em>camelCasedName</em>;</li> - <li><em>element.</em><strong>dataset</strong>.<em>camelCasedName</em> = <em>string</em>;</li> - <br> - <li><em>string</em> = <em>element</em>.<strong>dataset[<em>camelCasedName</em>]</strong>;</li> - <li><em>element</em>.<strong>dataset[<em>camelCasedName</em>]</strong> = <em>string</em>;</li> - <br> - <li>Thuộc tính dữ liệu tùy biến cũng có thể gán trực tiếp bằng thẻ HTML, nhưng tên thuộc tính buộc phải dùng cú pháp <code>data-</code> như trên.</li> -</ul> - -<h2 id="Ví_dụ">Ví dụ</h2> - -<pre class="brush: html"><div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div></pre> - -<pre class="brush: js">const el = document.querySelector('#user'); - -// el.id == 'user' -// el.dataset.id === '1234567890' -// el.dataset.user === 'johndoe' -// el.dataset.dateOfBirth === '' - -// gán dữ liệu cho thuộc tính data -el.dataset.dateOfBirth = '1960-10-03'; -// Kết quả: el.dataset.dateOfBirth === 1960-10-03 - -delete el.dataset.dateOfBirth; -// Kết quả: el.dataset.dateOfBirth === undefined - -// 'someDataAttr' in el.dataset === false -el.dataset.someDataAttr = 'mydata'; -// Kết quả: 'someDataAttr' in el.dataset === true -</pre> - -<h2 id="Thông_số_kỹ_thuật">Thông số kỹ thuật</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Thông số kỹ thuật</th> - <th scope="col">Trạng thái</th> - <th scope="col">Chú thích</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Tính_tương_thích_trên_trình_duyệt">Tính tương thích trên trình duyệt</h2> - - - -<p>{{Compat("api.HTMLElement.dataset")}}</p> - -<h2 id="Xem_thêm">Xem thêm</h2> - -<ul> - <li>Lớp HTML <code><a href="/en-US/docs/Web/HTML/Global_attributes/data-*"><strong>data-*</strong></a></code> của thuộc tính phổ thông (global).</li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes</a> (Tiếng Anh)</li> - <li>{{domxref("Element.getAttribute()")}} và {{domxref("Element.setAttribute()")}}</li> -</ul> diff --git a/files/vi/web/api/index.html b/files/vi/web/api/index.html deleted file mode 100644 index 71e6573815..0000000000 --- a/files/vi/web/api/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Web API Interfaces -slug: Web/API -tags: - - API - - Apps - - JavaScript - - NeedsTranslation - - Reference - - TopicStub - - Web -translation_of: Web/API ---- -<p class="summary"><span class="seoSummary">Có rất nhiều API tốt khi viết Web bằng Javascript. Dưới đây là danh sách những interfaces (những kiểu object) mà bạn có thể sử dụng khi phát triển Web app hay Website.</span></p> - -<p>Web APIs thường được viết bởi JavaScript, nhưng không phải luôn là như vậy.</p> - -<h2 id="Đặc_tả">Đặc tả</h2> - -<p>Đây là danh sách tất cả những API sẵn có.</p> - -<div>{{ListGroups}}</div> - -<h2 id="Interfaces">Interfaces</h2> - -<p>Đây là danh sách tất cả những interfaces (những kiểu object) sẵn có.</p> - -<div>{{APIListAlpha}}</div> - -<h2 id="Xem_thêm">Xem thêm</h2> - -<ul> - <li><a href="/en-US/docs/Web/Events">Web API event reference</a></li> -</ul> diff --git a/files/vi/web/api/navigator/geolocation/index.html b/files/vi/web/api/navigator/geolocation/index.html deleted file mode 100644 index 4881071171..0000000000 --- a/files/vi/web/api/navigator/geolocation/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Navigator.geolocation -slug: Web/API/Navigator/geolocation -tags: - - API - - Bất động sản - - Geolocation API - - Tham khảo -translation_of: Web/API/Navigator/geolocation ---- -<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div> - -<p><strong><code>Navigator.geolocation</code></strong> với đặc tính chỉ cho đọc trả lại một đối tượng {{domxref("Geolocation")}} cho phép trang web truy cập thông tin địa điểm của thiết bị. Việc này cho phép trang web hoặc phần mềm đưa ra đề nghị chào hàng dựa trên vị trí của người dùng.</p> - -<div class="note"> -<p><strong>Ghi chú:</strong> Vì lý do bảo mật, khi một trang web cố gắng truy cập vị trí, người dùng sẽ được thông báo và hỏi cấp yêu cầu cho phép. Hãy cẩn thận vì mỗi trình duyệt web có chính sách và phương pháp khác nhau.</p> -</div> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><var>geo</var> = <var>navigator</var>.geolocation -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Chi tiết kỹ thuật</th> - <th scope="col">Tình trạng</th> - <th scope="col">Ghi chú</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Geolocation', '#navi-geo', 'Navigator.geolocation')}}</td> - <td>{{Spec2('Geolocation')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Tương_thích_vơi_trình_duyệt">Tương thích vơi trình duyệt</h2> - -<div class="hidden">Bảng tương thích ở trang này được tạo ra từ cấu trúc dữ liệu. Nếu bạn muốn đóng góp dữ liệu, hãy truy cập <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> và gửi chúng tôi một đề nghị thi hành.</div> - -<p>{{Compat("api.Navigator.geolocation")}}</p> - -<h2 id="Xem_thêm">Xem thêm</h2> - -<ul> - <li><a href="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li> -</ul> diff --git a/files/vi/web/api/navigator/index.html b/files/vi/web/api/navigator/index.html deleted file mode 100644 index e9ab7a7b29..0000000000 --- a/files/vi/web/api/navigator/index.html +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: Navigator -slug: Web/API/Navigator -tags: - - API - - DOM4 - - Interface - - Navigator - - NeedsTranslation - - Reference - - TopicStub - - Web - - Web Performance -translation_of: Web/API/Navigator ---- -<div>{{APIRef("DOM4")}}</div> - -<p>The <code><strong>Navigator</strong></code> interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.</p> - -<p>A <code>Navigator</code> object can be retrieved using the read-only {{domxref("window.navigator")}} property.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>Doesn't inherit any properties, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorLanguage")}}, {{domxref("NavigatorOnLine")}}, {{domxref("NavigatorContentUtils")}}, {{domxref("NavigatorStorage")}}, {{domxref("NavigatorStorageUtils")}}, {{domxref("NavigatorConcurrentHardware")}}, {{domxref("NavigatorPlugins")}}, and {{domxref("NavigatorUserMedia")}}.</em></p> - -<h3 id="Standard">Standard</h3> - -<dl> - <dt>{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns an array containing every {{domxref("VRDisplay")}} object that is currently presenting ({{domxref("VRDisplay.ispresenting")}} is <code>true</code>).</dd> - <dt>{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns the internal "code" name of the current browser. Do not rely on this property to return the correct value.</dd> - <dt>{{domxref("NavigatorID.appName")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a {{domxref("DOMString")}} with the official name of the browser. Do not rely on this property to return the correct value.</dd> - <dt>{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns the version of the browser as a {{domxref("DOMString")}}. Do not rely on this property to return the correct value.</dd> - <dt>{{domxref("Navigator.battery")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("BatteryManager")}} object you can use to get information about the battery charging status.</dd> - <dt>{{domxref("Navigator.connection")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Provides a {{domxref("NetworkInformation")}} object containing information about the network connection of a device.</dd> - <dt>{{domxref("Navigator.cookieEnabled")}} {{readonlyinline}}</dt> - <dd>Returns false if setting a cookie will be ignored and true otherwise.</dd> - <dt>{{domxref("Navigator.geolocation")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.</dd> - <dt>{{domxref("NavigatorConcurrentHardware.hardwareConcurrency")}} {{readOnlyInline}}</dt> - <dd>Returns the number of logical processor cores available.</dd> - <dt>{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a {{domxref("Boolean")}} flag indicating whether the host browser is Java-enabled or not.</dd> - <dt>{{domxref('Navigator.keyboard')}} {{readonlyinline}} {{experimental_inline}}</dt> - <dd>Returns a {{domxref('Keyboard')}} object which provides access to functions that retrieve keyboard layout maps and toggle capturing of key presses from the physical keyboard.</dd> - <dt>{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("DOMString")}} representing the preferred language of the user, usually the language of the browser UI. The <code>null</code> value is returned when this is unknown.</dd> - <dt>{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}</dt> - <dd>Returns an array of {{domxref("DOMString")}} representing the languages known to the user, by order of preference.</dd> - <dt>{{domxref("Navigator.locks")}} {{readonlyinline}}{{experimental_inline}}</dt> - <dd>Returns a {{domxref("LockManager")}} object which provides methods for requesting a new {{domxref('Lock')}} object and querying for an existing {{domxref('Lock')}} object</dd> - <dt>{{domxref("Navigator.mediaCapabilities")}} {{readonlyinline}}{{experimental_inline}}</dt> - <dd>Returns a {{domxref("MediaCapabilities")}} object that can expose information about the decoding and encoding capabilities for a given format and output capabilities.</dd> - <dt>{{domxref("Navigator.maxTouchPoints")}} {{readonlyInline}}</dt> - <dd>Returns the maximum number of simultaneous touch contact points are supported by the current device.</dd> - <dt>{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns an {{domxref("MimeTypeArray")}} listing the MIME types supported by the browser.</dd> - <dt>{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("Boolean")}} indicating whether the browser is working online.</dd> - <dt>{{domxref("Navigator.oscpu")}}</dt> - <dd>Returns a string that represents the current operating system.</dd> - <dt>{{domxref("Navigator.permissions")}} {{readonlyinline}}{{experimental_inline}}</dt> - <dd>Returns a {{domxref("Permissions")}} object that can be used to query and update permission status of APIs covered by the <a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a>.</dd> - <dt>{{domxref("NavigatorID.platform")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a string representing the platform of the browser. Do not rely on this function to return a significant value.</dd> - <dt>{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}</dt> - <dd>Returns a {{domxref("PluginArray")}} listing the plugins installed in the browser.</dd> - <dt>{{domxref("NavigatorID.product")}} {{readonlyInline}} {{experimental_inline}}</dt> - <dd>Always returns <code>'Gecko'</code>, on any browser. This property is kept only for compatibility purpose.</dd> - <dt>{{domxref("Navigator.serviceWorker")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("ServiceWorkerContainer")}} object, which provides access to registration, removal, upgrade, and communication with the {{domxref("ServiceWorker")}} objects for the <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">associated document</a>.</dd> - <dt>{{domxref("NavigatorStorage.storage")}} {{readonlyinline}}</dt> - <dd>Returns the singleton {{domxref('StorageManager')}} object used for managing persistence permissions and estimating available storage on a site-by-site/app-by-app basis.</dd> - <dt>{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}</dt> - <dd>Returns the user agent string for the current browser.</dd> - <dt>{{domxref("Navigator.webdriver")}} {{readonlyInline}} {{experimental_inline}}</dt> - <dd>Indicates whether the user agent is controlled by automation.</dd> -</dl> - -<h3 id="Methods" name="Methods">Non-standard</h3> - -<dl> - <dt>{{domxref("Navigator.buildID")}} {{non-standard_inline}}</dt> - <dd>Returns the build identifier of the browser. In modern browsers this property now returns a fixed timestamp as a privacy measure, e.g. <code>20181001000000</code> in Firefox 64 onwards.</dd> - <dt>{{domxref("Navigator.credentials")}} {{non-standard_inline}}</dt> - <dd>Returns the {{domxref("CredentialsContainer")}} interface which exposes methods to request credentials and notify the user agent when interesting events occur such as successful sign in or sign out. </dd> - <dt>{{domxref("Navigator.deviceMemory")}} {{readonlyInline}} {{non-standard_inline}}</dt> - <dd>Returns the amount of device memory in gigabytes. This value is an approximation given by rounding to the nearest power of 2 and dividing that number by 1024.</dd> - <dt>{{domxref("Navigator.doNotTrack")}} {{non-standard_inline}}</dt> - <dd>Reports the value of the user's do-not-track preference. When this value is "yes", your web site or application should not track the user.</dd> - <dt>{{domxref("Navigator.mediaDevices")}} {{non-standard_inline}}</dt> - <dd>Returns a reference to a {{domxref("MediaDevices")}} object which can then be used to get information about available media devices ({{domxref("MediaDevices.enumerateDevices()")}}), find out what constrainable properties are supported for media on the user's computer and user agent ({{domxref("MediaDevices.getSupportedConstraints()")}}), and to request access to media using {{domxref("MediaDevices.getUserMedia()")}}.</dd> - <dt>{{domxref("Navigator.mozNotification")}} {{obsolete_inline}} {{deprecated_inline("22")}} {{non-standard_inline}}<br> - {{domxref("Navigator.webkitNotification")}} {{obsolete_inline}}</dt> - <dd>Returns a {{domxref("navigator.mozNotification", "notification")}} object you can use to deliver notifications to the user from your web application.</dd> - <dt>{{domxref("Navigator.mozSocial")}} {{non-standard_inline}}</dt> - <dd>The Object, returned by the <code>navigator.mozSocial</code> property, is available within the social media provider's panel to provide functionality it may need.</dd> - <dt>{{domxref("Navigator.presentation")}} {{non-standard_inline}}</dt> - <dd>Returns a reference to the {{domxref("Presentation")}} API.</dd> - <dt>{{domxref("Navigator.productSub")}} {{non-standard_inline}}</dt> - <dd>Returns the build number of the current browser (e.g., "20060909").</dd> - <dt>{{domxref("Navigator.securitypolicy")}} {{non-standard_inline}}</dt> - <dd>Returns an empty string. In Netscape 4.7x, returns "US & CA domestic policy" or "Export policy".</dd> - <dt>{{domxref("Navigator.standalone")}} {{non-standard_inline}}</dt> - <dd>Returns a boolean indicating whether the browser is running in standalone mode. Available on Apple's iOS Safari only.</dd> - <dt>{{domxref("Navigator.storageQuota")}} {{readonlyinline}} {{experimental_inline}}</dt> - <dd>Returns a {{domxref('StorageQuota')}} interface which provides means to query and request storage usage and quota information.</dd> - <dt>{{domxref("Navigator.vendor")}} {{non-standard_inline}}</dt> - <dd>Returns the vendor name of the current browser (e.g., "Netscape6").</dd> - <dt>{{domxref("Navigator.vendorSub")}} {{non-standard_inline}}</dt> - <dd>Returns the vendor version number (e.g. "6.1").</dd> - <dt>{{domxref("Navigator.webkitPointer")}} {{non-standard_inline}}</dt> - <dd>Returns a PointerLock object for the <a href="/en-US/docs/API/Pointer_Lock_API" title="Mouse Lock API">Mouse Lock API</a>.</dd> -</dl> - -<h2 id="Methods" name="Methods">Methods</h2> - -<p><em>Doesn't inherit any method, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, <em>{{domxref("NavigatorUserMedia")}}, </em>and {{domxref("NavigatorStorageUtils")}}.</em></p> - -<h3 id="Standard_2">Standard</h3> - -<dl> - <dt>{{domxref("Navigator.canShare()")}} {{experimental_inline}}</dt> - <dd>Returns <code>true</code> if a call to <code>Navigator.share()</code> would succeed.</dd> - <dt>{{domxref("Navigator.getVRDisplays()")}} {{experimental_inline}}</dt> - <dd>Returns a promise that resolves to an array of {{domxref("VRDisplay")}} objects representing any available VR devices connected to the computer.</dd> - <dt>{{domxref("Navigator.getUserMedia", "Navigator.getUserMedia()")}} {{experimental_inline}}</dt> - <dd>After having prompted the user for permission, returns the audio or video stream associated to a camera or microphone on the local computer.</dd> - <dt>{{domxref("Navigator.registerContentHandler()")}} {{Obsolete_inline(59)}}</dt> - <dd>Allows web sites to register themselves as a possible handler for a given MIME type.</dd> - <dt>{{domxref("Navigator.registerProtocolHandler()")}}</dt> - <dd>Allows web sites to register themselves as a possible handler for a given protocol.</dd> - <dt>{{domxref("Navigator.requestMediaKeySystemAccess()")}} {{experimental_inline}}</dt> - <dd>Returns a <span style="line-height: 19.0909080505371px;">{{jsxref("Promise")}} for a MediaKeySystemAccess object.</span></dd> - <dt>{{domxref("Navigator.sendBeacon()")}}{{experimental_inline}}</dt> - <dd>Used to asynchronously transfer a small amount of data using {{Glossary("HTTP")}} from the User Agent to a web server.</dd> - <dt>{{domxref("Navigator.share()")}}{{experimental_inline}}</dt> - <dd>Invokes the native sharing mechanism of the current platform.</dd> - <dt>{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{experimental_inline}}</dt> - <dd>Returns <code>false</code>. JavaScript taint/untaint functions removed in JavaScript 1.2.</dd> - <dt>{{domxref("Navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}</dt> - <dd>Causes vibration on devices with support for it. Does nothing if vibration support isn't available.</dd> -</dl> - -<h3 id="Non-standard">Non-standard</h3> - -<div class="note"> -<p>Firefox OS devices adds more non-standard methods. You can consult them on the <a href="/en-US/docs/Mozilla/Firefox_OS/API/Navigator">Firefox OS Navigator extensions article</a>.</p> -</div> - -<dl> - <dt>{{domxref("Navigator.mozIsLocallyAvailable()")}} {{non-standard_inline}}</dt> - <dd>Lets code check to see if the document at a given URI is available without using the network.</dd> - <dt>{{domxref("Navigator.mozPay()")}} {{non-standard_inline}}</dt> - <dd>Allows in-app payment.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#the-navigator-object', 'the Navigator object')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> - -<div>{{Compat("api.Navigator")}}</div> diff --git a/files/vi/web/api/navigator/sendbeacon/index.html b/files/vi/web/api/navigator/sendbeacon/index.html deleted file mode 100644 index 1a48443fc9..0000000000 --- a/files/vi/web/api/navigator/sendbeacon/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Navigator.sendBeacon() -slug: Web/API/Navigator/sendBeacon -tags: - - API - - Beacon - - Navigator - - sendBeacon - - web perfomance -translation_of: Web/API/Navigator/sendBeacon -original_slug: Web/API/Navigator/sendBeacon-vi ---- -<div><span class="seoSummary">Phương thức <code><strong>navigator.sendBeacon()</strong></code> gửi </span>{{glossary("Asynchronous", "bất đồng bộ")}} 1 lượng nhỏ dữ liệu đến máy chủ (web server) thông qua giao thức {{Glossary("HTTP")}} .</div> - -<h2 id="Cú_pháp">Cú pháp</h2> - -<pre class="syntaxbox notranslate">navigator.sendBeacon(<var>url</var>, <var>data</var>); -</pre> - -<h3 id="Tham_Số">Tham Số</h3> - -<dl> - <dt><code><var>url</var></code></dt> - <dd>Đường dẫn để nhận dữ liệu (Tạo request). Có thể là đường dẫn tuyệt đối hoặc tương đối.</dd> - <dt><code><var>data</var></code></dt> - <dd>Một đối tượng chứa dữ liệu để gửi đi có thể là 1 {{domxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, {{domxref("FormData")}}, hoặc {{domxref("URLSearchParams")}}.</dd> -</dl> - -<h3 id="Giá_trị_trả_về">Giá trị trả về</h3> - -<p>Phương thức <code><strong>sendBeacon()</strong></code> trả về <code>true</code> nếu như {{glossary("user agent")}} (tác nhân người dùng hay web browser) xếp <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">dữ liệu (data)</span></font> để gửi đi thành công. Nếu không, sẽ trả về <code>false</code>.</p> - -<h2 id="Mô_tả">Mô tả</h2> - -<p>Phương thức này dùng cho phân tích và chuẩn đoán cần gửi dữ liệu về máy chủ trước thời điểm đóng trang, nếu như gửi sớm hơn, có thể sẽ bị thiếu thông tin cần thu thập. Ví dụ, đường dẫn nào người dùng nhấn vào trước khi chuyển đến trang khác và đóng trang.</p> - -<p>Việc đảm bảo rằng dữ liệu được gửi đi trong khi đóng trang (unload) trước đây thường rất khó để thực hiện, bởi user agents (web browser) luôn bỏ qua những {{domxref("XMLHttpRequest")}} bất đồng bộ được chạy trong sự kiện {{domxref("Window/unload_event", "unload")}}.</p> - -<p>Trước đây, người ta thường làm trễ thời gian tải lại trang đủ lâu để gửi được dữ liệu đi bằng 1 số cách sau:</p> - -<ul> - <li>Gửi dữ liệu với 1 <code>XMLHttpRequest</code> đồng bộ, chặn các xử lý khác, được gọi trong sự kiện <code>unload</code> hoặc {{domxref("Window/beforeunload_event", "beforeunload")}}.</li> - <li>Tạo 1 thẻ {{HTMLElement("img")}} và đặt thuộc tính <code>src</code> trong khi xử lý <code>unload</code>. Hầu hết các user agents (trình duyệt) sẽ làm trễ việc tải lại trang cho đến khi tải xong ảnh.</li> - <li><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Tạo vòng lặp không xử lý gì chạy trong vài giây khi </span></font>unload</code>.</li> -</ul> - -<p>Tất cả những phương thức đó đều chặn quá trình tải lại trang, làm chậm việc chuyển đến trang tiếp theo. Trang tiếp theo không thể làm gì để ngăn chặn việc này, vì vậy trang mới sẽ có vẻ chậm đi, mặc dù đó là lỗi từ trang trước.</p> - -<p>Ví dụ sau đây là 1 đoạn code mẫu để gửi dữ liệu về server bằng 1 <code>XMLHttpRequest</code> đồng bộ trong khi xử lý <code>unload</code>. Điều này làm trễ việc tải trang tiếp theo.</p> - -<pre class="brush: js notranslate">window.addEventListener("unload", function logData() { - var xhr = new XMLHttpRequest(); - xhr.open("POST", "/log", false); // tham số thứ 3 là `false` để gửi request bất đồng bộ - xhr.send(analyticsData); -}); -</pre> - -<p>Đây là những gì <code><strong>sendBeacon()</strong></code> thay thế. Với phương thức <code>sendBeacon()</code>, dữ liệu sẽ được gửi đi bất đồng bộ, User Agent (trình duyệt) có thể làm thế mà không tạo trễ khi tải lại trang hoặc chuyển đến trang tiếp theo. <strong>Điều này giải quyết tất cả vấn đề với việc gửi các dữ liệu phân tích:</strong></p> - -<ul> - <li>Dữ liệu được gửi đi đáng tin cậy</li> - <li>Dữ liệu được gửi bất đồng bộ</li> - <li>Không ảnh hưởng đến việc tải trang tiếp theo</li> - <li>Hơn nữa, code đơn giản hơn so với tất cả các cách trước đây</li> -</ul> - -<p>Ví dụ sau đây là 1 đoạn code mẫu để gửi dữ liệu về server sử dụng phương thức <code style="">sendBeacon()</code>.</p> - -<pre class="brush: js notranslate">window.addEventListener("unload", function logData() { - navigator.sendBeacon("/log", analyticsData); -}); -</pre> - -<p>sendBeacon tạo 1 HTTP request với phương thức POST, kèm theo tất cả cookies liên quan khi được gọi.</p> - -<h2 id="Tài_liệu_chi_tiết">Tài liệu chi tiết</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Tài liệu</th> - <th scope="col">Trạng thái</th> - <th scope="col">Bình luận</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Beacon', '#sendbeacon-method', 'sendBeacon()')}}</td> - <td>{{Spec2('Beacon')}}</td> - <td>Định nghĩa đầu tiên</td> - </tr> - </tbody> -</table> - -<h2 id="Tương_thích_với_trình_duyệt">Tương thích với trình duyệt</h2> - - - -<p>{{Compat("api.Navigator.sendBeacon")}}</p> - -<h2 id="Xem_thêm">Xem thêm</h2> - -<ul> - <li>{{domxref("navigator", "navigator")}}</li> -</ul> diff --git a/files/vi/web/api/node/index.html b/files/vi/web/api/node/index.html deleted file mode 100644 index cf1f7cbe1f..0000000000 --- a/files/vi/web/api/node/index.html +++ /dev/null @@ -1,373 +0,0 @@ ---- -title: Node -slug: Web/API/Node -tags: - - API - - DOM - - DOM Reference - - NeedsTranslation - - Reference - - TopicStub - - WebAPI -translation_of: Web/API/Node ---- -<div>{{APIRef("DOM")}}</div> - -<p>A <strong><code>Node</code></strong> is an interface from which a number of DOM types inherit, and allows these various types to be treated (or tested) similarly.</p> - -<p>The following interfaces all inherit from <code>Node</code> its methods and properties: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} (which {{domxref("Text")}}, {{domxref("Comment")}}, and {{domxref("CDATASection")}} inherit), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}</p> - -<p>These interfaces may return null in particular cases where the methods and properties are not relevant. They may throw an exception - for example when adding children to a node type for which no children can exist.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>Inherits properties from its parents {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p> - -<dl> - <dt>{{domxref("Node.baseURI")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("DOMString")}} representing the base URL. The concept of base URL changes from one language to another; in HTML, it corresponds to the protocol, the domain name and the directory structure, that is all until the last <code>'/'</code>.</dd> - <dt>{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}}</dt> - <dd>(Not available to web content.) The read-only {{ Interface("nsIURI") }} object representing the base URI for the element.</dd> - <dt>{{domxref("Node.childNodes")}} {{readonlyInline}}</dt> - <dd>Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the <code>Node</code> change, the {{domxref("NodeList")}} object is automatically updated.</dd> - <dt>{{domxref("Node.firstChild")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("Node")}} representing the first direct child node of the node, or <code>null</code> if the node has no child.</dd> - <dt>{{domxref("Node.lastChild")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("Node")}} representing the last direct child node of the node, or <code>null</code> if the node has no child.</dd> - <dt>{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt> - <dd>Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element. In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML. {{ gecko_minversion_inline("1.9.2") }}<br> - Though recent specifications require <code>localName</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd> - <dt>{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt> - <dd>The namespace URI of this node, or <code>null</code> if it is no namespace. In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2") }}<br> - Though recent specifications require <code>namespaceURI</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd> - <dt>{{domxref("Node.nextSibling")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("Node")}} representing the next node in the tree, or <code>null</code> if there isn't such node.</dd> - <dt>{{domxref("Node.nodeName")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("DOMString")}} containing the name of the <code>Node</code>. The structure of the name will differ with the name type. E.g. An {{domxref("HTMLElement")}} will contain the name of the corresponding tag, like <code>'audio'</code> for an {{domxref("HTMLAudioElement")}}, a {{domxref("Text")}} node will have the <code>'#text'</code> string, or a {{domxref("Document")}} node will have the <code>'#document'</code> string.</dd> - <dt>{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}</dt> - <dd>A {{ Interface("nsIPrincipal") }} representing the node principal.</dd> - <dt>{{domxref("Node.nodeType")}}{{readonlyInline}}</dt> - <dd>Returns an <code>unsigned short</code> representing the type of the node. Possible values are: - <table class="standard-table"> - <tbody> - <tr> - <th scope="col">Name</th> - <th scope="col">Value</th> - </tr> - <tr> - <td><code>ELEMENT_NODE</code></td> - <td><code>1</code></td> - </tr> - <tr> - <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td> - <td><code>2</code></td> - </tr> - <tr> - <td><code>TEXT_NODE</code></td> - <td><code>3</code></td> - </tr> - <tr> - <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td> - <td><code>4</code></td> - </tr> - <tr> - <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td> - <td><code>5</code></td> - </tr> - <tr> - <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td> - <td><code>6</code></td> - </tr> - <tr> - <td><code>PROCESSING_INSTRUCTION_NODE</code></td> - <td><code>7</code></td> - </tr> - <tr> - <td><code>COMMENT_NODE</code></td> - <td><code>8</code></td> - </tr> - <tr> - <td><code>DOCUMENT_NODE</code></td> - <td><code>9</code></td> - </tr> - <tr> - <td><code>DOCUMENT_TYPE_NODE</code></td> - <td><code>10</code></td> - </tr> - <tr> - <td><code>DOCUMENT_FRAGMENT_NODE</code></td> - <td><code>11</code></td> - </tr> - <tr> - <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td> - <td><code>12</code></td> - </tr> - </tbody> - </table> - </dd> - <dt>{{domxref("Node.nodeValue")}}</dt> - <dd>Is a {{domxref("DOMString")}} representing the value of an object. For most <code>Node</code> types, this returns <code>null</code> and any set operation is ignored. For nodes of type <code>TEXT_NODE</code> ({{domxref("Text")}} objects), <code>COMMENT_NODE</code> ({{domxref("Comment")}} objects), and <code>PROCESSING_INSTRUCTION_NODE</code> ({{domxref("ProcessingInstruction")}} objects), the value corresponds to the text data contained in the object.</dd> - <dt>{{domxref("Node.ownerDocument")}} {{readonlyInline}}</dt> - <dd>Returns the {{domxref("Document")}} that this node belongs to. If no document is associated with it, returns <code>null</code>.</dd> - <dt>{{domxref("Node.parentNode")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns <code>null</code>.</dd> - <dt>{{domxref("Node.parentElement")}} {{readonlyInline}}</dt> - <dd>Returns an {{domxref("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{domxref("Element")}}, this property returns <code>null</code>.</dd> - <dt>{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt> - <dd>Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or <code>null</code> if no prefix is specified.<br> - Though recent specifications require <code>prefix</code> to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.</dd> - <dt>{{domxref("Node.previousSibling")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("Node")}} representing the previous node in the tree, or <code>null</code> if there isn't such node.</dd> - <dt>{{domxref("Node.textContent")}}</dt> - <dd>Is a {{domxref("DOMString")}} representing the textual content of an element and all its descendants.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>Inherits methods from its parents {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p> - -<dl> - <dt>{{domxref("Node.appendChild()")}}</dt> - <dd>Insert a {{domxref("Node")}} as the last child node of this element.</dd> - <dt>{{domxref("Node.cloneNode()")}}</dt> - <dd>Clone a {{domxref("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.</dd> - <dt>{{domxref("Node.compareDocumentPosition()")}}</dt> - <dd> </dd> - <dt>{{domxref("Node.contains()")}}</dt> - <dd> </dd> - <dt>{{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt> - <dd>...</dd> - <dt>{{domxref("Node.getUserData()")}} {{obsolete_inline}}</dt> - <dd>Allows a user to get some {{domxref("DOMUserData")}} from the node.</dd> - <dt>{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt> - <dd>Returns a {{domxref("Boolean")}} indicating if the element has any attributes, or not.</dd> - <dt>{{domxref("Node.hasChildNodes()")}}</dt> - <dd>Returns a {{domxref("Boolean")}} indicating if the element has any child nodes, or not.</dd> - <dt>{{domxref("Node.insertBefore()")}}</dt> - <dd>Inserts the first {{domxref("Node")}} given in a parameter immediately before the second, child of this element, {{domxref("Node")}}.</dd> - <dt>{{domxref("Node.isDefaultNamespace()")}}</dt> - <dd> </dd> - <dt>{{domxref("Node.isEqualNode()")}}</dt> - <dd> </dd> - <dt>{{domxref("Node.isSameNode()")}} {{obsolete_inline}}</dt> - <dd> </dd> - <dt>{{domxref("Node.isSupported()")}} {{obsolete_inline}}</dt> - <dd>Returns a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a> flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.</dd> - <dt>{{domxref("Node.lookupPrefix()")}}</dt> - <dd> </dd> - <dt>{{domxref("Node.lookupNamespaceURI()")}}</dt> - <dd> </dd> - <dt>{{domxref("Node.normalize()")}}</dt> - <dd>Clean up all the text nodes under this element (merge adjacent, remove empty).</dd> - <dt>{{domxref("Node.removeChild()")}}</dt> - <dd>Removes a child node from the current element, which must be a child of the current node.</dd> - <dt>{{domxref("Node.replaceChild()")}}</dt> - <dd>Replaces one child {{domxref("Node")}} of the current one with the second one given in parameter.</dd> - <dt>{{domxref("Node.setUserData()")}} {{obsolete_inline}}</dt> - <dd>Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.</dd> - <dd> </dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<h3 id="Browse_all_child_nodes">Browse all child nodes</h3> - -<p>The following function recursively cycles all child nodes of a node and executes a callback function upon them (and upon the parent node itself).</p> - -<pre class="brush: js">function DOMComb (oParent, oCallback) { - if (oParent.hasChildNodes()) { - for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) { - DOMComb(oNode, oCallback); - } - } - oCallback.call(oParent); -}</pre> - -<h4 id="Syntax">Syntax</h4> - -<pre>DOMComb(parentNode, callbackFunction);</pre> - -<h4 id="Description">Description</h4> - -<p>Recursively cycle all child nodes of <code>parentNode</code> and <code>parentNode</code> itself and execute the <code>callbackFunction</code> upon them as <a href="/en-US/docs/JavaScript/Reference/Operators/this" title="en-US/docs/JavaScript/Reference/Operators/this"><code>this</code></a> objects.</p> - -<h4 id="Parameters">Parameters</h4> - -<dl> - <dt><code>parentNode</code></dt> - <dd>The parent node (<code><strong>Node</strong> <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object" title="en-US/docs/JavaScript/Reference/Global_Objects/Object">Object</a></code>).</dd> - <dt><code>callbackFunction</code></dt> - <dd>The callback function (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>).</dd> -</dl> - -<h4 id="Sample_usage">Sample usage</h4> - -<p>The following example send to the <code>console.log</code> the text content of the body:</p> - -<pre class="brush: js">function printContent () { - if (this.nodeValue) { console.log(this.nodeValue); } -} - -onload = function () { - DOMComb(document.body, printContent); -};</pre> - -<h3 id="Remove_all_children_nested_within_a_node">Remove all children nested within a node</h3> - -<pre class="brush: js">Element.prototype.removeAll = function () { - while (this.firstChild) { this.removeChild(this.firstChild); } - return this; -};</pre> - -<h4 id="Sample_usage_2">Sample usage</h4> - -<pre class="brush: js">/* ... an alternative to document.body.innerHTML = "" ... */ -document.body.removeAll();</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Removed the following properties: <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br> - Removed the following methods: <code>isSupported()</code>, <code>hasAttributes()</code>, <code>isSameNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData()</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>The methods <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, and <code>appendChild()</code> returns one more kind of error (<code>NOT_SUPPORTED_ERR</code>) if called on a {{domxref("Document")}}.<br> - The <code>normalize()</code> method has been modified so that {{domxref("Text")}} node can also be normalized if the proper {{domxref("DOMConfiguration")}} flag is set.<br> - Added the following methods: <code>compareDocumentPosition()</code>, <code>isSameNode()</code>, <code>lookupPrefix()</code>, <code>isDefaultNamespace()</code>, <code>lookupNamespaceURI()</code>, <code>isEqualNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData().</code><br> - Added the following properties: <code>baseURI</code> and <code>textContent</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>The <code>ownerDocument</code> property was slightly modified so that {{domxref("DocumentFragment")}} also returns <code>null</code>.<br> - Added the following properties: <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br> - Added the following methods: <code>normalize()</code>, <code>isSupported()</code> and <code>hasAttributes()</code>.</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<p> </p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>getFeature()</code>{{obsolete_inline}}</td> - <td>{{CompatNo}}</td> - <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.<br> - Removed in {{CompatGeckoDesktop("7.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>getUserData()</code>, <code>setUserData()</code> and <code>hasAttributes()</code> {{deprecated_inline}}</td> - <td>{{CompatNo}}</td> - <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br> - Removed in {{CompatGeckoDesktop("22.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>isSameNode()</code> {{obsolete_inline}}</td> - <td>{{CompatNo}}</td> - <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("9.0")}}.<br> - Removed in {{CompatGeckoDesktop("10.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>isSupported()</code> {{obsolete_inline}}</td> - <td>{{CompatUnknown}}</td> - <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br> - Removed in {{CompatGeckoDesktop("22.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>attributes</code></td> - <td>{{CompatNo}}</td> - <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.<br> - Moved to {{domxref("Element")}} in {{CompatGeckoDesktop("22.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>getFeature()</code>{{obsolete_inline}}</td> - <td>{{CompatNo}}</td> - <td>Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.<br> - Removed in {{CompatGeckoDesktop("7.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Webkit and Blink incorrectly do not make <code>Node</code> inherit from {{domxref("EventTarget")}}.</p> diff --git a/files/vi/web/api/node/insertbefore/index.html b/files/vi/web/api/node/insertbefore/index.html deleted file mode 100644 index f60a35f3e7..0000000000 --- a/files/vi/web/api/node/insertbefore/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Node.insertBefore() -slug: Web/API/Node/insertBefore -translation_of: Web/API/Node/insertBefore ---- -<div>{{APIRef("DOM")}}</div> - -<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Phương thức </span></font><strong>Node.insertBefore()</strong></code> chèn một nút trước nút tài liệu tham khảo như một đối tượng con của một đối tượng gốc (đối tượng bố mẹ) cụ thể . Nếu đối tượng con đã cho là một tham chiếu tới tới một đối tượng node đang tồn tại trong tài liệu , <code>insertBefore()</code> chuyển nó từ vị trí hiện tại tới vị trí mới (không có yêu cầu nào phải xoá cái nút từ node gốc của nó trước khi thêm nó vào mấy nút khác).</p> - -<p>Vậy có nghĩa là một node thì không thể đồng thời ở tại hai điểm của tài liệu . Vậy, nếu node đã có nguồn gốc của nó rồi thì đối tượng node sẽ bị chuyển đi trước tiên rồi sau đó bị chèn vào ở vị trí mới . {{domxref("Node.cloneNode()")}} có thể được sử dụng để tạo một bản sao của đối tượng node trước khi thêm nó vào dưới phần tử gốc mới. Hãy lưu ý rằng những bản sao được tạo nên cùng <code>cloneNode()</code> sẽ không được tự động đồng bộ hoá.</p> - -<p>Nếu tài liệu ttham chiếu node là <code>null thì</code> node cụ thể được thêm vào đuôi của danh sách tập con của đối tượng node gốc.</p> - -<p>Nếu đối tượng con đã cho là một {{domxref("DocumentFragment")}} thì toàn bộ nội dung của <code>DocumentFragment</code> sẽ được chuyển đến danh sách tập con của đối tượng gốc cụ thể.</p> - -<h2 id="Cú_pháp">Cú pháp</h2> - -<pre class="syntaxbox">var <em>insertedNode</em> = <em>parentNode</em>.insertBefore(<em>newNode</em>, <em>referenceNode</em>); -</pre> - -<ul> - <li><code>insertedNode</code> đối tượng node đã bị chèn vào bởi <code>newNode</code></li> - <li><code>parentNode</code> đối tượng phần tử gốc mới được chèn node vào.</li> - <li><code>newNode</code> đối tượng node bị chèn</li> - <li><code>referenceNode</code> đối tượng node lúc trước mà <code>newNode</code> bị chèn vào.</li> -</ul> - -<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Nếu </span></font>referenceNode</code> là <code>null</code> thì <code>newNode</code> isẽ được chèn vào đuôi của danh sách các đối tượng tập con nodes .</p> - -<div class="note"> -<p><code>referenceNode</code> <strong>không phải </strong> là một tham số có thể tuỳ chọn -- bạn phải đưa ra một <code>Node</code> hoặc <code>null</code>. Việc cung cấp nó thất bại hoặc đưa ra những giá trị không hợp lệ có thể sẽ <a href="https://code.google.com/p/chromium/issues/detail?id=419780">behave</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=119489">differently</a>( hành xử khác nhau) trong mỗi phiên bản công cụ tìm kiếm khác nhau.</p> -</div> - -<h3 id="Return_value">Return value</h3> - -<p>Giá trị được trả về sẽ là một phần tử con trừ khi <code>newNode</code> là một {{domxref("DocumentFragment")}}, trong trường hợp {{domxref("DocumentFragment")}} rỗng được trả về.</p> - -<h2 id="Ví_dụ">Ví dụ</h2> - -<h3 id="Example_1">Example 1</h3> - -<pre class="brush: html"><div id="parentElement"> - <span id="childElement">foo bar</span> -</div> - -<script> -// Create the new node to insert -var newNode = document.createElement("span"); - -// Get a reference to the parent node -var parentDiv = document.getElementById("childElement").parentNode; - -// Begin test case [ 1 ] : Exist a childElement --> All working correctly -var sp2 = document.getElementById("childElement"); -parentDiv.insertBefore(newNode, sp2); -// End test case [ 1 ] - -// Begin test case [ 2 ] : childElement is of Type undefined -var sp2 = undefined; // Not exist a node of id "childElement" -parentDiv.insertBefore(newNode, sp2); // Implicit dynamic cast to type Node -// End test case [ 2 ] - -// Begin test case [ 3 ] : childElement is of Type "undefined" ( string ) -var sp2 = "undefined"; // Not exist a node of id "childElement" -parentDiv.insertBefore(newNode, sp2); // Generate "Type Error: Invalid Argument" -// End test case [ 3 ] -</script> -</pre> - -<h3 id="Example_2">Example 2</h3> - -<pre class="brush:html"><div id="parentElement"> - <span id="childElement">foo bar</span> -</div> - -<script> -// Create a new, plain <span> element -var sp1 = document.createElement("span"); - -// Get a reference to the element, before we want to insert the element -var sp2 = document.getElementById("childElement"); -// Get a reference to the parent element -var parentDiv = sp2.parentNode; - -// Insert the new element into the DOM before sp2 -parentDiv.insertBefore(sp1, sp2); -</script></pre> - -<p>Không hề có phương thức <span style="background-color: #ffffff; font-family: Arial,x-locale-body,sans-serif; font-size: 1rem; letter-spacing: -0.00278rem;"> </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">insertAfter()</code><span style="background-color: #ffffff; font-family: Arial,x-locale-body,sans-serif; font-size: 1rem; letter-spacing: -0.00278rem;"> nào cả. Nó có thể được mô phỏng bởi phương thức </span><code style="font-size: 1rem; letter-spacing: -0.00278rem;">insertBefore</code><span style="background-color: #ffffff; font-family: Arial,x-locale-body,sans-serif; font-size: 1rem; letter-spacing: -0.00278rem;"> cùng với {{domxref("Node.nextSibling")}}.</span></p> - -<p>Trong ví dụ trước, <code>sp1</code> đã chèn được vào sau <code>sp2</code> bằng cách dùng :</p> - -<pre class="brush: js"><code>parentDiv.insertBefore(sp1, sp2.nextSibling);</code></pre> - -<p>Nếu <code>sp2</code> không có đối tượng anh em nào tiếp nữa , thì nó hẳn phải là đối tượng con cuối cùng — <code>sp2.nextSibling</code> trả về <code>null</code>, và <code>sp1</code> sẽ được chèn vào cuối cùng của danh sách tập node con (ngay sau <code>sp2</code>).</p> - -<h3 id="Example_3">Example 3</h3> - -<p>Chèn một phần tử vào phần tử con đứng đầu bằng cách dùng đặc tính <a href="/en-US/docs/DOM/Node.firstChild" title="Node.firstChild">firstChild</a>.</p> - -<pre class="brush:js">// Get a reference to the element in which we want to insert a new node -var parentElement = document.getElementById('parentElement'); -// Get a reference to the first child -var theFirstChild = parentElement.firstChild; - -// Create a new element -var newElement = document.createElement("div"); - -// Insert the new element before the first child -parentElement.insertBefore(newElement, theFirstChild);</pre> - -<p class="brush:js">Khi phần tử không có con cả (đối tượng con đầu tiên) thì <code>firstChild</code> là <code>null</code>. Phần tử vẫn được thêm vào bố mẹ đối tượng gốc, sau con út (đối tượng con cuối cùng). Bởi bố mẹ không có con cả nên nó cũng không có con út luôn. Như vậy, phần tử mới sẽ là phần tử duy nhất sau việc chia cắt.</p> - -<h2 id="Khả_năng_tương_thích_của_công_cụ_tìm_kiếm">Khả năng tương thích của công cụ tìm kiếm</h2> - -<div class="hidden">Mục khả năng tương thích trên trang này được tạo bởi dữ liệu được kết cấu. Nếu bạn muốn đóng góp tới dữ liệu, xin hãy truy cập thử <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> và gửi một pull request cho chúng tôi.</div> - -<p>{{Compat("api.Node.insertBefore")}}</p> - -<h2 id="Chi_tiết">Chi tiết</h2> - -<table class="spectable standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Fixes errors in the insertion algorithm</td> - </tr> - <tr> - <td>{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}</td> - <td>{{Spec2('DOM4')}}</td> - <td>Describes the algorithm in more detail</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>No notable changes</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>No notable changes</td> - </tr> - <tr> - <td>{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>Introduced</td> - </tr> - </tbody> -</table> - -<h2 id="Xem_thêm">Xem thêm</h2> - -<ul> - <li>{{domxref("Node.removeChild()")}}</li> - <li>{{domxref("Node.replaceChild()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("Node.hasChildNodes()")}}</li> - <li>{{domxref("Element.insertAdjacentElement()")}}</li> - <li>{{domxref("ParentNode.prepend()")}}</li> -</ul> diff --git a/files/vi/web/api/node/parentelement/index.html b/files/vi/web/api/node/parentelement/index.html deleted file mode 100644 index 7e1e081325..0000000000 --- a/files/vi/web/api/node/parentelement/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Node.parentElement -slug: Web/API/Node/parentElement -tags: - - API - - Cần tương thích trình duyệt - - Mô hình Đối tượng Văn bản - - Nút - - Thuộc tính -translation_of: Web/API/Node/parentElement ---- -<div> -<div>{{APIRef("DOM")}}</div> -</div> - -<p>Thuộc tính chỉ-đọc <code><strong>Node.parentElement</strong></code> trả về cha của nút DOM {{domxref("Element")}}, hoặc<code>null</code> nếu nút không có cha hoặc cha của nó không là {{domxref("Element")}} DOM.</p> - -<h2 id="Syntax" name="Syntax">Cú pháp</h2> - -<pre class="syntaxbox"><em>parentElement</em> = <em>node</em>.parentElement</pre> - -<p><code>parentElement</code> là thành phần cha của nút hiện tại. Nó luôn luôn là một đối tượng {{domxref("Element")}} DOM, hoặc <code>null</code>.</p> - -<h2 id="Example" name="Example">Ví dụ</h2> - -<pre class="brush:js">if (node.parentElement) { - node.parentElement.style.color = "red"; -}</pre> - -<h2 id="Tương_thích_trình_duyệt">Tương thích trình duyệt</h2> - -<p>Trên một vài trình duyệt, thuộc tính <code>parentElement</code> chỉ được xác định trên những nút mà chính nó là một {{domxref("Element")}}. Đặc biệt, nó không xác định trên các nút văn bản.</p> - -<div> - - -<p>{{Compat("api.Node.parentElement")}}</p> -</div> - -<h2 id="Specification" name="Specification">Thông số</h2> - -<ul> - <li>{{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}</li> -</ul> - -<h2 id="See_also" name="See_also">Xem thêm</h2> - -<ul> - <li>{{domxref("Node.parentNode")}}</li> -</ul> diff --git a/files/vi/web/api/node/parentnode/index.html b/files/vi/web/api/node/parentnode/index.html deleted file mode 100644 index a93e4d8ac9..0000000000 --- a/files/vi/web/api/node/parentnode/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Node.parentNode -slug: Web/API/Node/parentNode -tags: - - API - - Gecko - - Mô hình Đối tượng Tài liệu - - Thuộc tính -translation_of: Web/API/Node/parentNode ---- -<div> -<div>{{APIRef("DOM")}}</div> -</div> - -<p> </p> - -<p>Thuộc tính chỉ-đọc <code><strong>Node.parentNode</strong></code> trả về cha của một nút xác định trong DOM.</p> - -<h2 id="Syntax" name="Syntax">Cú pháp</h2> - -<pre class="syntaxbox"><em>parentNode</em> = <em>node</em>.parentNode -</pre> - -<p><code>parentNode</code> là cha của nút hiện tại. Cha của một phần tử là một nút <code>Element</code>,một nút <code>Document</code>, hoặc một nút <code>DocumentFragment</code>.</p> - -<h2 id="Example" name="Example">Ví dụ</h2> - -<pre class="brush:js">if (node.parentNode) { - // loại bỏ một nút khỏi cây, trừ khi - // nó không nằm trong cây - node.parentNode.removeChild(node); -}</pre> - -<h2 id="Notes" name="Notes">Chú ý</h2> - -<p>Các <a href="/en-US/docs/DOM/Node.nodeType" title="DOM/Node.nodeType">nodes</a> <code>Document</code> và <code>DocumentFragment</code> có thể không có cha, vì vậy <code>parentNode</code> có thể luôn trả về giá trị <code>null</code>.</p> - -<p>Nó cũng trả về <code>null</code> nếu nút vừa được tạo và chưa được đính vào cây.</p> - -<h2 id="Tương_thích_trình_duyệt">Tương thích trình duyệt</h2> - - - -<p>{{Compat("api.Node.parentNode")}}</p> - -<h2 id="Specification" name="Specification">Thông số</h2> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1060184317">DOM Level 3 Core: Node.parentNode</a></li> -</ul> - -<h2 id="See_also" name="See_also">Xem thêm</h2> - -<ul> - <li>{{Domxref("Node.firstChild")}}</li> - <li>{{Domxref("Node.lastChild")}}</li> - <li>{{Domxref("Node.childNodes")}}</li> - <li>{{Domxref("Node.nextSibling")}}</li> - <li>{{Domxref("Node.parentElement")}}</li> - <li>{{Domxref("Node.previousSibling")}}</li> - <li>{{Domxref("Node.removeChild")}}</li> -</ul> diff --git a/files/vi/web/api/notification/index.html b/files/vi/web/api/notification/index.html deleted file mode 100644 index 829159b490..0000000000 --- a/files/vi/web/api/notification/index.html +++ /dev/null @@ -1,408 +0,0 @@ ---- -title: Notification -slug: Web/API/notification -translation_of: Web/API/Notification ---- -<p>{{APIRef("Web Notifications")}}</p> - -<p>The <code>Notification</code> interface of the <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> is used to configure and display desktop notifications to the user.</p> - -<p>{{AvailableInWorkers}}</p> - -<h2 id="Hàm_khởi_tạo">Hàm khởi tạo</h2> - -<dl> - <dt>{{domxref("Notification.Notification", "Notification()")}}</dt> - <dd>Creates a new instance of the {{domxref('Notification')}} object.</dd> -</dl> - -<h2 id="Properties">Properties</h2> - -<h3 id="Static_properties">Static properties</h3> - -<p>These properties are available only on the <code>Notification</code> object itself.</p> - -<dl> - <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt> - <dd>A string representing the current permission to display notifications. Possible value are: <code>denied</code> (the user refuses to have notifications displayed), <code>granted</code> (the user accepts having notifications displayed), or <code>default</code> (the user choice is unknown and therefore the browser will act as if the value were denied).</dd> -</dl> - -<h3 id="Instance_properties">Instance properties</h3> - -<p>These properties are available only on instances of the <code>Notification</code> object.</p> - -<dl> - <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt> - <dd>The title of the notification as specified in the options parameter of the constructor.</dd> - <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt> - <dd>The text direction of the notification as specified in the options parameter of the constructor.</dd> - <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt> - <dd>The language code of the notification as specified in the options parameter of the constructor.</dd> - <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt> - <dd>The body string of the notification as specified in the options parameter of the constructor.</dd> - <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt> - <dd>The ID of the notification (if any) as specified in the options parameter of the constructor.</dd> - <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt> - <dd>The URL of the image used as an icon of the notification as specified in the options parameter of the constructor.</dd> - <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt> - <dd>Returns a structured clone of the notification’s data.</dd> - <dt>{{domxref("Notification.requireInteraction")}} {{readonlyinline}}</dt> - <dd>A {{jsxref("Boolean")}} indicating that on devices with sufficiently large screens, a notification should remain active until the user clicks or dismisses it.</dd> - <dt>{{domxref("Notification.silent")}} {{readonlyinline}}</dt> - <dd>Specifies whether the notification should be silent, i.e. no sounds or vibrations should be issued, regardless of the device settings.</dd> - <dt>{{domxref("Notification.timestamp")}} {{readonlyinline}}</dt> - <dd>Specifies the time at which a notification is created or applicable (past, present, or future).</dd> -</dl> - -<h4 id="Unsupported_properties">Unsupported properties</h4> - -<p>The following properties are listed in the most up-to-date spec, but are not supported in any browsers yet. It is advisable to keep checking back regularly to see if the status of these has updated, and let us know if you find any out of date information.</p> - -<dl> - <dt>{{domxref("Notification.noscreen")}} {{readonlyinline}}</dt> - <dd>Specifies whether the notification firing should enable the device's screen or not.</dd> - <dt>{{domxref("Notification.renotify")}} {{readonlyinline}}</dt> - <dd>Specifies whether the user should be notified after a new notification replaces an old one.</dd> - <dt>{{domxref("Notification.sound")}} {{readonlyinline}}</dt> - <dd>Specifies a sound resource to play when the notification fires, in place of the default system notification sound.</dd> - <dt>{{domxref("Notification.sticky")}} {{readonlyinline}}</dt> - <dd>Specifies whether the notification should be 'sticky', i.e. not easily clearable by the user.</dd> - <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt> - <dd>Specifies a vibration pattern for devices with vibration hardware to emit.</dd> -</dl> - -<h4 id="Event_handlers">Event handlers</h4> - -<dl> - <dt>{{domxref("Notification.onclick")}}</dt> - <dd>A handler for the {{event("click")}} event. It is triggered each time the user clicks on the notification.</dd> - <dt>{{domxref("Notification.onerror")}}</dt> - <dd>A handler for the {{event("error")}} event. It is triggered each time the notification encounters an error.</dd> -</dl> - -<h4 id="Obsolete_handlers">Obsolete handlers</h4> - -<p>The following event handlers are still supported as listed in the {{anch("browser compatibility")}} section below, but are no longer listed in the current spec. I is safe therefore to assume they are obsolete, and may stop working in future browser versions.</p> - -<dl> - <dt>{{domxref("Notification.onclose")}}</dt> - <dd>A handler for the {{event("close")}} event. It is triggered when the user closes the notification.</dd> - <dt>{{domxref("Notification.onshow")}}</dt> - <dd>A handler for the {{event("show")}} event. It is triggered when the notification is displayed.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<h3 id="Static_methods">Static methods</h3> - -<p>These methods are available only on the <code>Notification</code> object itself.</p> - -<dl> - <dt>{{domxref("Notification.requestPermission()")}}</dt> - <dd>Requests permission from the user to display notifications.</dd> -</dl> - -<h3 id="Instance_methods">Instance methods</h3> - -<p>These properties are available only on an instance of the <code>Notification</code> object or through its <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain"><code>prototype</code></a>. The <code>Notification</code> object also inherits from the {{domxref("EventTarget")}} interface.</p> - -<dl> - <dt>{{domxref("Notification.close()")}}</dt> - <dd>Programmatically closes a notification.</dd> -</dl> - -<h2 id="Example">Example</h2> - -<p>Assume this basic HTML:</p> - -<pre class="brush: html"><button onclick="notifyMe()">Notify me!</button></pre> - -<p>It's possible to send a notification as follows — here we present a fairly verbose and complete set of code you could use if you wanted to first check whether notifications are supported, then check if permission has been granted for the current origin to send notifications, then request permission if required, before then sending a notification.</p> - -<pre class="brush: js">function notifyMe() { - // Let's check if the browser supports notifications - if (!("Notification" in window)) { - alert("This browser does not support desktop notification"); - } - - // Let's check whether notification permissions have already been granted - else if (Notification.permission === "granted") { - // If it's okay let's create a notification - var notification = new Notification("Hi there!"); - } - - // Otherwise, we need to ask the user for permission - else if (Notification.permission !== 'denied') { - Notification.requestPermission(function (permission) { - // If the user accepts, let's create a notification - if (permission === "granted") { - var notification = new Notification("Hi there!"); - } - }); - } - - // At last, if the user has denied notifications, and you - // want to be respectful there is no need to bother them any more. -}</pre> - -<p>{{EmbedLiveSample('Example', '100%', 30)}}</p> - -<p>In many cases, you don't need to be this verbose. For example, in our <a href="http://mdn.github.io/emogotchi/">Emogotchi demo</a> (<a href="https://github.com/mdn/emogotchi">see source code</a>), we simply run {{domxref("Notification.requestPermission")}} regardless to make sure we can get permission to send notifications (this uses the newer promise-based method syntax):</p> - -<pre class="brush: js">Notification.requestPermission().then(function(result) { - console.log(result); -});</pre> - -<p>Then we run a simple <code>spawnNotification()</code> function when we want to fire a notification — this is passed arguments to specify the body, icon and title we want, then it creates the necessary <code>options</code> object and fires the notification using the {{domxref("Notification.Notification","Notification()")}} constructor.</p> - -<pre class="brush: js">function spawnNotification(theBody,theIcon,theTitle) { - var options = { - body: theBody, - icon: theIcon - } - var n = new Notification(theTitle,options); -}</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Web Notifications')}}</td> - <td>{{Spec2('Web Notifications')}}</td> - <td>Living standard</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br> - 22</td> - <td>4.0 {{property_prefix("moz")}}<sup>[2]</sup><br> - 22</td> - <td>{{CompatNo}}</td> - <td>25</td> - <td>6<sup>[3]</sup></td> - </tr> - <tr> - <td><code>icon</code></td> - <td>5{{property_prefix("webkit")}}<sup>[1]</sup><br> - 22</td> - <td>4.0 {{property_prefix("moz")}}<sup>[2]</sup><br> - 22</td> - <td>{{CompatNo}}</td> - <td>25</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>Available in workers</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("41.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>silent</code></td> - <td>{{CompatChrome(43.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>noscreen</code>, <code>sticky</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>sound</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>renotify</code></td> - <td>{{CompatChrome(50.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>Promise-based <code>Notification.requestPermission()</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("47.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td> - <p>{{CompatVersionUnknown}}</p> - </td> - <td>4.0{{property_prefix("moz")}}<sup>[2]</sup><br> - 22</td> - <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br> - 1.2</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td> - <p>{{CompatVersionUnknown}}</p> - </td> - </tr> - <tr> - <td><code>icon</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>4.0{{property_prefix("moz")}}<sup>[2]</sup><br> - 22</td> - <td>1.0.1{{property_prefix("moz")}}<sup>[2]</sup><br> - 1.2</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Available in workers</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("41.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>silent</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(43.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(43.0)}}</td> - </tr> - <tr> - <td><code>noscreen</code>, <code>sticky</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>sound</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>renotify</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(50.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>Promise-based <code>Notification.requestPermission()</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("47.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Before Chrome 22, the support for notification followed an <a href="http://www.chromium.org/developers/design-documents/desktop-notifications/api-specification">old prefixed version of the specification</a> and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification.</p> - -<p>Before Chrome 32, {{domxref("Notification.permission")}} was not supported.</p> - -<p>Before Chrome 42, service worker additions were not supported.</p> - -<p>Starting in Chrome 49, notifications do not work in incognito mode.</p> - -<p>[2] Prior to Firefox 22 (Firefox OS <1.2), the instantiation of a new notification must be done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its <code>createNotification</code> method.</p> - -<p>Prior to Firefox 22 (Firefox OS <1.2), the Notification was displayed when calling the <code>show</code> method and supported only the <code>click</code> and <code>close</code> events.</p> - -<p>Nick Desaulniers wrote a <a href="https://github.com/nickdesaulniers/fxos-irc/blob/master/js/notification.js">Notification shim</a> to cover both newer and older implementations.</p> - -<p>One particular Firefox OS issue is that you can <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L171">pass a path to an icon</a> to use in the notification, but if the app is packaged you cannot use a relative path like <code>/my_icon.png</code>. You also can't use <code>window.location.origin + "/my_icon.png"</code> because <code>window.location.origin</code> is null in packaged apps. The <a href="https://developer.mozilla.org/en-US/Apps/Developing/Manifest#origin">manifest origin field</a> fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS <1.1 is to <a href="https://github.com/nickdesaulniers/fxos-irc/blob/0160cf6c3a2b5c9fe33822aaf6bcba3b7e846da9/my.js#L168">pass an absolute URL to an externally hosted version of the icon</a>. This is less than ideal as the notification is displayed immediately without the icon, then the icon is fetched, but it works on all versions of Firefox OS.</p> - -<p>When using notifications in a Firefox OS app, be sure to add the <code>desktop-notification</code> permission in your manifest file. Notifications can be used at any permission level, hosted or above: <code>"permissions": { "desktop-notification": {} }</code></p> - -<p>[3] Safari started to support notification with Safari 6, but only on Mac OSX 10.8+ (Mountain Lion).</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Using the Notifications API</a></li> -</ul> diff --git a/files/vi/web/api/touch_events/index.html b/files/vi/web/api/touch_events/index.html deleted file mode 100644 index f723a4f971..0000000000 --- a/files/vi/web/api/touch_events/index.html +++ /dev/null @@ -1,340 +0,0 @@ ---- -title: Touch events -slug: Web/API/Touch_events -tags: - - Advanced - - DOM - - Event - - Guide - - Mobile - - NeedsTranslation - - Overview - - TopicStub - - touch -translation_of: Web/API/Touch_events ---- -<div>{{DefaultAPISidebar("Touch Events")}}</div> - -<p><span class="seoSummary">In order to provide quality support for touch-based user interfaces, touch events offer the ability to interpret finger (or stylus) activity on touch screens or trackpads.</span></p> - -<p>The touch events interfaces are relatively low-level APIs that can be used to support application specific multi-touch interactions such as a two-finger gesture. A multi-touch interaction starts when a finger (or stylus) first touches the contact surface. Other fingers may subsequently touch the surface and optionally move across the touch surface. The interaction ends when the fingers are removed from the surface. During this interaction, an application receives touch events during the start, move and end phases.</p> - -<p>Touch events are similar to mouse events except they support simultaneous touches and at different locations on the touch surface. The {{domxref("TouchEvent")}} interface encapsulates all of the touch points that are currently active. The {{domxref("Touch")}} interface, which represents a single touch point, includes information such as the position of the touch point relative to the browser viewport.</p> - -<h2 id="Definitions">Definitions</h2> - -<dl> - <dt>Surface</dt> - <dd>The touch-sensitive surface. This may be a screen or trackpad.</dd> -</dl> - -<dl> - <dt>Touch point</dt> - <dd>A point of contact with the surface. This may be a finger (or elbow, ear, nose, whatever, but typically a finger) or stylus.</dd> -</dl> - -<h2 id="Interfaces">Interfaces</h2> - -<dl> - <dt>{{domxref("TouchEvent")}}</dt> - <dd>Represents an event that occurs when the state of touches on the surface changes.</dd> - <dt>{{domxref("Touch")}}</dt> - <dd>Represents a single point of contact between the user and the touch surface.</dd> - <dt>{{domxref("TouchList")}}</dt> - <dd>Represents a group of touches; this is used when the user has, for example, multiple fingers on the surface at the same time.</dd> -</dl> - -<h2 id="Example">Example</h2> - -<p>This example tracks multiple touch points at a time, allowing the user to draw in a {{HTMLElement("canvas")}} with more than one finger at a time. It will only work on a browser that supports touch events.</p> - -<div class="note"><strong>Note:</strong> The text below uses the term "finger" when describing the contact with the surface, but it could, of course, also be a stylus or other contact method.</div> - -<h3 id="Create_a_canvas">Create a canvas</h3> - -<pre class="brush: html"><canvas id="canvas" width="600" height="600" style="border:solid black 1px;"> - Your browser does not support canvas element. -</canvas> -<br> -<button onclick="startup()">Initialize</button> -<br> -Log: <pre id="log" style="border: 1px solid #ccc;"></pre> -</pre> - -<h3 id="Setting_up_the_event_handlers">Setting up the event handlers</h3> - -<p>When the page loads, the <code>startup()</code> function shown below should be called by our {{HTMLElement("body")}} element's <code>onload</code> attribute (but in the example we use a button to trigger it, due to limitations of the MDN live example system).</p> - -<pre class="brush: js">function startup() { - var el = document.getElementsByTagName("canvas")[0]; - el.addEventListener("touchstart", handleStart, false); - el.addEventListener("touchend", handleEnd, false); - el.addEventListener("touchcancel", handleCancel, false); - el.addEventListener("touchmove", handleMove, false); - console.log("initialized."); -} -</pre> - -<p>This simply sets up all the event listeners for our {{HTMLElement("canvas")}} element so we can handle the touch events as they occur.</p> - -<h4 id="Tracking_new_touches">Tracking new touches</h4> - -<p>We'll keep track of the touches in-progress.</p> - -<pre class="brush: js">var ongoingTouches = []; -</pre> - -<p>When a {{event("touchstart")}} event occurs, indicating that a new touch on the surface has occurred, the <code>handleStart()</code> function below is called.</p> - -<pre class="brush: js">function handleStart(evt) { - evt.preventDefault(); - console.log("touchstart."); - var el = document.getElementsByTagName("canvas")[0]; - var ctx = el.getContext("2d"); - var touches = evt.changedTouches; - - for (var i = 0; i < touches.length; i++) { - console.log("touchstart:" + i + "..."); - ongoingTouches.push(copyTouch(touches[i])); - var color = colorForTouch(touches[i]); - ctx.beginPath(); - ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0, 2 * Math.PI, false); // a circle at the start - ctx.fillStyle = color; - ctx.fill(); - console.log("touchstart:" + i + "."); - } -} -</pre> - -<p>This calls {{domxref("event.preventDefault()")}} to keep the browser from continuing to process the touch event (this also prevents a mouse event from also being delivered). Then we get the context and pull the list of changed touch points out of the event's {{domxref("TouchEvent.changedTouches")}} property.</p> - -<p>After that, we iterate over all the {{domxref("Touch")}} objects in the list, pushing them onto an array of active touch points and drawing the start point for the draw as a small circle; we're using a 4-pixel wide line, so a 4 pixel radius circle will show up neatly.</p> - -<h4 id="Drawing_as_the_touches_move">Drawing as the touches move</h4> - -<p>Each time one or more fingers moves, a {{event("touchmove")}} event is delivered, resulting in our <code>handleMove()</code> function being called. Its responsibility in this example is to update the cached touch information and to draw a line from the previous position to the current position of each touch.</p> - -<pre class="brush: js">function handleMove(evt) { - evt.preventDefault(); - var el = document.getElementsByTagName("canvas")[0]; - var ctx = el.getContext("2d"); - var touches = evt.changedTouches; - - for (var i = 0; i < touches.length; i++) { - var color = colorForTouch(touches[i]); - var idx = ongoingTouchIndexById(touches[i].identifier); - - if (idx >= 0) { - console.log("continuing touch "+idx); - ctx.beginPath(); - console.log("ctx.moveTo(" + ongoingTouches[idx].pageX + ", " + ongoingTouches[idx].pageY + ");"); - ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY); - console.log("ctx.lineTo(" + touches[i].pageX + ", " + touches[i].pageY + ");"); - ctx.lineTo(touches[i].pageX, touches[i].pageY); - ctx.lineWidth = 4; - ctx.strokeStyle = color; - ctx.stroke(); - - ongoingTouches.splice(idx, 1, copyTouch(touches[i])); // swap in the new touch record - console.log("."); - } else { - console.log("can't figure out which touch to continue"); - } - } -} -</pre> - -<p>This iterates over the changed touches as well, but it looks in our cached touch information array for the previous information about each touch in order to determine the starting point for each touch's new line segment to be drawn. This is done by looking at each touch's {{domxref("Touch.identifier")}} property. This property is a unique integer for each touch, and remains consistent for each event during the duration of each finger's contact with the surface.</p> - -<p>This lets us get the coordinates of the previous position of each touch and use the appropriate context methods to draw a line segment joining the two positions together.</p> - -<p>After drawing the line, we call <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice"><code>Array.splice()</code></a> to replace the previous information about the touch point with the current information in the <code>ongoingTouches</code> array.</p> - -<h4 id="Handling_the_end_of_a_touch">Handling the end of a touch</h4> - -<p>When the user lifts a finger off the surface, a {{event("touchend")}} event is sent. We handle this by calling the <code>handleEnd()</code> function below. Its job is to draw the last line segment for each touch that ended and remove the touch point from the ongoing touch list.</p> - -<pre class="brush: js">function handleEnd(evt) { - evt.preventDefault(); - log("touchend"); - var el = document.getElementsByTagName("canvas")[0]; - var ctx = el.getContext("2d"); - var touches = evt.changedTouches; - - for (var i = 0; i < touches.length; i++) { - var color = colorForTouch(touches[i]); - var idx = ongoingTouchIndexById(touches[i].identifier); - - if (idx >= 0) { - ctx.lineWidth = 4; - ctx.fillStyle = color; - ctx.beginPath(); - ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY); - ctx.lineTo(touches[i].pageX, touches[i].pageY); - ctx.fillRect(touches[i].pageX - 4, touches[i].pageY - 4, 8, 8); // and a square at the end - ongoingTouches.splice(idx, 1); // remove it; we're done - } else { - console.log("can't figure out which touch to end"); - } - } -} -</pre> - -<p>This is very similar to the previous function; the only real differences are that we draw a small square to mark the end and that when we call <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice"><code>Array.splice()</code></a>, we simply remove the old entry from the ongoing touch list, without adding in the updated information. The result is that we stop tracking that touch point.</p> - -<h4 id="Handling_canceled_touches">Handling canceled touches</h4> - -<p>If the user's finger wanders into browser UI, or the touch otherwise needs to be canceled, the {{event("touchcancel")}} event is sent, and we call the <code>handleCancel()</code> function below.</p> - -<pre class="brush: js">function handleCancel(evt) { - evt.preventDefault(); - console.log("touchcancel."); - var touches = evt.changedTouches; - - for (var i = 0; i < touches.length; i++) { - var idx = ongoingTouchIndexById(touches[i].identifier); - ongoingTouches.splice(idx, 1); // remove it; we're done - } -} -</pre> - -<p>Since the idea is to immediately abort the touch, we simply remove it from the ongoing touch list without drawing a final line segment.</p> - -<h3 id="Convenience_functions">Convenience functions</h3> - -<p>This example uses two convenience functions that should be looked at briefly to help make the rest of the code more clear.</p> - -<h4 id="Selecting_a_color_for_each_touch">Selecting a color for each touch</h4> - -<p>In order to make each touch's drawing look different, the <code>colorForTouch()</code> function is used to pick a color based on the touch's unique identifier. This identifier is an opaque number, but we can at least rely on it differing between the currently-active touches.</p> - -<pre class="brush: js">function colorForTouch(touch) { - var r = touch.identifier % 16; - var g = Math.floor(touch.identifier / 3) % 16; - var b = Math.floor(touch.identifier / 7) % 16; - r = r.toString(16); // make it a hex digit - g = g.toString(16); // make it a hex digit - b = b.toString(16); // make it a hex digit - var color = "#" + r + g + b; - console.log("color for touch with identifier " + touch.identifier + " = " + color); - return color; -} -</pre> - -<p>The result from this function is a string that can be used when calling {{HTMLElement("canvas")}} functions to set drawing colors. For example, for a {{domxref("Touch.identifier")}} value of 10, the resulting string is "#aaa".</p> - -<h4 id="Copying_a_touch_object">Copying a touch object</h4> - -<p>Some browsers (mobile Safari, for one) re-use touch objects between events, so it's best to copy the bits you care about, rather than referencing the entire object.</p> - -<pre class="brush: js">function copyTouch(touch) { - return { identifier: touch.identifier, pageX: touch.pageX, pageY: touch.pageY }; -}</pre> - -<h4 id="Finding_an_ongoing_touch">Finding an ongoing touch</h4> - -<p>The <code>ongoingTouchIndexById()</code> function below scans through the <code>ongoingTouches</code> array to find the touch matching the given identifier, then returns that touch's index into the array.</p> - -<pre class="brush: js">function ongoingTouchIndexById(idToFind) { - for (var i = 0; i < ongoingTouches.length; i++) { - var id = ongoingTouches[i].identifier; - - if (id == idToFind) { - return i; - } - } - return -1; // not found -} -</pre> - -<h4 id="Showing_what's_going_on">Showing what's going on</h4> - -<pre class="brush: js">function log(msg) { - var p = document.getElementById('log'); - p.innerHTML = msg + "\n" + p.innerHTML; -}</pre> - -<p>If your browser supports it, you can {{LiveSampleLink('Example', 'see it live')}}.</p> - -<p><a href="http://jsfiddle.net/Darbicus/z3Xdx/10/">jsFiddle example</a></p> - -<h2 id="Additional_tips">Additional tips</h2> - -<p>This section provides additional tips on how to handle touch events in your web application.</p> - -<h3 id="Handling_clicks">Handling clicks</h3> - -<p>Since calling <code>preventDefault()</code> on a {{event("touchstart")}} or the first {{event("touchmove")}} event of a series prevents the corresponding mouse events from firing, it's common to call <code>preventDefault()</code> on {{event("touchmove")}} rather than {{event("touchstart")}}. That way, mouse events can still fire and things like links will continue to work. Alternatively, some frameworks have taken to refiring touch events as mouse events for this same purpose. (This example is oversimplified and may result in strange behavior. It is only intended as a guide.)</p> - -<pre class="brush: js">function onTouch(evt) { - evt.preventDefault(); - if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0)) - return; - - var newEvt = document.createEvent("MouseEvents"); - var type = null; - var touch = null; - - switch (evt.type) { - case "touchstart": - type = "mousedown"; - touch = evt.changedTouches[0]; - break; - case "touchmove": - type = "mousemove"; - touch = evt.changedTouches[0]; - break; - case "touchend": - type = "mouseup"; - touch = evt.changedTouches[0]; - break; - } - - newEvt.initMouseEvent(type, true, true, evt.originalTarget.ownerDocument.defaultView, 0, - touch.screenX, touch.screenY, touch.clientX, touch.clientY, - evt.ctrlKey, evt.altKey, evt.shiftKey, evt.metaKey, 0, null); - evt.originalTarget.dispatchEvent(newEvt); -} -</pre> - -<h3 id="Calling_preventDefault()_only_on_a_second_touch">Calling preventDefault() only on a second touch</h3> - -<p>One technique for preventing things like <code>pinchZoom</code> on a page is to call <code>preventDefault()</code> on the second touch in a series. This behavior is not well defined in the touch events spec, and results in different behavior for different browsers (i.e., iOS will prevent zooming but still allow panning with both fingers; Android will allow zooming but not panning; Opera and Firefox currently prevent all panning and zooming.) Currently, it's not recommended to depend on any particular behavior in this case, but rather to depend on meta viewport to prevent zooming.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Touch Events 2', '#touch-interface', 'Touch')}}</td> - <td>{{Spec2('Touch Events 2')}}</td> - <td>Added <code>radiusX</code>, <code>radiusY</code>, <code>rotationAngle</code>, <code>force</code> properties</td> - </tr> - <tr> - <td>{{SpecName('Touch Events', '#touch-interface', 'Touch')}}</td> - <td>{{Spec2('Touch Events')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<h3 id="Touch"><code>Touch</code></h3> - - - -<p>{{Compat("api.Touch")}}</p> - -<h3 id="Firefox_touch_events_and_multiprocess_(e10s)">Firefox, touch events, and multiprocess (e10s)</h3> - -<p>In Firefox, touch events are disabled when e10s (electrolysis; <a href="/en-US/docs/Mozilla/Firefox/Multiprocess_Firefox">multiprocess Firefox</a>) is disabled. e10s is on by default in Firefox, but can end up becoming disabled in certain situations, for example when certain accessibility tools or Firefox add-ons are installed that require e10s to be disabled to work. This means that even on a touchscreen-enabled desktop/laptop, touch events won't be enabled.</p> - -<p>You can test whether e10s is disabled by going to <code>about:support</code> and looking at the "Multiprocess Windows" entry in the "Application Basics" section. 1/1 means it is enabled, 0/1 means disabled.</p> - -<p>If you want to force e10s to be on — to explicitly re-enable touch events support — you need to go to <code>about:config</code> and create a new Boolean preference <code>browser.tabs.remote.force-enable</code>. Set it to <code>true</code>, restart the browser, and e10s will be enabled regardless of any other settings.</p> diff --git a/files/vi/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html b/files/vi/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html deleted file mode 100644 index 33ca3f4490..0000000000 --- a/files/vi/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Supporting both TouchEvent and MouseEvent -slug: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent -translation_of: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent ---- -<p>{{DefaultAPISidebar("Touch Events")}}</p> - -<p>{{domxref("Touch_events","touch")}} interface cho phép cung cấp các tương tác với ứng dụng trên thiết bị. Tuy nhiên, sự thật là đa số các web hiện tại được thiết kế để làm việc với trỏ chuột. Thậm chí, khi trình duyệt hổ trợ touch, trình duyệt vẫn phải <em>giả lập</em> sự kiện của chuột.</p> - -<h2 id="Event_firing">Event firing</h2> - -<p>Touch event đưa ra vài yêu cầu cho trình duyệt (xem <a href="https://w3c.github.io/touch-events/#mouse-events"><em>Interaction with Mouse Events and click</em></a> để xem chi tiết), lưu ý răng <em>trình duyệt có thể fire cả 2 sự kiện touch và mouse để đáp lại cùng một tương tác của user</em>. </p> - -<p>Nếu trình duyệt fire cả 2 sự kiện touch và mouse cho cùng tương tác, trình duyệt <em>phải </em> fire {{event("touchstart")}} trước khi fire sự kiện mouse. Vì vậy, nếu ứng dụng không muốn sử dụng sự kiện mouse trên một element {{domxref("Touch.target","target")}}, chúng ta phải gọi {{domxref("Event.preventDefault()","preventDefault()")}}.</p> - -<p>Đây là một snippet code dùng {{event("touchmove")}} event handler và gọi <code>preventDefault()</code>.</p> - -<pre class="brush: js">// touchmove handler -function process_touchmove(ev) { - // Call preventDefault() to prevent any further handling - ev.preventDefault(); -} -</pre> - -<h2 id="Thứ_tự_Event">Thứ tự Event</h2> - -<p>Thứ tự của các sự kiện touch và mouse được định nghĩa như sau:</p> - -<ul> - <li><code>touchstart</code></li> - <li>Zero hoặc các sự kiện <code>touchmove</code> tiếp tục, tùy thuộc user có tiếp tục kéo ngón tay không</li> - <li><code>touchend</code></li> - <li><code>mousemove</code></li> - <li><code>mousedown</code></li> - <li><code>mouseup</code></li> - <li><code>click</code></li> -</ul> - -<p>Nếu {{event("touchstart")}}, {{event("touchmove")}} hoặc {{event("touchend")}} được hủy, sẽ không có sự mouse hoặc click nào được fire, thứ tự sẽ là:</p> - -<ul> - <li><code>touchstart</code></li> - <li>Zero hoặc các sự kiện <code>touchmove</code> tiếp tục, tùy thuộc user có tiếp tục kéo ngón tay không</li> - <li><code>touchend</code></li> -</ul> - -<h2 id="Community">Community</h2> - -<ul> - <li><a href="https://github.com/w3c/touch-events">Touch Events Community Group</a></li> - <li><a href="https://lists.w3.org/Archives/Public/public-touchevents/">Mail list</a></li> - <li><a href="irc://irc.w3.org:6667/">W3C #touchevents IRC channel</a></li> -</ul> - -<h2 id="Related_topics_and_resources">Related topics and resources</h2> - -<ul> - <li><a href="/Web/API/Touch_events">Touch Events Overview</a></li> - <li><a href="/Web/API/Touch_events/Using_Touch_Events">Using Touch Events</a></li> - <li><a href="http://www.html5rocks.com/en/mobile/touchandmouse/">Touch and Mouse (Together Again for the First Time)</a></li> -</ul> diff --git a/files/vi/web/api/url_api/index.html b/files/vi/web/api/url_api/index.html deleted file mode 100644 index 71626f5c4a..0000000000 --- a/files/vi/web/api/url_api/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: URL API -slug: Web/API/URL_API -translation_of: Web/API/URL_API ---- -<p>{{DefaultAPISidebar("URL API")}}</p> - -<p><span class="seoSummary">The URL API is a component of the URL standard, which defines what constitutes a valid {{Glossary("URL", "Uniform Resource Locator")}} and the API that accesses and manipulates URLs.</span> The URL standard also defines concepts such as domains, hosts, and IP addresses, and also attempts to describe in a standard way the legacy <code>application/x-www-form-urlencoded</code> {{Glossary("MIME type")}} used to submit web forms' contents as a set of key/value pairs.</p> - -<h2 id="Mô_hình_URL_và_cách_sử_dụng">Mô hình URL và cách sử dụng</h2> - -<p><span class="tlid-translation translation" lang="vi"><span title="">Phần lớn tiêu chuẩn URL được lấy theo <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL">định nghĩa của URL</a> cùng cấu trúc và phân tích cú pháp.</span> <span title="">Nó cũng bao gồm các định nghĩa về các thuật ngữ khác nhau liên quan đến việc đánh địa chỉ các máy tính trên mạng, các thuật toán để phân tích địa chỉ IP và địa chỉ DOM được chỉ định.</span></span></p> - -<h3 id="Truy_cập_component_URL">Truy cập component URL</h3> - -<p>Tạo object {{domxref("URL")}} <span class="tlid-translation translation" lang="vi"><span title="">đối với một URL đã cho sẽ phân tích cú pháp URL và cung cấp quyền truy cập nhanh vào các thành phần của nó.</span></span></p> - -<pre class="brush: js notranslate">let addr = new URL("https://wiki.developer.mozilla.org/vi/docs/Web/API/URL_API"); -let host = addr.host; -let path = addr.pathname; -</pre> - -<p>Mã trên tạo ra 1 object <code>URL</code> cho bài viết bạn đang đọc, rồi lấy thuộc tính {{domxref("URL.host", "host")}} và {{domxref("URL.pathname", "pathname")}}. Trong tình huống trên, các giá trị tương ứng lần lượt là <code>wiki.developer.mozilla.org</code> và <code>/vi/docs/Web/API/URL_API</code>.</p> - -<h3 id="Thay_đổi_URL">Thay đổi URL</h3> - -<p><span class="tlid-translation translation" lang="vi"><span title="">Hầu hết các thuộc tính của URL là cố định;</span> <span title="">bạn có thể viết các giá trị mới cho chúng để thay đổi URL.</span> <span title="">Ví dụ: để tạo URL mới và đặt tên người dùng:</span></span></p> - -<pre class="brush: js notranslate">let myUsername = "someguy"; -let addr = new URL("https://mysite.com/login"); -addr.username = myUsername; -</pre> - -<p>Đặt giá trị của {{domxref("URL.username", "username")}} không chỉ thay đổi giá trị của thuộc tính, mà còn thay đổi cả đường dẫn URL. Sau khi thực thi đoạn code, giá trị trả về của {{domxref("URL.href", "addr.href")}} là <code>https://someguy@mysite.com/login</code>. Điều này đúng với mọi thuộc tính có thể ghi.</p> - -<h3 id="Truy_vấn">Truy vấn</h3> - -<p>Thuộc tính {{domxref("URL.search", "search")}} trong <code>URL</code> chứa các giá trị truy vấn của URL. Lấy ví dụ, nếu đường dẫn URL là <code>https://mysite.com/login?user=someguy&page=news</code>, thì giá trị của thuộc tính <code>search</code> là <code>?user=someguy&page=news</code>. Bạn có thể kiểm tra các giá trị của mỗi tham số với {{domxref("URLSearchParams")}} là object của phương thức {{domxref("URLSearchParams.get", "get()")}}:</p> - -<pre class="brush: js notranslate">let addr = new URL("https://mysite.com/login?user=someguy&page=news"); -try { - loginUser(addr.searchParams.get("user")); - gotoPage(addr.searchParams.get("page")); -} catch(err) { - showErrorMessage(err); -} -</pre> - -<p>Với ví dụ trên, username và trang đích được lấy từ query và chuyển vào trong function được dùng để điều hướng người dùng đăng nhập và chuyển tới trang đích mong muốn.</p> - -<p>Other functions within <code>URLSearchParams</code> let you change the value of keys, add and delete keys and their values, and even sort the list of parameters.</p> - -<h2 id="URL_API_interfaces">URL API interfaces</h2> - -<p>The URL API is a simple one, with only a couple of interfaces to its name:</p> - -<div class="index"> -<ul> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/URL"><code>URL</code></a></span></span></li> - <li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/URLSearchParams"><code>URLSearchParams</code></a></span></span></li> -</ul> -</div> - -<p>Older versions of the specification included an interface called {{domxref("URLUtilsReadOnly")}}, which has since been merged into the {{domxref("WorkerLocation")}} interface.</p> - -<h2 id="Ví_dụ">Ví dụ</h2> - -<p>If you want to process the parameters included in a URL, you could do it manually, but it's much easier to create a <code>URL</code> object to do it for you. The <code>fillTableWithParameters()</code> function below takes as input a {{domxref("HTMLTableElement")}} object representing a {{HTMLElement("table")}}. Rows are added to the table, one for each key found in the parameters, with the first column containing the key's name, and the second column having the value.</p> - -<p>Note the call to {{domxref("URLSearchParams.sort()")}} to sort the parameter list before generating the table.</p> - -<pre class="brush: js notranslate">function fillTableWithParameters(tbl) { - let url = new URL(document.location.href); - url.searchParams.sort(); - let keys = url.searchParams.keys(); - - for (let key of keys) { - let val = url.searchParams.get(key); - let row = document.createElement("tr"); - let cell = document.createElement("td"); - cell.innerText = key; - row.appendChild(cell); - cell = document.createElement("td"); - cell.innerText = val; - row.appendChild(cell); - tbl.appendChild(row); - }; -}</pre> - -<p>A working version of this example can be <a href="https://url-api.glitch.me">found on Glitch</a>. Just add parameters to the URL when loading the page to see them in the table. For instance, try <code><a href="https://url-api.glitch.me?from=mdn&excitement=high&likelihood=inconceivable">https://url-api.glitch.me?from=mdn&excitement=high&likelihood=inconceivable</a></code>.</p> - -<h2 id="Quy_chuẩn">Quy chuẩn</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('URL')}}</td> - <td>{{Spec2('URL')}}</td> - <td>WHATWG specification</td> - </tr> - </tbody> -</table> - -<h2 id="Tương_thích_trình_duyệt">Tương thích trình duyệt</h2> - -<div> - - -<p>{{Compat("api.URL")}}</p> -</div> - -<h2 id="Xem_thêm">Xem thêm</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li> - <li>CSS {{cssxref("<url>")}} type</li> -</ul> diff --git a/files/vi/web/api/webrtc_api/index.html b/files/vi/web/api/webrtc_api/index.html deleted file mode 100644 index 508df4945f..0000000000 --- a/files/vi/web/api/webrtc_api/index.html +++ /dev/null @@ -1,233 +0,0 @@ ---- -title: WebRTC API -slug: Web/API/WebRTC_API -tags: - - API - - Audio - - Conferencing - - Landing - - Media - - NeedsTranslation - - Networking - - TopicStub - - Video - - WebRTC - - WebRTC API - - streaming -translation_of: Web/API/WebRTC_API ---- -<div>{{WebRTCSidebar}}</div> - -<p><span class="seoSummary"><strong>WebRTC</strong> (Web Real-Time Communication) is a technology which enables Web applications and sites to capture and optionally stream audio and/or video media, as well as to exchange arbitrary data between browsers without requiring an intermediary.</span> The set of standards that comprise WebRTC makes it possible to share data and perform teleconferencing peer-to-peer, without requiring that the user installs plug-ins or any other third-party software.</p> - -<p>WebRTC consists of several interrelated APIs and protocols which work together to achieve this. The documentation you'll find here will help you understand the fundamentals of WebRTC, how to set up and use both data and media connections, and more.</p> - -<h2 id="Interoperability">Interoperability</h2> - -<p>Because implementations of WebRTC are still evolving, and because each browser has <a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">different levels of support for codecs</a> and WebRTC features, you should <em>strongly</em> consider making use of <a href="https://github.com/webrtcHacks/adapter">the Adapter.js library</a> provided by Google before you begin to write your code.</p> - -<p>Adapter.js uses shims and polyfills to smooth over the differences among the WebRTC implementations across the environments supporting it. Adapter.js also handles prefixes and other naming differences to make the entire WebRTC development process easier, with more broadly compatible results. The library is also <a href="https://www.npmjs.com/package/webrtc-adapter">available as an NPM package</a>.</p> - -<p>To learn more about Adapter.js, see <a href="/en-US/docs/Web/API/WebRTC_API/adapter.js">Improving compatibility using WebRTC adapter.js</a>.</p> - -<h2 id="WebRTC_concepts_and_usage">WebRTC concepts and usage</h2> - -<p>WebRTC serves multiple purposes; together with the <a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a>, they provide powerful multimedia capabilities to the Web, including support for audio and video conferencing, file exchange, screen sharing, identity management, and interfacing with legacy telephone systems including support for sending {{Glossary("DTMF")}} (touch-tone dialing) signals. Connections between peers can be made without requiring any special drivers or plug-ins, and can often be made without any intermediary servers.</p> - -<p>Connections between two peers are represented by the {{DOMxRef("RTCPeerConnection")}} interface. Once a connection has been established and opened using <code>RTCPeerConnection</code>, media streams ({{DOMxRef("MediaStream")}}s) and/or data channels ({{DOMxRef("RTCDataChannel")}}s) can be added to the connection.</p> - -<p>Media streams can consist of any number of tracks of media information; tracks, which are represented by objects based on the {{DOMxRef("MediaStreamTrack")}} interface, may contain one of a number of types of media data, including audio, video, and text (such as subtitles or even chapter names). Most streams consist of at least one audio track and likely also a video track, and can be used to send and receive both live media or stored media information (such as a streamed movie).</p> - -<p>You can also use the connection between two peers to exchange arbitrary binary data using the {{DOMxRef("RTCDataChannel")}} interface. This can be used for back-channel information, metadata exchange, game status packets, file transfers, or even as a primary channel for data transfer.</p> - -<p><em><strong>more details and links to relevant guides and tutorials needed</strong></em></p> - -<h2 id="WebRTC_interfaces">WebRTC interfaces</h2> - -<p>Because WebRTC provides interfaces that work together to accomplish a variety of tasks, we have divided up the interfaces in the list below by category. Please see the sidebar for an alphabetical list.</p> - -<h3 id="Connection_setup_and_management">Connection setup and management</h3> - -<p>These interfaces are used to set up, open, and manage WebRTC connections. Included are interfaces representing peer media connections, data channels, and interfaces used when exchanging information on the capabilities of each peer in order to select the best possible configuration for a two-way media connection..</p> - -<dl> - <dt>{{DOMxRef("RTCPeerConnection")}}</dt> - <dd>Represents a WebRTC connection between the local computer and a remote peer. It is used to handle efficient streaming of data between the two peers.</dd> - <dt>{{DOMxRef("RTCDataChannel")}}</dt> - <dd>Represents a bi-directional data channel between two peers of a connection.</dd> - <dt>{{DOMxRef("RTCDataChannelEvent")}}</dt> - <dd>Represents events that occur while attaching a {{DOMxRef("RTCDataChannel")}} to a {{DOMxRef("RTCPeerConnection")}}. The only event sent with this interface is {{event("datachannel")}}.</dd> - <dt>{{DOMxRef("RTCSessionDescription")}}</dt> - <dd>Represents the parameters of a session. Each <code>RTCSessionDescription</code> consists of a description {{DOMxRef("RTCSessionDescription.type", "type")}} indicating which part of the offer/answer negotiation process it describes and of the {{Glossary("SDP")}} descriptor of the session.</dd> - <dt>{{DOMxRef("RTCSessionDescriptionCallback")}}</dt> - <dd>The RTCSessionDescriptionCallback is passed into the {{DOMxRef("RTCPeerConnection")}} object when requesting it to create offers or answers.</dd> - <dt>{{DOMxRef("RTCStatsReport")}}</dt> - <dd>Provides information detailing statistics for a connection or for an individual track on the connection; the report can be obtained by calling {{DOMxRef("RTCPeerConnection.getStats()")}}. Details about using WebRTC statistics can be found in <a href="/en-US/docs/Web/API/WebRTC_Statistics_API">WebRTC Statistics API</a>.</dd> - <dt>{{DOMxRef("RTCIceCandidate")}}</dt> - <dd>Represents a candidate Internet Connectivity Establishment ({{Glossary("ICE")}}) server for establishing an {{DOMxRef("RTCPeerConnection")}}.</dd> - <dt>{{DOMxRef("RTCIceTransport")}}</dt> - <dd>Represents information about an ICE transport.</dd> - <dt>{{DOMxRef("RTCIceServer")}}</dt> - <dd>Defines how to connect to a single ICE server (such as a {{Glossary("STUN")}} or {{Glossary("TURN")}} server).</dd> - <dt>{{DOMxRef("RTCPeerConnectionIceEvent")}}</dt> - <dd>Represents events that occur in relation to ICE candidates with the target, usually an {{DOMxRef("RTCPeerConnection")}}. Only one event is of this type: {{event("icecandidate")}}.</dd> - <dt>{{DOMxRef("RTCRtpSender")}}</dt> - <dd>Manages the encoding and transmission of data for a {{DOMxRef("MediaStreamTrack")}} on an {{DOMxRef("RTCPeerConnection")}}.</dd> - <dt>{{DOMxRef("RTCRtpReceiver")}}</dt> - <dd>Manages the reception and decoding of data for a {{DOMxRef("MediaStreamTrack")}} on an {{DOMxRef("RTCPeerConnection")}}.</dd> - <dt>{{DOMxRef("RTCRtpContributingSource")}}</dt> - <dd>Contains information about a given contributing source (CSRC) including the most recent time a packet that the source contributed was played out.</dd> - <dt>{{DOMxRef("RTCTrackEvent")}}</dt> - <dd>The interface used to represent a {{domxref("RTCPeerConnection.track_event", "track")}} event, which indicates that an {{DOMxRef("RTCRtpReceiver")}} object was added to the {{DOMxRef("RTCPeerConnection")}} object, indicating that a new incoming {{DOMxRef("MediaStreamTrack")}} was created and added to the <code>RTCPeerConnection</code>.</dd> - <dt>{{DOMxRef("RTCConfiguration")}}</dt> - <dd>Used to provide configuration options for an <a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection" title="The RTCPeerConnection interface represents a WebRTC connection between the local computer and a remote peer. It provides methods to connect to a remote peer, maintain and monitor the connection, and close the connection once it's no longer needed."><code>RTCPeerConnection</code></a>.</dd> -</dl> - -<dl> - <dt>{{DOMxRef("RTCSctpTransport")}}</dt> - <dd>Provides information which describes a Stream Control Transmission Protocol (<strong>{{Glossary("SCTP")}}</strong>) transport and also provides a way to access the underlying Datagram Transport Layer Security (<strong>{{Glossary("DTLS")}}</strong>) transport over which SCTP packets for all of an <a href="/en-US/docs/Web/API/RTCPeerConnection" title="The RTCPeerConnection interface represents a WebRTC connection between the local computer and a remote peer. It provides methods to connect to a remote peer, maintain and monitor the connection, and close the connection once it's no longer needed."><code>RTCPeerConnection</code></a>'s data channels are sent and received.</dd> - <dt>{{DOMxRef("RTCSctpTransportState")}}</dt> - <dd>Indicates the state of an {{DOMxRef("RTCSctpTransport")}} instance.</dd> -</dl> - -<h3 id="Identity_and_security">Identity and security</h3> - -<p>The WebRTC API includes a number of interfaces which are used to manage security and identity.</p> - -<dl> - <dt>{{DOMxRef("RTCIdentityProvider")}}</dt> - <dd>Enables a user agent is able to request that an identity assertion be generated or validated.</dd> - <dt>{{DOMxRef("RTCIdentityAssertion")}}</dt> - <dd>Represents the identity of the remote peer of the current connection. If no peer has yet been set and verified this interface returns <code>null</code>. Once set it can't be changed.</dd> - <dt>{{DOMxRef("RTCIdentityProviderRegistrar")}}</dt> - <dd>Registers an identity provider (idP).</dd> - <dt>{{DOMxRef("RTCIdentityEvent")}}</dt> - <dd>Represents an identity assertion generated by an identity provider (idP). This is usually for an {{DOMxRef("RTCPeerConnection")}}. The only event sent with this type is {{event("identityresult")}}.</dd> - <dt>{{DOMxRef("RTCIdentityErrorEvent")}}</dt> - <dd>Represents an error associated with the identity provider (idP). This is usually for an {{DOMxRef("RTCPeerConnection")}}. Two events are sent with this type: {{event("idpassertionerror")}} and {{event("idpvalidationerror")}}.</dd> - <dt>{{DOMxRef("RTCCertificate")}}</dt> - <dd>Represents a certificate that an {{DOMxRef("RTCPeerConnection")}} uses to authenticate.</dd> -</dl> - -<h3 id="Telephony">Telephony</h3> - -<p>These interfaces are related to interactivity with Public-Switched Telephone Networks (PTSNs).</p> - -<dl> - <dt>{{DOMxRef("RTCDTMFSender")}}</dt> - <dd>Manages the encoding and transmission of Dual-Tone Multi-Frequency ({{Glossary("DTMF")}}) signaling for an {{DOMxRef("RTCPeerConnection")}}.</dd> - <dt>{{DOMxRef("RTCDTMFToneChangeEvent")}}</dt> - <dd>Used by the {{domxref("RTCDTMFSender.tonechange_event", "tonechange")}} event to indicate that a DTMF tone has either begun or ended. This event does not bubble (except where otherwise stated) and is not cancelable (except where otherwise stated).</dd> -</dl> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/en-US/docs/Web/API/WebRTC_API/Protocols">Introduction to WebRTC protocols</a></dt> - <dd>This article introduces the protocols on top of which the WebRTC API is built.</dd> - <dt><a href="/en-US/docs/Web/API/WebRTC_API/Connectivity">WebRTC connectivity</a></dt> - <dd>A guide to how WebRTC connections work and how the various protocols and interfaces can be used together to build powerful communication apps.</dd> - <dt><a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime">Lifetime of a WebRTC session</a></dt> - <dd>WebRTC lets you build peer-to-peer communication of arbitrary data, audio, or video—or any combination thereof—into a browser application. In this article, we'll look at the lifetime of a WebRTC session, from establishing the connection all the way through closing the connection when it's no longer needed.</dd> - <dt><a href="/en-US/docs/Web/API/WebRTC_API/Perfect_negotiation">Establishing a connection: The perfect negotiation pattern</a></dt> - <dd><strong>Perfect negotiation</strong> is a design pattern which is recommended for your signaling process to follow, which provides transparency in negotiation while allowing both sides to be either the offerer or the answerer, without significant coding needed to differentiate the two.</dd> - <dt><a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and two-way video calling</a></dt> - <dd>A tutorial and example which turns a WebSocket-based chat system created for a previous example and adds support for opening video calls among participants. The chat server's WebSocket connection is used for WebRTC signaling.</dd> - <dt><a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">Codecs used by WebRTC</a></dt> - <dd>A guide to the codecs which WebRTC requires browsers to support as well as the optional ones supported by various popular browsers. Included is a guide to help you choose the best codecs for your needs.</dd> - <dt><a href="/en-US/docs/Web/API/WebRTC_API/Using_data_channels">Using WebRTC data channels</a></dt> - <dd>This guide covers how you can use a peer connection and an associated {{DOMxRef("RTCDataChannel")}} to exchange arbitrary data between two peers.</dd> - <dt><a href="/en-US/docs/Web/API/WebRTC_API/Using_DTMF">Using DTMF with WebRTC</a></dt> - <dd>WebRTC's support for interacting with gateways that link to old-school telephone systems includes support for sending DTMF tones using the {{DOMxRef("RTCDTMFSender")}} interface. This guide shows how to do so.</dd> -</dl> - -<h2 id="Tutorials">Tutorials</h2> - -<dl> - <dt><a href="/en-US/docs/Web/API/WebRTC_API/adapter.js">Improving compatibility using WebRTC adapter.js</a></dt> - <dd>The WebRTC organization <a href="https://github.com/webrtc/adapter/">provides on GitHub the WebRTC adapter</a> to work around compatibility issues in different browsers' WebRTC implementations. The adapter is a JavaScript shim which lets your code to be written to the specification so that it will "just work" in all browsers with WebRTC support.</dd> - <dt><a href="/en-US/docs/Web/API/WebRTC_API/Taking_still_photos">Taking still photos with WebRTC</a></dt> - <dd>This article shows how to use WebRTC to access the camera on a computer or mobile phone with WebRTC support and take a photo with it.</dd> - <dt><a href="/en-US/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">A simple RTCDataChannel sample</a></dt> - <dd>The {{DOMxRef("RTCDataChannel")}} interface is a feature which lets you open a channel between two peers over which you may send and receive arbitrary data. The API is intentionally similar to the <a href="/en-US/docs/Web/API/WebSocket_API">WebSocket API</a>, so that the same programming model can be used for each.</dd> -</dl> - -<h2 id="Resources">Resources</h2> - -<h3 id="Protocols">Protocols</h3> - -<h4 id="WebRTC-proper_protocols">WebRTC-proper protocols</h4> - -<ul> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-alpn/"><cite>Application Layer Protocol Negotiation for Web Real-Time Communications</cite></a></li> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-audio/"><cite>WebRTC Audio Codec and Processing Requirements</cite></a></li> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-channel/"><cite>RTCWeb Data Channels</cite></a></li> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-protocol/"><cite>RTCWeb Data Channel Protocol</cite></a></li> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-rtp-usage/"><cite>Web Real-Time Communication (WebRTC): Media Transport and Use of RTP</cite></a></li> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-security-arch/"><cite>WebRTC Security Architecture</cite></a></li> - <li><a href="http://datatracker.ietf.org/doc/draft-ietf-rtcweb-transports/"><cite>Transports for RTCWEB</cite></a></li> -</ul> - -<h4 id="Related_supporting_protocols">Related supporting protocols</h4> - -<ul> - <li><a href="https://tools.ietf.org/html/rfc5245">Interactive Connectivity Establishment (ICE): A Protocol for Network Address Translator (NAT) Traversal for Offer/Answer Protocol</a></li> - <li><a href="https://tools.ietf.org/html/rfc5389"><cite>Session Traversal Utilities for NAT (STUN)</cite></a></li> - <li><a href="https://tools.ietf.org/html/rfc7064"><cite>URI Scheme for the Session Traversal Utilities for NAT (STUN) Protocol</cite></a></li> - <li><a href="https://tools.ietf.org/html/rfc7065"><cite>Traversal Using Relays around NAT (TURN) Uniform Resource Identifiers</cite></a></li> - <li><a href="https://tools.ietf.org/html/rfc3264"><cite>An Offer/Answer Model with Session Description Protocol (SDP)</cite></a></li> - <li><a href="https://datatracker.ietf.org/doc/draft-ietf-tram-turn-third-party-authz/"><cite>Session Traversal Utilities for NAT (STUN) Extension for Third Party Authorization</cite></a></li> -</ul> - -<h4 id="WebRTC_statistics"><cite>WebRTC statistics</cite></h4> - -<ul> - <li><a href="/en-US/docs/Web/API/WebRTC_Statistics_API">WebRTC Statistics API</a></li> -</ul> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('WebRTC 1.0')}}</td> - <td>{{Spec2('WebRTC 1.0')}}</td> - <td>The initial definition of the API of WebRTC.</td> - </tr> - <tr> - <td>{{SpecName('Media Capture')}}</td> - <td>{{Spec2('Media Capture')}}</td> - <td>The initial definition of the object conveying the stream of media content.</td> - </tr> - <tr> - <td>{{SpecName('Media Capture DOM Elements')}}</td> - <td>{{Spec2('Media Capture DOM Elements')}}</td> - <td>The initial definition on how to obtain stream of content from DOM Elements</td> - </tr> - </tbody> -</table> - -<p>In additions to these specifications defining the API needed to use WebRTC, there are several protocols, listed under <a href="#Protocols">resources</a>.</p> - -<h2 class="Related_Topics" id="See_also">See also</h2> - -<ul> - <li>{{DOMxRef("MediaDevices")}}</li> - <li>{{DOMxRef("MediaStreamEvent")}}</li> - <li>{{DOMxRef("MediaStreamConstraints")}}</li> - <li>{{DOMxRef("MediaStreamTrack")}}</li> - <li>{{DOMxRef("MessageEvent")}}</li> - <li>{{DOMxRef("MediaStream")}}</li> - <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a></li> - <li><a href="https://hacks.mozilla.org/2015/06/firefox-multistream-and-renegotiation-for-jitsi-videobridge/">Firefox multistream and renegotiation for Jitsi Videobridge</a></li> - <li><a href="https://hacks.mozilla.org/2015/04/peering-through-the-webrtc-fog-with-socketpeer/">Peering Through the WebRTC Fog with SocketPeer</a></li> - <li><a href="https://hacks.mozilla.org/2014/04/inside-the-party-bus-building-a-web-app-with-multiple-live-video-streams-interactive-graphics/">Inside the Party Bus: Building a Web App with Multiple Live Video Streams + Interactive Graphics</a></li> - <li><a href="/en-US/docs/Web/Media">Web media technologies</a></li> -</ul> diff --git a/files/vi/web/api/webrtc_api/protocols/index.html b/files/vi/web/api/webrtc_api/protocols/index.html deleted file mode 100644 index 8d3bcb81e4..0000000000 --- a/files/vi/web/api/webrtc_api/protocols/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Introduction to WebRTC protocols -slug: Web/API/WebRTC_API/Protocols -translation_of: Web/API/WebRTC_API/Protocols ---- -<div>{{WebRTCSidebar}}{{draft}}</div> - -<p>Bài viết này giới thiệu các giao thức của WebRTC API được đã được xây dựng.</p> - -<h2 id="ICE">ICE</h2> - -<p><a href="http://en.wikipedia.org/wiki/Interactive_Connectivity_Establishment">Interactive Connectivity Establishment (ICE)</a> là một khuân mẫu cho phép trình duyệt của bạn kết nối với các trình duyệt khác. Có rất nhiều lý do tại sao việc kết nối trực tiếp từ A đến B một cách đơn giản sẽ không làm việc. Nó cần vượt qua firewall cái đã ngăn chặn mở môt cuộc kết nối trực tiếp, nó cung cấp cho bạn một địa chỉ duy nhất, trong hầu hết các trường hợp thiết bị của bạn không có địa chỉ public I, và chuyển tiếp dữ liệu thông qua một server nếu bộ định tuyến (router) của bạn không cho phép bạn kết nối một cách trực tiếp với browser khác. ICE sử dụng STUN hoặc TURN hay cả hai server để hoàn thành việc này như đã mô tả ở trên.</p> - -<h2 id="STUN">STUN</h2> - -<p><a href="http://en.wikipedia.org/wiki/STUN">Session Traversal Utilities for <u>NAT</u> (STU<u>N</u>)</a> (Từ viết tắt trong một từ viết tắt) là một giao thức để phát hiện ra địa chỉ IP pubic của bạn và xác định bất cứ hạn chế nào trong bộ định tuyến (router) của bạn đã ngăn chặn một cuộc kết nối trực tiếp với các browsers.</p> - -<p>Client sẽ gửi một yêu cầu tới STUN server thông qua internet, STUN server sẽ phản hồi địa chỉ IP public và client có thể có hoặc không truy cập được phìa sau bộ định tuyến NAT.</p> - -<p><img alt="An interaction between two users of a WebRTC application involving a STUN server." src="https://mdn.mozillademos.org/files/6115/webrtc-stun.png" style="display: block; height: 378px; margin: 0px auto; width: 259px;"></p> - -<h2 id="NAT">NAT</h2> - -<p><a href="https://en.wikipedia.org/wiki/Network_address_translation">Network Address Translation (NAT)</a> được sử dụng để cung cấp cho thiết bị của bạn một địa chỉ IP public. Một bộ định tuyến (router) sẽ có một đia chỉ IP public và mỗi thiết bị được kết nối đến router sẽ có một đia chỉ IP private. Các requests sẽ được chuyển đổi từ địa chỉ IP private sang địa chỉ IP pubic với một cổng (port) duy nhất. Với cách này bạn không cần một địa chỉ IP public riêng cho từng thiết bị nhưng vẫn có thể được phát hiện trên internet.</p> - -<p>Một vài bộ định tuyến (routers) sẽ có những ngăn cản kết nối tới những thiết bị trên network. Điều này có nghĩa là ngay cả việc chúng ta có địa chỉ IP public đã được tìm ra bở STUN server, nhưng không một ai có thể tạo ra một kết nối. Trong tình huốn này chúng ta cần chuyển sang TURN.</p> - -<h2 id="TURN">TURN</h2> - -<p>Một vài bộ định tuyến (routers) sử dụng NAT được gọi là 'Symmetric NAT'. Nghĩa là bộ định tuyến (router) chỉ chấp nhận kết nối từ những peer mà bạn đã kết nối trước đó.</p> - -<p><a href="http://en.wikipedia.org/wiki/TURN">Traversal Using Relays around NAT (TURN)</a> có nghĩa là vượt qua hạn chế Symmetric NAT bằng các mở một kết nối với TURN server và truyền tải tất cả thông tin thông qua TURN server. Bạn sẽ tạo một kết nối với một TURN server và nói với tất cả các peer để gửi những gói tin đến server để sau đó nó sẽ chuyển lại cho bạn. Điều này rõ ràng đi kèm với các loại chi phí vì vậy nó chỉ được sử dụng nếu không có lựa chon nào thay thế.</p> - -<p><img alt="An interaction between two users of a WebRTC application involving STUN and TURN servers." src="https://mdn.mozillademos.org/files/6117/webrtc-turn.png" style="display: block; height: 297px; margin: 0px auto; width: 295px;"></p> - -<h2 id="SDP">SDP</h2> - -<p><a href="http://en.wikipedia.org/wiki/Session_Description_Protocol">Session Description Protocol (SDP)</a> là một tiêu chuẩn mô tả cho những nội dung đa phương tiện của một kết nối như độ phân giản (resolution), định dạn (formats), mã (codecs), mã hóa (encryption), v.v. cho nên tất cả các peers có thể hiểu những loại dữ liệu đang gửi đi. Vì vậy đây là siêu dữ liệu mô tả nội dung chứ không phải chính nội dung đa phương tiện.</p> - -<p>Về mặt kỹ thuận, SDP không thực sự là một protocol, nhưng định dạng data được sử dụng để mô tả kết nối chia sẻ đa phương tiện giữa các thiết bị.</p> - -<p>Documenting SDP is well outside the scope of this documentation; however, there are a few things worth noting here.</p> - -<p>Tài liệu SDP nằm ngoài phạm vi của tài liệu này. Tuy nhiên, có một vài thứ thực sự đáng chú ý ở đây.</p> - -<h3 id="Cấu_trúc">Cấu trúc</h3> - -<p>SDP bao gồm một hay nhiều dòng text UTF-8, mỗi dòng bắt đầu với một kiểu ký tự, theo sau là một ký tự dấu bằng (<code>"="</code>), theo sau nữa là nội dung có cấu trúc bao gồm giá trị hay mô tả mà định dạng của nó phụ thuộc vào kiểu. Những dòng nội dung bắt đầu với một chữ (letter) thường được gọi là "letter-lines". Ví dụ, những dòng cung cấp mô tả đa phương tiện có kiểu <code>"m"</code>, vì vậy những dòng của nó được xem như là "m-lines"</p> - -<h3 id="Thông_tin_tham_khảo">Thông tin tham khảo</h3> - -<p>Để tìm hiểu thêm về SDP, tham khảo những tài liệu hữu ích dưới đây:</p> - -<ul> - <li>Specification: {{RFC(4566, "SDP: Session Description Protocol")}}</li> - <li><a href="https://www.iana.org/assignments/sip-parameters/sip-parameters.xhtml">IANA registry of SDP parameters</a></li> -</ul> diff --git a/files/vi/web/api/websockets_api/index.html b/files/vi/web/api/websockets_api/index.html deleted file mode 100644 index e69c174077..0000000000 --- a/files/vi/web/api/websockets_api/index.html +++ /dev/null @@ -1,253 +0,0 @@ ---- -title: The WebSocket API (WebSockets) -slug: Web/API/WebSockets_API -tags: - - API - - Client - - Communication - - NeedsTranslation - - Overview - - Server - - TopicStub - - Two-Way - - WebSocket - - WebSocket API - - WebSockets - - data - - interactive -translation_of: Web/API/WebSockets_API ---- -<p>{{DefaultAPISidebar("Websockets API")}}</p> - -<p>Các <strong>WebSocket API</strong> là một công nghệ tiên tiến mà nó có thể tạo ra một phiên giao tiếp tương tác hai chiều giữa trình duyệt của người dùng và một máy chủ (server). Với API này, bạn có thể gửi những thông báo tới một máy chủ và nhận những phản hồi (response) hướng sự kiện (event-driven) mà không phải liên tục gửi yêu cầu máy chủ để nhận một câu trả lời.</p> - -<div class="note"> -<p><strong>Chú ý:</strong> Mặc dù một kết nối Websocket có một số tính năng hơi giống với các socket kiểu Unix chuẩn, Nhưng chúng lại không có liên quan gì với nhau.</p> -</div> - -<h2 id="Giao_diện_(Interfaces)">Giao diện (Interfaces)</h2> - -<dl> - <dt><a href="/en-US/docs/Web/API/WebSocket" title="en/WebSockets/WebSockets reference/WebSocket"><code>WebSocket</code></a></dt> - <dd>Một giao diện cơ bản cho việc kết nối tới một máy chủ Websocket và sau đó là việc gửi và nhận dữ liệu trên kết nối đó.</dd> - <dt><code><a href="/en-US/docs/Web/API/CloseEvent" title="en/WebSockets/WebSockets reference/CloseEvent">CloseEvent</a></code></dt> - <dd>Sự kiện được gửi đi từ một đối tượng Websocket khi kết nối được đóng lại.</dd> - <dt><a href="/en-US/docs/Web/API/MessageEvent" title="en/WebSockets/WebSockets reference/MessageEvent"><code>MessageEvent</code></a></dt> - <dd>Sự kiện được gửi bởi đối tượng Websocket khi một thông điệp được nhận từ một máy chủ.</dd> -</dl> - -<h2 class="Tools" id="Tools" name="Tools">Công cụ</h2> - -<ul> - <li><a href="https://hacks.mozilla.org/2017/06/introducing-humblenet-a-cross-platform-networking-library-that-works-in-the-browser/">HumbleNet</a>: Một thư viện kết nối mạng đa nền tảng làm việc trong trình duyệt. Nó bao gồm một trình bao bọc Websocket và WebRTC viết bằng C mà khái quát những sự khác biệt trên trình duyệt, tạo sự thuận lợi cho việc phát triển các game và ứng dụng với kết nối nhiều người dùng cùng lúc.</li> - <li><a href="https://github.com/uWebSockets/uWebSockets">µWebSockets</a>: Triển khai máy chủ Websocket và ứng dụng phía người dùng với khả năng mở rộng cao hơn cho nền tảng C++ 11 và NodeJS.</li> - <li><a href="https://github.com/ClusterWS/ClusterWS">ClusterWS</a>: Một Framework nhẹ, nhanh và mạnh mẽ dể xây dựng các ứng dụng Websocket có khả năng mở rộng trên nền tảng NodeJS.</li> - <li><a class="external" href="http://socket.io" title="http://socket.io/">Socket.IO</a>: Một thư viện chuyển đổi giao thức bên thứ ba dựa trên nền tảng long polling/WebSocket cho <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li> - <li><a href="http://socketcluster.io/">SocketCluster</a>: Một pub/sub WebSocket framework cho <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a> với sự tập trung vào khả năng mở rộng.</li> - <li><a class="link-https" href="https://github.com/Worlize/WebSocket-Node" title="https://github.com/Worlize/WebSocket-Node">WebSocket-Node</a>: Một triển khai các API máy chủ WebSocket cho <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li> - <li><a href="http://www.totaljs.com">Total.js</a>: Một framework làm ứng dụng web cho <a href="http://www.nodejs.org">Node.js</a> (Ví dụ: <a href="https://github.com/totaljs/examples/tree/master/websocket">WebSocket chat</a>)</li> - <li><a href="https://www.npmjs.com/package/faye-websocket">Faye</a>: Một kết nối <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API">WebSocket</a> (kết nối hai chiều) và <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventSource/">EventSource</a> (Kết nối một chiều) cho ứng dụng và máy chủ <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li> - <li><a href="http://signalr.net/">SignalR</a>: SignalR sẽ sử dụng WebSockets bên dưới dụng vỏ bọc khi nó khả dụng, và dự phòng chuyển đổi với các kí thuật và công nghệ khác khi nó không còn khả dụng, trong khi mã nguồn ứng dụng của bạn vẫn được giữ nguyên.</li> - <li><a href="https://caddyserver.com/docs/websocket">Caddy</a>: Máy chủ web có khả năng ủy quyền các lệnh tùy ý (vào/ra) như một websocket.</li> - <li><a href="https://github.com/websockets/ws">ws</a>: Một thư viện websocket phổ biến cho cả máy chủ và client trên <a href="https://nodejs.org/en/">Node.js</a>.</li> - <li><a href="https://github.com/bigstepinc/jsonrpc-bidirectional">jsonrpc-bidirectional</a>: Asynchronous RPC which, trên một kết nối đơn,có thể có những tính năng đã xuất trên cả máy chủ và máy khách cùng lúc (máy khách gọi máy chủ hoặc ngược lại).</li> -</ul> - -<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Chủ đề liên quan</h2> - -<ul> - <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a></li> - <li><a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a></li> -</ul> - -<p> </p> - -<h2 id="Đặc_tả">Đặc tả</h2> - -<table> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comments</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("HTML WHATWG", "web-sockets.html", "WebSocket API")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td> </td> - </tr> - <tr> - <td><a href="https://www.w3.org/TR/websockets/">WebSockets</a></td> - <td><span class="spec-CR">Candidate Recommendation</span></td> - <td> </td> - </tr><tr> - <td>{{RFC(6455, "The WebSocket Protocol")}}</td> - <td><span class="spec-RFC">IETF RFC</span></td> - <td> </td> - </tr> - </tbody> -</table> - -<p> </p> - -<h2 id="Xem_thêm">Xem thêm</h2> - -<ul> - <li><a class="external" href="http://tools.ietf.org/html/rfc6455">RFC 6455 — The WebSocket Protocol</a></li> - <li><a class="external" href="http://www.w3.org/TR/websockets/">WebSocket API Specification</a></li> - <li><a href="/en-US/docs/Server-sent_events" title="Server-sent_events">Server-Sent Events</a></li> -</ul> - -<h2 id="Khả_năng_tương_thích_với_các_trình_duyệt">Khả năng tương thích với các trình duyệt</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Tính năng</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Version -76 support {{obsolete_inline}}</td> - <td>6</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop("2.0")}}</td> - <td>{{CompatNo}}</td> - <td>11.00 (disabled)</td> - <td>5.0.1</td> - </tr> - <tr> - <td>Protocol version 7 support {{obsolete_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop("6.0")}}<br> - {{property_prefix("Moz")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>Protocol version 10 support {{obsolete_inline}}</td> - <td>14</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop("7.0")}}<br> - {{property_prefix("Moz")}}</td> - <td>HTML5 Labs</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Standard - RFC 6455 Support</td> - <td>43</td> - <td>14</td> - <td>{{CompatGeckoDesktop("48.0")}}</td> - <td>10</td> - <td>12.10</td> - <td>6.0</td> - </tr> - <tr> - <td>Usable in Workers</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("37.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Version -76 support {{obsolete_inline}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Protocol version 7 support {{obsolete_inline}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Protocol version 8 support (IETF draft 10) {{obsolete_inline}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile("7.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Standard - RFC 6455 Support</td> - <td>4.4</td> - <td>(Yes)</td> - <td>{{CompatGeckoDesktop("11.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>12.10</td> - <td>6.0</td> - </tr> - <tr> - <td>Usable in Workers</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("37.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Chú_ý_về_Gecko">Chú ý về Gecko</h3> - -<p>Việc hỗ trợ Websocket trên Firefox đang được tiếp tục với việc theo dõi sư thay đổi của đặc tả Websocket. Firefox 6 triển khai phiên bản 7 của các giao thức cơ bản, trong khi Firefox 7 triển khai phiên bản 8 (như mô tả bởi IETF draft 10). Firefox di đông đón nhận sự hỗ trợ WebSocket từ phiên bản Firefox di động 7.0.</p> - -<h4 id="Gecko_6.0">Gecko 6.0</h4> - -<p>Trước Gecko 6.0 {{geckoRelease("6.0")}}, Đã có, không chính xác, một đối tượng <code>WebSocket</code> mà một số trang đã nghĩ rằng đó là việc bao hàm các dịch vụ <code>WebSocket</code> không có tiền tố; Đối tượng này vừa được đổi tên thành <code>MozWebSocket</code>.</p> - -<h4 id="Gecko_7.0">Gecko 7.0</h4> - -<p>Bắt đầu từ phiên bản Gecko 7.0 {{geckoRelease("7.0")}}, <code>thông số network.websocket.max-connections</code> được sử dụng để xác định số lượng kết nối websocket tối đa có thể được mở trong một khoảng thời gian nhất định. Giá trị mặc định là 200.</p> - -<h4 id="Gecko_8.0">Gecko 8.0</h4> - -<p>Bắt đầu từ phiên bản Gecko 8.0 {{geckoRelease("8.0")}}, phần mở rộng của luồng deflate-stream tới giao thức WebSocket đã bị vô hiệu hóa, bởi vì nó không còn được dùng trong các bản đặc tả. Điều này giải quyết vấn đề không tương thích giữa một số trang web.</p> - -<h4 id="Gecko_11.0">Gecko 11.0</h4> - -<p>Trước phiên bản Gecko 11.0, Cả thông điệp đến và đi đều bị giới hạn ở kích thức 16MB. Bây giờ chúng có thể lên đến kích thước 2GB. Chú ý, tuy vậy vẫn còn tùy thuộc vào kích thước bộ nhớ (đặc biệt là trên thiết bị di động) làm cho nó chỉ là kích thước lý thuyết không phải là kích thước thực tế. Trong thực tế, việc truyền các dữ liệu kích thước như vậy sẽ thất bại nếu thiết bị không có đủ bộ nhớ.</p> - -<p>Ngoài ra, ArrayBuffer hỗ trợ cho việc gửi và nhận dữ liệu nhị phân đã được triển khai.</p> - -<p>Kể từ phiên bản Gecko 11.0, API Websocket không còn được thêm tiền tố nữa.</p> diff --git a/files/vi/web/api/websockets_api/writing_a_websocket_server_in_java/index.html b/files/vi/web/api/websockets_api/writing_a_websocket_server_in_java/index.html deleted file mode 100644 index 6258f6236f..0000000000 --- a/files/vi/web/api/websockets_api/writing_a_websocket_server_in_java/index.html +++ /dev/null @@ -1,217 +0,0 @@ ---- -title: Writing a WebSocket server in Java -slug: Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java -tags: - - WebSocket -translation_of: Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java ---- -<h2 id="Giới_thiệu">Giới thiệu</h2> - -<p>Đây là một ví dụ để cho bạn biết thế nào là một WebSocket API server sử dụng Oracle Java.<br> - <br> - Mặc dù có nhiều ngôn ngữ sercer-side khác nhau bạn có thể sử dụng để tạo một WebSocket server, đây là ví dụ sử dụng Oracle Java code đơn giản.</p> - -<p>Sever này phù hợp tiêu chuẩn <a href="http://tools.ietf.org/html/rfc6455" title="http://tools.ietf.org/html/rfc6455">RFC 6455</a>, vì vậy nó chỉ kết nối từ Chrome version 16, Firefox 11, IE 10 và cao hơn.</p> - -<h2 id="Bước_1">Bước 1:</h2> - -<p>WebSockets truyền đạt về một <a href="http://en.wikipedia.org/wiki/Transmission_Control_Protocol" title="http://en.wikipedia.org/wiki/Transmission_Control_Protocol">TCP (Transmission Control Protocol)</a> kết nối. Lớp Java's <a href="http://docs.oracle.com/javase/8/docs/api/java/net/ServerSocket.html">ServerSocket</a> là nằm ở trong gói <em>java.net</em>.</p> - -<h3 id="ServerSocket">ServerSocket</h3> - -<p>Xây dựng:</p> - -<pre class="brush: java"><code><span class="memberNameLink">ServerSocket</span>(int port)</code></pre> - -<p>Khi bạn thuyết trình về ServerSocket class, it is bound to the port number you specified by the <em>port</em> argument.</p> - -<p><span style="line-height: 1.572;">Here's how to implement what we have learnt:</span></p> - -<pre class="brush: java">import java.net.ServerSocket; -import java.net.Socket; - -public class Server{ - public static void main(String[] args){ - ServerSocket server = new ServerSocket(80); - - System.out.println("Server has started on 127.0.0.1:80.\r\nWaiting for a connection..."); - - Socket client = server.accept(); - - System.out.println("A client connected."); - } -}</pre> - -<h3 id="Socket">Socket</h3> - -<p>Methods:</p> - -<ul> - <li><code>java.net.</code><a href="http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html" title="class in java.net">Socket</a><code> <span class="memberNameLink"><a href="http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html#getInputStream--">getInputStream</a></span>()</code><br> - Returns an input stream for this socket.</li> - <li><code>java.net.</code><a href="http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html" title="class in java.net">Socket</a><code> <span class="memberNameLink"><a href="http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html#getOutputStream--">getOutputStream</a></span>()</code><br> - Returns an output stream for this socket.</li> -</ul> - -<h3 id="OutputStream">OutputStream</h3> - -<p>Methods:</p> - -<pre class="brush: java">write<code>(byte[] b, int off, int len)</code></pre> - -<p>Writes <em><code>len</code></em> bytes from the specified byte array starting at offset <em><code>off</code></em> to this output stream.</p> - -<h3 id="InputStream">InputStream</h3> - -<p>Methods:</p> - -<pre class="brush: java"><span class="brush: cpp" style="line-height: 1.572;">read</span><code>(byte[] b, int off, int len)</code></pre> - -<p>Reads up to <em>len</em> bytes of data from the input stream into an array of bytes.<em> </em></p> - -<p>Let us extend our example.</p> - -<pre class="brush: java">Socket client = server.accept(); - -System.out.println("A client connected."); - -InputStream in = client.getInputStream(); - -OutputStream out = client.getOutputStream(); - -new Scanner(in, "UTF-8").useDelimiter("\\r\\n\\r\\n").next();</pre> - -<h2 id="Handshaking">Handshaking</h2> - -<p>When a client connects to a server, it sends a GET request to upgrade the connection to a WebSocket from a simple HTTP request. This is known as handshaking.</p> - -<pre class="brush: java">import java.util.Scanner; -import java.util.regex.Matcher; -import java.util.regex.Pattern; - -//translate bytes of request to string -String data = new Scanner(in,"UTF-8").useDelimiter("\\r\\n\\r\\n").next(); - -Matcher get = Pattern.compile("^GET").matcher(data); - -if (get.find()) { - -} else { - -}</pre> - -<p>Creating the response is easier than understanding why you must do it in this way.</p> - -<p>You must,</p> - -<ol> - <li>Obtain the value of <em>Sec-WebSocket-Key</em> request header without any leading and trailing whitespace</li> - <li>Link it with "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"</li> - <li>Compute SHA-1 and Base64 code of it</li> - <li>Write it back as value of <em>Sec-WebSocket-Accept</em> response header as part of a HTTP response.</li> -</ol> - -<pre class="brush: java">if (get.find()) { - Matcher match = Pattern.compile("Sec-WebSocket-Key: (.*)").matcher(data); - match.find(); - byte[] response = ("HTTP/1.1 101 Switching Protocols\r\n" - + "Connection: Upgrade\r\n" - + "Upgrade: websocket\r\n" - + "Sec-WebSocket-Accept: " - + DatatypeConverter - .printBase64Binary( - MessageDigest - .getInstance("SHA-1") - .digest((match.group(1) + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11") - .getBytes("UTF-8"))) - + "\r\n\r\n") - .getBytes("UTF-8"); - - out.write(response, 0, response.length); -} -</pre> - -<h2 id="Decoding_messages">Decoding messages</h2> - -<p>After a successful handshake, client can send messages to the server, but now these are encoded.</p> - -<p>If we send "abcdef", we get these bytes:</p> - -<table> - <tbody> - <tr> - <td>129</td> - <td>134</td> - <td>167</td> - <td>225</td> - <td>225</td> - <td>210</td> - <td>198</td> - <td>131</td> - <td>130</td> - <td>182</td> - <td>194</td> - <td>135</td> - </tr> - </tbody> -</table> - -<p>- 129:</p> - -<table> - <thead> - <tr> - <th scope="col">FIN (Is this the whole message?)</th> - <th scope="col">RSV1</th> - <th scope="col">RSV2</th> - <th scope="col">RSV3</th> - <th scope="col">Opcode</th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td>0</td> - <td>0</td> - <td>0</td> - <td>0x1=0001</td> - </tr> - </tbody> -</table> - -<p>FIN: You can send your message in frames, but now keep things simple.<br> - <span style="line-height: 1.572;">Opcode </span><em>0x1</em><span style="line-height: 1.572;"> means this is a text. </span><a href="http://tools.ietf.org/html/rfc6455#section-5.2" style="line-height: 1.572;" title="http://tools.ietf.org/html/rfc6455#section-5.2">Full list of Opcodes</a></p> - -<p>- 134:</p> - -<p>If the second byte minus 128 is between 0 and 125, this is the length of the message. If it is 126, the following 2 bytes (16-bit unsigned integer), if 127, the following 8 bytes (64-bit unsigned integer, the most significant bit MUST be 0) are the length.</p> - -<div class="note"> -<p>I can take 128 because the first bit is always 1.</p> -</div> - -<p>- 167, 225, 225 and 210 are the bytes of the key to decode. It changes every time.</p> - -<p>- The remaining encoded bytes are the <span style="line-height: 1.572;">message.</span></p> - -<h3 id="Decoding_algorithm">Decoding algorithm</h3> - -<p>decoded byte = encoded byte XOR (position of encoded byte BITWISE AND 0x3)th byte of key</p> - -<p>Ví dụ trên Java:</p> - -<pre class="brush: java">byte[] decoded = new byte[6]; -byte[] encoded = new byte[] {198, 131, 130, 182, 194, 135}; -byte[] key = byte[4] {167, 225, 225, 210}; - -for (int i = 0; i < encoded.length; i++) { - decoded[i] = (byte)(encoded[i] ^ key[i & 0x3]); -}</pre> - -<h2 id="Tài_liệu_liên_quan">Tài liệu liên quan</h2> - -<ul> - <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_servers">Writing WebSocket servers</a></li> -</ul> - -<div id="cke_pastebin" style="position: absolute; top: 2209.23px; width: 1px; height: 1px; overflow: hidden; left: -1000px;"> </div> diff --git a/files/vi/web/api/window/index.html b/files/vi/web/api/window/index.html deleted file mode 100644 index cc02cd80a2..0000000000 --- a/files/vi/web/api/window/index.html +++ /dev/null @@ -1,729 +0,0 @@ ---- -title: Window -slug: Web/API/Window -tags: - - API - - Browser - - DOM - - Interface - - JavaScript - - NeedsTranslation - - Reference - - Tab - - TopicStub - - Window - - global - - global scope - - scope -translation_of: Web/API/Window ---- -<div>{{APIRef("DOM")}}</div> - -<p><span class="seoSummary">The <strong><code>Window</code></strong> interface represents a window containing a DOM document; the <code>document</code> property points to the <a href="/en-US/docs/DOM/document">DOM document</a> loaded in that window.</span> A window for a given document can be obtained using the {{domxref("document.defaultView")}} property.</p> - -<p>A global variable, <code>window</code>, representing the window in which the script is running, is exposed to JavaScript code.</p> - -<p>The <code>Window</code> interface is home to a variety of functions, namespaces, objects, and constructors which are not necessarily directly associated with the concept of a user interface window. However, the <code>Window</code> interface is a suitable place to include these items that need to be globally available. Many of these are documented in the <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript Reference</a> and the <a href="/en-US/docs/Web/API/Document_Object_Model" title="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a>.</p> - -<p>In a tabbed browser, each tab is represented by its own <code>Window</code> object; the global <code>window</code> seen by JavaScript code running within a given tab always represents the tab in which the code is running. That said, even in a tabbed browser, some properties and methods still apply to the overall window that contains the tab, such as {{Domxref("Window.resizeTo", "resizeTo()")}} and {{Domxref("Window.innerHeight", "innerHeight")}}. Generally, anything that can't reasonably pertain to a tab pertains to the window instead.</p> - -<p>{{InheritanceDiagram}}</p> - -<h2 id="Constructors">Constructors</h2> - -<p>See also the <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Interfaces</a>.</p> - -<dl> - <dt>{{domxref("DOMParser")}}</dt> - <dd><code>DOMParser</code> can parse XML or HTML source stored in a string into a DOM <a href="https://developer.mozilla.org/en-US/docs/DOM/document" title="document">Document</a>. <code>DOMParser</code> is specified in <a href="https://w3c.github.io/DOM-Parsing/" title="http://html5.org/specs/dom-parsing.html">DOM Parsing and Serialization</a>.</dd> - <dt>{{domxref("Window.GeckoActiveXObject")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Image")}}</dt> - <dd>Used for creating an {{domxref("HTMLImageElement")}}.</dd> - <dt>{{domxref("Option")}}</dt> - <dd>Used for creating an {{domxref("HTMLOptionElement")}}</dd> - <dt>{{domxref("Window.QueryInterface")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.StaticRange")}} {{experimental_inline}} {{readonlyinline}}</dt> - <dd>Returns a {{domxref('StaticRange.StaticRange','StaticRange()')}} constructor which creates a {{domxref('StaticRange')}} object.</dd> - <dt>{{domxref("Worker")}}</dt> - <dd>Used for creating a <a href="/en-US/docs/DOM/Using_web_workers">Web worker</a></dd> - <dt>{{domxref("Window.XMLSerializer")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.XPCNativeWrapper")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> -</dl> - -<h2 id="Properties">Properties</h2> - -<p><em>This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from the {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.</em></p> - -<p>Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.</p> - -<dl> - <dt>{{domxref("Window.closed")}} {{Non-standard_inline}} {{readOnlyInline}}</dt> - <dd>This property indicates whether the current window is closed or not.</dd> - <dt>{{domxref("Window.console")}} {{ReadOnlyInline}}</dt> - <dd>Returns a reference to the console object which provides access to the browser's debugging console.</dd> - <dt>{{domxref("Window.content")}} and <code>Window._content</code> {{Non-standard_inline}} {{obsolete_inline}} {{ReadOnlyInline}}</dt> - <dd>Returns a reference to the content element in the current window. Since Firefox 57 (initially Nightly-only), both versions are only available from chrome (privileged) code, and not available to the web anymore.</dd> - <dt>{{domxref("Window.controllers")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> - <dd>Returns the XUL controller objects for the current chrome window.</dd> - <dt>{{domxref("Window.customElements")}} {{ReadOnlyInline}}</dt> - <dd>returns a reference to the {{domxref("CustomElementRegistry")}} object, which can be used to register new <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">custom elements</a> and get information about previously registered custom elements.</dd> - <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt> - <dd>Returns the browser crypto object.</dd> - <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt> - <dd>Gets/sets the status bar text for the given window.</dd> - <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> - <dd>Returns the ratio between physical pixels and device independent pixels in the current display.</dd> - <dt>{{domxref("Window.dialogArguments")}} {{ReadOnlyInline}}</dt> - <dd>Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.</dd> - <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt> - <dd>Synonym of {{domxref("window.personalbar")}}</dd> - <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt> - <dd>Returns a reference to the document that the window contains.</dd> - <dt>{{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}}</dt> - <dd>Returns a reference to a {{domxref("DOMMatrix")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.</dd> - <dt>{{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> - <dd>Returns a reference to a {{domxref("DOMMatrixReadOnly")}} object, which represents 4x4 matrices, suitable for 2D and 3D operations.</dd> - <dt>{{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}}</dt> - <dd>Returns a reference to a {{domxref("DOMPoint")}} object, which represents a 2D or 3D point in a coordinate system.</dd> - <dt>{{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> - <dd>Returns a reference to a {{domxref("DOMPointReadOnly")}} object, which represents a 2D or 3D point in a coordinate system.</dd> - <dt>{{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}}</dt> - <dd>Returns a reference to a {{domxref("DOMQuad")}} object, which provides represents a quadrilaterial object, that is one having four corners and four sides.</dd> - <dt>{{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}}</dt> - <dd>Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle.</dd> - <dt>{{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> - <dd>Returns a reference to a {{domxref("DOMRectReadOnly")}} object, which represents a rectangle.</dd> - <dt>{{domxref("Window.event")}} {{ReadOnlyInline}}</dt> - <dd>Returns the <strong>current event</strong>, which is the event currently being handled by the JavaScript code's context, or <code>undefined</code> if no event is currently being handled. The {{domxref("Event")}} object passed directly to event handlers should be used instead whenever possible.</dd> - <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt> - <dd>Returns the element in which the window is embedded, or null if the window is not embedded.</dd> - <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt> - <dd>Returns an array of the subframes in the current window.</dd> - <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt> - <dd>This property indicates whether the window is displayed in full screen or not.</dd> - <dt>{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt> - <dd>Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.<br> - Was: Multiple storage objects that are used for storing data across multiple pages.</dd> - <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt> - <dd>Returns a reference to the history object.</dd> - <dt>{{domxref("Window.innerHeight")}} {{readOnlyInline}}</dt> - <dd>Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.</dd> - <dt>{{domxref("Window.innerWidth")}} {{readOnlyInline}}</dt> - <dd>Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.</dd> - <dt>{{domxref("Window.isSecureContext")}} {{experimental_inline}} {{readOnlyInline}}</dt> - <dd>Indicates whether a context is capable of using features that require secure contexts.</dd> - <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt> - <dd>Returns the number of frames in the window. See also {{domxref("window.frames")}}.</dd> - <dt>{{domxref("Window.location")}}</dt> - <dd>Gets/sets the location, or current URL, of the window object.</dd> - <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt> - <dd>Returns the locationbar object, whose visibility can be toggled in the window.</dd> - <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}} {{gecko_minversion_inline("1.9.1")}}</dt> - <dd>Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.</dd> - <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt> - <dd>Returns the menubar object, whose visibility can be toggled in the window.</dd> - <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Returns the <a href="/en-US/docs/The_message_manager">message manager</a> object for this window.</dd> - <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}} {{Deprecated_inline}}</dt> - <dd>The time in milliseconds since epoch at which the current animation cycle began. Use {{domxref("Animation.startTime")}} instead.</dd> - <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}} {{non-standard_inline}} {{gecko_minversion_inline("1.9.2")}}</dt> - <dd>Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.</dd> - <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}} {{gecko_minversion_inline("1.9.2")}}</dt> - <dd>Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> for a conversion factor to adapt to screen pixels if needed.</dd> - <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}} {{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.</dd> - <dt>{{domxref("Window.name")}}</dt> - <dd>Gets/sets the name of the window.</dd> - <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt> - <dd>Returns a reference to the navigator object.</dd> - <dt>{{domxref("Window.opener")}}</dt> - <dd>Returns a reference to the window that opened this current window.</dd> - <dt>{{domxref("Window.orientation")}} {{non-standard_inline}} {{deprecated_inline}} {{readOnlyInline}}</dt> - <dd>Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.</dd> - <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt> - <dd>Gets the height of the outside of the browser window.</dd> - <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt> - <dd>Gets the width of the outside of the browser window.</dd> - <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt> - <dd>An alias for {{domxref("window.scrollX")}}.</dd> - <dt>{{domxref("Window.scrollY","Window.pageYOffset")}} {{readOnlyInline}}</dt> - <dd>An alias for {{domxref("window.scrollY")}}</dd> - <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt> - <dd>Returns a reference to the parent of the current window or subframe.</dd> - <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt> - <dd>Returns a {{domxref("Performance")}} object, which includes the {{domxref("Performance.timing", "timing")}} and {{domxref("Performance.navigation", "navigation")}} attributes, each of which is an object providing <a href="/en-US/docs/Navigation_timing">performance-related</a> data. See also <a href="/en-US/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing">Using Navigation Timing</a> for additional information and examples.</dd> - <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt> - <dd>Returns the personalbar object, whose visibility can be toggled in the window.</dd> - <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt> - <dd>Formerly provided access to install and remove PKCS11 modules.</dd> - <dt>{{domxref("Window.returnValue")}}</dt> - <dd>The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.</dd> - <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt> - <dd>Returns a reference to the screen object associated with the window.</dd> - <dt>{{domxref("Window.screenX")}} and {{domxref("Window.screenLeft")}} {{readOnlyInline}}</dt> - <dd>Both properties return the horizontal distance from the left border of the user's browser viewport to the left side of the screen.</dd> - <dt>{{domxref("Window.screenY")}} and {{domxref("Window.screenTop")}} {{readOnlyInline}}</dt> - <dd>Both properties return the vertical distance from the top border of the user's browser viewport to the top side of the screen.</dd> - <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt> - <dd>Returns the scrollbars object, whose visibility can be toggled in the window.</dd> - <dt>{{domxref("Window.scrollMaxX")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> - <dd>The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.</dd> - <dt>{{domxref("Window.scrollMaxY")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> - <dd>The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).</dd> - <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt> - <dd>Returns the number of pixels that the document has already been scrolled horizontally.</dd> - <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt> - <dd>Returns the number of pixels that the document has already been scrolled vertically.</dd> - <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt> - <dd>Returns an object reference to the window object itself.</dd> - <dt>{{domxref("Window.sessionStorage")}}</dt> - <dd>Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.</dd> - <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> - <dd>Returns a reference to the window object of the sidebar.</dd> - <dt>{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}</dt> - <dd>Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> speech synthesis functionality.</dd> - <dt>{{domxref("Window.status")}}</dt> - <dd>Gets/sets the text in the statusbar at the bottom of the browser.</dd> - <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt> - <dd>Returns the statusbar object, whose visibility can be toggled in the window.</dd> - <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt> - <dd>Returns the toolbar object, whose visibility can be toggled in the window.</dd> - <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt> - <dd>Returns a reference to the topmost window in the window hierarchy. This property is read only.</dd> - <dt>{{domxref("Window.visualViewport")}} {{readOnlyInline}}</dt> - <dd>Returns a {{domxref("VisualViewport")}} object which represents the visual viewport for a given window.</dd> - <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt> - <dd>Returns a reference to the current window.</dd> - <dt><code>window[0]</code>, <code>window[1]</code>, etc.</dt> - <dd>Returns a reference to the <code>window</code> object in the frames. See {{domxref("Window.frames")}} for more details.</dd> -</dl> - -<h3 id="Properties_implemented_from_elsewhere">Properties implemented from elsewhere</h3> - -<dl> - <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt> - <dd>Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt> - <dd>Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an {{domxref("IDBFactory")}} object.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt> - <dd>Returns a boolean indicating whether the current context is secure (<code>true</code>) or not (<code>false</code>).</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt> - <dd>Returns the global object's origin, serialized as a string. (This does not yet appear to be implemented in any browser.)</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("EventTarget")}}.</em></p> - -<dl> - <dt>{{domxref("Window.alert()")}}</dt> - <dd>Displays an alert dialog.</dd> - <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Moves back one in the window history. This method is obsolete; you should instead use {{domxref("History.back", "window.history.back()")}}.</dd> - <dt>{{domxref("Window.blur()")}}</dt> - <dd>Sets focus away from the window.</dd> - <dt>{{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}</dt> - <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestAnimationFrame")}}.</dd> - <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt> - <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.</dd> - <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt> - <dd>Registers the window to capture all events of the specified type.</dd> - <dt>{{domxref("Window.clearImmediate()")}}</dt> - <dd>Cancels the repeated execution set using <code>setImmediate</code>.</dd> - <dt>{{domxref("Window.close()")}}</dt> - <dd>Closes the current window.</dd> - <dt>{{domxref("Window.confirm()")}}</dt> - <dd>Displays a dialog with a message that the user needs to respond to.</dd> - <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.dispatchEvent()")}}</dt> - <dd>Used to trigger an event.</dd> - <dt>{{domxref("Window.dump()")}} {{Non-standard_inline}}</dt> - <dd>Writes a message to the console.</dd> - <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.find()")}}</dt> - <dd>Searches for a given string in a window.</dd> - <dt>{{domxref("Window.focus()")}}</dt> - <dd>Sets focus on the current window.</dd> - <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Moves the window one document forward in the history. This method is obsolete; you should instead use {{domxref("History.forward", "window.history.forward()")}}.</dd> - <dt>{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Flashes the application icon.</dd> - <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.getComputedStyle()")}}</dt> - <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd> - <dt>{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}</dt> - <dd>Gets default computed style for the specified element, ignoring author stylesheets.</dd> - <dt>{{domxref("Window.getSelection()")}}</dt> - <dd>Returns the selection object representing the selected item(s).</dd> - <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Returns the browser to the home page.</dd> - <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt> - <dd>Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.</dd> - <dt>{{domxref("Window.maximize()")}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt> - <dd>Minimizes the window.</dd> - <dt>{{domxref("Window.moveBy()")}}</dt> - <dd>Moves the current window by a specified amount.</dd> - <dt>{{domxref("Window.moveTo()")}}</dt> - <dd>Moves the window to the specified coordinates.</dd> - <dt>{{domxref("Window.open()")}}</dt> - <dd>Opens a new window.</dd> - <dt>{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> - <dd>Opens a new dialog window.</dd> - <dt>{{domxref("Window.postMessage()")}}</dt> - <dd>Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.</dd> - <dt>{{domxref("Window.print()")}}</dt> - <dd>Opens the Print Dialog to print the current document.</dd> - <dt>{{domxref("Window.prompt()")}}</dt> - <dd>Returns the text entered by the user in a prompt dialog.</dd> - <dt>{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt> - <dd>Releases the window from trapping events of a specific type.</dd> - <dt>{{domxref("Window.requestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame.</dd> - <dt>{{domxref("Window.requestIdleCallback()")}} {{experimental_inline}}</dt> - <dd>Enables the scheduling of tasks during a browser's idle periods.</dd> - <dt>{{domxref("Window.resizeBy()")}}</dt> - <dd>Resizes the current window by a certain amount.</dd> - <dt>{{domxref("Window.resizeTo()")}}</dt> - <dd>Dynamically resizes window.</dd> - <dt>{{domxref("Window.restore()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt> - <dd>{{todo("NeedsContents")}}</dd> - <dt>{{domxref("Window.scroll()")}}</dt> - <dd>Scrolls the window to a particular place in the document.</dd> - <dt>{{domxref("Window.scrollBy()")}}</dt> - <dd>Scrolls the document in the window by the given amount.</dd> - <dt>{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}</dt> - <dd>Scrolls the document by the given number of lines.</dd> - <dt>{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}</dt> - <dd>Scrolls the current document by the specified number of pages.</dd> - <dt>{{domxref("Window.scrollTo()")}}</dt> - <dd>Scrolls to a particular set of coordinates in the document.</dd> - <dt>{{domxref("Window.setCursor()")}} {{Non-standard_inline}} (top-level XUL windows only)</dt> - <dd>Changes the cursor for the current window</dd> - <dt>{{domxref("Window.setImmediate()")}}</dt> - <dd>Executes a function after the browser has finished other heavy tasks</dd> - <dt>{{domxref("Window.setResizable()")}} {{Non-standard_inline}}</dt> - <dd>Toggles a user's ability to resize a window.</dd> - <dt>{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}</dt> - <dd>Sizes the window according to its content.</dd> - <dt>{{domxref("Window.stop()")}}</dt> - <dd>This method stops window loading.</dd> - <dt>{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}</dt> - <dd>Updates the state of commands of the current chrome window (UI).</dd> -</dl> - -<h3 id="Methods_implemented_from_elsewhere">Methods implemented from elsewhere</h3> - -<dl> - <dt>{{domxref("EventTarget.addEventListener()")}}</dt> - <dd>Register an event handler to a specific event type on the window.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt> - <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt> - <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt> - <dd>Cancels the repeated execution set using {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt> - <dd>Cancels the delayed execution set using {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt> - <dd>Accepts a variety of different image sources, and returns a {{domxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at <em>(sx, sy)</em> with width sw, and height sh.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt> - <dd>Starts the process of fetching a resource from the network.</dd> - <dt>{{domxref("EventTarget.removeEventListener")}}</dt> - <dd>Removes an event listener from the window.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt> - <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd> - <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt> - <dd>Schedules a function to execute in a given amount of time.</dd> -</dl> - -<h3 id="Obsolete_methods">Obsolete methods</h3> - -<dl> - <dt>{{domxref("Window.showModalDialog()")}} {{obsolete_inline}}</dt> - <dd>Displays a modal dialog. <strong>This method was removed completely in Chrome 43, and Firefox 55.</strong></dd> -</dl> - -<h2 id="Event_handlers">Event handlers</h2> - -<p>These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.</p> - -<p><em>This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.</em></p> - -<div class="note"> -<p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, you can now use the syntax <code>if ("onabort" in window)</code> to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See <a href="/en-US/docs/DOM/DOM_event_handlers">DOM event handlers</a> for details.</p> -</div> - -<dl> - <dt>{{domxref("Window.onappinstalled")}}</dt> - <dd>Called when the page is installed as a webapp. See {{event('appinstalled')}} event.</dd> - <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt> - <dd>An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.</dd> - <dt>{{domxref("Window.ondevicelight")}}</dt> - <dd>An event handler property for any ambient light levels changes</dd> - <dt>{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt> - <dd>Called if accelerometer detects a change (For mobile devices)</dd> - <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt> - <dd>Called when the orientation is changed (For mobile devices)</dd> - <dt>{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only</dt> - <dd>An event handler property for any device orientation changes.</dd> - <dt>{{domxref("Window.ondeviceproximity")}}</dt> - <dd>An event handler property for device proximity event</dd> - <dt>{{domxref("Window.ongamepadconnected")}}</dt> - <dd>Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).</dd> - <dt>{{domxref("Window.ongamepaddisconnected")}}</dt> - <dd>Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).</dd> - <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>An event handler property for the <code>MozBeforePaint</code> event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.</dd> - <dt>{{domxref("Window.onpaint")}}</dt> - <dd>An event handler property for paint events on the window.</dd> - <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt> - <dd>An event handler for handled {{jsxref("Promise")}} rejection events.</dd> - <dt>{{domxref("Window.onuserproximity")}}</dt> - <dd>An event handler property for user proximity events.</dd> - <dt>{{domxref("Window.onvrdisplayconnect")}}</dt> - <dd>Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).</dd> - <dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt> - <dd>Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).</dd> - <dt>{{domxref("Window.onvrdisplayactivate")}}</dt> - <dd>Represents an event handler that will run when a display is able to be presented to (when the {{event("vrdisplayactivate")}} event fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on.</dd> - <dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt> - <dd>Represents an event handler that will run when a display can no longer be presented to (when the {{event("vrdisplaydeactivate")}} event fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity.</dd> - <dt>{{domxref("Window.onvrdisplayblur")}}</dt> - <dd>Represents an event handler that will run when presentation to a display has been paused for some reason by the browser, OS, or VR hardware (when the {{event("vrdisplayblur")}} event fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.</dd> - <dt>{{domxref("Window.onvrdisplayfocus")}}</dt> - <dd>Represents an event handler that will run when presentation to a display has resumed after being blurred (when the {{event("vrdisplayfocus")}} event fires).</dd> - <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt> - <dd>represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("vrdisplaypresentchange")}} event fires).</dd> -</dl> - -<h3 id="Event_handlers_implemented_from_elsewhere">Event handlers implemented from elsewhere</h3> - -<dl> - <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> - <dd>Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress</dd> - <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt> - <dd>Called when the print dialog box is closed. See {{event("afterprint")}} event.</dd> - <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt> - <dd>Called when the print dialog box is opened. See {{event("beforeprint")}} event.</dd> - <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt> - <dd>An event handler property for before-unload events on the window.</dd> - <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> - <dd>Called after the window loses focus, such as due to a popup.</dd> - <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> - <dd>An event handler property for change events on the window.</dd> - <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> - <dd>Called after the ANY mouse button is pressed & released</dd> - <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt> - <dd>Called when a double click is made with ANY mouse button.</dd> - <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> - <dd>Called after the window is closed</dd> - <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> - <dd>Called when the RIGHT mouse button is pressed</dd> - <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> - <dd>Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.</dd> - <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> - <dd>Called after the window receives or regains focus. See {{event("focus")}} events.</dd> - <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt> - <dd>An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.</dd> - <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt> - <dd>Called when the value of an <input> element changes</dd> - <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt> - <dd>Called when you begin pressing ANY key. See {{event("keydown")}} event.</dd> - <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt> - <dd>Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.</dd> - <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt> - <dd>Called when you finish releasing ANY key. See {{event("keyup")}} event.</dd> - <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt> - <dd>An event handler property for {{event("languagechange")}} events on the window.</dd> - <dt>{{domxref("GlobalEventHandlers.onload")}}</dt> - <dd>Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.</dd> - <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.</dd> - <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt> - <dd>Called when ANY mouse button is pressed.</dd> - <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> - <dd>Called continously when the mouse is moved inside the window.</dd> - <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt> - <dd>Called when the pointer leaves the window.</dd> - <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt> - <dd>Called when the pointer enters the window</dd> - <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt> - <dd>Called when ANY mouse button is released</dd> - <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt> - <dd>Called when network connection is lost. See {{event("offline")}} event.</dd> - <dt>{{domxref("WindowEventHandlers.ononline")}}</dt> - <dd>Called when network connection is established. See {{event("online")}} event.</dd> - <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt> - <dd>Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.</dd> - <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt> - <dd>Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.</dd> - <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt> - <dd>Called when a back button is pressed.</dd> - <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt> - <dd>Called when a form is reset</dd> - <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt> - <dd>Called continuously as you are resizing the window.</dd> - <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> - <dd>Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked</dd> - <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt> - <dd>Called when the mouse wheel is rotated around any axis</dd> - <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> - <dd>Called after text in an input field is selected</dd> - <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt> - <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd> - <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt> - <dd>Called when there is a change in session storage or local storage. See {{event("storage")}} event</dd> - <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> - <dd>Called when a form is submitted</dd> - <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt> - <dd>An event handler for unhandled {{jsxref("Promise")}} rejection events.</dd> - <dt>{{domxref("WindowEventHandlers.onunload")}}</dt> - <dd>Called when the user navigates away from the page.</dd> -</dl> - -<h2 id="Events">Events</h2> - -<p>Listen to these events using <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p> - -<dl> - <dt><code><a href="/en-US/docs/Web/API/Window/error_event">error</a></code></dt> - <dd>Fired when when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.<br> - Also available via the {{domxref("GlobalEventHandlers/onerror", "onerror")}} property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/languagechange_event">languagechange</a></code></dt> - <dd>Fired at the global scope object when the user's preferred language changes.<br> - Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onlanguagechange">onlanguagechange</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/orientationchange_event">orientationchange</a></code></dt> - <dd>Fired when the orientation of the device has changed.<br> - Also available via the <code><a href="/en-US/docs/Web/API/Window/onorientationchange">onorientationchange</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/devicemotion_event">devicemotion</a></code></dt> - <dd>Fired at a regular interval, indicating the amount of physical force of acceleration the device is receiving and the rate of rotation, if available.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/deviceorientation_event">deviceorientation</a></code></dt> - <dd>Fired when fresh data is available from the magnetometer orientation sensor about the current orientation of the device as compared to the Earth coordinate frame.</dd> - <dt><code>{{domxref("Document/defaultView/resize_event", "resize")}}</code></dt> - <dd>Fired when the window has been resized.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onresize">onresize</a></code> property.</dd> - <dt><code>{{domxref("Document/defaultView/storage_event", "storage")}}</code></dt> - <dd>Fired when a storage area (<code>localStorage</code> or <code>sessionStorage</code>) has been modified in the context of another document.<br> - Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onstorage">onstorage</a></code> property.</dd> -</dl> - -<h3 id="Animation_events">Animation events</h3> - -<dl> - <dt><code><a href="/en-US/docs/Web/API/Window/animationcancel_event">animationcancel</a></code></dt> - <dd>Fired when an animation unexpectedly aborts.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationcancel">onanimationcancel</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/animationend_event">animationend</a></code></dt> - <dd>Fired when an animation has completed normally.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationend">onanimationend</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/animationiteration_event">animationiteration</a></code></dt> - <dd>Fired when an animation iteration has completed.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationiteration">onanimationiteration</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/animationstart_event">animationstart</a></code></dt> - <dd>Fired when an animation starts.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationstart">onanimationstart</a></code> property.</dd> -</dl> - -<h3 id="Clipboard_events">Clipboard events</h3> - -<dl> - <dt><code><a href="/en-US/docs/Web/API/Window/clipboardchange_event">clipboardchange</a></code></dt> - <dd>Fired when the system clipboard content changes.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/copy_event">copy</a></code></dt> - <dd>Fired when the user initiates a copy action through the browser's user interface.<br> - Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy"><code>oncopy</code></a> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/cut_event">cut</a></code></dt> - <dd>Fired when the user initiates a cut action through the browser's user interface.<br> - Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut"><code>oncut</code></a> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/paste_event">paste</a></code></dt> - <dd>Fired when the user initiates a paste action through the browser's user interface.<br> - Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste"><code>onpaste</code></a> property.</dd> -</dl> - -<h3 id="Connection_events">Connection events</h3> - -<dl> - <dt><code><a href="/en-US/docs/Web/API/Window/offline_event">offline</a></code></dt> - <dd>Fired when the browser has lost access to the network and the value of <code>navigator.onLine</code> has switched to <code>false</code>.<br> - Also available via the {{domxref("WindowEventHandlers.onoffline", "onoffline")}} property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/online_event">online </a></code></dt> - <dd>Fired when the browser has gained access to the network and the value of <code>navigator.onLine</code> has switched to <code>true</code>.<br> - Also available via the {{domxref("WindowEventHandlers.ononline", "ononline")}} property.</dd> -</dl> - -<h3 id="Focus_events">Focus events</h3> - -<dl> - <dt><code><a href="/en-US/docs/Web/API/Window/blur_event">blur</a></code></dt> - <dd>Fired when an element has lost focus.<br> - Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onblur"><code>onblur</code></a> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/focus_event">focus</a></code></dt> - <dd>Fired when an element has gained focus.<br> - Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onfocus"><code>onfocus</code></a> property</dd> -</dl> - -<h3 id="Gamepad_events">Gamepad events</h3> - -<dl> - <dt><code><a href="/en-US/docs/Web/API/Window/gamepadconnected_event">gamepadconnected</a></code></dt> - <dd>Fired when the browser detects that a gamepad has been connected or the first time a button/axis of the gamepad is used.<br> - Also available via the <code><a href="/en-US/docs/Web/API/Window/ongamepadconnected">ongamepadconnected</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/gamepaddisconnected_event">gamepaddisconnected</a></code></dt> - <dd>Fired when the browser detects that a gamepad has been disconnected.<br> - Also available via the <code><a href="/en-US/docs/Web/API/Window/ongamepaddisconnected">ongamepaddisconnected</a></code> property</dd> -</dl> - -<h3 id="History_events">History events</h3> - -<dl> - <dt><code><a href="/en-US/docs/Web/API/Window/hashchange_event">hashchange</a></code></dt> - <dd>Fired when the fragment identifier of the URL has changed (the part of the URL beginning with and following the <code>#</code> symbol).<br> - Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onhashchange">onhashchange</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/pagehide_event">pagehide</a></code></dt> - <dd>Sent when the browser hides the current document while in the process of switching to displaying in its palce a different document from the session's history. This happens, for example, when the user clicks the Back button or when they click the Forward button to move ahead in session history.<br> - Also available through the <code><a href="/en-US/docs/Mozilla/Tech/XUL/Attribute/onpagehide">onpagehide</a></code> event handler property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/pageshow_event">pageshow</a></code></dt> - <dd>Sent when the browser makes the document visible due to navigation tasks, including not only when the page is first loaded, but also situations such as the user navigating back to the page after having navigated to another within the same tab.<br> - Also available using the <code><a href="/en-US/docs/Mozilla/Tech/XUL/Attribute/onpageshow">onpageshow</a></code> event handler property.</dd> - <dt><code>{{domxref("Document/defaultView/popstate_event", "popstate")}}</code></dt> - <dd>Fired when the active history entry changes.<br> - Also available using the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onpopstate">onpopstate</a></code> event handler property.</dd> -</dl> - -<h3 id="Load_unload_events">Load & unload events</h3> - -<dl> - <dt><code><a href="/en-US/docs/Web/API/Window/beforeunload_event">beforeunload</a></code></dt> - <dd>Fired when the window, the document and its resources are about to be unloaded.<br> - Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload">onbeforeunload</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/DOMContentLoaded_event">DOMContentLoaded</a></code></dt> - <dd>Fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/load_event">load</a></code></dt> - <dd>Fired when the whole page has loaded, including all dependent resources such as stylesheets images.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/unload_event">unload</a></code></dt> - <dd>Fired when the document or a child resource is being unloaded.<br> - Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onunload">onunload</a></code> property.</dd> -</dl> - -<h3 id="Manifest_events">Manifest events</h3> - -<dl> - <dt><code><a href="/en-US/docs/Web/API/Window/appinstalled_event">appinstalled</a></code></dt> - <dd>Fired when the browser has successfully installed a page as an application.<br> - Also available via the <a href="/en-US/docs/Web/API/Window/onappinstalled">onappinstalled</a> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/beforeinstallprompt_event">beforeinstallprompt</a></code></dt> - <dd>Fired when a user is about to be prompted to install a web application.<br> - Also available via the <code><a href="/en-US/docs/Web/API/Window/onbeforeinstallprompt">onbeforeinstallprompt</a></code> property.</dd> -</dl> - -<h3 id="Messaging_events">Messaging events</h3> - -<dl> - <dt><code><a href="/en-US/docs/Web/API/Window/message_event">message</a></code></dt> - <dd>Fired when the window receives a message, for example from a call to <code><a href="/en-US/docs/Web/API/Window/postMessage">Window.postMessage()</a></code> from another browsing context.<br> - Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onmessage">onmessage</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/messageerror_event">messageerror</a></code></dt> - <dd>Fired when a <code>Window</code> object receives a message that can't be deserialized.<br> - Also available via the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onmessageerror">onmessageerror</a></code> property.</dd> -</dl> - -<h3 id="Print_events">Print events</h3> - -<dl> - <dt><code><a href="/en-US/docs/Web/API/Window/afterprint_event">afterprint</a></code></dt> - <dd>Fired after the associated document has started printing or the print preview has been closed.<br> - Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onafterprint"><code>onafterprint</code></a> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/beforeprint_event">beforeprint</a></code></dt> - <dd>Fired when the associated document is about to be printed or previewed for printing.<br> - Also available via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint"><code>onbeforeprint</code></a> property.</dd> -</dl> - -<h3 id="Promise_rejection_events">Promise rejection events</h3> - -<dl> - <dt><code><a href="/en-US/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a></code></dt> - <dd>Sent every time a JavaScript {{jsxref("Promise")}} is rejected, regardless of whether or not there is a handler in place to catch the rejection.<br> - Also available through the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onrejectionhandled">onrejectionhandled</a></code> event handler property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a></code></dt> - <dd>Sent when a JavaScript {{jsxref("Promise")}} is rejected but there is no handler in place to catch the rejection.<br> - Also available using the <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onunhandledrejection">onunhandledrejection</a></code> event handler property.</dd> -</dl> - -<h3 id="Transition_events">Transition events</h3> - -<dl> - <dt><code><a href="/en-US/docs/Web/API/Window/transitioncancel_event">transitioncancel</a></code></dt> - <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> is canceled.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitioncancel">ontransitioncancel</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/transitionend_event">transitionend</a></code></dt> - <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> has completed.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend">ontransitionend</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/transitionrun_event">transitionrun</a></code></dt> - <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> is first created.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitionrun">ontransitionrun</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/transitionstart_event">transitionstart</a></code></dt> - <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> has actually started.<br> - Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitionstart">ontransitionstart</a></code> property.</dd> -</dl> - -<h3 id="WebVR_events">WebVR events</h3> - -<dl> - <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplayactivate_event">vrdisplayactivate</a></code></dt> - <dd>Fired when a VR display becomes available to be presented to, for example if an HMD has been moved to bring it out of standby, or woken up by being put on.<br> - Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplayactivate">onvrdisplayactivate</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplayblur_event">vrdisplayblur</a></code></dt> - <dd>Fired when presentation to a VR display has been paused for some reason by the browser, OS, or VR hardware.<br> - Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplayblur">onvrdisplayblur</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplayconnect_event">vrdisplayconnect</a></code></dt> - <dd>Fired when a compatible VR display is connected to the computer.<br> - Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplayconnect">onvrdisplayconnect</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplaydeactivate_event">vrdisplaydeactivate</a></code></dt> - <dd>Fired when a VR display can no longer be presented to, for example if an HMD has gone into standby or sleep mode due to a period of inactivity.<br> - Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplaydeactivate">onvrdisplaydeactivate</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplaydisconnect_event">vrdisplaydisconnect</a></code></dt> - <dd>Fired when a compatible VR display is disconnected from the computer.<br> - Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplaydisconnect">onvrdisplaydisconnect</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplayfocus_event">vrdisplayfocus</a></code></dt> - <dd>Fired when presentation to a VR display has resumed after being blurred.<br> - Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplayfocus">onvrdisplayfocus</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplaypresentchange_event">vrdisplaypresentchange</a></code></dt> - <dd>fired when the presenting state of a VR display changes — i.e. goes from presenting to not presenting, or vice versa.<br> - Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplaypresentchange">onvrdisplaypresentchange</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplaypointerrestricted_event">vrdisplaypointerrestricted</a></code></dt> - <dd>Fired when the VR display's pointer input is restricted to consumption via a <a href="/en-US/docs/Web/API/Pointer_Lock_API">pointerlocked element</a>.<br> - Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplaypointerrestricted">onvrdisplaypointerrestricted</a></code> property.</dd> - <dt><code><a href="/en-US/docs/Web/API/Window/vrdisplaypointerunrestricted_event">vrdisplaypointerunrestricted</a></code></dt> - <dd>Fired when the VR display's pointer input is no longer restricted to consumption via a <a href="/en-US/docs/Web/API/Pointer_Lock_API">pointerlocked element</a>.<br> - Also available via the <code><a href="/en-US/docs/Web/API/Window/onvrdisplaypointerunrestricted">onvrdisplaypointerunrestricted</a></code> property.</dd> -</dl> - -<h2 id="Interfaces">Interfaces</h2> - -<p>See <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a></p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Window")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Working_with_windows_in_chrome_code">Working with windows in chrome code</a></li> -</ul> diff --git a/files/vi/web/api/window/load_event/index.html b/files/vi/web/api/window/load_event/index.html deleted file mode 100644 index ec1d576ff4..0000000000 --- a/files/vi/web/api/window/load_event/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: load -slug: Web/API/Window/load_event -tags: - - DOM - - Event - - Sự kiện -translation_of: Web/API/Window/load_event -original_slug: Web/Events/load ---- -<p>Sự kiện <strong><code>load</code></strong> có hiệu lực (được kích hoạt) khi các tài nguyên của một đối tượng hoặc các tài nguyên phụ thuộc vào đối tượng đó đã được tải nạp hoàn tất.</p> - -<h2 id="Các_ví_dụ">Các ví dụ</h2> - -<h3 class="brush: html" id="Window">Window</h3> - -<pre class="brush: html"><script> - window.addEventListener("load", function(event) { - console.log("Tất cả các tài nguyên đã được tải nạp hoàn tất!"); - }); -</script></pre> - -<h3 class="brush: html" id="Phần_tử_script">Phần tử <code>script</code></h3> - -<pre class="brush: html"><script> - var script = document.createElement("script"); - script.addEventListener("load", function(event) { - console.log("Script đã được tải nạp xong và thực thi"); - }); - script.src = "http://example.com/example.js"; - script.async = true; - document.getElementsByTagName("script")[0].parentNode.appendChild(script); -</script></pre> - -<h2 id="Thông_tin_cơ_bản">Thông tin cơ bản</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Specification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Giao diện</dt> - <dd style="margin: 0 0 0 120px;">UIEvent</dd> - <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> - <dd style="margin: 0 0 0 120px;">Không</dd> - <dt style="float: left; text-align: right; width: 120px;">Có thể hủy bỏ</dt> - <dd style="margin: 0 0 0 120px;">Không thể</dd> - <dt style="float: left; text-align: right; width: 120px;">Đối tượng</dt> - <dd style="margin: 0 0 0 120px;">Window, Document, Element</dd> - <dt style="float: left; text-align: right; width: 120px;">Hành động mặc địch</dt> - <dd style="margin: 0 0 0 120px;">Không.</dd> -</dl> - -<h2 id="Các_thuộc_tính">Các thuộc tính</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Thuộc tính</th> - <th scope="col">Kiểu / Loại</th> - <th scope="col">Mô tả</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td><code>{{domxref("EventTarget")}}</code></td> - <td>Mục tiêu để áp dụng sự kiện (Đối tượng thuộc cây DOM).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td><code>{{domxref("DOMString")}}</code></td> - <td>Loại sự kiện</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td><code>{{domxref("Boolean")}}</code></td> - <td>Xác định sự kiện bình thường có bubbles hay không.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td><code>{{domxref("Boolean")}}</code></td> - <td>Xác định sự kiện liệu có thể hủy bỏ được hay không.</td> - </tr> - <tr> - <td><code>view</code> {{readonlyInline}}</td> - <td><code>{{domxref("WindowProxy")}}</code></td> - <td><code>{{domxref("Document.defaultView", "document.defaultView")}}</code> (<code>window</code> of the document)</td> - </tr> - <tr> - <td><code>detail</code> {{readonlyInline}}</td> - <td><code>long</code> (<code>float</code>)</td> - <td>0.</td> - </tr> - </tbody> -</table> - -<h2 id="Các_thông_số_kỹ_thuật">Các thông số kỹ thuật</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Thông số</th> - <th scope="col">Trạng thái</th> - <th scope="col">Diễn giải</th> - </tr> - <tr> - <td>{{SpecName('UI Events', '#event-type-load', 'load')}}</td> - <td>{{Spec2('UI Events')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-load', 'Load event')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Liên kết này đưa đến phần giải thích các bước được thực hiện khi quá trình tải nạp tài liệu kết thúc. Sự kiện 'load' cũng được kích hoạt ở nhiều phần tử. Và lưu ý rằng có nhiều chỗ trong Thông số kỹ thuật đề cập đến những thứ mà có thể "<a href="https://html.spec.whatwg.org/multipage/parsing.html#delay-the-load-event">Trì hoãn sự kiện load</a>".</td> - </tr> - </tbody> -</table> - -<h2 id="Các_sự_kiện_liên_quan">Các sự kiện liên quan</h2> - -<ul> - <li>{{event("DOMContentLoaded")}}</li> - <li>{{event("readystatechange")}}</li> - <li>{{event("beforeunload")}}</li> - <li>{{event("unload")}}</li> -</ul> diff --git a/files/vi/web/api/window/prompt/index.html b/files/vi/web/api/window/prompt/index.html deleted file mode 100644 index 9830f0cb7c..0000000000 --- a/files/vi/web/api/window/prompt/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Window.prompt() -slug: Web/API/Window/prompt -translation_of: Web/API/Window/prompt ---- -<div>{{ApiRef("Window")}}</div> - -<p>Câu lệnh <code>Window.prompt()</code> hiển thị một cửa sổ yêu cầu người dùng nhập liệu vào.</p> - -<h2 id="Syntax" name="Syntax">Cú pháp</h2> - -<pre class="syntaxbox"><em>result</em> = window.prompt(<em>message</em>, <em>default</em>); -</pre> - -<h3 id="Các_tham_số">Các tham số</h3> - -<dl> - <dt><code>message</code> {{optional_inline}}</dt> - <dd>Là một dòng thông báo hiện ra cho người dùng xem. Có thể bỏ trống không cần nhập.</dd> - <dt><code>default</code> {{optional_inline}}</dt> - <dd>Là giá trị mặc định hiển thị ở khung nhập liệu. Lưu ý nếu bạn dùng Internet Explorer 7 hoặc 8, nếu không cung cấp tham số này, thì giá trị mặc định sẽ là <code>"undefined"</code></dd> -</dl> - -<h3 id="Giá_trị_trả_về">Giá trị trả về</h3> - -<p>Trả về chuỗi text hoặc <code>null</code>.</p> - -<h2 id="Example" name="Example">Example</h2> - -<pre class="brush: js">let sign = prompt("What's your sign?"); - -if (sign.toLowerCase() == "scorpio") { - alert("Wow! I'm a Scorpio too!"); -} - -// Có nhiều cách để sử dụng prompt() -sign = window.prompt(); // open the blank prompt window -sign = prompt(); // open the blank prompt window -sign = window.prompt('Are you feeling lucky'); // open the window with Text "Are you feeling lucky" -sign = window.prompt('Are you feeling lucky', 'sure'); // open the window with Text "Are you feeling lucky" and default value "sure"</pre> - -<p>Khi người dùng ấn OK, giá trị họ nhập vào sẽ là giá trị trả về ở dạng chuỗi text. Nếu họ nhấn OK mà chưa nhập gì thì sẽ trả về chuỗi rỗng. Và nếu họ bấm Cancel thì sẽ trả về <code>null</code>.</p> - -<p>Giao diện cửa sổ prompt (trình duyệt Chrome trên OS X):</p> - -<p><a href="https://mdn.mozillademos.org/files/11303/prompt.png"><img alt="prompt() dialog in Chrome on OS X" src="https://mdn.mozillademos.org/files/11303/prompt.png" style="height: 298px; width: 535px;"></a></p> - -<h2 id="Notes" name="Notes">Các lưu ý</h2> - -<p>Cửa sổ prompt chứa 1 textbox một dòng, 1 nút OK và 1 nút Cancel, và trả về giá trị người dùng nhập vào (có thể rỗng).</p> - -<p><span class="comment">The following text is shared between this article, DOM:window.confirm and DOM:window.alert</span> Dialog boxes are modal windows; chúng sẽ ngăn người dùng truy cập vào các nội dung khác của website cho đến khi hoàn thành thao tác với cửa sổ prompt. Chính vì vậy, bạn không nên lạm dụng nó quá mức.</p> - -<p>Giá trị trả về là chuỗi text, vì vậy nếu bạn muốn chắc chắn đó là kiểu Number thì hãy ép kiểu nó như ví dụ bên dưới:</p> - -<pre class="brush: js">const aNumber = Number(window.prompt("Type a number", ""));</pre> - -<h2 id="Specification" name="Specification">Specification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-prompt', 'prompt()')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="See_also" name="See_also">Browser Compatibility</h2> - - - -<p>{{Compat("api.Window.prompt")}}</p> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li>{{domxref("window.alert", "alert")}}</li> - <li>{{domxref("window.confirm", "confirm")}}</li> -</ul> |