Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Interaction: alert, prompt, confirm#49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
lizzie136 merged 1 commit intojavascript-tutorial:masterfromtscandalitta:master
May 27, 2019
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
JavaScript-code:
Código#"ad59abda7d36d73d788af197584282c5c7308d9f36edb7f8a1d71636ab06fae4">
```js demo run
let name = prompt("What is your name?", "");
let name = prompt("¿Cuál es tu nombre?", "");
alert(name);
```

The full page:
La página completa:

```html
<!DOCTYPE html>
Expand All@@ -15,7 +15,7 @@ The full page:
<script>
'use strict';

let name = prompt("What is your name?", "");
let name = prompt("¿Cuál es tu nombre?", "");
alert(name);
</script>

Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,8 +2,8 @@ importance: 4

---

#A simple page
#Una página simple

Create aweb-page that asks for a name and outputs it.
Crea una páginaweb que pida un nombre y lo muestre.

[demo]
80 changes: 40 additions & 40 deletions1-js/02-first-steps/09-alert-prompt-confirm/article.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,109 @@
#Interaction: alert, prompt, confirm
#Interacción: alert, prompt, confirm

This part of thetutorialaims to coverJavaScript "as is",without environment-specific tweaks.
Esta parte deltutorialpretende cubrirJavaScript "como es",sin ajustes específicos del entorno.

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`.
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`.

##alert

Syntax:
Sintaxis:

```js
alert(message);
alert(mensaje);
```

This shows a message and pausesscriptexecution until the user presses "OK".
Esto muestra un mensaje y detiene la ejecución delscripthasta que el usuario pulsa "OK".

For example:
Por ejemplo:

```js run
alert("Hello");
alert("Hola");
```

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".
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".

##prompt

The function`prompt`accepts two arguments:
La función`prompt`acepta dos argumentos:

```js no-beautify
result=prompt(title, [default]);
```

It shows a modalwindow with a text message, an input field for the visitor, and the buttonsOK/CANCEL.
Muestra una ventana modalcon un mensaje de texto, un campo de entrada para el visitante y los botonesOK/CANCELAR.

`title`
:The text to show the visitor.
:El texto a mostrar al visitante.

`default`
:An optional second parameter, the initial value for the input field.
:Un segundo parámetro opcional, el valor inicial del campo de entrada.

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.
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`.

The call to`prompt`returns the text from the input field or`null`if the input was canceled.
La llamada a`prompt`retorna el texto del campo de entrada o`null`si la entrada fue cancelada.

For instance:
Por ejemplo:

```js run
let age=prompt('How old are you?',100);
let age=prompt ('¿Cuántos años tienes?',100);

alert(`You are${age}years old!`);// You are100years old!
alert(`Tienes${age}años!`);//Tienes100años!
```

````warn header="In IE:always supply a`default`"
The second parameter is optional, but if we don't supply it, Internet Explorerwill insert the text`"undefined"`into the prompt.
````warn header="En IE:siempre proporciona un`predeterminado`"
El segundo parámetro es opcional, pero si no lo proporcionamos, Internet Explorerinsertará el texto`"undefined"`en el prompt.

Run this code in Internet Explorerto see:
Ejecuta este código en Internet Explorerpara verlo:

```js run
let test=prompt("Test");
```

So, for prompts to look good inIE,we recommend always providing the second argument:
Por lo tanto, para que las indicaciones se vean bien enIE,recomendamos siempre proporcionar el segundo argumento:

```js run
let test=prompt("Test",'');// <--for IE
let test=prompt("Test",'');// <--para IE
```
````
## confirm
The syntax:
La sintaxis:
```js
result = confirm(question);
result = confirm(pregunta);
```
The function `confirm`shows amodalwindow with a `question` and two buttons: OKand CANCEL.
La función `confirm`muestra una ventanamodalcon una `pregunta` y dos botones: OKy CANCELAR.
The result is `true`if OK is pressed and `false`otherwise.
El resultado es `true`si se pulsa OK y `false`en caso contrario.
For example:
Por ejemplo:
```js run
let isBoss = confirm("Are you the boss?");
let isBoss = confirm("¿Eres el jefe?");
alert( isBoss ); // trueif OK is pressed
alert( isBoss ); // truesi se pulsa OK
```
##Summary
##Resumen
We covered 3 browser-specific functions to interact with visitors:
Cubrimos 3 funciones específicas del navegador para interactuar con los usuarios:
`alert`
:shows a message.
:muestra un mensaje.
`prompt`
:shows a message asking the user to input text. It returns the text or, if CANCEL or`key:Esc` is clicked, `null`.
: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`.
`confirm`
:shows a message and waits for the user to press "OK"or "CANCEL".It returns`true`forOKand `false`for CANCEL/`key:Esc`.
:muestra un mensaje y espera a que el usuario pulse "OK"o "CANCELAR".Retorna`true`si se presionaOKy `false`si se presiona CANCEL/`key:Esc`.
All these methods are modal: they pausescriptexecution and don't allow the visitor to interact with the rest of the page until the window has been dismissed.
Todos estos métodos son modales: detienen la ejecución delscripty no permiten que el usuario interactúe con el resto de la página hasta que la ventana se haya cerrado.
There are two limitations shared by all the methods above:
Hay dos limitaciones comunes a todos los métodos anteriores:
1.The exact location of themodalwindow is determined by the browser. Usually, it's in the center.
2.The exact look of the window also depends on the browser. We can't modify it.
1.La ubicación exacta de la ventanamodalestá determinada por el navegador. Normalmente, está en el centro.
2.El aspecto exacto de la ventana también depende del navegador. No podemos modificarlo.
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.
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.

[8]ページ先頭

©2009-2025 Movatter.jp