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.
-The function setTimeout is called with 2 arguments: a message to add to the queue, and a time value (optional; defaults to 0). The time value 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 setTimeout message will have to wait for other messages to be processed. For this reason, the second argument indicates a minimum time—not a guaranteed time.
+
The function setTimeout is called with 2 arguments: a message to add to the queue, and a time value (optional; defaults to 0). The time value 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 setTimeout message will have to wait for other messages to be processed. For this reason, the second argument indicates a minimum time—not a guaranteed time.
Here is an example that demonstrates this concept (setTimeout does not run immediately after its timer expires):
Zero delay doesn't actually mean the call back will fire-off after zero milliseconds. Calling setTimeout with a delay of 0 (zero) milliseconds doesn't execute the callback function after the given interval.
Zero delay doesn't actually mean the call back will fire-off after zero milliseconds. Calling setTimeout with a delay of 0 (zero) milliseconds doesn't execute the callback function after the given interval.
The execution depends on the number of waiting tasks in the queue. In the example below, the message ''this is just a message'' will be written to the console before the message in the callback gets processed, because the delay is the minimum time required for the runtime to process the request (not a guaranteed time).
A web worker or a cross-origin iframe has its own stack, heap, and message queue. Two distinct runtimes can only communicate through sending messages via the postMessage method. This method adds a message to the other runtime if the latter listens to message events.
A web worker or a cross-origin iframe has its own stack, heap, and message queue. Two distinct runtimes can only communicate through sending messages via the postMessage method. This method adds a message to the other runtime if the latter listens to message events.
A simple object hierarchy with the following objects:
-
The following hierarchy is created using the code on the right side.
-
As soon as JavaScript executes this statement, the mark object also has the specialty property with the value of "none". The following figure shows the effect of adding this property to the Employee prototype and then overriding it for the Engineer prototype.
+
Adding properties
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.
-
+
Specifying properties in a constructor, take 1
The following pairs of examples show the Java and JavaScript definitions for these objects.
@@ -415,7 +415,7 @@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.
-
+
Specifying properties in a constructor, take 2
Let's look at one of these definitions in detail. Here's the new definition for the Engineer constructor:
element0, element1, ..., elementN 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 length property is set to the number of arguments.
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 Array literals for details.
+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 Array literals for details.
To create an array with non-zero length, but without any items, either of the following can be used:
@@ -167,7 +167,7 @@If you know that none of the elements in your array evaluate to false in a boolean context—if your array consists only of DOM nodes, for example—you can use a more efficient idiom:
If you know that none of the elements in your array evaluate to false in a boolean context—if your array consists only of DOM nodes, for example—you can use a more efficient idiom:
let divs = document.getElementsByTagName('div')
for (let i = 0, div; div = divs[i]; i++) {
@@ -435,9 +435,9 @@ Using arrays to store other prop
Arrays can also be used like objects, to store related information.
-const arr = [1, 2, 3];
-arr.property = "value";
-console.log(arr.property); // Logs "value"
+const arr = [1, 2, 3];
+arr.property = "value";
+console.log(arr.property); // Logs "value"
Arrays and regular expressions
@@ -450,20 +450,20 @@ Working with array-like objects
Array methods cannot be called directly on array-like objects.
-function printArguments() {
- arguments.forEach(function(item) { //
+function printArguments() {
+ arguments.forEach(function(item) { // TypeError: arguments.forEach is not a function
console.log(item);
});
-}
+}
But you can call them indirectly using {{jsxref("Global_Objects/Function/call","Function.prototype.call()")}}.
-function printArguments() {
+function printArguments() {
Array.prototype.forEach.call(arguments, function(item) {
console.log(item);
});
-}
+}
Array prototype methods can be used on strings as well, since they provide sequential access to their characters in a similar way to arrays:
@@ -475,13 +475,13 @@ Working with array-like objects
Typed Arrays
-JavaScript typed arrays 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 WebSockets, 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.
+JavaScript typed arrays 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 WebSockets, 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.
Buffers and views: typed array architecture
To achieve maximum flexibility and efficiency, JavaScript typed arrays split the implementation into buffers and views. 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 context — that is, a data type, starting offset, and number of elements — that turns the data into an actual typed array.
-
+
ArrayBuffer
diff --git a/files/en-us/web/javascript/guide/indexed_collections/typed_arrays.png b/files/en-us/web/javascript/guide/indexed_collections/typed_arrays.png
new file mode 100644
index 000000000000000..66f6108bc82594d
Binary files /dev/null and b/files/en-us/web/javascript/guide/indexed_collections/typed_arrays.png differ
diff --git a/files/en-us/web/javascript/guide/introduction/2019-04-04_00-15-29.png b/files/en-us/web/javascript/guide/introduction/2019-04-04_00-15-29.png
new file mode 100644
index 000000000000000..c6e94bb868f65d5
Binary files /dev/null and b/files/en-us/web/javascript/guide/introduction/2019-04-04_00-15-29.png differ
diff --git a/files/en-us/web/javascript/guide/introduction/index.html b/files/en-us/web/javascript/guide/introduction/index.html
index 438eec7cee90882..84e81361cc5b4a4 100644
--- a/files/en-us/web/javascript/guide/introduction/index.html
+++ b/files/en-us/web/javascript/guide/introduction/index.html
@@ -6,7 +6,7 @@
- Guide
- Introduction
- JavaScript
- - 'l10n:priority'
+ - l10n:priority
---
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}
@@ -17,7 +17,7 @@ What you should already know
This guide assumes you have the following basic background:
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:
-
The console works the exact same way as eval: 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 console.log around eval, like so:
function greetMe(yourName) {
- alert("Hello " + yourName)
+ alert("Hello " + yourName)
}
-console.log(eval('3 + 5'))
+console.log(eval('3 + 5'))
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 multi-line line input mode.
+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 multi-line line input mode.
Math.atan2() is passed separate x and y
arguments, and
diff --git a/files/en-us/web/javascript/reference/global_objects/math/index.html b/files/en-us/web/javascript/reference/global_objects/math/index.html
index 7bbb8d8c4b46172..4d0f1bf9742f4bd 100644
--- a/files/en-us/web/javascript/reference/global_objects/math/index.html
+++ b/files/en-us/web/javascript/reference/global_objects/math/index.html
@@ -139,7 +139,7 @@
If we want to calculate the height of an equilateral triangle, and we know its side length is 100, we can use the formulae length of the adjacent multiplied by the tangent of the angle is equal to the opposite.
-
In JavaScript, we can do this with the following:
diff --git a/files/en-us/web/javascript/reference/global_objects/math/trigonometry.png b/files/en-us/web/javascript/reference/global_objects/math/trigonometry.png new file mode 100644 index 000000000000000..46707ffa96da137 Binary files /dev/null and b/files/en-us/web/javascript/reference/global_objects/math/trigonometry.png differ diff --git a/files/en-us/web/javascript/reference/global_objects/promise/index.html b/files/en-us/web/javascript/reference/global_objects/promise/index.html index e518ff69a9e5c98..3cb43c2ee5400b2 100644 --- a/files/en-us/web/javascript/reference/global_objects/promise/index.html +++ b/files/en-us/web/javascript/reference/global_objects/promise/index.html @@ -33,7 +33,7 @@As the {{JSxRef("Promise.then", "Promise.prototype.then()")}} and {{JSxRef("Promise.catch", "Promise.prototype.catch()")}} methods return promises, they can be chained.
Not to be confused with: 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 arrow function with no arguments: f = () => expression to create the lazily-evaluated expression, and f() to evaluate.
This small example shows the mechanism of a Promise. The testPromise() 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 Promise() constructor is used to create the promise.
This small example shows the mechanism of a Promise. The testPromise() 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 Promise() constructor is used to create the promise.
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.
diff --git a/files/en-us/web/javascript/reference/global_objects/promise/promises.png b/files/en-us/web/javascript/reference/global_objects/promise/promises.png new file mode 100644 index 000000000000000..7e0439b5578c7d5 Binary files /dev/null and b/files/en-us/web/javascript/reference/global_objects/promise/promises.png differ diff --git a/files/en-us/web/javascript/reference/statements/debugger/index.html b/files/en-us/web/javascript/reference/statements/debugger/index.html index 98aa65e2e21d1bc..eb7172fe8c64478 100644 --- a/files/en-us/web/javascript/reference/statements/debugger/index.html +++ b/files/en-us/web/javascript/reference/statements/debugger/index.html @@ -2,9 +2,9 @@ title: debugger slug: Web/JavaScript/Reference/Statements/debugger tags: -- JavaScript -- Language feature -- Statement + - JavaScript + - Language feature + - Statement ---
To achieve maximum flexibility and efficiency, JavaScript typed arrays split the implementation into buffers and views. 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 context — that is, a data type, starting offset, and the number of elements — that turns the data into a typed array.
-
These are some examples of APIs that make use of typed arrays; there are others, and more are being added all the time.
FileReader.prototype.readAsArrayBuffer()FileReader.prototype.readAsArrayBuffer()FileReader.prototype.readAsArrayBuffer() method starts reading the contents of the specified Blob or File.XMLHttpRequest.prototype.send()XMLHttpRequest instances' send() method now supports typed arrays and {{jsxref("ArrayBuffer")}} objects as argument.The output from this is "Entry 0 in the 32-bit array is now 32".
In other words, the two arrays are indeed viewed on the same data buffer, treating it as different formats. You can do this with any view types.
+In other words, the two arrays are indeed viewed on the same data buffer, treating it as different formats. You can do this with any view types.
By combining a single buffer with multiple views of different types, starting at different offsets into the buffer, you can interact with data objects containing multiple data types. This lets you, for example, interact with complex data structures from WebGL, data files, or C structures you need to use while using js-ctypes.
+By combining a single buffer with multiple views of different types, starting at different offsets into the buffer, you can interact with data objects containing multiple data types. This lets you, for example, interact with complex data structures from WebGL, data files, or C structures you need to use while using js-ctypes.
Consider this C structure:
@@ -267,7 +267,7 @@ArrayBuffers or typed arrays from Base64-encoded stringsArrayBuffers or typed arrays from Base64-encoded stringsStringView – a C-like representation of strings based on typed arrays