|
1 | | -# Interaction: alert, prompt, confirm |
| 1 | +# Взаимодействие: alert, prompt, confirm |
2 | 2 |
|
3 | | -This part of the tutorial aims to cover JavaScript "as is", without environment-specific tweaks. |
| 3 | +В этой части учебника мы разбираем "собственно JavaScript", без привязки к браузеру или другой среде выполнения. |
| 4 | + |
| 5 | +Но, так как мы будем использовать браузер как демо-среду, нам нужно познакомиться по крайней мере с несколькими функциями его пользовательского интерфейса, а именно: `alert`, `prompt` и `confirm`. |
4 | 6 |
|
5 | | -But we'll still be using the browser as our demo environment, so we should know at least a few of its user-interface functions. In this chapter, we'll get familiar with the browser functions `alert`, `prompt` and `confirm`. |
6 | 7 |
|
7 | 8 | ## alert |
8 | 9 |
|
9 | | -Syntax: |
| 10 | +Синтаксис: |
10 | 11 |
|
11 | 12 | ```js |
12 | 13 | alert(message); |
13 | 14 | ``` |
14 | 15 |
|
15 | | -This shows a message and pauses script execution until the user presses "OK". |
| 16 | +Этот код отобразит окно в браузере и приостановит дальнейшее выполнение скриптов, до тех пор пока пользователь не нажмет кнопку "OK". |
16 | 17 |
|
17 | | -For example: |
| 18 | +Например: |
18 | 19 |
|
19 | 20 | ```js run |
20 | 21 | alert("Hello"); |
21 | 22 | ``` |
22 | 23 |
|
23 | | -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". |
| 24 | +Это небольшое окно с сообщением называется *модальным окном*. Понятие *модальный* означает, что пользователь не может взаимодействовать с интерфейсом остальной части страницы, нажимать на другие кнопки и т.д. до тех пор, пока взаимодействует с окном. В данном случае -- пока не будет нажата кнопка "OK". |
24 | 25 |
|
25 | 26 | ## prompt |
26 | 27 |
|
27 | | -The function `prompt` accepts two arguments: |
| 28 | +Функция `prompt` принимает два аргумента: |
28 | 29 |
|
29 | 30 | ```js no-beautify |
30 | 31 | result = prompt(title, [default]); |
31 | 32 | ``` |
32 | 33 |
|
33 | | -It shows a modal window with a text message, an input field for the visitor, and the buttons OK/CANCEL. |
| 34 | +Этот код отобразит модальное окно с текстом, полем для ввода текста и кнопками OK/CANCEL. |
34 | 35 |
|
35 | 36 | `title` |
36 | | -: The text to show the visitor. |
| 37 | +: Текст для отображения в окне. |
37 | 38 |
|
38 | 39 | `default` |
39 | | -: An optional second parameter, the initial value for the input field. |
| 40 | +: Необязательный второй параметр, который устанавливает начальное значение в поле для текста в окне. |
40 | 41 |
|
41 | | -The visitor may type something in the prompt input field and press OK. Or they can cancel the input by pressing CANCEL or hitting the `key:Esc` key. |
| 42 | +Пользователь может напечатать что-либо в поле ввода и нажать OK. Или отменить ввод нажатием на кнопку CANCEL или нажав клавишу `key:Esc`. |
42 | 43 |
|
43 | | -The call to `prompt` returns the text from the input field or `null` if the input was canceled. |
| 44 | +Вызов `prompt` вернет текст, указанный в поле для ввода, или `null` если ввод отменен пользователем. |
44 | 45 |
|
45 | | -For instance: |
| 46 | +Например: |
46 | 47 |
|
47 | 48 | ```js run |
48 | | -let age = prompt('How old are you?', 100); |
| 49 | +let age = prompt('Сколько тебе лет?', 100); |
49 | 50 |
|
50 | | -alert(`You are ${age} years old!`); // You are 100 years old! |
| 51 | +alert(`Тебе ${age} лет!`); // Тебе 100 лет! |
51 | 52 | ``` |
52 | 53 |
|
53 | | -````warn header="In IE: always supply a `default`" |
54 | | -The second parameter is optional, but if we don't supply it, Internet Explorer will insert the text `"undefined"` into the prompt. |
| 54 | +````warn header="Для IE: всегда устанавливайте значение по умолчанию" |
| 55 | +Второй параметр не обязательный, но если не указать его, то Internet Explorer установить значение `"undefined"` в поле для ввода. |
55 | 56 |
|
56 | | -Run this code in Internet Explorer to see: |
| 57 | +Запустите код в Internet Explorer и посмотрите на результат: |
57 | 58 |
|
58 | 59 | ```js run |
59 | 60 | let test = prompt("Test"); |
60 | 61 | ``` |
61 | 62 |
|
62 | | -So, for prompts to look good in IE, we recommend always providing the second argument: |
| 63 | +Чтобы `prompt` хорошо выглядел в IE, рекомендуется всегда указывать второй параметр: |
63 | 64 |
|
64 | 65 | ```js run |
65 | | -let test = prompt("Test", ''); // <-- for IE |
| 66 | +let test = prompt("Test", ''); // <-- для IE |
66 | 67 | ``` |
67 | 68 | ```` |
68 | 69 |
|
69 | 70 | ## confirm |
70 | 71 |
|
71 | | -The syntax: |
| 72 | +Синтаксис: |
72 | 73 |
|
73 | 74 | ```js |
74 | 75 | result = confirm(question); |
75 | 76 | ``` |
76 | 77 |
|
77 | | -The function `confirm` shows a modal window with a `question` and two buttons: OK and CANCEL. |
| 78 | +Функция `confirm` отображает модальное окно с текстом вопроса `question` и двумя кнопками: OK и CANCEL. |
78 | 79 |
|
79 | | -The result is `true` if OK is pressed and `false` otherwise. |
| 80 | +Результат `true`, если нажата кнопка OK. В других случаях `false`. |
80 | 81 |
|
81 | | -For example: |
| 82 | +Например: |
82 | 83 |
|
83 | 84 | ```js run |
84 | | -let isBoss = confirm("Are you the boss?"); |
| 85 | +let isBoss = confirm("Ты тут главный?"); |
85 | 86 |
|
86 | | -alert( isBoss ); // true if OK is pressed |
| 87 | +alert( isBoss ); // true если нажата OK |
87 | 88 | ``` |
88 | 89 |
|
89 | | -## Summary |
| 90 | +## Итого |
90 | 91 |
|
91 | | -We covered 3 browser-specific functions to interact with visitors: |
| 92 | +Рассмотрели 3 функции браузера для взаимодействия с пользователем: |
92 | 93 |
|
93 | 94 | `alert` |
94 | | -: shows a message. |
| 95 | +: показывает сообщение. |
95 | 96 |
|
96 | 97 | `prompt` |
97 | | -: shows a message asking the user to input text. It returns the text or, if CANCEL or `key:Esc` is clicked, `null`. |
| 98 | +: показывает сообщение и запрашивает ввод текста от пользователя. Возвращает напечатанный текст в поле ввода или `null`, если были нажаты кнопки CANCEL или `key:Esc` с клавиатуры. |
98 | 99 |
|
99 | 100 | `confirm` |
100 | | -: shows a message and waits for the user to press "OK" or "CANCEL". It returns `true` for OK and `false` for CANCEL/`key:Esc`. |
| 101 | +: показывает сообщение и ждет, пока пользователь нажмет OK или CANCEL. Возвращает `true`, если нажата OK и `false`, если нажаты кнопки CANCEL или `key:Esc` с клавиатуры. |
101 | 102 |
|
102 | | -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. |
| 103 | +Все эти методы являются модальными: останавливают выполнение скриптов и не позволяют пользователю взаимодействовать с остальной частью страницы до тех пор, пока окно не будет закрыто. |
103 | 104 |
|
104 | | -There are two limitations shared by all the methods above: |
| 105 | +На все указанные методы распространяется два ограничения: |
105 | 106 |
|
106 | | -1. The exact location of the modal window is determined by the browser. Usually, it's in the center. |
107 | | -2. The exact look of the window also depends on the browser. We can't modify it. |
| 107 | +1. Расположение окон определяется браузером. Обычно окна находятся в центре. |
| 108 | +2. Визуальное отображение окон зависит от браузера и мы не можем изменит их вид. |
108 | 109 |
|
109 | | -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. |
| 110 | +Такова цена простоты. Есть другие способы показать более приятные глазу окна с богатым функционалом для взаимодействия с пользователем, но если "навороты" не имеют значения, то данные методы работают отлично. |
0 commit comments