Search results

Luckily, there are two <script> attributes that solve the problem for us: defer and async. defer.The… async.The async attribute is somewhat like defer. It also makes the script non-blocking.… Here’s an example similar to what we’ve seen with defer: two scripts long.js and small.js, but now with… async instead of defer.… Summary.Both async and defer have one common thing: downloading of such scripts doesn’t block page rendering

(and its imports if needed), and then runs the script.… Module scripts are deferred.Module scripts are always deferred, same effect as defer attribute (described… in the chapter Scripts: async, defer), for both external and inline scripts.… That’s because modules are deferred, so we wait for the document to be processed.… Modules have several differences: Deferred by default. Async works on inline scripts.

We can upload/download files, track progress and much more.… This method opens the connection and sends the request to server.… And some of them like POST use body to send the data to the server.… Referer and Host. The full list is in the specification.… Or, if we like JSON more, then JSON.stringify and send as a string.

The async keyword handles it, we can simply make async next().… And let it care about all pagination stuff. For us it’ll be a simple async iteration for await..of.… When we expect the data to come asynchronously, with delays, their async counterparts can be used, and… Syntax differences between async and regular iterators: Iterable Async Iterable Method to provide… and regular generators: Generators Async generators Declaration function* async function*

ArrayBuffer and views are a part of ECMA standard, a part of JavaScript.… And what’s more important – we can use this encoding in “data-urls”.… But usually URL.createObjectURL(blob) is simpler and faster.… Performance and memory losses on big Blob objects for encoding.… What it does is just walks the page and draws it on <canvas>.

gather only the rest.… Here the first two arguments go into variables and the rest go into titles array:… The ...rest must always be last.… and iterables.… parameters” and gathers the rest of the list of arguments into an array.

It’s surprisingly easy to understand and use. Async functions.Let’s start with the async keyword.… There’s another keyword, await, that works only inside async functions, and it’s pretty cool.… And, it’s easier to read and write.… Let’s take the showAvatar() example from the chapter Promises chaining and rewrite it using async/await… async/await and promise.then/catch When we use async/await, we rarely need .then, because

Let’s click it and select hello.js in the tree view.… Remove the breakpoint by right-clicking and selecting Remove. …And so on.… So let’s press F5 (Windows, Linux) or Cmd+R (Mac).… You can click the plus + and input an expression.… Oh, and also you can click at various places of dev tools and just see what’s showing up.

We should see it from done:true and process value:3 as the final result.… Otherwise, the loop would repeat forever and hang.… But in fact they are much more powerful and flexible.… In the example above, try..catch catches it and shows it.… And, surely, they are great for making iterable objects.

The quote is detected, and then the engine tries to find a match for the rest of the pattern… , the engine doesn’t try to match a dot one more time, but stops and tries to match the rest of the pattern… Then the number of repetitions is increased again and again… …Till the match for the rest of the pattern… and ??… The quantifier is in lazy mode, so it finds one digit 4 and tries to check if the rest of the pattern

Let’s say we have a string like +7(903)-123-45-67 and want to find all numbers in it.… A quantifier is appended to a character (or a character class, or a [...] set etc) and specifies how… r looks for o followed by zero or one u, and then r. So, colou?… r finds both color and colour:… Depends on how tolerant we can be to “extra” matches and whether it’s difficult or not to remove them

For instance, [a-z] is a character in range from a to z, and [0-5] is a digit from 0 to 5.… similar characters, Join_Control (Join_C) – two special codes 200c and 200d, used in ligatures, e.g.… Unicode properties are covered in more details in the article Unicode: flag "u" and class \… They are denoted by a caret character ^ at the start and match any character except the given ones.… And if we need a backslash, then we use \\, and so on.

Export and import directives have several syntax variants.… It makes code support and refactoring easier.… modules together and optimize them to speedup loading.… We export only what’s necessary in auth/index.js and keep the rest hidden from prying eyes.… Summary.Here are all types of export that we covered in this and previous articles.

It stores the date, time and provides methods for date/time management.… We can set out-of-range values, and it will auto-adjust itself.… So it’s faster and doesn’t put pressure on garbage collection.… And then you probably won’t need microbenchmarks at all.… Date and time in JavaScript are represented with the Date object.

If the regexp doesn’t have flag g, then it returns the first match as an array with capturing groups and… the regexp has flag g, then it returns an array of all matches as strings, without capturing groups and… The swiss army knife for searching and replacing.… It will be called for each match, and the returned value will be inserted as a replacement.… …And so on. If there are no matches, regexp.exec returns null and resets regexp.lastIndex to 0.

They can be passed around, used as objects, and now we’ll see how to forward calls between them and decorate… …And for objects that are both iterable and array-like, such as a real array, we can use any of them,… Because we are calling hash(arguments), and arguments object is both iterable and array-like, but not… Append glue and this[1]. Append glue and this[2]. …Do so until this.length items are glued.… E.g. a decorator may count how many times a function was invoked and how much time it took, and expose

The secret of reliability and simplicity of a coffee machine – all details are well-tuned and hidden… , and dangerous (it can electrocute).… Internal and external interface.In object-oriented programming, properties and methods are split into… Until now we were only using public properties and methods.… The code constantly undergoes development and improvement.

The underlying Range and Selection objects are easy to grasp, and then you’ll need no recipes to make… lt;b> and 3.… We’ve already seen setStart and setEnd, here are other similar methods.… Optional arguments start and end, if provided, set the range start and end, otherwise user selection… For input, textarea: additional methods and properties.

If the DOM-element of the logs display window is still accessible and kept in memory, create and send… unregistration of objects and their cleanup callbacks.… Creating “memories” and albums. Video montage from a series of photos. …and much more.… decide to change one of the images and create a new one.… implementation and operation of the garbage collector.

A Proxy object wraps another object and intercepts operations, like reading/writing properties and others… We don’t have to override value-adding array methods like push and unshift, and so on, to add checks… They are described in the article Private and protected properties and methods.… And very simple to implement.… object and the proxy.

from the chapter Garbage collection, JavaScript engine keeps a value in memory while it is “reachable” and… properties of an object or elements of an array or another data structure are considered reachable and… It occupies memory and may not be garbage collected.… Like Set, it supports add, has and delete, but not size, keys() and no iterations.… WeakSet is the absence of iterations, and the inability to get all current content.

Before we get into JavaScript’s ways of dealing with styles and classes – here’s an important rule.… JavaScript can modify both classes and style properties.… That’s more flexible and easier to support. className and classList.Changing a class is one of the most… infers style.marginLeft and style.marginTop from it.… The browser takes the computed value and makes all units fixed and absolute, for instance: height:20px

There may be any pattern instead of X and Y.… If it’s not so, then the potential match is skipped, and the search continues.… =\s), and there’s 30 somewhere after it (?… That is: match everything, in any context, and then filter by context in the loop.… , so we know where exactly in the text it is, and can check the context.

bold), and previous remembered contexts are below.… And the optimization may be unneeded and totally not worth the efforts.… And they, potentially, can split even more.… And that’s sometimes required to optimize stuff.… But for many tasks a recursive solution is fast enough and easier to write and support.

And so on upwards till the document object.… Normally it goes upwards till <html>, and then to document object, and some events even reach window… Don’t stop it without a real need: obvious and architecturally well thought out.… And there’s a logical explanation for that.… top element that handles general concepts and runs the last one.

When the browser loads the page, it “reads” (another word: “parses”) the HTML and generates DOM objects… But technically no one limits us, and if there aren’t enough, we can add our own.… The attributes collection is iterable and has all the attributes of the element (standard and non-standard… ) as objects with name and value properties.… What if we use a non-standard attribute for our purposes and later the standard introduces it and makes

New proposals to the language appear regularly, they are analyzed and, if considered worthy, are appended… to the list at https://tc39.github.io/ecma262/ and then progress to the specification.… It can parse (“read and understand”) modern code and rewrite it using older syntax constructs, so that… A transpiler would analyze our code and rewrite height ?? 100 into (height !… It “fills in” the gap and adds missing implementations.

Regular expressions are patterns that provide a powerful way to search and replace in text.… Regular Expressions.A regular expression (also “regexp”, or just “reg”) consists of a pattern and optional… The “long” syntax: And the “short”… And, finally, if there are no matches, null is returned (doesn’t matter if there’s flag g or not).… A regular expression consists of a pattern and optional flags: g, i, m, u, s, y.

That’s why Map and Set also exist.… So we should use map methods: set, get and so on. Map can also use objects as keys.… And the standard iteration for map returns same key/value pairs as map.entries().… For example, we have visitors coming, and we’d like to remember everyone.… But this may help to replace Map with Set in certain cases with ease, and vice versa.

TextDecoder object allows one to read the value into an actual JavaScript string, given the buffer and… label – the encoding, utf-8 by default, but big5, windows-1251 and… …And then decode: input – BufferSource… This options tells TextDecoder to memorize “unfinished” characters and decode them when the next chunk

A File object inherits from Blob and is extended with filesystem-related capabilities.… FileReader.FileReader is an object with the sole purpose of reading data from Blob (and hence File too… text string with the given encoding (utf-8 by default). readAsDataURL(blob) – read the binary data and… The most widely used events are for sure load and error.… In addition to Blob methods and properties, File objects also have name and lastModified properties,

Specification.The ECMA-262 specification contains the most in-depth, detailed and formalized information… MDN (Mozilla) JavaScript Reference is the main manual with examples and other information.… To see their support among browser-based and other engines, see: https://caniuse.com – per-feature tables… caniuse.com/#feat=cryptography. https://kangax.github.io/compat-table – a table with language features and

The two most used data structures in JavaScript are Object and Array.… For example, here only two items are taken, and the rest is just ignored:… We can use any other variable name in place of rest, just make sure it has three dots before it and goes… Can we take some and then assign the “rest” somewhere?… all the rest makes the array rest.

Such transformations are often required in real-life, as many functions and libraries are callback-based… The function loads a script with the given src, and then calls callback(err) in case of an error, or… when the load is successful, and rejects with the error otherwise.… If we like promises more than callbacks (and soon we’ll see more reasons for that), then we will use… later in the chapter Async/await), but not a total replacement for callbacks.

Getters and setters.Accessor properties are represented by “getter” and “setter” methods.… It is readable and writable.… the access is done via getter and setter.… a setter and tweak its behavior.… We can try to find all such places and fix them, but that takes time and can be hard to do if that code

Run it and see what really happens.… and switches elsewhere.… ads and evils pages.… The main window and the popup can freely read and modify each other if they have the same origin.… Events focus and blur allow to track switching in and out of the window.

used one of them (admin) to get into it and make changes.… We’ll mention that in the chapter Property flags and descriptors.… and copying them on the primitive level.… user[key] and, if it’s an object, then replicate its structure as well.… Summary.Objects are assigned and copied by reference.

And it may be a better choice for such task.… down, and then keyup – when it’s released. event.code and event.key.The key property of the event object… The event.key is exactly the character, and it will be different.… again, and then when it’s released we finally get keyup.… The browser opens the “Save Page” dialog (Ctrl+S) …and so on.

But an object property is actually a more flexible and powerful thing.… In this chapter we’ll study additional configuration options, and in the next we’ll see how to invisibly… true, then listed in loops, otherwise not listed. configurable – if true, the property can be deleted and… The returned value is a so-called “property descriptor” object: it contains the value and all the flags… returns all property descriptors including symbolic and non-enumerable ones.

Forms and control elements, such as <input> have a lot of special properties and events.… That’s a so-called “named collection”: it’s both named and ordered.… This is typical with radio buttons and checkboxes.… So a form references all elements, and elements reference the form.… We can use document.createElement('option') and set attributes manually.

So the sum is 284px plus left and right paddings, total 324px.… But as we know from the chapter Styles and classes, we can read CSS-height and width using getComputedStyle… And there’s one more reason: a scrollbar.… And clientWidth/clientHeight take that into account.… But Firefox shows 300px, while Chrome and Edge show less.

But most environments have the internal scheduler and provide these methods.… In particular, they are supported in all browsers and Node.js. setTimeout.The syntax:… And here sayHi() runs the function, and the result of its execution is passed to setTimeout.… In this case the engine waits for func to complete, then checks the scheduler and if the time is up,… /setTimeout, an internal reference is created to it and saved in the scheduler.

For instance, we have Article objects and need a function to compare them.… And for the second one we can make a static method of the class.… methods.Static properties and methods are inherited.… For instance, Animal.compare and Animal.planet in the code below are inherited and accessible as Rabbit.compare… As a result, inheritance works both for regular and static methods.

The for…of and for…in loops A small announcement for advanced readers.… This article covers only basic loops: while, do..while and for(..;..;..).… See for…of and iterables for looping over arrays and iterable objects. Otherwise, please read on.… , while it’s truthy, execute it again and again.… body alert(i) Runs again and again while the condition is truthy.

How do we find the width and height of the browser window?… How do we get the full width and height of the document, including the scrolled out part?… But there are additional methods and peculiarities to consider.… Width/height of the window.To get window width and height, we can use the clientWidth/clientHeight of… If it occupied some space, then that space is now free and the content “jumps” to fill it.

So, if we have a slotted element, and an event occurs somewhere inside it, then it bubbles up to the… <slot> and upwards.… All touch events and pointer events also have composed: true.… true for it to bubble up and out of the component.… …And so on.

Export and import statements that we covered in previous chapters are called “static”.… The syntax is very simple and strict.… That’s a good thing, as code structure can be analyzed, modules can be gathered and bundled into one… That’s possible only because the structure of imports/exports is simple and fixed.… The import() expression.The import(module) expression loads the module and returns a promise that resolves

it is usually used to validate the form before sending it to the server or to abort the submission and… We can use it to dynamically create and send our own forms to server.… The handler can check the data, and if there are errors, show them and call event.preventDefault(), then… In the form below: Go into the text field and press Enter.… Relation between submit and

We need to wait until the script loads, and only then we can call it.… It triggers after the script was loaded and executed.… …And what if the loading failed?… , save errors and provide an interface to access and analyze them.… Summary.Images <img>, external styles, scripts and other resources provide load and error events

Understanding how event loop works is important for optimizations, and sometimes for the right architecture… When a user moves their mouse, the task is to dispatch mousemove event and execute handlers.… …and so on.… …and so on.… And its overall execution time isn’t much longer.