Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

no more vars in Web/API (2) #18864

Merged
merged 6 commits into from
Jul 28, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 1 addition & 2 deletions files/en-us/web/api/baseaudiocontext/currenttime/index.md
Expand Up @@ -25,8 +25,7 @@ A floating point number.
## Examples

```js
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();
const audioCtx = new AudioContext();
// Older webkit/blink browsers require a prefix

// …
Expand Down
7 changes: 3 additions & 4 deletions files/en-us/web/api/baseaudiocontext/destination/index.md
Expand Up @@ -29,12 +29,11 @@ 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 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);
Expand Down
5 changes: 2 additions & 3 deletions files/en-us/web/api/baseaudiocontext/listener/index.md
Expand Up @@ -28,13 +28,12 @@ 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 audioCtx = new AudioContext();
// Older webkit/blink browsers require a prefix

// …

var myListener = audioCtx.listener;
const myListener = audioCtx.listener;
```

## Specifications
Expand Down
3 changes: 1 addition & 2 deletions files/en-us/web/api/baseaudiocontext/samplerate/index.md
Expand Up @@ -31,8 +31,7 @@ second.
> `audioCtx.sampleRate` into your browser console.

```js
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();
const audioCtx = new AudioContext();
// Older webkit/blink browsers require a prefix

// …
Expand Down
Expand Up @@ -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
Expand Down
12 changes: 6 additions & 6 deletions files/en-us/web/api/biquadfilternode/detune/index.md
Expand Up @@ -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 AudioContext();

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

Expand Down
12 changes: 6 additions & 6 deletions files/en-us/web/api/biquadfilternode/frequency/index.md
Expand Up @@ -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 AudioContext();

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

Expand Down
12 changes: 6 additions & 6 deletions files/en-us/web/api/biquadfilternode/gain/index.md
Expand Up @@ -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 AudioContext();

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

Expand Down
12 changes: 6 additions & 6 deletions files/en-us/web/api/biquadfilternode/q/index.md
Expand Up @@ -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 AudioContext();

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

Expand Down
12 changes: 6 additions & 6 deletions files/en-us/web/api/biquadfilternode/type/index.md
Expand Up @@ -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 AudioContext();

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

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/bluetooth/getavailability/index.md
Expand Up @@ -21,7 +21,7 @@ The **`getAvailability()`** method of the {{DOMxRef("Bluetooth")}} interface ret
## Syntax

```js
var readerPromise = Bluetooth.getAvailability();
getAvailability()
```

### Parameters
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/bluetooth/getdevices/index.md
Expand Up @@ -23,7 +23,7 @@ permission prompts.
## Syntax

```js
var readerPromise = Bluetooth.getDevices();
getDevices()
```

### Parameters
Expand Down
Expand Up @@ -20,13 +20,7 @@ The **`BluetoothRemoteGATTDescriptor.characteristic`**
read-only property returns the {{domxref("BluetoothRemoteGATTCharacteristic")}} this
descriptor belongs to.

## Syntax

```js
var characteristic = BluetoothRemoteGATTCharacteristic.characteristic
```

### Returns
## Value

An instance of {{domxref("BluetoothRemoteGATTCharacteristic")}}.

Expand Down
Expand Up @@ -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!');
```

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/broadcastchannel/close/index.md
Expand Up @@ -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, …)

Expand Down
Expand Up @@ -55,7 +55,7 @@ const readableStream = new ReadableStream({
}
}, queuingStrategy);

var size = queuingStrategy.size(chunk);
const size = queuingStrategy.size(chunk);
```

## Specifications
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/bytelengthqueuingstrategy/index.md
Expand Up @@ -46,7 +46,7 @@ const readableStream = new ReadableStream({
}
}, queueingStrategy);

var size = queueingStrategy.size(chunk);
const size = queueingStrategy.size(chunk);
```

## Specifications
Expand Down
Expand Up @@ -50,7 +50,7 @@ const readableStream = new ReadableStream({
}
}, queuingStrategy);

var size = queueingStrategy.size(chunk);
const size = queueingStrategy.size(chunk);
```

## Specifications
Expand Down
4 changes: 2 additions & 2 deletions files/en-us/web/api/cache/put/index.md
Expand Up @@ -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;
Expand Down
Expand Up @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down
Expand Up @@ -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})`;
Expand All @@ -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
Expand All @@ -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;
Expand Down