|
1 |
| -# Interaction: alert, prompt, confirm |
| 1 | +# Interacción: alert, prompt, confirm |
2 | 2 |
|
3 |
| -This part of the tutorial aims to cover JavaScript "as is", without environment-specific tweaks. |
| 3 | +Esta parte del tutorial pretende cubrir JavaScript "como es", sin ajustes específicos del entorno. |
4 | 4 |
|
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`. |
| 5 | +Pero como seguiremos utilizando el navegador como entorno de demostración, deberíamos conocer al menos algunas de sus funciones de interfaz de usuario. En este capítulo, nos familiarizaremos con las funciones del navegador `alert`, `prompt` y `confirm`. |
6 | 6 |
|
7 | 7 | ## alert
|
8 | 8 |
|
9 |
| -Syntax: |
| 9 | +Sintaxis: |
10 | 10 |
|
11 | 11 | ```js
|
12 |
| -alert(message); |
| 12 | +alert(mensaje); |
13 | 13 | ```
|
14 | 14 |
|
15 |
| -This shows a message and pauses script execution until the user presses "OK". |
| 15 | +Esto muestra un mensaje y detiene la ejecución del script hasta que el usuario pulsa "OK". |
16 | 16 |
|
17 |
| -For example: |
| 17 | +Por ejemplo: |
18 | 18 |
|
19 | 19 | ```js run
|
20 |
| -alert("Hello"); |
| 20 | +alert("Hola"); |
21 | 21 | ```
|
22 | 22 |
|
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". |
| 23 | +La mini-ventana con el mensaje se llama *ventana modal*. La palabra "modal" significa que el usuario no puede interactuar con el resto de la página, presionar otros botones, etc. hasta que no se haya ocupado de la ventana. En este caso, hasta que pulse "OK". |
24 | 24 |
|
25 | 25 | ## prompt
|
26 | 26 |
|
27 |
| -The function `prompt` accepts two arguments: |
| 27 | +La función `prompt` acepta dos argumentos: |
28 | 28 |
|
29 | 29 | ```js no-beautify
|
30 | 30 | result = prompt(title, [default]);
|
31 | 31 | ```
|
32 | 32 |
|
33 |
| -It shows a modal window with a text message, an input field for the visitor, and the buttons OK/CANCEL. |
| 33 | +Muestra una ventana modal con un mensaje de texto, un campo de entrada para el visitante y los botones OK/CANCELAR. |
34 | 34 |
|
35 | 35 | `title`
|
36 |
| -: The text to show the visitor. |
| 36 | +: El texto a mostrar al visitante. |
37 | 37 |
|
38 | 38 | `default`
|
39 |
| -: An optional second parameter, the initial value for the input field. |
| 39 | +: Un segundo parámetro opcional, el valor inicial del campo de entrada. |
40 | 40 |
|
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. |
| 41 | +El usuario puede escribir algo en el campo de entrada y pulsar OK. O puede cancelar la entrada pulsando CANCELAR o presionando la tecla `key:Esc`. |
42 | 42 |
|
43 |
| -The call to `prompt` returns the text from the input field or `null` if the input was canceled. |
| 43 | +La llamada a `prompt` retorna el texto del campo de entrada o `null` si la entrada fue cancelada. |
44 | 44 |
|
45 |
| -For instance: |
| 45 | +Por ejemplo: |
46 | 46 |
|
47 | 47 | ```js run
|
48 |
| -let age = prompt('How old are you?', 100); |
| 48 | +let age = prompt ('¿Cuántos años tienes?', 100); |
49 | 49 |
|
50 |
| -alert(`You are ${age} years old!`); // You are 100 years old! |
| 50 | +alert(`Tienes ${age} años!`); //Tienes 100 años! |
51 | 51 | ```
|
52 | 52 |
|
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. |
| 53 | +````warn header="En IE: siempre proporciona un `predeterminado`" |
| 54 | +El segundo parámetro es opcional, pero si no lo proporcionamos, Internet Explorer insertará el texto `"undefined"` en el prompt. |
55 | 55 |
|
56 |
| -Run this code in Internet Explorer to see: |
| 56 | +Ejecuta este código en Internet Explorer para verlo: |
57 | 57 |
|
58 | 58 | ```js run
|
59 | 59 | let test = prompt("Test");
|
60 | 60 | ```
|
61 | 61 |
|
62 |
| -So, for prompts to look good in IE, we recommend always providing the second argument: |
| 62 | +Por lo tanto, para que las indicaciones se vean bien en IE, recomendamos siempre proporcionar el segundo argumento: |
63 | 63 |
|
64 | 64 | ```js run
|
65 |
| -let test = prompt("Test", ''); // <-- for IE |
| 65 | +let test = prompt("Test", ''); // <-- para IE |
66 | 66 | ```
|
67 | 67 | ````
|
68 | 68 |
|
69 | 69 | ## confirm
|
70 | 70 |
|
71 |
| -The syntax: |
| 71 | +La sintaxis: |
72 | 72 |
|
73 | 73 | ```js
|
74 |
| -result = confirm(question); |
| 74 | +result = confirm(pregunta); |
75 | 75 | ```
|
76 | 76 |
|
77 |
| -The function `confirm` shows a modal window with a `question` and two buttons: OK and CANCEL. |
| 77 | +La función `confirm` muestra una ventana modal con una `pregunta` y dos botones: OK y CANCELAR. |
78 | 78 |
|
79 |
| -The result is `true` if OK is pressed and `false` otherwise. |
| 79 | +El resultado es `true` si se pulsa OK y `false` en caso contrario. |
80 | 80 |
|
81 |
| -For example: |
| 81 | +Por ejemplo: |
82 | 82 |
|
83 | 83 | ```js run
|
84 |
| -let isBoss = confirm("Are you the boss?"); |
| 84 | +let isBoss = confirm("¿Eres el jefe?"); |
85 | 85 |
|
86 |
| -alert( isBoss ); // true if OK is pressed |
| 86 | +alert( isBoss ); // true si se pulsa OK |
87 | 87 | ```
|
88 | 88 |
|
89 |
| -## Summary |
| 89 | +## Resumen |
90 | 90 |
|
91 |
| -We covered 3 browser-specific functions to interact with visitors: |
| 91 | +Cubrimos 3 funciones específicas del navegador para interactuar con los usuarios: |
92 | 92 |
|
93 | 93 | `alert`
|
94 |
| -: shows a message. |
| 94 | +: muestra un mensaje. |
95 | 95 |
|
96 | 96 | `prompt`
|
97 |
| -: shows a message asking the user to input text. It returns the text or, if CANCEL or `key:Esc` is clicked, `null`. |
| 97 | +: muestra un mensaje pidiendo al usuario que introduzca un texto. Retorna el texto o, si se hace clic en CANCELAR o `key:Esc`, retorna `null`. |
98 | 98 |
|
99 | 99 | `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`. |
| 100 | +: muestra un mensaje y espera a que el usuario pulse "OK" o "CANCELAR". Retorna `true` si se presiona OK y `false` si se presiona CANCEL/`key:Esc`. |
101 | 101 |
|
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. |
| 102 | +Todos estos métodos son modales: detienen la ejecución del script y no permiten que el usuario interactúe con el resto de la página hasta que la ventana se haya cerrado. |
103 | 103 |
|
104 |
| -There are two limitations shared by all the methods above: |
| 104 | +Hay dos limitaciones comunes a todos los métodos anteriores: |
105 | 105 |
|
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. |
| 106 | +1. La ubicación exacta de la ventana modal está determinada por el navegador. Normalmente, está en el centro. |
| 107 | +2. El aspecto exacto de la ventana también depende del navegador. No podemos modificarlo. |
108 | 108 |
|
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. |
| 109 | +Ese es el precio de la simplicidad. Hay otras formas de mostrar ventanas más atractivas y de interactuar de una mejor manera con el usuario, pero si el "decorado" no te importa mucho, estos métodos funcionan bien. |
0 commit comments