operand is 2.… The 2 gets concatenated to '1', so it’s like '1' + 2 = "12" and "12" + 2 = "… : the binary form that we used above and the unary form.… For example, write (1 + 2) * 2.
There are many operators in JavaScript.… So, the alert shows 2.
There may be 2, 3, 4 or more.… 2 → 3, 3 → 4.… There will be N-2 segments.
Repeat step 2 until there is only one point.… For instance, the 3-point curve is formed by points (x,y) calculated as:
x = (1−t)2x1 + 2(1−t)tx2 +… 0 + 2(1−t)t * 0.5 + t2 * 1 = (1-t)t + t2 = t
y = (1−t)2 * 0 + 2(1−t)t * 1 + t2 * 0 = 2(1-t)t = –2t2 +
Surrogate pairs.All frequently used characters have 2-byte codes (4 hex digits).… Initially, JavaScript was based on UTF-16 encoding that only allowed 2 bytes per character.… But 2 bytes only allow 65536 combinations and that’s not enough for every possible symbol of Unicode.… So rare symbols that require more than 2 bytes are encoded with a pair of 2-byte characters called “a… , but for most practical purposes the information from this section is enough.
regexp for time.In previous articles there was a task to build a regexp for searching time in the form… Otherwise, if the first digit is 2, then the next must be [0-3].… If we glue hours and minutes together, we get the pattern: [01]\d|2[0-3]:[0-5]\d.… The alternation | now happens to be between [01]\d and 2[0-3]:[0-5]\d.… Let’s correct that by enclosing “hours” into parentheses: ([01]\d|2[0-3]):[0-5]\d.
As the result is passed along the chain of handlers, we can see a sequence of alert calls: 1 → 2 → 4.… That handler is in the line (**), it shows 2 and does the same thing.… In the example above resolve(2) is called after 1 second (**).… We’ll use the fetch method to load the information about the user from the remote server.… For instance, we’d like to show a form for editing that user or something else.
Most characters are encoded with 2 bytes, but that allows to represent at most 65536 characters.… are the Unicode values of some characters:
Character
Unicode
Bytes count in Unicode
a
0x0061
2… ≈
0x2248
2
𝒳
0x1d4b3
4
𝒴
0x1d4b4
4
😄
0x1f604
4
So characters like a and ≈ occupy 2 bytes… The point is that length treats 4 bytes as two 2-byte characters.… By default, regular expressions also treat 4-byte “long characters” as a pair of 2-byte ones.
For example, to calculate pow(2, 4) the recursive variant does these steps:
pow(2, 4) = 2 * pow(2, 3… )
pow(2, 3) = 2 * pow(2, 2)
pow(2, 2) = 2 * pow(2, 1)
pow(2, 1) = 2
So, the recursion reduces a function… Here’s the context stack when we entered the subcall pow(2, 2):
Context: { x: 2, n: 2, at line… n: 1, at line 1 }
pow(2, 1)
Context: { x: 2, n: 2, at line 5 }
pow(2, 2)… pow(2, 2)
Context: { x: 2, n: 3, at line 5 }
pow(2, 3)
The execution of pow(2, 2) is
Then on the outer <form>.… So if we click on <p>, then we’ll see 3 alerts: p → div → form.… No matter where the click happened, it bubbles up to <form> and runs the handler.… runs on it.
event.target is the actual element inside the form that was clicked.… the first listener):
P → DIV → FORM → BODY → HTML (bubbling phase, the second listener).
That’s when a user clicks somewhere else or presses Tab to go to the next form field, or there are other… we generally should show errors to the user, but should not prevent their progress in filling our form… is: if we have two elements, the first has tabindex="1", and the second has tabindex="2&… To make an element a part of the form on par with <input>.… The order is like this: 1 - 2
base=2 is mostly for debugging bitwise operations, digits can be 0 or 1.… -1
-1
-1
-1.5
-2
-1
-1
-1
-1.6
-2
-1
-2
-1
These functions cover all of the possible ways to deal… For instance, we have 1.2345 and want to round it to 2 digits, getting only 1.23.… A number is stored in memory in its binary form, a sequence of bits – ones and zeroes.… It ensures that it has 2 digits after the decimal point.
They both call func with arguments 1, 2… So when worker.slow(2) is executed, the wrapper gets 2 as an argument and this=worker (it’s the object… is not yet cached, func.call(this, x) passes the current this (=worker) and the current argument (=2)… That’s the simplest form of it:
When… Append glue and this[2].
…Do so until this.length items are glued.
Return result.
…But please note: the example above shows 1, then 2, and that’s all. It doesn’t show 3!… generator methods are exactly what for..of expects:
it has a .next() method
that returns values in the form… It starts the execution and returns the result of the first yield "2+2=?".… For instance, here the yield of "2 + 2 = ?… The current line of the calling code is the line with generator.throw, labelled as (2).
Then this wrapper is called with 2 as an argument, and it passes the call to the original sum.… instance, we have the logging function log(date, importance, message) that formats and outputs the information… :
…But also works in the curried form
Built-in browser autofill.Firefox, Chrome and Opera autofill forms on DOMContentLoaded.… For instance, if the page has a form with login and password, and the browser remembered the values,… We can send not only a string, but also forms and other formats, as described in the chapter Fetch, but… You can find more information in the chapter Fetch API.… The typical output:
[1] initial readyState:loading
[2] readyState:interactive
[2] DOMContentLoaded
[
For example, let’s add the default slot to our <user-card> that shows all unslotted information… All the unslotted light DOM content gets into the “Other information… Elements are appended to a slot one after another, so both unslotted pieces of information are in the… For example, here the menu item is inserted dynamically after 1 second, and the title changes after 2… Please note: there’s no slotchange event after 2 seconds, when the content of slot="title"
For instance, the Promise.all below settles after 3 seconds, and then its result is an array [1, 2, 3… A bigger example with fetching user information… For instance, here the results are [1, 2, 3]:… For example, we’d like to fetch the information about multiple users.
Uint16Array – treats every 2 bytes as an integer, with possible values from 0 to 65535.… binary data in an ArrayBuffer of 16 bytes can be interpreted as 16 “tiny numbers”, or 8 bigger numbers (2… bytes each), or 4 even bigger (4 bytes each), or 2 floating-point values with high precision (8 bytes… In binary form, 256 is 100000000 (9 bits), but Uint8Array only provides 8 bits per value, that makes… For 257, the binary form is 100000001 (9 bits), the rightmost 8 get stored, so we’ll have 1 in the array
Event constructor.Built-in event classes form a hierarchy, similar to DOM element classes.… In the second argument (object) we can add an additional property detail for any custom information that… The output order is: 1 → nested → 2.… The output order becomes: 1 → 2 → nested.
In this chapter we’ll cover selection in the document, as well as selection in form fields, such as &… The ending point also has <p> as the parent node, but 2 as the offset (it specifies the range up… So we can set it as range.setEnd(p, 2).
Here’s the demo.… We need to create a range, that:
starts from position 2 in <p> first child (taking all but two… In its simplest one-argument form it replaces the user selected range and removes the selection.
If there’s no such flag it returns only the first match in the form of an array, with the full match… part of the string before the match
$'
inserts a part of the string after the match
$n
if n is a 1-2… Full information about the methods is given in the article Methods of RegExp and String.
Summary.
Using forms.One way to communicate with another server was to submit a <form> there.… So, it was possible to make a GET/POST request to another site, even without networking methods, as forms… , multipart/form-data or text/plain.… , multipart/form-data, text/plain.… , multipart/form-data or text/plain.
state
event.button
Left button (primary)
0
Middle button (auxiliary)
1
Right button (secondary)
2… (forward)
4
Most mouse devices only have the left and right buttons, so possible values are 0 or 2.… non-standard way of getting a button, with possible values:
event.which == 1 – left button,
event.which == 2… Modifiers: shift, alt, ctrl and meta.All mouse events include the information about pressed modifier
We can open it with version 2 and perform the upgrade like this:… And it can’t be both version 1 and 2.… from 2 to 3, from 3 to 4 etc.… by step, for every intermediate version (2 to 3, then 3 to 4).… Get the store object using transaction.objectStore(name), at (2).
Working with forms will be much more convenient when we learn them.… Navigation: form and elements.Document forms are members of the special collection document.forms.… So a form references all elements, and elements reference the form.… Form elements are available as form.elements[name/index], or can use just form[name/index].… the form property.
An XMLHttpRequest object travels them in the order 0 → 1 → 2… Additional calls add information to the header, don’t overwrite it.… We create it, optionally fill from a form… fields if needed, and then:
xhr.open('POST', ...) – use POST method.
xhr.send(formData) to submit the form… is sent with multipart/form-data encoding.
As the application grows, our own errors naturally form a hierarchy.… An error of that kind should also carry the information about the offending field.… The parent constructor also sets the name property to "Error", so in the line (2) we reset… It will carry additional information about the property that’s missing.
The next() should return a value in the form {done: true/false, value:<loop value>}, where done… This method must return the object with next() method returning a promise (2).… allows us to retrieve commits in the same, paginated fashion:
We should make a request to fetch in the form… page=2. It’s generated by GitHub itself.
The order became 1, 15, 2. Incorrect. But why?
The items are sorted as strings by default.… For strings, lexicographic ordering is applied and indeed "2" > "15".… On the second run, sum = 1, we add the second array element (2) to it and return.… call on the next array element:
sum
current
result
the first call
0
1
1
the second call
1
2… Array.isArray.Arrays do not form a separate language type. They are based on objects.
We can put anything in there: a variable like name or an arithmetical expression like 1 + 2 or something… It forms a separate type of its own which contains only the null value:… Usually, such parentheses contain a mathematical expression, such as (2 + 2), but here they contain only
The submit event triggers when the form is submitted, it is usually used to validate the form before… The method form.submit() allows to initiate form sending from JavaScript.… We can use it to dynamically create and send our own forms to server.… Both actions lead to submit event on the form.… In the form below:
Go into the text field and press Enter.
part of the string before the match
$'
inserts a part of the string after the match
$n
if n is a 1-2… parentheses, so the replacement function is called with 5 arguments: the first is the full match, then 2… Using a function gives us the ultimate replacement power, because it gets all the information
There are many JavaScript properties that allow us to read information about element width, height and… :
offsetWidth = 390 – the outer width, can be calculated as inner CSS-width (300px) plus paddings (2… * 20px) and borders (2 * 25px).
offsetHeight = 290 – the outer height.… so it’s exactly the sum of what’s inside the borders: CSS-height 200px plus top and bottom paddings (2
URL.createObjectURL takes a Blob and creates a unique URL for it, in the form… A data url has the form data:[<mediatype>][;base64],<data>.… From Blob to stream.When we read and write to a blob of more than 2
The tasks form a queue, the so-called “macrotask queue” (v8 term):… script, a user may move their mouse causing mousemove, and setTimeout may be due and so on, these tasks form… Use case 2: progress indication.Another benefit of splitting heavy tasks for browser scripts is that… Microtasks are used “under the cover” of await as well, as it’s another form of promise handling.
An errorless example: shows alert (1) and (2):… One of most widely used and supported is:
stack
Current call stack: a string with information about… You can find more detailed information… but we can do much more: send a new network request, suggest an alternative to the visitor, send information… Environment-specific
The information from this section is not a part of the core JavaScript
For example, here 1+2 results in 3, while the function call hello("debugger") returns nothing… set, the execution pauses at the 4th line:
Please open the informational… The information from this chapter is enough to begin debugging, but later, especially if you do a lot
Wrote some code, testing: f(1) works, but f(2) doesn’t work. We fix the code and now f(2) works.… Here it checks that the result of pow(2, 3) equals 8.… Making tests separate is useful to get more information about what’s going on, so the second variant
The ancestors together form the chain of parents from the element to the top.… The second scripts runs after the browser meets one more <div>, so its length is 2.
An exotic variable as a loop counter is especially cool if the loop body takes 1-2 pages (make it longer… cornerless
The great vessel is last complete,
The great note is rarified sound,
The great image has no form… an outsider tries to understand the code, they’ll be surprised to see that there’s actually no information
values:
0 – “CONNECTING”: the connection has not yet been established,
1 – “OPEN”: communicating,
2… HTML: we need a <form> to send messages and a <div> for incoming messages:… On form submission – socket.send(message) for the message.
.
\', \", \`
Quotes
\\
Backslash
\t
Tab
\b, \f, \v
Backspace, Form Feed, Vertical Tab –… So .at(-1) means the last character, and .at(-2) is the one before it, etc.… To look for the next occurrence, let’s start the search from position 2:
Environment Record – an object that stores all local variables as its properties (and some other information… Step 2. Function Declarations.A function is also a value, like a variable.… If we call counter() multiple times, the count variable will be increased to 2,
As you can see, when 1.js changes the name property in the imported admin, then 2.… import.meta.The object import.meta contains the information… Build tools.In real-life, browser modules are rarely used in their “raw” form
Move all elements to the left, renumber them from the index 1 to 0, from 2 to 1 and so on.… But for arrays there is another form
It’s encoded and sent out with Content-Type: multipart/form-data.… Sending a simple form.Let’s send a simple form first.… with a file.The form is always sent as Content-Type: multipart/form-data, this encoding allows to send… The server reads form data and the file, as if it were a regular form submission.… We can either create new FormData(form) from an HTML form, or create an object without a form at all,
Specification.The ECMA-262 specification contains the most in-depth, detailed and formalized information… So if you need the most trustworthy source of information about the language details, the specification… MDN (Mozilla) JavaScript Reference is the main manual with examples and other information.… It’s great to get in-depth information about individual language functions, methods etc.… Please remember them (or this page) for the cases when you need in-depth information about a particular
For example, the pattern \b\d\d\b looks for standalone 2-digit numbers.… In other words, it looks for 2-digit numbers that are surrounded by characters different from \w, such
The multiplication obj * 2… first converts the object to primitive (that’s a string "2").… Then "2" * 2 becomes 2 * 2 (the string is converted to number).
For compatibility, 2 digits are also accepted and considered 19xx, e.g. 98 is the same as 1998 here,… It returns 2-digit year sometimes. Please never use it. There is getFullYear() for the year.… Let’s say we need to increase the date “28 Feb 2016” by 2 days.… It may be “2 Mar” or “1 Mar” in case of a leap-year. We don’t need to think about it.… Just add 2 days.
JavaScript can send network requests to the server and load new information whenever it’s needed.… For example, we can use a network request to:
Submit an order,
Load user information,
Receive latest… There are multiple ways to send a network request and get information from the server.… JSON-encoded),
FormData object, to submit the data as multipart/form-data,
Blob/BufferSource to send… binary data,
URLSearchParams, to submit the data in x-www-form-urlencoded encoding, rarely used.
Only first 50 results are shown.