fix external image flaws in Web/JavaScript (#2945)

files/en-us/web/javascript/eventloop/index.html

@@ -21,7 +21,7 @@ <h2 id="Runtime_concepts">Runtime concepts</h2>
 
 <h3 id="Visual_representation">Visual representation</h3>
 
-<p style="text-align: center;"><img alt="Stack, heap, queue" src="https://mdn.mozillademos.org/files/17124/The_Javascript_Runtime_Environment_Example.svg" style="height: 271px; width: 295px;"></p>
+<p style="text-align: center;"><img alt="Stack, heap, queue" src="the_javascript_runtime_environment_example.svg"></p>
 
 <h3 id="Stack">Stack</h3>
 
@@ -76,7 +76,7 @@ <h3 id="Adding_messages">Adding messages</h3>
 
 <p>In web browsers, messages are added anytime an event occurs and there is an event listener attached to it. If there is no listener, the event is lost. So a click on an element with a click event handler will add a message—likewise with any other event.</p>
 
-<p>The function <code><a href="/en-US/docs/Web/API/WindowTimers.setTimeout">setTimeout</a></code> is called with 2 arguments: a message to add to the queue, and a time value (optional; defaults to <code>0</code>). The <em>time value</em> represents the (minimum) delay after which the message will actually be pushed into the queue. If there is no other message in the queue, and the stack is empty, the message is processed right after the delay. However, if there are messages, the <code>setTimeout</code> message will have to wait for other messages to be processed. For this reason, the second argument indicates a <em>minimum</em> time—not a <em>guaranteed</em> time.<br>
+<p>The function <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout</a></code> is called with 2 arguments: a message to add to the queue, and a time value (optional; defaults to <code>0</code>). The <em>time value</em> represents the (minimum) delay after which the message will actually be pushed into the queue. If there is no other message in the queue, and the stack is empty, the message is processed right after the delay. However, if there are messages, the <code>setTimeout</code> message will have to wait for other messages to be processed. For this reason, the second argument indicates a <em>minimum</em> time—not a <em>guaranteed</em> time.<br>
  <br>
  Here is an example that demonstrates this concept (<code>setTimeout</code> does not run immediately after its timer expires):</p>
 
@@ -97,7 +97,7 @@ <h3 id="Adding_messages">Adding messages</h3>
 
 <h3 id="Zero_delays">Zero delays</h3>
 
-<p>Zero delay doesn't actually mean the call back will fire-off after zero milliseconds. Calling <a href="/en-US/docs/Web/API/WindowTimers/setTimeout" title="The documentation about this has not yet been written; please consider contributing!"><code>setTimeout</code></a> with a delay of <code>0</code> (zero) milliseconds doesn't execute the callback function after the given interval.</p>
+<p>Zero delay doesn't actually mean the call back will fire-off after zero milliseconds. Calling <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout" title="The documentation about this has not yet been written; please consider contributing!"><code>setTimeout</code></a> with a delay of <code>0</code> (zero) milliseconds doesn't execute the callback function after the given interval.</p>
 
 <p>The execution depends on the number of waiting tasks in the queue. In the example below, the message <code>''this is just a message''</code> will be written to the console before the message in the callback gets processed, because the delay is the <em>minimum</em> time required for the runtime to process the request (not a <em>guaranteed</em> time).</p>
 
@@ -130,7 +130,7 @@ <h3 id="Zero_delays">Zero delays</h3>
 
 <h3 id="Several_runtimes_communicating_together">Several runtimes communicating together</h3>
 
-<p>A web worker or a cross-origin <code>iframe</code> has its own stack, heap, and message queue. Two distinct runtimes can only communicate through sending messages via the <a href="/en-US/docs/DOM/window.postMessage"><code>postMessage</code></a> method. This method adds a message to the other runtime if the latter listens to <code>message</code> events.</p>
+<p>A web worker or a cross-origin <code>iframe</code> has its own stack, heap, and message queue. Two distinct runtimes can only communicate through sending messages via the <a href="/en-US/docs/Web/API/Window/postMessage"><code>postMessage</code></a> method. This method adds a message to the other runtime if the latter listens to <code>message</code> events.</p>
 
 <h2 id="Never_blocking">Never blocking</h2>
 

files/en-us/web/javascript/guide/details_of_the_object_model/index.html

@@ -6,7 +6,7 @@
   - Intermediate
   - JavaScript
   - Object
-  - 'l10n:priority'
+  - l10n:priority
 ---
 <div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Using_promises")}}</div>
 
@@ -104,7 +104,7 @@ <h2 id="The_employee_example">The employee example</h2>
 <div style="display: table-cell; width: 350px; text-align: center; vertical-align: middle; padding: 10px;">
 <p>A simple object hierarchy with the following objects:</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/3060/figure8.1.png"></p>
+<p><img alt="" src="figure8.1.png"></p>
 </div>
 
 <div style="display: table-cell; vertical-align: middle; padding: 10px;">
@@ -236,7 +236,7 @@ <h4 id="Object_hierarchy">Object hierarchy</h4>
 
 <p>The following hierarchy is created using the code on the right side.</p>
 
-<p><img src="https://mdn.mozillademos.org/files/10412/=figure8.3.png"></p>
+<p><img src="figure8.3.png"></p>
 
 <h4 id="Individual_objects_Jim_Sally_Mark_Fred_Jane_etc._Instances_created_from_constructor">Individual objects = Jim, Sally, Mark, Fred, Jane, etc.<br>
  "Instances" created from constructor</h4>
@@ -315,14 +315,14 @@ <h3 id="Adding_properties">Adding properties</h3>
 
 <p>As soon as JavaScript executes this statement, the <code>mark</code> object also has the <code>specialty</code> property with the value of <code>"none"</code>. The following figure shows the effect of adding this property to the <code>Employee</code> prototype and then overriding it for the <code>Engineer</code> prototype.</p>
 
-<p><img alt="" class="internal" src="/@api/deki/files/4422/=figure8.4.png" style="height: 519px; width: 833px;"><br>
+<p><img alt="" class="internal" src="figure8.4.png"><br>
  <small><strong>Adding properties</strong></small></p>
 
 <h2 id="More_flexible_constructors">More flexible constructors</h2>
 
 <p>The constructor functions shown so far do not let you specify property values when you create an instance. As with Java, you can provide arguments to constructors to initialize property values for instances. The following figure shows one way to do this.</p>
 
-<p><img alt="" class="internal" id="figure8.5" src="/@api/deki/files/4423/=figure8.5.png" style="height: 481px; width: 1012px;"><br>
+<p><img alt="" class="internal" id="figure8.5" src="figure8.5.png"><br>
  <small><strong>Specifying properties in a constructor, take 1</strong></small></p>
 
 <p>The following pairs of examples show the Java and JavaScript definitions for these objects.</p>
@@ -415,7 +415,7 @@ <h2 id="More_flexible_constructors">More flexible constructors</h2>
 
 <p>So far, the constructor function has created a generic object and then specified local properties and values for the new object. You can have the constructor add more properties by directly calling the constructor function for an object higher in the prototype chain. The following figure shows these new definitions.</p>
 
-<p><img alt="" class="internal" src="/@api/deki/files/4430/=figure8.6.png" style="height: 534px; width: 1063px;"><br>
+<p><img alt="" class="internal" src="figure8.6.png"><br>
  <small><strong>Specifying properties in a constructor, take 2</strong></small></p>
 
 <p>Let's look at one of these definitions in detail. Here's the new definition for the <code>Engineer</code> constructor:</p>

files/en-us/web/javascript/guide/indexed_collections/index.html

@@ -4,7 +4,7 @@
 tags:
   - Guide
   - JavaScript
-  - 'l10n:priority'
+  - l10n:priority
 ---
 <div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}</div>
 
@@ -29,7 +29,7 @@ <h3 id="Creating_an_array">Creating an array</h3>
 
 <p><code><var>element0</var>, <var>element1</var>, ..., <var>elementN</var></code> is a list of values for the array's elements. When these values are specified, the array is initialized with them as the array's elements. The array's <code>length</code> property is set to the number of arguments.</p>
 
-<p>The bracket syntax is called an "array literal" or "array initializer." It's shorter than other forms of array creation, and so is generally preferred. See <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Array_literals">Array literals</a> for details.</p>
+<p>The bracket syntax is called an "array literal" or "array initializer." It's shorter than other forms of array creation, and so is generally preferred. See <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#array_literals">Array literals</a> for details.</p>
 
 <p>To create an array with non-zero length, but without any items, either of the following can be used:</p>
 
@@ -167,7 +167,7 @@ <h3 id="Iterating_over_arrays">Iterating over arrays</h3>
 }
 </pre>
 
-<p>If you know that none of the elements in your array evaluate to <code>false</code> in a boolean context—if your array consists only of <a href="/en-US/docs/DOM">DOM</a> nodes, for example—you can use a more efficient idiom:</p>
+<p>If you know that none of the elements in your array evaluate to <code>false</code> in a boolean context—if your array consists only of <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a> nodes, for example—you can use a more efficient idiom:</p>
 
 <pre class="brush: js">let divs = document.getElementsByTagName('div')
 for (let i = 0, div; div = divs[i]; i++) {
@@ -435,9 +435,9 @@ <h3 id="Using_arrays_to_store_other_properties">Using arrays to store other prop
 
 <p>Arrays can also be used like objects, to store related information.</p>
 
-<pre class="brush: js"><code>const arr = [1, 2, 3];
-arr.property = "value";
-console.log(arr.property);  // Logs "value"</code>
+<pre class="brush: js">const arr = [1, 2, 3];
+arr.property = &quot;value&quot;;
+console.log(arr.property);  // Logs &quot;value&quot;
 </pre>
 
 <h3 id="Arrays_and_regular_expressions">Arrays and regular expressions</h3>
@@ -450,20 +450,20 @@ <h3 id="Working_with_array-like_objects">Working with array-like objects</h3>
 
 <p>Array methods cannot be called directly on array-like objects.</p>
 
-<pre class="brush: js example-bad"><code>function printArguments() {
-  arguments.forEach(function(item) {  // <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox-stackTrace reps-custom-format">TypeError: <span class="objectBox objectBox-string">arguments.forEach is not a function</span></span></span></span></span>
+<pre class="brush: js example-bad">function printArguments() {
+  arguments.forEach(function(item) {  // TypeError: arguments.forEach is not a function
     console.log(item);
   });
-}</code>
+}
 </pre>
 
 <p>But you can call them indirectly using {{jsxref("Global_Objects/Function/call","Function.prototype.call()")}}.</p>
 
-<pre class="brush: js example-good"><code>function printArguments() {
+<pre class="brush: js example-good">function printArguments() {
   Array.prototype.forEach.call(arguments, function(item) {
     console.log(item);
   });
-}</code>
+}
 </pre>
 
 <p>Array prototype methods can be used on strings as well, since they provide sequential access to their characters in a similar way to arrays:</p>
@@ -475,13 +475,13 @@ <h3 id="Working_with_array-like_objects">Working with array-like objects</h3>
 
 <h2 id="Typed_Arrays">Typed Arrays</h2>
 
-<p><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a> are array-like objects and provide a mechanism for accessing raw binary data. As you already know, {{jsxref("Array")}} objects grow and shrink dynamically and can have any JavaScript value. JavaScript engines perform optimizations so that these arrays are fast. However, as web applications become more and more powerful, adding features such as audio and video manipulation, access to raw data using <a href="/en-US/docs/WebSockets">WebSockets</a>, and so forth, it has become clear that there are times when it would be helpful for JavaScript code to be able to quickly and easily manipulate raw binary data in typed arrays.</p>
+<p><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a> are array-like objects and provide a mechanism for accessing raw binary data. As you already know, {{jsxref("Array")}} objects grow and shrink dynamically and can have any JavaScript value. JavaScript engines perform optimizations so that these arrays are fast. However, as web applications become more and more powerful, adding features such as audio and video manipulation, access to raw data using <a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a>, and so forth, it has become clear that there are times when it would be helpful for JavaScript code to be able to quickly and easily manipulate raw binary data in typed arrays.</p>
 
 <h3 id="Buffers_and_views_typed_array_architecture">Buffers and views: typed array architecture</h3>
 
 <p>To achieve maximum flexibility and efficiency, JavaScript typed arrays split the implementation into <strong>buffers</strong> and <strong>views</strong>. A buffer (implemented by the {{jsxref("ArrayBuffer")}} object) is an object representing a chunk of data; it has no format to speak of, and offers no mechanism for accessing its contents. In order to access the memory contained in a buffer, you need to use a view. A view provides a <strong>context </strong>— that is, a data type, starting offset, and number of elements — that turns the data into an actual typed array.</p>
 
-<p><img alt="Typed arrays in an ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png" style="height: 278px; width: 666px;"></p>
+<p><img alt="Typed arrays in an ArrayBuffer" src="typed_arrays.png"></p>
 
 <h3 id="ArrayBuffer">ArrayBuffer</h3>
 

files/en-us/web/javascript/guide/introduction/index.html

@@ -6,7 +6,7 @@
   - Guide
   - Introduction
   - JavaScript
-  - 'l10n:priority'
+  - l10n:priority
 ---
 <div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</div>
 
@@ -17,7 +17,7 @@ <h2 id="What_you_should_already_know">What you should already know</h2>
 <p>This guide assumes you have the following basic background:</p>
 
 <ul>
- <li>A general understanding of the Internet and the World Wide Web (<a href="/en-US/docs/Glossary/WWW">WWW</a>).</li>
+ <li>A general understanding of the Internet and the World Wide Web (<a href="/en-US/docs/Glossary/World_Wide_Web">WWW</a>).</li>
  <li>Good working knowledge of HyperText Markup Language (<a href="/en-US/docs/Glossary/HTML">HTML</a>).</li>
  <li>Some programming experience. If you are new to programming, try one of the tutorials linked on the main page about <a href="/en-US/docs/Web/JavaScript">JavaScript</a>.</li>
 </ul>
@@ -115,19 +115,19 @@ <h3 id="Single-line_input_in_the_Web_Console">Single-line input in the Web Conso
 
 <p>The Web Console appears at the bottom of the browser window. Along the bottom of the console is an input line that you can use to enter JavaScript, and the output appears in the panel above:</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/16569/2019-04-04_00-15-29.png"></p>
+<p><img alt="" src="2019-04-04_00-15-29.png"></p>
 
 <p>The console works the exact same way as <code>eval</code>: the last expression entered is returned. For the sake of simplicity, it can be imagined that every time something is entered into the console, it is actually surrounded by <code>console.log</code> around <code>eval</code>, like so:</p>
 
 <pre class="brush: js">function greetMe(yourName) {
-  alert("Hello " + yourName)
+  alert(&quot;Hello &quot; + yourName)
 }
-<code>console.log(eval('3 + 5'))</code>
+console.log(eval('3 + 5'))
 </pre>
 
 <h3 id="Multi-line_input_in_the_Web_Console">Multi-line input in the Web Console</h3>
 
-<p>The single-line input mode of the Web Console is great for quick testing of JavaScript expressions, but although you can execute multiple lines, it's not very convenient for that. For more complex JavaScript, you can use the <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Multi-line_mode">multi-line line input mode</a>.</p>
+<p>The single-line input mode of the Web Console is great for quick testing of JavaScript expressions, but although you can execute multiple lines, it's not very convenient for that. For more complex JavaScript, you can use the <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#multi-line_mode">multi-line line input mode</a>.</p>
 
 <h3 id="Hello_world">Hello world</h3>
 

files/en-us/web/javascript/reference/global_objects/math/atan2/index.html

@@ -2,10 +2,10 @@
 title: Math.atan2()
 slug: Web/JavaScript/Reference/Global_Objects/Math/atan2
 tags:
-- JavaScript
-- Math
-- Method
-- Reference
+  - JavaScript
+  - Math
+  - Method
+  - Reference
 ---
 <div>{{JSRef}}</div>
 
@@ -64,8 +64,7 @@ <h2 id="Description">Description</h2>
 </p>
 
 <p><img alt="A simple diagram showing the angle returned by atan2(y, x)"
-    src="https://mdn.mozillademos.org/files/11557/atan2.png"
-    style="height: 300px; width: 300px;"></p>
+    src="atan2.png"></p>
 
 <p><code>Math.atan2()</code> is passed separate <code>x</code> and <code>y</code>
   arguments, and

files/en-us/web/javascript/reference/global_objects/math/index.html

@@ -139,7 +139,7 @@ <h3 id="Calculating_the_height_of_an_equilateral_triangle">Calculating the heigh
 
 <p>If we want to calculate the height of an equilateral triangle, and we know its side length is 100, we can use the formulae <em>length of the adjacent multiplied by the tangent of the angle is equal to the opposite.</em></p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14829/trigonometry.png" style="display: block; margin: 0 auto;"></p>
+<p><img alt="" src="trigonometry.png" style="display: block; margin: 0 auto;"></p>
 
 <p>In JavaScript, we can do this with the following:</p>
 

files/en-us/web/javascript/reference/global_objects/promise/index.html

@@ -33,7 +33,7 @@ <h2 id="Description">Description</h2>
 
 <p>As the <code>{{JSxRef("Promise.then", "Promise.prototype.then()")}}</code> and <code>{{JSxRef("Promise.catch", "Promise.prototype.catch()")}}</code> methods return promises, they can be chained.</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15911/promises.png" style="height: 297px; width: 801px;"></p>
+<p><img alt="" src="promises.png"></p>
 
 <div class="notecard note">
 <p><strong>Not to be confused with:</strong> Several other languages have mechanisms for lazy evaluation and deferring a computation, which they also call "promises", e.g. Scheme. Promises in JavaScript represent processes that are already happening, which can be chained with callback functions. If you are looking to lazily evaluate an expression, consider the <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function</a> with no arguments: <code>f = () =&gt; <em>expression</em></code> to create the lazily-evaluated expression, and <code>f()</code> to evaluate.</p>
@@ -335,7 +335,7 @@ <h3 id="Advanced_Example">Advanced Example</h3>
 </pre>
 </div>
 
-<p>This small example shows the mechanism of a <code>Promise</code>. The <code>testPromise()</code> method is called each time the {{HTMLElement("button")}} is clicked. It creates a promise that will be fulfilled, using {{domxref("window.setTimeout()")}}, to the promise count (number starting from 1) every 1-3 seconds, at random. The <code>Promise()</code> constructor is used to create the promise.</p>
+<p>This small example shows the mechanism of a <code>Promise</code>. The <code>testPromise()</code> method is called each time the {{HTMLElement("button")}} is clicked. It creates a promise that will be fulfilled, using {{domxref("WindowOrWorkerGlobalScope.setTimeout")}}, to the promise count (number starting from 1) every 1-3 seconds, at random. The <code>Promise()</code> constructor is used to create the promise.</p>
 
 <p>The fulfillment of the promise is logged, via a fulfill callback set using {{JSxRef("Promise.prototype.then()","p1.then()")}}. A few logs show how the synchronous part of the method is decoupled from the asynchronous completion of the promise.</p>