Cómo crear un cuadro de entrada en JavaScript?

JavaScript es uno de los lenguajes de programación más famosos del mundo que ayuda a crear aplicaciones web dinámicas e interactivas. Como cualquier otro lenguaje dinámico, es una necesidad leer, guardar, procesar y emitir datos de un usuario.

Cuando necesita manejar los datos del usuario sin devolverlos al servidor, JavaScript es extremadamente beneficioso. JavaScript es significativamente más rápido que enviar todo al servidor para ser procesado, pero debe poder recibir la entrada del usuario y operar con ella utilizando la sintaxis adecuada. El enfoque de este tutorial será obtener la entrada del usuario y mostrarla en la pantalla utilizando elementos o indicaciones HTML.

Método 1: Uso de indicaciones

Para conectarse con los usuarios, JavaScript nos ofrece algunos métodos de objeto de ventana de los cuales uno es el inmediato() método. La función básica del método ind () es mostrar un cuadro de diálogo y tomar la entrada de un usuario. El inmediato() El método se usa más comúnmente para almacenar/guardar pequeñas cantidades de información sobre el usuario y se usa más comúnmente cuando el desarrollador quiere que el usuario ingrese datos antes de continuar a la página web.

Sintaxis

solicitante (texto, predeterminado)

El inmediato() El método toma dos parámetros: el primero es el texto parámetro, que aparece en el cuadro de diálogo, y el segundo es el por defecto Parámetro, que es el texto predeterminado que se muestra en el cuadro de entrada del indicador. Estas opciones son opcionales y se pueden dejar en blanco.

Ejemplo de método ind ()

var name = solicit ("Ingrese su nombre", "Ingrese el nombre");
if (nombre != nulo)
alerta ("Hola! "+ nombre)

En el código de JavaScript anterior, llamamos al inmediato() método y le pidió al usuario que ingrese su nombre. El valor predeterminado será Ingrese su nombre:

Eliminemos el nombre de ingreso y escriba su nombre:

Ahora cuando haces clic en el DE ACUERDO botón verás el Hola! Nas Mensaje de alerta:

Método 2: HTML y JavaScript

Otro método para crear un cuadro de entrada en JavaScript es usar un cuadro de entrada HTML y luego hacer referencia a que en JavaScript y obtener su valor.

HTML:

Crear cuadro de entrada

Ahorrar

En el código anterior, primero, definimos un cuadro de entrada y luego un botón con el anime de Ahorrar. Luego hicimos referencia al código.js Archivo usando la etiqueta de script. En el código.js Archivo, todo nuestro código JavaScript estará presente.

JavaScript:

const btn = documento.getElementById ("BTN");
btn.addEventListener ('Click', function ()
nombre var = documento.getElementById ("MyName").valor;
alerta ("nombre:"+ nombre);
);

En el código anterior, referimos el botón con la identificación de btn Desde html y luego agregó un oyente de eventos de clic que se escuchará continuamente y cuando alguien haga clic en el botón Guardar una función. En esta función, primero, obtenemos el valor del cuadro de entrada utilizando la ID que se le da que es mi nombre. Luego alertamos este valor.

Conclusión

JavaScript es el lenguaje de programación cuya comunidad está aumentando día a día y con razón, ya que es el lenguaje de programación que hace que nuestra página web sea interactiva. JavaScript nos ofrece interactuar con los usuarios tomando la entrada del usuario y luego guardando esa entrada o mostrando esa entrada.

En este artículo, tomamos la entrada del usuario y mostramos esa entrada utilizando dos métodos i-e inmediato() Método y referencia a un cuadro de entrada de HTML en JavaScript.