From eb56910622ab458835e1abcfd181209a846204e3 Mon Sep 17 00:00:00 2001 From: Lion Ralfs Date: Wed, 27 Jul 2022 23:25:45 +0200 Subject: [PATCH 1/5] no more vars in Web/API * See #16662 * See #10389 * See https://github.com/orgs/mdn/discussions/143 * Mostly automated via my ESLint setup, using the rules 'no-var' and 'prefer-const' --- .../api/baseaudiocontext/currenttime/index.md | 4 +- .../api/baseaudiocontext/destination/index.md | 8 ++-- .../api/baseaudiocontext/listener/index.md | 6 +-- .../api/baseaudiocontext/samplerate/index.md | 4 +- .../beforeinstallpromptevent/prompt/index.md | 2 +- .../web/api/biquadfilternode/detune/index.md | 12 ++--- .../api/biquadfilternode/frequency/index.md | 12 ++--- .../web/api/biquadfilternode/gain/index.md | 12 ++--- .../en-us/web/api/biquadfilternode/q/index.md | 12 ++--- .../web/api/biquadfilternode/type/index.md | 12 ++--- .../api/bluetooth/getavailability/index.md | 2 +- .../web/api/bluetooth/getdevices/index.md | 2 +- .../characteristic/index.md | 2 +- .../broadcastchannel/index.md | 2 +- .../web/api/broadcastchannel/close/index.md | 2 +- .../bytelengthqueuingstrategy/index.md | 2 +- .../api/bytelengthqueuingstrategy/index.md | 2 +- .../bytelengthqueuingstrategy/size/index.md | 2 +- files/en-us/web/api/cache/put/index.md | 4 +- .../tutorial/advanced_animations/index.md | 48 +++++++++---------- .../tutorial/optimizing_canvas/index.md | 14 +++--- .../canvas/index.md | 6 +-- .../requestframe/index.md | 4 +- .../canvasrenderingcontext2d/canvas/index.md | 4 +- .../createconicgradient/index.md | 6 +-- .../createlineargradient/index.md | 6 +-- .../createradialgradient/index.md | 6 +-- .../direction/index.md | 4 +- .../linejoin/index.md | 4 +- .../miterlimit/index.md | 12 ++--- .../strokestyle/index.md | 6 +-- .../channelmergernode/index.md | 6 +-- .../channelsplitternode/index.md | 6 +-- .../web/api/clipboarditem/gettype/index.md | 2 +- files/en-us/web/api/console/table/index.md | 18 +++---- .../contactsmanager/getproperties/index.md | 2 +- .../contentindexevent/index.md | 4 +- .../countqueuingstrategy/index.md | 2 +- .../web/api/countqueuingstrategy/index.md | 2 +- .../api/countqueuingstrategy/size/index.md | 2 +- files/en-us/web/api/css/escape/index.md | 4 +- .../index.md | 2 +- .../cssprimitivevalue/getfloatvalue/index.md | 4 +- .../cssprimitivevalue/getrectvalue/index.md | 4 +- .../getrgbcolorvalue/index.md | 4 +- .../cssprimitivevalue/getstringvalue/index.md | 4 +- .../cssprimitivevalue/primitivetype/index.md | 4 +- .../getpropertycssvalue/index.md | 4 +- .../getpropertypriority/index.md | 4 +- .../web/api/cssstyledeclaration/item/index.md | 6 +-- .../msgetpropertyenabled/index.md | 2 +- .../msputpropertyenabled/index.md | 2 +- .../cssstyledeclaration/parentrule/index.md | 4 +- .../removeproperty/index.md | 4 +- .../web/api/cssstylesheet/insertrule/index.md | 6 +-- files/en-us/web/api/cssvalue/csstext/index.md | 4 +- .../web/api/cssvalue/cssvaluetype/index.md | 4 +- .../getasfilesystemhandle/index.md | 2 +- .../dedicatedworkerglobalscope/name/index.md | 2 +- .../en-us/web/api/device_memory_api/index.md | 2 +- .../web/api/document/createattribute/index.md | 4 +- .../api/document/createattributens/index.md | 4 +- .../api/document/createcdatasection/index.md | 4 +- .../web/api/document/createcomment/index.md | 4 +- .../web/api/document/createevent/index.md | 2 +- .../createprocessinginstruction/index.md | 4 +- .../web/api/document/createtouch/index.md | 6 +-- .../web/api/document/createtouchlist/index.md | 12 ++--- .../api/document/createtreewalker/index.md | 6 +-- files/en-us/web/api/document/doctype/index.md | 2 +- .../api/document/elementsfrompoint/index.md | 2 +- .../en-us/web/api/document/evaluate/index.md | 6 +-- .../api/document/getelementsbyname/index.md | 2 +- files/en-us/web/api/document/images/index.md | 4 +- .../web/api/document/lastmodified/index.md | 2 +- .../document/mozsyntheticdocument/index.md | 2 +- .../document/msthumbnailclick_event/index.md | 2 +- .../api/document/querycommandenabled/index.md | 2 +- .../document/querycommandsupported/index.md | 2 +- .../web/api/document/queryselector/index.md | 6 +-- .../web/api/document/registerelement/index.md | 4 +- .../api/document/scrollingelement/index.md | 2 +- .../how_to_create_a_dom_tree/index.md | 18 +++---- .../createdocumenttype/index.md | 4 +- .../web/api/dommatrix/dommatrix/index.md | 16 +++---- .../en-us/web/api/dompoint/dompoint/index.md | 4 +- .../en-us/web/api/dompoint/frompoint/index.md | 4 +- .../dompointreadonly/index.md | 6 +-- .../web/api/dompointreadonly/tojson/index.md | 4 +- .../dynamicscompressornode/attack/index.md | 4 +- .../api/dynamicscompressornode/knee/index.md | 4 +- .../api/dynamicscompressornode/ratio/index.md | 4 +- .../dynamicscompressornode/reduction/index.md | 6 +-- .../dynamicscompressornode/release/index.md | 4 +- .../dynamicscompressornode/threshold/index.md | 4 +- .../element/fullscreenchange_event/index.md | 2 +- .../element/getboundingclientrect/index.md | 4 +- .../element/getelementsbyclassname/index.md | 10 ++-- .../web/api/element/hasattribute/index.md | 2 +- .../web/api/element/hasattributens/index.md | 2 +- 100 files changed, 263 insertions(+), 263 deletions(-) diff --git a/files/en-us/web/api/baseaudiocontext/currenttime/index.md b/files/en-us/web/api/baseaudiocontext/currenttime/index.md index 8b8a2af995ec19d..7c7e9e64078449c 100644 --- a/files/en-us/web/api/baseaudiocontext/currenttime/index.md +++ b/files/en-us/web/api/baseaudiocontext/currenttime/index.md @@ -25,8 +25,8 @@ A floating point number. ## Examples ```js -var AudioContext = window.AudioContext || window.webkitAudioContext; -var audioCtx = new AudioContext(); +const AudioContext = window.AudioContext || window.webkitAudioContext; +const audioCtx = new AudioContext(); // Older webkit/blink browsers require a prefix // … diff --git a/files/en-us/web/api/baseaudiocontext/destination/index.md b/files/en-us/web/api/baseaudiocontext/destination/index.md index 44f5acf8ab49ca8..6714764f3807f75 100644 --- a/files/en-us/web/api/baseaudiocontext/destination/index.md +++ b/files/en-us/web/api/baseaudiocontext/destination/index.md @@ -29,12 +29,12 @@ An {{ domxref("AudioDestinationNode") }}. > Demos on the [MDN GitHub repo](https://github.com/mdn/), like [voice-change-o-matic](https://github.com/mdn/voice-change-o-matic). ```js -var AudioContext = window.AudioContext || window.webkitAudioContext; -var audioCtx = new AudioContext(); +const AudioContext = window.AudioContext || window.webkitAudioContext; +const audioCtx = new AudioContext(); // Older webkit/blink browsers require a prefix -var oscillatorNode = audioCtx.createOscillator(); -var gainNode = audioCtx.createGain(); +const oscillatorNode = audioCtx.createOscillator(); +const gainNode = audioCtx.createGain(); oscillatorNode.connect(gainNode); gainNode.connect(audioCtx.destination); diff --git a/files/en-us/web/api/baseaudiocontext/listener/index.md b/files/en-us/web/api/baseaudiocontext/listener/index.md index 799a93cf7ae26b6..5754ce6e1d28cae 100644 --- a/files/en-us/web/api/baseaudiocontext/listener/index.md +++ b/files/en-us/web/api/baseaudiocontext/listener/index.md @@ -28,13 +28,13 @@ An {{ domxref("AudioListener") }} object. > **Note:** for a full Web Audio spatialization example, see our [panner-node](https://github.com/mdn/webaudio-examples/tree/master/panner-node) demo. ```js -var AudioContext = window.AudioContext || window.webkitAudioContext; -var audioCtx = new AudioContext(); +const AudioContext = window.AudioContext || window.webkitAudioContext; +const audioCtx = new AudioContext(); // Older webkit/blink browsers require a prefix // … -var myListener = audioCtx.listener; +const myListener = audioCtx.listener; ``` ## Specifications diff --git a/files/en-us/web/api/baseaudiocontext/samplerate/index.md b/files/en-us/web/api/baseaudiocontext/samplerate/index.md index a4a375449f35347..96f1a0d96f2cbae 100644 --- a/files/en-us/web/api/baseaudiocontext/samplerate/index.md +++ b/files/en-us/web/api/baseaudiocontext/samplerate/index.md @@ -31,8 +31,8 @@ second. > `audioCtx.sampleRate` into your browser console. ```js -var AudioContext = window.AudioContext || window.webkitAudioContext; -var audioCtx = new AudioContext(); +const AudioContext = window.AudioContext || window.webkitAudioContext; +const audioCtx = new AudioContext(); // Older webkit/blink browsers require a prefix // … diff --git a/files/en-us/web/api/beforeinstallpromptevent/prompt/index.md b/files/en-us/web/api/beforeinstallpromptevent/prompt/index.md index a1930bd5903430c..bc5e8881690f2f9 100644 --- a/files/en-us/web/api/beforeinstallpromptevent/prompt/index.md +++ b/files/en-us/web/api/beforeinstallpromptevent/prompt/index.md @@ -32,7 +32,7 @@ An empty {{jsxref("Promise")}}. ## Examples ```js -var isTooSoon = true; +let isTooSoon = true; window.addEventListener("beforeinstallprompt", function(e) { if (isTooSoon) { e.preventDefault(); // Prevents prompt display diff --git a/files/en-us/web/api/biquadfilternode/detune/index.md b/files/en-us/web/api/biquadfilternode/detune/index.md index 3f0d3c38ba2de0e..312ff1179160ba5 100644 --- a/files/en-us/web/api/biquadfilternode/detune/index.md +++ b/files/en-us/web/api/biquadfilternode/detune/index.md @@ -26,14 +26,14 @@ An [a-rate](/en-US/docs/Web/API/AudioParam#a-rate) {{domxref("AudioParam")}}. The following example shows basic usage of an AudioContext to create a Biquad filter node. For a complete working example, check out our [voice-change-o-matic](https://mdn.github.io/voice-change-o-matic/) demo (look at the [source code](https://github.com/mdn/voice-change-o-matic) too). ```js -var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); //set up the different audio nodes we will use for the app -var analyser = audioCtx.createAnalyser(); -var distortion = audioCtx.createWaveShaper(); -var gainNode = audioCtx.createGain(); -var biquadFilter = audioCtx.createBiquadFilter(); -var convolver = audioCtx.createConvolver(); +const analyser = audioCtx.createAnalyser(); +const distortion = audioCtx.createWaveShaper(); +const gainNode = audioCtx.createGain(); +const biquadFilter = audioCtx.createBiquadFilter(); +const convolver = audioCtx.createConvolver(); // connect the nodes together diff --git a/files/en-us/web/api/biquadfilternode/frequency/index.md b/files/en-us/web/api/biquadfilternode/frequency/index.md index 8cef5c28b4f0fcc..cc9bc8371bd2235 100644 --- a/files/en-us/web/api/biquadfilternode/frequency/index.md +++ b/files/en-us/web/api/biquadfilternode/frequency/index.md @@ -28,14 +28,14 @@ An {{domxref("AudioParam")}}. The following example shows basic usage of an AudioContext to create a Biquad filter node. For a complete working example, check out our [voice-change-o-matic](https://mdn.github.io/voice-change-o-matic/) demo (look at the [source code](https://github.com/mdn/voice-change-o-matic) too). ```js -var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); //set up the different audio nodes we will use for the app -var analyser = audioCtx.createAnalyser(); -var distortion = audioCtx.createWaveShaper(); -var gainNode = audioCtx.createGain(); -var biquadFilter = audioCtx.createBiquadFilter(); -var convolver = audioCtx.createConvolver(); +const analyser = audioCtx.createAnalyser(); +const distortion = audioCtx.createWaveShaper(); +const gainNode = audioCtx.createGain(); +const biquadFilter = audioCtx.createBiquadFilter(); +const convolver = audioCtx.createConvolver(); // connect the nodes together diff --git a/files/en-us/web/api/biquadfilternode/gain/index.md b/files/en-us/web/api/biquadfilternode/gain/index.md index 7bd2c05412415ec..e8d3f0607703e2a 100644 --- a/files/en-us/web/api/biquadfilternode/gain/index.md +++ b/files/en-us/web/api/biquadfilternode/gain/index.md @@ -30,14 +30,14 @@ An {{domxref("AudioParam")}}. The following example shows basic usage of an AudioContext to create a Biquad filter node. For a complete working example, check out our [voice-change-o-matic](https://mdn.github.io/voice-change-o-matic/) demo (look at the [source code](https://github.com/mdn/voice-change-o-matic) too). ```js -var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); //set up the different audio nodes we will use for the app -var analyser = audioCtx.createAnalyser(); -var distortion = audioCtx.createWaveShaper(); -var gainNode = audioCtx.createGain(); -var biquadFilter = audioCtx.createBiquadFilter(); -var convolver = audioCtx.createConvolver(); +const analyser = audioCtx.createAnalyser(); +const distortion = audioCtx.createWaveShaper(); +const gainNode = audioCtx.createGain(); +const biquadFilter = audioCtx.createBiquadFilter(); +const convolver = audioCtx.createConvolver(); // connect the nodes together diff --git a/files/en-us/web/api/biquadfilternode/q/index.md b/files/en-us/web/api/biquadfilternode/q/index.md index 6e4e6bff4e6432a..932916b5ca94745 100644 --- a/files/en-us/web/api/biquadfilternode/q/index.md +++ b/files/en-us/web/api/biquadfilternode/q/index.md @@ -28,14 +28,14 @@ An {{domxref("AudioParam")}}. The following example shows basic usage of an AudioContext to create a Biquad filter node. For a complete working example, check out our [voice-change-o-matic](https://mdn.github.io/voice-change-o-matic/) demo (look at the [source code](https://github.com/mdn/voice-change-o-matic) too). ```js -var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); //set up the different audio nodes we will use for the app -var analyser = audioCtx.createAnalyser(); -var distortion = audioCtx.createWaveShaper(); -var gainNode = audioCtx.createGain(); -var biquadFilter = audioCtx.createBiquadFilter(); -var convolver = audioCtx.createConvolver(); +const analyser = audioCtx.createAnalyser(); +const distortion = audioCtx.createWaveShaper(); +const gainNode = audioCtx.createGain(); +const biquadFilter = audioCtx.createBiquadFilter(); +const convolver = audioCtx.createConvolver(); // connect the nodes together diff --git a/files/en-us/web/api/biquadfilternode/type/index.md b/files/en-us/web/api/biquadfilternode/type/index.md index ea946e874173a84..54837f044f8a25b 100644 --- a/files/en-us/web/api/biquadfilternode/type/index.md +++ b/files/en-us/web/api/biquadfilternode/type/index.md @@ -168,14 +168,14 @@ A string (enum) representing a [BiquadFilterType](https://webaudio.github.io/web The following example shows basic usage of an AudioContext to create a Biquad filter node. For a complete working example, check out our [voice-change-o-matic](https://mdn.github.io/voice-change-o-matic/) demo (look at the [source code](https://github.com/mdn/voice-change-o-matic) too). ```js -var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); //set up the different audio nodes we will use for the app -var analyser = audioCtx.createAnalyser(); -var distortion = audioCtx.createWaveShaper(); -var gainNode = audioCtx.createGain(); -var biquadFilter = audioCtx.createBiquadFilter(); -var convolver = audioCtx.createConvolver(); +const analyser = audioCtx.createAnalyser(); +const distortion = audioCtx.createWaveShaper(); +const gainNode = audioCtx.createGain(); +const biquadFilter = audioCtx.createBiquadFilter(); +const convolver = audioCtx.createConvolver(); // connect the nodes together diff --git a/files/en-us/web/api/bluetooth/getavailability/index.md b/files/en-us/web/api/bluetooth/getavailability/index.md index b2dfaa5c79f22d1..ccebcc86df9d108 100644 --- a/files/en-us/web/api/bluetooth/getavailability/index.md +++ b/files/en-us/web/api/bluetooth/getavailability/index.md @@ -21,7 +21,7 @@ The **`getAvailability()`** method of the {{DOMxRef("Bluetooth")}} interface ret ## Syntax ```js -var readerPromise = Bluetooth.getAvailability(); +const readerPromise = Bluetooth.getAvailability(); ``` ### Parameters diff --git a/files/en-us/web/api/bluetooth/getdevices/index.md b/files/en-us/web/api/bluetooth/getdevices/index.md index a5f8aa72bcb4dd1..85224ab8835bdb7 100644 --- a/files/en-us/web/api/bluetooth/getdevices/index.md +++ b/files/en-us/web/api/bluetooth/getdevices/index.md @@ -23,7 +23,7 @@ permission prompts. ## Syntax ```js -var readerPromise = Bluetooth.getDevices(); +const readerPromise = Bluetooth.getDevices(); ``` ### Parameters diff --git a/files/en-us/web/api/bluetoothremotegattdescriptor/characteristic/index.md b/files/en-us/web/api/bluetoothremotegattdescriptor/characteristic/index.md index 6180bddf01ac2f1..920a01cca0ee628 100644 --- a/files/en-us/web/api/bluetoothremotegattdescriptor/characteristic/index.md +++ b/files/en-us/web/api/bluetoothremotegattdescriptor/characteristic/index.md @@ -23,7 +23,7 @@ descriptor belongs to. ## Syntax ```js -var characteristic = BluetoothRemoteGATTCharacteristic.characteristic +const characteristic = BluetoothRemoteGATTCharacteristic.characteristic ``` ### Returns diff --git a/files/en-us/web/api/broadcastchannel/broadcastchannel/index.md b/files/en-us/web/api/broadcastchannel/broadcastchannel/index.md index f1d6bd7ec953700..08d08edaa7e44a5 100644 --- a/files/en-us/web/api/broadcastchannel/broadcastchannel/index.md +++ b/files/en-us/web/api/broadcastchannel/broadcastchannel/index.md @@ -36,7 +36,7 @@ new BroadcastChannel(channelName) ```js // create a new channel listening to the "internal_notification" channel. -var bc = new BroadcastChannel('internal_notification'); +const bc = new BroadcastChannel('internal_notification'); bc.postMessage('New listening connected!'); ``` diff --git a/files/en-us/web/api/broadcastchannel/close/index.md b/files/en-us/web/api/broadcastchannel/close/index.md index afd2b65dcba1260..10c58ab9aa00bf2 100644 --- a/files/en-us/web/api/broadcastchannel/close/index.md +++ b/files/en-us/web/api/broadcastchannel/close/index.md @@ -28,7 +28,7 @@ channel.close(); ```js // Connect to a channel -var bc = new BroadcastChannel('test_channel'); +const bc = new BroadcastChannel('test_channel'); // More operations (like postMessage, …) diff --git a/files/en-us/web/api/bytelengthqueuingstrategy/bytelengthqueuingstrategy/index.md b/files/en-us/web/api/bytelengthqueuingstrategy/bytelengthqueuingstrategy/index.md index a519b5d1803ce79..82e4bb8f686340b 100644 --- a/files/en-us/web/api/bytelengthqueuingstrategy/bytelengthqueuingstrategy/index.md +++ b/files/en-us/web/api/bytelengthqueuingstrategy/bytelengthqueuingstrategy/index.md @@ -55,7 +55,7 @@ const readableStream = new ReadableStream({ } }, queuingStrategy); -var size = queuingStrategy.size(chunk); +const size = queuingStrategy.size(chunk); ``` ## Specifications diff --git a/files/en-us/web/api/bytelengthqueuingstrategy/index.md b/files/en-us/web/api/bytelengthqueuingstrategy/index.md index 709a982c53d2801..a6175e6d8b02b5c 100644 --- a/files/en-us/web/api/bytelengthqueuingstrategy/index.md +++ b/files/en-us/web/api/bytelengthqueuingstrategy/index.md @@ -46,7 +46,7 @@ const readableStream = new ReadableStream({ } }, queueingStrategy); -var size = queueingStrategy.size(chunk); +const size = queueingStrategy.size(chunk); ``` ## Specifications diff --git a/files/en-us/web/api/bytelengthqueuingstrategy/size/index.md b/files/en-us/web/api/bytelengthqueuingstrategy/size/index.md index b7fffcfeab995ac..1494fc190dac43a 100644 --- a/files/en-us/web/api/bytelengthqueuingstrategy/size/index.md +++ b/files/en-us/web/api/bytelengthqueuingstrategy/size/index.md @@ -50,7 +50,7 @@ const readableStream = new ReadableStream({ } }, queuingStrategy); -var size = queueingStrategy.size(chunk); +const size = queueingStrategy.size(chunk); ``` ## Specifications diff --git a/files/en-us/web/api/cache/put/index.md b/files/en-us/web/api/cache/put/index.md index 29362ccb3b5a42d..ae3ff8881429d1f 100644 --- a/files/en-us/web/api/cache/put/index.md +++ b/files/en-us/web/api/cache/put/index.md @@ -81,8 +81,8 @@ like so: 3. If this fails (e.g., because the network is down), return a fallback response. ```js -var response; -var cachedResponse = caches.match(event.request).catch(function() { +let response; +const cachedResponse = caches.match(event.request).catch(function() { return fetch(event.request); }).then(function(r) { response = r; diff --git a/files/en-us/web/api/canvas_api/tutorial/advanced_animations/index.md b/files/en-us/web/api/canvas_api/tutorial/advanced_animations/index.md index 3b2c10339d380fe..206855dfc8074ba 100644 --- a/files/en-us/web/api/canvas_api/tutorial/advanced_animations/index.md +++ b/files/en-us/web/api/canvas_api/tutorial/advanced_animations/index.md @@ -22,10 +22,10 @@ We are going to use a ball for our animation studies, so let's first draw that b As usual, we need a drawing context first. To draw the ball, we will create a `ball` object which contains properties and a `draw()` method to paint it on the canvas. ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); -var ball = { +const ball = { x: 100, y: 100, radius: 25, @@ -49,11 +49,11 @@ Nothing special here, the ball is actually a simple circle and gets drawn with t Now that we have a ball, we are ready to add a basic animation like we have learned in the [last chapter](/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations) of this tutorial. Again, {{domxref("window.requestAnimationFrame()")}} helps us to control the animation. The ball gets moving by adding a velocity vector to the position. For each frame, we also {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} the canvas to remove old circles from prior frames. ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); -var raf; +const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); +let raf; -var ball = { +const ball = { x: 100, y: 100, vx: 5, @@ -114,11 +114,11 @@ Let's see how it looks in action so far. #### JavaScript ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); -var raf; +const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); +let raf; -var ball = { +const ball = { x: 100, y: 100, vx: 5, @@ -191,11 +191,11 @@ This slows down the vertical velocity each frame, so that the ball will just bou #### JavaScript ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); -var raf; +const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); +let raf; -var ball = { +const ball = { x: 100, y: 100, vx: 5, @@ -266,11 +266,11 @@ ctx.fillRect(0, 0, canvas.width, canvas.height); #### JavaScript ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); -var raf; +const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); +let raf; -var ball = { +const ball = { x: 100, y: 100, vx: 5, @@ -337,12 +337,12 @@ To get some control over the ball, we can make it follow our mouse using the [`m #### JavaScript ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); -var raf; -var running = false; +const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); +let raf; +let running = false; -var ball = { +const ball = { x: 100, y: 100, vx: 5, diff --git a/files/en-us/web/api/canvas_api/tutorial/optimizing_canvas/index.md b/files/en-us/web/api/canvas_api/tutorial/optimizing_canvas/index.md index 93c4be3b3570e79..232814ec6ba3711 100644 --- a/files/en-us/web/api/canvas_api/tutorial/optimizing_canvas/index.md +++ b/files/en-us/web/api/canvas_api/tutorial/optimizing_canvas/index.md @@ -81,11 +81,11 @@ If you have a static background image, you can draw it onto a plain {{HTMLElemen [CSS transforms](/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) are faster since they use the GPU. The best case is to not scale the canvas, or have a smaller canvas and scale up rather than a bigger canvas and scale down. ```js -var scaleX = window.innerWidth / canvas.width; -var scaleY = window.innerHeight / canvas.height; +const scaleX = window.innerWidth / canvas.width; +const scaleY = window.innerHeight / canvas.height; -var scaleToFit = Math.min(scaleX, scaleY); -var scaleToCover = Math.max(scaleX, scaleY); +const scaleToFit = Math.min(scaleX, scaleY); +const scaleToCover = Math.max(scaleX, scaleY); stage.style.transformOrigin = '0 0'; //scale from top left stage.style.transform = `scale(${scaleToFit})`; @@ -96,7 +96,7 @@ stage.style.transform = `scale(${scaleToFit})`; If your application uses canvas and doesn't need a transparent backdrop, set the `alpha` option to `false` when creating a drawing context with {{domxref("HTMLCanvasElement.getContext()")}}. This information can be used internally by the browser to optimize rendering. ```js -var ctx = canvas.getContext('2d', { alpha: false }); +const ctx = canvas.getContext('2d', { alpha: false }); ``` ### Scaling for high resolution displays @@ -105,8 +105,8 @@ You may find that canvas items appear blurry on higher-resolution displays. Whil ```js // Get the DPR and size of the canvas -var dpr = window.devicePixelRatio; -var rect = canvas.getBoundingClientRect(); +const dpr = window.devicePixelRatio; +const rect = canvas.getBoundingClientRect(); // Set the "actual" size of the canvas canvas.width = rect.width * dpr; diff --git a/files/en-us/web/api/canvascapturemediastreamtrack/canvas/index.md b/files/en-us/web/api/canvascapturemediastreamtrack/canvas/index.md index a595529b60a6bc3..2dd824cde8f5a7b 100644 --- a/files/en-us/web/api/canvascapturemediastreamtrack/canvas/index.md +++ b/files/en-us/web/api/canvascapturemediastreamtrack/canvas/index.md @@ -29,16 +29,16 @@ frames being captured. ```js // Find the canvas element to capture -var canvasElt = document.getElementsByTagName("canvas")[0]; +const canvasElt = document.getElementsByTagName("canvas")[0]; // Get the stream -var stream = canvasElt.captureStream(25); // 25 FPS +const stream = canvasElt.captureStream(25); // 25 FPS // Do things to the stream // … // Obtain the canvas associated with the stream -var canvas = stream.canvas; +const canvas = stream.canvas; ``` ## Specifications diff --git a/files/en-us/web/api/canvascapturemediastreamtrack/requestframe/index.md b/files/en-us/web/api/canvascapturemediastreamtrack/requestframe/index.md index c799592f8e45521..81483d4b454fbb3 100644 --- a/files/en-us/web/api/canvascapturemediastreamtrack/requestframe/index.md +++ b/files/en-us/web/api/canvascapturemediastreamtrack/requestframe/index.md @@ -51,10 +51,10 @@ mentioned in the spec, this is a likely candidate). ```js // Find the canvas element to capture -var canvasElt = document.getElementsByTagName("canvas")[0]; +const canvasElt = document.getElementsByTagName("canvas")[0]; // Get the stream -var stream = canvasElt.captureStream(25); // 25 FPS +const stream = canvasElt.captureStream(25); // 25 FPS // Send the current state of the canvas as a frame to the stream stream.getVideoTracks()[0].requestFrame(); diff --git a/files/en-us/web/api/canvasrenderingcontext2d/canvas/index.md b/files/en-us/web/api/canvasrenderingcontext2d/canvas/index.md index 99b0b970358cf29..402d1a4e42fa728 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/canvas/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/canvas/index.md @@ -33,8 +33,8 @@ Given this {{HTMLElement("canvas")}} element: `CanvasRenderingContext2D` by using the `canvas` property: ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); ctx.canvas // HTMLCanvasElement ``` diff --git a/files/en-us/web/api/canvasrenderingcontext2d/createconicgradient/index.md b/files/en-us/web/api/canvasrenderingcontext2d/createconicgradient/index.md index b73fbf6ad87645b..8aaf8f9ab3052f9 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/createconicgradient/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/createconicgradient/index.md @@ -55,13 +55,13 @@ This example initializes a conic gradient using the `createConicGradient()` meth #### JavaScript ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); // Create a conic gradient // The start angle is 0 // The center position is 100, 100 -var gradient = ctx.createConicGradient(0, 100, 100); +const gradient = ctx.createConicGradient(0, 100, 100); // Add five color stops gradient.addColorStop(0, "red"); diff --git a/files/en-us/web/api/canvasrenderingcontext2d/createlineargradient/index.md b/files/en-us/web/api/canvasrenderingcontext2d/createlineargradient/index.md index 1a191eff26d13d9..61a2e32069571aa 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/createlineargradient/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/createlineargradient/index.md @@ -72,13 +72,13 @@ context, and is rendered to a filled rectangle. #### JavaScript ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); // Create a linear gradient // The start gradient point is at x=20, y=0 // The end gradient point is at x=220, y=0 -var gradient = ctx.createLinearGradient(20,0, 220,0); +const gradient = ctx.createLinearGradient(20,0, 220,0); // Add three color stops gradient.addColorStop(0, 'green'); diff --git a/files/en-us/web/api/canvasrenderingcontext2d/createradialgradient/index.md b/files/en-us/web/api/canvasrenderingcontext2d/createradialgradient/index.md index 5dd4bafdcec4b1b..9074d0e4890bc9c 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/createradialgradient/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/createradialgradient/index.md @@ -74,13 +74,13 @@ is rendered to a filled rectangle. #### JavaScript ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); // Create a radial gradient // The inner circle is at x=110, y=90, with radius=30 // The outer circle is at x=100, y=100, with radius=70 -var gradient = ctx.createRadialGradient(110,90,30, 100,100,70); +const gradient = ctx.createRadialGradient(110,90,30, 100,100,70); // Add three color stops gradient.addColorStop(0, 'pink'); diff --git a/files/en-us/web/api/canvasrenderingcontext2d/direction/index.md b/files/en-us/web/api/canvasrenderingcontext2d/direction/index.md index c989d62d117117c..b7fae09b0c98896 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/direction/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/direction/index.md @@ -47,8 +47,8 @@ is right-to-left. Note that "Hi!" in `ltr` becomes "!Hi" in `rtl`. #### JavaScript ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); ctx.font = '48px serif'; ctx.fillText('Hi!', 150, 50); diff --git a/files/en-us/web/api/canvasrenderingcontext2d/linejoin/index.md b/files/en-us/web/api/canvasrenderingcontext2d/linejoin/index.md index a346305ff16475e..6a4d6ece279dc0a 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/linejoin/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/linejoin/index.md @@ -88,8 +88,8 @@ The example below draws three different paths, demonstrating each of the three ``` ```js -var ctx = document.getElementById('canvas').getContext('2d'); -var lineJoin = ['round', 'bevel', 'miter']; +const ctx = document.getElementById('canvas').getContext('2d'); +const lineJoin = ['round', 'bevel', 'miter']; ctx.lineWidth = 10; for (let i = 0; i < lineJoin.length; i++) { diff --git a/files/en-us/web/api/canvasrenderingcontext2d/miterlimit/index.md b/files/en-us/web/api/canvasrenderingcontext2d/miterlimit/index.md index f79363bcd2db684..547056c3d5ceb04 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/miterlimit/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/miterlimit/index.md @@ -42,12 +42,12 @@ ctx.stroke(); ``` ```js hidden -var canvas = document.getElementById("canvas"); -var ctx = canvas.getContext("2d"); -var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var edit = document.getElementById("edit"); -var code = textarea.value; +const canvas = document.getElementById("canvas"); +const ctx = canvas.getContext("2d"); +const textarea = document.getElementById("code"); +const reset = document.getElementById("reset"); +const edit = document.getElementById("edit"); +const code = textarea.value; function drawCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); diff --git a/files/en-us/web/api/canvasrenderingcontext2d/strokestyle/index.md b/files/en-us/web/api/canvasrenderingcontext2d/strokestyle/index.md index 2be15f996e7d397..6490127badbb42f 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/strokestyle/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/strokestyle/index.md @@ -45,8 +45,8 @@ This example applies a blue stroke color to a rectangle. #### JavaScript ```js -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); ctx.strokeStyle = 'blue'; ctx.strokeRect(10, 10, 100, 100); @@ -69,7 +69,7 @@ only modify the green and blue values. (The red channel has a fixed value.) ``` ```js -var ctx = document.getElementById('canvas').getContext('2d'); +const ctx = document.getElementById('canvas').getContext('2d'); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { diff --git a/files/en-us/web/api/channelmergernode/channelmergernode/index.md b/files/en-us/web/api/channelmergernode/channelmergernode/index.md index cf32c99499b0e7b..b7464a486cdb91f 100644 --- a/files/en-us/web/api/channelmergernode/channelmergernode/index.md +++ b/files/en-us/web/api/channelmergernode/channelmergernode/index.md @@ -57,13 +57,13 @@ A new {{domxref("ChannelMergerNode")}} object instance. ## Examples ```js -var ac = new AudioContext(); +const ac = new AudioContext(); -var options = { +const options = { numberOfInputs : 2 } -var myMerger = new ChannelMergerNode(ac, options); +const myMerger = new ChannelMergerNode(ac, options); ``` ## Specifications diff --git a/files/en-us/web/api/channelsplitternode/channelsplitternode/index.md b/files/en-us/web/api/channelsplitternode/channelsplitternode/index.md index 3c70b0cfb79d9b8..dc3e82f4c97e428 100644 --- a/files/en-us/web/api/channelsplitternode/channelsplitternode/index.md +++ b/files/en-us/web/api/channelsplitternode/channelsplitternode/index.md @@ -53,13 +53,13 @@ A new {{domxref("ChannelSplitterNode")}} object instance. ## Examples ```js -var ac = new AudioContext(); +const ac = new AudioContext(); -var options = { +const options = { numberOfOutputs : 2 } -var mySplitter = new ChannelSplitterNode(ac, options); +const mySplitter = new ChannelSplitterNode(ac, options); ``` ## Specifications diff --git a/files/en-us/web/api/clipboarditem/gettype/index.md b/files/en-us/web/api/clipboarditem/gettype/index.md index 136385eb8422717..25f0f2428e17ee3 100644 --- a/files/en-us/web/api/clipboarditem/gettype/index.md +++ b/files/en-us/web/api/clipboarditem/gettype/index.md @@ -20,7 +20,7 @@ The **`getType()`** method of the {{domxref("ClipboardItem")}} interface returns ## Syntax ```js -var blob = clipboardItem.getType(type); +const blob = clipboardItem.getType(type); ``` ### Parameters diff --git a/files/en-us/web/api/console/table/index.md b/files/en-us/web/api/console/table/index.md index 53715eaa962ce4f..d9319adca96330b 100644 --- a/files/en-us/web/api/console/table/index.md +++ b/files/en-us/web/api/console/table/index.md @@ -49,7 +49,7 @@ function Person(firstName, lastName) { this.lastName = lastName; } -var me = new Person("John", "Smith"); +const me = new Person("John", "Smith"); console.table(me); ``` @@ -64,7 +64,7 @@ objects, then their elements or properties are enumerated in the row, one per co ```js // an array of arrays -var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]] +const people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]] console.table(people); ``` @@ -78,9 +78,9 @@ function Person(firstName, lastName) { this.lastName = lastName; } -var john = new Person("John", "Smith"); -var jane = new Person("Jane", "Doe"); -var emily = new Person("Emily", "Jones"); +const john = new Person("John", "Smith"); +const jane = new Person("Jane", "Doe"); +const emily = new Person("Emily", "Jones"); console.table([john, jane, emily]); ``` @@ -93,7 +93,7 @@ name. ```js // an object whose properties are objects -var family = {}; +const family = {}; family.mother = new Person("Jane", "Smith"); family.father = new Person("John", "Smith"); @@ -117,9 +117,9 @@ function Person(firstName, lastName) { this.lastName = lastName; } -var john = new Person("John", "Smith"); -var jane = new Person("Jane", "Doe"); -var emily = new Person("Emily", "Jones"); +const john = new Person("John", "Smith"); +const jane = new Person("Jane", "Doe"); +const emily = new Person("Emily", "Jones"); console.table([john, jane, emily], ["firstName"]); ``` diff --git a/files/en-us/web/api/contactsmanager/getproperties/index.md b/files/en-us/web/api/contactsmanager/getproperties/index.md index 6b9f02848296c28..1a95603076d44dd 100644 --- a/files/en-us/web/api/contactsmanager/getproperties/index.md +++ b/files/en-us/web/api/contactsmanager/getproperties/index.md @@ -21,7 +21,7 @@ properties are available. ## Syntax ```js -var ContactProperties = ContactsManager.getProperties(); +const ContactProperties = ContactsManager.getProperties(); ``` ### Parameters diff --git a/files/en-us/web/api/contentindexevent/contentindexevent/index.md b/files/en-us/web/api/contentindexevent/contentindexevent/index.md index 977c17a1448ed7c..7d3632520d2da15 100644 --- a/files/en-us/web/api/contentindexevent/contentindexevent/index.md +++ b/files/en-us/web/api/contentindexevent/contentindexevent/index.md @@ -44,11 +44,11 @@ A new {{domxref("ContentIndexEvent")}} object configured using the given options This examples constructs a new {{domxref('ContentIndexEvent')}} with the relevant id. ```js -var removeData = { +const removeData = { id : 'unique-content-id' } -var ciEvent = new ContentIndexEvent('contentdelete', removeData); +const ciEvent = new ContentIndexEvent('contentdelete', removeData); ciEvent.id; // should return 'unique-content-id' ``` diff --git a/files/en-us/web/api/countqueuingstrategy/countqueuingstrategy/index.md b/files/en-us/web/api/countqueuingstrategy/countqueuingstrategy/index.md index 4a7c01d3c372aa4..619c35e94932001 100644 --- a/files/en-us/web/api/countqueuingstrategy/countqueuingstrategy/index.md +++ b/files/en-us/web/api/countqueuingstrategy/countqueuingstrategy/index.md @@ -55,7 +55,7 @@ const writableStream = new WritableStream({ } }, queuingStrategy); -var size = queuingStrategy.size(); +const size = queuingStrategy.size(); ``` ## Specifications diff --git a/files/en-us/web/api/countqueuingstrategy/index.md b/files/en-us/web/api/countqueuingstrategy/index.md index a0df510785a656f..1c2fc3e6087aa45 100644 --- a/files/en-us/web/api/countqueuingstrategy/index.md +++ b/files/en-us/web/api/countqueuingstrategy/index.md @@ -47,7 +47,7 @@ const writableStream = new WritableStream({ } }, queueingStrategy); -var size = queueingStrategy.size(); +const size = queueingStrategy.size(); ``` ## Specifications diff --git a/files/en-us/web/api/countqueuingstrategy/size/index.md b/files/en-us/web/api/countqueuingstrategy/size/index.md index 0311aeb3db7ccec..498129c72032e96 100644 --- a/files/en-us/web/api/countqueuingstrategy/size/index.md +++ b/files/en-us/web/api/countqueuingstrategy/size/index.md @@ -50,7 +50,7 @@ const writableStream = new WritableStream({ } }, queuingStrategy); -var size = queuingStrategy.size(); +const size = queuingStrategy.size(); ``` ## Specifications diff --git a/files/en-us/web/api/css/escape/index.md b/files/en-us/web/api/css/escape/index.md index f896245ac5f58ec..6d89ea440c499f4 100644 --- a/files/en-us/web/api/css/escape/index.md +++ b/files/en-us/web/api/css/escape/index.md @@ -51,14 +51,14 @@ To escape a string for use as part of a selector, the `escape()` method can be used: ```js -var element = document.querySelector(`#${CSS.escape(id)} > img`); +const element = document.querySelector(`#${CSS.escape(id)} > img`); ``` The `escape()` method can also be used for escaping strings, although it escapes characters that don't strictly need to be escaped: ```js -var element = document.querySelector(`a[href="#${CSS.escape(fragment)}"]`); +const element = document.querySelector(`a[href="#${CSS.escape(fragment)}"]`); ``` ## Specifications diff --git a/files/en-us/web/api/css_object_model/using_dynamic_styling_information/index.md b/files/en-us/web/api/css_object_model/using_dynamic_styling_information/index.md index efb0f8d4548bd68..176fab86a995dc4 100644 --- a/files/en-us/web/api/css_object_model/using_dynamic_styling_information/index.md +++ b/files/en-us/web/api/css_object_model/using_dynamic_styling_information/index.md @@ -142,7 +142,7 @@ The **media** and **type** of the style may or may not be given. Note that you can also change style of an element by getting a reference to it and then use its [`setAttribute`](/en-US/docs/Web/API/Element/setAttribute) method to specify the CSS property and its value. ```js -var el = document.getElementById('some-element'); +const el = document.getElementById('some-element'); el.setAttribute('style', 'background-color:darkblue;'); ``` diff --git a/files/en-us/web/api/cssprimitivevalue/getfloatvalue/index.md b/files/en-us/web/api/cssprimitivevalue/getfloatvalue/index.md index c63d1b60411c2dd..d6e75143c2275c0 100644 --- a/files/en-us/web/api/cssprimitivevalue/getfloatvalue/index.md +++ b/files/en-us/web/api/cssprimitivevalue/getfloatvalue/index.md @@ -87,8 +87,8 @@ A `float` value in the specified unit. ## Examples ```js -var cs = window.getComputedStyle(document.body); -var cssValue = cs.getPropertyCSSValue("margin-top"); +const cs = window.getComputedStyle(document.body); +const cssValue = cs.getPropertyCSSValue("margin-top"); console.log(cssValue.getFloatValue(CSSPrimitiveValue.CSS_CM)); ``` diff --git a/files/en-us/web/api/cssprimitivevalue/getrectvalue/index.md b/files/en-us/web/api/cssprimitivevalue/getrectvalue/index.md index 4abe0eef87cac8e..dc3b42fcaa5ff58 100644 --- a/files/en-us/web/api/cssprimitivevalue/getrectvalue/index.md +++ b/files/en-us/web/api/cssprimitivevalue/getrectvalue/index.md @@ -49,8 +49,8 @@ A {{domxref("Rect")}} object representing the rect value. ## Examples ```js -var cs = window.getComputedStyle(document.getElementById("clippedDiv")); -var cssValue = cs.getPropertyCSSValue("clip"); +const cs = window.getComputedStyle(document.getElementById("clippedDiv")); +const cssValue = cs.getPropertyCSSValue("clip"); console.log(cssValue.getRectValue()); ``` diff --git a/files/en-us/web/api/cssprimitivevalue/getrgbcolorvalue/index.md b/files/en-us/web/api/cssprimitivevalue/getrgbcolorvalue/index.md index 19604e7a14c52d0..6bea8d4fdeefd4c 100644 --- a/files/en-us/web/api/cssprimitivevalue/getrgbcolorvalue/index.md +++ b/files/en-us/web/api/cssprimitivevalue/getrgbcolorvalue/index.md @@ -49,8 +49,8 @@ An {{domxref("RGBColor")}} object representing the color value. ## Examples ```js -var cs = window.getComputedStyle(document.body); -var cssValue = cs.getPropertyCSSValue("color"); +const cs = window.getComputedStyle(document.body); +const cssValue = cs.getPropertyCSSValue("color"); console.log(cssValue.getRGBColorValue()); ``` diff --git a/files/en-us/web/api/cssprimitivevalue/getstringvalue/index.md b/files/en-us/web/api/cssprimitivevalue/getstringvalue/index.md index b58e36b4375fd6e..40dc2adfc171e44 100644 --- a/files/en-us/web/api/cssprimitivevalue/getstringvalue/index.md +++ b/files/en-us/web/api/cssprimitivevalue/getstringvalue/index.md @@ -47,8 +47,8 @@ A `string` value. ## Examples ```js -var cs = window.getComputedStyle(document.body); -var cssValue = cs.getPropertyCSSValue("display"); +const cs = window.getComputedStyle(document.body); +const cssValue = cs.getPropertyCSSValue("display"); console.log(cssValue.getStringValue()); ``` diff --git a/files/en-us/web/api/cssprimitivevalue/primitivetype/index.md b/files/en-us/web/api/cssprimitivevalue/primitivetype/index.md index fc79152e1fcf5cd..84c462ed990612b 100644 --- a/files/en-us/web/api/cssprimitivevalue/primitivetype/index.md +++ b/files/en-us/web/api/cssprimitivevalue/primitivetype/index.md @@ -235,8 +235,8 @@ An `unsigned short` representing the type of the value. Possible values are: ## Examples ```js -var cs = window.getComputedStyle(document.body); -var cssValue = cs.getPropertyCSSValue("color"); +const cs = window.getComputedStyle(document.body); +const cssValue = cs.getPropertyCSSValue("color"); console.log(cssValue.primitiveType); ``` diff --git a/files/en-us/web/api/cssstyledeclaration/getpropertycssvalue/index.md b/files/en-us/web/api/cssstyledeclaration/getpropertycssvalue/index.md index d6de3ca12c69137..4265c654ef80cd8 100644 --- a/files/en-us/web/api/cssstyledeclaration/getpropertycssvalue/index.md +++ b/files/en-us/web/api/cssstyledeclaration/getpropertycssvalue/index.md @@ -46,8 +46,8 @@ The following JavaScript code gets an object containing the computed RGB values the `color` CSS property: ```js -var style = window.getComputedStyle(elem, null); -var rgbObj = style.getPropertyCSSValue('color').getRGBColorValue(); +const style = window.getComputedStyle(elem, null); +const rgbObj = style.getPropertyCSSValue('color').getRGBColorValue(); ``` ## Specifications diff --git a/files/en-us/web/api/cssstyledeclaration/getpropertypriority/index.md b/files/en-us/web/api/cssstyledeclaration/getpropertypriority/index.md index b315692153d697f..5ce6eb05c4dfe1a 100644 --- a/files/en-us/web/api/cssstyledeclaration/getpropertypriority/index.md +++ b/files/en-us/web/api/cssstyledeclaration/getpropertypriority/index.md @@ -37,8 +37,8 @@ The following JavaScript code checks whether `margin` is marked as important in a CSS selector rule: ```js -var declaration = document.styleSheets[0].cssRules[0].style; -var isImportant = declaration.getPropertyPriority('margin') === 'important'; +const declaration = document.styleSheets[0].cssRules[0].style; +const isImportant = declaration.getPropertyPriority('margin') === 'important'; ``` ## Specifications diff --git a/files/en-us/web/api/cssstyledeclaration/item/index.md b/files/en-us/web/api/cssstyledeclaration/item/index.md index 395f05029c4df81..ecada967253842d 100644 --- a/files/en-us/web/api/cssstyledeclaration/item/index.md +++ b/files/en-us/web/api/cssstyledeclaration/item/index.md @@ -37,7 +37,7 @@ A string that is the name of the CSS property at the specified index. JavaScript has a special simpler syntax for obtaining an item from a NodeList by index: ```js -var propertyName = style[index]; +const propertyName = style[index]; ``` ### Exceptions @@ -48,8 +48,8 @@ var propertyName = style[index]; ## Examples ```js -var style = document.getElementById('div1').style; -var propertyName = style.item(1); // or style[1] - returns the second style listed +const style = document.getElementById('div1').style; +const propertyName = style.item(1); // or style[1] - returns the second style listed ``` ## Specifications diff --git a/files/en-us/web/api/cssstyledeclaration/msgetpropertyenabled/index.md b/files/en-us/web/api/cssstyledeclaration/msgetpropertyenabled/index.md index 38a5c703df19d07..2a27e8c88e445e2 100644 --- a/files/en-us/web/api/cssstyledeclaration/msgetpropertyenabled/index.md +++ b/files/en-us/web/api/cssstyledeclaration/msgetpropertyenabled/index.md @@ -18,7 +18,7 @@ This proprietary method is specific to Internet Explorer browser. ### Syntax ```js -var retVal = style.msGetPropertyEnabled(name); +const retVal = style.msGetPropertyEnabled(name); ``` ### Parameters diff --git a/files/en-us/web/api/cssstyledeclaration/msputpropertyenabled/index.md b/files/en-us/web/api/cssstyledeclaration/msputpropertyenabled/index.md index 267f50cc63ac390..0268b133883df55 100644 --- a/files/en-us/web/api/cssstyledeclaration/msputpropertyenabled/index.md +++ b/files/en-us/web/api/cssstyledeclaration/msputpropertyenabled/index.md @@ -18,7 +18,7 @@ This proprietary method is specific to Internet Explorer and Microsoft Edge. ### Syntax ```js -var retval = style.msPutPropertyEnabled(propertyName, true); +const retval = style.msPutPropertyEnabled(propertyName, true); ``` ### Parameters diff --git a/files/en-us/web/api/cssstyledeclaration/parentrule/index.md b/files/en-us/web/api/cssstyledeclaration/parentrule/index.md index 3b0ed3fc9c0e9a5..39f50371b4ab4d5 100644 --- a/files/en-us/web/api/cssstyledeclaration/parentrule/index.md +++ b/files/en-us/web/api/cssstyledeclaration/parentrule/index.md @@ -27,8 +27,8 @@ The following JavaScript code gets the parent CSS style rule from a {{domxref('CSSStyleDeclaration')}}: ```js -var declaration = document.styleSheets[0].rules[0].style; -var rule = declaration.parentRule; +const declaration = document.styleSheets[0].rules[0].style; +const rule = declaration.parentRule; ``` ## Specifications diff --git a/files/en-us/web/api/cssstyledeclaration/removeproperty/index.md b/files/en-us/web/api/cssstyledeclaration/removeproperty/index.md index fe8f97d7007b74a..4ea70755b71bb09 100644 --- a/files/en-us/web/api/cssstyledeclaration/removeproperty/index.md +++ b/files/en-us/web/api/cssstyledeclaration/removeproperty/index.md @@ -40,8 +40,8 @@ The following JavaScript code removes the `background-color` CSS property from a selector rule: ```js -var declaration = document.styleSheets[0].rules[0].style; -var oldValue = declaration.removeProperty('background-color'); +const declaration = document.styleSheets[0].rules[0].style; +const oldValue = declaration.removeProperty('background-color'); ``` ## Specifications diff --git a/files/en-us/web/api/cssstylesheet/insertrule/index.md b/files/en-us/web/api/cssstylesheet/insertrule/index.md index 6f7912b06998752..c7a7b7c405de93d 100644 --- a/files/en-us/web/api/cssstylesheet/insertrule/index.md +++ b/files/en-us/web/api/cssstylesheet/insertrule/index.md @@ -135,16 +135,16 @@ to the default native `insertRule()`. ```js (function(Sheet_proto){ - var originalInsertRule = Sheet_proto.insertRule; + const originalInsertRule = Sheet_proto.insertRule; if (originalInsertRule.length === 2){ // 2 mandatory arguments: (selector, rules) Sheet_proto.insertRule = function(selectorAndRule){ // First, separate the selector from the rule - a: for (var i=0, Len=selectorAndRule.length, isEscaped=0, newCharCode=0; i !== Len; ++i) { + a: for (let i=0, Len=selectorAndRule.length, isEscaped=0, newCharCode=0; i !== Len; ++i) { newCharCode = selectorAndRule.charCodeAt(i); if (!isEscaped && (newCharCode === 123)) { // 123 = "{".charCodeAt(0) // Secondly, find the last closing bracket - var openBracketPos = i, closeBracketPos = -1; + let openBracketPos = i, closeBracketPos = -1; for (; i !== Len; ++i) { newCharCode = selectorAndRule.charCodeAt(i); diff --git a/files/en-us/web/api/cssvalue/csstext/index.md b/files/en-us/web/api/cssvalue/csstext/index.md index 2d0ceee042cb6bd..c445cd29523ff0b 100644 --- a/files/en-us/web/api/cssvalue/csstext/index.md +++ b/files/en-us/web/api/cssvalue/csstext/index.md @@ -31,8 +31,8 @@ A string representing the current CSS property value. ## Examples ```js -var styleDeclaration = document.styleSheets[0].cssRules[0].style; -var cssValue = styleDeclaration.getPropertyCSSValue("color"); +const styleDeclaration = document.styleSheets[0].cssRules[0].style; +const cssValue = styleDeclaration.getPropertyCSSValue("color"); console.log(cssValue.cssText); ``` diff --git a/files/en-us/web/api/cssvalue/cssvaluetype/index.md b/files/en-us/web/api/cssvalue/cssvaluetype/index.md index 554183b6552cebf..7298f6f0847cd4e 100644 --- a/files/en-us/web/api/cssvalue/cssvaluetype/index.md +++ b/files/en-us/web/api/cssvalue/cssvaluetype/index.md @@ -74,8 +74,8 @@ Possible values are: ## Examples ```js -var styleDeclaration = document.styleSheets[0].cssRules[0].style; -var cssValue = styleDeclaration.getPropertyCSSValue("color"); +const styleDeclaration = document.styleSheets[0].cssRules[0].style; +const cssValue = styleDeclaration.getPropertyCSSValue("color"); console.log(cssValue.cssValueType); ``` diff --git a/files/en-us/web/api/datatransferitem/getasfilesystemhandle/index.md b/files/en-us/web/api/datatransferitem/getasfilesystemhandle/index.md index ae96f9ad8d3a925..3b30c1dac215beb 100644 --- a/files/en-us/web/api/datatransferitem/getasfilesystemhandle/index.md +++ b/files/en-us/web/api/datatransferitem/getasfilesystemhandle/index.md @@ -20,7 +20,7 @@ dragged item is a directory. ## Syntax ```js -var handle = DataTransferItem.getAsFileSystemHandle(); +const handle = DataTransferItem.getAsFileSystemHandle(); ``` ### Parameters diff --git a/files/en-us/web/api/dedicatedworkerglobalscope/name/index.md b/files/en-us/web/api/dedicatedworkerglobalscope/name/index.md index 47f2c69f7275d33..614e789882308b9 100644 --- a/files/en-us/web/api/dedicatedworkerglobalscope/name/index.md +++ b/files/en-us/web/api/dedicatedworkerglobalscope/name/index.md @@ -29,7 +29,7 @@ A string. If a worker is created using a constructor with a `name` option: ```js -var myWorker = new Worker("worker.js", { name : "myWorker" }); +const myWorker = new Worker("worker.js", { name : "myWorker" }); ``` the {{domxref("DedicatedWorkerGlobalScope")}} will now have a name of "myWorker", diff --git a/files/en-us/web/api/device_memory_api/index.md b/files/en-us/web/api/device_memory_api/index.md index adadf876b310ebd..f461db676a91048 100644 --- a/files/en-us/web/api/device_memory_api/index.md +++ b/files/en-us/web/api/device_memory_api/index.md @@ -21,7 +21,7 @@ There are two ways to determine the approximate amount of RAM a device has: use You may query the approximate amount of RAM a device has by retrieving {{DOMxRef("Navigator.deviceMemory")}} ```js -var RAM = navigator.deviceMemory; +const RAM = navigator.deviceMemory; ``` ### Client Hints diff --git a/files/en-us/web/api/document/createattribute/index.md b/files/en-us/web/api/document/createattribute/index.md index 39c6d1e4afab4b3..8f0354899c8c34c 100644 --- a/files/en-us/web/api/document/createattribute/index.md +++ b/files/en-us/web/api/document/createattribute/index.md @@ -40,8 +40,8 @@ A {{domxref("Attr")}} node. ## Examples ```js -var node = document.getElementById("div1"); -var a = document.createAttribute("my_attrib"); +const node = document.getElementById("div1"); +const a = document.createAttribute("my_attrib"); a.value = "newVal"; node.setAttributeNode(a); console.log(node.getAttribute("my_attrib")); // "newVal" diff --git a/files/en-us/web/api/document/createattributens/index.md b/files/en-us/web/api/document/createattributens/index.md index 057d67356d1e636..b4baff9817ba166 100644 --- a/files/en-us/web/api/document/createattributens/index.md +++ b/files/en-us/web/api/document/createattributens/index.md @@ -56,8 +56,8 @@ The new {{domxref("Attr")}} node. ## Examples ```js -var node = document.getElementById("svg"); -var a = document.createAttributeNS("http://www.w3.org/2000/svg", "viewBox"); +const node = document.getElementById("svg"); +const a = document.createAttributeNS("http://www.w3.org/2000/svg", "viewBox"); a.value = "0 0 100 100"; node.setAttributeNode(a); console.log(node.getAttribute("viewBox")); // "0 0 100 100" diff --git a/files/en-us/web/api/document/createcdatasection/index.md b/files/en-us/web/api/document/createcdatasection/index.md index d714633c96aca81..a5ea5dfe0d1230b 100644 --- a/files/en-us/web/api/document/createcdatasection/index.md +++ b/files/en-us/web/api/document/createcdatasection/index.md @@ -32,9 +32,9 @@ A [CDATA Section](/en-US/docs/Web/API/CDATASection) node. ## Examples ```js -var docu = new DOMParser().parseFromString('', 'application/xml') +const docu = new DOMParser().parseFromString('', 'application/xml') -var cdata = docu.createCDATASection('Some data & then some'); +const cdata = docu.createCDATASection('Some data & then some'); docu.getElementsByTagName('xml')[0].appendChild(cdata); diff --git a/files/en-us/web/api/document/createcomment/index.md b/files/en-us/web/api/document/createcomment/index.md index 7025078d6761c87..cad266eb32341cc 100644 --- a/files/en-us/web/api/document/createcomment/index.md +++ b/files/en-us/web/api/document/createcomment/index.md @@ -32,8 +32,8 @@ A new {{domxref("Comment")}} object. ## Examples ```js -var docu = new DOMParser().parseFromString('', 'application/xml'); -var comment = docu.createComment('This is a not-so-secret comment in your document'); +const docu = new DOMParser().parseFromString('', 'application/xml'); +const comment = docu.createComment('This is a not-so-secret comment in your document'); docu.getElementsByTagName('xml')[0].appendChild(comment); diff --git a/files/en-us/web/api/document/createevent/index.md b/files/en-us/web/api/document/createevent/index.md index 10bd0a4fe7871e0..fde4016ec87cbba 100644 --- a/files/en-us/web/api/document/createevent/index.md +++ b/files/en-us/web/api/document/createevent/index.md @@ -37,7 +37,7 @@ An [Event](/en-US/docs/Web/API/Event) object. ```js // Create the event. -var event = document.createEvent('Event'); +const event = document.createEvent('Event'); // Define that the event name is 'build'. event.initEvent('build', true, true); diff --git a/files/en-us/web/api/document/createprocessinginstruction/index.md b/files/en-us/web/api/document/createprocessinginstruction/index.md index bffda297e12e88d..e8dc9b25b6fdade 100644 --- a/files/en-us/web/api/document/createprocessinginstruction/index.md +++ b/files/en-us/web/api/document/createprocessinginstruction/index.md @@ -45,8 +45,8 @@ None ({{jsxref("undefined")}}). ## Examples ```js -var doc = new DOMParser().parseFromString('', 'application/xml'); -var pi = doc.createProcessingInstruction('xml-stylesheet', 'href="mycss.css" type="text/css"'); +const doc = new DOMParser().parseFromString('', 'application/xml'); +const pi = doc.createProcessingInstruction('xml-stylesheet', 'href="mycss.css" type="text/css"'); doc.insertBefore(pi, doc.firstChild); diff --git a/files/en-us/web/api/document/createtouch/index.md b/files/en-us/web/api/document/createtouch/index.md index ab401ea8bf9c5ff..50182437f071135 100644 --- a/files/en-us/web/api/document/createtouch/index.md +++ b/files/en-us/web/api/document/createtouch/index.md @@ -76,10 +76,10 @@ In following code snippet, two {{DOMxRef("Touch")}} objects are created for the `target` element. ```js -var target = document.getElementById("target"); +const target = document.getElementById("target"); -var touch1 = document.createTouch(window, target, 1, 15, 20, 35, 40); -var touch2 = document.createTouch(window, target, 2, 25, 30, 45, 50); +const touch1 = document.createTouch(window, target, 1, 15, 20, 35, 40); +const touch2 = document.createTouch(window, target, 2, 25, 30, 45, 50); ``` ## Specifications diff --git a/files/en-us/web/api/document/createtouchlist/index.md b/files/en-us/web/api/document/createtouchlist/index.md index 4b9573267178580..b72f72b57371aab 100644 --- a/files/en-us/web/api/document/createtouchlist/index.md +++ b/files/en-us/web/api/document/createtouchlist/index.md @@ -48,20 +48,20 @@ In following code snippet, some {{DOMxRef("Touch")}} objects are created for the {{DOMxRef("TouchList")}} objects. ```js -var target = document.getElementById("target"); +const target = document.getElementById("target"); // Create some touch points -var touch1 = document.createTouch(window, target, 1, 15, 20, 35, 40); -var touch2 = document.createTouch(window, target, 2, 25, 30, 45, 50); +const touch1 = document.createTouch(window, target, 1, 15, 20, 35, 40); +const touch2 = document.createTouch(window, target, 2, 25, 30, 45, 50); // Create an empty TouchList objects -var list0 = document.createTouchList(); +const list0 = document.createTouchList(); // Create a TouchList with only one Touch object -var list1 = document.createTouchList(touch1); +const list1 = document.createTouchList(touch1); // Create a list with two Touch objects -var list2 = document.createTouchList(touch1, touch2); +const list2 = document.createTouchList(touch1, touch2); ``` ## Specifications diff --git a/files/en-us/web/api/document/createtreewalker/index.md b/files/en-us/web/api/document/createtreewalker/index.md index ba70f4e1f9ff7f6..3ee73489f42e071 100644 --- a/files/en-us/web/api/document/createtreewalker/index.md +++ b/files/en-us/web/api/document/createtreewalker/index.md @@ -71,14 +71,14 @@ that is created to advance through the nodes (now all elements) and push them in array. ```js -var treeWalker = document.createTreeWalker( +const treeWalker = document.createTreeWalker( document.body, NodeFilter.SHOW_ELEMENT, { acceptNode(node) { return NodeFilter.FILTER_ACCEPT; } } ); -var nodeList = []; -var currentNode = treeWalker.currentNode; +const nodeList = []; +let currentNode = treeWalker.currentNode; while(currentNode) { nodeList.push(currentNode); diff --git a/files/en-us/web/api/document/doctype/index.md b/files/en-us/web/api/document/doctype/index.md index 7dbe7f06e28d92a..ba10a6881975abb 100644 --- a/files/en-us/web/api/document/doctype/index.md +++ b/files/en-us/web/api/document/doctype/index.md @@ -26,7 +26,7 @@ A {{domxref("DocumentType")}} object. ## Examples ```js -var doctypeObj = document.doctype; +const doctypeObj = document.doctype; console.log(`doctypeObj.name: ${doctypeObj.name}`); console.log(`doctypeObj.internalSubset: ${doctypeObj.internalSubset}`); diff --git a/files/en-us/web/api/document/elementsfrompoint/index.md b/files/en-us/web/api/document/elementsfrompoint/index.md index 84fca163e2cbc3f..a0ff8035e6c5a83 100644 --- a/files/en-us/web/api/document/elementsfrompoint/index.md +++ b/files/en-us/web/api/document/elementsfrompoint/index.md @@ -55,7 +55,7 @@ An array of {{domxref('Element')}} objects, ordered from the topmost to the bott let output = document.getElementById("output"); if (document.elementsFromPoint) { let elements = document.elementsFromPoint(30, 20); - for (var i = 0; i < elements.length; i++) { + for (let i = 0; i < elements.length; i++) { output.textContent += elements[i].localName; if (i < elements.length - 1) { output.textContent += " < "; diff --git a/files/en-us/web/api/document/evaluate/index.md b/files/en-us/web/api/document/evaluate/index.md index 153d92128312e6c..df49d76c409543b 100644 --- a/files/en-us/web/api/document/evaluate/index.md +++ b/files/en-us/web/api/document/evaluate/index.md @@ -99,11 +99,11 @@ if not, it is the same object as the one passed as the `result` parameter. ## Examples ```js -var headings = document.evaluate("/html/body//h2", document, null, XPathResult.ANY_TYPE, null); +const headings = document.evaluate("/html/body//h2", document, null, XPathResult.ANY_TYPE, null); /* Search the document for all h2 elements. * The result will likely be an unordered node iterator. */ -var thisHeading = headings.iterateNext(); -var alertText = "Level 2 headings in this document are:\n"; +let thisHeading = headings.iterateNext(); +let alertText = "Level 2 headings in this document are:\n"; while (thisHeading) { alertText += `${thisHeading.textContent}\n`; thisHeading = headings.iterateNext(); diff --git a/files/en-us/web/api/document/getelementsbyname/index.md b/files/en-us/web/api/document/getelementsbyname/index.md index 106c9e1be674ed0..0f0c14252601b6f 100644 --- a/files/en-us/web/api/document/getelementsbyname/index.md +++ b/files/en-us/web/api/document/getelementsbyname/index.md @@ -48,7 +48,7 @@ A live {{domxref("NodeList")}} collection, meaning it automatically updates as n ``` ```js -var up_names = document.getElementsByName("up"); +const up_names = document.getElementsByName("up"); console.log(up_names[0].tagName); // displays "INPUT" ``` diff --git a/files/en-us/web/api/document/images/index.md b/files/en-us/web/api/document/images/index.md index 7a174b888c0d9c8..aee7557b89d2e3c 100644 --- a/files/en-us/web/api/document/images/index.md +++ b/files/en-us/web/api/document/images/index.md @@ -40,9 +40,9 @@ This example looks through the list of images and finds one whose name is `"banner.gif"`. ```js -var ilist = document.images; +const ilist = document.images; -for(var i = 0; i < ilist.length; i++) { +for(let i = 0; i < ilist.length; i++) { if(ilist[i].src === 'banner.gif') { // found the banner } diff --git a/files/en-us/web/api/document/lastmodified/index.md b/files/en-us/web/api/document/lastmodified/index.md index 09833410b4a715c..0591daae621bcdc 100644 --- a/files/en-us/web/api/document/lastmodified/index.md +++ b/files/en-us/web/api/document/lastmodified/index.md @@ -65,7 +65,7 @@ if (Date.parse(document.lastModified) > parseFloat(document.cookie.replace(/(?:( …the same example, but skipping the first visit: ```js -var +const nLastVisit = parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1")), nLastModif = Date.parse(document.lastModified); diff --git a/files/en-us/web/api/document/mozsyntheticdocument/index.md b/files/en-us/web/api/document/mozsyntheticdocument/index.md index 079e3e3f457676c..d43b33619850efd 100644 --- a/files/en-us/web/api/document/mozsyntheticdocument/index.md +++ b/files/en-us/web/api/document/mozsyntheticdocument/index.md @@ -26,7 +26,7 @@ This can be useful if you have a contextual menu item you only want to display f synthetic documents (or, conversely, for documents that aren't synthetic). ```js -var isSynthetic = document.mozSyntheticDocument; +const isSynthetic = document.mozSyntheticDocument; if (isSynthetic) { /* insert your menu item here */ diff --git a/files/en-us/web/api/document/msthumbnailclick_event/index.md b/files/en-us/web/api/document/msthumbnailclick_event/index.md index 910de6e7a955796..e0e94faf2b5e3bb 100644 --- a/files/en-us/web/api/document/msthumbnailclick_event/index.md +++ b/files/en-us/web/api/document/msthumbnailclick_event/index.md @@ -66,7 +66,7 @@ window.external.msSiteModeClearIconOverlay(); handlerdocument.addEventListener('msthumbnailclick', onButtonClicked, false); // add the buttons -var btnPlay = window.external.msSiteModeAddThumbBarButton(iconUri, toolTip); +const btnPlay = window.external.msSiteModeAddThumbBarButton(iconUri, toolTip); // refresh the taskbar window.external.msSiteModeShowThumbBar(); diff --git a/files/en-us/web/api/document/querycommandenabled/index.md b/files/en-us/web/api/document/querycommandenabled/index.md index ec739c8701b3ded..0cfb995175e1178 100644 --- a/files/en-us/web/api/document/querycommandenabled/index.md +++ b/files/en-us/web/api/document/querycommandenabled/index.md @@ -42,7 +42,7 @@ and `false` if the command isn't`.` ## Example ```js -var flg = document.queryCommandEnabled("SelectAll"); +const flg = document.queryCommandEnabled("SelectAll"); if(flg) { document.execCommand("SelectAll", false, null); // command is enabled, run it diff --git a/files/en-us/web/api/document/querycommandsupported/index.md b/files/en-us/web/api/document/querycommandsupported/index.md index e98c1f4fa6ff743..bbaa05238274a35 100644 --- a/files/en-us/web/api/document/querycommandsupported/index.md +++ b/files/en-us/web/api/document/querycommandsupported/index.md @@ -42,7 +42,7 @@ the action. ## Examples ```js -var flg = document.queryCommandSupported("SelectAll"); +const flg = document.queryCommandSupported("SelectAll"); if(flg) { // Do something… diff --git a/files/en-us/web/api/document/queryselector/index.md b/files/en-us/web/api/document/queryselector/index.md index 429db6341dbb23c..d9b795077001c53 100644 --- a/files/en-us/web/api/document/queryselector/index.md +++ b/files/en-us/web/api/document/queryselector/index.md @@ -97,7 +97,7 @@ In this example, the first element in the document with the class "`myclass`" is returned: ```js -var el = document.querySelector(".myclass"); +const el = document.querySelector(".myclass"); ``` ### Complex selectors @@ -109,7 +109,7 @@ class is "user-panel main" (`
`) in the document is returned: ```js -var el = document.querySelector("div.user-panel.main input[name='login']"); +const el = document.querySelector("div.user-panel.main input[name='login']"); ``` ### Negation @@ -117,7 +117,7 @@ var el = document.querySelector("div.user-panel.main input[name='login']"); As all CSS selector strings are valid, you can also negate selectors: ```js -var el = document.querySelector("div.user-panel:not(.main) input[name='login']"); +const el = document.querySelector("div.user-panel:not(.main) input[name='login']"); ``` This will select an input with a parent div with the `user-panel` class but diff --git a/files/en-us/web/api/document/registerelement/index.md b/files/en-us/web/api/document/registerelement/index.md index eb5a58c863f7714..6f4f54c388e368a 100644 --- a/files/en-us/web/api/document/registerelement/index.md +++ b/files/en-us/web/api/document/registerelement/index.md @@ -47,7 +47,7 @@ None ({{jsxref("undefined")}}). Here is a very simple example: ```js -var Mytag = document.registerElement('my-tag'); +const Mytag = document.registerElement('my-tag'); ``` Now the new tag is registered in the browser. The `Mytag` variable holds a @@ -64,7 +64,7 @@ capability. And it won't be visible in the browser unless you add some content t tag. Here is one way to add content to the new tag: ```js -var mytag = document.getElementsByTagName("my-tag")[0]; +const mytag = document.getElementsByTagName("my-tag")[0]; mytag.textContent = "I am a my-tag element."; ``` diff --git a/files/en-us/web/api/document/scrollingelement/index.md b/files/en-us/web/api/document/scrollingelement/index.md index c292a0bdb094b1e..48791f52744b16a 100644 --- a/files/en-us/web/api/document/scrollingelement/index.md +++ b/files/en-us/web/api/document/scrollingelement/index.md @@ -27,7 +27,7 @@ The {{domxref("Element")}} that scrolls the document, usually the root element ( ## Examples ```js -var scrollElm = document.scrollingElement; +const scrollElm = document.scrollingElement; scrollElm.scrollTop = 0; ``` diff --git a/files/en-us/web/api/document_object_model/how_to_create_a_dom_tree/index.md b/files/en-us/web/api/document_object_model/how_to_create_a_dom_tree/index.md index 0e4aee8b9ecd345..d2a63456f7e5463 100644 --- a/files/en-us/web/api/document_object_model/how_to_create_a_dom_tree/index.md +++ b/files/en-us/web/api/document_object_model/how_to_create_a_dom_tree/index.md @@ -38,47 +38,47 @@ Consider the following XML document: The W3C DOM API, supported by Mozilla, can be used to create an in-memory representation of this document like so: ```js -var doc = document.implementation.createDocument("", "", null); -var peopleElem = doc.createElement("people"); +const doc = document.implementation.createDocument("", "", null); +const peopleElem = doc.createElement("people"); -var personElem1 = doc.createElement("person"); +const personElem1 = doc.createElement("person"); personElem1.setAttribute("first-name", "eric"); personElem1.setAttribute("middle-initial", "h"); personElem1.setAttribute("last-name", "jung"); -var addressElem1 = doc.createElement("address"); +const addressElem1 = doc.createElement("address"); addressElem1.setAttribute("street", "321 south st"); addressElem1.setAttribute("city", "denver"); addressElem1.setAttribute("state", "co"); addressElem1.setAttribute("country", "usa"); personElem1.appendChild(addressElem1); -var addressElem2 = doc.createElement("address"); +const addressElem2 = doc.createElement("address"); addressElem2.setAttribute("street", "123 main st"); addressElem2.setAttribute("city", "arlington"); addressElem2.setAttribute("state", "ma"); addressElem2.setAttribute("country", "usa"); personElem1.appendChild(addressElem2); -var personElem2 = doc.createElement("person"); +const personElem2 = doc.createElement("person"); personElem2.setAttribute("first-name", "jed"); personElem2.setAttribute("last-name", "brown"); -var addressElem3 = doc.createElement("address"); +const addressElem3 = doc.createElement("address"); addressElem3.setAttribute("street", "321 north st"); addressElem3.setAttribute("city", "atlanta"); addressElem3.setAttribute("state", "ga"); addressElem3.setAttribute("country", "usa"); personElem2.appendChild(addressElem3); -var addressElem4 = doc.createElement("address"); +const addressElem4 = doc.createElement("address"); addressElem4.setAttribute("street", "123 west st"); addressElem4.setAttribute("city", "seattle"); addressElem4.setAttribute("state", "wa"); addressElem4.setAttribute("country", "usa"); personElem2.appendChild(addressElem4); -var addressElem5 = doc.createElement("address"); +const addressElem5 = doc.createElement("address"); addressElem5.setAttribute("street", "321 south avenue"); addressElem5.setAttribute("city", "denver"); addressElem5.setAttribute("state", "co"); diff --git a/files/en-us/web/api/domimplementation/createdocumenttype/index.md b/files/en-us/web/api/domimplementation/createdocumenttype/index.md index 4ddbc4b76442bdb..beaa9cb0edb2cd2 100644 --- a/files/en-us/web/api/domimplementation/createdocumenttype/index.md +++ b/files/en-us/web/api/domimplementation/createdocumenttype/index.md @@ -41,8 +41,8 @@ None ({{jsxref("undefined")}}). ## Examples ```js -var dt = document.implementation.createDocumentType('svg:svg', '-//W3C//DTD SVG 1.1//EN', 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'); -var d = document.implementation.createDocument('http://www.w3.org/2000/svg', 'svg:svg', dt); +const dt = document.implementation.createDocumentType('svg:svg', '-//W3C//DTD SVG 1.1//EN', 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'); +const d = document.implementation.createDocument('http://www.w3.org/2000/svg', 'svg:svg', dt); alert(d.doctype.publicId); // -//W3C//DTD SVG 1.1//EN ``` diff --git a/files/en-us/web/api/dommatrix/dommatrix/index.md b/files/en-us/web/api/dommatrix/dommatrix/index.md index 89d8227302c3ab3..fb455d139b499fe 100644 --- a/files/en-us/web/api/dommatrix/dommatrix/index.md +++ b/files/en-us/web/api/dommatrix/dommatrix/index.md @@ -40,13 +40,13 @@ This example creates a DOMMatrix to use as an argument for calling {{domxref("Point.matrixTransform()")}}. ```js -var point = new DOMPoint(5, 4); -var scaleX = 2; -var scaleY = 3; -var translateX = 12; -var translateY = 8; -var angle = Math.PI / 2; -var matrix = new DOMMatrix([ +const point = new DOMPoint(5, 4); +const scaleX = 2; +const scaleY = 3; +const translateX = 12; +const translateY = 8; +const angle = Math.PI / 2; +const matrix = new DOMMatrix([ Math.sin(angle) * scaleX, Math.cos(angle) * scaleX, -Math.sin(angle) * scaleY, @@ -54,7 +54,7 @@ var matrix = new DOMMatrix([ translateX, translateY ]); -var transformedPoint = point.matrixTransform(matrix); +const transformedPoint = point.matrixTransform(matrix); ``` ## Specifications diff --git a/files/en-us/web/api/dompoint/dompoint/index.md b/files/en-us/web/api/dompoint/dompoint/index.md index e86b7f8c8f90644..a68ba2ded38e231 100644 --- a/files/en-us/web/api/dompoint/dompoint/index.md +++ b/files/en-us/web/api/dompoint/dompoint/index.md @@ -52,8 +52,8 @@ current window, then creates a second point based on the first, which is then of 100 pixels both vertically and horizontally. ```js -var windTopLeft = new DOMPoint(window.screenX, window.screenY); -var newTopLeft = DOMPoint.fromPoint(windTopLeft); +const windTopLeft = new DOMPoint(window.screenX, window.screenY); +const newTopLeft = DOMPoint.fromPoint(windTopLeft); newTopLeft.x += 100; newTopLeft.y += 100; ``` diff --git a/files/en-us/web/api/dompoint/frompoint/index.md b/files/en-us/web/api/dompoint/frompoint/index.md index 7a61c98abea16d7..748f061fb7def4f 100644 --- a/files/en-us/web/api/dompoint/frompoint/index.md +++ b/files/en-us/web/api/dompoint/frompoint/index.md @@ -65,7 +65,7 @@ If you have a {{domxref("DOMPointReadOnly")}} object, you can easily create a mu copy of that point: ```js -var mutablePoint = DOMPoint.fromPoint(readOnlyPoint); +const mutablePoint = DOMPoint.fromPoint(readOnlyPoint); ``` ### Creating a 2D point @@ -76,7 +76,7 @@ use for {{domxref("DOMPointReadOnly.x", "x")}} and {{domxref("DOMPointReadOnly.y values (0 and 1 respectively). ```js -var center = DOMPoint.fromPoint({x: 75, y: -50, z: -55, w: 0.25}); +const center = DOMPoint.fromPoint({x: 75, y: -50, z: -55, w: 0.25}); ``` ## Specifications diff --git a/files/en-us/web/api/dompointreadonly/dompointreadonly/index.md b/files/en-us/web/api/dompointreadonly/dompointreadonly/index.md index 13f925f639dd80d..d341d3a8d4a1299 100644 --- a/files/en-us/web/api/dompointreadonly/dompointreadonly/index.md +++ b/files/en-us/web/api/dompointreadonly/dompointreadonly/index.md @@ -60,9 +60,9 @@ space. The following code demonstrates creating both 2D and 3D points. ```js -var point2D = new DOMPointReadOnly(50, 25); -var point3D = new DOMPointReadOnly(50, 0, 10); -var perspectivePoint3D = new DOMPointReadOnly(50, 50, 25, 0.5); +const point2D = new DOMPointReadOnly(50, 25); +const point3D = new DOMPointReadOnly(50, 0, 10); +const perspectivePoint3D = new DOMPointReadOnly(50, 50, 25, 0.5); ``` ## Specifications diff --git a/files/en-us/web/api/dompointreadonly/tojson/index.md b/files/en-us/web/api/dompointreadonly/tojson/index.md index e73b58a2be2b3bf..3a4e58e53fa86c3 100644 --- a/files/en-us/web/api/dompointreadonly/tojson/index.md +++ b/files/en-us/web/api/dompointreadonly/tojson/index.md @@ -43,9 +43,9 @@ This example creates a {{domxref("DOMPoint")}} object representing the top-left of the current window, in screen coordinates, then converts that to JSON. ```js -var topLeft = new DOMPoint(window.screenX, window.screenY); +const topLeft = new DOMPoint(window.screenX, window.screenY); -var pointJSON = topLeft.toJSON(); +const pointJSON = topLeft.toJSON(); ``` ## Specifications diff --git a/files/en-us/web/api/dynamicscompressornode/attack/index.md b/files/en-us/web/api/dynamicscompressornode/attack/index.md index 11aa7368e8a2214..633e71a8c8f79d9 100644 --- a/files/en-us/web/api/dynamicscompressornode/attack/index.md +++ b/files/en-us/web/api/dynamicscompressornode/attack/index.md @@ -26,8 +26,8 @@ An {{domxref("AudioParam")}}. ## Examples ```js -var audioCtx = new AudioContext(); -var compressor = audioCtx.createDynamicsCompressor(); +const audioCtx = new AudioContext(); +const compressor = audioCtx.createDynamicsCompressor(); compressor.attack.value = 0; ``` diff --git a/files/en-us/web/api/dynamicscompressornode/knee/index.md b/files/en-us/web/api/dynamicscompressornode/knee/index.md index b84b2eaacac673b..562a0427f275e06 100644 --- a/files/en-us/web/api/dynamicscompressornode/knee/index.md +++ b/files/en-us/web/api/dynamicscompressornode/knee/index.md @@ -28,8 +28,8 @@ An {{domxref("AudioParam")}}. ## Examples ```js -var audioCtx = new AudioContext(); -var compressor = audioCtx.createDynamicsCompressor(); +const audioCtx = new AudioContext(); +const compressor = audioCtx.createDynamicsCompressor(); compressor.knee.value = 40; ``` diff --git a/files/en-us/web/api/dynamicscompressornode/ratio/index.md b/files/en-us/web/api/dynamicscompressornode/ratio/index.md index 98c16ac1548ff5d..72196090352392d 100644 --- a/files/en-us/web/api/dynamicscompressornode/ratio/index.md +++ b/files/en-us/web/api/dynamicscompressornode/ratio/index.md @@ -28,8 +28,8 @@ An {{domxref("AudioParam")}}. ## Examples ```js -var audioCtx = new AudioContext(); -var compressor = audioCtx.createDynamicsCompressor(); +const audioCtx = new AudioContext(); +const compressor = audioCtx.createDynamicsCompressor(); compressor.ratio.value = 12; ``` diff --git a/files/en-us/web/api/dynamicscompressornode/reduction/index.md b/files/en-us/web/api/dynamicscompressornode/reduction/index.md index 8ff95be35c313d7..0b0bc980fb952fd 100644 --- a/files/en-us/web/api/dynamicscompressornode/reduction/index.md +++ b/files/en-us/web/api/dynamicscompressornode/reduction/index.md @@ -24,9 +24,9 @@ A float. ## Examples ```js -var audioCtx = new AudioContext(); -var compressor = audioCtx.createDynamicsCompressor(); -var myReduction = compressor.reduction; +const audioCtx = new AudioContext(); +const compressor = audioCtx.createDynamicsCompressor(); +const myReduction = compressor.reduction; ``` See [`BaseAudioContext.createDynamicsCompressor()`](/en-US/docs/Web/API/BaseAudioContext/createDynamicsCompressor#example) for more complete example code. diff --git a/files/en-us/web/api/dynamicscompressornode/release/index.md b/files/en-us/web/api/dynamicscompressornode/release/index.md index 94847740bb1571f..0318f01f338516d 100644 --- a/files/en-us/web/api/dynamicscompressornode/release/index.md +++ b/files/en-us/web/api/dynamicscompressornode/release/index.md @@ -26,8 +26,8 @@ An {{domxref("AudioParam")}}. ## Examples ```js -var audioCtx = new AudioContext(); -var compressor = audioCtx.createDynamicsCompressor(); +const audioCtx = new AudioContext(); +const compressor = audioCtx.createDynamicsCompressor(); compressor.release.value = 0.25; ``` diff --git a/files/en-us/web/api/dynamicscompressornode/threshold/index.md b/files/en-us/web/api/dynamicscompressornode/threshold/index.md index c0bb45b43e449dc..66af10b1ab42e43 100644 --- a/files/en-us/web/api/dynamicscompressornode/threshold/index.md +++ b/files/en-us/web/api/dynamicscompressornode/threshold/index.md @@ -28,8 +28,8 @@ An {{domxref("AudioParam")}}. ## Examples ```js -var audioCtx = new AudioContext(); -var compressor = audioCtx.createDynamicsCompressor(); +const audioCtx = new AudioContext(); +const compressor = audioCtx.createDynamicsCompressor(); compressor.threshold.value = -50; ``` diff --git a/files/en-us/web/api/element/fullscreenchange_event/index.md b/files/en-us/web/api/element/fullscreenchange_event/index.md index 49cbfa254c46f80..95d4c91ba470091 100644 --- a/files/en-us/web/api/element/fullscreenchange_event/index.md +++ b/files/en-us/web/api/element/fullscreenchange_event/index.md @@ -68,7 +68,7 @@ function fullscreenchanged(event) { } }; -var el = document.getElementById('fullscreen-div'); +const el = document.getElementById('fullscreen-div'); el.addEventListener('fullscreenchange', fullscreenchanged); // or diff --git a/files/en-us/web/api/element/getboundingclientrect/index.md b/files/en-us/web/api/element/getboundingclientrect/index.md index ddd63fe0ae947d8..4fef21dd4af245f 100644 --- a/files/en-us/web/api/element/getboundingclientrect/index.md +++ b/files/en-us/web/api/element/getboundingclientrect/index.md @@ -107,7 +107,7 @@ div { ```js let elem = document.querySelector('div'); let rect = elem.getBoundingClientRect(); -for (var key in rect) { +for (const key in rect) { if(typeof rect[key] !== 'function') { let para = document.createElement('p'); para.textContent = `${key} : ${rect[key]}`; @@ -155,7 +155,7 @@ function update() { const rect = elem.getBoundingClientRect(); container.innerHTML = ''; - for (let key in rect) { + for (const key in rect) { if(typeof rect[key] !== 'function') { let para = document.createElement('p'); para.textContent = `${key} : ${rect[key]}`; diff --git a/files/en-us/web/api/element/getelementsbyclassname/index.md b/files/en-us/web/api/element/getelementsbyclassname/index.md index c3aedab8df77e58..83c1f3102a6e87a 100644 --- a/files/en-us/web/api/element/getelementsbyclassname/index.md +++ b/files/en-us/web/api/element/getelementsbyclassname/index.md @@ -91,9 +91,9 @@ work as one might expect because `"matches"` will change as soon as any `"colorbox"` class is removed. ```js -var matches = element.getElementsByClassName('colorbox'); +const matches = element.getElementsByClassName('colorbox'); -for (var i=0; i 0) { matches.item(0).classList.add('hueframe'); @@ -123,8 +123,8 @@ method's `this` value. Here we'll find all {{HTMLElement("div")}} elements that have a class of `test`: ```js -var testElements = document.getElementsByClassName('test'); -var testDivs = Array.prototype.filter.call(testElements, function(testElement) { +const testElements = document.getElementsByClassName('test'); +const testDivs = Array.prototype.filter.call(testElements, function(testElement) { return testElement.nodeName === 'DIV'; }); ``` diff --git a/files/en-us/web/api/element/hasattribute/index.md b/files/en-us/web/api/element/hasattribute/index.md index 214d3fef18ede1e..5807020c4258def 100644 --- a/files/en-us/web/api/element/hasattribute/index.md +++ b/files/en-us/web/api/element/hasattribute/index.md @@ -34,7 +34,7 @@ A boolean. ## Examples ```js -var foo = document.getElementById("foo"); +const foo = document.getElementById("foo"); if (foo.hasAttribute("bar")) { // do something } diff --git a/files/en-us/web/api/element/hasattributens/index.md b/files/en-us/web/api/element/hasattributens/index.md index 363df2d0b17034e..270c73f68213434 100644 --- a/files/en-us/web/api/element/hasattributens/index.md +++ b/files/en-us/web/api/element/hasattributens/index.md @@ -33,7 +33,7 @@ A boolean. ```js // Check that the attribute exists before you set a value -var d = document.getElementById("div1"); +const d = document.getElementById("div1"); if (d.hasAttributeNS( "http://www.mozilla.org/ns/specialspace/", "special-align")) { From 0396b78657885402d6f99c5bd890a05bbfc35c9a Mon Sep 17 00:00:00 2001 From: Lion Ralfs Date: Thu, 28 Jul 2022 00:37:28 +0200 Subject: [PATCH 2/5] split var declarations into 2 lines, rename them --- files/en-us/web/api/document/lastmodified/index.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/files/en-us/web/api/document/lastmodified/index.md b/files/en-us/web/api/document/lastmodified/index.md index 0591daae621bcdc..12d146b54c2af98 100644 --- a/files/en-us/web/api/document/lastmodified/index.md +++ b/files/en-us/web/api/document/lastmodified/index.md @@ -65,14 +65,13 @@ if (Date.parse(document.lastModified) > parseFloat(document.cookie.replace(/(?:( …the same example, but skipping the first visit: ```js -const - nLastVisit = parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1")), - nLastModif = Date.parse(document.lastModified); +const lastVisit = parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1")); +const lastModif = Date.parse(document.lastModified); -if (isNaN(nLastVisit) || nLastModif > nLastVisit) { +if (isNaN(lastVisit) || lastModif > lastVisit) { document.cookie = `last_modif=${Date.now()}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=${location.pathname}`; - if (isFinite(nLastVisit)) { + if (isFinite(lastVisit)) { alert("This page has been changed!"); } } From 2f2b92dee82f4040b74cc0c3aa2dd23d794b8890 Mon Sep 17 00:00:00 2001 From: Lion Ralfs Date: Thu, 28 Jul 2022 00:40:11 +0200 Subject: [PATCH 3/5] Apply suggestions from code review Co-authored-by: rubiesonthesky <2591240+rubiesonthesky@users.noreply.github.com> --- files/en-us/web/api/contactsmanager/getproperties/index.md | 2 +- files/en-us/web/api/element/getelementsbyclassname/index.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/api/contactsmanager/getproperties/index.md b/files/en-us/web/api/contactsmanager/getproperties/index.md index 1a95603076d44dd..1096d633f16948f 100644 --- a/files/en-us/web/api/contactsmanager/getproperties/index.md +++ b/files/en-us/web/api/contactsmanager/getproperties/index.md @@ -21,7 +21,7 @@ properties are available. ## Syntax ```js -const ContactProperties = ContactsManager.getProperties(); +const contactProperties = ContactsManager.getProperties(); ``` ### Parameters diff --git a/files/en-us/web/api/element/getelementsbyclassname/index.md b/files/en-us/web/api/element/getelementsbyclassname/index.md index 83c1f3102a6e87a..10b9168769654fd 100644 --- a/files/en-us/web/api/element/getelementsbyclassname/index.md +++ b/files/en-us/web/api/element/getelementsbyclassname/index.md @@ -93,7 +93,7 @@ soon as any `"colorbox"` class is removed. ```js const matches = element.getElementsByClassName('colorbox'); -for (let i=0; i Date: Thu, 28 Jul 2022 00:44:45 +0200 Subject: [PATCH 4/5] keep var in polyfills --- files/en-us/web/api/cssstylesheet/insertrule/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/en-us/web/api/cssstylesheet/insertrule/index.md b/files/en-us/web/api/cssstylesheet/insertrule/index.md index c7a7b7c405de93d..6f7912b06998752 100644 --- a/files/en-us/web/api/cssstylesheet/insertrule/index.md +++ b/files/en-us/web/api/cssstylesheet/insertrule/index.md @@ -135,16 +135,16 @@ to the default native `insertRule()`. ```js (function(Sheet_proto){ - const originalInsertRule = Sheet_proto.insertRule; + var originalInsertRule = Sheet_proto.insertRule; if (originalInsertRule.length === 2){ // 2 mandatory arguments: (selector, rules) Sheet_proto.insertRule = function(selectorAndRule){ // First, separate the selector from the rule - a: for (let i=0, Len=selectorAndRule.length, isEscaped=0, newCharCode=0; i !== Len; ++i) { + a: for (var i=0, Len=selectorAndRule.length, isEscaped=0, newCharCode=0; i !== Len; ++i) { newCharCode = selectorAndRule.charCodeAt(i); if (!isEscaped && (newCharCode === 123)) { // 123 = "{".charCodeAt(0) // Secondly, find the last closing bracket - let openBracketPos = i, closeBracketPos = -1; + var openBracketPos = i, closeBracketPos = -1; for (; i !== Len; ++i) { newCharCode = selectorAndRule.charCodeAt(i); From 3e25a8018e70e9ecf0f1c53862400244fe07a5ec Mon Sep 17 00:00:00 2001 From: Lion Ralfs Date: Thu, 28 Jul 2022 12:43:40 +0200 Subject: [PATCH 5/5] Apply suggestions from code review Co-authored-by: Jean-Yves Perrier --- files/en-us/web/api/baseaudiocontext/currenttime/index.md | 1 - files/en-us/web/api/baseaudiocontext/destination/index.md | 1 - files/en-us/web/api/baseaudiocontext/listener/index.md | 1 - files/en-us/web/api/baseaudiocontext/samplerate/index.md | 1 - files/en-us/web/api/biquadfilternode/detune/index.md | 2 +- files/en-us/web/api/biquadfilternode/frequency/index.md | 2 +- files/en-us/web/api/biquadfilternode/gain/index.md | 2 +- files/en-us/web/api/biquadfilternode/q/index.md | 2 +- files/en-us/web/api/biquadfilternode/type/index.md | 2 +- files/en-us/web/api/bluetooth/getavailability/index.md | 2 +- files/en-us/web/api/bluetooth/getdevices/index.md | 2 +- .../bluetoothremotegattdescriptor/characteristic/index.md | 8 +------- .../web/api/canvascapturemediastreamtrack/canvas/index.md | 2 +- .../canvascapturemediastreamtrack/requestframe/index.md | 2 +- files/en-us/web/api/clipboarditem/gettype/index.md | 2 +- .../en-us/web/api/contactsmanager/getproperties/index.md | 2 +- .../api/cssstyledeclaration/msgetpropertyenabled/index.md | 2 +- .../api/cssstyledeclaration/msputpropertyenabled/index.md | 2 +- .../api/datatransferitem/getasfilesystemhandle/index.md | 2 +- 19 files changed, 15 insertions(+), 25 deletions(-) diff --git a/files/en-us/web/api/baseaudiocontext/currenttime/index.md b/files/en-us/web/api/baseaudiocontext/currenttime/index.md index 7c7e9e64078449c..2e2275393f50403 100644 --- a/files/en-us/web/api/baseaudiocontext/currenttime/index.md +++ b/files/en-us/web/api/baseaudiocontext/currenttime/index.md @@ -25,7 +25,6 @@ A floating point number. ## Examples ```js -const AudioContext = window.AudioContext || window.webkitAudioContext; const audioCtx = new AudioContext(); // Older webkit/blink browsers require a prefix diff --git a/files/en-us/web/api/baseaudiocontext/destination/index.md b/files/en-us/web/api/baseaudiocontext/destination/index.md index 6714764f3807f75..912c439282cac3a 100644 --- a/files/en-us/web/api/baseaudiocontext/destination/index.md +++ b/files/en-us/web/api/baseaudiocontext/destination/index.md @@ -29,7 +29,6 @@ An {{ domxref("AudioDestinationNode") }}. > Demos on the [MDN GitHub repo](https://github.com/mdn/), like [voice-change-o-matic](https://github.com/mdn/voice-change-o-matic). ```js -const AudioContext = window.AudioContext || window.webkitAudioContext; const audioCtx = new AudioContext(); // Older webkit/blink browsers require a prefix diff --git a/files/en-us/web/api/baseaudiocontext/listener/index.md b/files/en-us/web/api/baseaudiocontext/listener/index.md index 5754ce6e1d28cae..5b1e2251470739b 100644 --- a/files/en-us/web/api/baseaudiocontext/listener/index.md +++ b/files/en-us/web/api/baseaudiocontext/listener/index.md @@ -28,7 +28,6 @@ An {{ domxref("AudioListener") }} object. > **Note:** for a full Web Audio spatialization example, see our [panner-node](https://github.com/mdn/webaudio-examples/tree/master/panner-node) demo. ```js -const AudioContext = window.AudioContext || window.webkitAudioContext; const audioCtx = new AudioContext(); // Older webkit/blink browsers require a prefix diff --git a/files/en-us/web/api/baseaudiocontext/samplerate/index.md b/files/en-us/web/api/baseaudiocontext/samplerate/index.md index 96f1a0d96f2cbae..8fef0e5a4b82d52 100644 --- a/files/en-us/web/api/baseaudiocontext/samplerate/index.md +++ b/files/en-us/web/api/baseaudiocontext/samplerate/index.md @@ -31,7 +31,6 @@ second. > `audioCtx.sampleRate` into your browser console. ```js -const AudioContext = window.AudioContext || window.webkitAudioContext; const audioCtx = new AudioContext(); // Older webkit/blink browsers require a prefix diff --git a/files/en-us/web/api/biquadfilternode/detune/index.md b/files/en-us/web/api/biquadfilternode/detune/index.md index 312ff1179160ba5..e4f16d98b19e302 100644 --- a/files/en-us/web/api/biquadfilternode/detune/index.md +++ b/files/en-us/web/api/biquadfilternode/detune/index.md @@ -26,7 +26,7 @@ An [a-rate](/en-US/docs/Web/API/AudioParam#a-rate) {{domxref("AudioParam")}}. The following example shows basic usage of an AudioContext to create a Biquad filter node. For a complete working example, check out our [voice-change-o-matic](https://mdn.github.io/voice-change-o-matic/) demo (look at the [source code](https://github.com/mdn/voice-change-o-matic) too). ```js -const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const audioCtx = new AudioContext(); //set up the different audio nodes we will use for the app const analyser = audioCtx.createAnalyser(); diff --git a/files/en-us/web/api/biquadfilternode/frequency/index.md b/files/en-us/web/api/biquadfilternode/frequency/index.md index cc9bc8371bd2235..ec3dd8f1ae95fce 100644 --- a/files/en-us/web/api/biquadfilternode/frequency/index.md +++ b/files/en-us/web/api/biquadfilternode/frequency/index.md @@ -28,7 +28,7 @@ An {{domxref("AudioParam")}}. The following example shows basic usage of an AudioContext to create a Biquad filter node. For a complete working example, check out our [voice-change-o-matic](https://mdn.github.io/voice-change-o-matic/) demo (look at the [source code](https://github.com/mdn/voice-change-o-matic) too). ```js -const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const audioCtx = new AudioContext(); //set up the different audio nodes we will use for the app const analyser = audioCtx.createAnalyser(); diff --git a/files/en-us/web/api/biquadfilternode/gain/index.md b/files/en-us/web/api/biquadfilternode/gain/index.md index e8d3f0607703e2a..65abaaec887c190 100644 --- a/files/en-us/web/api/biquadfilternode/gain/index.md +++ b/files/en-us/web/api/biquadfilternode/gain/index.md @@ -30,7 +30,7 @@ An {{domxref("AudioParam")}}. The following example shows basic usage of an AudioContext to create a Biquad filter node. For a complete working example, check out our [voice-change-o-matic](https://mdn.github.io/voice-change-o-matic/) demo (look at the [source code](https://github.com/mdn/voice-change-o-matic) too). ```js -const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const audioCtx = new AudioContext(); //set up the different audio nodes we will use for the app const analyser = audioCtx.createAnalyser(); diff --git a/files/en-us/web/api/biquadfilternode/q/index.md b/files/en-us/web/api/biquadfilternode/q/index.md index 932916b5ca94745..c35b5f2e38dfafa 100644 --- a/files/en-us/web/api/biquadfilternode/q/index.md +++ b/files/en-us/web/api/biquadfilternode/q/index.md @@ -28,7 +28,7 @@ An {{domxref("AudioParam")}}. The following example shows basic usage of an AudioContext to create a Biquad filter node. For a complete working example, check out our [voice-change-o-matic](https://mdn.github.io/voice-change-o-matic/) demo (look at the [source code](https://github.com/mdn/voice-change-o-matic) too). ```js -const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const audioCtx = new AudioContext(); //set up the different audio nodes we will use for the app const analyser = audioCtx.createAnalyser(); diff --git a/files/en-us/web/api/biquadfilternode/type/index.md b/files/en-us/web/api/biquadfilternode/type/index.md index 54837f044f8a25b..13690122fd432ec 100644 --- a/files/en-us/web/api/biquadfilternode/type/index.md +++ b/files/en-us/web/api/biquadfilternode/type/index.md @@ -168,7 +168,7 @@ A string (enum) representing a [BiquadFilterType](https://webaudio.github.io/web The following example shows basic usage of an AudioContext to create a Biquad filter node. For a complete working example, check out our [voice-change-o-matic](https://mdn.github.io/voice-change-o-matic/) demo (look at the [source code](https://github.com/mdn/voice-change-o-matic) too). ```js -const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const audioCtx = new AudioContext(); //set up the different audio nodes we will use for the app const analyser = audioCtx.createAnalyser(); diff --git a/files/en-us/web/api/bluetooth/getavailability/index.md b/files/en-us/web/api/bluetooth/getavailability/index.md index ccebcc86df9d108..2afb5b2f872396c 100644 --- a/files/en-us/web/api/bluetooth/getavailability/index.md +++ b/files/en-us/web/api/bluetooth/getavailability/index.md @@ -21,7 +21,7 @@ The **`getAvailability()`** method of the {{DOMxRef("Bluetooth")}} interface ret ## Syntax ```js -const readerPromise = Bluetooth.getAvailability(); +getAvailability() ``` ### Parameters diff --git a/files/en-us/web/api/bluetooth/getdevices/index.md b/files/en-us/web/api/bluetooth/getdevices/index.md index 85224ab8835bdb7..8d7454faa25e70e 100644 --- a/files/en-us/web/api/bluetooth/getdevices/index.md +++ b/files/en-us/web/api/bluetooth/getdevices/index.md @@ -23,7 +23,7 @@ permission prompts. ## Syntax ```js -const readerPromise = Bluetooth.getDevices(); +getDevices() ``` ### Parameters diff --git a/files/en-us/web/api/bluetoothremotegattdescriptor/characteristic/index.md b/files/en-us/web/api/bluetoothremotegattdescriptor/characteristic/index.md index 920a01cca0ee628..b807d631fa4f04e 100644 --- a/files/en-us/web/api/bluetoothremotegattdescriptor/characteristic/index.md +++ b/files/en-us/web/api/bluetoothremotegattdescriptor/characteristic/index.md @@ -20,13 +20,7 @@ The **`BluetoothRemoteGATTDescriptor.characteristic`** read-only property returns the {{domxref("BluetoothRemoteGATTCharacteristic")}} this descriptor belongs to. -## Syntax - -```js -const characteristic = BluetoothRemoteGATTCharacteristic.characteristic -``` - -### Returns +## Value An instance of {{domxref("BluetoothRemoteGATTCharacteristic")}}. diff --git a/files/en-us/web/api/canvascapturemediastreamtrack/canvas/index.md b/files/en-us/web/api/canvascapturemediastreamtrack/canvas/index.md index 2dd824cde8f5a7b..8647885d6206396 100644 --- a/files/en-us/web/api/canvascapturemediastreamtrack/canvas/index.md +++ b/files/en-us/web/api/canvascapturemediastreamtrack/canvas/index.md @@ -29,7 +29,7 @@ frames being captured. ```js // Find the canvas element to capture -const canvasElt = document.getElementsByTagName("canvas")[0]; +const canvasElt = document.querySelector("canvas"); // Get the stream const stream = canvasElt.captureStream(25); // 25 FPS diff --git a/files/en-us/web/api/canvascapturemediastreamtrack/requestframe/index.md b/files/en-us/web/api/canvascapturemediastreamtrack/requestframe/index.md index 81483d4b454fbb3..2d8a2d7b24dcc69 100644 --- a/files/en-us/web/api/canvascapturemediastreamtrack/requestframe/index.md +++ b/files/en-us/web/api/canvascapturemediastreamtrack/requestframe/index.md @@ -51,7 +51,7 @@ mentioned in the spec, this is a likely candidate). ```js // Find the canvas element to capture -const canvasElt = document.getElementsByTagName("canvas")[0]; +const canvasElt = document.querySelector("canvas"); // Get the stream const stream = canvasElt.captureStream(25); // 25 FPS diff --git a/files/en-us/web/api/clipboarditem/gettype/index.md b/files/en-us/web/api/clipboarditem/gettype/index.md index 25f0f2428e17ee3..376a6c13c21eafa 100644 --- a/files/en-us/web/api/clipboarditem/gettype/index.md +++ b/files/en-us/web/api/clipboarditem/gettype/index.md @@ -20,7 +20,7 @@ The **`getType()`** method of the {{domxref("ClipboardItem")}} interface returns ## Syntax ```js -const blob = clipboardItem.getType(type); +getType(type) ``` ### Parameters diff --git a/files/en-us/web/api/contactsmanager/getproperties/index.md b/files/en-us/web/api/contactsmanager/getproperties/index.md index 1096d633f16948f..eaa1d7f8e0f561c 100644 --- a/files/en-us/web/api/contactsmanager/getproperties/index.md +++ b/files/en-us/web/api/contactsmanager/getproperties/index.md @@ -21,7 +21,7 @@ properties are available. ## Syntax ```js -const contactProperties = ContactsManager.getProperties(); +getProperties() ``` ### Parameters diff --git a/files/en-us/web/api/cssstyledeclaration/msgetpropertyenabled/index.md b/files/en-us/web/api/cssstyledeclaration/msgetpropertyenabled/index.md index 2a27e8c88e445e2..a6e26b509df5a1a 100644 --- a/files/en-us/web/api/cssstyledeclaration/msgetpropertyenabled/index.md +++ b/files/en-us/web/api/cssstyledeclaration/msgetpropertyenabled/index.md @@ -18,7 +18,7 @@ This proprietary method is specific to Internet Explorer browser. ### Syntax ```js -const retVal = style.msGetPropertyEnabled(name); +msGetPropertyEnabled(name) ``` ### Parameters diff --git a/files/en-us/web/api/cssstyledeclaration/msputpropertyenabled/index.md b/files/en-us/web/api/cssstyledeclaration/msputpropertyenabled/index.md index 0268b133883df55..1ed073e831d1bcd 100644 --- a/files/en-us/web/api/cssstyledeclaration/msputpropertyenabled/index.md +++ b/files/en-us/web/api/cssstyledeclaration/msputpropertyenabled/index.md @@ -18,7 +18,7 @@ This proprietary method is specific to Internet Explorer and Microsoft Edge. ### Syntax ```js -const retval = style.msPutPropertyEnabled(propertyName, true); +msPutPropertyEnabled(name, boolean) ``` ### Parameters diff --git a/files/en-us/web/api/datatransferitem/getasfilesystemhandle/index.md b/files/en-us/web/api/datatransferitem/getasfilesystemhandle/index.md index 3b30c1dac215beb..ddbc457ead818ba 100644 --- a/files/en-us/web/api/datatransferitem/getasfilesystemhandle/index.md +++ b/files/en-us/web/api/datatransferitem/getasfilesystemhandle/index.md @@ -20,7 +20,7 @@ dragged item is a directory. ## Syntax ```js -const handle = DataTransferItem.getAsFileSystemHandle(); +getAsFileSystemHandle() ``` ### Parameters