Search results

We know many operators from school.… From school, we all know that the multiplication in the expression 1 + 2 * 2 should be calculated before… Here’s an extract from the precedence table (you don’t need to remember this, but note that unary operators… So, the alert shows 1.… It’s like (a = 1 + 2), 3 + 4.

Components are developed internationally, by teams from different countries, speaking different languages… components: each of them has own place on the page, can “do” a well-described task, and is separate from… That comes from intuition, experience and common sense.… Shadow DOM – to create an internal DOM for the component, hidden from the others.

All insertion methods automatically remove the node from the old place.… Old-school insert/remove methods.… There are also “old school” DOM manipulation methods, existing for historical reasons.… These methods come from really ancient times.… The method comes from times when there was no DOM, no standards… Really old times.

It also declares a variable but in a slightly different, “old-school” way.… People from other countries may need to read it sometime.… Stay away from abbreviations or short names like a, b, and c, unless you know what you’re doing.… And the last note.… let – is a modern variable declaration. var – is an old-school variable declaration.

from where it stopped.… pow(2, 1).The process repeats: a new subcall is made at line 5, now with arguments x=2, n=1.… pow(2, 1).… It has the result of the subcall pow(2, 1), so it also can finish the evaluation of x * pow(x, n - 1)… The value 1 is now excluded from the chain.

\1.… Please note: If we use ?: in the group, then we can’t reference it.… Groups that are excluded from capturing (?:...) are not memorized by the engine.… Don’t mess up: in the pattern \1, in the replacement: $1 In the replacement string we use… a dollar sign: $1, while in the pattern – a backslash \1.

-(253-1), as we mentioned earlier in the chapter Data types.… -1 -1 -1.5 -2 -1 -1 -1 -1.6 -2 -1 -2 -1 These functions cover all of the possible ways to deal… It is one divided by ten 1/10, one-tenth.… They “read” a number from a string until they can’t.… A few examples: Math.random() Returns a random number from 0 to 1 (not including 1).

Explicit conversion is usually required when we read a value from… Numeric conversion rules: Value Becomes… undefined NaN null 0 true and false 1… Otherwise, the number is “read” from the string. An error gives NaN.… The conversion follows the rules: Value Becomes… undefined NaN null 0 true / false 1 / 0… string The string is read “as is”, whitespaces (includes spaces, tabs \t, newlines \n etc.) from both

Starting from the index 1 it removed 1 element.… ) – looks for item starting from index from, and returns the index where it was found, otherwise -1.… arr.includes(item, from) – looks for item starting from index from, returns true if found.… Note that in the example we provide to find the function item => item.id == 1 with one argument.… So the function result is 1.

halfway point and total duration will be 1 second.… That can be specified by the curve cubic-bezier(0, 0, 1, 1).… As the time (x) passes, the completion (y) of the animation steadily goes from 0 to 1.… The linear is a shorthand for cubic-bezier(0, 0, 1, 1) – a straight line, which we described above.… The y is out of the “standard” range 0..1.

…But more often is referred by “old-school” environment-specific names, such as window (browser) and

If an element is removed from DOM, then it also causes the focus loss.… The switch order is: elements with tabindex from 1 and above go first (in the tabindex order), and then… That is, when we switch elements, elements with tabindex=0 go after elements with tabindex ≥ 1.… tabindex="-1" allows only programmatic focusing on an element.… Note that they must be assigned using elem.addEventListener, not on<event>.

For the start, let’s find the price from the string like 1 turkey costs 30€.… Please note… In our string that exactly matches the number 1.… Negative lookahead.Let’s say that we want a quantity instead, not a price from the same string.… Lookbehind browser compatibility Please Note: Lookbehind is not supported in non-V8 browsers

So in the code above all alert show the same: 1.… So the output is the same as in the previous example: 1 → 2 → 4, but now with 1 second delay between… Please note that the code is still “flat” — it grows down, not to the right.… 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.

To be precise, there are 2n-1, where n is the length of the sequence.… That is, we use \d++ instead of \d+ to stop + from backtracking.… =(\w+))\1. Of course, we could take another pattern instead of \w.… That is: we look ahead – and if there’s a word \w+, then match it as \1. Why?… =(\w+))\1 instead of \w, when we need to forbid backtracking for + after it.

() Get the day of month, from 1 to 31, the name of the method does look a little bit strange. getHours… Date.parse from a string.The method Date.parse(str) can read a date from a string.… 1 Jan 1970 UTC+0).… Months are counted from zero (yes, January is a zero month).… Days of week in getDay() are also counted from zero (that’s Sunday).

A character class is a special notation that matches any symbol from a certain set.… Most used are: \d (“d” is from “digit”) A digit: a character from 0 to 9.… In the beginning of the chapter we saw how to make a number-only phone number from a string like +7(903… For us strings 1-5 and 1 - 5 are nearly identical.… We can’t add or remove spaces from a regular expression and expect it to work the same.

We can not only assign handlers, but also generate events from JavaScript.… The notable exception is when one event is initiated from within another one, e.g. using dispatchEvent… Please note that the nested event menu-open is caught on the document.… The output order becomes: 1 → 2 → nested.… Summary.To generate an event from code, we first need to create an event object.

Please note: such events may come not only from “mouse devices”, but are also from other devices, such… Mouse button is clicked/released over an element. mouseover/mouseout Mouse pointer comes over/out from… Events order.As you can see from the list above, a user action may trigger multiple events.… On the teststand below, all mouse events are logged, and if there is more than a 1 second delay between… Please note: the text inside it is still selectable.

The parameter t moves from 0 to 1.… As t runs from 0 to 1, every value of t adds a point to the curve.… For each t in the interval from 0 to 1: We take points on these segments on the distance proportional… Then for each t from 0 to 1, we take a point on each segment on the distance proportional to t and connect… 3 control points, and then as t moves from 0 to 1, for each value of t we’ll have (x,y) of the curve.

1 to 5.… Note the await word.… We should get the next page URL from the Link header of the response.… The internal mechanics of paginated requests is invisible from the outside.… one stream to another (e.g. download from one place and immediately send elsewhere).

Please note that str.length is a numeric property, not a function.… If pos is negative, then it’s counted from the end of the string.… the match was found or -1 if nothing can be found.… Some letters like Ö stand apart from the main alphabet.… Here, its code is greater than anything from a to z.

Over that link the evil page positions a transparent <iframe> with src from facebook.com, in such… Old-school defences (weak).The oldest defence is a bit of JavaScript which forbids opening the page in… SAMEORIGIN Allow inside a frame if the parent document comes from the same origin.… ALLOW-FROM domain Allow inside a frame if the parent document is from the given domain.… From one perspective – the attack is “not deep”: all a hacker is doing is intercepting a single click

describes a built-in class EventSource, that keeps connection with the server and allows to receive events from… We need to receive a stream of data from server: maybe chat messages or market prices, or whatever.… Please note: When a connection is finally closed, there’s no way to “reopen” it.… Put id: after data: Please note: the id is appended below message data by the server, to… There’s no way to set it from JavaScript. event: – event name, must precede data:.

So new elements are added or taken always from the “end”.… They allow you to add/remove elements, both to/from the beginning or the end.… Move all elements to the left, renumber them from the index 1 to 0, from 2 to 1 and so on.… becomes "1" and [1,2] becomes "1,2".… For negative values of i, it steps back from the end of the array.

Note the differences from this (=event.currentTarget): event.target – is the “target” element that initiated… Stopping bubbling.A bubbling event goes from the target element straight up.… Bubbling phase – the event bubbles up from the element.… Here’s the picture, taken from the specification, of the capturing (1), target (2) and bubbling (3) phases… Please note, the P shows up twice, because we’ve set two listeners: capturing and bubbling.

We know many comparison operators from maths.… Equals: a == b, please note the double equality sign == means the equality test, while a single one a… If the first character from the first string is greater (or less) than the other string’s, then the first… What to do if we’d like to differentiate 0 from false?… That’s why (3) null >= 0 is true and (1) null > 0 is false.

The value of x is checked for a strict equality to the value from… If the equality is found, switch starts to execute the code starting from the corresponding case, until… That’s a match, so the execution starts from case 4 until the nearest break.… that’s compared with b + 1 in case, and the corresponding code is executed.… Here the execution of case 3 starts from the line (*) and goes through case 5, because there’s no break

As we know from the chapter Data types, there are eight data types in JavaScript.… We can add, remove and read files from it at any time.… This is a completely different thing from the for(;;) construct that we studied before.… So we see 1, 41, 44, 49. Integer properties? What’s that?… Square brackets allow taking the key from a variable, like obj[varWithKey].

BigInt.In JavaScript, the “number” type cannot safely represent integer values larger than (253-1) (that… ’s 9007199254740991), or less than -(253-1) for negatives.… For most purposes ±(253-1) range is quite enough, but sometimes we need the entire range of really big… Please note that this can only be done in backticks.… That also comes from the early days of JavaScript.

Object.assign(dest, src1, ..., srcN) – copies properties from src1..N into dest. …and so on.… Arrow functions do not have "arguments" If we access the arguments object from… an arrow function, it takes them from the outer “normal” function.… Spread syntax.We’ve just seen how to get an array from the list of parameters.… Note that it is possible to do the same thing to make a copy of an object:

Pointer events are a modern way to handle input from a variety of pointing devices, such as a mouse,… We’ll make note of them in this article.… Where unsupported, e.g. for a mouse, it’s always 1. height – the height of the area where the pointer… Where unsupported, it’s always 1. pressure – the pressure of the pointer tip, in range from 0 to 1.… Please note: the pointerId is assigned not to the whole device, but for each touching finger.

existing selection, select/deselect DOM nodes as a whole or partially, remove the selected content from… We need to create a range, that: starts from position 2 in <p> first child (taking all but two… We can get these range objects using the method: getRangeAt(i) – get i-th range, starting from 0.… The visitor just needs to start the selection from elsewhere.… Please note: this handler can be set only on document, it tracks all selections in it.

Generator functions behave differently from… We should see it from done:true and process value:3 as the final result.… …But please note: the example above shows 1, then 2, and that’s all. It doesn’t show 3!… character codes 97…122) We can use this sequence e.g. to create passwords by selecting characters from… Please note, the outer code does not have to immediately call next(4). It may take time.

Reading from document.cookie.Does your browser store any cookies from this site?… from another page at bank.com.… When a user follows a legitimate link to bank.com, like from their notes, they’ll be surprised that bank.com… E.g. opening a website link from notes that satisfy these conditions.… Please note: If we load a script from a third-party domain, like <script src="https

For instance, the Promise.all below settles after 3 seconds, and then its result is an array [1, 2, 3… Please note… For instance, here the results are [1, 2, 3]:… For instance, here the result will be 1:… For instance, here the result will be 1:

So it’s better to inherit from it.… For instance, HttpTimeoutError may inherit from HttpError, and so on.… Our ValidationError class should inherit from the Error class.… : in the line (1) we call the parent constructor.… We can inherit from Error and other built-in error classes normally.

That’s why some people say that “everything inherits from objects”.… That’s when we take a method from one object and copy it into another.… But that’s impossible if obj already inherits from another object.… Remember, we only can inherit from one object at a time.… Borrowing methods is flexible, it allows to mix functionalities from different objects if needed.

To protect from errors, we should check db.version and suggest a page reload.… Let’s say: A visitor opened our site in a browser tab, with database version 1.… And it can’t be both version 1 and 2.… 1 to 2, from 2 to 3, from 3 to 4 etc.… "prev" – the reverse order: down from the record with the biggest key.

That’s possible, but if we’re moving elements to shadow DOM, then CSS styles from the document do not… So, the flattened DOM is derived from shadow DOM by inserting slots.… It gets all nodes from the light DOM that aren’t slotted elsewhere.… Slots allow to show elements from light DOM in specified places of shadow DOM.… Composition does not really move nodes, from JavaScript point of view the DOM is still same.

Once a method is passed somewhere separately from the object – this is lost.… Please note that we actually don’t use this here.… For instance, we have a function send(from, to, text).… Also there’s a ready _.partial implementation from lodash library.… Like if we have a send(from, to) function, and from should always be the same for our task, we can get

Sleep until a task appears, then go to 1.… Tasks from the queue are processed on a “first come – first served” basis.… 1 to 1000000000.… queued and then executes when part 1 finished, before the next part.… Microtasks come solely from our code.

For example, outputting goods from a list one after another or just running the same code for each number… from 1 to 10.… If i++ was missing from the example above, the loop would repeat (in theory) forever.… So the control goes straight from (*) to alert('Done!').… A continue is only possible from inside a loop.

A number is a sequence of 1 or more digits \d.… The range: {3,5}, match 3-5 times To find numbers from 3 to 5 digits we can put the limits into curly… So the regexp is \d{1,}:… Shorthands.There are shorthands for most used quantifiers: + Means “one or more”, the same as {1,… Depends on how tolerant we can be to “extra” matches and whether it’s difficult or not to remove them from

Please note… For instance, [a-z] is a character in range from a to z, and [0-5] is a digit from 0 to 5.… In the example below we’re searching for "x" followed by two digits or letters from A to F:… Here [0-9A-F] has two ranges: it searches for a character that is either a digit from… 0 to 9 or a letter from A to F.

instance: Uint8Array – treats each byte in ArrayBuffer as a separate number, with possible values from… Uint16Array – treats every 2 bytes as an integer, with possible values from 0 to 65535.… Uint32Array – treats every 4 bytes as an integer, with possible values from 0 to 4294967295.… Float64Array – treats every 8 bytes as a floating point number with possible values from 5.0x10-324 to… Optionally we can provide byteOffset to start from (0 by default) and the length (till the end of the

Usually it’s used to decode data received over the network, from the server or another source.… And message is taken from the argument.… But by its nature, catch gets all errors from try.… And then enter -1 – there will be an immediate error, and the execution will take 0ms.… finally and return The finally clause works for any exit from try...catch.

Please note: there’s currently no way for fetch to track upload progress.… Here’s the sketch of code that reads the response from response.body:… Please note: Streams API also describes asynchronous iteration over ReadableStream with for… Please note, we can’t use both these methods to read the same response: either use a reader or a response… Prior to reading, we can figure out the full response length from the Content-Length header.

code can be passed, but that’s not recommended. delay The delay before run, in milliseconds (1000 ms = 1… If the first argument is a string, then JavaScript creates a function from… Each call remembers the real time from the previous one in the times array.… So this note is browser-specific. Summary.… Please note that all scheduling methods do not guarantee the exact delay.

Please note: For our own scripts we could use JavaScript modules here, but they are not widely… Crossorigin policy.There’s a rule: scripts from one site can’t access contents of the other site.… This rule also affects resources from other domains.… If we’re using a script from another domain, and there’s an error in it, we can’t get error details.… Exactly because it’s from another domain. Why do we need error details?