Search results

They belong to ClipboardEvent class and provide access to the data that is cut/copied/pasted.… For instance, the code below prevents all cut/copy/paste events and shows the text we’re trying to cut… So most browsers allow seamless read/write access to the clipboard only in the scope of certain user… events must not provide access to the clipboard.… The event.clipboardData property gives access to the clipboard.

That’s easy to understand if we look a bit under the hood of what happens when we copy a value.… When an object variable is copied, the reference is copied, but the object itself is not duplicated.… Cloning and merging, Object.assign.So, copying an object variable creates one more reference to the same… and copying them on the primitive level.… To make a “real copy” (a clone) we can use Object.assign for the so-called “shallow copy” (nested objects

Then it converts (“compiles”) the script to machine code.… For instance, in-browser JavaScript is able to: Add new HTML to the page, change the existing content… JavaScript’s abilities in the browser are limited to protect the user’s safety.… the information to the NSA.… JavaScript can easily communicate over the net to the server where the current page came from.

first example, the HTML attribute is used to initialize the button.onclick, while in the second example… to handle the event, to be covered later in the chapter Bubbling and capturing.… argument to the handler.… The method handleEvent does not have to do all the job by itself.… The last way is the most flexible, but it is also the longest to write.

For instance, Date objects (to be covered in the chapter Date and time) can be subtracted, and the result… Now let’s get into technical details, because it’s the only way to cover the topic in-depth.… The default valueOf is mentioned here only for the sake of completeness, to avoid any confusion.… Let’s implement these methods to customize the conversion.… to a primitive (using the rules described above).

DOM modification is the key to creating “live” pages.… Here we’ll see how to create new elements “on the fly” and modify the existing page content.… need to create element nodes, such as the div for the message.… But the alternative way would be to clone the existing div and modify the text inside it (if needed).… To append HTML to the page before it has finished loading: document.write(html) After the page is loaded

In this chapter we’ll learn how to do the same.… language, and using arguments was the only way to get all arguments of the function.… But sometimes we need to do exactly the reverse.… Spread syntax to the rescue!… Note that it is possible to do the same thing to make a copy of an object:

In attempting to click the link, the visitor in fact clicks the button.… A click on the button actually clicks on the iframe, but that’s not visible to the user, because the… we need to attack – is to position the <iframe> on the evil page in such a way that the button… So when a visitor tries to focus on the input they see on the page, they actually focus on the input… The top page (enclosing one, belonging to the hacker) sets a preventing handler to it, like this:

The DOM allows us to do anything with elements and their contents, but first we need to reach the corresponding… All operations on the DOM start with the document object. That’s the main “entry point” to DOM.… The second is tolerable, because we can use Array.from to create a “real” array from the collection,… We want to manipulate element nodes that represent tags and form the structure of the page.… to the standard, but there will always be at least one – even if it is not in the source HTML, the browser

is checked for a strict equality to the value from the first case (that is, value1) then to the second… If the equality is found, switch starts to execute the code starting from the corresponding case, until… switch starts to compare a from the first case variant that is 3.… The values must be of the same type to match.… But for 3, the result of the prompt is a string "3", which is not strictly equal === to the

var The var declaration is similar to let.… Most of the time we can replace let by var or vice-versa and expect things to work:… On the other hand, it’s important to understand differences when migrating old scripts from var to let… parentheses around the function is a trick to show JavaScript that the function is created in the context… There’s one more very minor difference related to the global object, that we’ll cover in the next chapter

add the behavior to other classes.… So User may inherit from another class and also include the mixin to “mix-in” the additional methods,… call to the parent method super.say() from sayHiMixin (at lines labelled with (*)) looks for the method… Also the method .on(name, handler) that adds handler function as the listener to events with the given… And another object, say, calendar may want to listen for such events to load the calendar for the logged-in

But for arrays we usually want the rest of the elements to shift and occupy the freed place.… copying to it all items from index start to end (not including end).… That’s often used to obtain a copy for further transformations that should not affect the original array… is to provide the fn which does the comparison.… As the function is applied, the result of the previous function call is passed to the next one as the

Optionally we can provide byteOffset to start from (0 by default) and the length (till the end of the… There are two additional methods: arr.set(fromArr, [offset]) copies all elements from fromArr to the… view, to operate on the given piece of data.… It allows to access the data on any offset in any format.… The whole array is supposed to be uniform. The i-th number is arr[i].

It also allows to trace the code step by step to see what exactly is going on.… Now you could click the same toggler again to hide the resources list and give the code some space.… It allows us to: Quickly jump to the breakpoint in the code (by clicking on it in the right panel).… the debugger (after we’ve set the breakpoints) is to reload the page.… Tracing the execution.Now it’s time to trace the script.

All previous declarations required us, programmers, to write the function code in the script.… So, such function doesn’t have access to outer variables, only to the global ones.… Our new function needs to interact with the main script.… The problem is that before JavaScript is published to production, it’s compressed using a minifier –… That’s usually a safe thing to do, because the variable is local, nothing outside the function can access

Upon the execution, it evaluates the expression a + b and returns the result.… eyes get used to the structure.… The major difference is that curly braces require a return within them to return a value (just like a… to arrow functions later in the chapter Arrow functions revisited.… With curly braces: (...args) => { body } – brackets allow us to write multiple statements inside the

You can try examples in any browser, Google Chrome is probably the most up to date with these features… In the case above, the page has blocks, each of them plays its own role, it’s logical to make these components… CSS styles, applied to the component.… Shadow DOM – to create an internal DOM for the component, hidden from the others.… CSS Scoping – to declare styles that only apply inside the Shadow DOM of the component.

The modern methods to get/set a prototype are: Object.getPrototypeOf(obj) – returns the [[Prototype]… The prototypal inheritance was in the language since its dawn, but the ways to manage it evolved over… It gave the ability to create objects with a given prototype, but did not provide the ability to get/… to perform the same functionality as __proto__.… The Object.create provides an easy way to shallow-copy an object with all descriptors:

For instance, to find rabbit.run method, the engine checks (bottom-up on the picture): The rabbit object… If we call super.method() then, the engine needs to get the method from the prototype of the current… You may skip this part and go below to the [[HomeObject]] subsection if you don’t want to know the details… Now let’s add one more object to the chain.… The reason is simple: In the line (*), the method tree.sayHi was copied from rabbit.

event object allows to get the character, while the code property of the event object allows to get… So it makes sense to check event.code, it’s always the same.… On the other hand, event.code has the benefit of staying always the same, bound to the physical key location… Do we want to handle layout-dependant keys? Then event.key is the way to go.… on), specific to the physical location of the key on keyboard. key – the character ("A", &

The syntax is very simple and strict.… provide a backbone for the code structure.… The import() expression.The import(module) expression loads the module and returns a promise that resolves… use parentheses (similar to super()).… So we can’t copy import to a variable or use call/apply with it. It’s not a function.

Move the mouse over the input field to see clientX/clientY (the example is in the iframe, so coordinates… In this particular case the most reasonable way is to prevent the browser action on mousedown.… Preventing copying If we want to disable selection to protect our page content from copy-pasting… If you try to copy a piece of text in the <div>, that won’t work, because the default action oncopy… Surely the user has access to HTML-source of the page, and can take the content from there, but not everyone

For instance, when the user presses the mouse button on it and starts to move the pointer.… The visitor just needs to start the selection from elsewhere.… demo.There are two approaches to copying the selected content: We can use document.getSelection().toString… Otherwise, to copy the full DOM, e.g. if we need to keep formatting, we can get the underlying ranges… So we disable the selection to avoid conflict, still allowing elem contents to be copied.

New features were added to the language while old functionality didn’t change.… It added new features to the language and modified some of the existing ones.… To keep the old code working, most such modifications are off by default.… that reverts the engine to old behavior.… So, how to actually use strict in the console?

As the function creation happens in the context of the assignment expression (to the right side of =)… Function to run if the answer is “Yes” no Function to run if the answer is “No” The function should… First, the syntax: how to differentiate between them in the code.… The correct approach would be to use a Function Expression and assign welcome to the variable that is… visible prior to the declaration itself.

In this chapter we’ll study additional configuration options, and in the next we’ll see how to invisibly… The method Object.getOwnPropertyDescriptor allows to query the full information about a property.… The syntax is: obj The object to get… object and its property to apply the descriptor. descriptor Property descriptor object to apply.… the addition of new properties to the object.

First we’ll look at the details, and then how to use it for adding new capabilities to built-in objects… [[Prototype]] of it is set to Object.prototype according to the rule that we discussed in the previous… Here’s the overall picture (for 3 built-ins to fit): Let’s check… These objects are created invisibly to us and most engines optimize them out, but the specification describes… For instance, if we’re making an array-like object, we may want to copy some Array methods to it.

create a function and assign it to the property user.sayHi of the object.… How to choose the right entities? How to organize the interaction between them?… To tell the truth, the notations are not fully identical.… To access the object, a method can use the this keyword.… The value of this is the object “before dot”, the one used to call the method.

If we ever need to change the message or the way it is shown, it’s enough to modify the code in one place… function has full access to the outer variable.… When the function is called in lines (*) and (**), the given values are copied to local variables from… When the execution reaches it, the function stops, and the value is returned to the calling code (assigned… That causes the function to exit immediately.

The third-party code won’t be aware of newly defined symbols, so it’s safe to add symbols to the user… The idea is that when we clone an object or merge objects, we usually want all properties to be copied… In order to read (create if absent) a symbol from the registry, use Symbol.for(key).… Symbol.keyFor internally uses the global symbol registry to look up the key for the symbol.… If the symbol is not global, it won’t be able to find it and returns undefined.

The browser checks the mouse position from time to time.… According to the browser logic, the mouse cursor may be only over a single element at any time – the… As you can see, the only generated events are the ones related to moving the pointer in and out of the… Nothing happens when the pointer goes to the child and back.… That’s the element that we are coming from/to, complementary to target.

The fetch method allows to track download progress.… To log the progress, we just need for every received fragment value to add its length to the counter.… method to get the result.… Prior to reading, we can figure out the full response length from the Content-Length header.… To create a string, we need to interpret these bytes. The built-in TextDecoder does exactly that.

code above, the second element of the array is skipped, the third one is assigned to title, and the… In the example above the property width goes to w, property height goes to h, and title is assigned to… Destructuring comes to the rescue!… Object properties that have no mapping are copied to the rest object.… goes to item1; the second goes into item2, and all the rest makes the array rest.

The first kind is data properties. We already know how to work with them.… Of course, we don’t want to copy-paste existing information, so we can implement it as an accessor:… Technically, external code is able to access the name directly by using user._name.… Using for compatibility.One of the great uses of accessors is that they allow to take control over a… Now what to do with the old code that still uses age

Many types of components, such as tabs, menus, image galleries, and so on, need the content to render… We could try to analyze the element content and dynamically copy-rearrange DOM nodes.… Menu example.Now let’s back to <custom-menu>, mentioned at the beginning of the chapter.… We just need to add a click handler to open/close the list, and the <custom-menu> is ready:… that the node is assigned to. slot.assignedNodes({flatten: true/false}) – DOM nodes, assigned to the

make the range object iterable (and thus let for..of work) we need to add a method to the object named… Technically, we may merge them and use range itself as the iterator to make the code simpler.… copies all items to it.… to each element before adding it to the array, and thisArg allows us to set this for it.… The optional arguments mapFn and thisArg allow us to apply a function to each item.

To initiate the drag’n’drop, we can mousedown anywhere on the ball.… It would be better if we keep the initial shift of the element relative to the pointer.… the pointer to the left-upper corner of the ball in variables shiftX/shiftY.… We need to know: where the element was dropped at the end of Drag’n’Drop – to do the corresponding action… At the drag start – remember the initial shift of the pointer relative to the element: shiftX/shiftY

transform end-of-line to make the Blob correspond to current OS newlines (\r\n or \n).… Here’s the similar code that causes user to download the dynamically created Blob, without any HTML:… So such URLs are short, but allow to access the Blob.… URL.revokeObjectURL(url) removes the reference from the internal mapping, thus allowing the Blob to be… browser will decode the string and show the image: To transform a Blob into base64, we’ll use the built-in

Two references.Now let’s imagine we copied the reference from user to admin:… The former "family" object has been unlinked from the root, there’s no reference to it any… All visited objects are remembered, so as not to visit the same object twice in the future.… Idle-time collection – the garbage collector tries to run only while the CPU is idle, to reduce the possible… It would be wise to plan that as the next step after you’re familiar with the language.

map[key] isn’t the right way to use a Map Although map[key] also works, e.g. we can set map… How Map compares keys To test keys for equivalence, Map uses the algorithm SameValueZero.… It is roughly the same as strict equality ===, but the difference is that NaN is considered equal to… E.g. we store the data in a Map, but we need to pass it to a 3rd-party code that expects a plain object… usually an array), copies values from it into the set. set.add(value) – adds a value, returns the set

We’d like to reuse what we have in user, not copy/reimplement its methods, just build a new object on… The property [[Prototype]] is internal and hidden, but there are many ways to set it.… animal to be the prototype of rabbit.… Then, when alert tries to read property rabbit.eats (**), it’s not in rabbit, so JavaScript follows the… So writing to such a property is actually the same as calling a function.

Most of the time, a JavaScript application needs to work with information.… To create a variable in JavaScript, use the let keyword.… If we need to store something else, the language forces us to create a new box (declare a new variable… But in the old times, it was technically possible to create a variable by a mere assignment of the value… It’s only okay to use them if the context of the code makes it exceptionally obvious which data or value

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.… The more elements in the array, the more time to move them, more in-memory operations.… The similar thing happens with unshift: to add an element to the beginning of the array, we need first… to move existing elements to the right, increasing their indexes.

In other words, we want to add an iteration ability to the object.… The most common case is that the object needs to make a network request to deliver the next value, we… The next() method should return a promise (to be fulfilled with the next value).… browser fetch method to download the commits.… work with such streams, to transform the data and to pass it from one stream to another (e.g. download

Then, the browser automatically adds them to (almost) every request to the same domain using the Cookie… Next time the request is sent to the same domain, the browser sends the cookie over the net using the… to the root domain: domain=site.com.… Usually, we should set path to the root: path=/ to make the cookie accessible from all website pages.… the bank’s website, for the second cookie to be sent.

Most of the time, operators and functions automatically convert the values given to them to the right… There are also cases when we need to explicitly convert a value to the expected type.… For example, alert(value) does it to show the value.… We can also call the String(value) function to convert a value to a string:… We’ll return to them later in the chapter Object to primitive conversion that is devoted exclusively

to read the response.… to the response.… To grant JavaScript access to any other response header, the server must send the Access-Control-Expose-Headers… by adding them to the list.… to the main response.

corresponds to the "class" attribute.… Mind the units.Don’t forget to add CSS units to values.… But how to read it? For instance, we want to know the size, margins, the color of an element.… A resolved style value is the one finally applied to the element.… to break the privacy.

Preventing browser actions.There are two ways to tell the browser we don’t want it to act: The main… way is to use the event object.… Try to click on the first <input> below – the focus event happens.… The focusing is still possible if we use another way to enter the input.… For instance, the Tab key to switch from the 1st input into the 2nd.