fix: syntax errors in JS example sections (v5) (mdn#18442)

* syntax fixes

* fix remaining syntax errors

* Adapt syntax box

Co-authored-by: Jean-Yves Perrier <[email protected]>

files/en-us/web/api/animation/finish/index.md

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

files/en-us/web/api/audiobuffersourcenode/buffer/index.md

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

files/en-us/web/api/audionode/index.md

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

files/en-us/web/api/audiotrack/enabled/index.md

@@ -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;

files/en-us/web/api/audioworkletprocessor/audioworkletprocessor/index.md

@@ -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
 ```

files/en-us/web/api/authenticatorattestationresponse/attestationobject/index.md

@@ -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"

files/en-us/web/api/authenticatorattestationresponse/gettransports/index.md

@@ -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"

files/en-us/web/api/authenticatorattestationresponse/index.md

@@ -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"

files/en-us/web/api/authenticatorresponse/index.md

@@ -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"

files/en-us/web/api/backgroundfetchmanager/get/index.md

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

files/en-us/web/api/backgroundfetchupdateuievent/updateui/index.md

@@ -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",
+  }});
 });
 ```
 

files/en-us/web/api/barcodedetector/detect/index.md

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

files/en-us/web/api/baseaudiocontext/samplerate/index.md

@@ -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);
 ```

files/en-us/web/api/blobbuilder/index.md

@@ -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
 );

files/en-us/web/api/bluetoothcharacteristicproperties/index.md

@@ -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();
 }
 ```

files/en-us/web/api/cachestorage/open/index.md

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

files/en-us/web/api/canvasrenderingcontext2d/fillstyle/index.md

@@ -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);
 ```

files/en-us/web/api/canvasrenderingcontext2d/strokestyle/index.md

@@ -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);
 ```

files/en-us/web/api/channel_messaging_api/using_channel_messaging/index.md

@@ -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);

files/en-us/web/api/console/debug/index.md

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

files/en-us/web/api/console/error/index.md

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

files/en-us/web/api/console/info/index.md

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

files/en-us/web/api/console/log/index.md

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

files/en-us/web/api/console/warn/index.md

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

files/en-us/web/api/css/paintworklet/index.md

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

files/en-us/web/api/cssnamespacerule/prefix/index.md

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

files/en-us/web/api/customstateset/add/index.md

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

files/en-us/web/api/customstateset/index.md

@@ -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'));
 }
 ```
 

files/en-us/web/api/datatransfer/setdata/index.md

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

files/en-us/web/api/datatransfer/setdragimage/index.md

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

files/en-us/web/api/datatransfer/types/index.md

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

files/en-us/web/api/dedicatedworkerglobalscope/message_event/index.md

@@ -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")}}).

files/en-us/web/api/document/querycommandstate/index.md

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

files/en-us/web/api/document/title/index.md

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

files/en-us/web/api/document_object_model/how_to_create_a_dom_tree/index.md

@@ -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": [{

files/en-us/web/api/dompointreadonly/index.md

@@ -25,19 +25,19 @@ There are two ways to create a new `DOMPointReadOnly` instance. First, you can u
 
 ```js
 /* 2D */
-const point = new DOMPointReadOnly(50, 50);
+const point2D = new DOMPointReadOnly(50, 50);
 
 /* 3D */
-const point = new DOMPointReadOnly(50, 50, 25);
+const point3D = new DOMPointReadOnly(50, 50, 25);
 
 /* 3D with perspective */
-const point = new DOMPointReadOnly(100, 100, 100, 1.0);
+const point3DPerspective = new DOMPointReadOnly(100, 100, 100, 1.0);
 ```
 
 The other option is to use the static {{domxref("DOMPointReadOnly.fromPoint()")}} method:
 
 ```js
-const point = DOMPointReadOnly.fromPoint({x: 100, y: 100, z: 50; w: 1.0});
+const point = DOMPointReadOnly.fromPoint({x: 100, y: 100, z: 50, w: 1.0});
 ```
 
 ## Constructor