We’ve already seen a statement, alert('Hello, world!'), which shows the message “Hello, world!”.… For example, here we split “Hello World” into two alerts:… For now, just remember the result of running the code: it shows Hello, then 1, then 2.… If we run this code, only the first Hello shows (and there’s an error, you may need to open the console
code can be passed, but that’s not recommended.
delay
The delay before run, in milliseconds (1000 ms = 1… For instance, this outputs “Hello”, then immediately “World”:… But the scheduler will only “check the calendar” after the current script is complete, so "Hello… " is first, and "World" – after it.
This part of the tutorial is about core JavaScript, the language itself.
But we need a working environment to run our scripts and, since this book is …
Objects are usually created to represent entities of the real world, like users, orders and so on:… And, in the real world, a user can act: select… Method examples.For a start, let’s teach the user to say hello:
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.… store larger integers (up to 1.7976931348623157 * 10308), but outside of the safe integer range ±(253-1)… For most purposes ±(253-1) range is quite enough, but sometimes we need the entire range of really big… Double quotes: "Hello".
Single quotes: 'Hello'.
Backticks: `Hello`.
For instance: "Hello, world" should become «Hello, world».
In the demo above they are labeled: 1, 2, 3.
Build segments between control points 1 → 2 → 3.… The formula for a 2-points curve:
P = (1-t)P1 + tP2
For 3 control points:
P = (1−t)2P1 + 2(1−t)tP2… + t2P3
For 4 control points:
P = (1−t)3P1 + 3(1−t)2tP2 +3(1−t)t2P3 + t3P4
These are vector equations… For instance, if control points are (0,0), (0.5, 1) and (1, 0), the equations become:
x = (1−t)2 *… 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 +
That is “a must” practice in developing anything more complex than a “hello world” app.… To understand this, let’s break away from development and turn our eyes into the real world.
For instance, regexp \bJava\b will be found in Hello, Java!… , where Java is a standalone word, but not in Hello, JavaScript!.… In the string Hello, Java!… Then matches the word Hello.
Then the test \b matches again, as we’re between o and a comma.
Bubbling example.We can create a bubbling event with the name "hello" and catch it on document… The bubbling mechanics is the same for built-in (click) and custom (hello) events.… Custom events.For our own, completely new events types like "hello" we should use new CustomEvent… The output order is: 1… The output order becomes: 1 → 2 → nested.
There are other real-world examples of asynchronous actions, e.g. loading scripts and modules (we’ll… this:
In the code above:
We load 1.… --
loadScript('1.js', function(error, script) {
if (error) {
handleError(error);
} else {
For example, here 1+2 results in 3, while the function call hello("debugger") returns nothing… Pause and look around.In our example, hello() is called during the page load, so the easiest way to activate… At the current moment the debugger is inside hello() call, called by a script in index.html (no function
By clicking on a link you download a dynamically-generated Blob with hello world contents as a file:
There are other great editors in our big world. Please choose the one you like the most.
For example, given the element <p>Hello</p>, we can create the range containing the letters… As we can see, this phrase consists of exactly two children of <p>, with indexes 0 and 1:… with 3 ranges, made in Firefox:
Other browsers support at maximum 1… imply that there may be many ranges, but again, in all browsers except Firefox, there’s at maximum 1.… Here’s a button that inserts "HELLO" at the cursor position and puts the cursor immediately
Here’s the picture, taken from the specification, of the capturing (1), target (2) and bubbling (3) phases… handles the event (the one that has the handler on it)
event.eventPhase – the current phase (capturing=1,… In real world, when an accident happens, local authorities react first.
Solution 1: a wrapper.The simplest solution is to use a wrapping function:… the partial call ("10:00")
Then gives it ...args – arguments given to the wrapper ("Hello
Hello in <p>Hello</p>.
Comment – the class for comments.… It has a numeric value:
elem.nodeType == 1 for element nodes,
elem.nodeType == 3 for text nodes,
elem.nodeType… It has a numeric value: 1 for elements,3 for text nodes, and a few others for other node types.
\1.… Further in the pattern \1 means “find the same text as in the first group”, exactly the same quote in… 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.
pow(2, 1).The process repeats: a new subcall is made at line 5, now with arguments x=2, n=1.… at line 1 }
pow(2, 1)
Context: { x: 2, n: 2, at line 5 }
pow(2, 2)
Context… pow(2, 1).… The exit.During the execution of pow(2, 1), unlike before, the condition n == 1 is truthy, so the first… It has the result of the subcall pow(2, 1), so it also can finish the evaluation of x * pow(x, n - 1)
-(253-1), as we mentioned earlier in the chapter Data types.… Math.ceil
Rounds up: 3.1 becomes 4, and -1.1 becomes -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… It is one divided by ten 1/10, one-tenth.… A few examples:
Math.random()
Returns a random number from 0 to 1 (not including 1).
That is, regular requests to the server: “Hello, I’m here, do you have any information for me?”.
The x axis is the time: 0 – the start, 1 – the end of transition-duration.… That can be specified by the curve cubic-bezier(0, 0, 1, 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.… That is, the animation starts immediately and takes 1 step.
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.… Both of these statements do the same thing: increase counter by 1.
Is there any difference?… So, the alert shows 1.… It’s like (a = 1 + 2), 3 + 4.
Step 1.… --
```js
let phrase = "Hello";
function say(name) {
alert( `${phrase}, ${name}` );… }
say("John"); // Hello, John
```-->
During the function
we can see a variable sayHi getting a value, the new function, created as function() { alert("Hello… Here’s what happens above in detail:
The Function Declaration (1)
Here +a gives 1,… that’s compared with b + 1 in case, and the corresponding code is executed.… For 0, 1,
Here the flow is:
The initial promise resolves in 1 second (*),
Then the .then handler is called (**… As the result is passed along the chain of handlers, we can see a sequence of alert calls: 1 → 2 → 4.… 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… In the example above resolve(2) is called after 1 second (**).
Starting from the index 1 it removed 1 element.… The value of -1 is returned if nothing is found.… So the function result is 1.… On the second run, sum = 1, we add the second array element (2) to it and return.… 1
the second call
1
2
3
the third call
3
3
6
the fourth call
6
4
10
the fifth call
10
5
15
new Date(milliseconds)
Create a Date object with the time equal to number of milliseconds (1/… The date parameter is actually the day of month, if absent then 1 is assumed.… instance:
The maximal precision is 1… ms (1/1000 sec):… It may be “2 Mar” or “1 Mar” in case of a leap-year. We don’t need to think about it.
To be precise, there are 2n-1, where n is the length of the sequence.… =(\w+))\1. Of course, we could take another pattern instead of \w.… Then the engine will memorize their contents
…And allow us to reference it in the pattern as \1.… 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.
If that’s true – it returns 'Hello!'.
These are just parallel worlds.
Function properties can replace closures sometimes.
Such things are invisible for people using very fast connections, but many people in the world still
That is: if we have two elements, the first has tabindex="1", and the second has tabindex=&… 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.… The order is like this: 1
A number is a sequence of 1 or more digits \d.… So the regexp is \d{1,}:… Shorthands.There are shorthands for most used quantifiers:
+
Means “one or more”, the same as {1,
Sleep until a task appears, then go to 1.… Use-case 1: splitting CPU-hungry tasks.Let’s say we have a CPU-hungry task.… count does a part of the job (*), and then re-schedules itself (**) if needed:
First run counts: i=1.… queued and then executes when part 1 finished, before the next part.… Go to step 1.
To schedule a new macrotask:
Use zero delayed setTimeout(f).
For example, this <show-hello> element hides its internal DOM in shadow tree:
An exotic variable as a loop counter is especially cool if the loop body takes 1-2 pages (make it longer… Hello, debugger…
Side-effects everywhere!.
As an example, if the HTML file is the single word "Hello", the browser will wrap it into &… Now the last selected element is available as $0, the previously selected is $1 etc.
It responds with “Hello from server, John”, then waits 5 seconds and closes the connection.… socket.readyState property with values:
0 – “CONNECTING”: the connection has not yet been established,
1
We’ll first take a look at the syntax, and then explore a real-world use case, to see where such thing
Some programming languages allow the use of negative indexes for the same purpose, like fruits[-1].… We can explicitly calculate the last element index and then access it: fruits[fruits.length - 1].… Both fruits.pop() and fruits.at(-1)… 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 instance, the Promise.all below settles after 3 seconds, and then its result is an array [1, 2, 3… 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:
instance, \d\s\w means a “digit” followed by a “space character” followed by a “wordly character”, such as 1… For us strings 1-5 and 1 - 5 are nearly identical.
Numeric conversion rules:
Value
Becomes…
undefined
NaN
null
0
true and false
1… The conversion follows the rules:
Value
Becomes…
undefined
NaN
null
0
true / false
1 / 0
know, JavaScript strings are based on Unicode: each character is represented by a byte sequence of 1-… \u{X…XXXXXX}
X…XXXXXX must be a hexadecimal value of 1 to 6 bytes between 0 and 10FFFF (the highest code… That said, if we take from position 1
like CSS-property transition-timing-function that gets the fraction of time that passed (0 at start, 1… The value progress=0 denotes the beginning animation state, and progress=1 – the end state.… Gets a time fraction from 0 to 1, returns the animation progress, usually from 0 to 1.
draw – the function
Only first 50 results are shown.