Skip to content

Commit 1afe35e

Browse files
committed
Add nullish coalescing to multiple articles, refactor operators, renumber the chapter
0 parents  commit 1afe35e

File tree

3 files changed

+138
-0
lines changed

3 files changed

+138
-0
lines changed

1-simple-page/solution.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
JavaScript-code:
2+
3+
```js demo run
4+
let name = prompt("What is your name?", "");
5+
alert(name);
6+
```
7+
8+
The full page:
9+
10+
```html
11+
<!DOCTYPE html>
12+
<html>
13+
<body>
14+
15+
<script>
16+
'use strict';
17+
18+
let name = prompt("What is your name?", "");
19+
alert(name);
20+
</script>
21+
22+
</body>
23+
</html>
24+
```

1-simple-page/task.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
importance: 4
2+
3+
---
4+
5+
# A simple page
6+
7+
Create a web-page that asks for a name and outputs it.
8+
9+
[demo]

article.md

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
# Interaction: alert, prompt, confirm
2+
3+
As we'll be using the browser as our demo environment, let's see a couple of functions to interact with the user: `alert`, `prompt` and `confirm`.
4+
5+
## alert
6+
7+
This one we've seen already. It shows shows a message and waits for the user to presses "OK".
8+
9+
For example:
10+
11+
```js run
12+
alert("Hello");
13+
```
14+
15+
The mini-window with the message is called a *modal window*. The word "modal" means that the visitor can't interact with the rest of the page, press other buttons, etc, until they have dealt with the window. In this case -- until they press "OK".
16+
17+
## prompt
18+
19+
The function `prompt` accepts two arguments:
20+
21+
```js no-beautify
22+
result = prompt(title, [default]);
23+
```
24+
25+
It shows a modal window with a text message, an input field for the visitor, and the buttons OK/Cancel.
26+
27+
`title`
28+
: The text to show the visitor.
29+
30+
`default`
31+
: An optional second parameter, the initial value for the input field.
32+
33+
```smart header="The square brackets in syntax `[...]`"
34+
The square brackets around `default` in the syntax above denote that the parameter as optional, not required.
35+
```
36+
37+
The visitor can type something in the prompt input field and press OK. Then we get that text in the `result`. Or they can cancel the input by pressing Cancel or hitting the `key:Esc` key, then we get `null` as the `result`.
38+
39+
The call to `prompt` returns the text from the input field or `null` if the input was canceled.
40+
41+
For instance:
42+
43+
```js run
44+
let age = prompt('How old are you?', 100);
45+
46+
alert(`You are ${age} years old!`); // You are 100 years old!
47+
```
48+
49+
````warn header="In IE: always supply a `default`"
50+
The second parameter is optional, but if we don't supply it, Internet Explorer will insert the text `"undefined"` into the prompt.
51+
52+
Run this code in Internet Explorer to see:
53+
54+
```js run
55+
let test = prompt("Test");
56+
```
57+
58+
So, for prompts to look good in IE, we recommend always providing the second argument:
59+
60+
```js run
61+
let test = prompt("Test", ''); // <-- for IE
62+
```
63+
````
64+
65+
## confirm
66+
67+
The syntax:
68+
69+
```js
70+
result = confirm(question);
71+
```
72+
73+
The function `confirm` shows a modal window with a `question` and two buttons: OK and Cancel.
74+
75+
The result is `true` if OK is pressed and `false` otherwise.
76+
77+
For example:
78+
79+
```js run
80+
let isBoss = confirm("Are you the boss?");
81+
82+
alert( isBoss ); // true if OK is pressed
83+
```
84+
85+
## Summary
86+
87+
We covered 3 browser-specific functions to interact with visitors:
88+
89+
`alert`
90+
: shows a message.
91+
92+
`prompt`
93+
: shows a message asking the user to input text. It returns the text or, if Cancel button or `key:Esc` is clicked, `null`.
94+
95+
`confirm`
96+
: shows a message and waits for the user to press "OK" or "Cancel". It returns `true` for OK and `false` for Cancel/`key:Esc`.
97+
98+
All these methods are modal: they pause script execution and don't allow the visitor to interact with the rest of the page until the window has been dismissed.
99+
100+
There are two limitations shared by all the methods above:
101+
102+
1. The exact location of the modal window is determined by the browser. Usually, it's in the center.
103+
2. The exact look of the window also depends on the browser. We can't modify it.
104+
105+
That is the price for simplicity. There are other ways to show nicer windows and richer interaction with the visitor, but if "bells and whistles" do not matter much, these methods work just fine.

0 commit comments

Comments
 (0)