From f6f11d2a249520f01bad93d7c4a5e5cdf6ed914a Mon Sep 17 00:00:00 2001
From: Peter Bengtsson You can use the Or use the In the following snippet, we create a new When the fetch request is initiated, we pass in the In the following snippet, we create a new To offer protection against timing attacks and fingerprinting, the precision of There are two ways to create an This simple snippet of code shows the creation of some audio nodes, and how the In this simple example, an event listener for the You can also set up the event handler using the {{domxref("AudioScheduledSourceNode.onended")}} property:Examples
abort
event in an addEventListener
method:var controller = new AbortController();
+
var controller = new AbortController();
var signal = controller.signal;
signal.addEventListener('abort', function() {
@@ -48,7 +48,7 @@
Examples
onabort
event handler property:var controller = new AbortController();
+
var controller = new AbortController();
var signal = controller.signal;
signal.onabort = function() {
diff --git a/files/en-us/web/api/abortsignal/aborted/index.html b/files/en-us/web/api/abortsignal/aborted/index.html
index da97f78007ef19d..4ed32312a2843d4 100644
--- a/files/en-us/web/api/abortsignal/aborted/index.html
+++ b/files/en-us/web/api/abortsignal/aborted/index.html
@@ -15,7 +15,7 @@
Syntax
-var isAborted = abortSignal.aborted;
+var isAborted = abortSignal.aborted;
Value
@@ -25,7 +25,7 @@ Examples
AbortController
object, and get its {{domxref("AbortSignal")}} (available in the signal
property). Later on we check whether or not it the signal has been aborted using the aborted
property, and send an appropriate log to the console.var controller = new AbortController();
+
var controller = new AbortController();
var signal = controller.signal;
// ...
diff --git a/files/en-us/web/api/abortsignal/index.html b/files/en-us/web/api/abortsignal/index.html
index abab62effb28786..d68921f7d414896 100644
--- a/files/en-us/web/api/abortsignal/index.html
+++ b/files/en-us/web/api/abortsignal/index.html
@@ -44,7 +44,7 @@
Examples
AbortSignal
as an option inside the request's options object (see {signal}
, below). This associates the signal and controller with the fetch request and allows us to abort it by calling {{domxref("AbortController.abort()")}}, as seen below in the second event listener.var controller = new AbortController();
+
var controller = new AbortController();
var signal = controller.signal;
var downloadBtn = document.querySelector('.download');
diff --git a/files/en-us/web/api/abortsignal/onabort/index.html b/files/en-us/web/api/abortsignal/onabort/index.html
index 82bf3c1c724d123..649e08f32f5e3ae 100644
--- a/files/en-us/web/api/abortsignal/onabort/index.html
+++ b/files/en-us/web/api/abortsignal/onabort/index.html
@@ -17,13 +17,13 @@
Syntax
-abortSignal.onabort = function() { ... };
+abortSignal.onabort = function() { ... };
Examples
AbortController
object, and get its {{domxref("AbortSignal")}} (available in the signal
property). Later on we check whether or not it the signal has been aborted using the onabort
property, and send an appropriate log to the console.var controller = new AbortController();
+
var controller = new AbortController();
var signal = controller.signal;
signal.onabort = function() {
diff --git a/files/en-us/web/api/ambient_light_events/index.html b/files/en-us/web/api/ambient_light_events/index.html
index 734c81a7a17bfbe..a684ceb59de8e63 100644
--- a/files/en-us/web/api/ambient_light_events/index.html
+++ b/files/en-us/web/api/ambient_light_events/index.html
@@ -22,7 +22,7 @@
Light Events
Example
-if ('ondevicelight' in window) {
+
if ('ondevicelight' in window) {
window.addEventListener('devicelight', function(event) {
var body = document.querySelector('body');
if (event.value < 50) {
diff --git a/files/en-us/web/api/ambientlightsensor/ambientlightsensor/index.html b/files/en-us/web/api/ambientlightsensor/ambientlightsensor/index.html
index 03d0eb12f98e8d9..06fde2debe08fc6 100644
--- a/files/en-us/web/api/ambientlightsensor/ambientlightsensor/index.html
+++ b/files/en-us/web/api/ambientlightsensor/ambientlightsensor/index.html
@@ -16,7 +16,7 @@
Syntax
-var ambientLightSensor = new AmbientLightSensor(options)
+var ambientLightSensor = new AmbientLightSensor(options)
Parameters
diff --git a/files/en-us/web/api/ambientlightsensor/illuminance/index.html b/files/en-us/web/api/ambientlightsensor/illuminance/index.html
index 77892f98d1b0935..f1353e1f4417904 100644
--- a/files/en-us/web/api/ambientlightsensor/illuminance/index.html
+++ b/files/en-us/web/api/ambientlightsensor/illuminance/index.html
@@ -20,7 +20,7 @@
Syntax
-var level = AmbientLightSensor.illuminance
+var level = AmbientLightSensor.illuminance
Value
@@ -28,7 +28,7 @@ Value
Example
-if ( 'AmbientLightSensor' in window ) {
+
if ( 'AmbientLightSensor' in window ) {
const sensor = new AmbientLightSensor();
sensor.onreading = () => {
console.log('Current light level:', sensor.illuminance);
diff --git a/files/en-us/web/api/ambientlightsensor/index.html b/files/en-us/web/api/ambientlightsensor/index.html
index 5859c3796ca2d77..fe0b0a48106f295 100644
--- a/files/en-us/web/api/ambientlightsensor/index.html
+++ b/files/en-us/web/api/ambientlightsensor/index.html
@@ -36,7 +36,7 @@
Properties
Example
-if ( 'AmbientLightSensor' in window ) {
+
if ( 'AmbientLightSensor' in window ) {
const sensor = new AmbientLightSensor();
sensor.onreading = () => {
console.log('Current light level:', sensor.illuminance);
diff --git a/files/en-us/web/api/animationeffect/getcomputedtiming/index.html b/files/en-us/web/api/animationeffect/getcomputedtiming/index.html
index 57c865ea436649b..ad3a3a7220c796b 100644
--- a/files/en-us/web/api/animationeffect/getcomputedtiming/index.html
+++ b/files/en-us/web/api/animationeffect/getcomputedtiming/index.html
@@ -29,7 +29,7 @@
Syntax
-var currentTimeValues = animation.getComputedTiming();
+var currentTimeValues = animation.getComputedTiming();
Parameters
diff --git a/files/en-us/web/api/animationeffect/gettiming/index.html b/files/en-us/web/api/animationeffect/gettiming/index.html
index 8da36a11a262891..e27f33f438eacb9 100644
--- a/files/en-us/web/api/animationeffect/gettiming/index.html
+++ b/files/en-us/web/api/animationeffect/gettiming/index.html
@@ -16,7 +16,7 @@
Syntax
-animationTiming = animation.getTiming();
+animationTiming = animation.getTiming();
Returns
diff --git a/files/en-us/web/api/animationeffect/updatetiming/index.html b/files/en-us/web/api/animationeffect/updatetiming/index.html
index a2edb50a0d798d9..7cc61b7be079819 100644
--- a/files/en-us/web/api/animationeffect/updatetiming/index.html
+++ b/files/en-us/web/api/animationeffect/updatetiming/index.html
@@ -16,7 +16,7 @@
Syntax
-animation.updateTiming(timing);
+animation.updateTiming(timing);
Parameters
diff --git a/files/en-us/web/api/animationtimeline/currenttime/index.html b/files/en-us/web/api/animationtimeline/currenttime/index.html
index 0d13bf00e23e21c..fe7b2b35151d36f 100644
--- a/files/en-us/web/api/animationtimeline/currenttime/index.html
+++ b/files/en-us/web/api/animationtimeline/currenttime/index.html
@@ -19,7 +19,7 @@
Syntax
-var currentTime = AnimationTimeline.currentTime;
+var currentTime = AnimationTimeline.currentTime;
Value
@@ -30,7 +30,7 @@ Reduced time precision
animationTimeline.currentTime
might get rounded depending on browser settings.
In Firefox, the privacy.reduceTimerPrecision
preference is enabled by default and defaults to 20us in Firefox 59; in 60 it will be 2ms.// reduced time precision (2ms) in Firefox 60
+
// reduced time precision (2ms) in Firefox 60
animationTimeline.currentTime;
// 23.404
// 24.192
diff --git a/files/en-us/web/api/audiolistener/speedofsound/index.html b/files/en-us/web/api/audiolistener/speedofsound/index.html
index fda3947c3d84643..5304f6f39b6b04f 100644
--- a/files/en-us/web/api/audiolistener/speedofsound/index.html
+++ b/files/en-us/web/api/audiolistener/speedofsound/index.html
@@ -28,7 +28,7 @@
Syntax
-var audioCtx = new AudioContext();
+
var audioCtx = new AudioContext();
var myListener = audioCtx.listener;
myListener.speedOfSound = 343.3;
diff --git a/files/en-us/web/api/audionode/connect/index.html b/files/en-us/web/api/audionode/connect/index.html
index 7ee68a6878163f4..189c6ce602e1d12 100644
--- a/files/en-us/web/api/audionode/connect/index.html
+++ b/files/en-us/web/api/audionode/connect/index.html
@@ -23,7 +23,7 @@
Syntax
-var destinationNode = AudioNode.connect(destination, outputIndex, inputIndex);
+
var destinationNode = AudioNode.connect(destination, outputIndex, inputIndex);
AudioNode.connect(destination, outputIndex);
diff --git a/files/en-us/web/api/audionode/context/index.html b/files/en-us/web/api/audionode/context/index.html
index e83c7ae223923a5..2bd232db912ea69 100644
--- a/files/en-us/web/api/audionode/context/index.html
+++ b/files/en-us/web/api/audionode/context/index.html
@@ -19,7 +19,7 @@
Syntax
var aContext = anAudioNode.context;
+ class="brush: js">var aContext = anAudioNode.context;Value
diff --git a/files/en-us/web/api/audionode/index.html b/files/en-us/web/api/audionode/index.html
index 3eeeb59a29c47f8..6c12c2837cf801b 100644
--- a/files/en-us/web/api/audionode/index.html
+++ b/files/en-us/web/api/audionode/index.html
@@ -45,7 +45,7 @@ Creating an
AudioNode
AudioNode
: via the constructor and via the factory method.// constructor
+
// constructor
const analyserNode = new AnalyserNode(audioCtx, {
fftSize: 2048,
maxDecibels: -25,
@@ -105,7 +105,7 @@
Example
AudioNode
properties and methods can be used. You can find examples of such usage on any of the examples linked to on the Web Audio API landing page (for example Violent Theremin.) const audioCtx = new AudioContext();
+
const audioCtx = new AudioContext();
const oscillator = new OscillatorNode(audioCtx);
const gainNode = new GainNode(audioCtx);
diff --git a/files/en-us/web/api/audionode/numberofinputs/index.html b/files/en-us/web/api/audionode/numberofinputs/index.html
index 31346397d940f46..2c70275b92f0dd3 100644
--- a/files/en-us/web/api/audionode/numberofinputs/index.html
+++ b/files/en-us/web/api/audionode/numberofinputs/index.html
@@ -19,7 +19,7 @@
Syntax
var numInputs = audioNode.numberOfInputs;
+ class="brush: js">var numInputs = audioNode.numberOfInputs;Value
diff --git a/files/en-us/web/api/audionode/numberofoutputs/index.html b/files/en-us/web/api/audionode/numberofoutputs/index.html
index 94ea4a238465327..c28d80e5a9ae539 100644
--- a/files/en-us/web/api/audionode/numberofoutputs/index.html
+++ b/files/en-us/web/api/audionode/numberofoutputs/index.html
@@ -19,7 +19,7 @@
Syntax
var numOutputs = audioNode.numberOfOutputs;
+ class="brush: js">var numOutputs = audioNode.numberOfOutputs;Value
diff --git a/files/en-us/web/api/audionodeoptions/index.html b/files/en-us/web/api/audionodeoptions/index.html
index 0ab616c2903ab7d..1ee62c151031d33 100644
--- a/files/en-us/web/api/audionodeoptions/index.html
+++ b/files/en-us/web/api/audionodeoptions/index.html
@@ -23,7 +23,7 @@
Syntax
-var audioNodeOptions = {
+
var audioNodeOptions = {
"channelCount" : 2,
"channelCountMode" : "max",
"channelInterpretation" : "discrete"
diff --git a/files/en-us/web/api/audioscheduledsourcenode/ended_event/index.html b/files/en-us/web/api/audioscheduledsourcenode/ended_event/index.html
index 970d40052e49236..576ed5efdca3a2d 100644
--- a/files/en-us/web/api/audioscheduledsourcenode/ended_event/index.html
+++ b/files/en-us/web/api/audioscheduledsourcenode/ended_event/index.html
@@ -46,13 +46,13 @@
Examples
ended
event is set up to enable a "Start" button in the user interface when the node stops playing:node.addEventListener('ended', () => {
+
node.addEventListener('ended', () => {
document.getElementById("startButton").disabled = false;
})
node.onended = function() {
+
node.onended = function() {
document.getElementById("startButton").disabled = false;
}
diff --git a/files/en-us/web/api/audioscheduledsourcenode/onended/index.html b/files/en-us/web/api/audioscheduledsourcenode/onended/index.html
index 3e3c7ef132ed843..eadcf2cc6e79db7 100644
--- a/files/en-us/web/api/audioscheduledsourcenode/onended/index.html
+++ b/files/en-us/web/api/audioscheduledsourcenode/onended/index.html
@@ -33,7 +33,7 @@
Syntax
-AudioScheduledSourceNode.onended = EventHandler;
+
AudioScheduledSourceNode.onended = EventHandler;
Value
diff --git a/files/en-us/web/api/audioscheduledsourcenode/start/index.html b/files/en-us/web/api/audioscheduledsourcenode/start/index.html
index 0d1d39a48147c98..c97a93a11b74e78 100644
--- a/files/en-us/web/api/audioscheduledsourcenode/start/index.html
+++ b/files/en-us/web/api/audioscheduledsourcenode/start/index.html
@@ -24,7 +24,7 @@
Syntax
-AudioScheduledSourceNode.start([when [, offset [, duration]]]);
+
AudioScheduledSourceNode.start([when [, offset [, duration]]]);
Parameters
diff --git a/files/en-us/web/api/audioscheduledsourcenode/stop/index.html b/files/en-us/web/api/audioscheduledsourcenode/stop/index.html
index 5a752d43444d6a3..7cdea934e8b5784 100644
--- a/files/en-us/web/api/audioscheduledsourcenode/stop/index.html
+++ b/files/en-us/web/api/audioscheduledsourcenode/stop/index.html
@@ -29,7 +29,7 @@
Syntax
-AudioScheduledSourceNode.stop([when]);
+
AudioScheduledSourceNode.stop([when]);
Parameters
diff --git a/files/en-us/web/api/audiotrack/enabled/index.html b/files/en-us/web/api/audiotrack/enabled/index.html
index 002947f95bf30bb..9c1d2aa7b88fe13 100644
--- a/files/en-us/web/api/audiotrack/enabled/index.html
+++ b/files/en-us/web/api/audiotrack/enabled/index.html
@@ -25,7 +25,7 @@
Syntax
-isAudioEnabled = AudioTrack.enabled;
+
isAudioEnabled = AudioTrack.enabled;
AudioTrack.enabled = true | false;
diff --git a/files/en-us/web/api/audiotrack/id/index.html b/files/en-us/web/api/audiotrack/id/index.html
index da1cd0bd2283817..334b5596fb73fa4 100644
--- a/files/en-us/web/api/audiotrack/id/index.html
+++ b/files/en-us/web/api/audiotrack/id/index.html
@@ -29,7 +29,7 @@
Syntax
var trackID = AudioTrack.id;
+ class="brush: js">var trackID = AudioTrack.id;Value
diff --git a/files/en-us/web/api/audiotrack/kind/index.html b/files/en-us/web/api/audiotrack/kind/index.html
index ed4035eb774d45c..326acd4adef8e88 100644
--- a/files/en-us/web/api/audiotrack/kind/index.html
+++ b/files/en-us/web/api/audiotrack/kind/index.html
@@ -26,7 +26,7 @@
Syntax
var trackKind = AudioTrack.kind;
+ class="brush: js">var trackKind = AudioTrack.kind;Value
diff --git a/files/en-us/web/api/audiotrack/label/index.html b/files/en-us/web/api/audiotrack/label/index.html
index d6d2f0867878e7d..4b27d9229e2624f 100644
--- a/files/en-us/web/api/audiotrack/label/index.html
+++ b/files/en-us/web/api/audiotrack/label/index.html
@@ -25,7 +25,7 @@
Syntax
var audioTrackLabel = AudioTrack.label;
+ class="brush: js">var audioTrackLabel = AudioTrack.label;Value
diff --git a/files/en-us/web/api/audiotrack/language/index.html b/files/en-us/web/api/audiotrack/language/index.html
index 7b8944e9b03a363..a30e052c240ca9b 100644
--- a/files/en-us/web/api/audiotrack/language/index.html
+++ b/files/en-us/web/api/audiotrack/language/index.html
@@ -26,7 +26,7 @@
Syntax
-var audioTrackLanguage = AudioTrack.language;
+var audioTrackLanguage = AudioTrack.language;
Value
diff --git a/files/en-us/web/api/audiotrack/sourcebuffer/index.html b/files/en-us/web/api/audiotrack/sourcebuffer/index.html
index cd01638b04336fd..99f3dd7a0c5aae3 100644
--- a/files/en-us/web/api/audiotrack/sourcebuffer/index.html
+++ b/files/en-us/web/api/audiotrack/sourcebuffer/index.html
@@ -27,7 +27,7 @@
Syntax
var sourceBuffer = AudioTrack.sourceBuffer;
+ class="brush: js">var sourceBuffer = AudioTrack.sourceBuffer;Value
diff --git a/files/en-us/web/api/audioworkletnode/audioworkletnode/index.html b/files/en-us/web/api/audioworkletnode/audioworkletnode/index.html
index 614ab56b1d803ba..687568bf923d8b1 100644
--- a/files/en-us/web/api/audioworkletnode/audioworkletnode/index.html
+++ b/files/en-us/web/api/audioworkletnode/audioworkletnode/index.html
@@ -17,7 +17,7 @@
Syntax
-var node = new AudioWorkletNode(context, name);
+
var node = new AudioWorkletNode(context, name);
var node = new AudioWorkletNode(context, name, options);
diff --git a/files/en-us/web/api/audioworkletnode/onprocessorerror/index.html b/files/en-us/web/api/audioworkletnode/onprocessorerror/index.html
index 85674d5fe71449a..1e7b3b6a8d80bfb 100644
--- a/files/en-us/web/api/audioworkletnode/onprocessorerror/index.html
+++ b/files/en-us/web/api/audioworkletnode/onprocessorerror/index.html
@@ -27,7 +27,7 @@
Syntax
audioWorkletNode.onprocessorerror = function() { ... };
+ class="brush: js">audioWorkletNode.onprocessorerror = function() { ... };Examples
diff --git a/files/en-us/web/api/audioworkletnode/parameters/index.html b/files/en-us/web/api/audioworkletnode/parameters/index.html
index a9b4b7f345580d4..793003a8f21a528 100644
--- a/files/en-us/web/api/audioworkletnode/parameters/index.html
+++ b/files/en-us/web/api/audioworkletnode/parameters/index.html
@@ -22,7 +22,7 @@
Syntax
-audioWorkletNodeInstance.parameters
+audioWorkletNodeInstance.parameters
Value
@@ -48,7 +48,7 @@ Examples
populate its parameters
with instantiated AudioParam
objects.
// white-noise-processor.js +// white-noise-processor.js class WhiteNoiseProcessor extends AudioWorkletProcessor { static get parameterDescriptors () { return [{ @@ -82,7 +82,7 @@Examples
AudioWorkletNode
passing it the name of the processor, and connect the node to an audio graph. -const audioContext = new AudioContext() +const audioContext = new AudioContext() await audioContext.audioWorklet.addModule('white-noise-processor.js') const whiteNoiseNode = new AudioWorkletNode(audioContext, 'white-noise-processor') whiteNoiseNode.connect(audioContext.destination) @@ -90,7 +90,7 @@Examples
Now we can change the gain on the node like this:
-const gainParam = whiteNoiseNode.parameters.get('customGain') +const gainParam = whiteNoiseNode.parameters.get('customGain') gainParam.setValueAtTime(0, audioContext.currentTime) gainParam.linearRampToValueAtTime(0.5, audioContext.currentTime + 0.5)diff --git a/files/en-us/web/api/audioworkletnode/port/index.html b/files/en-us/web/api/audioworkletnode/port/index.html index 2e850bb405c2839..08c5f62187a2bbb 100644 --- a/files/en-us/web/api/audioworkletnode/port/index.html +++ b/files/en-us/web/api/audioworkletnode/port/index.html @@ -24,7 +24,7 @@Syntax
-audioWorkletNodeInstance.port;+audioWorkletNodeInstance.port;Value
@@ -40,7 +40,7 @@Examples
First, we need to define a custom
-AudioWorkletProcessor
, and register it. Note that this should be done in a separate file.// ping-pong-processor.js +// ping-pong-processor.js class PingPongProcessor extends AudioWorkletProcessor { constructor (...args) { super(...args) @@ -61,7 +61,7 @@Examples
AudioWorkletNode
passing the name of the processor, and connect the node to an audio graph. -const audioContext = new AudioContext() +const audioContext = new AudioContext() await audioContext.audioWorklet.addModule('ping-pong-processor.js') const pingPongNode = new AudioWorkletNode(audioContext, 'ping-pong-processor') // send the message containing 'ping' string diff --git a/files/en-us/web/api/authenticatorattestationresponse/attestationobject/index.html b/files/en-us/web/api/authenticatorattestationresponse/attestationobject/index.html index 42d46a59a660394..a46ede2a0c88f88 100644 --- a/files/en-us/web/api/authenticatorattestationresponse/attestationobject/index.html +++ b/files/en-us/web/api/authenticatorattestationresponse/attestationobject/index.html @@ -26,7 +26,7 @@Syntax
attestObj = authenticatorAttestationResponse.attestationObject+ class="brush: js">attestObj = authenticatorAttestationResponse.attestationObjectProperties
diff --git a/files/en-us/web/api/authenticatorattestationresponse/gettransports/index.html b/files/en-us/web/api/authenticatorattestationresponse/gettransports/index.html index 8aeccfe12f030fb..405b1ae84ccfeb6 100644 --- a/files/en-us/web/api/authenticatorattestationresponse/gettransports/index.html +++ b/files/en-us/web/api/authenticatorattestationresponse/gettransports/index.html @@ -33,7 +33,7 @@Syntax
arrTransports = authenticatorAttestationResponse.getTransports()+ class="brush: js">arrTransports = authenticatorAttestationResponse.getTransports()Parameters
diff --git a/files/en-us/web/api/authenticatorresponse/clientdatajson/index.html b/files/en-us/web/api/authenticatorresponse/clientdatajson/index.html index c1b11518c9f39b2..52ecf12b8bac87d 100644 --- a/files/en-us/web/api/authenticatorresponse/clientdatajson/index.html +++ b/files/en-us/web/api/authenticatorresponse/clientdatajson/index.html @@ -23,7 +23,7 @@Syntax
-var arrayBuffer = AuthenticatorAttestationResponse.clientDataJSON; +var arrayBuffer = AuthenticatorAttestationResponse.clientDataJSON; var arrayBuffer = AuthenticatorAssertionResponse.clientDataJSON;diff --git a/files/en-us/web/api/barcodedetector/barcodedetector/index.html b/files/en-us/web/api/barcodedetector/barcodedetector/index.html index a36111202990ca3..7c605a070ad1b1a 100644 --- a/files/en-us/web/api/barcodedetector/barcodedetector/index.html +++ b/files/en-us/web/api/barcodedetector/barcodedetector/index.html @@ -18,7 +18,7 @@Syntax
var BarcodeDetector = new BarcodeDetector();+ class="brush: js">var BarcodeDetector = new BarcodeDetector();Parameters
@@ -40,7 +40,7 @@Examples
This example creates a new barcode detector object, with specified supported formats and tests for browser compatibility.
-// create new detector +// create new detector var barcodeDetector = new BarcodeDetector({formats: ['code_39', 'codabar', 'ean_13']}); // check compatibility diff --git a/files/en-us/web/api/barcodedetector/detect/index.html b/files/en-us/web/api/barcodedetector/detect/index.html index f9ab2917af7c315..5bee03319903bfc 100644 --- a/files/en-us/web/api/barcodedetector/detect/index.html +++ b/files/en-us/web/api/barcodedetector/detect/index.html @@ -17,7 +17,7 @@Syntax
var detectedBarcode = BarcodeDetector.detect(ImageBitmapSource);+ class="brush: js">var detectedBarcode = BarcodeDetector.detect(ImageBitmapSource);Parameters
@@ -59,7 +59,7 @@Examples
This example uses the
-detect()
method to detect the barcodes within the given image. These are iterated over and the barcode data is logged to the console.barcodeDetector.detect(imageEl) +barcodeDetector.detect(imageEl) .then(barcodes => { barcodes.forEach(barcode => console.log(barcode.rawData)); } diff --git a/files/en-us/web/api/barcodedetector/getsupportedformats/index.html b/files/en-us/web/api/barcodedetector/getsupportedformats/index.html index 4e9db6b178ef2db..6ec7934cb4d2f80 100644 --- a/files/en-us/web/api/barcodedetector/getsupportedformats/index.html +++ b/files/en-us/web/api/barcodedetector/getsupportedformats/index.html @@ -17,7 +17,7 @@Syntax
var supportedFormats = BarcodeDetector.getSupportedFormats();+ class="brush: js">var supportedFormats = BarcodeDetector.getSupportedFormats();Parameters
@@ -38,7 +38,7 @@Examples
The following example calls the
-getSupportFormat()
static method and logs the results to the console.// check supported types +// check supported types BarcodeDetector.getSupportedFormats() .then(supportedFormats => { supportedFormats.forEach(format => console.log(format)); diff --git a/files/en-us/web/api/barcodedetector/index.html b/files/en-us/web/api/barcodedetector/index.html index 18303be0778dcaa..08029614a15dfa5 100644 --- a/files/en-us/web/api/barcodedetector/index.html +++ b/files/en-us/web/api/barcodedetector/index.html @@ -41,7 +41,7 @@Creating A Detector
This example creates a new barcode detector object, with specified supported formats and tests for browser compatibility.
-// create new detector +// create new detector var barcodeDetector = new BarcodeDetector({formats: ['code_39', 'codabar', 'ean_13']}); // check compatibility @@ -55,7 +55,7 @@Getting Supported Formats
The following example calls the
-getSupportFormat()
static method and logs the results to the console.// check supported types +// check supported types BarcodeDetector.getSupportedFormats() .then(formats => { supportedFormats.forEach(format => console.log(format)); @@ -65,7 +65,7 @@Detect Barcodes
This example uses the
-detect()
method to detect the barcodes within the given image. These are iterated over and the barcode data is logged to the console.barcodeDetector.detect(imageEl) +barcodeDetector.detect(imageEl) .then(barcodes => { barcodes.forEach(barcode => console.log(barcode.rawData)); }) diff --git a/files/en-us/web/api/basiccardrequest/supportednetworks/index.html b/files/en-us/web/api/basiccardrequest/supportednetworks/index.html index 9d20a8c7f0c90da..d9e4bfcbb9a3ce6 100644 --- a/files/en-us/web/api/basiccardrequest/supportednetworks/index.html +++ b/files/en-us/web/api/basiccardrequest/supportednetworks/index.html @@ -22,7 +22,7 @@Syntax
supportedNetworks : [value [, ... value]]+ class="brush: js">supportedNetworks : [value [, ... value]]Value
diff --git a/files/en-us/web/api/basiccardrequest/supportedtypes/index.html b/files/en-us/web/api/basiccardrequest/supportedtypes/index.html index 93f81c54618c106..5852993bdf4d929 100644 --- a/files/en-us/web/api/basiccardrequest/supportedtypes/index.html +++ b/files/en-us/web/api/basiccardrequest/supportedtypes/index.html @@ -30,7 +30,7 @@Syntax
basicCardRequest.supportedTypes = [cardType1...cardTypeN];+ class="brush: js">basicCardRequest.supportedTypes = [cardType1...cardTypeN];Value
diff --git a/files/en-us/web/api/blobbuilder/index.html b/files/en-us/web/api/blobbuilder/index.html index adce15455793fac..665e9d7f48c5310 100644 --- a/files/en-us/web/api/blobbuilder/index.html +++ b/files/en-us/web/api/blobbuilder/index.html @@ -63,7 +63,7 @@append()
href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String
, the value is coerced to a string before being appended to the blob. -void append( +void append( in ArrayBuffer data ); @@ -94,7 +94,7 @@getBlob()
Returns the {{domxref("Blob")}} object that has been constructed using the data passed through calls to {{manch("append")}}.
-Blob getBlob( +Blob getBlob( in DOMString contentType {{optional_inline}} );@@ -118,7 +118,7 @@getFile() {{non-standard_inline}}
Returns a {{domxref("File")}} object.
-File getFile( +File getFile( in DOMString name, [optional] in DOMString contentType ); diff --git a/files/en-us/web/api/bluetoothadvertisingdata/appearance/index.html b/files/en-us/web/api/bluetoothadvertisingdata/appearance/index.html index e2a09c4239bdf19..6f3b9defc44e2f5 100644 --- a/files/en-us/web/api/bluetoothadvertisingdata/appearance/index.html +++ b/files/en-us/web/api/bluetoothadvertisingdata/appearance/index.html @@ -20,7 +20,7 @@Syntax
var appearance = BluetoothAdvertisingData.appearance;+ class="brush: js">var appearance = BluetoothAdvertisingData.appearance;Browser compatibility
diff --git a/files/en-us/web/api/bluetoothadvertisingdata/index.html b/files/en-us/web/api/bluetoothadvertisingdata/index.html index 56fb21b23209d0d..b75962494675737 100644 --- a/files/en-us/web/api/bluetoothadvertisingdata/index.html +++ b/files/en-us/web/api/bluetoothadvertisingdata/index.html @@ -18,7 +18,7 @@Interface
-interface BluetoothAdvertisingData { +interface BluetoothAdvertisingData { readonly attribute unsigned short? appearance; readonly attribute byte? txPower; readonly attribute byte? rssi; diff --git a/files/en-us/web/api/bluetoothadvertisingdata/manufacturerdata/index.html b/files/en-us/web/api/bluetoothadvertisingdata/manufacturerdata/index.html index 5171e09abc995ca..f03dcbcd878696e 100644 --- a/files/en-us/web/api/bluetoothadvertisingdata/manufacturerdata/index.html +++ b/files/en-us/web/api/bluetoothadvertisingdata/manufacturerdata/index.html @@ -20,7 +20,7 @@Syntax
varmanufacturerData = BluetoothAdvertisingData.manufacturerData;+ class="brush: js">varmanufacturerData = BluetoothAdvertisingData.manufacturerData;Browser compatibility
diff --git a/files/en-us/web/api/bluetoothadvertisingdata/rssi/index.html b/files/en-us/web/api/bluetoothadvertisingdata/rssi/index.html index 94fffcb16c5f34a..a4de9b240da0012 100644 --- a/files/en-us/web/api/bluetoothadvertisingdata/rssi/index.html +++ b/files/en-us/web/api/bluetoothadvertisingdata/rssi/index.html @@ -21,7 +21,7 @@Syntax
var rssi = BluetoothAdvertisingData.rssi;+ class="brush: js">var rssi = BluetoothAdvertisingData.rssi;Browser compatibility
diff --git a/files/en-us/web/api/bluetoothadvertisingdata/servicedata/index.html b/files/en-us/web/api/bluetoothadvertisingdata/servicedata/index.html index 2edce1647d1ef59..f0978d486988f4c 100644 --- a/files/en-us/web/api/bluetoothadvertisingdata/servicedata/index.html +++ b/files/en-us/web/api/bluetoothadvertisingdata/servicedata/index.html @@ -20,7 +20,7 @@Syntax
var serviceData = BluetoothAdvertisingData.serviceData;+ class="brush: js">var serviceData = BluetoothAdvertisingData.serviceData;Browser compatibility
diff --git a/files/en-us/web/api/bluetoothadvertisingdata/txpower/index.html b/files/en-us/web/api/bluetoothadvertisingdata/txpower/index.html index 566b4d6c2eacd50..9290375874fabcb 100644 --- a/files/en-us/web/api/bluetoothadvertisingdata/txpower/index.html +++ b/files/en-us/web/api/bluetoothadvertisingdata/txpower/index.html @@ -21,7 +21,7 @@Syntax
var power = BluetoothAdvertisingData.txPower;+ class="brush: js">var power = BluetoothAdvertisingData.txPower;Browser compatibility
diff --git a/files/en-us/web/api/bluetoothcharacteristicproperties/authenticatedsignedwrites/index.html b/files/en-us/web/api/bluetoothcharacteristicproperties/authenticatedsignedwrites/index.html index 9e300db8cffd964..2a6a9ac631a7fae 100644 --- a/files/en-us/web/api/bluetoothcharacteristicproperties/authenticatedsignedwrites/index.html +++ b/files/en-us/web/api/bluetoothcharacteristicproperties/authenticatedsignedwrites/index.html @@ -22,7 +22,7 @@Syntax
var aBoolean = BluetoothCharacteristicProperties.authenticatedSignedWrites;+ class="brush: js">var aBoolean = BluetoothCharacteristicProperties.authenticatedSignedWrites;Value
diff --git a/files/en-us/web/api/bluetoothcharacteristicproperties/broadcast/index.html b/files/en-us/web/api/bluetoothcharacteristicproperties/broadcast/index.html index 6322841fb3b51e8..dc1d08ec5d31047 100644 --- a/files/en-us/web/api/bluetoothcharacteristicproperties/broadcast/index.html +++ b/files/en-us/web/api/bluetoothcharacteristicproperties/broadcast/index.html @@ -22,7 +22,7 @@Syntax
var aBoolean = BluetoothCharacteristicProperties.broadcast;+ class="brush: js">var aBoolean = BluetoothCharacteristicProperties.broadcast;Value
diff --git a/files/en-us/web/api/bluetoothcharacteristicproperties/index.html b/files/en-us/web/api/bluetoothcharacteristicproperties/index.html index 999f9f4e2a656e5..df81a7d91c00b3f 100644 --- a/files/en-us/web/api/bluetoothcharacteristicproperties/index.html +++ b/files/en-us/web/api/bluetoothcharacteristicproperties/index.html @@ -41,7 +41,7 @@Examples
The following example shows how tell if a GATT characteristic supports value change notifications.
-let device = await navigator.bluetooth.requestDevice({ +let device = await navigator.bluetooth.requestDevice({ filters: [{services: ['heart_rate']}] }); let gatt = await device.gatt.connect(); diff --git a/files/en-us/web/api/bluetoothcharacteristicproperties/indicate/index.html b/files/en-us/web/api/bluetoothcharacteristicproperties/indicate/index.html index 1e717b7babefc16..6be70b2f9c70e50 100644 --- a/files/en-us/web/api/bluetoothcharacteristicproperties/indicate/index.html +++ b/files/en-us/web/api/bluetoothcharacteristicproperties/indicate/index.html @@ -22,7 +22,7 @@Syntax
var aBoolean = BluetoothCharacteristicProperties.indicate;+ class="brush: js">var aBoolean = BluetoothCharacteristicProperties.indicate;Value
diff --git a/files/en-us/web/api/bluetoothcharacteristicproperties/notify/index.html b/files/en-us/web/api/bluetoothcharacteristicproperties/notify/index.html index 087828ff1e47e52..4339380044645c1 100644 --- a/files/en-us/web/api/bluetoothcharacteristicproperties/notify/index.html +++ b/files/en-us/web/api/bluetoothcharacteristicproperties/notify/index.html @@ -22,7 +22,7 @@Syntax
var aBoolean = BluetoothCharacteristicProperties.notify;+ class="brush: js">var aBoolean = BluetoothCharacteristicProperties.notify;Value
diff --git a/files/en-us/web/api/bluetoothcharacteristicproperties/read/index.html b/files/en-us/web/api/bluetoothcharacteristicproperties/read/index.html index b07e6376f78b5a9..299d6f60fd6facf 100644 --- a/files/en-us/web/api/bluetoothcharacteristicproperties/read/index.html +++ b/files/en-us/web/api/bluetoothcharacteristicproperties/read/index.html @@ -22,7 +22,7 @@Syntax
var aBoolean = BluetoothCharacteristicProperties.read;+ class="brush: js">var aBoolean = BluetoothCharacteristicProperties.read;Value
diff --git a/files/en-us/web/api/bluetoothcharacteristicproperties/reliablewrite/index.html b/files/en-us/web/api/bluetoothcharacteristicproperties/reliablewrite/index.html index d1ca773653f5ff2..2e3def0077b301d 100644 --- a/files/en-us/web/api/bluetoothcharacteristicproperties/reliablewrite/index.html +++ b/files/en-us/web/api/bluetoothcharacteristicproperties/reliablewrite/index.html @@ -23,7 +23,7 @@Syntax
var aBoolean = BluetoothCharacteristicProperties.reliableWrite;+ class="brush: js">var aBoolean = BluetoothCharacteristicProperties.reliableWrite;Value
diff --git a/files/en-us/web/api/bluetoothcharacteristicproperties/writableauxiliar/index.html b/files/en-us/web/api/bluetoothcharacteristicproperties/writableauxiliar/index.html index 38173d7ecca67f1..dde9a4ee759d487 100644 --- a/files/en-us/web/api/bluetoothcharacteristicproperties/writableauxiliar/index.html +++ b/files/en-us/web/api/bluetoothcharacteristicproperties/writableauxiliar/index.html @@ -22,7 +22,7 @@Syntax
var aBoolean = BluetoothCharacteristicProperties.writableAuxiliaries;+ class="brush: js">var aBoolean = BluetoothCharacteristicProperties.writableAuxiliaries;Value
diff --git a/files/en-us/web/api/bluetoothcharacteristicproperties/write/index.html b/files/en-us/web/api/bluetoothcharacteristicproperties/write/index.html index 07d578d58af213c..5fe068b4a67fc35 100644 --- a/files/en-us/web/api/bluetoothcharacteristicproperties/write/index.html +++ b/files/en-us/web/api/bluetoothcharacteristicproperties/write/index.html @@ -22,7 +22,7 @@Syntax
var aBoolean = BluetoothCharacteristicProperties.write;+ class="brush: js">var aBoolean = BluetoothCharacteristicProperties.write;Value
diff --git a/files/en-us/web/api/bluetoothcharacteristicproperties/writewithoutrespponse/index.html b/files/en-us/web/api/bluetoothcharacteristicproperties/writewithoutrespponse/index.html index 56d3cbdf2263936..9fe484537e281d5 100644 --- a/files/en-us/web/api/bluetoothcharacteristicproperties/writewithoutrespponse/index.html +++ b/files/en-us/web/api/bluetoothcharacteristicproperties/writewithoutrespponse/index.html @@ -22,7 +22,7 @@Syntax
var aBoolean = BluetoothCharacteristicProperties.writeWithoutResponse;+ class="brush: js">var aBoolean = BluetoothCharacteristicProperties.writeWithoutResponse;Value
diff --git a/files/en-us/web/api/bluetoothremotegattdescriptor/characteristic/index.html b/files/en-us/web/api/bluetoothremotegattdescriptor/characteristic/index.html index 4c989ae849c0cfe..2f6d834a2442dd8 100644 --- a/files/en-us/web/api/bluetoothremotegattdescriptor/characteristic/index.html +++ b/files/en-us/web/api/bluetoothremotegattdescriptor/characteristic/index.html @@ -21,7 +21,7 @@Syntax
var characteristic = BluetoothRemoteGATTCharacteristic.characteristic+ class="brush: js">var characteristic = BluetoothRemoteGATTCharacteristic.characteristicReturns
diff --git a/files/en-us/web/api/bluetoothremotegattdescriptor/index.html b/files/en-us/web/api/bluetoothremotegattdescriptor/index.html index 629dcda327c22d1..42fae244313168d 100644 --- a/files/en-us/web/api/bluetoothremotegattdescriptor/index.html +++ b/files/en-us/web/api/bluetoothremotegattdescriptor/index.html @@ -25,7 +25,7 @@Interface
-interface BluetoothRemoteGATTDescriptor { +interface BluetoothRemoteGATTDescriptor { readonly attribute BluetoothGATTCharacteristic characteristic; readonly attribute UUID uuid; readonly attribute ArrayBuffer? value; diff --git a/files/en-us/web/api/bluetoothremotegattdescriptor/readvalue/index.html b/files/en-us/web/api/bluetoothremotegattdescriptor/readvalue/index.html index 26863caea431828..cd1bb1081f9ba01 100644 --- a/files/en-us/web/api/bluetoothremotegattdescriptor/readvalue/index.html +++ b/files/en-us/web/api/bluetoothremotegattdescriptor/readvalue/index.html @@ -23,7 +23,7 @@Syntax
BluetoothRemoteGATTDescriptor.readValue().then(function(value[]) { ... })+ class="brush: js">BluetoothRemoteGATTDescriptor.readValue().then(function(value[]) { ... })Returns
diff --git a/files/en-us/web/api/bluetoothremotegattdescriptor/uuid/index.html b/files/en-us/web/api/bluetoothremotegattdescriptor/uuid/index.html index 3b2688fdda54dff..a9b7c7b5468e408 100644 --- a/files/en-us/web/api/bluetoothremotegattdescriptor/uuid/index.html +++ b/files/en-us/web/api/bluetoothremotegattdescriptor/uuid/index.html @@ -21,7 +21,7 @@Syntax
var uuid = BluetoothRemoteGATTDescriptor.uuid+ class="brush: js">var uuid = BluetoothRemoteGATTDescriptor.uuidReturns
diff --git a/files/en-us/web/api/bluetoothremotegattdescriptor/value/index.html b/files/en-us/web/api/bluetoothremotegattdescriptor/value/index.html index a9f30f85cc5d223..d2e6df4cd4e053a 100644 --- a/files/en-us/web/api/bluetoothremotegattdescriptor/value/index.html +++ b/files/en-us/web/api/bluetoothremotegattdescriptor/value/index.html @@ -21,7 +21,7 @@Syntax
var characteristic = BluetoothRemoteGATTDescriptor.characteristic+ class="brush: js">var characteristic = BluetoothRemoteGATTDescriptor.characteristicReturns
diff --git a/files/en-us/web/api/bluetoothremotegattdescriptor/writevalue/index.html b/files/en-us/web/api/bluetoothremotegattdescriptor/writevalue/index.html index 8d220a9bb433312..886bf5b473bd468 100644 --- a/files/en-us/web/api/bluetoothremotegattdescriptor/writevalue/index.html +++ b/files/en-us/web/api/bluetoothremotegattdescriptor/writevalue/index.html @@ -22,7 +22,7 @@Syntax
BluetoothRemoteGATTDescriptor.writeValue(array[]).then(function() { ... })+ class="brush: js">BluetoothRemoteGATTDescriptor.writeValue(array[]).then(function() { ... })Parameters
diff --git a/files/en-us/web/api/cache/add/index.html b/files/en-us/web/api/cache/add/index.html index 8524e7994a66d00..41cc893ebfb38ee 100644 --- a/files/en-us/web/api/cache/add/index.html +++ b/files/en-us/web/api/cache/add/index.html @@ -15,7 +15,7 @@The
-add()
method of the {{domxref("Cache")}} interface takes a URL, retrieves it, and adds the resulting response object to the given cache. Theadd()
method is functionally equivalent to the following:fetch(url).then(function(response) { +fetch(url).then(function(response) { if (!response.ok) { throw new TypeError('bad response status'); } @@ -30,7 +30,7 @@Syntax
-cache.add(request).then(function() { +cache.add(request).then(function() { // request has been added to the cache });@@ -71,7 +71,7 @@Examples
This code block waits for an {{domxref("InstallEvent")}} to fire, then calls {{domxref("ExtendableEvent.waitUntil","waitUntil()")}} to handle the install process for the app. This consists of calling {{domxref("CacheStorage.open")}} to create a new cache, then using {{domxref("Cache.add")}} to add an asset to it.
-this.addEventListener('install', function(event) { +this.addEventListener('install', function(event) { event.waitUntil( caches.open('v1').then(function(cache) { return cache.add('/sw-test/index.html'); diff --git a/files/en-us/web/api/cache/addall/index.html b/files/en-us/web/api/cache/addall/index.html index 0deb5056b94f0ae..70620965d7a99a8 100644 --- a/files/en-us/web/api/cache/addall/index.html +++ b/files/en-us/web/api/cache/addall/index.html @@ -29,7 +29,7 @@Syntax
-cache.addAll(requests[]).then(function() { +cache.addAll(requests[]).then(function() { // requests have been added to the cache });@@ -77,7 +77,7 @@Examples
the app. This consists of calling {{domxref("CacheStorage.open")}} to create a new cache, then usingaddAll()
to add a series of assets to it. -this.addEventListener('install', function(event) { +this.addEventListener('install', function(event) { event.waitUntil( caches.open('v1').then(function(cache) { return cache.addAll([ diff --git a/files/en-us/web/api/cache/delete/index.html b/files/en-us/web/api/cache/delete/index.html index 93d969b6a7c30a8..3d8a9100a102253 100644 --- a/files/en-us/web/api/cache/delete/index.html +++ b/files/en-us/web/api/cache/delete/index.html @@ -23,7 +23,7 @@Syntax
-cache.delete(request, {options}).then(function(found) { +cache.delete(request, {options}).then(function(found) { // your cache entry has been deleted if found });@@ -66,7 +66,7 @@Return value
Examples
-caches.open('v1').then(function(cache) { +caches.open('v1').then(function(cache) { cache.delete('/images/image.png').then(function(response) { someUIUpdateFunction(); }); diff --git a/files/en-us/web/api/cache/keys/index.html b/files/en-us/web/api/cache/keys/index.html index 17680f4ed72ec49..b61ee0675d06d9e 100644 --- a/files/en-us/web/api/cache/keys/index.html +++ b/files/en-us/web/api/cache/keys/index.html @@ -26,7 +26,7 @@Syntax
-cache.keys(request, {options}).then(function(keys) { +cache.keys(request, {options}).then(function(keys) { // do something with your array of requests });@@ -68,7 +68,7 @@Return value
Examples
-caches.open('v1').then(function(cache) { +caches.open('v1').then(function(cache) { cache.keys().then(function(keys) { keys.forEach(function(request, index, array) { cache.delete(request); diff --git a/files/en-us/web/api/cache/match/index.html b/files/en-us/web/api/cache/match/index.html index aa388af884afcb3..d994bc4f0d51204 100644 --- a/files/en-us/web/api/cache/match/index.html +++ b/files/en-us/web/api/cache/match/index.html @@ -22,7 +22,7 @@Syntax
-cache.match(request, {options}).then(function(response) { +cache.match(request, {options}).then(function(response) { // Do something with the response });@@ -87,7 +87,7 @@Examples
response with an response code in the 4xx or 5xx range, thecatch()
will NOT be called. -self.addEventListener('fetch', function(event) { +self.addEventListener('fetch', function(event) { // We only want to call event.respondWith() if this is a GET request for an HTML document. if (event.request.method === 'GET' && event.request.headers.get('accept').indexOf('text/html') !== -1) { diff --git a/files/en-us/web/api/cache/matchall/index.html b/files/en-us/web/api/cache/matchall/index.html index 7532ef7f005750c..0494bf389702b84 100644 --- a/files/en-us/web/api/cache/matchall/index.html +++ b/files/en-us/web/api/cache/matchall/index.html @@ -19,7 +19,7 @@Syntax
-cache.matchAll(request, {options}).then(function(response) { +cache.matchAll(request, {options}).then(function(response) { // do something with the response array });@@ -67,7 +67,7 @@Return value
Examples
-caches.open('v1').then(function(cache) { +caches.open('v1').then(function(cache) { cache.matchAll('/images/').then(function(response) { response.forEach(function(element, index, array) { cache.delete(element); diff --git a/files/en-us/web/api/cache/put/index.html b/files/en-us/web/api/cache/put/index.html index 4f49192fe0c366b..e8cc5da897624fb 100644 --- a/files/en-us/web/api/cache/put/index.html +++ b/files/en-us/web/api/cache/put/index.html @@ -25,7 +25,7 @@ {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}}, as they are shorthand functions for one or more of these operations. -fetch(url).then(function(response) { +fetch(url).then(function(response) { if (!response.ok) { throw new TypeError('Bad response status'); } @@ -49,7 +49,7 @@Syntax
-cache.put(request, response).then(function() { +cache.put(request, response).then(function() { // request/response pair has been added to the cache });@@ -90,7 +90,7 @@Examples
var response; +var response; var cachedResponse = caches.match(event.request).catch(function() { return fetch(event.request); }).then(function(r) { diff --git a/files/en-us/web/api/canvaspattern/settransform/index.html b/files/en-us/web/api/canvaspattern/settransform/index.html index c263b9c53500e2f..3d1c0e6084f8bd2 100644 --- a/files/en-us/web/api/canvaspattern/settransform/index.html +++ b/files/en-us/web/api/canvaspattern/settransform/index.html @@ -18,7 +18,7 @@Syntax
-void pattern.setTransform(matrix); +void pattern.setTransform(matrix);Parameters
@@ -42,13 +42,13 @@Using the
setTransform
methoHTML
-<canvas id="canvas"></canvas> +<canvas id="canvas"></canvas> <svg id="svg1"></svg>JavaScript
-var canvas = document.getElementById('canvas'); +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var svg1 = document.getElementById('svg1'); @@ -70,14 +70,14 @@JavaScript
SVGMatrix
in the above example with the following:const matrix = new DOMMatrix([1, .2, .8, 1, 0, 0]);+ class="brush: js">const matrix = new DOMMatrix([1, .2, .8, 1, 0, 0]);Edit the code below and see your changes update live in the canvas:
Playable code
-<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <svg id="svg1" style="display:none"></svg> <div class="playable-buttons"> <input id="edit" type="button" value="Edit" /> @@ -94,7 +94,7 @@-Playable code
};</textarea>var canvas = document.getElementById('canvas'); +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); diff --git a/files/en-us/web/api/channel_messaging_api/using_channel_messaging/index.html b/files/en-us/web/api/channel_messaging_api/using_channel_messaging/index.html index a6c83cfa11e409d..d9a27a8bc8a3c7c 100644 --- a/files/en-us/web/api/channel_messaging_api/using_channel_messaging/index.html +++ b/files/en-us/web/api/channel_messaging_api/using_channel_messaging/index.html @@ -41,7 +41,7 @@Creating the channel
In the main page of the demo, we have a simple form with a text input for entering messages to be sent to an {{htmlelement("iframe")}}. We also have a paragraph which we will use later on to display confirmation messages that we will receive back from the {{htmlelement("iframe")}}.
-var input = document.getElementById('message-input'); +var input = document.getElementById('message-input'); var output = document.getElementById('message-output'); var button = document.querySelector('button'); var iframe = document.querySelector('iframe'); @@ -93,7 +93,7 @@Receiving the port and mes
Over in the IFrame, we have the following JavaScript:
-var list = document.querySelector('ul'); +var list = document.querySelector('ul'); var port2; // Listen for the initial port transfer message @@ -124,7 +124,7 @@Receiving the confirmation
Returning to the main page, let's now look at the onmessage handler function.
-// Handle messages received on port1 +// Handle messages received on port1 function onMessage(e) { output.innerHTML = e.data; input.value = ''; diff --git a/files/en-us/web/api/clients/claim/index.html b/files/en-us/web/api/clients/claim/index.html index e78deeea1bb9797..ed14dbe1d4b1c64 100644 --- a/files/en-us/web/api/clients/claim/index.html +++ b/files/en-us/web/api/clients/claim/index.html @@ -28,7 +28,7 @@Syntax
-await clients.claim(); +await clients.claim();Parameters
diff --git a/files/en-us/web/api/clients/get/index.html b/files/en-us/web/api/clients/get/index.html index d412f479eb2f93f..fb622145d83679f 100644 --- a/files/en-us/web/api/clients/get/index.html +++ b/files/en-us/web/api/clients/get/index.html @@ -18,7 +18,7 @@Syntax
-self.clients.get(id).then(function(client) { +self.clients.get(id).then(function(client) { // do something with your returned client });diff --git a/files/en-us/web/api/clients/matchall/index.html b/files/en-us/web/api/clients/matchall/index.html index 86b1b8fcdcf2872..9b5db5642c34258 100644 --- a/files/en-us/web/api/clients/matchall/index.html +++ b/files/en-us/web/api/clients/matchall/index.html @@ -22,7 +22,7 @@Syntax
-self.clients.matchAll(options).then(function(clients) { +self.clients.matchAll(options).then(function(clients) { // do something with your clients list });@@ -53,7 +53,7 @@Return value
Examples
-clients.matchAll(options).then(function(clientList) { +clients.matchAll(options).then(function(clientList) { for (var i = 0 ; i < clientList.length ; i++) { if (clientList[i].url === 'index.html') { clients.openWindow(clientList[i]); diff --git a/files/en-us/web/api/clients/openwindow/index.html b/files/en-us/web/api/clients/openwindow/index.html index f37b23304bf83ac..f41bec0f82c0c45 100644 --- a/files/en-us/web/api/clients/openwindow/index.html +++ b/files/en-us/web/api/clients/openwindow/index.html @@ -28,7 +28,7 @@Syntax
-self.clients.openWindow(url).then(function(windowClient) { +self.clients.openWindow(url).then(function(windowClient) { // Do something with your WindowClient });@@ -49,7 +49,7 @@Return value
Examples
-// Send notification to OS if applicable +// Send notification to OS if applicable if (self.Notification.permission === 'granted') { const notificationObject = { body: 'Click here to view your messages.', diff --git a/files/en-us/web/api/clipboard_api/index.html b/files/en-us/web/api/clipboard_api/index.html index 9f3138eed713fb4..69a60b6c209b8c4 100644 --- a/files/en-us/web/api/clipboard_api/index.html +++ b/files/en-us/web/api/clipboard_api/index.html @@ -29,7 +29,7 @@Accessing the clipboard
Instead of creating a
-Clipboard
object through instantiation, you access the system clipboard through the {{domxref("Navigator.clipboard")}} global:navigator.clipboard.readText().then( +navigator.clipboard.readText().then( clipText => document.querySelector(".editor").innerText += clipText);This snippet fetches the text from the clipboard and appends it to the first element found with the class
diff --git a/files/en-us/web/api/constantsourcenode/constantsourcenode/index.html b/files/en-us/web/api/constantsourcenode/constantsourcenode/index.html index de8108d731cb0df..ac858a7dcec9670 100644 --- a/files/en-us/web/api/constantsourcenode/constantsourcenode/index.html +++ b/files/en-us/web/api/constantsourcenode/constantsourcenode/index.html @@ -19,7 +19,7 @@editor
. Since {{domxref("Clipboard.readText", "readText()")}} (and {{domxref("Clipboard.read", "read()")}}, for that matter) returns an empty string if the clipboard isn't text, this code is safe.Syntax
var constantSourceNode = new ConstantSourceNode(context, options);+ class="brush: js">var constantSourceNode = new ConstantSourceNode(context, options);Parameters
diff --git a/files/en-us/web/api/constantsourcenode/offset/index.html b/files/en-us/web/api/constantsourcenode/offset/index.html index 4046bbca006179d..b8b2d46b8f9313d 100644 --- a/files/en-us/web/api/constantsourcenode/offset/index.html +++ b/files/en-us/web/api/constantsourcenode/offset/index.html @@ -23,12 +23,12 @@offset
by setting the value ofConstantSourceNode.offset.value
: -myConstantSourceNode.offset.value = newValue;+myConstantSourceNode.offset.value = newValue;Syntax
-let offsetParameter = ConstantAudioNode.offset; +let offsetParameter = ConstantAudioNode.offset; let offset = ConstantSourceNode.offset.value; ConstantSourceNode.offset.value = newValue;@@ -50,7 +50,7 @@Example
href="/en-US/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">Controlling multiple parameters with ConstantSourcenode. -gainNode2 = context.createGain(); +gainNode2 = context.createGain(); gainNode3 = context.createGain(); gainNode2.gain.value = gainNode3.gain.value = 0.5; @@ -70,7 +70,7 @@Example
needs to respond by altering the value of the two gain nodes. With the linkage above in place, that can be done using this simple event handler: -function handleClickEvent(event) { +function handleClickEvent(event) { constantSource.offset.value = volumeSliderControl.value; }diff --git a/files/en-us/web/api/contact_picker_api/index.html b/files/en-us/web/api/contact_picker_api/index.html index 3e19eeb2721ece6..63bacc90bda51f8 100644 --- a/files/en-us/web/api/contact_picker_api/index.html +++ b/files/en-us/web/api/contact_picker_api/index.html @@ -47,14 +47,14 @@Feature Detection
The following code checks whether the Contact Picker API is supported.
-const supported = 'contacts' in navigator; +const supported = 'contacts' in navigator;Checking for Supported Properties
The following asynchronous function uses the
-getProperties()
method to check for supported properties.async function checkProperties() { +async function checkProperties() { const supportedProperties = await navigator.contacts.getProperties(); if (supportedProperties.includes('name')) { // run code for name support @@ -80,7 +80,7 @@Selecting Contacts
An asynchronous function is then defined which uses the
-select()
method to present the user with a contact picker interface and handle the chosen results.const props = ['name', 'email', 'tel', 'address', 'icon']; +const props = ['name', 'email', 'tel', 'address', 'icon']; const opts = {multiple: true}; async function getContacts() { diff --git a/files/en-us/web/api/content_index_api/index.html b/files/en-us/web/api/content_index_api/index.html index 6f5df7582ef3110..b6f756e945f01e6 100644 --- a/files/en-us/web/api/content_index_api/index.html +++ b/files/en-us/web/api/content_index_api/index.html @@ -57,7 +57,7 @@Feature Detection and Interface
Here we get a reference to the {{domxref('ServiceWorkerRegistration')}}, then check for the
-index
property, which gives us access to the content index interface.// reference registration +// reference registration const registration = await navigator.serviceWorker.ready; // feature detection @@ -73,7 +73,7 @@Adding to the Content Index
Here we're declaring an item in the correct format and creating an asynchronous function which uses the {{domxref('ContentIndex.add','add()')}} method to register it with the {{domxref('Content Index API','content index')}}.
-// our content +// our content const item = { id: 'post-1', url: '/posts/amet.html', @@ -109,7 +109,7 @@Retrieving Items Within The C
The below example shows an asynchronous function that retrieves items within the {{domxref('Content Index API','content index')}} and iterates over each entry, building a list for the interface.
-async function createReadingList() { +async function createReadingList() { // access our service worker registration const registration = await navigator.serviceWorker.ready; @@ -154,7 +154,7 @@Unregistering Indexed Content
Below is an asynchronous function, that removes an item from the {{domxref('Content Index API','content index')}}.
-async function unregisterContent(article) { +async function unregisterContent(article) { // reference registration const registration = await navigator.serviceWorker.ready; @@ -170,7 +170,7 @@Unregistering Indexed Content
All the above methods are available within the scope of the {{domxref('ServiceWorker','service worker')}}. They are accessible from the {{domxref('WorkerGlobalScope.self')}} property:
-// service worker script +// service worker script self.registration.index.add(item); @@ -183,7 +183,7 @@contentdelete event
When an item is removed from the user agent interface, a
-contentdelete
event is received by the service worker.self.addEventListener('contentdelete', (event) => { +self.addEventListener('contentdelete', (event) => { console.log(event.id); // logs content index id, which can then be used to determine what content to delete from your cache diff --git a/files/en-us/web/api/contentindexevent/contentindexevent/index.html b/files/en-us/web/api/contentindexevent/contentindexevent/index.html index 4d0bb8bb09afdd0..e47fa817f0282e1 100644 --- a/files/en-us/web/api/contentindexevent/contentindexevent/index.html +++ b/files/en-us/web/api/contentindexevent/contentindexevent/index.html @@ -20,7 +20,7 @@Syntax
var ContentIndexEvent = new ContentIndexEvent(type, ContentIndexEventInit);+ class="brush: js">var ContentIndexEvent = new ContentIndexEvent(type, ContentIndexEventInit);Parameters
@@ -47,7 +47,7 @@Examples
This examples constructs a new {{domxref('ContentIndexEvent')}} with the relevant id.
-var removeData = { +var removeData = { id : 'unique-content-id' } diff --git a/files/en-us/web/api/contentindexevent/id/index.html b/files/en-us/web/api/contentindexevent/id/index.html index f8213545b5770d8..b92c88cd66fab24 100644 --- a/files/en-us/web/api/contentindexevent/id/index.html +++ b/files/en-us/web/api/contentindexevent/id/index.html @@ -18,7 +18,7 @@Syntax
-var id = ContentIndexEvent.id;+var id = ContentIndexEvent.id;Value
@@ -33,7 +33,7 @@Examples
{{domxref('ServiceWorkerGlobalScope','global scope')}} of a {{domxref('ServiceWorker')}}. -self.addEventListener('contentdelete', (event) => { +self.addEventListener('contentdelete', (event) => { console.log(event.id); // logs content index id, which can then be used to determine what content to delete from your cache diff --git a/files/en-us/web/api/contentindexevent/index.html b/files/en-us/web/api/contentindexevent/index.html index aeaf87c3da1a56f..37ecd40b84e37e5 100644 --- a/files/en-us/web/api/contentindexevent/index.html +++ b/files/en-us/web/api/contentindexevent/index.html @@ -41,7 +41,7 @@Examples
This example shows the {{domxref('ServiceWorker','sevice worker')}} script listening for the {{domxref('ContentIndexEvent', 'contentdelete')}} event and logs the removed content index id.
-self.addEventListener('contentdelete', (event) => { +self.addEventListener('contentdelete', (event) => { console.log(event.id); // logs content index id, which can then be used to determine what content to delete from your cache diff --git a/files/en-us/web/api/convolvernode/convolvernode/index.html b/files/en-us/web/api/convolvernode/convolvernode/index.html index 1bc5d57df3f3d74..bfcb3aae2aae12b 100644 --- a/files/en-us/web/api/convolvernode/convolvernode/index.html +++ b/files/en-us/web/api/convolvernode/convolvernode/index.html @@ -18,7 +18,7 @@Syntax
var convolverNode = new ConvolverNode(context, options)+ class="brush: js">var convolverNode = new ConvolverNode(context, options)Parameters
diff --git a/files/en-us/web/api/convolvernode/normalize/index.html b/files/en-us/web/api/convolvernode/normalize/index.html index f4b58192d584ab6..6cacca5cd5b7fbc 100644 --- a/files/en-us/web/api/convolvernode/normalize/index.html +++ b/files/en-us/web/api/convolvernode/normalize/index.html @@ -24,7 +24,7 @@Syntax
-var audioCtx = new AudioContext(); +var audioCtx = new AudioContext(); var convolver = audioCtx.createConvolver(); convolver.normalize = false;diff --git a/files/en-us/web/api/cookiestore/get/index.html b/files/en-us/web/api/cookiestore/get/index.html index 92ec7486c8d1a50..2110fcd025daa5f 100644 --- a/files/en-us/web/api/cookiestore/get/index.html +++ b/files/en-us/web/api/cookiestore/get/index.html @@ -14,7 +14,7 @@Syntax
-var cookie = CookieStore.get(name); +var cookie = CookieStore.get(name); var cookie = CookieStore.get(options);Parameters
diff --git a/files/en-us/web/api/cookiestore/getall/index.html b/files/en-us/web/api/cookiestore/getall/index.html index 5ac2041e40f6359..8f49c7332f0f782 100644 --- a/files/en-us/web/api/cookiestore/getall/index.html +++ b/files/en-us/web/api/cookiestore/getall/index.html @@ -14,7 +14,7 @@Syntax
-var list = cookieStore.getAll(name); +var list = cookieStore.getAll(name); var list = cookieStore.getAll(options);Parameters
diff --git a/files/en-us/web/api/cookiestore/set/index.html b/files/en-us/web/api/cookiestore/set/index.html index a357debb34b3d69..84d179c700a1969 100644 --- a/files/en-us/web/api/cookiestore/set/index.html +++ b/files/en-us/web/api/cookiestore/set/index.html @@ -14,7 +14,7 @@Syntax
-var promise = cookieStore.set(name,value); +var promise = cookieStore.set(name,value); var promise = cookieStore.set(options);Parameters
diff --git a/files/en-us/web/api/credential/id/index.html b/files/en-us/web/api/credential/id/index.html index 2a88d1678703c5c..c27b899901db38f 100644 --- a/files/en-us/web/api/credential/id/index.html +++ b/files/en-us/web/api/credential/id/index.html @@ -19,7 +19,7 @@Syntax
-var id = Credential.id;+var id = Credential.id;Value
diff --git a/files/en-us/web/api/credential/index.html b/files/en-us/web/api/credential/index.html index 91ad20801ceb48f..56036a2ca20a423 100644 --- a/files/en-us/web/api/credential/index.html +++ b/files/en-us/web/api/credential/index.html @@ -41,7 +41,7 @@Methods
Examples
-let pwdCredential = new PasswordCredential({ +let pwdCredential = new PasswordCredential({ id: "example-username", // Username/ID name: "John Doe", // Display name password: "correct horse battery staple" // Password diff --git a/files/en-us/web/api/credential/type/index.html b/files/en-us/web/api/credential/type/index.html index a129cc4951337ce..006fbe440cb19cd 100644 --- a/files/en-us/web/api/credential/type/index.html +++ b/files/en-us/web/api/credential/type/index.html @@ -18,7 +18,7 @@Syntax
-var credType = Credential.type;+var credType = Credential.type;Value
diff --git a/files/en-us/web/api/crypto/getrandomvalues/index.html b/files/en-us/web/api/crypto/getrandomvalues/index.html index 9f109f208b4b50e..114f49859df76c3 100644 --- a/files/en-us/web/api/crypto/getrandomvalues/index.html +++ b/files/en-us/web/api/crypto/getrandomvalues/index.html @@ -35,7 +35,7 @@Syntax
typedArray = cryptoObj.getRandomValues(typedArray);+ class="brush: js">typedArray = cryptoObj.getRandomValues(typedArray);Parameters
@@ -78,7 +78,7 @@Usage notes
Examples
-/* Assuming that window.crypto.getRandomValues is available */ +/* Assuming that window.crypto.getRandomValues is available */ var array = new Uint32Array(10); window.crypto.getRandomValues(array); diff --git a/files/en-us/web/api/crypto/subtle/index.html b/files/en-us/web/api/crypto/subtle/index.html index 200d4ec7340e483..0ec6a9e4163c499 100644 --- a/files/en-us/web/api/crypto/subtle/index.html +++ b/files/en-us/web/api/crypto/subtle/index.html @@ -17,7 +17,7 @@Syntax
-var crypto = crypto.subtle;+var crypto = crypto.subtle;Value
diff --git a/files/en-us/web/api/css/escape/index.html b/files/en-us/web/api/css/escape/index.html index 0846c565fee133f..3fa0c4a207a1d70 100644 --- a/files/en-us/web/api/css/escape/index.html +++ b/files/en-us/web/api/css/escape/index.html @@ -18,7 +18,7 @@Syntax
-escapedStr = CSS.escape(str); +escapedStr = CSS.escape(str);Parameters
diff --git a/files/en-us/web/api/css/factory_functions/index.html b/files/en-us/web/api/css/factory_functions/index.html index c48131662579f8d..e91eb9e8c71069e 100644 --- a/files/en-us/web/api/css/factory_functions/index.html +++ b/files/en-us/web/api/css/factory_functions/index.html @@ -19,7 +19,7 @@Syntax
-CSS.number(number); +CSS.number(number); CSS.percent(number); // <length> diff --git a/files/en-us/web/api/css/index.html b/files/en-us/web/api/css/index.html index 3460d03e510552f..3240f74ea017d2e 100644 --- a/files/en-us/web/api/css/index.html +++ b/files/en-us/web/api/css/index.html @@ -41,7 +41,7 @@Static methods
{{DOMxRef("CSS.factory_functions", 'CSS factory functions')}} Can be used to return a new CSSUnitValue
with a value of the parameter number of the units of the name of the factory function method used.- diff --git a/files/en-us/web/api/css/paintworklet/index.html b/files/en-us/web/api/css/paintworklet/index.html index 26be3eee5c1cf72..bcda875b7155ca1 100644 --- a/files/en-us/web/api/css/paintworklet/index.html +++ b/files/en-us/web/api/css/paintworklet/index.html @@ -22,7 +22,7 @@CSS.em(3) // CSSUnitValue {value: 3, unit: "em"}+CSS.em(3) // CSSUnitValue {value: 3, unit: "em"}Syntax
-var worklet = CSS.paintWorklet;+var worklet = CSS.paintWorklet;Value
diff --git a/files/en-us/web/api/css/registerproperty/index.html b/files/en-us/web/api/css/registerproperty/index.html index dccd0c64bc0c8e4..a0c3a39d4deae69 100644 --- a/files/en-us/web/api/css/registerproperty/index.html +++ b/files/en-us/web/api/css/registerproperty/index.html @@ -19,7 +19,7 @@Syntax
CSS.registerProperty(PropertyDefinition);+ class="brush: js">CSS.registerProperty(PropertyDefinition);Parameters
@@ -64,7 +64,7 @@Examples
--my-color
, usingregisterProperty()
, as a color, give it a default value, and have it not inherit its value: -window.CSS.registerProperty({ +window.CSS.registerProperty({ name: '--my-color', syntax: '<color>', inherits: false, @@ -77,7 +77,7 @@Examples
gradient on hover or focus. Notice that with the registered property the transition works, but that it doesn't with the unregistered property! -.registered { +.registered { --my-color: #c0ffee; background-image: linear-gradient(to right, #fff, var(--my-color)); transition: --my-color 1s ease-in-out; @@ -104,7 +104,7 @@Examples
We can add these styles to some buttons:
-<button class="registered">Background Registered</button> +<button class="registered">Background Registered</button> <button class="unregistered">Background Not Registered</button>diff --git a/files/en-us/web/api/css/supports/index.html b/files/en-us/web/api/css/supports/index.html index a50377ad1677726..e7cfe3719fa0d7a 100644 --- a/files/en-us/web/api/css/supports/index.html +++ b/files/en-us/web/api/css/supports/index.html @@ -16,7 +16,7 @@Syntax
-CSS.supports(propertyName, value); +CSS.supports(propertyName, value); CSS.supports(supportCondition);diff --git a/files/en-us/web/api/cssanimation/animationname/index.html b/files/en-us/web/api/cssanimation/animationname/index.html index 6de5693b3ca3544..8a27f720ce3d89f 100644 --- a/files/en-us/web/api/cssanimation/animationname/index.html +++ b/files/en-us/web/api/cssanimation/animationname/index.html @@ -18,7 +18,7 @@Syntax
const animationName = CSSAnimation.animationName;+ class="brush: js">const animationName = CSSAnimation.animationName;Value
A {{domxref("CSSOMString")}}.
@@ -32,7 +32,7 @@Returning the animationName
of all {{domxref("Animation")}} objects. TheanimationName
property returns the name given to the animation, in our caseslide-in
. -.animate { +.animate { animation: slide-in 0.7s both; } @@ -45,7 +45,7 @@-Returning the animationName
} }let animations = document.querySelector(".animate").getAnimations(); +let animations = document.querySelector(".animate").getAnimations(); console.log(animations[0].animationName);Specifications
diff --git a/files/en-us/web/api/cssanimation/index.html b/files/en-us/web/api/cssanimation/index.html index e920ce4045ea52d..5a5f270f8bde1a5 100644 --- a/files/en-us/web/api/cssanimation/index.html +++ b/files/en-us/web/api/cssanimation/index.html @@ -35,7 +35,7 @@Inspecting the returned CSSAnimation
The animation in the following example is defined in CSS with the name
-slide-in
. Calling {{domxref("Element.getAnimations()")}} returns an array of all {{domxref("Animation")}} objects. In our case this returns aCSSAnimation
object, representing the animation created in CSS..animate { +.animate { animation: slide-in 0.7s both; } @@ -48,7 +48,7 @@-Inspecting the returned CSSAnimation
} }let animations = document.querySelector(".animate").getAnimations(); +let animations = document.querySelector(".animate").getAnimations(); console.log(animations[0]);Specifications
diff --git a/files/en-us/web/api/cssimportrule/href/index.html b/files/en-us/web/api/cssimportrule/href/index.html index 43f1da3f659d550..ad5a993d4b89297 100644 --- a/files/en-us/web/api/cssimportrule/href/index.html +++ b/files/en-us/web/api/cssimportrule/href/index.html @@ -1,74 +1,74 @@ ---- -title: CSSImportRule.href -slug: Web/API/CSSImportRule/href -tags: -- API -- CSSOM -- Property -- Reference -- CSSImportRule -- Read-only ---- -{{APIRef("CSSOM")}}
- -The read-only
- -href
property of the - {{domxref("CSSImportRule")}} interface returns the URL specified by the - {{cssxref("@import")}} at-rule.The resolved URL will be the {{HTMLAttrxRef("href","link")}} attribute of the - associated stylesheet.
- - -Syntax
- -var href = CSSImportRule.href;- -Value
-A {{domxref("USVString")}}.
- -Examples
- -The following stylesheet includes a single {{cssxref("@import")}} rule. Therefore the - first item in the list of CSS rules will be a
- -CSSImportRule
. The -href
property returns the URL of the imported stylesheet.@import url("style.css") screen;- -let myRules = document.styleSheets[0].cssRules; -console.log(myRules[0].href); //returns style.css- -Specifications
- -
Specification | -Status | -Comment | -
---|---|---|
{{SpecName('CSSOM', '#dom-cssimportrule-href', 'CSSImportRule.href')}} - | -{{Spec2('CSSOM')}} | -No changes from {{SpecName('DOM2 Style')}} | -
{{SpecName('DOM2 Style', 'css.html#CSS-CSSImportRule', 'CSSImportRule')}} - | -{{Spec2('DOM2 Style')}} | -Initial definition | -
{{Compat("api.CSSImportRule.href")}}
+--- +title: CSSImportRule.href +slug: Web/API/CSSImportRule/href +tags: +- API +- CSSOM +- Property +- Reference +- CSSImportRule +- Read-only +--- +{{APIRef("CSSOM")}}
+ +The read-only href
property of the
+ {{domxref("CSSImportRule")}} interface returns the URL specified by the
+ {{cssxref("@import")}} at-rule.
The resolved URL will be the {{HTMLAttrxRef("href","link")}} attribute of the + associated stylesheet.
+ + +var href = CSSImportRule.href;+ +
A {{domxref("USVString")}}.
+ +The following stylesheet includes a single {{cssxref("@import")}} rule. Therefore the
+ first item in the list of CSS rules will be a CSSImportRule
. The
+ href
property returns the URL of the imported stylesheet.
@import url("style.css") screen;+ +
let myRules = document.styleSheets[0].cssRules; +console.log(myRules[0].href); //returns style.css+ +
Specification | +Status | +Comment | +
---|---|---|
{{SpecName('CSSOM', '#dom-cssimportrule-href', 'CSSImportRule.href')}} + | +{{Spec2('CSSOM')}} | +No changes from {{SpecName('DOM2 Style')}} | +
{{SpecName('DOM2 Style', 'css.html#CSS-CSSImportRule', 'CSSImportRule')}} + | +{{Spec2('DOM2 Style')}} | +Initial definition | +
{{Compat("api.CSSImportRule.href")}}
diff --git a/files/en-us/web/api/cssimportrule/media/index.html b/files/en-us/web/api/cssimportrule/media/index.html index 9ecdea5b5893815..800f75d1e0e07c8 100644 --- a/files/en-us/web/api/cssimportrule/media/index.html +++ b/files/en-us/web/api/cssimportrule/media/index.html @@ -1,72 +1,72 @@ ---- -title: CSSImportRule.media -slug: Web/API/CSSImportRule/media -tags: -- API -- CSSOM -- Property -- Reference -- CSSImportRule -- Read-only ---- -{{APIRef("CSSOM")}}
- -The read-only media
property of the
- {{domxref("CSSImportRule")}} interface returns a {{domxref("MediaList")}} object,
- containing the value of the media
attribute of the associated stylesheet.
-
var media = CSSImportRule.media;- -
A {{domxref("MediaList")}} object.
- -The following stylesheet includes a single {{cssxref("@import")}} rule. Therefore the
- first item in the list of CSS rules will be a CSSImportRule
. The
- media
property returns a {{domxref("MediaList")}} object. This includes
- the mediaText
property with a value of screen
.
@import url("style.css") screen;- -
let myRules = document.styleSheets[0].cssRules; -console.log(myRules[0].media); //returns a MediaList- -
Specification | -Status | -Comment | -
---|---|---|
{{SpecName('CSSOM', '#dom-cssimportrule-media', 'CSSImportRule.media')}} - | -{{Spec2('CSSOM')}} | -No changes from {{SpecName('DOM2 Style')}} | -
{{SpecName('DOM2 Style', 'css.html#CSS-CSSImportRule', 'CSSImportRule')}} - | -{{Spec2('DOM2 Style')}} | -Initial definition | -
{{Compat("api.CSSImportRule.media")}}
+--- +title: CSSImportRule.media +slug: Web/API/CSSImportRule/media +tags: +- API +- CSSOM +- Property +- Reference +- CSSImportRule +- Read-only +--- +{{APIRef("CSSOM")}}
+ +The read-only media
property of the
+ {{domxref("CSSImportRule")}} interface returns a {{domxref("MediaList")}} object,
+ containing the value of the media
attribute of the associated stylesheet.
+
var media = CSSImportRule.media;+ +
A {{domxref("MediaList")}} object.
+ +The following stylesheet includes a single {{cssxref("@import")}} rule. Therefore the
+ first item in the list of CSS rules will be a CSSImportRule
. The
+ media
property returns a {{domxref("MediaList")}} object. This includes
+ the mediaText
property with a value of screen
.
@import url("style.css") screen;+ +
let myRules = document.styleSheets[0].cssRules; +console.log(myRules[0].media); //returns a MediaList+ +
Specification | +Status | +Comment | +
---|---|---|
{{SpecName('CSSOM', '#dom-cssimportrule-media', 'CSSImportRule.media')}} + | +{{Spec2('CSSOM')}} | +No changes from {{SpecName('DOM2 Style')}} | +
{{SpecName('DOM2 Style', 'css.html#CSS-CSSImportRule', 'CSSImportRule')}} + | +{{Spec2('DOM2 Style')}} | +Initial definition | +
{{Compat("api.CSSImportRule.media")}}
diff --git a/files/en-us/web/api/cssimportrule/stylesheet/index.html b/files/en-us/web/api/cssimportrule/stylesheet/index.html index 40a79426974af8f..763e67fb5c3c1c9 100644 --- a/files/en-us/web/api/cssimportrule/stylesheet/index.html +++ b/files/en-us/web/api/cssimportrule/stylesheet/index.html @@ -1,74 +1,74 @@ ---- -title: CSSImportRule.stylesheet -slug: Web/API/CSSImportRule/stylesheet -tags: -- API -- CSSOM -- Property -- Reference -- CSSImportRule -- Read-only ---- -{{APIRef("CSSOM")}}
- -The read-only styleSheet
property of the
- {{domxref("CSSImportRule")}} interface returns the CSS Stylesheet specified by the
- {{cssxref("@import")}} at-rule. This will be
- in the form of a {{domxref("CSSStyleSheet")}} object.
An {{cssxref("@import")}} at-rule always has - an associated stylesheet.
- -var href = CSSImportRule.styleSheet;- -
A {{domxref("CSSStyleSheet")}}.
- -The following stylesheet includes a single {{cssxref("@import")}} rule. Therefore the
- first item in the list of CSS rules will be a CSSImportRule
. The
- styleSheet
property returns the imported stylesheet.
@import url("style.css") screen;- -
let myRules = document.styleSheets[0].cssRules; -console.log(myRules[0].styleSheet); //returns a CSSStyleSheet object- -
Specification | -Status | -Comment | -
---|---|---|
{{SpecName('CSSOM', '#dom-cssimportrule-stylesheet', - 'CSSImportRule.styleSheet')}} | -{{Spec2('CSSOM')}} | -No changes from {{SpecName('DOM2 Style')}} | -
{{SpecName('DOM2 Style', 'css.html#CSS-CSSImportRule', 'CSSImportRule')}} - | -{{Spec2('DOM2 Style')}} | -Initial definition | -
{{Compat("api.CSSImportRule.styleSheet")}}
+--- +title: CSSImportRule.stylesheet +slug: Web/API/CSSImportRule/stylesheet +tags: +- API +- CSSOM +- Property +- Reference +- CSSImportRule +- Read-only +--- +{{APIRef("CSSOM")}}
+ +The read-only styleSheet
property of the
+ {{domxref("CSSImportRule")}} interface returns the CSS Stylesheet specified by the
+ {{cssxref("@import")}} at-rule. This will be
+ in the form of a {{domxref("CSSStyleSheet")}} object.
An {{cssxref("@import")}} at-rule always has + an associated stylesheet.
+ +var href = CSSImportRule.styleSheet;+ +
A {{domxref("CSSStyleSheet")}}.
+ +The following stylesheet includes a single {{cssxref("@import")}} rule. Therefore the
+ first item in the list of CSS rules will be a CSSImportRule
. The
+ styleSheet
property returns the imported stylesheet.
@import url("style.css") screen;+ +
let myRules = document.styleSheets[0].cssRules; +console.log(myRules[0].styleSheet); //returns a CSSStyleSheet object+ +
Specification | +Status | +Comment | +
---|---|---|
{{SpecName('CSSOM', '#dom-cssimportrule-stylesheet', + 'CSSImportRule.styleSheet')}} | +{{Spec2('CSSOM')}} | +No changes from {{SpecName('DOM2 Style')}} | +
{{SpecName('DOM2 Style', 'css.html#CSS-CSSImportRule', 'CSSImportRule')}} + | +{{Spec2('DOM2 Style')}} | +Initial definition | +
{{Compat("api.CSSImportRule.styleSheet")}}
diff --git a/files/en-us/web/api/csspositionvalue/csspositionvalue/index.html b/files/en-us/web/api/csspositionvalue/csspositionvalue/index.html index efc17029e409c53..fd24340c31c588f 100644 --- a/files/en-us/web/api/csspositionvalue/csspositionvalue/index.html +++ b/files/en-us/web/api/csspositionvalue/csspositionvalue/index.html @@ -20,7 +20,7 @@cvar cssPositionValue = new CSSPositionValue(x, y)+ class="brush: js">cvar cssPositionValue = new CSSPositionValue(x, y)
var x = CSSPositionValue.x+
var x = CSSPositionValue.x
var y = CSSPositionValue.y+
var y = CSSPositionValue.y
var rotateAngle = CSSRotate.angle;+
var rotateAngle = CSSRotate.angle;
var CSSRotate = new CSSRotate(x,y,z,angle);+ class="brush: js">var CSSRotate = new CSSRotate(x,y,z,angle);
var rotateX = CSSRotate.x;+
var rotateX = CSSRotate.x;
varrotateY = CSSRotate.y;+
varrotateY = CSSRotate.y;
var rotateZ = CSSRotate.z;+
var rotateZ = CSSRotate.z;
string = cssRule.cssText +string = cssRule.cssTextExample
diff --git a/files/en-us/web/api/cssrule/index.html b/files/en-us/web/api/cssrule/index.html index 66c26a6ead4ec4d..d7f46003bb834a3 100644 --- a/files/en-us/web/api/cssrule/index.html +++ b/files/en-us/web/api/cssrule/index.html @@ -48,7 +48,7 @@Examples
References to a
-CSSRule
may be obtained by looking at a {{domxref("CSSStyleSheet")}}'scssRules
list.let myRules = document.styleSheets[0].cssRules; // Returns a CSSRuleList +let myRules = document.styleSheets[0].cssRules; // Returns a CSSRuleList console.log(myRules);Specifications
diff --git a/files/en-us/web/api/cssrule/parentrule/index.html b/files/en-us/web/api/cssrule/parentrule/index.html index 1142d661398a105..bb1bd607f4fd238 100644 --- a/files/en-us/web/api/cssrule/parentrule/index.html +++ b/files/en-us/web/api/cssrule/parentrule/index.html @@ -17,7 +17,7 @@Syntax
var parentRule = cssRule.parentRule+ class="brush: js">var parentRule = cssRule.parentRuleValues
diff --git a/files/en-us/web/api/cssrule/parentstylesheet/index.html b/files/en-us/web/api/cssrule/parentstylesheet/index.html index fda7cc760f86652..59a893bee557e91 100644 --- a/files/en-us/web/api/cssrule/parentstylesheet/index.html +++ b/files/en-us/web/api/cssrule/parentstylesheet/index.html @@ -17,7 +17,7 @@Syntax
var stylesheet = cssRule.parentStyleSheet+ class="brush: js">var stylesheet = cssRule.parentStyleSheet
var type = cssRule.type;+
var type = cssRule.type;
let myRules = document.styleSheets[0].cssRules; +let myRules = document.styleSheets[0].cssRules; console.log(myRules[0].type);Specifications
diff --git a/files/en-us/web/api/cssstylevalue/parse/index.html b/files/en-us/web/api/cssstylevalue/parse/index.html index fe1da334197ec11..871dc6d34ed90a3 100644 --- a/files/en-us/web/api/cssstylevalue/parse/index.html +++ b/files/en-us/web/api/cssstylevalue/parse/index.html @@ -20,7 +20,7 @@Syntax
CSSStyleValue.parse(property, cssText)+ class="brush: js">CSSStyleValue.parse(property, cssText)
CSSStyleValue.parseAll(property, value)+ class="brush: js">CSSStyleValue.parseAll(property, value)
var is2D = CSSTransformComponent.is2D;+
var is2D = CSSTransformComponent.is2D;
var matrix = CSSTransformComponent.toMatrix();+ class="brush: js">var matrix = CSSTransformComponent.toMatrix();
var transformString = CSSTransformComponent.toString();+ class="brush: js">var transformString = CSSTransformComponent.toString();
var CSSUnitValue = new CSSUnitValue()+ class="brush: js">var CSSUnitValue = new CSSUnitValue()
var aString = CSSUnitValue.unit;+
var aString = CSSUnitValue.unit;
var cssUnitValue = CSSUnitValue.value; +var cssUnitValue = CSSUnitValue.value; CSSUnitValue.value = cssUnitValue;Value
diff --git a/files/en-us/web/api/cssvalue/csstext/index.html b/files/en-us/web/api/cssvalue/csstext/index.html index 6b4d369c99900f1..b0f5c128cdf9998 100644 --- a/files/en-us/web/api/cssvalue/csstext/index.html +++ b/files/en-us/web/api/cssvalue/csstext/index.html @@ -15,7 +15,7 @@Syntax
-cssText = cssValue.cssText; +cssText = cssValue.cssText;Value
diff --git a/files/en-us/web/api/cssvalue/cssvaluetype/index.html b/files/en-us/web/api/cssvalue/cssvaluetype/index.html index ea6cf2411956819..632b1fba4daf001 100644 --- a/files/en-us/web/api/cssvalue/cssvaluetype/index.html +++ b/files/en-us/web/api/cssvalue/cssvaluetype/index.html @@ -17,7 +17,7 @@Syntax
-cssValueType = cssValue.cssValueType; +cssValueType = cssValue.cssValueType;Value
diff --git a/files/en-us/web/api/datatransferitem/getasfile/index.html b/files/en-us/web/api/datatransferitem/getasfile/index.html index 94f858843edee04..1aaaff14d021be2 100644 --- a/files/en-us/web/api/datatransferitem/getasfile/index.html +++ b/files/en-us/web/api/datatransferitem/getasfile/index.html @@ -18,7 +18,7 @@Syntax
-File = DataTransferItem.getAsFile(); +File = DataTransferItem.getAsFile();Parameters
@@ -38,7 +38,7 @@Example
This example shows the use of the
-getAsFile()
method in a {{event("drop")}} event handler.function drop_handler(ev) { +function drop_handler(ev) { console.log("Drop"); ev.preventDefault(); var data = event.dataTransfer.items; diff --git a/files/en-us/web/api/datatransferitem/getasfilesystemhandle/index.html b/files/en-us/web/api/datatransferitem/getasfilesystemhandle/index.html index 4f483572b91ff3a..9d5f6380859e902 100644 --- a/files/en-us/web/api/datatransferitem/getasfilesystemhandle/index.html +++ b/files/en-us/web/api/datatransferitem/getasfilesystemhandle/index.html @@ -19,7 +19,7 @@Syntax
var handle = DataTransferItem.getAsFileSystemHandle();+ class="brush: js">var handle = DataTransferItem.getAsFileSystemHandle();Parameters
@@ -38,7 +38,7 @@Examples
This example uses the
-getAsFileSystemHandle
method to return {{domxref('FileSystemHandle','file handles')}} for dropped items.elem.addEventListener('dragover', (e) => { +elem.addEventListener('dragover', (e) => { // Prevent navigation. e.preventDefault(); }); diff --git a/files/en-us/web/api/datatransferitem/getasstring/index.html b/files/en-us/web/api/datatransferitem/getasstring/index.html index 7d918073e5263f0..f64592b34187587 100644 --- a/files/en-us/web/api/datatransferitem/getasstring/index.html +++ b/files/en-us/web/api/datatransferitem/getasstring/index.html @@ -20,7 +20,7 @@Syntax
-dataTransferItem.getAsString(callback); +dataTransferItem.getAsString(callback);Parameters
diff --git a/files/en-us/web/api/datatransferitem/kind/index.html b/files/en-us/web/api/datatransferitem/kind/index.html index 16591cab437b769..24941fb03c8ba4c 100644 --- a/files/en-us/web/api/datatransferitem/kind/index.html +++ b/files/en-us/web/api/datatransferitem/kind/index.html @@ -19,7 +19,7 @@Syntax
-var itemKind = DataTransferItem.kind; +var itemKind = DataTransferItem.kind;Return value
diff --git a/files/en-us/web/api/datatransferitem/type/index.html b/files/en-us/web/api/datatransferitem/type/index.html index 5700c26c99c550f..ff8c582676f600d 100644 --- a/files/en-us/web/api/datatransferitem/type/index.html +++ b/files/en-us/web/api/datatransferitem/type/index.html @@ -22,7 +22,7 @@Syntax
-dataItem.type; +dataItem.type;Return value
diff --git a/files/en-us/web/api/datatransferitem/webkitgetasentry/index.html b/files/en-us/web/api/datatransferitem/webkitgetasentry/index.html index 712008e73f7287a..3ad79f1260f972c 100644 --- a/files/en-us/web/api/datatransferitem/webkitgetasentry/index.html +++ b/files/en-us/web/api/datatransferitem/webkitgetasentry/index.html @@ -30,7 +30,7 @@Syntax
-DataTransferItem.webkitGetAsEntry();+DataTransferItem.webkitGetAsEntry();Parameters
@@ -54,7 +54,7 @@HTML content
with the ID"dropzone"
, and an unordered list element with the ID"listing"
. -<p>Drag files and/or directories to the box below!</p> +<p>Drag files and/or directories to the box below!</p> <div id="dropzone"> <div id="boxtitle"> @@ -71,7 +71,7 @@CSS content
The styles used by the example are shown here.
-#dropzone { +#dropzone { text-align: center; width: 300px; height: 100px; @@ -108,7 +108,7 @@JavaScript content
following example will only return a max of 100 entries. -let dropzone = document.getElementById("dropzone"); +let dropzone = document.getElementById("dropzone"); let listing = document.getElementById("listing"); function scanFiles(item, container) { @@ -153,7 +153,7 @@JavaScript content
Then come the event handlers. First, we prevent the {{event("dragover")}} event from being handled by the default handler, so that our drop zone can receive the drop:
-dropzone.addEventListener("dragover", function(event) { +dropzone.addEventListener("dragover", function(event) { event.preventDefault(); }, false);@@ -161,7 +161,7 @@JavaScript content
The event handler that kicks everything off, of course, is the handler for the {{event("drop")}} event:
-dropzone.addEventListener("drop", function(event) { +dropzone.addEventListener("drop", function(event) { let items = event.dataTransfer.items; event.preventDefault(); diff --git a/files/en-us/web/api/devicelightevent/value/index.html b/files/en-us/web/api/devicelightevent/value/index.html index 9be29b3150fbd98..3bbc5986fe99f6c 100644 --- a/files/en-us/web/api/devicelightevent/value/index.html +++ b/files/en-us/web/api/devicelightevent/value/index.html @@ -16,7 +16,7 @@Syntax
var light = instanceOfDeviceLightEvent.value;+ class="brush: js">var light = instanceOfDeviceLightEvent.value;Value
diff --git a/files/en-us/web/api/devicemotioneventacceleration/x/index.html b/files/en-us/web/api/devicemotioneventacceleration/x/index.html index f821092015ed2ad..a16bd9d1f9ddddb 100644 --- a/files/en-us/web/api/devicemotioneventacceleration/x/index.html +++ b/files/en-us/web/api/devicemotioneventacceleration/x/index.html @@ -19,7 +19,7 @@Summary
Syntax
-var xAccel = DeviceMotionEventAcceleration.x; +var xAccel = DeviceMotionEventAcceleration.x;Return value
diff --git a/files/en-us/web/api/devicemotioneventacceleration/y/index.html b/files/en-us/web/api/devicemotioneventacceleration/y/index.html index d7ac8f835e547f7..14d962059f30715 100644 --- a/files/en-us/web/api/devicemotioneventacceleration/y/index.html +++ b/files/en-us/web/api/devicemotioneventacceleration/y/index.html @@ -19,7 +19,7 @@Summary
Syntax
-var yAccel = DeviceMotionEventAcceleration.y; +var yAccel = DeviceMotionEventAcceleration.y;Return value
diff --git a/files/en-us/web/api/devicemotioneventacceleration/z/index.html b/files/en-us/web/api/devicemotioneventacceleration/z/index.html index 561b6bb89b1ea26..4a3824f6672aae8 100644 --- a/files/en-us/web/api/devicemotioneventacceleration/z/index.html +++ b/files/en-us/web/api/devicemotioneventacceleration/z/index.html @@ -19,7 +19,7 @@Summary
Syntax
-var zAccel = DeviceMotionEventAcceleration.z; +var zAccel = DeviceMotionEventAcceleration.z;Return value
diff --git a/files/en-us/web/api/documentfragment/documentfragment/index.html b/files/en-us/web/api/documentfragment/documentfragment/index.html index 980adb773248121..1bff11608a86565 100644 --- a/files/en-us/web/api/documentfragment/documentfragment/index.html +++ b/files/en-us/web/api/documentfragment/documentfragment/index.html @@ -16,7 +16,7 @@Syntax
fragment = new DocumentFragment()+ class="brush: js">fragment = new DocumentFragment()Example
diff --git a/files/en-us/web/api/documentfragment/index.html b/files/en-us/web/api/documentfragment/index.html index 759e60df8606d0c..19adfcde865430a 100644 --- a/files/en-us/web/api/documentfragment/index.html +++ b/files/en-us/web/api/documentfragment/index.html @@ -61,12 +61,12 @@Example
HTML
-<ul id="list"></ul> +<ul id="list"></ul>JavaScript
-var list = document.querySelector('#list') +var list = document.querySelector('#list') var fruits = ['Apple', 'Orange', 'Banana', 'Melon'] var fragment = new DocumentFragment() diff --git a/files/en-us/web/api/documentfragment/queryselector/index.html b/files/en-us/web/api/documentfragment/queryselector/index.html index d8fa94c9eda096d..6e671afc0a46966 100644 --- a/files/en-us/web/api/documentfragment/queryselector/index.html +++ b/files/en-us/web/api/documentfragment/queryselector/index.html @@ -23,7 +23,7 @@Syntax
element = documentfragment.querySelector(selectors);+ class="brush: js">element = documentfragment.querySelector(selectors);Parameters
diff --git a/files/en-us/web/api/documentfragment/queryselectorall/index.html b/files/en-us/web/api/documentfragment/queryselectorall/index.html index bbc22e7e310aca8..2f5196ad4e134cb 100644 --- a/files/en-us/web/api/documentfragment/queryselectorall/index.html +++ b/files/en-us/web/api/documentfragment/queryselectorall/index.html @@ -25,7 +25,7 @@Syntax
elementList = documentfragment.querySelectorAll(selectors);+ class="brush: js">elementList = documentfragment.querySelectorAll(selectors);Parameters
diff --git a/files/en-us/web/api/dompointreadonly/dompointreadonly/index.html b/files/en-us/web/api/dompointreadonly/dompointreadonly/index.html index 83d1b651e818ded..53427f0d2504ca3 100644 --- a/files/en-us/web/api/dompointreadonly/dompointreadonly/index.html +++ b/files/en-us/web/api/dompointreadonly/dompointreadonly/index.html @@ -22,7 +22,7 @@Syntax
-point = new DOMPointReadOnly(x, y, z, w); +point = new DOMPointReadOnly(x, y, z, w);Parameters
diff --git a/files/en-us/web/api/dompointreadonly/frompoint/index.html b/files/en-us/web/api/dompointreadonly/frompoint/index.html index a274db247f8964f..b7b38415a416f66 100644 --- a/files/en-us/web/api/dompointreadonly/frompoint/index.html +++ b/files/en-us/web/api/dompointreadonly/frompoint/index.html @@ -29,7 +29,7 @@Syntax
const point = DOMPointReadOnly.fromPoint(sourcePoint)+ class="brush: js">const point = DOMPointReadOnly.fromPoint(sourcePoint)Properties
diff --git a/files/en-us/web/api/dompointreadonly/tojson/index.html b/files/en-us/web/api/dompointreadonly/tojson/index.html index 7a5b9284126d2e9..421cd92cffe7c93 100644 --- a/files/en-us/web/api/dompointreadonly/tojson/index.html +++ b/files/en-us/web/api/dompointreadonly/tojson/index.html @@ -23,7 +23,7 @@Syntax
pointJSON = DOMPointReadOnly.toJSON();+ class="brush: js">pointJSON = DOMPointReadOnly.toJSON();Parameters
diff --git a/files/en-us/web/api/dompointreadonly/w/index.html b/files/en-us/web/api/dompointreadonly/w/index.html index 21edb71f7039643..826713e8afdc75a 100644 --- a/files/en-us/web/api/dompointreadonly/w/index.html +++ b/files/en-us/web/api/dompointreadonly/w/index.html @@ -27,7 +27,7 @@Syntax
const perspective = someDOMPointReadOnly.w+ class="brush: js">const perspective = someDOMPointReadOnly.wValue
diff --git a/files/en-us/web/api/dompointreadonly/x/index.html b/files/en-us/web/api/dompointreadonly/x/index.html index e1692822c463435..bbff3ea93befd6d 100644 --- a/files/en-us/web/api/dompointreadonly/x/index.html +++ b/files/en-us/web/api/dompointreadonly/x/index.html @@ -28,7 +28,7 @@Syntax
const xPos = someDOMPointReadOnly.x;+ class="brush: js">const xPos = someDOMPointReadOnly.x;Value
diff --git a/files/en-us/web/api/dompointreadonly/y/index.html b/files/en-us/web/api/dompointreadonly/y/index.html index 7ca3940ce044dd3..9491ff8962caf9a 100644 --- a/files/en-us/web/api/dompointreadonly/y/index.html +++ b/files/en-us/web/api/dompointreadonly/y/index.html @@ -28,7 +28,7 @@Syntax
const yPos = someDOMPointReadOnly.y;+ class="brush: js">const yPos = someDOMPointReadOnly.y;Value
diff --git a/files/en-us/web/api/dompointreadonly/z/index.html b/files/en-us/web/api/dompointreadonly/z/index.html index 994a4f40bff23ac..1b41b7dd608c492 100644 --- a/files/en-us/web/api/dompointreadonly/z/index.html +++ b/files/en-us/web/api/dompointreadonly/z/index.html @@ -29,7 +29,7 @@Syntax
const zPos = someDOMPointReadOnly.z;+ class="brush: js">const zPos = someDOMPointReadOnly.z;Value
diff --git a/files/en-us/web/api/eventsource/close/index.html b/files/en-us/web/api/eventsource/close/index.html index 292a77a56764d2a..4e050235c93671c 100644 --- a/files/en-us/web/api/eventsource/close/index.html +++ b/files/en-us/web/api/eventsource/close/index.html @@ -22,7 +22,7 @@Syntax
-eventSource.close();+eventSource.close();Parameters
diff --git a/files/en-us/web/api/eventsource/error_event/index.html b/files/en-us/web/api/eventsource/error_event/index.html index 599703f2d8d10da..9ffaac08b0c6305 100644 --- a/files/en-us/web/api/eventsource/error_event/index.html +++ b/files/en-us/web/api/eventsource/error_event/index.html @@ -35,7 +35,7 @@Examples
-var evtSource = new EventSource('sse.php'); +var evtSource = new EventSource('sse.php'); // addEventListener version evtSource.addEventListener('error', (e) => { diff --git a/files/en-us/web/api/eventsource/eventsource/index.html b/files/en-us/web/api/eventsource/eventsource/index.html index 1a172726fae832d..ac89852b2eea023 100644 --- a/files/en-us/web/api/eventsource/eventsource/index.html +++ b/files/en-us/web/api/eventsource/eventsource/index.html @@ -17,7 +17,7 @@Syntax
eventSource = new EventSource(url, configuration);+ class="brush: js">eventSource = new EventSource(url, configuration);Parameters
diff --git a/files/en-us/web/api/eventsource/message_event/index.html b/files/en-us/web/api/eventsource/message_event/index.html index a5bcd744f45e982..f2b0d2d44291984 100644 --- a/files/en-us/web/api/eventsource/message_event/index.html +++ b/files/en-us/web/api/eventsource/message_event/index.html @@ -37,7 +37,7 @@Examples
In this basic example, an
-EventSource
is created to receive events from the server; a page with the namesse.php
is responsible for generating the events.var evtSource = new EventSource('sse.php'); +var evtSource = new EventSource('sse.php'); var eventList = document.querySelector('ul'); evtSource.addEventListener('message', (e) => { @@ -49,7 +49,7 @@Examples
onmessage equivalent
-evtSource.onmessage = (e) => { +evtSource.onmessage = (e) => { var newElement = document.createElement("li"); newElement.textContent = "message: " + e.data; diff --git a/files/en-us/web/api/eventsource/onerror/index.html b/files/en-us/web/api/eventsource/onerror/index.html index 4c634e729d1ac19..a6c7e43aa675ee6 100644 --- a/files/en-us/web/api/eventsource/onerror/index.html +++ b/files/en-us/web/api/eventsource/onerror/index.html @@ -19,7 +19,7 @@Syntax
-eventSource.onerror = function+eventSource.onerror = functionExamples
diff --git a/files/en-us/web/api/eventsource/onmessage/index.html b/files/en-us/web/api/eventsource/onmessage/index.html index d9f6ea55a5e6e3d..1bce3dc524934e2 100644 --- a/files/en-us/web/api/eventsource/onmessage/index.html +++ b/files/en-us/web/api/eventsource/onmessage/index.html @@ -21,7 +21,7 @@Syntax
-eventSource.onmessage = function+eventSource.onmessage = functionExamples
diff --git a/files/en-us/web/api/eventsource/onopen/index.html b/files/en-us/web/api/eventsource/onopen/index.html index 01868d3201bc41e..dd12c92426b878e 100644 --- a/files/en-us/web/api/eventsource/onopen/index.html +++ b/files/en-us/web/api/eventsource/onopen/index.html @@ -18,7 +18,7 @@Syntax
-eventSource.onopen = function+eventSource.onopen = functionExamples
diff --git a/files/en-us/web/api/eventsource/open_event/index.html b/files/en-us/web/api/eventsource/open_event/index.html index f900a0b9a9e9a29..8f2853f8f93beb4 100644 --- a/files/en-us/web/api/eventsource/open_event/index.html +++ b/files/en-us/web/api/eventsource/open_event/index.html @@ -35,7 +35,7 @@Examples
-var evtSource = new EventSource('sse.php'); +var evtSource = new EventSource('sse.php'); // addEventListener version evtSource.addEventListener('open', (e) => { diff --git a/files/en-us/web/api/eventsource/readystate/index.html b/files/en-us/web/api/eventsource/readystate/index.html index 526e8fe457c659d..234f6ae7144c972 100644 --- a/files/en-us/web/api/eventsource/readystate/index.html +++ b/files/en-us/web/api/eventsource/readystate/index.html @@ -18,7 +18,7 @@Syntax
var myReadyState = eventSource.readyState;+ class="brush: js">var myReadyState = eventSource.readyState;Value
diff --git a/files/en-us/web/api/eventsource/url/index.html b/files/en-us/web/api/eventsource/url/index.html index b64bea5f1a0e29a..aa1b829bf013188 100644 --- a/files/en-us/web/api/eventsource/url/index.html +++ b/files/en-us/web/api/eventsource/url/index.html @@ -17,7 +17,7 @@Syntax
-var myUrl = eventSource.url;+var myUrl = eventSource.url;Value
diff --git a/files/en-us/web/api/eventsource/withcredentials/index.html b/files/en-us/web/api/eventsource/withcredentials/index.html index aa6f67b7ee55ff1..59b695182f05967 100644 --- a/files/en-us/web/api/eventsource/withcredentials/index.html +++ b/files/en-us/web/api/eventsource/withcredentials/index.html @@ -18,7 +18,7 @@Syntax
var myWithCredentials = eventSource.withCredentials;+ class="brush: js">var myWithCredentials = eventSource.withCredentials;Value
diff --git a/files/en-us/web/api/eventtarget/addeventlistener/index.html b/files/en-us/web/api/eventtarget/addeventlistener/index.html index 66901a399d478d1..263c8a192b56a37 100644 --- a/files/en-us/web/api/eventtarget/addeventlistener/index.html +++ b/files/en-us/web/api/eventtarget/addeventlistener/index.html @@ -35,7 +35,7 @@Syntax
target.addEventListener(type, listener [, options]); + class="brush: js">target.addEventListener(type, listener [, options]); target.addEventListener(type, listener [, useCapture]); target.addEventListener(type, listener [, useCapture, wantsUntrusted {{Non-standard_inline}}]); // Gecko/Mozilla only@@ -129,7 +129,7 @@The event listener callback
{{domxref("Element/fullscreenerror_event", "fullscreenerror")}} might look like this: -function eventHandler(event) { +function eventHandler(event) { if (event.type == 'fullscreenchange') { /* handle a full screen toggle */ } else /* fullscreenerror */ { @@ -154,7 +154,7 @@Safely detecting option support
For example, if you want to check for the
-passive
option:let passiveSupported = false; +let passiveSupported = false; try { const options = { @@ -190,7 +190,7 @@Safely detecting option support
Then, when you want to create an actual event listener that uses the options in question, you can do something like this:
-someElement.addEventListener("mouseup", handleMouseUp, passiveSupported +someElement.addEventListener("mouseup", handleMouseUp, passiveSupported ? { passive: true } : false);Here we're adding a listener for the {{domxref("Element/mouseup_event", "mouseup")}} @@ -218,7 +218,7 @@
Add a simple listener
HTML
-<table id="outside"> +<table id="outside"> <tr><td id="t1">one</td></tr> <tr><td id="t2">two</td></tr> </table> @@ -226,7 +226,7 @@HTML
JavaScript
-// Function to change the content of t2 +// Function to change the content of t2 function modifyText() { const t2 = document.getElementById("t2"); if (t2.firstChild.nodeValue == "three") { @@ -257,14 +257,14 @@Event listener with anonymous fu
HTML
-<table id="outside"> +<table id="outside"> <tr><td id="t1">one</td></tr> <tr><td id="t2">two</td></tr> </table>JavaScript
-// Function to change the content of t2 +// Function to change the content of t2 function modifyText(new_text) { const t2 = document.getElementById("t2"); t2.firstChild.nodeValue = new_text; @@ -290,7 +290,7 @@Event listener with an arrow func
HTML
-<table id="outside"> +<table id="outside"> <tr><td id="t1">one</td></tr> <tr><td id="t2">two</td></tr> </table> @@ -298,7 +298,7 @@HTML
JavaScript
-// Function to change the content of t2 +// Function to change the content of t2 function modifyText(new_text) { const t2 = document.getElementById("t2"); t2.firstChild.nodeValue = new_text; @@ -325,7 +325,7 @@Example of options usage
HTML
-<div class="outer"> +<div class="outer"> outer, once & none-once <div class="middle" target="_blank"> middle, capture & none-capture @@ -341,7 +341,7 @@HTML
CSS
-.outer, .middle, .inner1, .inner2 { +.outer, .middle, .inner1, .inner2 { display: block; width: 520px; padding: 15px; @@ -366,7 +366,7 @@CSS
JavaScript
-const outer = document.querySelector('.outer'); +const outer = document.querySelector('.outer'); const middle = document.querySelector('.middle'); const inner1 = document.querySelector('.inner1'); const inner2 = document.querySelector('.inner2'); @@ -486,7 +486,7 @@The value of "this" within the han the element. It is the same as the value of the
currentTarget
property of the event argument that is passed to the handler. -my_element.addEventListener('click', function (e) { +my_element.addEventListener('click', function (e) { console.log(this.className) // logs the className of my_element console.log(e.currentTarget === this) // logs `true` }) @@ -496,7 +496,7 @@The value of "this" within the han href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#no_separate_this">arrow functions do not have their own
this
context. -my_element.addEventListener('click', (e) => { +my_element.addEventListener('click', (e) => { console.log(this.className) // WARNING: `this` is not `my_element` console.log(e.currentTarget === this) // logs `false` })@@ -508,7 +508,7 @@The value of "this" within the han occurrence of
this
within the code represents a reference to the element. -<table id="my_table" onclick="console.log(this.id);"><!-- `this` refers to the table; logs 'my_table' --> +<table id="my_table" onclick="console.log(this.id);"><!-- `this` refers to the table; logs 'my_table' --> ... </table>@@ -518,7 +518,7 @@The value of "this" within the han href="/en-US/docs/Web/JavaScript/Reference/Operators/this">standard rules. This is shown in the following example: -
<script> +<script> function logID() { console.log(this.id); } </script> <table id="my_table" onclick="logID();"><!-- when called, `this` will refer to the global object --> @@ -540,7 +540,7 @@Specifying "this" using bind()
This is an example with and without
-bind()
:const Something = function(element) { +const Something = function(element) { // |this| is a newly created object this.name = 'Something Good'; this.onclick1 = function(event) { @@ -558,7 +558,7 @@Specifying "this" using bind()
Another solution is using a special function called
-handleEvent()
to catch any events:const Something = function(element) { +const Something = function(element) { // |this| is a newly created object this.name = 'Something Good'; this.handleEvent = function(event) { @@ -588,7 +588,7 @@Specifying "this" using bind()
EventListener
a function that calls the method of the object that contains the fields that need to be accessed: -class SomeClass { +class SomeClass { constructor() { this.name = 'Something Good'; @@ -634,7 +634,7 @@Getting data into an eve
Function.prototype.bind()
to pass a value to an event listener via thethis
reference variable. -const myButton = document.getElementById('my-button-id'); +const myButton = document.getElementById('my-button-id'); const someString = 'Data'; myButton.addEventListener('click', function () { @@ -660,7 +660,7 @@Gett from outside of an event listener is to make it accessible to the scope in which the event listener is declared. -
const myButton = document.getElementById('my-button-id'); +const myButton = document.getElementById('my-button-id'); let someString = 'Data'; myButton.addEventListener('click', function() { @@ -699,7 +699,7 @@Getting da event listener, and any changes to the data back out after an event handler executes. Consider this example. -
-const myButton = document.getElementById('my-button-id'); +const myButton = document.getElementById('my-button-id'); const someObject = {aProperty: 'Data'}; myButton.addEventListener('click', function() { @@ -745,7 +745,7 @@Legacy Internet Explorer and a
attachEvent()
, rather than the standardaddEventListener()
. For IE, we modify the preceding example to: -if (el.addEventListener) { +if (el.addEventListener) { el.addEventListener('click', modifyText, false); } else if (el.attachEvent) { el.attachEvent('onclick', modifyText); @@ -776,7 +776,7 @@Polyfill
polyfill only works in standards mode: a doctype declaration is required. -(function() { +(function() { if (!Event.prototype.preventDefault) { Event.prototype.preventDefault=function() { this.returnValue=false; @@ -855,7 +855,7 @@Older way to register event liste href="https://www.w3.org/TR/DOM-Level-2-Events">Events specification. Before then, event listeners were registered as follows: -
// Passing a function reference — do not add '()' after it, which would call the function! +// Passing a function reference — do not add '()' after it, which would call the function! el.onclick = modifyText; // Using a function expression @@ -877,7 +877,7 @@Older way to register event liste
Memory issues
-const els = document.getElementsByTagName('*'); +const els = document.getElementsByTagName('*'); // Case 1 for(let i=0 ; i < els.length; i++){ @@ -920,7 +920,7 @@Memory issues
with each add, the remove-statement from above can still remove a listener, but now only the last one added. -// For illustration only: Note "MISTAKE" of [j] for [i] thus causing desired events to all attach to SAME element +// For illustration only: Note "MISTAKE" of [j] for [i] thus causing desired events to all attach to SAME element // Case 3 for(let i=0, j=0 ; i<els.length ; i++){ @@ -960,7 +960,7 @@Improving scroll
You can override this behavior by explicitly setting the value of
-passive
tofalse
, as shown here:/* Feature detection */ +/* Feature detection */ let passiveIfSupported = false; try { diff --git a/files/en-us/web/api/eventtarget/dispatchevent/index.html b/files/en-us/web/api/eventtarget/dispatchevent/index.html index e454876d0d670c1..8144e89147fd201 100644 --- a/files/en-us/web/api/eventtarget/dispatchevent/index.html +++ b/files/en-us/web/api/eventtarget/dispatchevent/index.html @@ -18,7 +18,7 @@Syntax
-cancelled = !target.dispatchEvent(event) +cancelled = !target.dispatchEvent(event)Parameter
diff --git a/files/en-us/web/api/eventtarget/eventtarget/index.html b/files/en-us/web/api/eventtarget/eventtarget/index.html index 7c627e8e86cad87..86b8dcd63829379 100644 --- a/files/en-us/web/api/eventtarget/eventtarget/index.html +++ b/files/en-us/web/api/eventtarget/eventtarget/index.html @@ -15,7 +15,7 @@Syntax
-var myEventTarget = new EventTarget();+var myEventTarget = new EventTarget();Parameters
@@ -27,7 +27,7 @@Return value
Examples
-class MyEventTarget extends EventTarget { +class MyEventTarget extends EventTarget { constructor(mySecret) { super(); this._secret = mySecret; diff --git a/files/en-us/web/api/eventtarget/index.html b/files/en-us/web/api/eventtarget/index.html index cac349121feebc0..1d778953cc2e53f 100644 --- a/files/en-us/web/api/eventtarget/index.html +++ b/files/en-us/web/api/eventtarget/index.html @@ -51,7 +51,7 @@Example
Simple implementation of EventTarget
-var EventTarget = function() { +var EventTarget = function() { this.listeners = {}; }; diff --git a/files/en-us/web/api/eventtarget/removeeventlistener/index.html b/files/en-us/web/api/eventtarget/removeeventlistener/index.html index 6f9827b8db13192..044c427af29f8a4 100644 --- a/files/en-us/web/api/eventtarget/removeeventlistener/index.html +++ b/files/en-us/web/api/eventtarget/removeeventlistener/index.html @@ -25,7 +25,7 @@Syntax
target.removeEventListener(type, listener[, options]); + class="brush: js">target.removeEventListener(type, listener[, options]); target.removeEventListener(type, listener[, useCapture]);Parameters
@@ -84,11 +84,11 @@Matching event listeners for remov
For example, consider this call to
addEventListener()
:element.addEventListener("mousedown", handleMouseDown, true);+ class="brush: js">element.addEventListener("mousedown", handleMouseDown, true);Now consider each of these two calls to
-removeEventListener()
:element.removeEventListener("mousedown", handleMouseDown, false); // Fails +element.removeEventListener("mousedown", handleMouseDown, false); // Fails element.removeEventListener("mousedown", handleMouseDown, true); // Succeeds@@ -98,7 +98,7 @@Matching event listeners for remov
Now consider this:
element.addEventListener("mousedown", handleMouseDown, { passive: true });+ class="brush: js">element.addEventListener("mousedown", handleMouseDown, { passive: true });Here, we specify an
options
object in whichpassive
is set totrue
, while the other options are left to @@ -111,7 +111,7 @@Matching event listeners for remov
Only the
-capture
setting matters toremoveEventListener()
.element.removeEventListener("mousedown", handleMouseDown, { passive: true }); // Succeeds +element.removeEventListener("mousedown", handleMouseDown, { passive: true }); // Succeeds element.removeEventListener("mousedown", handleMouseDown, { capture: false }); // Succeeds element.removeEventListener("mousedown", handleMouseDown, { capture: true }); // Fails element.removeEventListener("mousedown", handleMouseDown, { passive: false }); // Succeeds @@ -140,7 +140,7 @@Example
This example shows how to add a
-mouseover
-based event listener that removes aclick
-based event listener.const body = document.querySelector('body') +const body = document.querySelector('body') const clickTarget = document.getElementById('click-target') const mouseOverTarget = document.getElementById('mouse-over-target') @@ -213,7 +213,7 @@Polyfill to support older browsers However, this method will not work on Internet Explorer 7 or earlier, since extending the {{domxref("Element.prototype")}} was not supported until Internet Explorer 8. -
if (!Element.prototype.addEventListener) { +if (!Element.prototype.addEventListener) { var oListeners = {}; function runListeners(oEvent) { if (!oEvent) { oEvent = window.event; } diff --git a/files/en-us/web/api/file/file/index.html b/files/en-us/web/api/file/file/index.html index 38ce38433385810..36fd6425dcb0ab6 100644 --- a/files/en-us/web/api/file/file/index.html +++ b/files/en-us/web/api/file/file/index.html @@ -14,7 +14,7 @@Syntax
-new File(bits, name[, options]);+new File(bits, name[, options]);Parameters
diff --git a/files/en-us/web/api/file/filename/index.html b/files/en-us/web/api/file/filename/index.html index b90b1a535571a64..0299f3f2a825dd0 100644 --- a/files/en-us/web/api/file/filename/index.html +++ b/files/en-us/web/api/file/filename/index.html @@ -25,7 +25,7 @@Syntax
var name = instanceOfFile.fileName;+ class="brush: js">var name = instanceOfFile.fileName;Value
diff --git a/files/en-us/web/api/file/filesize/index.html b/files/en-us/web/api/file/filesize/index.html index b096adbd763365e..25b782cab2a724b 100644 --- a/files/en-us/web/api/file/filesize/index.html +++ b/files/en-us/web/api/file/filesize/index.html @@ -20,7 +20,7 @@Syntax
var size = instanceOfFile.fileSize;+ class="brush: js">var size = instanceOfFile.fileSize;Value
diff --git a/files/en-us/web/api/file/lastmodified/index.html b/files/en-us/web/api/file/lastmodified/index.html index 888878f0a8a6576..8ed8bd9adf528c2 100644 --- a/files/en-us/web/api/file/lastmodified/index.html +++ b/files/en-us/web/api/file/lastmodified/index.html @@ -17,7 +17,7 @@Syntax
-const time = instanceOfFile.lastModified; +const time = instanceOfFile.lastModified;Value
diff --git a/files/en-us/web/api/file/name/index.html b/files/en-us/web/api/file/name/index.html index e9aaba916a36e96..3b94ba9501d420e 100644 --- a/files/en-us/web/api/file/name/index.html +++ b/files/en-us/web/api/file/name/index.html @@ -16,7 +16,7 @@Syntax
var name = file.name;+ class="brush: js">var name = file.name;Value
diff --git a/files/en-us/web/api/file/using_files_from_web_applications/index.html b/files/en-us/web/api/file/using_files_from_web_applications/index.html index 163bfa2faa1bb9b..4946d2f363838f1 100644 --- a/files/en-us/web/api/file/using_files_from_web_applications/index.html +++ b/files/en-us/web/api/file/using_files_from_web_applications/index.html @@ -19,7 +19,7 @@Accessing selected file(s)
Consider this HTML:
-<input type="file" id="input" multiple>+<input type="file" id="input" multiple>The File API makes it possible to access a {{DOMxRef("FileList")}} containing {{DOMxRef("File")}} objects representing the files selected by the user.
@@ -27,13 +27,13 @@Accessing selected file(s)
Accessing the first selected file using a classical DOM selector:
-const selectedFile = document.getElementById('input').files[0];+const selectedFile = document.getElementById('input').files[0];Accessing selected file(s) on a change event
It is also possible (but not mandatory) to access the {{DOMxRef("FileList")}} through the
-change
event. You need to use {{DOMxRef("EventTarget.addEventListener()")}} to add thechange
event listener, like this:const inputElement = document.getElementById("input"); +const inputElement = document.getElementById("input"); inputElement.addEventListener("change", handleFiles, false); function handleFiles() { const fileList = this.files; /* now you can work with the file list */ @@ -43,11 +43,11 @@Getting information about sele
The {{DOMxRef("FileList")}} object provided by the DOM lists all of the files selected by the user, each specified as a {{DOMxRef("File")}} object. You can determine how many files the user selected by checking the value of the file list's
-length
attribute:const numFiles = fileList.length;+const numFiles = fileList.length;Individual {{DOMxRef("File")}} objects can be retrieved by accessing the list as an array:
-for (let i = 0, numFiles = fileList.length; i < numFiles; i++) { +for (let i = 0, numFiles = fileList.length; i < numFiles; i++) { const file = fileList[i]; // ... } @@ -70,7 +70,7 @@Example: Showing file(s) size
The following example shows a possible use of the
-size
property:<!DOCTYPE html> +<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> @@ -118,12 +118,12 @@Using hidden fi
Consider this HTML:
-<input type="file" id="fileElem" multiple accept="image/*" style="display:none"> +<input type="file" id="fileElem" multiple accept="image/*" style="display:none"> <button id="fileSelect">Select some files</button>The code that handles the
-click
event can look like this:const fileSelect = document.getElementById("fileSelect"), +const fileSelect = document.getElementById("fileSelect"), fileElem = document.getElementById("fileElem"); fileSelect.addEventListener("click", function (e) { @@ -141,12 +141,12 @@Using a la
Consider this HTML:
-<input type="file" id="fileElem" multiple accept="image/*" class="visually-hidden"> +<input type="file" id="fileElem" multiple accept="image/*" class="visually-hidden"> <label for="fileElem">Select some files</label>and this CSS:
-.visually-hidden { +.visually-hidden { position: absolute !important; height: 1px; width: 1px; @@ -171,7 +171,7 @@Selecting files using drag and drop
The first step is to establish a drop zone. Exactly what part of your content will accept drops may vary depending on the design of your application, but making an element receive drop events is easy:
-let dropbox; +let dropbox; dropbox = document.getElementById("dropbox"); dropbox.addEventListener("dragenter", dragenter, false); @@ -183,7 +183,7 @@Selecting files using drag and drop
We don't actually need to do anything with the
-dragenter
anddragover
events in our case, so these functions are both simple. They just stop propagation of the event and prevent the default action from occurring:function dragenter(e) { +function dragenter(e) { e.stopPropagation(); e.preventDefault(); } @@ -196,7 +196,7 @@Selecting files using drag and drop
The real magic happens in the
-drop()
function:function drop(e) { +function drop(e) { e.stopPropagation(); e.preventDefault(); @@ -213,7 +213,7 @@Example: Showing thu
Let's say you're developing the next great photo-sharing website and want to use HTML to display thumbnail previews of images before the user actually uploads them. You can establish your input element or drop zone as discussed previously and have them call a function such as the
-handleFiles()
function below.function handleFiles(files) { +function handleFiles(files) { for (let i = 0; i < files.length; i++) { const file = files[i]; @@ -243,11 +243,11 @@Using object URLs
When you have a {{DOMxRef("File")}} object you'd like to reference by URL from HTML, you can create an object URL for it like this:
-const objectURL = window.URL.createObjectURL(fileObj);+const objectURL = window.URL.createObjectURL(fileObj);The object URL is a string identifying the {{DOMxRef("File")}} object. Each time you call {{DOMxRef("URL.createObjectURL()")}}, a unique object URL is created even if you've created an object URL for that file already. Each of these must be released. While they are released automatically when the document is unloaded, if your page uses them dynamically you should release them explicitly by calling {{DOMxRef("URL.revokeObjectURL()")}}:
-URL.revokeObjectURL(objectURL);+URL.revokeObjectURL(objectURL);Example: Using object URLs to display images
@@ -255,7 +255,7 @@Example: Using object URLs
The HTML that presents the interface looks like this:
-<input type="file" id="fileElem" multiple accept="image/*" style="display:none"> +<input type="file" id="fileElem" multiple accept="image/*" style="display:none"> <a href="#" id="fileSelect">Select some files</a> <div id="fileList"> <p>No files selected!</p> @@ -266,7 +266,7 @@Example: Using object URLs
The
-handleFiles()
method follows:const fileSelect = document.getElementById("fileSelect"), +const fileSelect = document.getElementById("fileSelect"), fileElem = document.getElementById("fileElem"), fileList = document.getElementById("fileList"); @@ -336,7 +336,7 @@Creating the upload tasks
Continuing with the code that built the thumbnails in the previous example, recall that every thumbnail image is in the CSS class
-obj
with the corresponding {{DOMxRef("File")}} attached in afile
attribute. This allows us to select all of the images the user has chosen for uploading using {{DOMxRef("Document.querySelectorAll()")}}, like this:function sendFiles() { +function sendFiles() { const imgs = document.querySelectorAll(".obj"); for (let i = 0; i < imgs.length; i++) { @@ -351,7 +351,7 @@Handling the upload process for
The
-FileUpload
function accepts two inputs: an image element and a file from which to read the image data.function FileUpload(img, file) { +function FileUpload(img, file) { const reader = new FileReader(); this.ctrl = createThrobber(img); const xhr = new XMLHttpRequest(); @@ -396,7 +396,7 @@Asynchronously handling
This example, which uses PHP on the server side and JavaScript on the client side, demonstrates asynchronous uploading of a file.
-<?php +<?php if (isset($_FILES['myFile'])) { // Example: move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']); @@ -457,12 +457,12 @@Example: Using object URLs to
In Firefox, to have the PDF appear embedded in the iframe (rather than proposed as a downloaded file), the preference
-pdfjs.disabled
must be set tofalse
{{non-standard_inline()}}.<iframe id="viewer"> +<iframe id="viewer">And here is the change of the
-src
attribute:const obj_url = URL.createObjectURL(blob); +const obj_url = URL.createObjectURL(blob); const iframe = document.getElementById('viewer'); iframe.setAttribute('src', obj_url); URL.revokeObjectURL(obj_url);@@ -471,7 +471,7 @@Example: Using object U
You can manipulate files of other formats the same way. Here is how to preview uploaded video:
-const video = document.getElementById('video'); +const video = document.getElementById('video'); const obj_url = URL.createObjectURL(blob); video.src = obj_url; video.play(); diff --git a/files/en-us/web/api/file/webkitrelativepath/index.html b/files/en-us/web/api/file/webkitrelativepath/index.html index 611d9308aa04ae9..8066faef9839b69 100644 --- a/files/en-us/web/api/file/webkitrelativepath/index.html +++ b/files/en-us/web/api/file/webkitrelativepath/index.html @@ -23,7 +23,7 @@Syntax
+ class="brush: js">relativePath = File
.webkitRelativePathrelativePath = File
.webkitRelativePathValue
diff --git a/files/en-us/web/api/filesystemdirectoryentry/createreader/index.html b/files/en-us/web/api/filesystemdirectoryentry/createreader/index.html index 89d2e53b9cb2e10..72b580fa76006d7 100644 --- a/files/en-us/web/api/filesystemdirectoryentry/createreader/index.html +++ b/files/en-us/web/api/filesystemdirectoryentry/createreader/index.html @@ -22,7 +22,7 @@Syntax
directoryReader = FileSystemDirectoryEntry.createReader();+ class="brush: js">directoryReader = FileSystemDirectoryEntry.createReader();Parameters
diff --git a/files/en-us/web/api/filesystemdirectoryentry/getdirectory/index.html b/files/en-us/web/api/filesystemdirectoryentry/getdirectory/index.html index e3a49b2edbee1b8..7b272caa8c64428 100644 --- a/files/en-us/web/api/filesystemdirectoryentry/getdirectory/index.html +++ b/files/en-us/web/api/filesystemdirectoryentry/getdirectory/index.html @@ -22,7 +22,7 @@Syntax
FileSystemDirectoryEntry.getDirectory([path][, options][, successCallback][, errorCallback]);+ class="brush: js">FileSystemDirectoryEntry.getDirectory([path][, options][, successCallback][, errorCallback]);Parameters
diff --git a/files/en-us/web/api/filesystemdirectoryentry/getfile/index.html b/files/en-us/web/api/filesystemdirectoryentry/getfile/index.html index 2be411dcf2043c6..bdca49019473b73 100644 --- a/files/en-us/web/api/filesystemdirectoryentry/getfile/index.html +++ b/files/en-us/web/api/filesystemdirectoryentry/getfile/index.html @@ -22,7 +22,7 @@Syntax
FileSystemDirectoryEntry.getFile([path][, options][, successCallback][, errorCallback]);+ class="brush: js">FileSystemDirectoryEntry.getFile([path][, options][, successCallback][, errorCallback]);Parameters
@@ -83,7 +83,7 @@Example
data directory a JSON file containing a user dictionary for a specified language, then load that dictionary. -let dictionary = null; +let dictionary = null; function loadDictionaryForLanguage(appDataDirEntry, lang) { dictionary = null; diff --git a/files/en-us/web/api/filesystemdirectoryentry/removerecursively/index.html b/files/en-us/web/api/filesystemdirectoryentry/removerecursively/index.html index fa88fe7496c7523..a6106dc74a7b5a4 100644 --- a/files/en-us/web/api/filesystemdirectoryentry/removerecursively/index.html +++ b/files/en-us/web/api/filesystemdirectoryentry/removerecursively/index.html @@ -26,7 +26,7 @@Syntax
FileSystemDirectoryEntry.removeRecursively(successCallback[, errorCallback]);+ class="brush: js">FileSystemDirectoryEntry.removeRecursively(successCallback[, errorCallback]);Parameters
diff --git a/files/en-us/web/api/filesystemflags/create/index.html b/files/en-us/web/api/filesystemflags/create/index.html index a070e23ba4259e3..e865b8ea9aa3a8b 100644 --- a/files/en-us/web/api/filesystemflags/create/index.html +++ b/files/en-us/web/api/filesystemflags/create/index.html @@ -24,7 +24,7 @@Syntax
-fileSystemFlags.create = booleanValue +fileSystemFlags.create = booleanValueValues
diff --git a/files/en-us/web/api/filesystemflags/exclusive/index.html b/files/en-us/web/api/filesystemflags/exclusive/index.html index 6dc3b9d718f89df..b2f5e5664e9c889 100644 --- a/files/en-us/web/api/filesystemflags/exclusive/index.html +++ b/files/en-us/web/api/filesystemflags/exclusive/index.html @@ -24,7 +24,7 @@Syntax
-fileSystemFlags.exclusive = booleanValue +fileSystemFlags.exclusive = booleanValueValues
diff --git a/files/en-us/web/api/filesystemhandle/index.html b/files/en-us/web/api/filesystemhandle/index.html index 4bd468d887df24c..50585bd5bcd1d28 100644 --- a/files/en-us/web/api/filesystemhandle/index.html +++ b/files/en-us/web/api/filesystemhandle/index.html @@ -51,7 +51,7 @@Checking Type
The below code allows the user to choose a file from the file picker and then tests to see whether the handle returned is a file or directory
-// store a reference to our file handle +// store a reference to our file handle let fileHandle; async function getFile() { @@ -71,7 +71,7 @@Query/Request Permissions
The following asynchronous function returns true if user has granted read or readwrite permissions to the file handle. Permission is requested if not.
-// fileHandle is a FileSystemFileHandle +// fileHandle is a FileSystemFileHandle // withWrite is a boolean set to true if write async function verifyPermission(fileHandle, withWrite) { @@ -99,7 +99,7 @@Comparing Entries
The following function compares a single entry with an array of entries, and returns a new array with any matching entries removed.
-function removeMatches(fileEntry, entriesArr) { +function removeMatches(fileEntry, entriesArr) { let newArr = entriesArr.filter( entry => !fileEntry.isSameEntry(entry) ) diff --git a/files/en-us/web/api/filesystemhandle/issameentry/index.html b/files/en-us/web/api/filesystemhandle/issameentry/index.html index f56e39a45591ab4..1fafc00c61e5f59 100644 --- a/files/en-us/web/api/filesystemhandle/issameentry/index.html +++ b/files/en-us/web/api/filesystemhandle/issameentry/index.html @@ -18,7 +18,7 @@Syntax
var Boolean = FileSystemHandle1.isSameEntry(FileSystemHandle2);+ class="brush: js">var Boolean = FileSystemHandle1.isSameEntry(FileSystemHandle2);Parameters
@@ -41,7 +41,7 @@Examples
The following function compares a single entry with an array of entries, and returns a new array with any matching entries removed.
-function removeMatches(fileEntry, entriesArr) { +function removeMatches(fileEntry, entriesArr) { let newArr = entriesArr.filter( entry => !fileEntry.isSameEntry(entry) ) diff --git a/files/en-us/web/api/filesystemhandle/kind/index.html b/files/en-us/web/api/filesystemhandle/kind/index.html index d26cb37453a7681..da6f07ec40d42e5 100644 --- a/files/en-us/web/api/filesystemhandle/kind/index.html +++ b/files/en-us/web/api/filesystemhandle/kind/index.html @@ -22,7 +22,7 @@Syntax
var FileSystemHandleKind = FileSystemHandle.kind;+ class="brush: js">var FileSystemHandleKind = FileSystemHandle.kind;Value
@@ -42,7 +42,7 @@Examples
The following function allows the user to choose a file from the file picker and then tests to see whether the handle returned is a file or directory
-// store a reference to our file handle +// store a reference to our file handle let fileHandle; async function getFile() { diff --git a/files/en-us/web/api/filesystemhandle/name/index.html b/files/en-us/web/api/filesystemhandle/name/index.html index d4840e30a25a7c3..cbe3370c780c052 100644 --- a/files/en-us/web/api/filesystemhandle/name/index.html +++ b/files/en-us/web/api/filesystemhandle/name/index.html @@ -18,7 +18,7 @@Syntax
-var String = FileSystemHandle.name;+var String = FileSystemHandle.name;Value
@@ -29,7 +29,7 @@Examples
The following function allows the user to choose a file from the file picker and retrieve the
-name
property.// store a reference to our file handle +// store a reference to our file handle let fileHandle; async function getFile() { diff --git a/files/en-us/web/api/filesystemhandle/querypermission/index.html b/files/en-us/web/api/filesystemhandle/querypermission/index.html index 898316d1eaede31..89a1aff61ac6625 100644 --- a/files/en-us/web/api/filesystemhandle/querypermission/index.html +++ b/files/en-us/web/api/filesystemhandle/querypermission/index.html @@ -18,7 +18,7 @@Syntax
var PermissionState = FileSystemHandle.queryPermission(FileSystemHandlePermissionDescriptor);+ class="brush: js">var PermissionState = FileSystemHandle.queryPermission(FileSystemHandlePermissionDescriptor);Parameters
@@ -53,7 +53,7 @@Examples
The following asynchronous function returns true if user has granted read or readwrite permissions to the file handle. Permission is requested if not.
-// fileHandle is a FileSystemFileHandle +// fileHandle is a FileSystemFileHandle // withWrite is a boolean set to true if write async function verifyPermission(fileHandle, withWrite) { diff --git a/files/en-us/web/api/filesystemhandle/requestpermission/index.html b/files/en-us/web/api/filesystemhandle/requestpermission/index.html index 30d16c4493c4542..f3a8252e86d3248 100644 --- a/files/en-us/web/api/filesystemhandle/requestpermission/index.html +++ b/files/en-us/web/api/filesystemhandle/requestpermission/index.html @@ -18,7 +18,7 @@Syntax
var PermissionState = FileSystemHandle.requestPermission(FileSystemHandlePermissionDescriptor);+ class="brush: js">var PermissionState = FileSystemHandle.requestPermission(FileSystemHandlePermissionDescriptor);Parameters
@@ -50,7 +50,7 @@Examples
The following asynchronous function requests permissions if they have not been granted.
-// fileHandle is a FileSystemFileHandle +// fileHandle is a FileSystemFileHandle // withWrite is a boolean set to true if write async function verifyPermission(fileHandle, withWrite) { diff --git a/files/en-us/web/api/focusevent/focusevent/index.html b/files/en-us/web/api/focusevent/focusevent/index.html index cf4cfb2cda02f8e..4e5c0219df0eb78 100644 --- a/files/en-us/web/api/focusevent/focusevent/index.html +++ b/files/en-us/web/api/focusevent/focusevent/index.html @@ -17,7 +17,7 @@Syntax
-var focusEvent = new FocusEvent(typeArg[, focusEventInit]); +var focusEvent = new FocusEvent(typeArg[, focusEventInit]);Properties
diff --git a/files/en-us/web/api/focusevent/relatedtarget/index.html b/files/en-us/web/api/focusevent/relatedtarget/index.html index 934d48ccb3f8837..40c4c8ad99d578b 100644 --- a/files/en-us/web/api/focusevent/relatedtarget/index.html +++ b/files/en-us/web/api/focusevent/relatedtarget/index.html @@ -56,7 +56,7 @@Syntax
secondTarget = focusEvent.relatedTarget+ class="brush: js">secondTarget = focusEvent.relatedTargetSpecifications
diff --git a/files/en-us/web/api/fontfacesetloadevent/fontfaces/index.html b/files/en-us/web/api/fontfacesetloadevent/fontfaces/index.html index abe191db80fccff..a30106dd66feec9 100644 --- a/files/en-us/web/api/fontfacesetloadevent/fontfaces/index.html +++ b/files/en-us/web/api/fontfacesetloadevent/fontfaces/index.html @@ -20,7 +20,7 @@Syntax
-var fontFace[] = FontFaceSetLoadEvent.fontfaces+var fontFace[] = FontFaceSetLoadEvent.fontfacesValue
diff --git a/files/en-us/web/api/fontfacesetloadevent/fontfacesetloadevent/index.html b/files/en-us/web/api/fontfacesetloadevent/fontfacesetloadevent/index.html index 31eddfca761e289..2a93493c1ff2fad 100644 --- a/files/en-us/web/api/fontfacesetloadevent/fontfacesetloadevent/index.html +++ b/files/en-us/web/api/fontfacesetloadevent/fontfacesetloadevent/index.html @@ -20,7 +20,7 @@Syntax
var fontFaceSetLoadEvent = new FontFaceSetLoadEvent(type[, options])+ class="brush: js">var fontFaceSetLoadEvent = new FontFaceSetLoadEvent(type[, options])Parameters
diff --git a/files/en-us/web/api/fullscreenoptions/navigationui/index.html b/files/en-us/web/api/fullscreenoptions/navigationui/index.html index b223ad2adc643fc..07a479964c4468c 100644 --- a/files/en-us/web/api/fullscreenoptions/navigationui/index.html +++ b/files/en-us/web/api/fullscreenoptions/navigationui/index.html @@ -25,7 +25,7 @@Syntax
-let fullscreenOptions = { +let fullscreenOptions = { navigationUI: value };diff --git a/files/en-us/web/api/gamepadbutton/index.html b/files/en-us/web/api/gamepadbutton/index.html index 9112d9e5dea0ae1..54a78305728e5e8 100644 --- a/files/en-us/web/api/gamepadbutton/index.html +++ b/files/en-us/web/api/gamepadbutton/index.html @@ -33,7 +33,7 @@Example
The following code is taken from my Gamepad API button demo (you can view the demo live, and find the source code on Github.) Note the code fork — in Chrome {{domxref("Navigator.getGamepads")}} needs a
-webkit
prefix and the button values are stored as an array of double values, whereas in Firefox {{domxref("Navigator.getGamepads")}} doesn't need a prefix, and the button values are stored as an array of {{domxref("GamepadButton")}} objects; it is the {{domxref("GamepadButton.value")}} or {{domxref("GamepadButton.pressed")}} properties of these we need to access, depending on what type of buttons they are. In this simple example I've just allowed either.function gameLoop() { +function gameLoop() { if(navigator.webkitGetGamepads) { var gp = navigator.webkitGetGamepads()[0]; diff --git a/files/en-us/web/api/gamepadbutton/pressed/index.html b/files/en-us/web/api/gamepadbutton/pressed/index.html index ebaad720baf8379..ada70a90e2b40a7 100644 --- a/files/en-us/web/api/gamepadbutton/pressed/index.html +++ b/files/en-us/web/api/gamepadbutton/pressed/index.html @@ -20,7 +20,7 @@Syntax
-var isPressed = navigator.getGamepads()[0].pressed;+var isPressed = navigator.getGamepads()[0].pressed;Example
diff --git a/files/en-us/web/api/gamepadbutton/value/index.html b/files/en-us/web/api/gamepadbutton/value/index.html index cc0699355dcdfaa..550de47275d4ca1 100644 --- a/files/en-us/web/api/gamepadbutton/value/index.html +++ b/files/en-us/web/api/gamepadbutton/value/index.html @@ -24,7 +24,7 @@Syntax
readonly attribute double value;
+ class="brush: js"> readonly attribute double value;Example
diff --git a/files/en-us/web/api/globaleventhandlers/onabort/index.html b/files/en-us/web/api/globaleventhandlers/onabort/index.html index 90aab83191b89bf..9f5d523e03ac33c 100644 --- a/files/en-us/web/api/globaleventhandlers/onabort/index.html +++ b/files/en-us/web/api/globaleventhandlers/onabort/index.html @@ -33,7 +33,7 @@Syntax
-window.onabort = functionRef; +window.onabort = functionRef;Value
diff --git a/files/en-us/web/api/globaleventhandlers/onanimationcancel/index.html b/files/en-us/web/api/globaleventhandlers/onanimationcancel/index.html index 63114f912e00542..defe2d3b4b56e91 100644 --- a/files/en-us/web/api/globaleventhandlers/onanimationcancel/index.html +++ b/files/en-us/web/api/globaleventhandlers/onanimationcancel/index.html @@ -31,7 +31,7 @@Syntax
-var animCancelHandler = target.onanimationcancel; +var animCancelHandler = target.onanimationcancel; target.onanimationcancel = {{jsxref("Function")}}diff --git a/files/en-us/web/api/globaleventhandlers/onanimationend/index.html b/files/en-us/web/api/globaleventhandlers/onanimationend/index.html index 17b01f35bce31a8..8dd703ec134ac06 100644 --- a/files/en-us/web/api/globaleventhandlers/onanimationend/index.html +++ b/files/en-us/web/api/globaleventhandlers/onanimationend/index.html @@ -32,7 +32,7 @@Syntax
-var animEndHandler = target.onanimationend; +var animEndHandler = target.onanimationend; target.onanimationend = {{jsxref("Function")}}diff --git a/files/en-us/web/api/globaleventhandlers/onanimationiteration/index.html b/files/en-us/web/api/globaleventhandlers/onanimationiteration/index.html index 273b4b3a1a99049..2a08533b882a627 100644 --- a/files/en-us/web/api/globaleventhandlers/onanimationiteration/index.html +++ b/files/en-us/web/api/globaleventhandlers/onanimationiteration/index.html @@ -31,7 +31,7 @@Syntax
-var animIterationHandler = target.onanimationiteration; +var animIterationHandler = target.onanimationiteration; target.onanimationiteration = {{jsxref("Function")}}diff --git a/files/en-us/web/api/globaleventhandlers/onanimationstart/index.html b/files/en-us/web/api/globaleventhandlers/onanimationstart/index.html index 5986a05ee5598cd..6b9cc74187ffbeb 100644 --- a/files/en-us/web/api/globaleventhandlers/onanimationstart/index.html +++ b/files/en-us/web/api/globaleventhandlers/onanimationstart/index.html @@ -22,7 +22,7 @@Syntax
-var animStartHandler = target.onanimationstart; +var animStartHandler = target.onanimationstart; target.onanimationstart = {{jsxref("Function")}}diff --git a/files/en-us/web/api/globaleventhandlers/onauxclick/index.html b/files/en-us/web/api/globaleventhandlers/onauxclick/index.html index 9306782f05396e7..6f5ec0d469d9747 100644 --- a/files/en-us/web/api/globaleventhandlers/onauxclick/index.html +++ b/files/en-us/web/api/globaleventhandlers/onauxclick/index.html @@ -32,7 +32,7 @@Syntax
-target.onauxclick = functionRef; +target.onauxclick = functionRef;Value
diff --git a/files/en-us/web/api/globaleventhandlers/onblur/index.html b/files/en-us/web/api/globaleventhandlers/onblur/index.html index 8805a320237f958..d2877b9f0b65dd9 100644 --- a/files/en-us/web/api/globaleventhandlers/onblur/index.html +++ b/files/en-us/web/api/globaleventhandlers/onblur/index.html @@ -25,7 +25,7 @@Syntax
-target.onblur = functionRef; +target.onblur = functionRef;Value
diff --git a/files/en-us/web/api/globaleventhandlers/oncancel/index.html b/files/en-us/web/api/globaleventhandlers/oncancel/index.html index d61d8ee50eabbbb..abd21c40d9b436f 100644 --- a/files/en-us/web/api/globaleventhandlers/oncancel/index.html +++ b/files/en-us/web/api/globaleventhandlers/oncancel/index.html @@ -23,7 +23,7 @@Syntax
-target.oncancel = functionRef; +target.oncancel = functionRef;Value
diff --git a/files/en-us/web/api/globaleventhandlers/oncanplay/index.html b/files/en-us/web/api/globaleventhandlers/oncanplay/index.html index 8daade939b03661..c75c0514f7ba724 100644 --- a/files/en-us/web/api/globaleventhandlers/oncanplay/index.html +++ b/files/en-us/web/api/globaleventhandlers/oncanplay/index.html @@ -20,7 +20,7 @@Syntax
-element.oncanplay = handlerFunction; +element.oncanplay = handlerFunction; var handlerFunction = element.oncanplay;diff --git a/files/en-us/web/api/globaleventhandlers/oncanplaythrough/index.html b/files/en-us/web/api/globaleventhandlers/oncanplaythrough/index.html index 38fb6e93af4741d..03433c7d2c60c69 100644 --- a/files/en-us/web/api/globaleventhandlers/oncanplaythrough/index.html +++ b/files/en-us/web/api/globaleventhandlers/oncanplaythrough/index.html @@ -20,7 +20,7 @@Syntax
-element.oncanplaythrough = handlerFunction; +element.oncanplaythrough = handlerFunction; var handlerFunction = element.oncanplaythrough;diff --git a/files/en-us/web/api/globaleventhandlers/onchange/index.html b/files/en-us/web/api/globaleventhandlers/onchange/index.html index 10ef55542c58ff4..f37cb341d56bcb6 100644 --- a/files/en-us/web/api/globaleventhandlers/onchange/index.html +++ b/files/en-us/web/api/globaleventhandlers/onchange/index.html @@ -27,7 +27,7 @@Syntax
-target.onchange = functionRef; +target.onchange = functionRef;<p>Click anywhere in this example.</p> +<p>Click anywhere in this example.</p> <p id="log"></p>JavaScript
-let log = document.getElementById('log'); +let log = document.getElementById('log'); document.onclick = inputChange; diff --git a/files/en-us/web/api/globaleventhandlers/onclose/index.html b/files/en-us/web/api/globaleventhandlers/onclose/index.html index cbc67db54044fc5..f89f48a7b2bd96a 100644 --- a/files/en-us/web/api/globaleventhandlers/onclose/index.html +++ b/files/en-us/web/api/globaleventhandlers/onclose/index.html @@ -29,7 +29,7 @@Syntax
-target.onclose = functionRef; +target.onclose = functionRef;Value
diff --git a/files/en-us/web/api/globaleventhandlers/oncontextmenu/index.html b/files/en-us/web/api/globaleventhandlers/oncontextmenu/index.html index 0dfb8a67734f696..85b5b575be493c6 100644 --- a/files/en-us/web/api/globaleventhandlers/oncontextmenu/index.html +++ b/files/en-us/web/api/globaleventhandlers/oncontextmenu/index.html @@ -21,7 +21,7 @@Syntax
-target.oncontextmenu = functionRef; +target.oncontextmenu = functionRef;Value
diff --git a/files/en-us/web/api/globaleventhandlers/oncuechange/index.html b/files/en-us/web/api/globaleventhandlers/oncuechange/index.html index 90e0694b982bd8f..b07022087a0cc3e 100644 --- a/files/en-us/web/api/globaleventhandlers/oncuechange/index.html +++ b/files/en-us/web/api/globaleventhandlers/oncuechange/index.html @@ -26,7 +26,7 @@Syntax
-element.oncuechange = handlerFunction; +element.oncuechange = handlerFunction; var handlerFunction = element.oncuechange;diff --git a/files/en-us/web/api/globaleventhandlers/ondblclick/index.html b/files/en-us/web/api/globaleventhandlers/ondblclick/index.html index ce05d7a3b822ed7..6c4590e17e46d0f 100644 --- a/files/en-us/web/api/globaleventhandlers/ondblclick/index.html +++ b/files/en-us/web/api/globaleventhandlers/ondblclick/index.html @@ -20,7 +20,7 @@Syntax
-target.ondblclick = functionRef; +target.ondblclick = functionRef;Value
diff --git a/files/en-us/web/api/globaleventhandlers/ondrag/index.html b/files/en-us/web/api/globaleventhandlers/ondrag/index.html index 88d91036c1f6d25..3c818aeeab2d382 100644 --- a/files/en-us/web/api/globaleventhandlers/ondrag/index.html +++ b/files/en-us/web/api/globaleventhandlers/ondrag/index.html @@ -14,7 +14,7 @@Syntax
-var dragHandler = targetElement.ondrag; +var dragHandler = targetElement.ondrag;Return value
diff --git a/files/en-us/web/api/globaleventhandlers/ondragend/index.html b/files/en-us/web/api/globaleventhandlers/ondragend/index.html index 87e44327f623601..84294b7b81f68a3 100644 --- a/files/en-us/web/api/globaleventhandlers/ondragend/index.html +++ b/files/en-us/web/api/globaleventhandlers/ondragend/index.html @@ -14,7 +14,7 @@Syntax
-var dragendHandler = targetElement.ondragend; +var dragendHandler = targetElement.ondragend;Return value
diff --git a/files/en-us/web/api/globaleventhandlers/ondragenter/index.html b/files/en-us/web/api/globaleventhandlers/ondragenter/index.html index 75db4d1289b92df..17c6fcdfadc4fca 100644 --- a/files/en-us/web/api/globaleventhandlers/ondragenter/index.html +++ b/files/en-us/web/api/globaleventhandlers/ondragenter/index.html @@ -14,7 +14,7 @@Syntax
-var dragenterHandler = targetElement.ondragenter; +var dragenterHandler = targetElement.ondragenter;Return value
diff --git a/files/en-us/web/api/globaleventhandlers/ondragleave/index.html b/files/en-us/web/api/globaleventhandlers/ondragleave/index.html index c10e2ad3c86f0de..d649c1ef06ff05f 100644 --- a/files/en-us/web/api/globaleventhandlers/ondragleave/index.html +++ b/files/en-us/web/api/globaleventhandlers/ondragleave/index.html @@ -14,7 +14,7 @@Syntax
-var dragleaveHandler = targetElement.ondragleave; +var dragleaveHandler = targetElement.ondragleave;Return value
diff --git a/files/en-us/web/api/globaleventhandlers/ondragover/index.html b/files/en-us/web/api/globaleventhandlers/ondragover/index.html index eef50ddccab3b8e..0b32dfc3ccb6591 100644 --- a/files/en-us/web/api/globaleventhandlers/ondragover/index.html +++ b/files/en-us/web/api/globaleventhandlers/ondragover/index.html @@ -14,7 +14,7 @@Syntax
-var dragoverHandler = targetElement.ondragover; +var dragoverHandler = targetElement.ondragover;Return value
diff --git a/files/en-us/web/api/globaleventhandlers/ondragstart/index.html b/files/en-us/web/api/globaleventhandlers/ondragstart/index.html index 163361385a87607..a3d7ffd65944acf 100644 --- a/files/en-us/web/api/globaleventhandlers/ondragstart/index.html +++ b/files/en-us/web/api/globaleventhandlers/ondragstart/index.html @@ -14,7 +14,7 @@Syntax
-var dragstartHandler = targetElement.ondragstart; +var dragstartHandler = targetElement.ondragstart;Return value
diff --git a/files/en-us/web/api/globaleventhandlers/ondrop/index.html b/files/en-us/web/api/globaleventhandlers/ondrop/index.html index e00d6d4a0b72de4..c5a018298acfa08 100644 --- a/files/en-us/web/api/globaleventhandlers/ondrop/index.html +++ b/files/en-us/web/api/globaleventhandlers/ondrop/index.html @@ -14,7 +14,7 @@Syntax
-var dropHandler = targetElement.ondrop; +var dropHandler = targetElement.ondrop;Return value
diff --git a/files/en-us/web/api/globaleventhandlers/ondurationchange/index.html b/files/en-us/web/api/globaleventhandlers/ondurationchange/index.html index 7acf85b434e78f3..94174271e31b573 100644 --- a/files/en-us/web/api/globaleventhandlers/ondurationchange/index.html +++ b/files/en-us/web/api/globaleventhandlers/ondurationchange/index.html @@ -19,7 +19,7 @@Syntax
-element.ondurationchange = handlerFunction; +element.ondurationchange = handlerFunction; var handlerFunction = element.ondurationchange;diff --git a/files/en-us/web/api/globaleventhandlers/onemptied/index.html b/files/en-us/web/api/globaleventhandlers/onemptied/index.html index 4da02dfcae49eaa..704e213f2dfbf1f 100644 --- a/files/en-us/web/api/globaleventhandlers/onemptied/index.html +++ b/files/en-us/web/api/globaleventhandlers/onemptied/index.html @@ -12,7 +12,7 @@Syntax
-element.onemptied = handlerFunction; +element.onemptied = handlerFunction; var handlerFunction = element.onemptied;diff --git a/files/en-us/web/api/globaleventhandlers/onended/index.html b/files/en-us/web/api/globaleventhandlers/onended/index.html index 7c4e771dcb6db0e..376296c2775bd39 100644 --- a/files/en-us/web/api/globaleventhandlers/onended/index.html +++ b/files/en-us/web/api/globaleventhandlers/onended/index.html @@ -19,7 +19,7 @@Syntax
-element.onended = handlerFunction; +element.onended = handlerFunction; var handlerFunction = element.onended;diff --git a/files/en-us/web/api/globaleventhandlers/onerror/index.html b/files/en-us/web/api/globaleventhandlers/onerror/index.html index c3fc16c5ec0727f..db0492c2c7f44e6 100644 --- a/files/en-us/web/api/globaleventhandlers/onerror/index.html +++ b/files/en-us/web/api/globaleventhandlers/onerror/index.html @@ -28,7 +28,7 @@Syntax
window.onerror
-window.onerror = function(message, source, lineno, colno, error) { ... }; +window.onerror = function(message, source, lineno, colno, error) { ... };Function parameters:
@@ -45,21 +45,21 @@window.onerror
window.addEventListener('error')
-window.addEventListener('error', function(event) { ... }) +window.addEventListener('error', function(event) { ... })
event
of type {{domxref("ErrorEvent")}} contains all the information about the event and the error.element.onerror
-element.onerror = function(event) { ... } +element.onerror = function(event) { ... }
element.onerror
accepts a function with a single argument of type {{domxref("Event")}}.A good example for this is when you are using an image tag, and need to specify a backup image in case the one you need is not available on the server for any reason.
-<img src="imagenotfound.gif" onerror="this.onerror=null;this.src='imagefound.gif';" />
+<img src="imagenotfound.gif" onerror="this.onerror=null;this.src='imagefound.gif';" />
The reason we have the
@@ -68,7 +68,7 @@this.onerror=null
in the function is that the browser will be stuck in an endless loop if the onerror image itself generates an error.Notes
When an error occurs in a script, loaded from a different origin, the details of the error are not reported to prevent leaking information (see {{bug("363897")}}). Instead the error reported is
-"Script error."
This behavior can be overridden in some browsers using the{{htmlattrxref("crossorigin","script")}}
attribute on {{HTMLElement("script")}} and having the server send the appropriate CORS HTTP response headers. A workaround is to isolate "Script error." and handle it knowing that the error detail is only viewable in the browser console and not accessible via JavaScript.window.onerror = function (msg, url, lineNo, columnNo, error) { +window.onerror = function (msg, url, lineNo, columnNo, error) { var string = msg.toLowerCase(); var substring = "script error"; if (string.indexOf(substring) > -1){ diff --git a/files/en-us/web/api/globaleventhandlers/onfocus/index.html b/files/en-us/web/api/globaleventhandlers/onfocus/index.html index 8260772d971f0ea..aeb6c14e65f9ca9 100644 --- a/files/en-us/web/api/globaleventhandlers/onfocus/index.html +++ b/files/en-us/web/api/globaleventhandlers/onfocus/index.html @@ -29,7 +29,7 @@Syntax
-target.onfocus = functionRef; +target.onfocus = functionRef;Value
diff --git a/files/en-us/web/api/globaleventhandlers/onformdata/index.html b/files/en-us/web/api/globaleventhandlers/onformdata/index.html index f9cdac6ee603839..796d10a49a1ac7f 100644 --- a/files/en-us/web/api/globaleventhandlers/onformdata/index.html +++ b/files/en-us/web/api/globaleventhandlers/onformdata/index.html @@ -21,7 +21,7 @@Syntax
-target.onformdata = functionRef; +target.onformdata = functionRef;Value
diff --git a/files/en-us/web/api/globaleventhandlers/ongotpointercapture/index.html b/files/en-us/web/api/globaleventhandlers/ongotpointercapture/index.html index 35e263262e4174d..d3b5f34e3f7feef 100644 --- a/files/en-us/web/api/globaleventhandlers/ongotpointercapture/index.html +++ b/files/en-us/web/api/globaleventhandlers/ongotpointercapture/index.html @@ -20,7 +20,7 @@Syntax
target.ongotpointercapture = functionRef;+ class="brush: js">target.ongotpointercapture = functionRef;Value
@@ -31,7 +31,7 @@Value
Example
-function overHandler(event) { +function overHandler(event) { // Determine the target event's gotpointercapture handler let gotCaptureHandler = event.target.ongotpointercapture; } diff --git a/files/en-us/web/api/globaleventhandlers/oninput/index.html b/files/en-us/web/api/globaleventhandlers/oninput/index.html index 8540974b472775b..5f5101a71f0b682 100644 --- a/files/en-us/web/api/globaleventhandlers/oninput/index.html +++ b/files/en-us/web/api/globaleventhandlers/oninput/index.html @@ -28,7 +28,7 @@Syntax
target.oninput = functionRef;+ class="brush: js">target.oninput = functionRef;Value
diff --git a/files/en-us/web/api/globaleventhandlers/oninvalid/index.html b/files/en-us/web/api/globaleventhandlers/oninvalid/index.html index 0a321da022e0f06..28f3392ab97afb2 100644 --- a/files/en-us/web/api/globaleventhandlers/oninvalid/index.html +++ b/files/en-us/web/api/globaleventhandlers/oninvalid/index.html @@ -22,7 +22,7 @@Syntax
-target.oninvalid = functionRef; +target.oninvalid = functionRef; var functionRef = target.oninvalid;diff --git a/files/en-us/web/api/globaleventhandlers/onkeydown/index.html b/files/en-us/web/api/globaleventhandlers/onkeydown/index.html index 5209c208abf5437..4b5a1e1d69037ab 100644 --- a/files/en-us/web/api/globaleventhandlers/onkeydown/index.html +++ b/files/en-us/web/api/globaleventhandlers/onkeydown/index.html @@ -21,7 +21,7 @@Syntax
target.onkeydown = functionRef;+ class="brush: js">target.onkeydown = functionRef;Value
@@ -37,12 +37,12 @@Example
HTML
-<input> +<input> <p id="log"></p>JavaScript
-const input = document.querySelector('input'); +const input = document.querySelector('input'); const log = document.getElementById('log'); input.onkeydown = logKey; @@ -90,7 +90,7 @@Compatibility notes
this (229 is a special value set for akeyCode
relating to an event that has been processed by an IME): -eventTarget.addEventListener("keydown", event => { +eventTarget.addEventListener("keydown", event => { if (event.isComposing || event.keyCode === 229) { return; } diff --git a/files/en-us/web/api/globaleventhandlers/onkeypress/index.html b/files/en-us/web/api/globaleventhandlers/onkeypress/index.html index 5b54cd4197ec28c..faf9f0ac97c4f0e 100644 --- a/files/en-us/web/api/globaleventhandlers/onkeypress/index.html +++ b/files/en-us/web/api/globaleventhandlers/onkeypress/index.html @@ -26,7 +26,7 @@Syntax
-target.onkeypress = functionRef; +target.onkeypress = functionRef;Value
diff --git a/files/en-us/web/api/globaleventhandlers/onkeyup/index.html b/files/en-us/web/api/globaleventhandlers/onkeyup/index.html index b73c5670bc75a43..cdf0c3616f0ee9f 100644 --- a/files/en-us/web/api/globaleventhandlers/onkeyup/index.html +++ b/files/en-us/web/api/globaleventhandlers/onkeyup/index.html @@ -21,7 +21,7 @@Syntax
target.onkeyup = functionRef;+ class="brush: js">target.onkeyup = functionRef;Value
diff --git a/files/en-us/web/api/globaleventhandlers/onload/index.html b/files/en-us/web/api/globaleventhandlers/onload/index.html index 5461460504e6043..3bd1cc2e9376197 100644 --- a/files/en-us/web/api/globaleventhandlers/onload/index.html +++ b/files/en-us/web/api/globaleventhandlers/onload/index.html @@ -21,7 +21,7 @@Syntax
-target.onload = functionRef; +target.onload = functionRef;Value
diff --git a/files/en-us/web/api/globaleventhandlers/onloadeddata/index.html b/files/en-us/web/api/globaleventhandlers/onloadeddata/index.html index d9565c112df615d..8f5abdb198a34f3 100644 --- a/files/en-us/web/api/globaleventhandlers/onloadeddata/index.html +++ b/files/en-us/web/api/globaleventhandlers/onloadeddata/index.html @@ -19,7 +19,7 @@Syntax
-element.onloadeddata = handlerFunction; +element.onloadeddata = handlerFunction; var handlerFunction = element.onloadeddata;diff --git a/files/en-us/web/api/globaleventhandlers/onloadedmetadata/index.html b/files/en-us/web/api/globaleventhandlers/onloadedmetadata/index.html index 7356edd3b490643..88562c095f4167f 100644 --- a/files/en-us/web/api/globaleventhandlers/onloadedmetadata/index.html +++ b/files/en-us/web/api/globaleventhandlers/onloadedmetadata/index.html @@ -18,7 +18,7 @@Syntax
-element.onloadedmetadata = handlerFunction; +element.onloadedmetadata = handlerFunction; var handlerFunction = element.onloadedmetadata;diff --git a/files/en-us/web/api/globaleventhandlers/onloadend/index.html b/files/en-us/web/api/globaleventhandlers/onloadend/index.html index b028ffe48435b54..bea4b618db59060 100644 --- a/files/en-us/web/api/globaleventhandlers/onloadend/index.html +++ b/files/en-us/web/api/globaleventhandlers/onloadend/index.html @@ -21,7 +21,7 @@Syntax
-img.onloadend = funcRef; +img.onloadend = funcRef;Value
diff --git a/files/en-us/web/api/globaleventhandlers/onloadstart/index.html b/files/en-us/web/api/globaleventhandlers/onloadstart/index.html index 1dda9a69ea5a1a7..405f60fb17f9462 100644 --- a/files/en-us/web/api/globaleventhandlers/onloadstart/index.html +++ b/files/en-us/web/api/globaleventhandlers/onloadstart/index.html @@ -21,7 +21,7 @@Syntax
-img.onloadstart = funcRef; +img.onloadstart = funcRef;Value
diff --git a/files/en-us/web/api/globaleventhandlers/onlostpointercapture/index.html b/files/en-us/web/api/globaleventhandlers/onlostpointercapture/index.html index c2072c94c634dd1..2374602a69357c3 100644 --- a/files/en-us/web/api/globaleventhandlers/onlostpointercapture/index.html +++ b/files/en-us/web/api/globaleventhandlers/onlostpointercapture/index.html @@ -20,7 +20,7 @@Syntax
target.onlostpointercapture = functionRef;+ class="brush: js">target.onlostpointercapture = functionRef;Value
diff --git a/files/en-us/web/api/globaleventhandlers/onmousedown/index.html b/files/en-us/web/api/globaleventhandlers/onmousedown/index.html index 3f13a284919842b..b8d3773b424a829 100644 --- a/files/en-us/web/api/globaleventhandlers/onmousedown/index.html +++ b/files/en-us/web/api/globaleventhandlers/onmousedown/index.html @@ -24,7 +24,7 @@Syntax
-target.onmousedown = functionRef; +target.onmousedown = functionRef;Value
diff --git a/files/en-us/web/api/globaleventhandlers/onmouseenter/index.html b/files/en-us/web/api/globaleventhandlers/onmouseenter/index.html index 3e251abf2401d6b..0d953b9b48082f1 100644 --- a/files/en-us/web/api/globaleventhandlers/onmouseenter/index.html +++ b/files/en-us/web/api/globaleventhandlers/onmouseenter/index.html @@ -19,7 +19,7 @@Syntax
-element.onmouseenter = handlerFunction; +element.onmouseenter = handlerFunction; var handlerFunction = element.onmouseenter;diff --git a/files/en-us/web/api/globaleventhandlers/onmouseleave/index.html b/files/en-us/web/api/globaleventhandlers/onmouseleave/index.html index 9c55c883f1a057e..23502e39944affc 100644 --- a/files/en-us/web/api/globaleventhandlers/onmouseleave/index.html +++ b/files/en-us/web/api/globaleventhandlers/onmouseleave/index.html @@ -19,7 +19,7 @@Syntax
-element.onmouseleave = handlerFunction; +element.onmouseleave = handlerFunction; var handlerFunction = element.onmouseleave;diff --git a/files/en-us/web/api/globaleventhandlers/onmousemove/index.html b/files/en-us/web/api/globaleventhandlers/onmousemove/index.html index 4f6bd2881b0eb5d..0a3c03953cac0ef 100644 --- a/files/en-us/web/api/globaleventhandlers/onmousemove/index.html +++ b/files/en-us/web/api/globaleventhandlers/onmousemove/index.html @@ -19,7 +19,7 @@Syntax
-target.onmousemove = functionRef; +target.onmousemove = functionRef;Value
diff --git a/files/en-us/web/api/globaleventhandlers/onmouseout/index.html b/files/en-us/web/api/globaleventhandlers/onmouseout/index.html index 59e1d7f94b285a6..b9ddc969fb0535c 100644 --- a/files/en-us/web/api/globaleventhandlers/onmouseout/index.html +++ b/files/en-us/web/api/globaleventhandlers/onmouseout/index.html @@ -21,7 +21,7 @@Syntax
-element.onmouseout = function; +element.onmouseout = function;Example
@@ -31,11 +31,11 @@Example
HTML
-<p>Test your mouse on me!</p>+<p>Test your mouse on me!</p>JavaScript
-const p = document.querySelector('p'); +const p = document.querySelector('p'); p.onmouseover = logMouseOver; p.onmouseout = logMouseOut; diff --git a/files/en-us/web/api/globaleventhandlers/onmouseover/index.html b/files/en-us/web/api/globaleventhandlers/onmouseover/index.html index 28b05cc1b4cd7f0..257a0e1032a4ef0 100644 --- a/files/en-us/web/api/globaleventhandlers/onmouseover/index.html +++ b/files/en-us/web/api/globaleventhandlers/onmouseover/index.html @@ -20,7 +20,7 @@Syntax
-element.onmouseover = function; +element.onmouseover = function;Example
@@ -30,11 +30,11 @@Example
HTML
-<p>Test your mouse on me!</p>+<p>Test your mouse on me!</p>JavaScript
-const p = document.querySelector('p'); +const p = document.querySelector('p'); p.onmouseover = logMouseOver; p.onmouseout = logMouseOut; diff --git a/files/en-us/web/api/globaleventhandlers/onmouseup/index.html b/files/en-us/web/api/globaleventhandlers/onmouseup/index.html index c9718fd868029de..72b791ace92ba0c 100644 --- a/files/en-us/web/api/globaleventhandlers/onmouseup/index.html +++ b/files/en-us/web/api/globaleventhandlers/onmouseup/index.html @@ -25,7 +25,7 @@Syntax
target.onmouseup = functionRef;+ class="brush: js">target.onmouseup = functionRef;Value
diff --git a/files/en-us/web/api/globaleventhandlers/onmousewheel/index.html b/files/en-us/web/api/globaleventhandlers/onmousewheel/index.html index ffe15c23e4eba79..01a6651491a02f9 100644 --- a/files/en-us/web/api/globaleventhandlers/onmousewheel/index.html +++ b/files/en-us/web/api/globaleventhandlers/onmousewheel/index.html @@ -16,7 +16,7 @@Syntax
-element.onmousewheel = handlerFunction; +element.onmousewheel = handlerFunction; var handlerFunction = element.onmousewheel;diff --git a/files/en-us/web/api/globaleventhandlers/onpause/index.html b/files/en-us/web/api/globaleventhandlers/onpause/index.html index 68b557d91612286..a5f7f431b782e86 100644 --- a/files/en-us/web/api/globaleventhandlers/onpause/index.html +++ b/files/en-us/web/api/globaleventhandlers/onpause/index.html @@ -18,7 +18,7 @@Syntax
-element.onpause = handlerFunction; +element.onpause = handlerFunction; var handlerFunction = element.onpause;diff --git a/files/en-us/web/api/globaleventhandlers/onplay/index.html b/files/en-us/web/api/globaleventhandlers/onplay/index.html index d75a63c3d009006..3d631a7641ffb00 100644 --- a/files/en-us/web/api/globaleventhandlers/onplay/index.html +++ b/files/en-us/web/api/globaleventhandlers/onplay/index.html @@ -16,7 +16,7 @@Syntax
-element.onplay = handlerFunction; +element.onplay = handlerFunction; var handlerFunction = element.onplay;diff --git a/files/en-us/web/api/globaleventhandlers/onplaying/index.html b/files/en-us/web/api/globaleventhandlers/onplaying/index.html index 092887cada90825..45a2f2f18a4ae37 100644 --- a/files/en-us/web/api/globaleventhandlers/onplaying/index.html +++ b/files/en-us/web/api/globaleventhandlers/onplaying/index.html @@ -19,7 +19,7 @@Syntax
-element.onplaying = handlerFunction; +element.onplaying = handlerFunction; var handlerFunction = element.onplaying;diff --git a/files/en-us/web/api/globaleventhandlers/onpointercancel/index.html b/files/en-us/web/api/globaleventhandlers/onpointercancel/index.html index 512bf2d8bdbf7a8..2896f15a9f276a9 100644 --- a/files/en-us/web/api/globaleventhandlers/onpointercancel/index.html +++ b/files/en-us/web/api/globaleventhandlers/onpointercancel/index.html @@ -18,7 +18,7 @@Syntax
-targetElement.onpointercancel = cancelHandler; +targetElement.onpointercancel = cancelHandler; var cancelHandler = targetElement.onpointercancel;@@ -36,7 +36,7 @@Example
This example shows two ways to use
-onpointercancel
to handle an element'spointercancel
events.<html> +<html> <script> function cancelHandler(ev) { // Process the pointercancel event diff --git a/files/en-us/web/api/globaleventhandlers/onpointerdown/index.html b/files/en-us/web/api/globaleventhandlers/onpointerdown/index.html index 0a2b54023acfc93..f45eab3ec9497ca 100644 --- a/files/en-us/web/api/globaleventhandlers/onpointerdown/index.html +++ b/files/en-us/web/api/globaleventhandlers/onpointerdown/index.html @@ -33,7 +33,7 @@Syntax
-target.onpointerdown = downHandler; +target.onpointerdown = downHandler; var downHandler = target.onpointerdown;@@ -56,7 +56,7 @@JavaScript
First, let's look at the JavaScript code that handles the
-pointerdown
event.var targetBox = document.getElementById("target"); +var targetBox = document.getElementById("target"); targetBox.onpointerdown = handleDown; @@ -97,7 +97,7 @@JavaScript
We also have a handler for {{event("pointerup")}} events:
-targetBox.onpointerup = handleUp; +targetBox.onpointerup = handleUp; function handleUp(evt) { targetBox.textContent = "Tap me, click me, or touch me!"; @@ -119,7 +119,7 @@HTML
The HTML is extremely simple:
-<div id="target"> +<div id="target"> Tap me, click me, or touch me! </div>@@ -132,7 +132,7 @@CSS
The CSS sets up the appearance of the target, and doesn't affect its functionality at all.
-#target { +#target { width: 400px; height: 30px; text-align: center; diff --git a/files/en-us/web/api/globaleventhandlers/onpointerenter/index.html b/files/en-us/web/api/globaleventhandlers/onpointerenter/index.html index 275611d6aa0ebf1..d67ba2b98030866 100644 --- a/files/en-us/web/api/globaleventhandlers/onpointerenter/index.html +++ b/files/en-us/web/api/globaleventhandlers/onpointerenter/index.html @@ -18,7 +18,7 @@Syntax
-targetElement.onpointerenter = enterHandler; +targetElement.onpointerenter = enterHandler; var enterHandler = targetElement.onpointerenter;@@ -36,7 +36,7 @@Example
This example shows two ways to use
-onpointerenter
to set an element'spointerenter
event handler.<html> +<html> <script> function enterHandler(ev) { // Process the pointerenter event diff --git a/files/en-us/web/api/globaleventhandlers/onpointerleave/index.html b/files/en-us/web/api/globaleventhandlers/onpointerleave/index.html index 44182bb9493937f..2601beb2006cd5f 100644 --- a/files/en-us/web/api/globaleventhandlers/onpointerleave/index.html +++ b/files/en-us/web/api/globaleventhandlers/onpointerleave/index.html @@ -23,7 +23,7 @@Syntax
-EventTarget.onpointerleave = leaveHandler; +EventTarget.onpointerleave = leaveHandler; var leaveHandler = EventTarget.onpointerleave;@@ -41,7 +41,7 @@Example
This example shows two ways to use
-onpointerleave
to set an element'spointerleave
event handler.<html> +<html> <script> function leaveHandler(ev) { // Process the pointerleave event diff --git a/files/en-us/web/api/globaleventhandlers/onpointermove/index.html b/files/en-us/web/api/globaleventhandlers/onpointermove/index.html index f47cb89549f73f4..2803d3f9cf1e2fc 100644 --- a/files/en-us/web/api/globaleventhandlers/onpointermove/index.html +++ b/files/en-us/web/api/globaleventhandlers/onpointermove/index.html @@ -18,7 +18,7 @@Syntax
-targetElement.onpointermove = moveHandler; +targetElement.onpointermove = moveHandler; var moveHandler = targetElement.onpointermove;@@ -36,7 +36,7 @@Example
This example shows two ways to use
-onpointermove
to set an element'spointermove
event handler.<html> +<html> <script> function moveHandler(ev) { // Process the pointermove event diff --git a/files/en-us/web/api/globaleventhandlers/onpointerout/index.html b/files/en-us/web/api/globaleventhandlers/onpointerout/index.html index 90aa1e33b6f6c5c..16bc60326c0404d 100644 --- a/files/en-us/web/api/globaleventhandlers/onpointerout/index.html +++ b/files/en-us/web/api/globaleventhandlers/onpointerout/index.html @@ -18,7 +18,7 @@Syntax
-targetElement.onpointerout = outHandler; +targetElement.onpointerout = outHandler; var outHandler = targetElement.onpointerout;@@ -36,7 +36,7 @@Example
This example shows two ways to use
-onpointerout
to set an element'spointerout
event handler.<html> +<html> <script> function outHandler(ev) { // Process the pointerout event diff --git a/files/en-us/web/api/globaleventhandlers/onpointerover/index.html b/files/en-us/web/api/globaleventhandlers/onpointerover/index.html index 3a3583a851832f4..c22cac6c17fed0d 100644 --- a/files/en-us/web/api/globaleventhandlers/onpointerover/index.html +++ b/files/en-us/web/api/globaleventhandlers/onpointerover/index.html @@ -18,7 +18,7 @@Syntax
-targetElement.onpointerover = overHandler; +targetElement.onpointerover = overHandler; var overHandler = targetElement.onpointerover;@@ -36,7 +36,7 @@Example
This example shows two ways to use
-onpointerover
to set an element'spointerover
event handler.<html> +<html> <script> function overHandler(ev) { // Process the pointerover event diff --git a/files/en-us/web/api/globaleventhandlers/onpointerup/index.html b/files/en-us/web/api/globaleventhandlers/onpointerup/index.html index d431d08b4e8bc8b..e67494ae781f68c 100644 --- a/files/en-us/web/api/globaleventhandlers/onpointerup/index.html +++ b/files/en-us/web/api/globaleventhandlers/onpointerup/index.html @@ -18,7 +18,7 @@Syntax
-targetElement.onpointerup = upHandler; +targetElement.onpointerup = upHandler; var upHandler = targetElement.onpointerup;@@ -36,7 +36,7 @@Example
This example shows two ways to use
-onpointerup
to set an element'spointerup
event handler.<html> +<html> <script> function upHandler(ev) { // Process the pointerup event diff --git a/files/en-us/web/api/globaleventhandlers/onreset/index.html b/files/en-us/web/api/globaleventhandlers/onreset/index.html index bca919adc7b28af..e00660caabe6e6b 100644 --- a/files/en-us/web/api/globaleventhandlers/onreset/index.html +++ b/files/en-us/web/api/globaleventhandlers/onreset/index.html @@ -20,7 +20,7 @@Syntax
-target.onreset = functionRef; +target.onreset = functionRef;Value
diff --git a/files/en-us/web/api/globaleventhandlers/onresize/index.html b/files/en-us/web/api/globaleventhandlers/onresize/index.html index 458530f845def09..9aebc4b91fa618b 100644 --- a/files/en-us/web/api/globaleventhandlers/onresize/index.html +++ b/files/en-us/web/api/globaleventhandlers/onresize/index.html @@ -21,7 +21,7 @@Syntax
-window.onresize = functionRef; +window.onresize = functionRef;Value
diff --git a/files/en-us/web/api/globaleventhandlers/onscroll/index.html b/files/en-us/web/api/globaleventhandlers/onscroll/index.html index 9cf7af738022fe7..c92dbdd2b688d8a 100644 --- a/files/en-us/web/api/globaleventhandlers/onscroll/index.html +++ b/files/en-us/web/api/globaleventhandlers/onscroll/index.html @@ -29,7 +29,7 @@Syntax
-target.onscroll = functionRef +target.onscroll = functionRefValue
diff --git a/files/en-us/web/api/globaleventhandlers/onselect/index.html b/files/en-us/web/api/globaleventhandlers/onselect/index.html index 4e9f17fbf35c504..3509b220ca3e7d2 100644 --- a/files/en-us/web/api/globaleventhandlers/onselect/index.html +++ b/files/en-us/web/api/globaleventhandlers/onselect/index.html @@ -22,7 +22,7 @@Syntax
-target.onselect = functionRef; +target.onselect = functionRef;Value
diff --git a/files/en-us/web/api/globaleventhandlers/onselectstart/index.html b/files/en-us/web/api/globaleventhandlers/onselectstart/index.html index f46319f88f8a75b..fd09ad2693d479c 100644 --- a/files/en-us/web/api/globaleventhandlers/onselectstart/index.html +++ b/files/en-us/web/api/globaleventhandlers/onselectstart/index.html @@ -23,7 +23,7 @@Syntax
-object.onselectstart = functionRef; +object.onselectstart = functionRef;Value
@@ -35,7 +35,7 @@Value
Examples
-document.onselectstart = function() { +document.onselectstart = function() { console.log('Selection started!'); };@@ -44,7 +44,7 @@Examples
href="https://github.com/chrisdavidmills/selection-api-examples/#key-quote-generator-see-it-running-live">Key quote generator demo. -document.onselectstart = () => { +document.onselectstart = () => { return false; // cancel selection };diff --git a/files/en-us/web/api/globaleventhandlers/onsubmit/index.html b/files/en-us/web/api/globaleventhandlers/onsubmit/index.html index 824b5a80f05528d..61854df0edd0fa5 100644 --- a/files/en-us/web/api/globaleventhandlers/onsubmit/index.html +++ b/files/en-us/web/api/globaleventhandlers/onsubmit/index.html @@ -19,7 +19,7 @@Syntax
-target.onsubmit = functionRef; +target.onsubmit = functionRef;Value
diff --git a/files/en-us/web/api/globaleventhandlers/ontouchcancel/index.html b/files/en-us/web/api/globaleventhandlers/ontouchcancel/index.html index 8b6659ff84c5056..7a31bb31fe7344c 100644 --- a/files/en-us/web/api/globaleventhandlers/ontouchcancel/index.html +++ b/files/en-us/web/api/globaleventhandlers/ontouchcancel/index.html @@ -25,7 +25,7 @@Syntax
-var cancelHandler = someElement.ontouchcancel; +var cancelHandler = someElement.ontouchcancel;Return value
@@ -41,7 +41,7 @@Example
This example shows two ways to use
-ontouchcancel
to set an element'stouchcancel
event handler.<html> +<html> <script> function cancelTouch(ev) { // Process the event diff --git a/files/en-us/web/api/globaleventhandlers/ontouchend/index.html b/files/en-us/web/api/globaleventhandlers/ontouchend/index.html index 283b2f21109b96b..c3b67d85fd98c16 100644 --- a/files/en-us/web/api/globaleventhandlers/ontouchend/index.html +++ b/files/en-us/web/api/globaleventhandlers/ontouchend/index.html @@ -23,7 +23,7 @@Syntax
-var endHandler = targetElement.ontouchend; +var endHandler = targetElement.ontouchend;Return value
@@ -39,7 +39,7 @@Example
This example shows two ways to use
-ontouchend
to set an element'stouchend
event handler.<html> +<html> <script> function endTouch(ev) { // Process the event diff --git a/files/en-us/web/api/globaleventhandlers/ontouchmove/index.html b/files/en-us/web/api/globaleventhandlers/ontouchmove/index.html index 16aedfb216560e2..e1236ab42927adb 100644 --- a/files/en-us/web/api/globaleventhandlers/ontouchmove/index.html +++ b/files/en-us/web/api/globaleventhandlers/ontouchmove/index.html @@ -19,7 +19,7 @@Syntax
-var moveHandler = someElement.ontouchmove; +var moveHandler = someElement.ontouchmove;Return value
@@ -33,7 +33,7 @@Example
This example shows two ways to use ontouchmove to set an element's touchmove event handler.
-<html> +<html> <head> <script> diff --git a/files/en-us/web/api/globaleventhandlers/ontouchstart/index.html b/files/en-us/web/api/globaleventhandlers/ontouchstart/index.html index c3c502650d32c3e..2042b80e31ba976 100644 --- a/files/en-us/web/api/globaleventhandlers/ontouchstart/index.html +++ b/files/en-us/web/api/globaleventhandlers/ontouchstart/index.html @@ -25,7 +25,7 @@Syntax
-var startHandler = someElement.ontouchstart; +var startHandler = someElement.ontouchstart;Return value
diff --git a/files/en-us/web/api/globaleventhandlers/ontransitioncancel/index.html b/files/en-us/web/api/globaleventhandlers/ontransitioncancel/index.html index 8d2aec530768344..a80b9c77cee7f39 100644 --- a/files/en-us/web/api/globaleventhandlers/ontransitioncancel/index.html +++ b/files/en-us/web/api/globaleventhandlers/ontransitioncancel/index.html @@ -31,7 +31,7 @@Syntax
-var transitionCancelHandler = target.ontransitioncancel; +var transitionCancelHandler = target.ontransitioncancel; target.ontransitioncancel = {{jsxref("Function")}}@@ -70,7 +70,7 @@HTML
This creates a {{HTMLElement("div")}} which we'll style with CSS below to make into a box that resizes and changes color and such.
-<div class="box"></div> +<div class="box"></div>CSS
@@ -79,7 +79,7 @@CSS
color and size change, and causes the box to rotate, while the mouse cursor hovers over it. -.box { +.box { margin-left: 70px; margin-top: 30px; border-style: solid; @@ -110,7 +110,7 @@JavaScript
Next, we need to establish our event handlers to change the text content of the box when the transition begins and ends.
-let box = document.querySelector(".box"); +let box = document.querySelector(".box"); box.ontransitionrun = function(event) { box.textContent = "Zooming..."; } diff --git a/files/en-us/web/api/globaleventhandlers/ontransitionend/index.html b/files/en-us/web/api/globaleventhandlers/ontransitionend/index.html index d07548d8cbf9693..35c02d8f56e4483 100644 --- a/files/en-us/web/api/globaleventhandlers/ontransitionend/index.html +++ b/files/en-us/web/api/globaleventhandlers/ontransitionend/index.html @@ -33,7 +33,7 @@Syntax
-var transitionEndHandler = target.ontransitionend; +var transitionEndHandler = target.ontransitionend; target.ontransitionend = {{jsxref("Function")}}@@ -67,7 +67,7 @@HTML
This creates a {{HTMLElement("div")}} which we'll style with CSS below to make into a box that resizes and changes color and such.
-<div class="box"></div> +<div class="box"></div>CSS
@@ -76,7 +76,7 @@CSS
color and size change, and causes the box to rotate, while the mouse cursor hovers over it. -.box { +.box { margin-left: 70px; margin-top: 30px; border-style: solid; @@ -105,7 +105,7 @@JavaScript
Next, we need to establish our event handlers to change the text content of the box when the transition begins and ends.
-let box = document.querySelector(".box"); +let box = document.querySelector(".box"); box.ontransitionrun = function(event) { box.textContent = "Zooming..."; } diff --git a/files/en-us/web/api/globaleventhandlers/onwheel/index.html b/files/en-us/web/api/globaleventhandlers/onwheel/index.html index 5c113d359ab480c..1a41167ce4cef8e 100644 --- a/files/en-us/web/api/globaleventhandlers/onwheel/index.html +++ b/files/en-us/web/api/globaleventhandlers/onwheel/index.html @@ -28,7 +28,7 @@Syntax
-target.onwheel = functionRef; +target.onwheel = functionRef;Value
diff --git a/files/en-us/web/api/hashchangeevent/index.html b/files/en-us/web/api/hashchangeevent/index.html index 9e93d68c2cc1f85..1675cd4f0080521 100644 --- a/files/en-us/web/api/hashchangeevent/index.html +++ b/files/en-us/web/api/hashchangeevent/index.html @@ -39,22 +39,22 @@Syntax options for a hash change
You can listen for the {{event("hashchange")}} event using any of the following options:
-window.onhashchange = funcRef; +window.onhashchange = funcRef;or
-<body onhashchange="funcRef();"> +<body onhashchange="funcRef();">or
-window.addEventListener("hashchange", funcRef, false); +window.addEventListener("hashchange", funcRef, false);Basic example
-function locationHashChanged() { +function locationHashChanged() { if (location.hash === '#somecoolfeature') { somecoolfeature(); } @@ -67,7 +67,7 @@Polyfill
There are several fallback scripts listed on the Modernizr GitHub page. Basically, those scripts check the {{domxref("HTMLHyperlinkElementUtils.hash", "location.hash")}} at a regular interval. Here is a version that allows only one handler to be bound to the {{domxref("WindowEventHandlers.onhashchange", "onhashchange")}} property:
-;(function(window) { +;(function(window) { // Exit if the browser implements that event if ( "onhashchange" in window.document.body ) { return; } diff --git a/files/en-us/web/api/hashchangeevent/newurl/index.html b/files/en-us/web/api/hashchangeevent/newurl/index.html index dafd37c25511148..090132f02ee49df 100644 --- a/files/en-us/web/api/hashchangeevent/newurl/index.html +++ b/files/en-us/web/api/hashchangeevent/newurl/index.html @@ -16,7 +16,7 @@Syntax
-let newEventUrl = event.newURL;+let newEventUrl = event.newURL;Value
@@ -24,7 +24,7 @@Value
Example
-window.addEventListener('hashchange', function(event) { +window.addEventListener('hashchange', function(event) { console.log('Hash changed to ' + event.newURL); });diff --git a/files/en-us/web/api/hashchangeevent/oldurl/index.html b/files/en-us/web/api/hashchangeevent/oldurl/index.html index 7c5b863a8e26543..b4264f7543d6080 100644 --- a/files/en-us/web/api/hashchangeevent/oldurl/index.html +++ b/files/en-us/web/api/hashchangeevent/oldurl/index.html @@ -16,7 +16,7 @@Syntax
-let oldEventUrl = event.oldURL;+let oldEventUrl = event.oldURL;Value
@@ -24,7 +24,7 @@Value
Example
-window.addEventListener('hashchange', function(event) { +window.addEventListener('hashchange', function(event) { console.log('Hash changed from ' + event.oldURL); });diff --git a/files/en-us/web/api/htmlareaelement/pathname/index.html b/files/en-us/web/api/htmlareaelement/pathname/index.html index 8cef0eaa4160613..41cde58c2aeca12 100644 --- a/files/en-us/web/api/htmlareaelement/pathname/index.html +++ b/files/en-us/web/api/htmlareaelement/pathname/index.html @@ -25,7 +25,7 @@Syntax
Examples
-// An <area id="myArea" href="/en-US/docs/HTMLAreaElement"> element is in the document +// An <area id="myArea" href="/en-US/docs/HTMLAreaElement"> element is in the document const area = document.getElementById("myArea"); area.pathname; // returns '/en-US/docs/HTMLAreaElement'diff --git a/files/en-us/web/api/htmlareaelement/referrerpolicy/index.html b/files/en-us/web/api/htmlareaelement/referrerpolicy/index.html index 29afa64b416e4c0..93733965dfba4e3 100644 --- a/files/en-us/web/api/htmlareaelement/referrerpolicy/index.html +++ b/files/en-us/web/api/htmlareaelement/referrerpolicy/index.html @@ -19,7 +19,7 @@Syntax
-refStr = areaElt.referrerPolicy; +refStr = areaElt.referrerPolicy; areaElt.referrerPolicy = refStr;Values
diff --git a/files/en-us/web/api/htmlareaelement/rel/index.html b/files/en-us/web/api/htmlareaelement/rel/index.html index 917bd9562776162..8d502d29aeaec78 100644 --- a/files/en-us/web/api/htmlareaelement/rel/index.html +++ b/files/en-us/web/api/htmlareaelement/rel/index.html @@ -18,7 +18,7 @@Syntax
-var relstr = areaElt.rel; +var relstr = areaElt.rel; areaElt.rel = relstr;diff --git a/files/en-us/web/api/htmlareaelement/rellist/index.html b/files/en-us/web/api/htmlareaelement/rellist/index.html index 0ef31ad7d86bf0b..a93bdd7ef5a5866 100644 --- a/files/en-us/web/api/htmlareaelement/rellist/index.html +++ b/files/en-us/web/api/htmlareaelement/rellist/index.html @@ -22,7 +22,7 @@Syntax
-var relstr = areaElt.relList; +var relstr = areaElt.relList;Example
diff --git a/files/en-us/web/api/htmlcanvaselement/capturestream/index.html b/files/en-us/web/api/htmlcanvaselement/capturestream/index.html index 5bb8b2fdcdd5383..6c1c81697fdf092 100644 --- a/files/en-us/web/api/htmlcanvaselement/capturestream/index.html +++ b/files/en-us/web/api/htmlcanvaselement/capturestream/index.html @@ -24,7 +24,7 @@Syntax
-MediaStream = canvas.captureStream(frameRate); +MediaStream = canvas.captureStream(frameRate);Parameters
diff --git a/files/en-us/web/api/htmlcanvaselement/getcontext/index.html b/files/en-us/web/api/htmlcanvaselement/getcontext/index.html index 5cea98de92f4dda..8c179efa9a1fe22 100644 --- a/files/en-us/web/api/htmlcanvaselement/getcontext/index.html +++ b/files/en-us/web/api/htmlcanvaselement/getcontext/index.html @@ -22,7 +22,7 @@Syntax
-var ctx = canvas.getContext(contextType); +var ctx = canvas.getContext(contextType); var ctx = canvas.getContext(contextType, contextAttributes);@@ -64,7 +64,7 @@Parameters
You can use several context attributes when creating your rendering context, for example:
-const gl = canvas.getContext('webgl', { +const gl = canvas.getContext('webgl', { antialias: false, depth: false });@@ -147,12 +147,12 @@Examples
Given this {{HTMLElement("canvas")}} element:
-<canvas id="canvas" width="300" height="300"></canvas> +<canvas id="canvas" width="300" height="300"></canvas>You can get a
-2d
context of the canvas with the following code:var canvas = document.getElementById('canvas'); +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); console.log(ctx); // CanvasRenderingContext2D { ... }diff --git a/files/en-us/web/api/htmlcanvaselement/height/index.html b/files/en-us/web/api/htmlcanvaselement/height/index.html index 006e1cb07a35375..7b23af50ab6b964 100644 --- a/files/en-us/web/api/htmlcanvaselement/height/index.html +++ b/files/en-us/web/api/htmlcanvaselement/height/index.html @@ -24,7 +24,7 @@Syntax
-var pxl = canvas.height; +var pxl = canvas.height; canvas.height = pxl;diff --git a/files/en-us/web/api/htmlcanvaselement/mozfetchasstream/index.html b/files/en-us/web/api/htmlcanvaselement/mozfetchasstream/index.html index 82ae8ac203ff527..8dc43c76de8890a 100644 --- a/files/en-us/web/api/htmlcanvaselement/mozfetchasstream/index.html +++ b/files/en-us/web/api/htmlcanvaselement/mozfetchasstream/index.html @@ -18,7 +18,7 @@Syntax
-void canvas.mozFetchAsStream(callback, type); +void canvas.mozFetchAsStream(callback, type);Parameters
diff --git a/files/en-us/web/api/htmlcanvaselement/mozgetasfile/index.html b/files/en-us/web/api/htmlcanvaselement/mozgetasfile/index.html index dafac58b0ec9f82..31782bee604198c 100644 --- a/files/en-us/web/api/htmlcanvaselement/mozgetasfile/index.html +++ b/files/en-us/web/api/htmlcanvaselement/mozgetasfile/index.html @@ -26,7 +26,7 @@Syntax
-canvas.mozGetAsFile(name, type); +canvas.mozGetAsFile(name, type);Parameters
diff --git a/files/en-us/web/api/htmlcanvaselement/mozopaque/index.html b/files/en-us/web/api/htmlcanvaselement/mozopaque/index.html index 23dde9160bcde19..6a68e146cf00549 100644 --- a/files/en-us/web/api/htmlcanvaselement/mozopaque/index.html +++ b/files/en-us/web/api/htmlcanvaselement/mozopaque/index.html @@ -25,7 +25,7 @@Syntax
-var opaque = canvas.mozOpaque; +var opaque = canvas.mozOpaque; canvas.mozOpaque = true;diff --git a/files/en-us/web/api/htmlcanvaselement/toblob/index.html b/files/en-us/web/api/htmlcanvaselement/toblob/index.html index 89798238d8235ea..b7dda441b2e5115 100644 --- a/files/en-us/web/api/htmlcanvaselement/toblob/index.html +++ b/files/en-us/web/api/htmlcanvaselement/toblob/index.html @@ -21,7 +21,7 @@Syntax
-canvas.toBlob(callback, mimeType, qualityArgument); +canvas.toBlob(callback, mimeType, qualityArgument);Parameters
@@ -63,7 +63,7 @@Getting a file representing the image, then appends a new {{HTMLElement("img")}} element to the document, whose source image is the one created using the canvas. -
var canvas = document.getElementById('canvas'); +var canvas = document.getElementById('canvas'); canvas.toBlob(function(blob) { var newImg = document.createElement('img'), @@ -84,7 +84,7 @@Getting a file representing the image in JPEG format:
canvas.toBlob(function(blob){...}, 'image/jpeg', 0.95); // JPEG at 95% quality+ class="brush: js"> canvas.toBlob(function(blob){...}, 'image/jpeg', 0.95); // JPEG at 95% qualityA way to convert a canvas to an ico (Mozilla only)
@@ -94,7 +94,7 @@A way to convert a can by setting the download attribute. The value of the download attribute is the name it will use as the file name. -
var canvas = document.getElementById('canvas'); +var canvas = document.getElementById('canvas'); var d = canvas.width; ctx = canvas.getContext('2d'); ctx.beginPath(); @@ -126,7 +126,7 @@Save toBlob or add-on code, as OS APIs are not present on web sites. -
var canvas = document.getElementById('canvas'); +var canvas = document.getElementById('canvas'); var d = canvas.width; ctx = canvas.getContext('2d'); ctx.beginPath(); diff --git a/files/en-us/web/api/htmlcanvaselement/todataurl/index.html b/files/en-us/web/api/htmlcanvaselement/todataurl/index.html index 5797874d6c9965b..06858b26d32e1e6 100644 --- a/files/en-us/web/api/htmlcanvaselement/todataurl/index.html +++ b/files/en-us/web/api/htmlcanvaselement/todataurl/index.html @@ -27,7 +27,7 @@Syntax
-canvas.toDataURL(type, encoderOptions); +canvas.toDataURL(type, encoderOptions);Parameters
diff --git a/files/en-us/web/api/htmlcanvaselement/transfercontroltooffscreen/index.html b/files/en-us/web/api/htmlcanvaselement/transfercontroltooffscreen/index.html index af9111c645bd085..b7cfd04a9f28cb3 100644 --- a/files/en-us/web/api/htmlcanvaselement/transfercontroltooffscreen/index.html +++ b/files/en-us/web/api/htmlcanvaselement/transfercontroltooffscreen/index.html @@ -19,7 +19,7 @@Syntax
OffscreenCanvas HTMLCanvasElement.transferControlToOffscreen()+ class="brush: js">OffscreenCanvas HTMLCanvasElement.transferControlToOffscreen()Return value
diff --git a/files/en-us/web/api/htmlcanvaselement/width/index.html b/files/en-us/web/api/htmlcanvaselement/width/index.html index b0dac5df2ff1db7..fa574afcf3a60a6 100644 --- a/files/en-us/web/api/htmlcanvaselement/width/index.html +++ b/files/en-us/web/api/htmlcanvaselement/width/index.html @@ -24,7 +24,7 @@Syntax
-var pxl = canvas.width; +var pxl = canvas.width; canvas.width = pxl;diff --git a/files/en-us/web/api/htmldialogelement/cancel_event/index.html b/files/en-us/web/api/htmldialogelement/cancel_event/index.html index 11a6a4f0b6f8da3..719e0b787cb7217 100644 --- a/files/en-us/web/api/htmldialogelement/cancel_event/index.html +++ b/files/en-us/web/api/htmldialogelement/cancel_event/index.html @@ -40,7 +40,7 @@Live example
HTML
-<dialog class="example-dialog"> +<dialog class="example-dialog"> <button class="close" type="reset">Close</button> </dialog> @@ -51,7 +51,7 @@HTML
CSS
-button, div { +button, div { margin: .5rem; }@@ -59,7 +59,7 @@CSS
JS
-const result = document.querySelector('.result'); +const result = document.querySelector('.result'); const dialog = document.querySelector('.example-dialog'); diff --git a/files/en-us/web/api/htmldialogelement/close/index.html b/files/en-us/web/api/htmldialogelement/close/index.html index 282f113cb7cd764..db203c30e37eacd 100644 --- a/files/en-us/web/api/htmldialogelement/close/index.html +++ b/files/en-us/web/api/htmldialogelement/close/index.html @@ -21,7 +21,7 @@Syntax
-dialogInstance.close(returnValue);+dialogInstance.close(returnValue);Parameters
diff --git a/files/en-us/web/api/htmldialogelement/close_event/index.html b/files/en-us/web/api/htmldialogelement/close_event/index.html index 8b1eb786c3f27e0..d7921e5cc21479c 100644 --- a/files/en-us/web/api/htmldialogelement/close_event/index.html +++ b/files/en-us/web/api/htmldialogelement/close_event/index.html @@ -41,7 +41,7 @@Live example
HTML
-<dialog class="example-dialog"> +<dialog class="example-dialog"> <button class="close" type="reset">Close</button> </dialog> @@ -52,7 +52,7 @@HTML
CSS
-button, div { +button, div { margin: .5rem; }@@ -60,7 +60,7 @@CSS
JS
-const result = document.querySelector('.result'); +const result = document.querySelector('.result'); const dialog = document.querySelector('.example-dialog'); dialog.addEventListener('close', (event) => { diff --git a/files/en-us/web/api/htmldialogelement/open/index.html b/files/en-us/web/api/htmldialogelement/open/index.html index e6c6312855f2b08..0ccc82037635d16 100644 --- a/files/en-us/web/api/htmldialogelement/open/index.html +++ b/files/en-us/web/api/htmldialogelement/open/index.html @@ -23,7 +23,7 @@Syntax
-dialogInstance.open = true; +dialogInstance.open = true; var myOpenValue = dialogInstance.open;Value
diff --git a/files/en-us/web/api/htmldialogelement/returnvalue/index.html b/files/en-us/web/api/htmldialogelement/returnvalue/index.html index cf642814d3d0607..564189dcd030228 100644 --- a/files/en-us/web/api/htmldialogelement/returnvalue/index.html +++ b/files/en-us/web/api/htmldialogelement/returnvalue/index.html @@ -21,7 +21,7 @@Syntax
-dialogInstance.returnValue = 'myReturnValue'; +dialogInstance.returnValue = 'myReturnValue'; var myReturnValue = dialogInstance.returnValue;Value
diff --git a/files/en-us/web/api/htmldialogelement/show/index.html b/files/en-us/web/api/htmldialogelement/show/index.html index 2ca14525cd29bcd..34acf0cd6f30a4a 100644 --- a/files/en-us/web/api/htmldialogelement/show/index.html +++ b/files/en-us/web/api/htmldialogelement/show/index.html @@ -18,7 +18,7 @@Syntax
-dialogInstance.show();+dialogInstance.show();Parameters
diff --git a/files/en-us/web/api/htmldialogelement/showmodal/index.html b/files/en-us/web/api/htmldialogelement/showmodal/index.html index ae0221745610412..38fd32c14b5fc9c 100644 --- a/files/en-us/web/api/htmldialogelement/showmodal/index.html +++ b/files/en-us/web/api/htmldialogelement/showmodal/index.html @@ -20,7 +20,7 @@Syntax
-dialogInstance.showModal();+dialogInstance.showModal();Parameters
diff --git a/files/en-us/web/api/htmlfontelement/color/index.html b/files/en-us/web/api/htmlfontelement/color/index.html index 825e22c1bd3eaed..bda623b9955b022 100644 --- a/files/en-us/web/api/htmlfontelement/color/index.html +++ b/files/en-us/web/api/htmlfontelement/color/index.html @@ -53,7 +53,7 @@Syntax
-colorString = fontObj.color; +colorString = fontObj.color; fontObj.color = colorString;diff --git a/files/en-us/web/api/htmlfontelement/face/index.html b/files/en-us/web/api/htmlfontelement/face/index.html index aca5120c5606511..b8261a2a0e772c3 100644 --- a/files/en-us/web/api/htmlfontelement/face/index.html +++ b/files/en-us/web/api/htmlfontelement/face/index.html @@ -44,7 +44,7 @@Syntax
-faceString = fontObj.face; +faceString = fontObj.face;diff --git a/files/en-us/web/api/htmlfontelement/size/index.html b/files/en-us/web/api/htmlfontelement/size/index.html index e01ba8c1b5e2062..d192e79dd59ceb3 100644 --- a/files/en-us/web/api/htmlfontelement/size/index.html +++ b/files/en-us/web/api/htmlfontelement/size/index.html @@ -51,7 +51,7 @@fontObj.face = faceString;
Syntax
-sizeString = fontObj.size; +sizeString = fontObj.size;diff --git a/files/en-us/web/api/htmlmeterelement/labels/index.html b/files/en-us/web/api/htmlmeterelement/labels/index.html index 7efccf2c17da521..e9e993d0bb19298 100644 --- a/files/en-us/web/api/htmlmeterelement/labels/index.html +++ b/files/en-us/web/api/htmlmeterelement/labels/index.html @@ -16,7 +16,7 @@fontObj.size = sizeString;
Syntax
-var labelElements = meter.labels; +var labelElements = meter.labels;Return value
diff --git a/files/en-us/web/api/htmltemplateelement/content/index.html b/files/en-us/web/api/htmltemplateelement/content/index.html index 6adf2bb70114fd5..a7994f840081b65 100644 --- a/files/en-us/web/api/htmltemplateelement/content/index.html +++ b/files/en-us/web/api/htmltemplateelement/content/index.html @@ -18,7 +18,7 @@Syntax
var documentFragment = templateElement.content+ class="brush: js">var documentFragment = templateElement.contentExample
diff --git a/files/en-us/web/api/htmltextareaelement/index.html b/files/en-us/web/api/htmltextareaelement/index.html index 1ca470ce0bda50d..18bed83411653b8 100644 --- a/files/en-us/web/api/htmltextareaelement/index.html +++ b/files/en-us/web/api/htmltextareaelement/index.html @@ -197,7 +197,7 @@Autogrowing textarea example
JavaScript
-function autoGrow (oField) { +function autoGrow (oField) { if (oField.scrollHeight > oField.clientHeight) { oField.style.height = oField.scrollHeight + "px"; } @@ -205,7 +205,7 @@JavaScript
CSS
-textarea.noscrollbars { +textarea.noscrollbars { overflow: hidden; width: 300px; height: 100px; @@ -213,7 +213,7 @@CSS
HTML
-<form> +<form> <fieldset> <legend>Your comments</legend> <p><textarea class="noscrollbars" onkeyup="autoGrow(this);"></textarea></p> @@ -230,7 +230,7 @@Insert HTML tags example
JavaScript
-function insertMetachars(sStartTag, sEndTag) { +function insertMetachars(sStartTag, sEndTag) { var bDouble = arguments.length > 1, oMsgInput = document.myForm.myTxtArea, nSelStart = oMsgInput.selectionStart, nSelEnd = oMsgInput.selectionEnd, sOldText = oMsgInput.value; oMsgInput.value = sOldText.substring(0, nSelStart) + (bDouble ? sStartTag + sOldText.substring(nSelStart, nSelEnd) + sEndTag : sStartTag) + sOldText.substring(nSelEnd); oMsgInput.setSelectionRange(bDouble || nSelStart === nSelEnd ? nSelStart + sStartTag.length : nSelStart, (bDouble ? nSelEnd : nSelStart) + sStartTag.length); @@ -241,7 +241,7 @@CSS
CSS to decorate the internal span to behave like a link:
-.intLink { +.intLink { cursor: pointer; text-decoration: underline; color: #0000ff; @@ -249,7 +249,7 @@CSS
HTML:
-<form name="myForm"> +<form name="myForm"> <p>[ <span class="intLink" onclick="insertMetachars('<strong>','<\/strong>');"><strong>Bold</strong></span> | <span class="intLink" onclick="insertMetachars('<em>','<\/em>');"><em>Italic</em></span> | <span class="intLink" onclick="var newURL=prompt('Enter the full URL for the link');if(newURL){insertMetachars('<a href=\u0022'+newURL+'\u0022>','<\/a>');}else{document.myForm.myTxtArea.focus();}">URL</span> | <span class="intLink" onclick="insertMetachars('\n<code>\n','\n<\/code>\n');">code</span> | <span class="intLink" onclick="insertMetachars(' :-)');">smile</span> | etc. etc. ]</p> <p><textarea name="myTxtArea" rows="10" cols="50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis, arcu vitae adipiscing placerat, nisl lectus accumsan nisi, vitae iaculis sem neque vel lectus. Praesent tristique commodo lorem quis fringilla. Sed ac tellus eros. Sed consectetur eleifend felis vitae luctus. Praesent sagittis, est eget bibendum tincidunt, ligula diam tincidunt augue, a fermentum odio velit eget mi. Phasellus mattis, elit id fringilla semper, orci magna cursus ligula, non venenatis lacus augue sit amet dui. Pellentesque lacinia odio id nisi pulvinar commodo tempus at odio. Ut consectetur eros porttitor nunc mollis ultrices. Aenean porttitor, purus sollicitudin viverra auctor, neque erat blandit sapien, sit amet tincidunt massa mi ac nibh. Proin nibh sem, bibendum ut placerat nec, cursus et lacus. Phasellus vel augue turpis. Nunc eu mauris eu leo blandit mollis interdum eget lorem. </textarea></p> </form> @@ -263,7 +263,7 @@Maximum length and number of
First, create a function that takes the text field and a key event as input and determines if any of the limits have been reached. If the limit has not been reached, it will return the key.
-function checkRows(oField, oKeyEvent) { +function checkRows(oField, oKeyEvent) { var nKey = (oKeyEvent || /* old IE */ window.event || /* check is not supported! */ { keyCode: 38 }).keyCode, // put here the maximum number of characters per line: @@ -287,7 +287,7 @@Maximum length and number of
In the HTML we just need to hook our function to the `onkeypress` event and specify that our textarea does not accept pasting:
-<form> +<form> <p>Textarea with fixed number of characters per line:<br /> <textarea cols="50" rows="10" onkeypress="return checkRows(this, event);" onpaste="return false;"></textarea> diff --git a/files/en-us/web/api/htmltextareaelement/labels/index.html b/files/en-us/web/api/htmltextareaelement/labels/index.html index c21d83f3e93bad7..9a598b6357b948e 100644 --- a/files/en-us/web/api/htmltextareaelement/labels/index.html +++ b/files/en-us/web/api/htmltextareaelement/labels/index.html @@ -16,7 +16,7 @@Syntax
-var labelElements = textArea.labels; +var labelElements = textArea.labels;Return value
diff --git a/files/en-us/web/api/idbcursor/advance/index.html b/files/en-us/web/api/idbcursor/advance/index.html index f7f288622712e1c..a87e099ba50f47b 100644 --- a/files/en-us/web/api/idbcursor/advance/index.html +++ b/files/en-us/web/api/idbcursor/advance/index.html @@ -21,7 +21,7 @@Syntax
-cursor.advance(count);+cursor.advance(count);Parameters
@@ -79,7 +79,7 @@Example
style="line-height: 1.5;">view example live.) -function advanceResult() { +function advanceResult() { list.textContent = ''; const transaction = db.transaction(['rushAlbumList'], "readonly"); const objectStore = transaction.objectStore('rushAlbumList'); diff --git a/files/en-us/web/api/idbcursor/continue/index.html b/files/en-us/web/api/idbcursor/continue/index.html index 1b22c63613ec032..6389132cec61a6e 100644 --- a/files/en-us/web/api/idbcursor/continue/index.html +++ b/files/en-us/web/api/idbcursor/continue/index.html @@ -23,7 +23,7 @@Syntax
cursor.continue(key);+ class="brush: js">cursor.continue(key);Parameters
diff --git a/files/en-us/web/api/idbcursor/continueprimarykey/index.html b/files/en-us/web/api/idbcursor/continueprimarykey/index.html index 1bd26b18f2b61ad..3757364907ca2ef 100644 --- a/files/en-us/web/api/idbcursor/continueprimarykey/index.html +++ b/files/en-us/web/api/idbcursor/continueprimarykey/index.html @@ -33,7 +33,7 @@Syntax
cursor.continuePrimaryKey(key, primaryKey);+ class="brush: js">cursor.continuePrimaryKey(key, primaryKey);Parameters
diff --git a/files/en-us/web/api/idbcursor/delete/index.html b/files/en-us/web/api/idbcursor/delete/index.html index c1352602fa8b88e..09140a0ad0aab55 100644 --- a/files/en-us/web/api/idbcursor/delete/index.html +++ b/files/en-us/web/api/idbcursor/delete/index.html @@ -27,7 +27,7 @@Syntax
-myIDBCursor.delete();+myIDBCursor.delete();Returns
@@ -76,7 +76,7 @@Example
example (view example live.) -function deleteResult() { +function deleteResult() { list.textContent = ''; const transaction = db.transaction(['rushAlbumList'], 'readwrite'); const objectStore = transaction.objectStore('rushAlbumList'); diff --git a/files/en-us/web/api/idbcursor/direction/index.html b/files/en-us/web/api/idbcursor/direction/index.html index 3901976203f91c8..f8f632b56978b2c 100644 --- a/files/en-us/web/api/idbcursor/direction/index.html +++ b/files/en-us/web/api/idbcursor/direction/index.html @@ -25,7 +25,7 @@Syntax
-var direction = cursor.direction;Value
@@ -75,7 +75,7 @@Example
cursor to iterate through all the records in the object store. Within each iteration we log the direction of the cursor, something like this: -prev
Example example (view example live.) -function backwards() { +function backwards() { list.textContent = ''; const transaction = db.transaction(['rushAlbumList'], 'readonly'); const objectStore = transaction.objectStore('rushAlbumList'); diff --git a/files/en-us/web/api/idbcursor/key/index.html b/files/en-us/web/api/idbcursor/key/index.html index f8e4872bb8a7edd..b3f99a072f27312 100644 --- a/files/en-us/web/api/idbcursor/key/index.html +++ b/files/en-us/web/api/idbcursor/key/index.html @@ -24,7 +24,7 @@Syntax
-var key = cursor.key;+var key = cursor.key;Value
diff --git a/files/en-us/web/api/idbcursor/primarykey/index.html b/files/en-us/web/api/idbcursor/primarykey/index.html index f4f9002dbb855cd..da2c2045d74ed73 100644 --- a/files/en-us/web/api/idbcursor/primarykey/index.html +++ b/files/en-us/web/api/idbcursor/primarykey/index.html @@ -24,7 +24,7 @@Syntax
-var value = cursor.primaryKey;+var value = cursor.primaryKey;Value
diff --git a/files/en-us/web/api/idbcursor/request/index.html b/files/en-us/web/api/idbcursor/request/index.html index 808a28692aea09f..f77c74f1f494891 100644 --- a/files/en-us/web/api/idbcursor/request/index.html +++ b/files/en-us/web/api/idbcursor/request/index.html @@ -19,7 +19,7 @@Syntax
-IDBCursor.request;+IDBCursor.request;Value
@@ -29,7 +29,7 @@Examples
When you open a cursor, the
-request
property is then available on that cursor object, to tell you what request object the cursor originated from. For example:function displayData() { +function displayData() { list.textContent = ''; const transaction = db.transaction(['rushAlbumList'], 'readonly'); const objectStore = transaction.objectStore('rushAlbumList'); diff --git a/files/en-us/web/api/idbcursor/source/index.html b/files/en-us/web/api/idbcursor/source/index.html index 2e94009c9d7eede..5675f038658cca9 100644 --- a/files/en-us/web/api/idbcursor/source/index.html +++ b/files/en-us/web/api/idbcursor/source/index.html @@ -25,7 +25,7 @@Syntax
-var source = cursor.source;+var source = cursor.source;Value
diff --git a/files/en-us/web/api/idbcursor/update/index.html b/files/en-us/web/api/idbcursor/update/index.html index 9bf9e16457591f2..0d37ee44474ad1f 100644 --- a/files/en-us/web/api/idbcursor/update/index.html +++ b/files/en-us/web/api/idbcursor/update/index.html @@ -28,7 +28,7 @@Syntax
var anIDBRequest = myIDBCursor.update(value);+ class="brush: js">var anIDBRequest = myIDBCursor.update(value);Parameters
@@ -110,7 +110,7 @@Example
style="white-space: pre-line; line-height: 1.5;">view example live.) -function updateResult() { +function updateResult() { list.textContent = ''; const transaction = db.transaction(['rushAlbumList'], 'readwrite'); const objectStore = transaction.objectStore('rushAlbumList'); diff --git a/files/en-us/web/api/idbmutablefile/getfile/index.html b/files/en-us/web/api/idbmutablefile/getfile/index.html index de17046031e0451..16da8f1a29ac226 100644 --- a/files/en-us/web/api/idbmutablefile/getfile/index.html +++ b/files/en-us/web/api/idbmutablefile/getfile/index.html @@ -19,7 +19,7 @@Summary
Syntax
var request = instanceOfFileHandle.getFile();+ class="brush: js">var request = instanceOfFileHandle.getFile();Return
diff --git a/files/en-us/web/api/idbmutablefile/name/index.html b/files/en-us/web/api/idbmutablefile/name/index.html index 3b9272dae5ca4dc..e240d3ae782f437 100644 --- a/files/en-us/web/api/idbmutablefile/name/index.html +++ b/files/en-us/web/api/idbmutablefile/name/index.html @@ -17,7 +17,7 @@Summary
Syntax
-var name = instanceOfFileHandle.name +var name = instanceOfFileHandle.nameValue
diff --git a/files/en-us/web/api/idbmutablefile/open/index.html b/files/en-us/web/api/idbmutablefile/open/index.html index 0d33fedf88d6311..8cbc8fb239d9656 100644 --- a/files/en-us/web/api/idbmutablefile/open/index.html +++ b/files/en-us/web/api/idbmutablefile/open/index.html @@ -19,7 +19,7 @@Summary
Syntax
var myFile = instanceOfFileHandle.open(mode);+ class="brush: js">var myFile = instanceOfFileHandle.open(mode);Parameters
diff --git a/files/en-us/web/api/idbmutablefile/type/index.html b/files/en-us/web/api/idbmutablefile/type/index.html index 6b0803e9bc615ac..18d6173d6f6b5a1 100644 --- a/files/en-us/web/api/idbmutablefile/type/index.html +++ b/files/en-us/web/api/idbmutablefile/type/index.html @@ -17,7 +17,7 @@Summary
Syntax
-var type = instanceOfFileHandle.type +var type = instanceOfFileHandle.typeValue
diff --git a/files/en-us/web/api/idbobjectstore/add/index.html b/files/en-us/web/api/idbobjectstore/add/index.html index 367dcfc206a48f7..c3ab022f72c479f 100644 --- a/files/en-us/web/api/idbobjectstore/add/index.html +++ b/files/en-us/web/api/idbobjectstore/add/index.html @@ -32,7 +32,7 @@Syntax
-var request = objectStore.add(value); +var request = objectStore.add(value); var request = objectStore.add(value, key);diff --git a/files/en-us/web/api/idbobjectstore/autoincrement/index.html b/files/en-us/web/api/idbobjectstore/autoincrement/index.html index 31d9577a98fe743..72f213afd73c088 100644 --- a/files/en-us/web/api/idbobjectstore/autoincrement/index.html +++ b/files/en-us/web/api/idbobjectstore/autoincrement/index.html @@ -26,7 +26,7 @@Syntax
var myAutoIncrement = objectStore.autoIncrement;+ class="brush: js">var myAutoIncrement = objectStore.autoIncrement;Value
diff --git a/files/en-us/web/api/idbobjectstore/clear/index.html b/files/en-us/web/api/idbobjectstore/clear/index.html index 0ae5385d86ca247..3a325214f0c2014 100644 --- a/files/en-us/web/api/idbobjectstore/clear/index.html +++ b/files/en-us/web/api/idbobjectstore/clear/index.html @@ -30,7 +30,7 @@Syntax
var request = objectStore.clear();+ class="brush: js">var request = objectStore.clear();Returns
diff --git a/files/en-us/web/api/idbobjectstore/count/index.html b/files/en-us/web/api/idbobjectstore/count/index.html index 2ad2fe8e896dd1c..2011572c39ea3a7 100644 --- a/files/en-us/web/api/idbobjectstore/count/index.html +++ b/files/en-us/web/api/idbobjectstore/count/index.html @@ -25,7 +25,7 @@Syntax
-var request = ObjectStore.count(); +var request = ObjectStore.count(); var request = ObjectStore.count(query);diff --git a/files/en-us/web/api/idbobjectstore/createindex/index.html b/files/en-us/web/api/idbobjectstore/createindex/index.html index 775dd066c303b59..bc8b0d00412efad 100644 --- a/files/en-us/web/api/idbobjectstore/createindex/index.html +++ b/files/en-us/web/api/idbobjectstore/createindex/index.html @@ -33,7 +33,7 @@Syntax
-var myIDBIndex = objectStore.createIndex(indexName, keyPath); +var myIDBIndex = objectStore.createIndex(indexName, keyPath); var myIDBIndex = objectStore.createIndex(indexName, keyPath, objectParameters);diff --git a/files/en-us/web/api/idbobjectstore/delete/index.html b/files/en-us/web/api/idbobjectstore/delete/index.html index 5486dd643251b5d..00e3baceaed8d64 100644 --- a/files/en-us/web/api/idbobjectstore/delete/index.html +++ b/files/en-us/web/api/idbobjectstore/delete/index.html @@ -27,7 +27,7 @@Syntax
-var request = objectStore.delete(Key); +var request = objectStore.delete(Key); var request = objectStore.delete(KeyRange);diff --git a/files/en-us/web/api/idbobjectstore/deleteindex/index.html b/files/en-us/web/api/idbobjectstore/deleteindex/index.html index 74a702c1e8bfca4..9ef66a924b781dc 100644 --- a/files/en-us/web/api/idbobjectstore/deleteindex/index.html +++ b/files/en-us/web/api/idbobjectstore/deleteindex/index.html @@ -28,7 +28,7 @@Syntax
objectStore.deleteIndex(indexName);+ class="brush: js">objectStore.deleteIndex(indexName);Parameters
diff --git a/files/en-us/web/api/idbobjectstore/get/index.html b/files/en-us/web/api/idbobjectstore/get/index.html index cf09cf62da8ac77..1496fc0caddacf0 100644 --- a/files/en-us/web/api/idbobjectstore/get/index.html +++ b/files/en-us/web/api/idbobjectstore/get/index.html @@ -33,7 +33,7 @@Syntax
var request = objectStore.get(key);+ class="brush: js">var request = objectStore.get(key);Parameters
diff --git a/files/en-us/web/api/idbobjectstore/getall/index.html b/files/en-us/web/api/idbobjectstore/getall/index.html index 3ca10a470c5e4af..08cc436c0db6f8c 100644 --- a/files/en-us/web/api/idbobjectstore/getall/index.html +++ b/files/en-us/web/api/idbobjectstore/getall/index.html @@ -42,7 +42,7 @@Syntax
-var request = objectStore.getAll(); +var request = objectStore.getAll(); var request = objectStore.getAll(query); var request = objectStore.getAll(query, count);diff --git a/files/en-us/web/api/idbobjectstore/getallkeys/index.html b/files/en-us/web/api/idbobjectstore/getallkeys/index.html index dc1a20992665f4a..d119d11a534a474 100644 --- a/files/en-us/web/api/idbobjectstore/getallkeys/index.html +++ b/files/en-us/web/api/idbobjectstore/getallkeys/index.html @@ -34,7 +34,7 @@Syntax
-var request = objectStore.getAllKeys(); +var request = objectStore.getAllKeys(); var request = objectStore.getAllKeys(query); var request = objectStore.getAllKeys(query, count);diff --git a/files/en-us/web/api/idbobjectstore/getkey/index.html b/files/en-us/web/api/idbobjectstore/getkey/index.html index c53c2a5a8720782..1088be1a3a3aa21 100644 --- a/files/en-us/web/api/idbobjectstore/getkey/index.html +++ b/files/en-us/web/api/idbobjectstore/getkey/index.html @@ -26,7 +26,7 @@Syntax
var request = objectStore.getKey(key);+ class="brush: js">var request = objectStore.getKey(key);Parameters
diff --git a/files/en-us/web/api/idbobjectstore/index/index.html b/files/en-us/web/api/idbobjectstore/index/index.html index b29cf7d86f4cf15..49f59499365902c 100644 --- a/files/en-us/web/api/idbobjectstore/index/index.html +++ b/files/en-us/web/api/idbobjectstore/index/index.html @@ -25,7 +25,7 @@Syntax
var index = objectStore.index(name);+ class="brush: js">var index = objectStore.index(name);Parameters
diff --git a/files/en-us/web/api/idbobjectstore/indexnames/index.html b/files/en-us/web/api/idbobjectstore/indexnames/index.html index a8e9d113fbf5809..347438c0fbca1f6 100644 --- a/files/en-us/web/api/idbobjectstore/indexnames/index.html +++ b/files/en-us/web/api/idbobjectstore/indexnames/index.html @@ -25,7 +25,7 @@Syntax
var myindexNames = objectStore.indexNames;+ class="brush: js">var myindexNames = objectStore.indexNames;Value
diff --git a/files/en-us/web/api/idbobjectstore/keypath/index.html b/files/en-us/web/api/idbobjectstore/keypath/index.html index ba5c6a297cab3a4..0bebd287694ce9f 100644 --- a/files/en-us/web/api/idbobjectstore/keypath/index.html +++ b/files/en-us/web/api/idbobjectstore/keypath/index.html @@ -28,7 +28,7 @@Syntax
var mykeyPath = objectStore.keyPath;+ class="brush: js">var mykeyPath = objectStore.keyPath;Value
diff --git a/files/en-us/web/api/idbobjectstore/name/index.html b/files/en-us/web/api/idbobjectstore/name/index.html index 1b6e6d4e60db704..bd109762fc99f37 100644 --- a/files/en-us/web/api/idbobjectstore/name/index.html +++ b/files/en-us/web/api/idbobjectstore/name/index.html @@ -22,7 +22,7 @@Syntax
-IDBObjectStore.name = myNewName; +IDBObjectStore.name = myNewName; var myObjectStoreName = IDBObjectStore.name;diff --git a/files/en-us/web/api/idbobjectstore/opencursor/index.html b/files/en-us/web/api/idbobjectstore/opencursor/index.html index b545255e6109a4e..4965e6401ecf796 100644 --- a/files/en-us/web/api/idbobjectstore/opencursor/index.html +++ b/files/en-us/web/api/idbobjectstore/opencursor/index.html @@ -27,7 +27,7 @@Syntax
-var request = ObjectStore.openCursor(); +var request = ObjectStore.openCursor(); var request = ObjectStore.openCursor(query); var request = ObjectStore.openCursor(query, direction);diff --git a/files/en-us/web/api/idbobjectstore/openkeycursor/index.html b/files/en-us/web/api/idbobjectstore/openkeycursor/index.html index f770073a2d04507..5f9dbf5bb95696a 100644 --- a/files/en-us/web/api/idbobjectstore/openkeycursor/index.html +++ b/files/en-us/web/api/idbobjectstore/openkeycursor/index.html @@ -25,7 +25,7 @@Syntax
-var request = objectStore.openKeyCursor(); +var request = objectStore.openKeyCursor(); var request = objectStore.openKeyCursor(query); var request = objectStore.openKeyCursor(query, direction);diff --git a/files/en-us/web/api/idbobjectstore/put/index.html b/files/en-us/web/api/idbobjectstore/put/index.html index 4d9ac21a364fe65..a9a8649652b0d58 100644 --- a/files/en-us/web/api/idbobjectstore/put/index.html +++ b/files/en-us/web/api/idbobjectstore/put/index.html @@ -29,7 +29,7 @@Syntax
-let request = objectStore.put(item); +let request = objectStore.put(item); let request = objectStore.put(item, key);Parameters
diff --git a/files/en-us/web/api/idbobjectstore/transaction/index.html b/files/en-us/web/api/idbobjectstore/transaction/index.html index eb969ebc23150a2..6507538105799e2 100644 --- a/files/en-us/web/api/idbobjectstore/transaction/index.html +++ b/files/en-us/web/api/idbobjectstore/transaction/index.html @@ -24,7 +24,7 @@Syntax
var myTransaction = objectStore.transaction;+ class="brush: js">var myTransaction = objectStore.transaction;Value
diff --git a/files/en-us/web/api/idbversionchangeevent/idbversionchangeevent/index.html b/files/en-us/web/api/idbversionchangeevent/idbversionchangeevent/index.html index 735df9641e3390b..3ec02fafd7b13de 100644 --- a/files/en-us/web/api/idbversionchangeevent/idbversionchangeevent/index.html +++ b/files/en-us/web/api/idbversionchangeevent/idbversionchangeevent/index.html @@ -20,7 +20,7 @@Syntax
var idbVersionChangeEvent = new IDBVersionChangeEvent();+ class="brush: js">var idbVersionChangeEvent = new IDBVersionChangeEvent();Parameters
diff --git a/files/en-us/web/api/idbversionchangeevent/newversion/index.html b/files/en-us/web/api/idbversionchangeevent/newversion/index.html index 10e55469e7495f7..f8c63154693ee56 100644 --- a/files/en-us/web/api/idbversionchangeevent/newversion/index.html +++ b/files/en-us/web/api/idbversionchangeevent/newversion/index.html @@ -24,7 +24,7 @@Syntax
var newVersion = IDBVersionChangeEvent.newVersion+ class="brush: js">var newVersion = IDBVersionChangeEvent.newVersionValue
diff --git a/files/en-us/web/api/idbversionchangeevent/oldversion/index.html b/files/en-us/web/api/idbversionchangeevent/oldversion/index.html index 6e51d6e54155f9d..91110301aa12a4c 100644 --- a/files/en-us/web/api/idbversionchangeevent/oldversion/index.html +++ b/files/en-us/web/api/idbversionchangeevent/oldversion/index.html @@ -27,7 +27,7 @@Syntax
var oldVersion = IDBVersionChangeEvent.oldVersion+ class="brush: js">var oldVersion = IDBVersionChangeEvent.oldVersionValue
diff --git a/files/en-us/web/api/idbversionchangeevent/version/index.html b/files/en-us/web/api/idbversionchangeevent/version/index.html index d93620c6d8b48cb..b23df24c44f1df6 100644 --- a/files/en-us/web/api/idbversionchangeevent/version/index.html +++ b/files/en-us/web/api/idbversionchangeevent/version/index.html @@ -28,7 +28,7 @@Syntax
readonly attribute unsigned long long? version;
+ class="brush: js">readonly attribute unsigned long long? version;Value
diff --git a/files/en-us/web/api/imagebitmaprenderingcontext/transferfromimagebitmap/index.html b/files/en-us/web/api/imagebitmaprenderingcontext/transferfromimagebitmap/index.html index f79abc92f6da136..7c9f6c9e7a39d5e 100644 --- a/files/en-us/web/api/imagebitmaprenderingcontext/transferfromimagebitmap/index.html +++ b/files/en-us/web/api/imagebitmaprenderingcontext/transferfromimagebitmap/index.html @@ -23,7 +23,7 @@Syntax
void ImageBitmapRenderingContext.transferFromImageBitmap(bitmap)+ class="brush: js">void ImageBitmapRenderingContext.transferFromImageBitmap(bitmap)Parameters
diff --git a/files/en-us/web/api/indexeddb_api/using_indexeddb/index.html b/files/en-us/web/api/indexeddb_api/using_indexeddb/index.html index 6845dedcebe9f45..9afe96f2e17f681 100644 --- a/files/en-us/web/api/indexeddb_api/using_indexeddb/index.html +++ b/files/en-us/web/api/indexeddb_api/using_indexeddb/index.html @@ -47,7 +47,7 @@Using an experimental versio
In case you want to test your code in browsers that still use a prefix, you can use the following code:
-// In the following line, you should include the prefixes of implementations you want to test. +// In the following line, you should include the prefixes of implementations you want to test. window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; // DON'T use "var indexedDB = ..." if you're not in a function. // Moreover, you may need references to some window.IDB* objects: @@ -57,7 +57,7 @@Using an experimental versio
Beware that implementations that use a prefix may be buggy, or incomplete, or following an old version of the specification. Therefore, it is not recommended to use it in production code. It may be preferable to not support a browser than to claim to support it and fail:
-if (!window.indexedDB) { +if (!window.indexedDB) { console.log("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available."); }@@ -66,7 +66,7 @@Opening a database
We start the whole process like this:
-// Let us open our database +// Let us open our database var request = window.indexedDB.open("MyTestDatabase", 3);@@ -85,7 +85,7 @@Generating handlers
The first thing you'll want to do with almost all of the requests you generate is to add success and error handlers:
-request.onerror = function(event) { +request.onerror = function(event) { // Do something with request.errorCode! }; request.onsuccess = function(event) { @@ -100,7 +100,7 @@Generating handlers
Now, assuming that the user allowed your request to create a database, and you've received a success event to trigger the success callback; What's next? The request here was generated with a call to
-indexedDB.open()
, sorequest.result
is an instance ofIDBDatabase
, and you definitely want to save that for later. Your code might look something like this:var db; +var db; var request = indexedDB.open("MyTestDatabase"); request.onerror = function(event) { console.log("Why didn't you allow my web app to use IndexedDB?!"); @@ -114,7 +114,7 @@Handling Errors
As mentioned above, error events bubble. Error events are targeted at the request that generated the error, then the event bubbles to the transaction, and then finally to the database object. If you want to avoid adding error handlers to every request, you can instead add a single error handler on the database object, like so:
-db.onerror = function(event) { +db.onerror = function(event) { // Generic error handler for all errors targeted at this database's // requests! console.error("Database error: " + event.target.errorCode); @@ -127,7 +127,7 @@Creating or updating t