diff --git a/.vscode/dictionaries/terms-abbreviations.txt b/.vscode/dictionaries/terms-abbreviations.txt index ad04ec2001c292f..e20bae2cfe88057 100644 --- a/.vscode/dictionaries/terms-abbreviations.txt +++ b/.vscode/dictionaries/terms-abbreviations.txt @@ -242,6 +242,7 @@ foveation fragmentainer fragmentainers framebuffers +framebusting frontmost Fullband fullscreened diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/introduction/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/introduction/index.md index 9eb0d324520836f..6da174ac9ebbd75 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/introduction/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/introduction/index.md @@ -133,6 +133,12 @@ function buildDeleteButtonEl(id) { The interesting part to note is that every time we update the state, we need to manually call `renderTodoList` so our state gets synced to the screen. The code that will render our items on the page might read something like this: +```js hidden +const todoFormEl = document.querySelector("#todo-form"); +const todoInputEl = document.querySelector("#todo-input"); +const todoListEl = document.querySelector("#todo-list"); +``` + ```js function renderTodoList() { const frag = document.createDocumentFragment(); @@ -216,10 +222,6 @@ label + input[type="text"] { ``` ```js hidden -const todoFormEl = document.querySelector("#todo-form"); -const todoInputEl = document.querySelector("#todo-input"); -const todoListEl = document.querySelector("#todo-list"); - function generateUniqueId(prefix = "prefix") { return `${prefix}-${Math.floor(Math.random() * Date.now())}`; } diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/react_interactivity_events_state/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/react_interactivity_events_state/index.md index 8df926f228589a7..155c952d2d2c63f 100644 --- a/files/en-us/learn_web_development/core/frameworks_libraries/react_interactivity_events_state/index.md +++ b/files/en-us/learn_web_development/core/frameworks_libraries/react_interactivity_events_state/index.md @@ -597,6 +597,8 @@ import Form from "./components/Form"; import FilterButton from "./components/FilterButton"; function App(props) { + const [tasks, setTasks] = useState(props.tasks); + function addTask(name) { const newTask = { id: `todo-${nanoid()}`, name, completed: false }; setTasks([...tasks, newTask]); @@ -619,8 +621,6 @@ function App(props) { const remainingTasks = tasks.filter((task) => id !== task.id); setTasks(remainingTasks); } - - const [tasks, setTasks] = useState(props.tasks); const taskList = tasks?.map((task) => (
  • - - + +
  • - - + +
    • diff --git a/files/en-us/learn_web_development/extensions/server-side/first_steps/web_frameworks/index.md b/files/en-us/learn_web_development/extensions/server-side/first_steps/web_frameworks/index.md index e9072294332da5d..e874e095f84e5c6 100644 --- a/files/en-us/learn_web_development/extensions/server-side/first_steps/web_frameworks/index.md +++ b/files/en-us/learn_web_development/extensions/server-side/first_steps/web_frameworks/index.md @@ -243,7 +243,7 @@ A lot of high profile companies use Express, including: Uber, Accenture, IBM, et ### Deno (JavaScript) -[Deno](https://deno.com/) is a simple, modern, and secure [JavaScript](/en-US/docs/Web/JavaScript)/TypeScript runtime and framework built on top of Chrome V8 and [Rust](https://www.rust-lang.org/). +[Deno](https://deno.com/) is a simple, modern, and secure [JavaScript](/en-US/docs/Web/JavaScript)/TypeScript runtime and framework built on top of Chrome V8 and [Rust](https://rust-lang.org/). Deno is powered by [Tokio](https://tokio.rs/) — a Rust-based asynchronous runtime which lets it serve web pages faster. It also has internal support for [WebAssembly](/en-US/docs/WebAssembly), which enables the compilation of binary code for use on the client-side. Deno aims to fill in some of the loop-holes in [Node.js](/en-US/docs/Learn_web_development/Extensions/Server-side/Node_server_without_framework) by providing a mechanism that naturally maintains better security. diff --git a/files/en-us/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md b/files/en-us/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md index da10c6b8dc79cc3..35f4df500345ef0 100644 --- a/files/en-us/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md +++ b/files/en-us/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md @@ -319,7 +319,7 @@ img.onload = () => { draw(img); }; -const draw = (image) => { +function draw(image) { const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); ctx.drawImage(image, 0, 0); @@ -350,7 +350,7 @@ const draw = (image) => { zoom(smoothCtx, x, y); zoom(pixelatedCtx, x, y); }); -}; +} ``` {{embedlivesample("zooming_and_anti-aliasing", , 300)}} diff --git a/files/en-us/web/api/canvasrenderingcontext2d/setlinedash/index.md b/files/en-us/web/api/canvasrenderingcontext2d/setlinedash/index.md index 77e6b6ed08c667e..7296167e35a2a34 100644 --- a/files/en-us/web/api/canvasrenderingcontext2d/setlinedash/index.md +++ b/files/en-us/web/api/canvasrenderingcontext2d/setlinedash/index.md @@ -91,6 +91,10 @@ The `drawDashedLine()` function created below makes the drawing of multiple dashed lines simple. It receives a pattern array as its only parameter. ```js +const canvas = document.getElementById("canvas"); +const ctx = canvas.getContext("2d"); +let y = 15; + function drawDashedLine(pattern) { ctx.beginPath(); ctx.setLineDash(pattern); @@ -100,10 +104,6 @@ function drawDashedLine(pattern) { y += 20; } -const canvas = document.getElementById("canvas"); -const ctx = canvas.getContext("2d"); -let y = 15; - drawDashedLine([]); drawDashedLine([1, 1]); drawDashedLine([10, 10]); diff --git a/files/en-us/web/api/document/arianotify/index.md b/files/en-us/web/api/document/arianotify/index.md index faa42d75566852e..11fab51d0592382 100644 --- a/files/en-us/web/api/document/arianotify/index.md +++ b/files/en-us/web/api/document/arianotify/index.md @@ -46,7 +46,7 @@ The **`ariaNotify()`** method can be used to programmatically trigger a screen r Developers often work around the limitations of live regions using hidden DOM nodes with live regions set on them, which have their contents updated with the content to be announced. This is inefficient and error-prone, and `ariaNotify()` provides a way to avoid such issues. -Some screen readers will read out multiple `ariaNotify()` announcments in order, but this cannot be guaranteed across all screen readers and platforms. Normally, only the most recent announcement is spoken. It is more reliable to combine multiple announcements into one. +Some screen readers will read out multiple `ariaNotify()` announcements in order, but this cannot be guaranteed across all screen readers and platforms. Normally, only the most recent announcement is spoken. It is more reliable to combine multiple announcements into one. For example, the following calls: @@ -76,7 +76,7 @@ However, `aria-live` announcements will take priority over `ariaNotify()` announ ### Language selection -Screen readers choose an appropriate voice with which to read `ariaNotify()` announcements (in terms of accent, pronounciation, etc.) based on the language specified in the {{htmlelement("html")}} element's [`lang`](/en-US/docs/Web/HTML/Reference/Global_attributes/lang) attribute, or the user agent's default language if no `lang` attribute is set. +Screen readers choose an appropriate voice with which to read `ariaNotify()` announcements (in terms of accent, pronunciation, etc.) based on the language specified in the {{htmlelement("html")}} element's [`lang`](/en-US/docs/Web/HTML/Reference/Global_attributes/lang) attribute, or the user agent's default language if no `lang` attribute is set. ### Permissions policy integration diff --git a/files/en-us/web/api/element/arianotify/index.md b/files/en-us/web/api/element/arianotify/index.md index c5753db83d891ee..d035a6f5550ad01 100644 --- a/files/en-us/web/api/element/arianotify/index.md +++ b/files/en-us/web/api/element/arianotify/index.md @@ -46,7 +46,7 @@ The **`ariaNotify()`** method can be used to programmatically trigger a screen r Developers often work around the limitations of live regions using hidden DOM nodes with live regions set on them, which have their contents updated with the content to be announced. This is inefficient and error-prone, and `ariaNotify()` provides a way to avoid such issues. -Some screen readers will read out multiple `ariaNotify()` announcments in order, but this cannot be guaranteed across all screen readers and platforms. Normally, only the most recent announcement is spoken. It is more reliable to combine multiple announcements into one. +Some screen readers will read out multiple `ariaNotify()` announcements in order, but this cannot be guaranteed across all screen readers and platforms. Normally, only the most recent announcement is spoken. It is more reliable to combine multiple announcements into one. For example, the following calls: @@ -113,7 +113,7 @@ body { ```js live-sample___basic-arianotify document.querySelector("button").addEventListener("click", () => { - document.querySelector("button").ariaNotify("You 'aint seen me, right?"); + document.querySelector("button").ariaNotify("You ain't seen me, right?"); }); ``` @@ -123,7 +123,7 @@ The output is as follows: {{EmbedLiveSample("basic-arianotify", "100%", 60, , , , "aria-notify")}} -Try activating a screen reader and then pressing the button. You should hear "You 'aint seen me, right?" spoken by the screen reader. +Try activating a screen reader and then pressing the button. You should hear "You ain't seen me, right?" spoken by the screen reader. ## Specifications diff --git a/files/en-us/web/api/element/innerhtml/index.md b/files/en-us/web/api/element/innerhtml/index.md index 5c735c25d6bacd0..d130c8dfc974bad 100644 --- a/files/en-us/web/api/element/innerhtml/index.md +++ b/files/en-us/web/api/element/innerhtml/index.md @@ -40,7 +40,7 @@ When set to the `null` value, that `null` value is converted to the empty string `innerHTML` gets a serialization of the nested child DOM elements within the element, or sets HTML or XML that should be parsed to replace the DOM tree within the element. Note that some browsers serialize the `<` and `>` characters as `<` and `>` when they appear in attribute values (see [Browser compatibility](#browser_compatibility)). -This is to prevent a potential security vulnerability ([mutation XSS](https://research.securitum.com/dompurify-bypass-using-mxss/)) in which an attacker can craft input that bypasses a [sanitization function](/en-US/docs/Web/Security/Attacks/XSS#sanitization), enabling a cross-site scripting (XSS) attack. +This is to prevent a potential security vulnerability ([mutation XSS](https://www.securitum.com/mutation-xss-via-mathml-mutation-dompurify-2-0-17-bypass.html)) in which an attacker can craft input that bypasses a [sanitization function](/en-US/docs/Web/Security/Attacks/XSS#sanitization), enabling a cross-site scripting (XSS) attack. ### Shadow DOM considerations diff --git a/files/en-us/web/api/element/releasepointercapture/index.md b/files/en-us/web/api/element/releasepointercapture/index.md index 50b569f08085e9f..dac95a25d4448a3 100644 --- a/files/en-us/web/api/element/releasepointercapture/index.md +++ b/files/en-us/web/api/element/releasepointercapture/index.md @@ -61,6 +61,8 @@ div { ### JavaScript ```js +const slider = document.getElementById("slider"); + function beginSliding(e) { slider.onpointermove = slide; slider.setPointerCapture(e.pointerId); @@ -75,8 +77,6 @@ function slide(e) { slider.style.transform = `translate(${e.clientX - 70}px)`; } -const slider = document.getElementById("slider"); - slider.onpointerdown = beginSliding; slider.onpointerup = stopSliding; ``` diff --git a/files/en-us/web/api/element/setpointercapture/index.md b/files/en-us/web/api/element/setpointercapture/index.md index b9a74739f8b74a9..60bfed68adee736 100644 --- a/files/en-us/web/api/element/setpointercapture/index.md +++ b/files/en-us/web/api/element/setpointercapture/index.md @@ -67,6 +67,8 @@ div { ### JavaScript ```js +const slider = document.getElementById("slider"); + function beginSliding(e) { slider.onpointermove = slide; slider.setPointerCapture(e.pointerId); @@ -81,8 +83,6 @@ function slide(e) { slider.style.transform = `translate(${e.clientX - 70}px)`; } -const slider = document.getElementById("slider"); - slider.onpointerdown = beginSliding; slider.onpointerup = stopSliding; ``` diff --git a/files/en-us/web/api/element/wheel_event/index.md b/files/en-us/web/api/element/wheel_event/index.md index 36844ef55daf249..6091f7d3d17ee93 100644 --- a/files/en-us/web/api/element/wheel_event/index.md +++ b/files/en-us/web/api/element/wheel_event/index.md @@ -92,6 +92,9 @@ div { ``` ```js +let scale = 1; +const el = document.querySelector("div"); + function zoom(event) { event.preventDefault(); @@ -104,8 +107,6 @@ function zoom(event) { el.style.transform = `scale(${scale})`; } -let scale = 1; -const el = document.querySelector("div"); el.onwheel = zoom; ``` diff --git a/files/en-us/web/api/eventtarget/addeventlistener/index.md b/files/en-us/web/api/eventtarget/addeventlistener/index.md index 29773c6d5d992f3..8cb577474772861 100644 --- a/files/en-us/web/api/eventtarget/addeventlistener/index.md +++ b/files/en-us/web/api/eventtarget/addeventlistener/index.md @@ -755,6 +755,8 @@ The code adds a listener to the container's {{domxref("Element/wheel_event", "wh ```js const passive = document.querySelector("#passive"); +const container = document.querySelector("#container"); + passive.addEventListener("change", (event) => { container.removeEventListener("wheel", wheelHandler); container.addEventListener("wheel", wheelHandler, { @@ -763,7 +765,6 @@ passive.addEventListener("change", (event) => { }); }); -const container = document.querySelector("#container"); container.addEventListener("wheel", wheelHandler, { passive: true, once: true, diff --git a/files/en-us/web/api/htmlbuttonelement/reportvalidity/index.md b/files/en-us/web/api/htmlbuttonelement/reportvalidity/index.md index f24fc9c4ebfe935..13f0c3ef6f9749d 100644 --- a/files/en-us/web/api/htmlbuttonelement/reportvalidity/index.md +++ b/files/en-us/web/api/htmlbuttonelement/reportvalidity/index.md @@ -95,16 +95,16 @@ exampleButton.addEventListener("click", (e) => { output.innerHTML = `validation message: ${exampleButton.validationMessage}
    custom error: ${exampleButton.validationMessage}`; }); -const breakOrFixButton = () => { +function breakOrFixButton() { const state = toggleButton(); if (state === "error") { exampleButton.setCustomValidity("This is a custom error message"); } else { exampleButton.setCustomValidity(""); } -}; +} -const toggleButton = () => { +function toggleButton() { if (exampleButton.value === "error") { exampleButton.value = "fixed"; exampleButton.innerHTML = "No error"; @@ -113,7 +113,7 @@ const toggleButton = () => { exampleButton.innerHTML = "Custom error"; } return exampleButton.value; -}; +} ``` #### Results diff --git a/files/en-us/web/api/htmlformelement/reset_event/index.md b/files/en-us/web/api/htmlformelement/reset_event/index.md index 72b52b9c6c7dd3e..145fd5b64d3963d 100644 --- a/files/en-us/web/api/htmlformelement/reset_event/index.md +++ b/files/en-us/web/api/htmlformelement/reset_event/index.md @@ -42,12 +42,13 @@ This example uses {{domxref("EventTarget.addEventListener()")}} to listen for fo ### JavaScript ```js +const form = document.getElementById("form"); +const log = document.getElementById("log"); + function logReset(event) { log.textContent = `Form reset! Timestamp: ${event.timeStamp}`; } -const form = document.getElementById("form"); -const log = document.getElementById("log"); form.addEventListener("reset", logReset); ``` diff --git a/files/en-us/web/api/htmlformelement/submit_event/index.md b/files/en-us/web/api/htmlformelement/submit_event/index.md index e3fca4d9c22b751..a3b8c321f10ccb6 100644 --- a/files/en-us/web/api/htmlformelement/submit_event/index.md +++ b/files/en-us/web/api/htmlformelement/submit_event/index.md @@ -64,13 +64,14 @@ This example uses {{domxref("EventTarget.addEventListener()")}} to listen for fo ### JavaScript ```js +const form = document.getElementById("form"); +const log = document.getElementById("log"); + function logSubmit(event) { log.textContent = `Form Submitted! Timestamp: ${event.timeStamp}`; event.preventDefault(); } -const form = document.getElementById("form"); -const log = document.getElementById("log"); form.addEventListener("submit", logSubmit); ``` diff --git a/files/en-us/web/api/htmlinputelement/reportvalidity/index.md b/files/en-us/web/api/htmlinputelement/reportvalidity/index.md index ae9f5b7793c32d2..64f67259caed9f3 100644 --- a/files/en-us/web/api/htmlinputelement/reportvalidity/index.md +++ b/files/en-us/web/api/htmlinputelement/reportvalidity/index.md @@ -123,19 +123,19 @@ reportButton.addEventListener("click", () => { } }); -const validateAge = () => { - const validityState_object = ageInput.validity; - if (validityState_object.valueMissing) { +function validateAge() { + const validityState = ageInput.validity; + if (validityState.valueMissing) { ageInput.setCustomValidity("Please set an age (required)"); - } else if (ageInput.rangeUnderflow) { + } else if (validityState.rangeUnderflow) { ageInput.setCustomValidity("Your value is too low"); - } else if (ageInput.rangeOverflow) { + } else if (validityState.rangeOverflow) { ageInput.setCustomValidity("Your value is too high"); } else if (enableValidation) { // sets to empty string if valid AND enableValidation has been set to true ageInput.setCustomValidity(""); } -}; +} ``` #### Results diff --git a/files/en-us/web/api/htmlvideoelement/cancelvideoframecallback/index.md b/files/en-us/web/api/htmlvideoelement/cancelvideoframecallback/index.md index e6c824611b8a02b..d7ff37413b71c5c 100644 --- a/files/en-us/web/api/htmlvideoelement/cancelvideoframecallback/index.md +++ b/files/en-us/web/api/htmlvideoelement/cancelvideoframecallback/index.md @@ -32,6 +32,9 @@ None ({{jsxref("undefined")}}). This example shows how to use `cancelVideoFrameCallback()` to cancel a previously-registered video frame callback. ```js +// Initial registration of the callback to run on the first frame +let videoCallbackId = video.requestVideoFrameCallback(updateCanvas); + const updateCanvas = (now, metadata) => { // Do something with the frame @@ -43,9 +46,6 @@ const updateCanvas = (now, metadata) => { videoCallbackId = video.requestVideoFrameCallback(updateCanvas); }; -// Initial registration of the callback to run on the first frame -let videoCallbackId = video.requestVideoFrameCallback(updateCanvas); - // … // Cancel video frame callback using the latest videoCallbackId diff --git a/files/en-us/web/api/idbtransaction/error_event/index.md b/files/en-us/web/api/idbtransaction/error_event/index.md index 692ecbdd4dbf84a..79f6ca3d65e5bc5 100644 --- a/files/en-us/web/api/idbtransaction/error_event/index.md +++ b/files/en-us/web/api/idbtransaction/error_event/index.md @@ -63,10 +63,6 @@ dBOpenRequest.onsuccess = (event) => { // open a read/write db transaction, ready for adding the data const transaction = db.transaction(["toDoList"], "readwrite"); - transaction.addEventListener("error", () => { - console.log(`Error adding new item: ${newItem.taskTitle}`); - }); - const objectStore = transaction.objectStore("toDoList"); const newItem = { taskTitle: "my task", @@ -77,6 +73,10 @@ dBOpenRequest.onsuccess = (event) => { year: 2020, }; + transaction.addEventListener("error", () => { + console.log(`Error adding new item: ${newItem.taskTitle}`); + }); + const objectStoreRequest = objectStore.add(newItem); }; ``` diff --git a/files/en-us/web/api/intersection_observer_api/timing_element_visibility/index.md b/files/en-us/web/api/intersection_observer_api/timing_element_visibility/index.md index b5dd16b08cfaa0a..cc0f2fca84f876f 100644 --- a/files/en-us/web/api/intersection_observer_api/timing_element_visibility/index.md +++ b/files/en-us/web/api/intersection_observer_api/timing_element_visibility/index.md @@ -232,6 +232,15 @@ const adObserver = new IntersectionObserver( ); const refreshIntervalID = setInterval(handleRefreshInterval, 1000); +const loremIpsum = + "

    Lorem ipsum dolor sit amet, consectetur adipiscing" + + " elit. Cras at sem diam. Vestibulum venenatis massa in tincidunt" + + " egestas. Morbi eu lorem vel est sodales auctor hendrerit placerat" + + " risus. Etiam rutrum faucibus sem, vitae mattis ipsum ullamcorper" + + " eu. Donec nec imperdiet nibh, nec vehicula libero. Phasellus vel" + + " malesuada nulla. Aliquam sed magna aliquam, vestibulum nisi at," + + " cursus nunc.

    "; + buildContents(); ``` @@ -241,6 +250,8 @@ Next we set up the options for the {{domxref("IntersectionObserver")}} which wil The observer, `adObserver`, is created by calling `IntersectionObserver`'s constructor, passing in the callback function, `intersectionCallback`, and our options. +The variable `loremIpsum` contains the text we'll use for the body of all of our articles. Obviously in the real world, you'd have some code to pull articles from a database or the like, but this does the job for our purposes. Every article uses the same text; you could of course change that easily enough. + We then call a function `buildContents()`, which we'll define later to actually generate and insert into the document the articles and ads we want to present. Finally, we set up an interval which triggers once a second to handle any necessary refreshing. We need a one second refresh since we're displaying timers in all visible ads for the purposes of this example. You may not need an interval at all, or you might do it differently or using a different time interval. @@ -397,15 +408,6 @@ This code finds the ad's timer using its ID, `"timer"`, and computes the number The `buildContents()` function is called by the [startup code](#setting_up) to select and insert into the document the articles and ads to be presented: ```js -const loremIpsum = - "

    Lorem ipsum dolor sit amet, consectetur adipiscing" + - " elit. Cras at sem diam. Vestibulum venenatis massa in tincidunt" + - " egestas. Morbi eu lorem vel est sodales auctor hendrerit placerat" + - " risus. Etiam rutrum faucibus sem, vitae mattis ipsum ullamcorper" + - " eu. Donec nec imperdiet nibh, nec vehicula libero. Phasellus vel" + - " malesuada nulla. Aliquam sed magna aliquam, vestibulum nisi at," + - " cursus nunc.

    "; - function buildContents() { for (let i = 0; i < 5; i++) { contentBox.appendChild(createArticle(loremIpsum)); @@ -417,8 +419,6 @@ function buildContents() { } ``` -The variable `loremIpsum` contains the text we'll use for the body of all of our articles. Obviously in the real world, you'd have some code to pull articles from a database or the like, but this does the job for our purposes. Every article uses the same text; you could of course change that easily enough. - `buildContents()` creates a page with five articles. Following every odd-numbered article, an ad is "loaded" and inserted into the page. Articles are inserted into the content box (that is, the {{HTMLElement("main")}} element that contains all the site content) after being created using a method called `createArticle()`, which we'll look at next. The ads are created using a function called `loadRandomAd()`, which both creates the ad and inserts it into the page. We'll see later that this same function can also replace an existing ad, but for now, we're appending ads to the existing content. diff --git a/files/en-us/web/api/mediastreamtrack/mute_event/index.md b/files/en-us/web/api/mediastreamtrack/mute_event/index.md index 68dc3941db16a68..805f15e8c7dcb81 100644 --- a/files/en-us/web/api/mediastreamtrack/mute_event/index.md +++ b/files/en-us/web/api/mediastreamtrack/mute_event/index.md @@ -67,16 +67,7 @@ musicTrack.onunmute = (event) => { The following example shows how to mute tracks using receivers. ```js -// Peer 1 (Receiver) -audioTrack.addEventListener("mute", (event) => { - // Do something in UI -}); - -videoTrack.addEventListener("mute", (event) => { - // Do something in UI -}); - -// Peer 2 (Sender) +// Peer 1 (Sender) const transceivers = peer.getTransceivers(); const audioTrack = transceivers[0]; @@ -84,6 +75,15 @@ audioTrack.direction = "recvonly"; const videoTrack = transceivers[1]; videoTrack.direction = "recvonly"; + +// Peer 2 (Receiver) +audioTrack.addEventListener("mute", (event) => { + // Do something in UI +}); + +videoTrack.addEventListener("mute", (event) => { + // Do something in UI +}); ``` `transceivers` is an array of {{domxref("RTCRtpTransceiver")}} where you can find the audio or video track sent and received. For more information, see the {{domxref("RTCRtpTransceiver.direction", "direction")}} article. diff --git a/files/en-us/web/api/mediastreamtrack/unmute_event/index.md b/files/en-us/web/api/mediastreamtrack/unmute_event/index.md index d98e96c840c1411..ec54ea83ffcbdf1 100644 --- a/files/en-us/web/api/mediastreamtrack/unmute_event/index.md +++ b/files/en-us/web/api/mediastreamtrack/unmute_event/index.md @@ -65,16 +65,7 @@ musicTrack.onunmute = (event) => { The following example shows how to unmute tracks using receivers. ```js -// Peer 1 (Receiver) -audioTrack.addEventListener("unmute", (event) => { - // Do something in UI -}); - -videoTrack.addEventListener("unmute", (event) => { - // Do something in UI -}); - -// Peer 2 (Sender) +// Peer 1 (Sender) const transceivers = peer.getTransceivers(); const audioTrack = transceivers[0]; @@ -82,6 +73,15 @@ audioTrack.direction = "sendrecv"; const videoTrack = transceivers[1]; videoTrack.direction = "sendrecv"; + +// Peer 2 (Receiver) +audioTrack.addEventListener("unmute", (event) => { + // Do something in UI +}); + +videoTrack.addEventListener("unmute", (event) => { + // Do something in UI +}); ``` `transceivers` is an array of {{domxref("RTCRtpTransceiver")}} where you can find the audio or video track sent and received. For more information, see the {{domxref("RTCRtpTransceiver.direction", "direction")}} article. diff --git a/files/en-us/web/api/mouseevent/movementx/index.md b/files/en-us/web/api/mouseevent/movementx/index.md index 1baf787bf4d2786..f1e70612fd76a16 100644 --- a/files/en-us/web/api/mouseevent/movementx/index.md +++ b/files/en-us/web/api/mouseevent/movementx/index.md @@ -31,6 +31,8 @@ This example logs the amount of mouse movement using `movementX` and {{domxref(" ### JavaScript ```js +const log = document.getElementById("log"); + function logMovement(event) { log.insertAdjacentHTML( "afterbegin", @@ -39,7 +41,6 @@ function logMovement(event) { while (log.childNodes.length > 128) log.lastChild.remove(); } -const log = document.getElementById("log"); document.addEventListener("mousemove", logMovement); ``` diff --git a/files/en-us/web/api/mouseevent/movementy/index.md b/files/en-us/web/api/mouseevent/movementy/index.md index e85b6f5daecb6fb..96e44ac19f769bd 100644 --- a/files/en-us/web/api/mouseevent/movementy/index.md +++ b/files/en-us/web/api/mouseevent/movementy/index.md @@ -31,11 +31,12 @@ This example logs the amount of mouse movement using {{domxref("MouseEvent.movem ### JavaScript ```js +const log = document.getElementById("log"); + function logMovement(event) { log.innerText = `movement: ${event.movementX}, ${event.movementY}\n${log.innerText}`; } -const log = document.getElementById("log"); document.addEventListener("mousemove", logMovement); ``` diff --git a/files/en-us/web/api/paymentrequest/shippingaddresschange_event/index.md b/files/en-us/web/api/paymentrequest/shippingaddresschange_event/index.md index f11b354943c42d8..f7bb3dd33fda4ef 100644 --- a/files/en-us/web/api/paymentrequest/shippingaddresschange_event/index.md +++ b/files/en-us/web/api/paymentrequest/shippingaddresschange_event/index.md @@ -47,24 +47,24 @@ In this example, a handler for the `shippingaddresschange` event is set up to va const paymentRequest = new PaymentRequest(methodData, details, options); paymentRequest.addEventListener("shippingaddresschange", (event) => { - let detailsUpdate = checkAddress(paymentRequest.shippingAddress); + const detailsUpdate = checkAddress(paymentRequest.shippingAddress); event.updateWith(detailsUpdate); }); -const checkAddress = (theAddress) => { - let detailsUpdate = {}; +function checkAddress(theAddress) { + const detailsUpdate = {}; // Check the address, return an object with any changes or errors. return detailsUpdate; -}; +} ``` You can also establish a handler for `shippingaddresschange` using the `onshippingaddresschange` event handler property: ```js paymentRequest.onshippingaddresschange = (event) => { - let detailsUpdate = checkAddress(paymentRequest.shippingAddress); + const detailsUpdate = checkAddress(paymentRequest.shippingAddress); event.updateWith(detailsUpdate); }; ``` diff --git a/files/en-us/web/api/response/json_static/index.md b/files/en-us/web/api/response/json_static/index.md index 6baeb32cb218dd1..6d0166b6a07a81b 100644 --- a/files/en-us/web/api/response/json_static/index.md +++ b/files/en-us/web/api/response/json_static/index.md @@ -64,16 +64,16 @@ function log(text) { } async function logResponse(response) { - const responseText = await jsonResponse.text(); + const responseText = await response.text(); log(`body: ${responseText}`); - jsonResponse.headers.forEach((header) => log(`header: ${header}`)); - log(`status: ${jsonResponse.status}`); - log(`statusText: ${jsonResponse.statusText}`); - log(`type: ${jsonResponse.type}`); - log(`url: ${jsonResponse.url}`); - log(`ok: ${jsonResponse.ok}`); - log(`redirected: ${jsonResponse.redirected}`); - log(`bodyUsed: ${jsonResponse.bodyUsed}`); + response.headers.forEach((header) => log(`header: ${header}`)); + log(`status: ${response.status}`); + log(`statusText: ${response.statusText}`); + log(`type: ${response.type}`); + log(`url: ${response.url}`); + log(`ok: ${response.ok}`); + log(`redirected: ${response.redirected}`); + log(`bodyUsed: ${response.bodyUsed}`); } ``` @@ -104,16 +104,16 @@ function log(text) { } async function logResponse(response) { - const responseText = await jsonResponse.text(); + const responseText = await response.text(); log(`body: ${responseText}`); - jsonResponse.headers.forEach((header) => log(`header: ${header}`)); - log(`status: ${jsonResponse.status}`); - log(`statusText: ${jsonResponse.statusText}`); - log(`type: ${jsonResponse.type}`); - log(`url: ${jsonResponse.url}`); - log(`ok: ${jsonResponse.ok}`); - log(`redirected: ${jsonResponse.redirected}`); - log(`bodyUsed: ${jsonResponse.bodyUsed}`); + response.headers.forEach((header) => log(`header: ${header}`)); + log(`status: ${response.status}`); + log(`statusText: ${response.statusText}`); + log(`type: ${response.type}`); + log(`url: ${response.url}`); + log(`ok: ${response.ok}`); + log(`redirected: ${response.redirected}`); + log(`bodyUsed: ${response.bodyUsed}`); } ``` diff --git a/files/en-us/web/api/sourcebuffer/abort_event/index.md b/files/en-us/web/api/sourcebuffer/abort_event/index.md index 356fbea0cb13773..9cba0c4d9bf8dfd 100644 --- a/files/en-us/web/api/sourcebuffer/abort_event/index.md +++ b/files/en-us/web/api/sourcebuffer/abort_event/index.md @@ -8,7 +8,7 @@ browser-compat: api.SourceBuffer.abort_event {{APIRef("Media Source Extensions")}}{{AvailableInWorkers("window_and_dedicated")}} -The **`abort`** event of the {{domxref("SourceBuffer")}} interface is fired when the buffer appending is aborted, because the {{domxref("SourceBuffer.abort()")}} or {{domxref("SourceBuffer.removeSourceBuffer()")}} method is called while the {{domxref("SourceBuffer.appendBuffer()")}} algorithm is still running. The {{domxref("SourceBuffer.updating", "updating")}} property transitions from `true` to `false`. This event is fired before the {{domxref("SourceBuffer.updateend_event", "updateend")}} event. +The **`abort`** event of the {{domxref("SourceBuffer")}} interface is fired when the buffer appending is aborted, because the {{domxref("SourceBuffer.abort()")}} or {{domxref("SourceBuffer.remove()")}} method is called while the {{domxref("SourceBuffer.appendBuffer()")}} algorithm is still running. The {{domxref("SourceBuffer.updating", "updating")}} property transitions from `true` to `false`. This event is fired before the {{domxref("SourceBuffer.updateend_event", "updateend")}} event. ## Syntax diff --git a/files/en-us/web/api/speechrecognition/index.md b/files/en-us/web/api/speechrecognition/index.md index e80bc6807cea976..0e82b879d6a3b53 100644 --- a/files/en-us/web/api/speechrecognition/index.md +++ b/files/en-us/web/api/speechrecognition/index.md @@ -90,7 +90,7 @@ Listen to these events using [`addEventListener()`](/en-US/docs/Web/API/EventTar ## Examples -In our [Speech color changer](https://mdn.github.io/dom-examples/web-speech-api/speech-color-changer) example, we create a new `SpeechRecognition` object instance using the {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} constructor. +In our [Speech color changer](https://mdn.github.io/dom-examples/web-speech-api/speech-color-changer/) example, we create a new `SpeechRecognition` object instance using the {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} constructor. After some other values have been defined, we then set it so that the recognition service starts when a button is clicked (see {{domxref("SpeechRecognition.start()")}}). When a result has been successfully recognized, the {{domxref("SpeechRecognition.result_event", "result")}} event fires, we extract the color that was spoken from the event object, and then set the background color of the {{htmlelement("html")}} element to that color. diff --git a/files/en-us/web/api/speechrecognition/start/index.md b/files/en-us/web/api/speechrecognition/start/index.md index 4e8850302cfee14..3c7d5e47a518d6c 100644 --- a/files/en-us/web/api/speechrecognition/start/index.md +++ b/files/en-us/web/api/speechrecognition/start/index.md @@ -37,7 +37,7 @@ None ({{jsxref("undefined")}}). ### Recognizing speech from a microphone -In our [Speech color changer](https://mdn.github.io/dom-examples/web-speech-api/speech-color-changer) example, we create a new `SpeechRecognition` object instance using the {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} constructor. Later on, we create a `click` event handler on a `