Entrada de JavaScript | Desarrollador.com

La mayor fortaleza de JavaScript es su capacidad para aceptar información del usuario y procesarla dentro del navegador. Como tal, es un codificador inteligente que dedica tiempo a aprender a leer la entrada del usuario y emplear la sintaxis correcta para trabajar con esa entrada. Este tutorial para desarrolladores net se enfoca en recuperar la entrada del usuario a través de indicaciones y el elemento de entrada de texto HTML.

Leer: Los mejores cursos en línea para aprender JavaScript

Cómo recuperar las respuestas de los usuarios de un aviso en JavaScript

JavaScript ofrece algunos métodos globales para adquirir información de sus usuarios. por ejemplo, el ventana.immediate() El método muestra un cuadro de diálogo modal que toma la entrada de un usuario para usarla en su código JavaScript. Él oportuno() El método está diseñado para pequeñas cantidades de información, como un nombre y apellido. Para grandes bloques de texto o datos complejos, debe usar un formulario HTML. Es más útil para recopilar solo un poco de información antes de navegar a otra página o realizar alguna acción que requiera la información.

immediate(textual content, defaultText)

• Él texto El argumento es opcional y especifica el texto que se mostrará en el cuadro de diálogo.
• Él texto por defecto El argumento también es opcional y especifica el texto de entrada predeterminado.

Aquí hay un ejemplo de código JavaScript que solicita al usuario su nombre:

var identify = immediate("Please enter your identify", "Invoice Smith");

El cuadro de diálogo de solicitud contiene un OK y Cancelar botón. haciendo clic OK devuelve el valor de entrada precise (predeterminado o proporcionado por el usuario), al hacer clic en Cancelar devoluciones nulo.

Los programadores pueden comprobar que un no nulo el valor fue recibido antes de procesarlo. El siguiente código muestra un saludo que busca un valor no nulo mediante JavaScript:

var identify = immediate("Please enter your identify", "Invoice Smith");

if (identify != null) {
  doc.getElementById("greeting")
    .innerHTML = "Good day " + identify + "! Good to see you!";
}

Aunque puede anteponer el método con el objeto de ventana: ventana.immediate() – no es necesario porque es el espacio de nombres world predeterminado.

El diálogo de confirmación en JavaScript

Si solo necesita obtener la confirmación del usuario, considere usar el Diálogo de confirmación. Es una forma rápida de obtener confirmación sin utilizar ninguna lógica de codificación compleja. Él confirmar() método muestra un cuadro de diálogo con un mensaje, un OK botón, y un Cancelar botón:

Él confirmar() El método acepta solo un argumento: un mensaje opcional para mostrar en el cuadro de confirmación:

affirm("Are you certain you need to ship a fee of $25?");

El mensaje también puede contener saltos de línea:

affirm("Press a button!nEither OK or Cancel.");

Él confirmar() el método devuelve verdadero si el usuario hace clic en “OK“, mientras presiona “Cancelar” devoluciones falso.

Aquí hay un código que emplea el confirmar() método para verificar que el usuario desea proceder con un pago y establece un mensaje basado en el resultado:

var res = affirm("Are you certain you need to ship a fee of $25?");
messages.innerHTML = res === true ? "Fee despatched!" : "Fee cancelled!";

Leer: Salida JavaScript

Uso de un management de entrada de texto en JavaScript

Originalmente parte de los formularios HTML, elementos como cuadros de texto, menús desplegables, casillas de verificación y botones de radio se emplearon para recopilar la entrada del usuario y enviarla a un servidor para su procesamiento. A medida que los desarrolladores comenzaron a capitalizar gradualmente el tremendo poder de procesamiento del lado del cliente de JavaScript, los controles de formulario se quitaron del elemento Type y se utilizaron para recopilar información para el procesamiento dentro de la página. Por ejemplo, miles de páginas net alojan utilidades de conversión como Éste en ninjaunits.com que convierte píxeles a rem:

Nótese la notoria ausencia de un Entregar botón. La entrada del usuario se lee a través del tecla Arriba evento para que el Resultado en Rem el campo se actualiza en tiempo actual. Un rebote corto (retraso) le da tiempo al usuario para ingresar un valor y evitar llamadas excesivas a la lógica de cálculo.

Podemos seguir el mismo enfoque para adquirir el nombre de nuestro visitante usando un par de campos de entrada de texto (nombre y apellido):

<label for="fname">First identify:</label><br>
<enter kind="textual content" id="fname" identify="fname"><br>
<label for="lname">Final identify:</label><br>
<enter kind="textual content" id="lname" identify="lname">

<h2 id="messages"></h2>

La parte de rebote se hace un poco más fácil usando la biblioteca JS como RxJS. Aunque es sinónimo de marcos como Angular y ReactJS, puede agregar RxJS a cualquier página HTML a través de CDN.

El siguiente código crea un flujo de entrada desde el fnombre y nombre campos de entrada, que luego se fusionan antes de agregar un rebote de medio segundo. Una vez el suscribir() recibe el evento, registra el último valor recibido de cualquiera de los campos de entrada y actualiza el mensaje:

//Utilizing RxJS model 7.8.0
const { fromEvent } = rxjs;
const { merge, debounceTime } = rxjs.operators;

const fname = doc.getElementById("fname");
const lname = doc.getElementById("lname");
const fnameInputStream$ = fromEvent(fname, 'keyup');
const lnameInputStream$ = fromEvent(lname, 'keyup');

fnameInputStream$
  .pipe(
    merge(lnameInputStream$),
    debounceTime(500)
  )
  .subscribe(occasion => {
    console.log(occasion.goal.worth);
    const identify = fname.worth + (lname.worth.size > 0 ? " " + lname.worth : "");
    messages.innerHTML = "Good day " + identify + "! Good to see you!";
  });

Al igual que el sitio ninjaunits.com, el procesamiento puede ocurrir antes de que el usuario haya ingresado su nombre completo, lo que resulta en un nombre parcial, como “gravedad” en lugar de “grava“:

Por supuesto, el mensaje se actualizará cada medio segundo hasta que el usuario haya terminado de escribir, momento en el que se mostrará el nombre completo.

Si no quiere lidiar con nombres parciales, hay opciones, la más fácil de las cuales es conectarse a la entrada del apellido en la falta de definición o en el cambio evento en lugar de encendido. Otra opción más elaborada sería mostrar el mensaje después de una pausa en la actividad, digamos dos o tres segundos.

Puede ver todo el código de este tutorial de JavaScript, además de un ejemplo sobre cómo mostrar el mensaje después de una pausa en la actividad, en acción en el demostración de código abierto.

Reflexiones finales sobre la entrada de JavaScript

Si bien nos enfocamos en la entrada de texto, tenga en cuenta que hay muchos otros controles de formulario HTML nativos para elegir, incluido el más grande área de texto elementos, menús desplegables, botones de radio y casillas de verificación. Además, marcos como Materials angular han agregado una gran cantidad de controles personalizados, como controles deslizantes, calendarios, controles deslizantes y mucho más.

Leer: Los mejores marcos de JavaScript