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
The most deeply nested element that caused the event is called a target element, accessible as event.target… Normally it goes upwards till <html>, and then to document object, and some events even reach window… If you click on <p>, then the sequence is:
HTML → BODY → FORM → DIV -> P (capturing phase,… the first listener):
P → DIV → FORM → BODY → HTML (bubbling phase, the second listener).… Each handler can access event object properties:
event.target – the deepest element that originated
This is the correct variant:
Resulthello.jsuser.jsindex.htmlIn the browser, if we talk about HTML pages… wait until the HTML document is fully ready (even if they are tiny and load faster than HTML), and then… As a side effect, module scripts always “see” the fully loaded HTML-page, including HTML elements below… Async scripts run immediately when ready, independently of other scripts or the HTML document.… “Special” module types like HTML/CSS modules are also supported.
Please don’t use id-named global variables to access… That’s fine for simple scripts, inlined into HTML, but generally isn’t a good thing.… Also, when one reads JS code and doesn’t have HTML in view, it’s not obvious where the variable comes… the collection with elements that the pointer is over now (in nesting order: from the outermost <html… The second scripts runs after the browser meets one more <div>, so its length is 2.
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.… In the previous example with the clickable HTML-link, we don’t call URL.revokeObjectURL(link.href), because… Direct access to blob, no “encoding/decoding”
Blob to data urlNo need to revoke anything… From Blob to stream.When we read and write to a blob of more than 2
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… Surely the user has access to HTML-source of the page, and can take the content from there, but not everyone
JavaScript can access an existing selection, select/deselect DOM nodes as a whole or partially, remove… 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… startOffset – node and offset of the start,
in the example above: first text node inside <p> and 2.
For example, we need that to store a list of something: users, goods, HTML elements etc.… We can explicitly calculate the last element index and then access it: fruits[fruits.length - 1].… The square brackets used to access a property arr[0] actually come from the object syntax.… Move all elements to the left, renumber them from the index 1 to 0, from 2 to 1 and so on.… The for..of doesn’t give access
chapter Blob),
"document" – get as XML document (can use XPath and other XML methods) or HTML… The current state is accessible as xhr.readyState.… An XMLHttpRequest object travels them in the order 0 → 1 → 2
But for binary processing, to access individual data bytes, we can change it to "arraybuffer"… 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:
The corresponding regexp: html|php|java(script)?.… CSS matches I love HTML or CSS.… I love (HTML|CSS) matches I love HTML or I love CSS.… Otherwise, if the first digit is 2, then the next must be [0-3].… The alternation | now happens to be between [01]\d and 2[0-3]:[0-5]\d.
A built-in <template> element serves as a storage for HTML markup templates.… The browser ignores its contents, only checks for syntax validity, but we can access and use it in JavaScript… In theory, we could create any invisible element somewhere in HTML for HTML markup storage purposes.… First, its content can be any valid HTML, even if it normally requires a proper enclosing tag.… We can access template.content from JavaScript, clone it to reuse in a new component.
Once a custom element is defined, we can use it on par with built-in HTML elements.… That’s great, as HTML dictionary is rich, but not infinite.… That’s strange for an HTML element.… They are unknown to search engines, and accessibility devices can’t handle them.… HTML Living Standard: https://html.spec.whatwg.org/#custom-elements.
Shorter notation: form.name
There’s a shorter notation: we can access… That also works, but there’s a minor issue: if we access an element, and then change its name, then it… </textarea> holds its value as nested HTML, we should never use textarea.innerHTML to access it… It stores only the HTML that was initially on the page, not the current value.… The difference between defaultSelected and selected is that defaultSelected sets the HTML-attribute (
HTML attributes.In HTML, tags may have attributes.… Is there a way to access such attributes?
Sure.… These methods operate exactly with what’s written in HTML.… HTML-elements for JavaScript.… We want to read the value “as written” in HTML.
From it we can access any node.… That’s the DOM node of the <html> tag.… For instance, <head> and <body> are children of <html> element.… Properties firstChild and lastChild give fast access to the first and last children.… There are also additional navigation properties for HTML forms.
They can be written right in a web page’s HTML and run automatically as the page loads.… The aim is to prevent an evil webpage from accessing private information or harming the user’s data.… It has no direct access to OS functions.… Modern browsers allow it to work with files, but the access is limited and only provided if the user… There are at least three great things about JavaScript:
Full integration with HTML/CSS.
It allows a component to have its very own “shadow” DOM tree, that can’t be accidentally accessed from… Shadow tree – a hidden DOM subtree, not reflected in HTML, hidden from prying eyes.… Any code is able to access the shadow tree of elem.… There’s no way to access them.… If mode="open", then it’s accessible as elem.shadowRoot property.
The backbone of an HTML document is tags.… According to the Document Object Model (DOM), every HTML tag is an object.… For instance, the top tag is always <html>.… > directive at the very beginning of HTML is also a DOM node.… …etc, everything in HTML has its place in DOM, even comments.
Usually the HTML-mode is used for webpages.… ="more html".… HTML of the element.The outerHTML property contains the full HTML of the element.… It puts the new HTML in its place instead.… With innerHTML we’ll have it inserted “as HTML”, with all HTML tags.
second (*),
Then the .then handler is called (**), which in turn creates a new promise (resolved with 2… 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.… So the output is the same as in the previous example: 1 → 2 → 4, but now with 1 second delay between… In the example above resolve(2) is called after 1 second (**).
To access individual bytes, another “view” object is needed, not buffer[index].… Uint16Array – treats every 2 bytes as an integer, with possible values from 0 to 65535.… It allows to access the data on any offset in any format.… With DataView we access the data with methods like .getUint8(i) or .getUint16(i).… We can access it as .buffer and make another view if needed.
Document events:
DOMContentLoaded – when the HTML is loaded and processed, DOM is fully built.… HTML-attribute.A handler can be set in HTML with an attribute named on<event>.… Accessing the element: this.The value of this inside a handler is the element.… The event object is also available in HTML handlers
If we assign a handler in HTML, we can… HTML attributes are used sparingly, because JavaScript in the middle of an HTML tag looks a little bit
Many built-in objects already exist, such as those that work with dates, errors, HTML elements, etc.… It would be great to access them using methods.… The language allows access to methods and properties of strings, numbers, booleans and symbols.… So in the moment of accessing its property, a special object is created that knows the value of the string… An attempt to access a property of such value would give the error:
There’s also an autofocus HTML attribute that puts the focus onto an element by default when a page loads… Modern HTML… This can be changed using HTML-attribute tabindex.… is: if we have two elements, the first has tabindex="1", and the second has tabindex="2&… The order is like this: 1 - 2
Different websites can’t access each other’s databases.… 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).
is a safe way to access nested object properties, even if an intermediate property doesn’t exist.… Here’s the safe way to access user.address.street using ?.… Further properties are accessed in a regular way.… [] syntax also works, if we’d like to use brackets [] to access properties instead of dot ..… allows to safely access nested properties.
Still, we should apply ?.
Some features are well-supported and integrated into the modern HTML/DOM standard, while others are yet… DOM structure, managed solely by its class, outside code doesn’t access it (“encapsulation” principle… Custom elements – to define custom HTML elements.
In this HTML, a click on a link doesn’t lead to navigation; the browser doesn’t do anything:… some CSS:
Menu items are implemented as HTML-links… We forever deny access to information about right-clicks for any outer code, including counters that… But we should generally keep the semantic meaning of HTML elements.… Besides being “just a good thing”, that makes your HTML better in terms of accessibility.
operand is 2.… The 2 gets concatenated to '1', so it’s like '1' + 2 = "12" and "12" + 2 = "… For example, write (1 + 2) * 2.
There are many operators in JavaScript.… So, the alert shows 2.… It’s like (a = 1 + 2), 3 + 4.
To grant JavaScript access to any other response header, the server must send the Access-Control-Expose-Headers… Access-Control-Request-Method – requested method.… Step 2 (preflight response).The server should respond with status 200 and the headers:
Access-Control-Allow-Origin… : https://javascript.info
Access-Control-Allow-Methods: PATCH
Access-Control-Allow-Headers: Content-Type… list of allowed methods,
Access-Control-Allow-Headers with a list of allowed headers,
Access-Control-Max-Age
The lifecycle of an HTML page has three important events:
DOMContentLoaded – the browser fully loaded… HTML, and the DOM tree is built, but external resources like pictures <img> and stylesheets may… not yet have loaded.
load – not only HTML is loaded, but also all the external resources: images, styles… DOMContentLoaded and scripts.When the browser processes an HTML-document and comes across a <script… The typical output:
[1] initial readyState:loading
[2] readyState:interactive
[2] DOMContentLoaded
[
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.
We already know that a function can access variables outside of it (“outer” variables).… It can access the outer variables and so can return the full name.… No matter where, it still has access to the same outer variables.… Step 2. Function Declarations.A function is also a value, like a variable.… In theory, it should be accessible, but the engine optimized it out.
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)… Append glue and this[2].
…Do so until this.length items are glued.
Return result.… There exists a way to create decorators that keep access to function properties, but this requires using
But what if we’d like to insert an HTML string “as html”, with all tags and stuff working, in the same… " – insert html into elem, at the beginning,
"beforeend" – insert html into elem, at the… The second parameter is an HTML string, that is inserted “as HTML”.… Given some HTML in html, elem.insertAdjacentHTML(where, html) inserts it depending on the value of where… ; – insert html right after elem.
For browsers, timers are described in the timers section of HTML Living Standard.
setInterval.The setInterval… The following example will show the message every 2 seconds.… The actual interval between alerts will be shorter than 2 seconds.… The HTML Living Standard says: “after five nested timers, the interval is forced to be at least 4 milliseconds
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… If there are many groups, it’s convenient to use rest parameters to access… gives us the ultimate replacement power, because it gets all the information about the match, has access
For instance, server-side scripts that download HTML pages and process them can also use the DOM.… Specifications
The BOM is a part of the general HTML specification.… The HTML spec at https://html.spec.whatwg.org is not only about the “HTML language” (tags, attributes… That’s “HTML in broad terms”.… HTML specification
Describes the HTML language (e.g. tags) and also the BOM (browser object model) –
Regexp for an “opening HTML-tag… Improved: /<[a-z][a-z0-9]*>/i
According to the standard, HTML tag name may have a digit at any… Regexp “opening or closing HTML-tag without attributes”: /<\/?… For instance, for HTML tags we could use a simpler regexp: <\w+>.… But as HTML has stricter restrictions for a tag name, <[a-z][a-z0-9]*> is more reliable.
This chapter is about sending HTML forms: with or without files, with additional fields and so on.… As you might have guessed, it’s the object to represent HTML form data.… The constructor is:
If HTML form element… Summary.FormData objects are used to capture HTML form and submit it using fetch or another network method… We can either create new FormData(form) from an HTML form, or create an object without a form at all,
Crossorigin policy.There’s a rule: scripts from one site can’t access contents of the other site.… There are three levels of cross-origin access:
No crossorigin attribute – access prohibited.
crossorigin… ="anonymous" – access allowed if the server responds with the header Access-Control-Allow-Origin… allowed if the server sends back the header Access-Control-Allow-Origin with our origin and Access-Control-Allow-Credentials… So the cross-origin access was prohibited. Let’s add it.
There may be 2, 3, 4 or more.… In the demo above they are labeled: 1, 2, 3.
Build segments between control points 1 → 2 → 3.… 2 → 3, 3 → 4.… There will be N-2 segments.
Repeat step 2 until there is only one point.… 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 +
The “script” tag.JavaScript programs can be inserted almost anywhere into an HTML document using the… used nowadays but can still be found in old code:
The type attribute: <script type=…>
The old HTML… Also, the modern HTML standard totally changed the meaning of this attribute.… Script files are attached to HTML with the src attribute:… Please note:
As a rule, only the simplest scripts are put into HTML
External interface – methods and properties, accessible also from outside the class.… those extending it (like private, but plus access from inheriting classes).… They are only accessible from inside the class.… We can’t access it from outside or from inheriting classes.… JavaScript makes sure we can only access those from inside the class.
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.… The full HTML page with these frameworks and pow spec:… The HTML element <div id="mocha"> will be used by Mocha to output results.
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… As a side effect, the length of such symbols is 2:
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.
Such snippet in an HTML markup looks like this:… We find code snippets in HTML and highlight them.
Now let’s go on.… For now it only matters that we fetch an HTML article from a webserver and display it on demand:… The new article HTML may contain code snippets… We can add/remove code snippets in HTML without thinking about it.
The remote server will get the Origin header and must respond with Access-Control-Allow-Origin… Full example.Here’s the server that sends messages with 1, 2,… connection state: either EventSource.CONNECTING (=0), EventSource.OPEN (=1) or EventSource.CLOSED (=2)
Only first 50 results are shown.