Tutorial de JavaScript : Conceptos

Hasta ahora hemos visto como crear un formulario con controles de tipo BUTTON. Agregamos un control de tipo TEXT (permite al operador cargar caracteres por teclado).

Veremos la importancia de definir un id a todo control de un formulario.

Con un ejemplo veremos estos controles: Confeccionar un formulario que permita ingresar el nombre y edad de una persona:

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <form>
        <p>Ingrese su nombre:<input type="text" id="nombre"></p>
        <p>Ingrese su edad:<input type="text" id="edad"></p>
        <p><input type="button" value="Confirmar" onClick="mostrar()"></p>
    </form>

    <script>
        function mostrar() {
            let nom = document.getElementById('nombre').value;
            let ed = document.getElementById('edad').value;
            alert('Ingresó el nombre:' + nom);
            alert('Y la edad:' + ed);
        }
    </script>

</body>

</html>

En este problema tenemos cuatro controles: 1 FORM, 1 BUTTON, 2 TEXT. El evento que se dispara al presionar el botón se llama mostrar.

La función 'mostrar' accede a los contenidos de los dos controles de tipo TEXT:

            let nom = document.getElementById('nombre').value;
            let ed = document.getElementById('edad').value;

Para hacer más clara la función guardamos en dos variables auxiliares los contenidos de los controles de tipo TEXT.

La propiedad "id" es un identificador único para cualquier elemento HTML que luego nos permite desde Javascript acceder a dicho elemento.

El método getElementById nos retorna una referencia del objeto HTML que le pasamos como parámetro, a partir de este objeto accedemos a la propiedad value que almacena el valor ingresado por el operador en el control TEXT.

Luego de extraer los valores ingresados por el operador los mostramos utilizando la función alert:

            let nom = document.getElementById('nombre').value;
            let ed = document.getElementById('edad').value;
            alert('Ingresó el nombre:' + nom);
            alert('Y la edad:' + ed);

Controles FORM, BUTTON y TEXT.

Retornar