From 7aab76c49ae49d606b4958f8dc8cd1269fb7b9b6 Mon Sep 17 00:00:00 2001 From: 720 <71604450+T34-active@users.noreply.github.com> Date: Mon, 29 Apr 2024 16:26:20 +0800 Subject: [PATCH 01/19] chore: remove the link in code blocks that will not work (#33306) --- files/en-us/web/http/headers/accept/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/http/headers/accept/index.md b/files/en-us/web/http/headers/accept/index.md index aa70c31d2d45789..83e3d9c2724be87 100644 --- a/files/en-us/web/http/headers/accept/index.md +++ b/files/en-us/web/http/headers/accept/index.md @@ -39,7 +39,7 @@ Accept: / Accept: /* Accept: */* -// Multiple types, weighted with the {{glossary("quality values", "quality value")}} syntax: +// Multiple types, weighted with the quality value syntax: Accept: text/html, application/xhtml+xml, application/xml;q=0.9, image/webp, */*;q=0.8 ``` From cbe37032c94ef804f24e6e37624102fa31e861c7 Mon Sep 17 00:00:00 2001 From: Jean-Yves Perrier Date: Mon, 29 Apr 2024 13:06:09 +0200 Subject: [PATCH 02/19] Add HTMLTable*Element member to add/remove rows (#33307) --- .../api/htmltableelement/deleterow/index.md | 4 + .../api/htmltableelement/insertrow/index.md | 13 +- .../api/htmltablerowelement/rowindex/index.md | 8 +- .../sectionrowindex/index.md | 77 ++++++++++ .../deleterow/index.md | 128 +++++++++++++++++ .../insertrow/index.md | 136 ++++++++++++++++++ .../api/htmltablesectionelement/rows/index.md | 109 ++++++++++++++ 7 files changed, 464 insertions(+), 11 deletions(-) create mode 100644 files/en-us/web/api/htmltablerowelement/sectionrowindex/index.md create mode 100644 files/en-us/web/api/htmltablesectionelement/deleterow/index.md create mode 100644 files/en-us/web/api/htmltablesectionelement/insertrow/index.md create mode 100644 files/en-us/web/api/htmltablesectionelement/rows/index.md diff --git a/files/en-us/web/api/htmltableelement/deleterow/index.md b/files/en-us/web/api/htmltableelement/deleterow/index.md index 490a360c4584df4..a4c4a24e6050b4f 100644 --- a/files/en-us/web/api/htmltableelement/deleterow/index.md +++ b/files/en-us/web/api/htmltableelement/deleterow/index.md @@ -79,3 +79,7 @@ table.deleteRow(1); ## Browser compatibility {{Compat}} + +## See also + +- {{domxref("HTMLTableSectionElement.deleteRow()")}} diff --git a/files/en-us/web/api/htmltableelement/insertrow/index.md b/files/en-us/web/api/htmltableelement/insertrow/index.md index 9a0898624c46221..e0b00855a12220e 100644 --- a/files/en-us/web/api/htmltableelement/insertrow/index.md +++ b/files/en-us/web/api/htmltableelement/insertrow/index.md @@ -8,18 +8,13 @@ browser-compat: api.HTMLTableElement.insertRow {{APIRef("HTML DOM")}} -The **`HTMLTableElement.insertRow()`** method inserts a new row +The **`insertRow()`** method of the {{domxref("HTMLTableElement")}} interface inserts a new row ({{HtmlElement("tr")}}) in a given {{HtmlElement("table")}}, and returns a reference to the new row. If a table has multiple {{HtmlElement("tbody")}} elements, by default, the new row is -inserted into the last ``. To insert the row into a specific -``: - -```js -let specific_tbody = document.getElementById(tbody_id); -let row = specific_tbody.insertRow(index); -``` +inserted into the last ``. +To insert the row into a specific section, use {{domxref("HTMLTableSectionElement.insertRow()")}} > **Note:** `insertRow()` inserts the row directly into the > table. The row does not need to be appended separately as would be the case if @@ -115,4 +110,4 @@ addRow("my-table"); ## See also - {{domxref("HTMLTableRowElement.insertCell()")}} -- The HTML element representing rows: {{domxref("HTMLTableRowElement")}} +- {{domxref("HTMLTableSectionElement.insertRow()")}} diff --git a/files/en-us/web/api/htmltablerowelement/rowindex/index.md b/files/en-us/web/api/htmltablerowelement/rowindex/index.md index b4bed1c1041fc19..7d1da4d6e8280a5 100644 --- a/files/en-us/web/api/htmltablerowelement/rowindex/index.md +++ b/files/en-us/web/api/htmltablerowelement/rowindex/index.md @@ -8,8 +8,8 @@ browser-compat: api.HTMLTableRowElement.rowIndex {{ APIRef("HTML DOM") }} -The **`HTMLTableRowElement.rowIndex`** read-only property -represents the position of a row in relation to the whole {{HtmlElement("table")}}. +The **`rowIndex`** read-only property of the {{domxref("HTMLTableRowElement")}} interface +represents the position of a row within the whole {{HtmlElement("table")}}. Even when the {{HtmlElement("thead")}}, {{HtmlElement("tbody")}}, and {{HtmlElement("tfoot")}} elements are out of order in the HTML, browsers render the @@ -77,3 +77,7 @@ rows.forEach((row) => { ## Browser compatibility {{Compat}} + +## See also + +- {{domxref("HTMLTableRowElement.sectionRowIndex")}} diff --git a/files/en-us/web/api/htmltablerowelement/sectionrowindex/index.md b/files/en-us/web/api/htmltablerowelement/sectionrowindex/index.md new file mode 100644 index 000000000000000..d582136ca4575c2 --- /dev/null +++ b/files/en-us/web/api/htmltablerowelement/sectionrowindex/index.md @@ -0,0 +1,77 @@ +--- +title: "HTMLTableRowElement: sectionRowIndex property" +short-title: rowIndex +slug: Web/API/HTMLTableRowElement/sectionRowIndex +page-type: web-api-instance-property +browser-compat: api.HTMLTableRowElement.sectionRowIndex +--- + +{{ APIRef("HTML DOM") }} + +The **`sectionRowIndex`** read-only property of the {{domxref("HTMLTableRowElement")}} interface +represents the position of a row within the current section ({{htmlelement("thead")}}, {{htmlelement("tbody")}}, or {{htmlelement("tfoot")}}). + +## Value + +Returns the index of the row, or `-1` if the row is not part of the section. + +## Examples + +This example uses JavaScript to label all the row numbers of the `tbody`. + +### HTML + +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ItemPrice
Bananas$2
Oranges$8
Top Sirloin$20
Total$30
+``` + +### JavaScript + +```js +let rows = document.querySelectorAll("tbody tr"); + +rows.forEach((row) => { + let z = document.createElement("td"); + z.textContent = `(row #${row.rowIndex})`; + row.appendChild(z); +}); +``` + +### Result + +{{EmbedLiveSample("Examples")}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLTableRowElement.rowIndex")}} diff --git a/files/en-us/web/api/htmltablesectionelement/deleterow/index.md b/files/en-us/web/api/htmltablesectionelement/deleterow/index.md new file mode 100644 index 000000000000000..b61abe5618da845 --- /dev/null +++ b/files/en-us/web/api/htmltablesectionelement/deleterow/index.md @@ -0,0 +1,128 @@ +--- +title: "HTMLTableSectionElement: deleteRow() method" +short-title: deleteRow() +slug: Web/API/HTMLTableSectionElement/deleteRow +page-type: web-api-instance-method +browser-compat: api.HTMLTableSectionElement.deleteRow +--- + +{{APIRef("HTML DOM")}} + +The **`deleteRow()`** method of the {{domxref("HTMLTableSectionElement")}} interface removes a +specific row ({{HtmlElement("tr")}}) from a given {{HtmlElement("section")}}. + +## Syntax + +```js-nolint +deleteRow(index) +``` + +### Parameters + +- `index` + - : `index` is an integer representing the row that should be deleted. + However, the special index `-1` can be used to remove the very last row of + the section. + +### Return value + +None ({{jsxref("undefined")}}). + +### Exceptions + +- `IndexSizeError` {{domxref("DOMException")}} + - : Thrown if `index` is greater than or equal to the number of available rows or is a negative value other than `-1`. + +## Examples + +In this example, two buttons allow you to add and remove rows from the table body section; it also updates a {{HTMLElement("output")}} element with the number of rows currently in the table. + +### HTML + +```html + + + + + + + + + + + + + +
Col 1Col 2Col 3
XYZ
+ + +
This table's body has 1 row(s).
+``` + +```css hidden +table { + border-collapse: collapse; +} + +th, +td { + border: 1px solid black; +} + +button { + margin: 1em 1em 1em 0; +} +``` + +### Javascript + +```js +// Obtain relevant interface elements +const bodySection = document.querySelectorAll("tbody")[0]; +const rows = bodySection.rows; // The collection is live, therefore always up-to-date +const rowNumberDisplay = document.querySelectorAll("output")[0]; + +const addButton = document.getElementById("add"); +const removeButton = document.getElementById("remove"); + +function updateRowNumber() { + rowNumberDisplay.textContent = rows.length; +} + +addButton.addEventListener("click", () => { + // Add a new row at the end of the body + const newRow = bodySection.insertRow(); + + // Add cells inside the new row + ["A", "B", "C"].forEach( + (elt) => (newRow.insertCell().textContent = `${elt}${rows.length}`), + ); + + // Update the row counter + updateRowNumber(); +}); + +removeButton.addEventListener("click", () => { + // Delete the row from the body + bodySection.deleteRow(-1); + + // Update the row counter + updateRowNumber(); +}); +``` + +### Result + +{{EmbedLiveSample("Examples", "100%", 175)}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLTableElement.deleteRow()")}} diff --git a/files/en-us/web/api/htmltablesectionelement/insertrow/index.md b/files/en-us/web/api/htmltablesectionelement/insertrow/index.md new file mode 100644 index 000000000000000..5d5db6b37dcc4d4 --- /dev/null +++ b/files/en-us/web/api/htmltablesectionelement/insertrow/index.md @@ -0,0 +1,136 @@ +--- +title: "HTMLTableSectionElement: insertRow() method" +short-title: insertRow() +slug: Web/API/HTMLTableSectionElement/insertRow +page-type: web-api-instance-method +browser-compat: api.HTMLTableSectionElement.insertRow +--- + +{{APIRef("HTML DOM")}} + +The **`insertRow()`** method of the {{domxref("HTMLTableSectionElement")}} interface inserts a new row +({{HtmlElement("tr")}}) in the given {{HtmlElement("section")}}, and returns a reference to +this new row. + +> **Note:** `insertRow()` inserts the row directly into the +> section. The row does not need to be appended separately as would be the case if +> {{domxref("Document.createElement()")}} had been used to create the new +> `` element. + +## Syntax + +```js-nolint +insertRow() +insertRow(index) +``` + +### Parameters + +- `index` {{optional_inline}} + - : The row index of the new row. If `index` is `-1` or equal to + the number of rows, the row is appended as the last row. + If `index` is omitted it defaults to `-1`. + +### Return value + +An {{domxref("HTMLTableRowElement")}} that references the new row. + +### Exceptions + +- `IndexSizeError` {{domxref("DOMException")}} + - : Thrown if `index` is greater than the number of rows, or smaller than `-1`. + +## Examples + +In this example, two buttons allow you to add and remove rows from the table body section; it also updates a {{HTMLElement("output")}} element with the number of rows currently in the table. + +### HTML + +```html + + + + + + + + + + + + + +
Col 1Col 2Col 3
XYZ
+ + +
This table's body has 1 row(s).
+``` + +```css hidden +table { + border-collapse: collapse; +} + +th, +td { + border: 1px solid black; +} + +button { + margin: 1em 1em 1em 0; +} +``` + +### Javascript + +```js +// Obtain relevant interface elements +const bodySection = document.querySelectorAll("tbody")[0]; +const rows = bodySection.rows; // The collection is live, therefore always up-to-date +const rowNumberDisplay = document.querySelectorAll("output")[0]; + +const addButton = document.getElementById("add"); +const removeButton = document.getElementById("remove"); + +function updateRowNumber() { + rowNumberDisplay.textContent = rows.length; +} + +addButton.addEventListener("click", () => { + // Add a new row at the end of the body + const newRow = bodySection.insertRow(); + + // Add cells inside the new row + ["A", "B", "C"].forEach( + (elt) => (newRow.insertCell().textContent = `${elt}${rows.length}`), + ); + + // Update the row counter + updateRowNumber(); +}); + +removeButton.addEventListener("click", () => { + // Delete the row from the body + bodySection.deleteRow(-1); + + // Update the row counter + updateRowNumber(); +}); +``` + +### Result + +{{EmbedLiveSample("Examples", "100%", 175)}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLTableRowElement.insertCell()")}} +- {{domxref("HTMLTableElement.insertRow()")}} diff --git a/files/en-us/web/api/htmltablesectionelement/rows/index.md b/files/en-us/web/api/htmltablesectionelement/rows/index.md new file mode 100644 index 000000000000000..5d517357282678c --- /dev/null +++ b/files/en-us/web/api/htmltablesectionelement/rows/index.md @@ -0,0 +1,109 @@ +--- +title: "HTMLTableSectionElement: rows property" +short-title: rows +slug: Web/API/HTMLTableSectionElement/rows +page-type: web-api-instance-property +browser-compat: api.HTMLTableSectionElement.rows +--- + +{{APIRef("HTML DOM")}} + +The **`rows`** read-only property of the {{domxref("HTMLTableSectionElement")}} interface returns a live {{domxref("HTMLCollection")}} containing the rows in the section. The `HTMLCollection` is live and is automatically updated when rows are added or removed. + +## Value + +A live {{domxref("HTMLCollection")}} of {{domxref("HTMLTableRowElement")}} objects. + +## Examples + +In this example, two buttons allow you to add and remove rows from the table body section; it also updates a {{HTMLElement("output")}} element with the number of rows currently in the table. + +### HTML + +```html + + + + + + + + + + + + + +
Col 1Col 2Col 3
XYZ
+ + +
This table's body has 1 row(s).
+``` + +```css hidden +table { + border-collapse: collapse; +} + +th, +td { + border: 1px solid black; +} + +button { + margin: 1em 1em 1em 0; +} +``` + +### Javascript + +```js +// Obtain relevant interface elements +const bodySection = document.querySelectorAll("tbody")[0]; +const rows = bodySection.rows; // The collection is live, therefore always up-to-date +const rowNumberDisplay = document.querySelectorAll("output")[0]; + +const addButton = document.getElementById("add"); +const removeButton = document.getElementById("remove"); + +function updateRowNumber() { + rowNumberDisplay.textContent = rows.length; +} + +addButton.addEventListener("click", () => { + // Add a new row at the end of the body + const newRow = bodySection.insertRow(); + + // Add cells inside the new row + ["A", "B", "C"].forEach( + (elt) => (newRow.insertCell().textContent = `${elt}${rows.length}`), + ); + + // Update the row counter + updateRowNumber(); +}); + +removeButton.addEventListener("click", () => { + // Delete the row from the body + bodySection.deleteRow(-1); + + // Update the row counter + updateRowNumber(); +}); +``` + +### Result + +{{EmbedLiveSample("Examples", "100%", 175)}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("text-align")}} From 151cdeeba58ffc07f8673af4e303cb1fcbba1bff Mon Sep 17 00:00:00 2001 From: Chris <96254264+addmorebass@users.noreply.github.com> Date: Mon, 29 Apr 2024 10:59:22 -0500 Subject: [PATCH 03/19] Better clarification on Doubles (#33311) * Better clarification on Doubles * Update index.md --------- Co-authored-by: Joshua Chen --- files/en-us/learn/javascript/first_steps/math/index.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/files/en-us/learn/javascript/first_steps/math/index.md b/files/en-us/learn/javascript/first_steps/math/index.md index 9d41df10a7280e5..d97a6cda9008ef7 100644 --- a/files/en-us/learn/javascript/first_steps/math/index.md +++ b/files/en-us/learn/javascript/first_steps/math/index.md @@ -34,15 +34,14 @@ This article discusses only the basic parts that you need to know now. In programming, even the humble decimal number system that we all know so well is more complicated than you might think. We use different terms to describe different types of decimal numbers, for example: -- **Integers** are floating-point numbers without a fraction. They can either be positive or negative, e.g. 10, 400, or -5. +- **Integers** are numbers without a fractional part. They can either be positive or negative, e.g. 10, 400, or -5. - **Floating point numbers** (floats) have decimal points and decimal places, for example 12.5, and 56.7786543. -- **Doubles** are a specific type of floating point number that have greater precision than standard floating point numbers (meaning that they are accurate to a greater number of decimal places). -We even have different types of number systems! Decimal is base 10 (meaning it uses 0–9 in each column), but we also have things like: +We even have different types of number systems! Decimal is base 10 (meaning it uses 0–9 in each digit), but we also have things like: - **Binary** — The lowest level language of computers; 0s and 1s. -- **Octal** — Base 8, uses 0–7 in each column. -- **Hexadecimal** — Base 16, uses 0–9 and then a–f in each column. You may have encountered these numbers before when setting [colors in CSS](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#hexadecimal_values). +- **Octal** — Base 8, uses 0–7 in each digit. +- **Hexadecimal** — Base 16, uses 0–9 and then a–f in each digit. You may have encountered these numbers before when setting [colors in CSS](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#hexadecimal_values). **Before you start to get worried about your brain melting, stop right there!** For a start, we are just going to stick to decimal numbers throughout this course; you'll rarely come across a need to start thinking about other types, if ever. From 2ae0fc1f2db3682ebbf5676ccc2e7975dc714dad Mon Sep 17 00:00:00 2001 From: Natalia Date: Mon, 29 Apr 2024 13:10:28 -0300 Subject: [PATCH 04/19] Document two JS errors with classes (#32857) * Add the articles * Fix bad example; swap examples * Fixup arguments_not_allowed article * Fix indent * More fixing indentation * Not conflate constructor and regular methods * Remove confusing linebreak in example * Update index.md * Update index.md --------- Co-authored-by: Joshua Chen --- .../errors/arguments_not_allowed/index.md | 76 +++++++++++++++++++ .../cant_delete_private_fields/index.md | 51 +++++++++++++ 2 files changed, 127 insertions(+) create mode 100644 files/en-us/web/javascript/reference/errors/arguments_not_allowed/index.md create mode 100644 files/en-us/web/javascript/reference/errors/cant_delete_private_fields/index.md diff --git a/files/en-us/web/javascript/reference/errors/arguments_not_allowed/index.md b/files/en-us/web/javascript/reference/errors/arguments_not_allowed/index.md new file mode 100644 index 000000000000000..02d18571f4cd8a7 --- /dev/null +++ b/files/en-us/web/javascript/reference/errors/arguments_not_allowed/index.md @@ -0,0 +1,76 @@ +--- +title: "SyntaxError: arguments is not valid in fields" +slug: Web/JavaScript/Reference/Errors/Arguments_not_allowed +page-type: javascript-error +--- + +{{jsSidebar("Errors")}} + +The JavaScript exception "SyntaxError: arguments is not valid in fields" occurs when the [`arguments`](/en-US/docs/Web/JavaScript/Reference/Functions/arguments) identifier is read in a class field initializer or in a static initialization block, outside of a non-[arrow function](/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions). + +## Message + +```plain +SyntaxError: 'arguments' is not allowed in class field initializer or static initialization block (V8-based) +SyntaxError: arguments is not valid in fields (Firefox) +SyntaxError: Unexpected identifier 'arguments'. Cannot reference 'arguments' in class field initializer. (Safari) +``` + +## Error type + +{{jsxref("SyntaxError")}} + +## What went wrong? + +A class field initializer expression or a class static initialization block does not have `arguments` in its scope. Trying to access it is a syntax error. + +- This is true even if `arguments` is bound in a parent scope (such as when the class is nested in a non-arrow function). +- A non-arrow function declared within this scope will still bind its own `arguments` and read it normally. + +## Examples + +```js example-bad +function makeOne() { + class C { + args = { ...arguments }; // SyntaxError: arguments is not valid in fields + } + return new C(); +} +``` + +```js example-bad +let CArgs; +class C { + static { + CArgs = arguments; // SyntaxError: arguments is not valid in fields + } +} +``` + +```js example-good +class C { + args = {}; + constructor() { + this.args = arguments; // You can use arguments in constructors + } + myMethod() { + this.args = arguments; // You can also use it in methods + } +} +``` + +```js example-good +function makeOne() { + const _arguments = arguments; + class C { + args = { ..._arguments }; // Only the identifier is forbidden + } + return new C(); +} +``` + +## See also + +- [Classes](/en-US/docs/Web/JavaScript/Reference/Classes) +- [Public class fields](/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields) +- [Static initialization blocks](/en-US/docs/Web/JavaScript/Reference/Classes/Static_initialization_blocks) diff --git a/files/en-us/web/javascript/reference/errors/cant_delete_private_fields/index.md b/files/en-us/web/javascript/reference/errors/cant_delete_private_fields/index.md new file mode 100644 index 000000000000000..4e3e501d47b52d7 --- /dev/null +++ b/files/en-us/web/javascript/reference/errors/cant_delete_private_fields/index.md @@ -0,0 +1,51 @@ +--- +title: "SyntaxError: private fields can't be deleted" +slug: Web/JavaScript/Reference/Errors/Cant_delete_private_fields +page-type: javascript-error +--- + +{{jsSidebar("Errors")}} + +The JavaScript exception "SyntaxError: private fields can't be deleted" occurs when [`delete`](/en-US/docs/Web/JavaScript/Reference/Operators/delete) is used on a [private property](/en-US/docs/Web/JavaScript/Reference/Classes/Private_properties) of a class or an object. + +## Message + +```plain +SyntaxError: Private fields can not be deleted (V8-based) +SyntaxError: private fields can't be deleted (Firefox) +SyntaxError: Cannot delete private field X (Safari) +``` + +## Error type + +{{jsxref("SyntaxError")}} + +## What went wrong? + +There's code trying to `delete` a private property (field or method) of an object or a class. This is forbidden by Javascript—private properties cannot be added or removed on the fly. + +## Examples + +```js example-bad +class MyClass { + #myPrivateField; + deleteIt() { + delete this.#myPrivateField; // SyntaxError: private fields can't be deleted + } +} +``` + +```js example-bad +class MyClass { + #myPrivateMethod() { + } + #deleteIt() { + delete this.#myPrivateMethod; // SyntaxError: private fields can't be deleted + } +} +``` + +## See also + +- [Classes](/en-US/docs/Web/JavaScript/Reference/Classes) +- [Private properties](/en-US/docs/Web/JavaScript/Reference/Classes/Private_properties) From 168f11e6c6a00ad35610633273a4dd0b758fadcf Mon Sep 17 00:00:00 2001 From: rezabet <99049802+rezabet@users.noreply.github.com> Date: Mon, 29 Apr 2024 20:20:42 +0400 Subject: [PATCH 05/19] Fix typo (#33308) --- files/en-us/web/css/hex-color/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/hex-color/index.md b/files/en-us/web/css/hex-color/index.md index 83c751da4ac9d44..bb3b483944d14dd 100644 --- a/files/en-us/web/css/hex-color/index.md +++ b/files/en-us/web/css/hex-color/index.md @@ -62,7 +62,7 @@ This example includes four hot pink squares, with fully opaque or semi-transpare #### CSS -The hot pink background colors are created using the three-, four-, size-, and eight-value hex notations, using both uppercase and lowercase letters. +The hot pink background colors are created using the three-, four-, six-, and eight-value hex notations, using both uppercase and lowercase letters. ```css hidden body { From 8a87564f9a6b2b3af682bc57a794060c85a78f72 Mon Sep 17 00:00:00 2001 From: Victorien <65306057+Viicos@users.noreply.github.com> Date: Mon, 29 Apr 2024 18:23:33 +0200 Subject: [PATCH 06/19] Fix description of CSP example (#33312) --- files/en-us/web/http/headers/content-security-policy/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/http/headers/content-security-policy/index.md b/files/en-us/web/http/headers/content-security-policy/index.md index 6e997935fb7adf1..8bdce363b2d0d5d 100644 --- a/files/en-us/web/http/headers/content-security-policy/index.md +++ b/files/en-us/web/http/headers/content-security-policy/index.md @@ -262,7 +262,7 @@ Content-Security-Policy: connect-src http://example.com/; ## Examples Example: Disable unsafe inline/eval, only allow loading of resources (images, fonts, -scripts, etc.) over https: +scripts, etc.) over http: ### Using the HTTP header From 145e8c316fcdd8f67f3595fc52b0bbfacf7b949d Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Tue, 30 Apr 2024 02:50:53 +1000 Subject: [PATCH 07/19] Bigint multiplication assignment fix (#32534) * BigInt fix on multiplication assignment * BigInt fixes on other operators * Update index.md * Update index.md * Fixups --------- Co-authored-by: Joshua Chen --- .../reference/operators/addition/index.md | 36 ++++++++------- .../operators/addition_assignment/index.md | 45 ++++++++----------- .../reference/operators/division/index.md | 41 ++++++++++------- .../operators/division_assignment/index.md | 16 ++++++- .../operators/exponentiation/index.md | 23 +++++++++- .../exponentiation_assignment/index.md | 16 +++++-- .../operators/multiplication/index.md | 16 ++++--- .../multiplication_assignment/index.md | 14 +++++- .../reference/operators/subtraction/index.md | 20 ++++----- .../operators/subtraction_assignment/index.md | 12 ++++- 10 files changed, 156 insertions(+), 83 deletions(-) diff --git a/files/en-us/web/javascript/reference/operators/addition/index.md b/files/en-us/web/javascript/reference/operators/addition/index.md index decac2b1dcbc4ee..b2f4cb62c54f2f2 100644 --- a/files/en-us/web/javascript/reference/operators/addition/index.md +++ b/files/en-us/web/javascript/reference/operators/addition/index.md @@ -38,46 +38,48 @@ You are advised to not use `"" + x` to perform [string coercion](/en-US/docs/Web ## Examples -### Number addition +### Addition using numbers ```js -// Number + Number -> addition 1 + 2; // 3 +``` -// Boolean + Number -> addition -true + 1; // 2 +Other non-string, non-BigInt values are coerced to numbers: -// Boolean + Boolean -> addition +```js +true + 1; // 2 false + false; // 0 ``` -### BigInt addition +### Addion using BigInts ```js -// BigInt + BigInt -> addition 1n + 2n; // 3n +``` + +You cannot mix BigInt and number operands in addition. -// BigInt + Number -> throws TypeError +```js example-bad 1n + 2; // TypeError: Cannot mix BigInt and other types, use explicit conversions +2 + 1n; // TypeError: Cannot mix BigInt and other types, use explicit conversions +"1" + 2n; // TypeError: Cannot mix BigInt and other types, use explicit conversions +``` -// To add a BigInt to a non-BigInt, convert either operand +To do addition with a BigInt and a non-BigInt, convert either operand: + +```js 1n + BigInt(2); // 3n Number(1n) + 2; // 3 ``` -### String concatenation +### Addition using strings + +If one of the operands is a string, the other is converted to a string and they are concatenated: ```js -// String + String -> concatenation "foo" + "bar"; // "foobar" - -// Number + String -> concatenation 5 + "foo"; // "5foo" - -// String + Boolean -> concatenation "foo" + false; // "foofalse" - -// String + Number -> concatenation "2" + 2; // "22" ``` diff --git a/files/en-us/web/javascript/reference/operators/addition_assignment/index.md b/files/en-us/web/javascript/reference/operators/addition_assignment/index.md index 617ec22209c8d83..a634ffa41109f5b 100644 --- a/files/en-us/web/javascript/reference/operators/addition_assignment/index.md +++ b/files/en-us/web/javascript/reference/operators/addition_assignment/index.md @@ -23,46 +23,39 @@ x += y ## Examples -### Using addition assignment +### Addition assignment using numbers ```js -let baz = true; +let bar = 5; +bar += 2; // 7 +``` -// Boolean + Number -> addition -baz += 1; // 2 +Other non-string, non-BigInt values are coerced to numbers: -// Number + Boolean -> addition +```js +let baz = true; +baz += 1; // 2 baz += false; // 2 ``` -```js -let foo = "foo"; - -// String + Boolean -> concatenation -foo += false; // "foofalse" - -// String + String -> concatenation -foo += "bar"; // "foofalsebar" -``` +### Addition assignment using BigInts ```js -let bar = 5; - -// Number + Number -> addition -bar += 2; // 7 +let x = 1n; +x += 2n; // 3n -// Number + String -> concatenation -bar += "foo"; // "7foo" +x += 1; // TypeError: Cannot mix BigInt and other types, use explicit conversions ``` -```js -let x = 1n; +### Addition assignment using strings -// BigInt + BigInt -> addition -x += 2n; // 3n +```js +let foo = "foo"; +foo += false; // "foofalse" +foo += "bar"; // "foofalsebar" -// BigInt + Number -> throws TypeError -x += 1; // TypeError: Cannot mix BigInt and other types, use explicit conversions +let bar = 5; +bar += "foo"; // "5foo" ``` ## Specifications diff --git a/files/en-us/web/javascript/reference/operators/division/index.md b/files/en-us/web/javascript/reference/operators/division/index.md index cfabdeae7508d85..3ff66384f0e4cc3 100644 --- a/files/en-us/web/javascript/reference/operators/division/index.md +++ b/files/en-us/web/javascript/reference/operators/division/index.md @@ -25,37 +25,48 @@ For BigInt division, the result is the quotient of the two operands truncated to ## Examples -### Basic division +### Division using numbers ```js 1 / 2; // 0.5 - Math.floor(3 / 2); // 1 - 1.0 / 2.0; // 0.5 +2 / 0; // Infinity +2.0 / 0.0; // Infinity, because 0.0 === 0 +2.0 / -0.0; // -Infinity +``` + +Other non-BigInt values are coerced to numbers: + +```js +5 / "2"; // 2.5 +5 / "foo"; // NaN +``` + +### Division using BigInts + +```js 1n / 2n; // 0n 5n / 3n; // 1n -1n / 3n; // 0n 1n / -3n; // 0n -2n / 2; // TypeError: Cannot mix BigInt and other types, use explicit conversions - -// To do division with a BigInt and a non-BigInt, convert either operand -2n / BigInt(2); // 1n -Number(2n) / 2; // 1 +2n / 0n; // RangeError: BigInt division by zero ``` -### Division by zero +You cannot mix BigInt and number operands in division. -```js -2.0 / 0; // Infinity - -2.0 / 0.0; // Infinity, because 0.0 === 0 +```js example-bad +2n / 2; // TypeError: Cannot mix BigInt and other types, use explicit conversions +2 / 2n; // TypeError: Cannot mix BigInt and other types, use explicit conversions +``` -2.0 / -0.0; // -Infinity +To do division with a BigInt and a non-BigInt, convert either operand: -2n / 0n; // RangeError: Division by zero +```js +2n / BigInt(2); // 1n +Number(2n) / 2; // 1 ``` ## Specifications diff --git a/files/en-us/web/javascript/reference/operators/division_assignment/index.md b/files/en-us/web/javascript/reference/operators/division_assignment/index.md index bd8fc6a231641fb..db5c801fca2cc1b 100644 --- a/files/en-us/web/javascript/reference/operators/division_assignment/index.md +++ b/files/en-us/web/javascript/reference/operators/division_assignment/index.md @@ -23,7 +23,7 @@ x /= y ## Examples -### Using division assignment +### Division assignment using numbers ```js let bar = 5; @@ -31,11 +31,25 @@ let bar = 5; bar /= 2; // 2.5 bar /= 2; // 1.25 bar /= 0; // Infinity +``` + +Other non-BigInt values are coerced to numbers: + +```js +let bar = 5; +bar /= "2"; // 2.5 bar /= "foo"; // NaN +``` + +### Division assignment using BigInts +```js let foo = 3n; foo /= 2n; // 1n foo /= 2n; // 0n + +foo /= 0n; // RangeError: BigInt division by zero +foo /= 1; // TypeError: Cannot mix BigInt and other types, use explicit conversions ``` ## Specifications diff --git a/files/en-us/web/javascript/reference/operators/exponentiation/index.md b/files/en-us/web/javascript/reference/operators/exponentiation/index.md index 59510fc66a3a74c..fcfc42580161e52 100644 --- a/files/en-us/web/javascript/reference/operators/exponentiation/index.md +++ b/files/en-us/web/javascript/reference/operators/exponentiation/index.md @@ -39,7 +39,7 @@ Note that some programming languages use the caret symbol `^` for exponentiation ## Examples -### Basic exponentiation +### Exponentiation using numbers ```js 2 ** 3; // 8 @@ -50,13 +50,32 @@ Note that some programming languages use the caret symbol `^` for exponentiation NaN ** 2; // NaN NaN ** 0; // 1 1 ** Infinity; // NaN +``` + +Other non-BigInt values are coerced to numbers: + +```js +2 ** "3"; // 8 +2 ** "hello"; // NaN +``` + +### Exponentiation using BigInts +```js 2n ** 3n; // 8n 2n ** 1024n; // A very large number, but not Infinity +``` + +You cannot mix BigInt and number operands in exponentiation. +```js example-bad 2n ** 2; // TypeError: Cannot mix BigInt and other types, use explicit conversions +2 ** 2n; // TypeError: Cannot mix BigInt and other types, use explicit conversions +``` + +To do exponentiation with a BigInt and a non-BigInt, convert either operand: -// To do exponentiation with a BigInt and a non-BigInt, convert either operand +```js 2n ** BigInt(2); // 4n Number(2n) ** 2; // 4 ``` diff --git a/files/en-us/web/javascript/reference/operators/exponentiation_assignment/index.md b/files/en-us/web/javascript/reference/operators/exponentiation_assignment/index.md index 06910b3b82ef154..ec106ff5cffe1a6 100644 --- a/files/en-us/web/javascript/reference/operators/exponentiation_assignment/index.md +++ b/files/en-us/web/javascript/reference/operators/exponentiation_assignment/index.md @@ -23,16 +23,26 @@ x **= y ## Examples -### Using exponentiation assignment +### Exponentiation assignment using numbers ```js let bar = 5; - bar **= 2; // 25 -bar **= "foo"; // NaN +``` + +Other non-BigInt values are coerced to numbers: + +```js +let baz = 5; +baz **= "foo"; // NaN +``` +### Exponentiation assignment using BigInts + +```js let foo = 3n; foo **= 2n; // 9n +foo **= 1; // TypeError: Cannot mix BigInt and other types, use explicit conversions ``` ## Specifications diff --git a/files/en-us/web/javascript/reference/operators/multiplication/index.md b/files/en-us/web/javascript/reference/operators/multiplication/index.md index 961615ae33a6d1a..c09d4199931ca68 100644 --- a/files/en-us/web/javascript/reference/operators/multiplication/index.md +++ b/files/en-us/web/javascript/reference/operators/multiplication/index.md @@ -28,16 +28,12 @@ The `*` operator is overloaded for two types of operands: number and [BigInt](/e ```js 2 * 2; // 4 -2 * 2; // -4 -``` - -### Multiplication with Infinity -```js Infinity * 0; // NaN Infinity * Infinity; // Infinity ``` -### Multiplication with non-numbers +Other non-BigInt values are coerced to numbers: ```js "foo" * 2; // NaN @@ -49,10 +45,18 @@ Infinity * Infinity; // Infinity ```js 2n * 2n; // 4n -2n * 2n; // -4n +``` +You cannot mix BigInt and number operands in multiplication. + +```js example-bad 2n * 2; // TypeError: Cannot mix BigInt and other types, use explicit conversions +2 * 2n; // TypeError: Cannot mix BigInt and other types, use explicit conversions +``` -// To multiply a BigInt with a non-BigInt, convert either operand +To do multiplication with a BigInt and a non-BigInt, convert either operand: + +```js 2n * BigInt(2); // 4n Number(2n) * 2; // 4 ``` diff --git a/files/en-us/web/javascript/reference/operators/multiplication_assignment/index.md b/files/en-us/web/javascript/reference/operators/multiplication_assignment/index.md index e01ea3319a47a81..0f6666fe5644171 100644 --- a/files/en-us/web/javascript/reference/operators/multiplication_assignment/index.md +++ b/files/en-us/web/javascript/reference/operators/multiplication_assignment/index.md @@ -23,16 +23,26 @@ x *= y ## Examples -### Using multiplication assignment +### Multiplication assignment using numbers ```js let bar = 5; - bar *= 2; // 10 +``` + +Other non-BigInt values are coerced to numbers: + +```js +let bar = 5; bar *= "foo"; // NaN +``` +### Multiplication assignment using BigInts + +```js let foo = 3n; foo *= 2n; // 6n +foo *= 1; // TypeError: Cannot mix BigInt and other types, use explicit conversions ``` ## Specifications diff --git a/files/en-us/web/javascript/reference/operators/subtraction/index.md b/files/en-us/web/javascript/reference/operators/subtraction/index.md index 7b7edbd26edaafb..f739c18e419bc77 100644 --- a/files/en-us/web/javascript/reference/operators/subtraction/index.md +++ b/files/en-us/web/javascript/reference/operators/subtraction/index.md @@ -23,30 +23,23 @@ The `-` operator is overloaded for two types of operands: number and [BigInt](/e ## Examples -### Subtraction with numbers +### Subtraction using numbers ```js -// Number - Number -> subtraction 5 - 3; // 2 - -// Number - Number -> subtraction 3 - 5; // -2 ``` -### Subtraction with non-numbers +Other non-BigInt values are coerced to numbers: ```js -// String - Number -> subtraction "foo" - 3; // NaN; "foo" is converted to the number NaN - -// Number - String -> subtraction 5 - "3"; // 2; "3" is converted to the number 3 ``` -### Subtraction with BigInts +### Subtraction using BigInts ```js -// BigInt - BigInt -> subtraction 2n - 1n; // 1n ``` @@ -57,6 +50,13 @@ You cannot mix BigInt and number operands in subtraction. 2 - 1n; // TypeError: Cannot mix BigInt and other types, use explicit conversions ``` +To do subtraction with a BigInt and a non-BigInt, convert either operand: + +```js +2n - BigInt(1); // 1n +Number(2n) - 1; // 1 +``` + ## Specifications {{Specifications}} diff --git a/files/en-us/web/javascript/reference/operators/subtraction_assignment/index.md b/files/en-us/web/javascript/reference/operators/subtraction_assignment/index.md index 5c2508ee0dc6d4d..ab4eb8f6bc2aed1 100644 --- a/files/en-us/web/javascript/reference/operators/subtraction_assignment/index.md +++ b/files/en-us/web/javascript/reference/operators/subtraction_assignment/index.md @@ -23,16 +23,26 @@ x -= y ## Examples -### Using subtraction assignment +### Subtraction assignment using numbers ```js let bar = 5; bar -= 2; // 3 +``` + +Other non-BigInt values are coerced to numbers: + +```js bar -= "foo"; // NaN +``` + +### Subtraction assignment using BigInts +```js let foo = 3n; foo -= 2n; // 1n +foo -= 1; // TypeError: Cannot mix BigInt and other types, use explicit conversions ``` ## Specifications From 3b11785e384572a33ab9202868dadc862a2843d0 Mon Sep 17 00:00:00 2001 From: wbamberg Date: Mon, 29 Apr 2024 10:00:00 -0700 Subject: [PATCH 08/19] Fix issue 31817: embed output in another iframe (#32263) * Fix issue 31817: embed output in another iframe * Remove unneeded CSS * Remove CSS from the right example... --------- Co-authored-by: Joshua Chen --- .../building_blocks/conditionals/index.md | 121 +++++++++--------- 1 file changed, 62 insertions(+), 59 deletions(-) diff --git a/files/en-us/learn/javascript/building_blocks/conditionals/index.md b/files/en-us/learn/javascript/building_blocks/conditionals/index.md index 2fcf2cef61c59d2..604edfb6dfbbe42 100644 --- a/files/en-us/learn/javascript/building_blocks/conditionals/index.md +++ b/files/en-us/learn/javascript/building_blocks/conditionals/index.md @@ -678,25 +678,14 @@ If you make a mistake, you can always reset the example with the "Reset" button. ```html hidden

Live output

-
- - - -

This is my website

-
+

Editable code

Press Esc to move focus away from the code area (Tab inserts a tab character).

-