|
1 | | -# Interaction: alert, prompt, confirm |
| 1 | +# Interação: alert, prompt, confirm |
2 | 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`. |
| 3 | +Como usuaremos o navegador como nosso ambiente de demonstração, vamos ver algumas funções para interagir com o usuário: `alert`, `prompt` e `confirm`. |
4 | 4 |
|
5 | 5 | ## alert |
6 | 6 |
|
7 | | -This one we've seen already. It shows a message and waits for the user to press "OK". |
| 7 | +Esta já vimos. Ela mostra uma mensagem e aguarda o usuário pressionar "OK". |
8 | 8 |
|
9 | | -For example: |
| 9 | +Por exemplo: |
10 | 10 |
|
11 | 11 | ```js run |
12 | | -alert("Hello"); |
| 12 | +alert('Olá'); |
13 | 13 | ``` |
14 | 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". |
| 15 | +A mini-janela com a mensagem é chamada de _modal window_. A palavra "modal" significa que o visitante não pode interagir com o resto da página, pressionar outros botões, etc, até que ele tenha lidado com a janela. Nesse caso -- até pressionar "OK". |
16 | 16 |
|
17 | 17 | ## prompt |
18 | 18 |
|
19 | | -The function `prompt` accepts two arguments: |
| 19 | +A função `prompt` aceita dois argumentos: |
20 | 20 |
|
21 | 21 | ```js no-beautify |
22 | 22 | result = prompt(title, [default]); |
23 | 23 | ``` |
24 | 24 |
|
25 | | -It shows a modal window with a text message, an input field for the visitor, and the buttons OK/Cancel. |
| 25 | +Mostra uma janela modal com uma mensagem de texto, um campo de entrada para o visitante, e os botões OK/Cancel. |
26 | 26 |
|
27 | 27 | `title` |
28 | | -: The text to show the visitor. |
| 28 | +: Texto para ser mostrado ao visitante. |
29 | 29 |
|
30 | 30 | `default` |
31 | | -: An optional second parameter, the initial value for the input field. |
| 31 | +: Um parâmetro opcional, o valor inicial para o campo de entrada. |
32 | 32 |
|
33 | | -```smart header="The square brackets in syntax `[...]`" |
34 | | -The square brackets around `default` in the syntax above denote that the parameter is optional, not required. |
35 | | -``` |
| 33 | +```smart header="Os colchetes na sintaxe `[...]`" |
| 34 | + Os colchetes ao redor de `default` na sintaxe acima denotam que o parâmetro é opcional, não é obrigatório. |
| 35 | +```` |
36 | 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`. |
| 37 | +O visitante pode digitar algo no campo de entrada do prompt e pressionar OK. Então nós temos esse texto no `result`. Ou ele pode cancelar a entrada pressionando Cancelar ou `key:Esc`, então nos temos `null` como o `result`. |
38 | 38 |
|
39 | | -The call to `prompt` returns the text from the input field or `null` if the input was canceled. |
| 39 | +A chamada do `prompt` retorna o texto do campo de entrada ou `null` se a entrada for cancelada. |
40 | 40 |
|
41 | | -For instance: |
| 41 | +Por exemplo: |
42 | 42 |
|
43 | 43 | ```js run |
44 | | -let age = prompt('How old are you?', 100); |
| 44 | +let age = prompt('Qual a sua idade?', 100); |
45 | 45 |
|
46 | | -alert(`You are ${age} years old!`); // You are 100 years old! |
47 | | -``` |
| 46 | +alert(`Você tem ${age} anos!`); //Você tem 100 anos! |
| 47 | +```` |
48 | 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. |
| 49 | +````warn header="No IE: sempre forneça um `default`" |
| 50 | +O segundo parâmetro é opcional, mas se não o fornecermos, o Internet Explorer irá inserir o texto `"undefined"` no prompt. |
51 | 51 |
|
52 | | -Run this code in Internet Explorer to see: |
| 52 | +Execute este código no Internet Explorer para visualizar: |
53 | 53 |
|
54 | 54 | ```js run |
55 | | -let test = prompt("Test"); |
| 55 | +let test = prompt('Teste'); |
56 | 56 | ``` |
57 | 57 |
|
58 | | -So, for prompts to look good in IE, we recommend always providing the second argument: |
| 58 | +Portanto, para que os prompts tenham boa aparência no IE, recomendamos que sempre forneça o segundo argumento: |
59 | 59 |
|
60 | 60 | ```js run |
61 | | -let test = prompt("Test", ''); // <-- for IE |
| 61 | +let test = prompt('Teste', ''); // <-- para o IE |
62 | 62 | ``` |
63 | 63 | ```` |
64 | 64 |
|
65 | 65 | ## confirm |
66 | 66 |
|
67 | | -The syntax: |
| 67 | +A sintaxe: |
68 | 68 |
|
69 | 69 | ```js |
70 | 70 | result = confirm(question); |
71 | 71 | ``` |
72 | 72 |
|
73 | | -The function `confirm` shows a modal window with a `question` and two buttons: OK and Cancel. |
| 73 | +A função `confirm` mostra uma janela modal com uma `question` e dois botões: OK e Cancelar. |
74 | 74 |
|
75 | | -The result is `true` if OK is pressed and `false` otherwise. |
| 75 | +O resultado é `true` se OK for pressionado e `false` caso contrário. |
76 | 76 |
|
77 | | -For example: |
| 77 | +Por exemplo: |
78 | 78 |
|
79 | 79 | ```js run |
80 | | -let isBoss = confirm("Are you the boss?"); |
| 80 | +let isBoss = confirm("Você é o chefe?"); |
81 | 81 |
|
82 | | -alert( isBoss ); // true if OK is pressed |
| 82 | +alert( isBoss ); // true se OK for pressionado |
83 | 83 | ``` |
84 | 84 |
|
85 | | -## Summary |
| 85 | +## Sumário |
86 | 86 |
|
87 | | -We covered 3 browser-specific functions to interact with visitors: |
| 87 | +Cobrimos 3 funções específicas do navegador para interagir com o visitante: |
88 | 88 |
|
89 | 89 | `alert` |
90 | | -: shows a message. |
| 90 | +: mostra uma mensagem. |
91 | 91 |
|
92 | 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`. |
| 93 | +: mostra uma mensagem pedindo para o usuário inserir texto. Ela retorna o texto ou, se CANCEL ou `key:Esc` for clicado, `null`. |
94 | 94 |
|
95 | 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`. |
| 96 | +: mostra uma mensagem e espera que o usuário pressione "OK" ou "Cancel". Ela retorna `true` para OK e `false` para Cancel/`key:Esc`. |
97 | 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. |
| 98 | +Todos esse métodos são modais: eles pausam a execução do script e não permitem ao visitante interagir com o resto da página até que a janela seja descartada. |
99 | 99 |
|
100 | | -There are two limitations shared by all the methods above: |
| 100 | +Existem duas limitações compartilhadas entre esses metódos acima: |
101 | 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. |
| 102 | +1. A localização exata da janela modal é determinada pelo navegador. Geralmente, está no centro. |
| 103 | +2. A aparência exata da janela também depende do navegador. Nós não podemos modificá-la. |
104 | 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. |
| 105 | +Este é o preço da simplicidade. Existem outras maneiras de mostrar janelas mais agradáveis e interações mais ricas aos visitantes, mas se "sinos e assobios" não importam muito, esses métodos funcionam bem. |
0 commit comments