mdn · teoli2003 · Jul 18, 2022 · Jul 17, 2022 · Jul 17, 2022 · Jul 17, 2022
@@ -47,10 +47,12 @@ The following example shows how to use the `finish()` method and catch an `Inval
 interfaceElement.addEventListener("mousedown", function() {
   try {
     player.finish();
-  } catch(e if e instanceof InvalidState) {
-    console.log("finish() called on paused or finished animation.");
-  } catch(e);
-    logMyErrors(e); //pass exception object to error handler
+  } catch(e) {
+    if (e instanceof InvalidState) {
+      console.log("finish() called on paused or finished animation.");
+    } else {
+      logMyErrors(e); //pass exception object to error handler
+    }
   }
 });
 ```

@@ -53,6 +53,7 @@ button.onclick = function() {
   const source = audioCtx.createBufferSource();
   // set the buffer in the AudioBufferSourceNode
   source.buffer = myArrayBuffer;
+}
 ```
 
 ## Specifications

@@ -53,7 +53,9 @@ const analyserNode = new AnalyserNode(audioCtx, {
   minDecibels: -60,
   smoothingTimeConstant: 0.5,
 });
+```
 
+```js
 // factory method
 const analyserNode = audioCtx.createAnalyser();
 analyserNode.fftSize = 2048;

@@ -42,13 +42,13 @@ function swapCommentaryMain() {
   let audioTrackMain;
   let audioTrackCommentary;
 
-  videoElem.audioTracks.forEach(track) {
+  videoElem.audioTracks.forEach((track) => {
     if (track.kind === "main") {
       audioTrackMain = track;
     } else if (track.kind === "commentary") {
       audioTrackCommentary = track;
     }
-  }
+  });
 
   if (audioTrackMain && audioTrackCommentary) {
     const commentaryEnabled = audioTrackCommentary.enabled;

@@ -106,7 +106,7 @@ const testNode = new AudioWorkletNode(audioContext, 'test-processor', {
 
 The console output will be as follows:
 
-```js
+```
 > 1 // AudioWorkletNode options.numberOfInputs set to default
 > Map(2) {1 => "one", 2 => "two"} // A cloned map under someUsefulVariable
 ```

@@ -67,7 +67,7 @@ properties:
 
 ```js
 const publicKey = {
-  challenge: /* from the server */,
+  challenge: new Uint8Array([21, 31, 105 /* 29 more random bytes generated by the server */]),
   rp: {
     name: "Example CORP",
     id  : "login.example.com"

@@ -54,7 +54,7 @@ lexicographical order. Their values may be :
 
 ```js
 const publicKey = {
-  challenge: /* from the server */,
+  challenge: new Uint8Array([21, 31, 105 /* 29 more random bytes generated by the server */]),
   rp: {
     name: "Example CORP",
     id  : "login.example.com"

@@ -38,7 +38,7 @@ This interface inherits from {{domxref("AuthenticatorResponse")}}.
 
 ```js
 const publicKey = {
-  challenge: /* from the server */,
+  challenge: new Uint8Array([21, 31, 105 /* 29 more random bytes generated by the server */]),
   rp: {
     name: "Example CORP",
     id  : "login.example.com"

@@ -55,7 +55,7 @@ navigator.credentials.get({ "publicKey": options })
 
 ```js
 const publicKey = {
-  challenge: /* from the server */,
+  challenge: new Uint8Array([21, 31, 105 /* 29 more random bytes generated by the server */]),
   rp: {
     name: "Example CORP",
     id  : "login.example.com"

@@ -40,7 +40,7 @@ The following examples shows how to use `get()` to retrieve a {{domxref("Backgro
 navigator.serviceWorker.ready.then(async (swReg) => {
   const bgFetch = await swReg.backgroundFetch.get('my-fetch');
 });
-my code block
+// my code block
 ```
 
 ## Specifications

@@ -62,11 +62,10 @@ The following example demonstrates updating the UI with a title and image icon o
 
 ```js
 addEventListener('backgroundfetchsuccess', (event) => {
-    event.updateUI({ title: 'Episode 5 ready to listen!', 'icon: {
-      src: "path/to/success.ico",
-      sizes: "16x16 32x32 64x64",
-    }' });
-  }());
+  event.updateUI({ title: 'Episode 5 ready to listen!', icon: {
+    src: "path/to/success.ico",
+    sizes: "16x16 32x32 64x64",
+  }});
 });
 ```
 

@@ -64,7 +64,7 @@ given image. These are iterated over and the barcode data is logged to the conso
 barcodeDetector.detect(imageEl)
   .then(barcodes => {
     barcodes.forEach(barcode => console.log(barcode.rawData));
-  }
+  })
   .catch(err => {
     console.log(err);
   })

@@ -35,7 +35,7 @@ var AudioContext = window.AudioContext || window.webkitAudioContext;
 var audioCtx = new AudioContext();
 // Older webkit/blink browsers require a prefix
 
-…
+// …
 
 console.log(audioCtx.sampleRate);
 ```

@@ -80,7 +80,7 @@ being built. If the value you specify isn't a {{domxref("Blob")}}, [`ArrayBuffer
 or [`String`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String),
 the value is coerced to a string before being appended to the blob.
 
-```js
+```
 void append(
   in ArrayBuffer data
 );
@@ -110,7 +110,7 @@ void append(
 Returns the {{domxref("Blob")}} object that has been constructed using the data passed
 through calls to [`append()`](#append).
 
-```js
+```
 Blob getBlob(
   in DOMString contentType {{optional_inline}}
 );
@@ -133,7 +133,7 @@ starting a new, empty blob.
 
 Returns a {{domxref("File")}} object.
 
-```js
+```
 File getFile(
   in DOMString name,
   [optional] in DOMString contentType

@@ -51,10 +51,9 @@ let gatt = await device.gatt.connect();
 let service = await gatt.getPrimaryService('heart_rate');
 let characteristic = await service.getCharacteristic('heart_rate_measurement');
 if (characteristic.properties.notify) {
-  characteristic.addEventListener('characteristicvaluechanged',
-      function(event) {
+  characteristic.addEventListener('characteristicvaluechanged', async function(event) {
     console.log(`Received heart rate measurement: ${event.target.value}`);
-  }
+  });
   await characteristic.startNotifications();
 }
 ```

@@ -66,6 +66,7 @@ self.addEventListener('install', function(event) {
       ]);
     })
   );
+});
 ```
 
 ## Specifications

@@ -100,8 +100,8 @@ In WebKit- and Blink-based browsers, the non-standard and deprecated method
 `ctx.setFillColor()` is implemented in addition to this property.
 
 ```js
-setFillColor(color, optional alpha);
-setFillColor(grayLevel, optional alpha);
+setFillColor(color, /* (optional) */ alpha);
+setFillColor(grayLevel, /* (optional) */ alpha);
 setFillColor(r, g, b, a);
 setFillColor(c, m, y, k, a);
 ```

@@ -103,8 +103,10 @@ In WebKit- and Blink-based browsers, the non-standard and deprecated method
 `ctx.setStrokeColor()` is implemented in addition to this property.
 
 ```js
-setStrokeColor(color, optional alpha);
-setStrokeColor(grayLevel, optional alpha);
+setStrokeColor(color);
+setStrokeColor(color,  alpha);
+setStrokeColor(grayLevel);
+setStrokeColor(grayLevel, alpha);
 setStrokeColor(r, g, b, a);
 setStrokeColor(c, m, y, k, a);
 ```

@@ -97,7 +97,7 @@ In the {{HTMLElement("iframe")}} elements, we have the following JavaScript:
 
 ```js
 const list = document.querySelector('ul');
-const port2;
+let port2;
 
 // Listen for the initial port transfer message
 window.addEventListener('message', initPort);

@@ -31,7 +31,7 @@ level might correspond to the \`Debug\` or \`Verbose\` log level.
 debug(obj1)
 debug(obj1, /* …, */ objN)
 debug(msg)
-debug(msg, subst1, /* …, */ substN])
+debug(msg, subst1, /* …, */ substN)
 ```
 
 ### Parameters

@@ -23,7 +23,7 @@ The **`console.error()`** method outputs an error message to the Web console.
 error(obj1)
 error(obj1, /* …, */ objN)
 error(msg)
-error(msg, subst1, /* …, */ substN])
+error(msg, subst1, /* …, */ substN)
 ```
 
 ### Parameters

@@ -24,7 +24,7 @@ next to these items in the Web console's log.
 info(obj1)
 info(obj1, /* …, */ objN)
 info(msg)
-info(msg, subst1, /* …, */ substN])
+info(msg, subst1, /* …, */ substN)
 ```
 
 ### Parameters

@@ -29,7 +29,7 @@ or more JavaScript objects.
 log(obj1)
 log(obj1, /* …, */ objN)
 log(msg)
-log(msg, subst1, /* …, */ substN])
+log(msg, subst1, /* …, */ substN)
 ```
 
 ### Parameters

@@ -27,7 +27,7 @@ console.
 warn(obj1)
 warn(obj1, /* …, */ objN)
 warn(msg)
-warn(msg, subst1, /* …, */ substN])
+warn(msg, subst1, /* …, */ substN)
 ```
 
 ### Parameters

@@ -31,11 +31,9 @@ The following example demonstrates loading a {{DOMxRef('PaintWorklet')}} from it
 file and does so by feature detection.
 
 ```js
-<script>
-  if ('paintWorklet' in CSS) {
-    CSS.paintWorklet.addModule('checkerboard.js');
-  }
-</script>
+if ('paintWorklet' in CSS) {
+  CSS.paintWorklet.addModule('checkerboard.js');
+}
 ```
 
 ## Specifications

@@ -30,8 +30,8 @@ The stylesheet includes two namespace rules. The first has no prefix the second
 
 ```js
 let myRules = document.styleSheets[0].cssRules;
-console.log(myRules[0].namespaceURI); an empty string ""
-console.log(myRules[1].namespaceURI); "svg"
+console.log(myRules[0].namespaceURI); // an empty string ""
+console.log(myRules[1].namespaceURI); // "svg"
 ```
 
 ## Specifications

@@ -39,9 +39,12 @@ Undefined.
 The following function adds the state `--checked` to a `CustomStateSet`.
 
 ```js
-set checked(flag) {
-  if (flag) {
-    this._internals.states.add('--checked');
+class MyCustomElement extends HTMLElement {
+  set checked(flag) {
+    if (flag) {
+      this._internals.states.add('--checked');
+    }
+  }
 }
 ```
 

@@ -58,14 +58,16 @@ The following function adds and removes the state `--checked` to a `CustomStateS
 The state of the element can be accessed from CSS using the custom state pseudo-class `--checked`.
 
 ```js
-set checked(flag) {
-  if (flag) {
-    this._internals.states.add('--checked');
-  } else {
-    this._internals.states.delete('--checked');
+class MyCustomElement extends HTMLElement {
+  set checked(flag) {
+    if (flag) {
+      this._internals.states.add('--checked');
+    } else {
+      this._internals.states.delete('--checked');
+    }
+
+    console.log(this._internals.states.has('--checked'));
   }
-
-  console.log(this._internals.states.has('--checked'));
 }
 ```
 

@@ -49,7 +49,7 @@ This example shows the use of the {{domxref("DataTransfer")}} object's
 {{domxref("DataTransfer.setData","setData()")}} and
 {{domxref("DataTransfer.clearData","clearData()")}} methods.
 
-```js
+```html
 <!DOCTYPE html>
 <html lang=en>
 <title>Examples of DataTransfer's setData(), getData() and clearData()</title>

@@ -65,7 +65,7 @@ default drag image.
 
 [demo](https://codepen.io/webgeeker/full/KBzrxE/)
 
-```js
+```html
 <!DOCTYPE html>
 <html lang=en>
 <title>Example of DataTransfer.setDragImage()</title>

@@ -33,7 +33,7 @@ will be the string `Files`.
 This example shows the use of the `types` and
 {{domxref("DataTransfer.items","items")}} properties.
 
-```js
+```html
 <!DOCTYPE html>
 <html lang=en>
 <title>Examples of DataTransfer.{types,items} properties</title>

@@ -89,7 +89,7 @@ Alternatively, the script can listen for the message using [`addEventListener()`
 self.addEventListener('message', function(e) {
   result.textContent = e.data;
   console.log('Message received from worker');
-}
+});
 ```
 
 Notice how in the main script, `onmessage` has to be called on `myWorker`, whereas inside the worker script you just need `onmessage` because the worker is effectively the global scope ({{domxref("DedicatedWorkerGlobalScope")}}).

@@ -16,7 +16,7 @@ The **`queryCommandState()`** method will tell you if the current selection has
 ## Syntax
 
 ```js
-queryCommandState(String command)
+queryCommandState(command)
 ```
 
 ### Parameters

@@ -33,7 +33,7 @@ document).
 
 ## Examples
 
-```js
+```html
 <!DOCTYPE html>
 <html>
 <head>

@@ -94,7 +94,7 @@ See also the [DOM chapter of the XUL Tutorial](/en-US/docs/XUL_Tutorial/Document
 
 You can automate the creation of a DOM tree using a [JXON reverse algorithm](/en-US/docs/JXON#jxon_reverse_algorithms) in association with the following JSON representation:
 
-```js
+```json
 {
   "people": {
     "person": [{