Objetos Web-JavaScript, eventos HTML DOM, mensajes de alerta y validación de formularios

JavaScript proporciona un conjunto de funciones integradas para comunicarse con el usuario mediante la GUI. Incorporado

Las funciones incluyen alerta(), confirmar() y aviso():

La interacción de alerta muestra un cuadro de diálogo simple con un mensaje. El cuadro de diálogo tiene un botón denominado "Aceptar" en el que el usuario debe hacer clic para continuar. Inicie una alerta utilizando la función global alert(), como se muestra en el siguiente ejemplo.

alert("Hello from JavaScript");

Esto abrirá un cuadro de diálogo con el mensaje "Hola desde JavaScript" y esperará a que el usuario haga clic en el botón "Aceptar" antes de continuar.

Las alertas pueden mostrar hasta tres líneas de texto. Esto significa que puede pasar texto a la función alert() con hasta dos caracteres de nueva línea (\n) en la cadena. Por ejemplo, si quisiera mostrar cada una de las tres palabras del mensaje anterior en una línea diferente, la llamada a la función sería:

alert("Hello\nfrom\nJavaScript");

El segundo tipo de interacción requiere que el usuario dé una respuesta de sí o no. El cuadro de diálogo de confirmación imprimirá un mensaje y mostrará dos botones denominados "Aceptar" y "Cancelar". El usuario debe hacer clic en uno de estos dos botones para continuar. Esto se logra mediante la función global asegurar(), que devuelve un valor booleano verdadero si el usuario hace clic en "Aceptar" y falso si el usuario hace clic en "Cancelar". Por ejemplo, si quisieras preguntar "¿Continuar con este tema?" y recibir una respuesta, podrías escribir:

answer = confirm("Continue with this topic?");

Observe cómo en este caso el resultado del diálogo de confirmación se asigna a la variable respuesta.

El tercer tipo de cuadro de diálogo es donde se le solicita al usuario que ingrese texto. Esta interacción imprime un mensaje y solicita una respuesta de campo de texto del usuario. Muestra dos botones, un botón "Aceptar" y un botón "Cancelar". También permite especificar texto predeterminado. Los cuadros de diálogo de solicitud son generados por la función global solicitud(), como se muestra en el siguiente ejemplo:

city = prompt("What is the name of your city?", "");

Tenga en cuenta que esta función tiene dos parámetros. El primero es el mensaje que se mostrará y el segundo es el texto predeterminado que se colocará en el campo de texto. Si el usuario hace clic en Aceptar o simplemente escribe la tecla Intro, se devuelve una cadena. Devuelve nulo si el usuario hace clic en el botón Cancelar.

Un evento es una notificación del sistema de que algo sucedió (en nuestro caso, una notificación del navegador). En un entorno gráfico, pueden ser cualquiera de los muchos eventos que pueden ocurrir en cualquier momento. Por ejemplo, el usuario puede hacer clic en cualquiera de los muchos campos o widgets que se muestran en la ventana del navegador. Los usuarios pueden cambiar el tamaño de la ventana del navegador o cerrarla por completo. También hay eventos externos de Internet o de la computadora que ejecuta el navegador.

Para hacer frente a todas estas posibilidades, se escriben scripts llamados controladores de eventos. Un controlador de eventos está asociado con cada evento y JavaScript ejecuta el controlador de eventos cuando ocurre cada evento. Por ejemplo, algunos de los controladores de eventos que escribirá se activan mediante cambios en un control de formulario. Verificarán el contenido de los controles del formulario para asegurarse de que el usuario esté ingresando datos en el formato correcto.

En JavaScript, cada evento tiene un nombre, como hacer clic, seleccionar y enviar. Estos se crean cuando el usuario interactúa con el documento HTML. Por ejemplo, un evento de clic ocurre cuando un usuario hace clic en un objeto de documento, un evento de selección ocurre cuando un usuario selecciona texto en un campo de texto o área de texto y un evento de envío ocurre cuando un usuario hace clic en el botón Enviar en un formulario.

Los eventos en JavaScript proporcionan una manera de asociar código ( controladores ) que se ejecutará cuando ciertas operaciones de entrada ( eventos ) ocurran en el navegador . Esto se logra asociando una función con un evento, que se llama ( activa ) cada vez que ocurre el evento. La función se asigna como un atributo del elemento DOM al que se aplica.

Hay dos formas de asociar controladores de eventos (funciones a llamar) con elementos. La primera es codificar directamente la llamada a la función como un atributo del elemento al que se aplicará. El segundo es utilizar el enfoque DOM que analizamos en la sección anterior.

Por ejemplo, se producen eventos comunes cuando un usuario hace clic con el mouse en una ventana del navegador. En HTML DOM, podemos asociar eventos de clic del mouse con cada elemento del cuerpo del documento. El atributo que asigna la función que se llamará al hacer clic con el mouse es "onclick".

Supongamos que tenemos la siguiente función que se ejecuta cuando el usuario hace clic en un botón.

function btnHandler(evt) {
    alert("Clicked");
  }

Podemos codificar esto para que se llame cuando se haga clic en el botón:

<button onclick="btnHandler()">Click Me</button>

Alternativamente, podemos asignar controladores de eventos usando código JavaScript. Digamos que definimos un botón:

<button id="Button1">Click Me</button>

Luego podemos asignar el mismo controlador de eventos:

document.getElementById("Button1").onclick = btnHandler;

Podemos asignar controladores de eventos a muchos eventos. Algunos de ellos son:

Eventos comunes

onabort: se llama cuando el usuario cancela la carga de la imagen haciendo clic en el botón "Detener"
onclick: se llama cuando el usuario hace clic en el objeto especificado
onfocus: se llama cuando el objeto objetivo gana enfoque
onblur: se llama cuando el objeto objetivo pierde el foco
onmouseover: se llama cuando el usuario mueve el mouse sobre el objeto de destino
onmouseout: se llama cuando el puntero del mouse abandona el objeto de destino.
onsubmit: se llama cuando el usuario hace clic en el botón "Enviar" en el formulario
onchange: se llama cuando el usuario cambia el contenido del campo de texto
onselect: llamado cuando el usuario selecciona el contenido de un campo de texto
onreset: se llama cuando el usuario hace clic en el botón "restablecer" en el formulario
onload: se llama cuando se carga la imagen o el documento de destino
onunload: se llama cuando se descarga la imagen o el documento de destino.

Tenga en cuenta que todas las propiedades del evento comienzan con la cadena "on".

Hasta ahora, hemos visto cómo asignar un único detector de eventos a un elemento HTML. Esto está bien para muchas aplicaciones, pero cuando nos volvemos más complejos, a menudo queremos asignar muchos detectores de eventos al mismo evento. Esto es especialmente cierto cuando mejoramos el código preexistente agregando oyentes adicionales, lo cual haremos más adelante en esta unidad. DOM proporciona una manera de asignar múltiples detectores de eventos a elementos DOM para el mismo evento.

Para agregar detectores de eventos usamos la sintaxis común:

elt.addEventListener(event, func)

Por ejemplo, podríamos agregar un detector de eventos adicional al botón de arriba:

document.getElementById("Button1").addEventListener("click", handler2);

Tenga en cuenta que la cadena del nombre del evento ya no tiene el prefijo "on", aunque el resto del nombre sigue siendo el mismo.

Podemos agregar tantos controladores de eventos como sea necesario. También podemos eliminar controladores de eventos usando el formato normal:

elt.removeEventListener(event, func)

El nombre de la función aquí debe ser el nombre que agregamos antes. Por ejemplo, podemos eliminar el controlador de eventos anterior de la siguiente manera:

  document.getElementById("Button1").removerEventListener("click", handler2);

Cargando evento-onload evento

El evento onload es un evento que se activa cuando se carga una página web.

Por favor mire el código a continuación:

<!DOCTYPE html>
<html>
  <body onload="sayHi()">
    <p>Some page content here....</p>  
    <script>
      function sayHi() {
        alert("hi there!");
      }
    </script>
  </body>
</html>

El efecto es el siguiente: después de hacer clic en el botón de actualización del navegador, aparecerá como se muestra a continuación:

Mouseover y salida del mouse: eventos onmousover y onmouseout

Los eventos onmouseover y onmouseout están relacionados y normalmente se usan juntos de la siguiente manera:

Cuando el cursor del mouse se mueve sobre un elemento, se activa el evento onmouseover .
Cuando el cursor del mouse sale del elemento, se activa el evento onmouseout .

Según la explicación anterior, ¿puedes adivinar qué hará el siguiente código?

<!DOCTYPE html>
<html>
  <body>
    <img id="someImage" src="smile.png" onmouseover="mouseOver()" onmouseout="mouseOut()" >  
    <script>
      function mouseOver() {
        document.getElementById("someImage").src = "frown.png";
      }
      function mouseOut() {
        document.getElementById("someImage").src = "smile.png";
      }
    </script>
  </body>
</html>

Coloque el mouse frente a la imagen de la cara sonriente, como se muestra a continuación:

Cuando el mouse sale de la imagen de la cara sonriente, el estado predeterminado es el que se muestra en la siguiente figura:

Cambiar evento al cambiar

El último evento que veremos es el evento onchange . Eche un vistazo al siguiente ejemplo:

<!DOCTYPE html>
<html>
<body>
    <p>Type your name in the text field below then push the enter button on your keyboard or click somewhere else on the
        screen</p>
    <input type="text" id="name" onchange="alertUser()">
    <script>
        function alertUser() {
            alert(document.getElementById("name").value);
        }
    </script>
</body>
</html>

Si lees el código con atención, también notarás que introdujimos una nueva propiedad, y ese es el valor . El atributo de valor nos permite obtener o establecer el valor del campo de entrada.

Analicemos qué más está pasando aquí:

Tenemos un evento onchange en la entrada de texto que acepta la entrada del usuario.
Cuando el usuario cambia el valor de la entrada, se activa el evento onchange y se llama a la función alertUser .
La función de alerta de usuario obtiene el elemento con el nombre de identificación y luego usa el atributo de valor para obtener su valor. Este valor se mostrará en la alerta.

Según el código, cuando el usuario ingresa un nombre en el cuadro de entrada de texto y cambia su valor, se activa el evento onchange. Luego, el evento llama a la función alertUser. La función alertUser obtiene el elemento con el nombre de identificación y usa el atributo de valor para obtener el valor del campo de entrada. Finalmente, el valor se mostrará en un cuadro de alerta para mostrar al usuario el nombre ingresado. En otras palabras, este código implementa que cuando el usuario ingresa un nombre, aparece un cuadro de alerta para mostrar el nombre ingresado.

Como se muestra abajo:

Digamos que queremos actualizar el código a continuación. Agregue un evento de cambio para la entrada de la casilla de verificación que activa una alerta cuando la casilla de verificación cambia.

<!DOCTYPE html>
<html>

<body>
    <input type="checkbox" id="bike" name="bike" value="Bike">
    <label for="bike">I have a bike</label><br>    
</body>

</html>

Entonces, debemos realizar los siguientes cambios:

<!DOCTYPE html>
<html>

<body>
    <input type="checkbox" id="bike" name="bike" value="Bike" onchange="alertUser()">
    <label for="bike">I have a bike</label><br>    

    <script>
        function alertUser() {
            if (document.getElementById("bike").checked) {
                alert("You have a bike.");
            } else {
                alert("You don't have a bike.");
            }
        }
    </script>
</body>

</html>

Haga clic en la casilla de verificación frente a "Tengo una bicicleta" para marcarla, como se muestra en la figura siguiente, la casilla de verificación se marcará después de cerrar la ventana emergente de alerta.

Desmarque la casilla de verificación antes de "Tengo una bicicleta", como se muestra en la siguiente figura. Después de cerrar la ventana emergente de alerta, la casilla de verificación no estará marcada.

。

Otros eventos: onclick, onblur

al hacer clic

Aquí se muestran principalmente dos ejemplos: una versión simple y una versión con menú desplegable.

<!DOCTYPE html>
<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The onclick Event</h2>

<p>单击元素时，onclick事件会触发一个函数。</p>
<p>单击可触发一个功能，该功能将输出“Hello World”：</p>

<button onclick="myFunction()">点击</button>

<p id="demo"></p>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
</script>

</body>
</html>

La interfaz es como se muestra a continuación:

Después de hacer clic, aparecerá como se muestra a continuación:

Menú desplegable OnClick (principalmente muy interesante)

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.show {display:block;}
</style>
</head>
<body>

<h1>HTML DOM Events</h1>
<h2>The onclick Event</h2>

<p>单击按钮打开下拉菜单。</p>

<div class="dropdown">
  <button id="myBtn" class="dropbtn">下拉菜单</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">首页</a>
    <a href="#about">关于我们</a>
    <a href="#contact">联系方式</a>
  </div>
</div>

<script>

document.getElementById("myBtn").onclick = function() {myFunction()};

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
</script>

</body>
</html>

Como se muestra abajo:

En la falta de definición

El atributo onblur se activa en el momento en que el elemento pierde el foco.

Onblur se usa más comúnmente con código de validación de formulario (por ejemplo, cuando el usuario abandona un campo de formulario).

Consejo: El atributo onblur es lo opuesto al atributo onfocus.

<!DOCTYPE html>
<html>
<body>

<p>当您进入输入字段时，会触发一个功能，将背景颜色设置为黄色。当您离开输入字段时，会触发一个函数，将背景颜色设置为红色。</p>

输入字段: <input type="text" id="myInput" onfocus="focusFunction()" onblur="blurFunction()">

<script>
// Focus = 将输入的背景颜色更改为黄色
function focusFunction() {
  document.getElementById("myInput").style.background = "yellow";
}

// No focus = 将输入的背景颜色更改为红色
function blurFunction() {
  document.getElementById("myInput").style.background = "red";
}
</script>

</body>
</html>

Estado 1, inicialización:

Estado dos, estado de entrada:

Estado tres, dejando el estado de entrada:

Objeto Objeto

Los objetos JavaScript son diferentes de la mayoría de las estructuras de datos en otros lenguajes y forman una parte importante del lenguaje.

  {name:"Barry", age: 21, address: "Headland Street, Woopi"}

Un objeto en JavaScript es una colección de propiedades con nombre. Las propiedades pueden ser datos o métodos. Una propiedad de datos (simplemente una "propiedad") puede ser un tipo de datos primitivo o una referencia a otro objeto. Los atributos de método (llamados "métodos") son funciones de JavaScript que ejecutan algún código JavaScript. Para acceder a propiedades o métodos en un objeto, usamos notación de puntos común:

object_name.property_name

Por ejemplo, para acceder a la propiedad de estado de un objeto llamado botón1, escribimos el código:

button1.status

Dado que las propiedades también pueden ser objetos con propiedades, a veces necesitamos nombrar una serie de objetos para acceder a las propiedades requeridas. Para hacer esto, aplicamos el operador '.' en serie. Por ejemplo, asumiendo que el objeto anterior en sí es una propiedad de un objeto llamado grupo2, accederemos al estado del botón1 de la siguiente manera:

group2.button1.status

Los miembros son funciones, por lo que también podemos usar parámetros al acceder a ellos. Si no hay parámetros, agregamos al nombre del método un par de corchetes vacíos "()".
El siguiente es un ejemplo de acceso a métodos en JavaScript:

frame2.setSize(20,100);
button1.reset();

Las propiedades se pueden agregar y eliminar de los objetos en cualquier momento. Esto es bastante diferente de los lenguajes orientados a objetos, que requieren herencia para agregar o cambiar propiedades y, a menudo, impiden que se eliminen propiedades.
JavaScript utiliza la siguiente sintaxis para crear una instancia de un objeto indefinido:

var my_object = new Object();

Se pueden asignar propiedades y métodos a objetos después de una nueva llamada.

var person = new Object();
person.name = “Some name”;

Los objetos integrados se crean llamando al método constructor de objetos. Por ejemplo, la matriz del constructor se denomina matriz.

var my_array = new Array();

JavaScript también puede crear objetos utilizando literales de objetos. Por ejemplo:

var person = {firstName:"John", lastName:"Doe", age:50};

JavaScript predefine variables de referencia para acceder a objetos y sus propiedades. Cuando se llama al constructor, es una referencia al objeto recién creado. Por ejemplo:

var person = { firstName: "Penelope", lastName: "Barrymore", fullName: function () { console.log(this.firstName + " " + this.lastName); // We could have also written this: console.log(person.firstName + " " + person.lastName); } }

Otra característica útil de los objetos JavaScript es tener funciones como propiedades. Por ejemplo, el siguiente objeto tiene una función que devuelve la concatenación de otras dos propiedades:

  var me = { firstName: "Reza",
              lastName: "Ghanbarzadeh",
              fullName: function() {
                        return this.firstName
                       + this.lastName;
              };
  console.log(me.fullName());

Hay algunas cosas a tener en cuenta sobre este ejemplo. La palabra clave "this" es necesaria para acceder a otras propiedades en el mismo objeto. Además, se requieren corchetes "()" para llamar funciones.

Es posible que pueda ver cómo utilizar objetos JavaScript para crear bibliotecas de código. Por ejemplo, una biblioteca matemática es un objeto JavaScript con muchas propiedades que son tanto valores de datos como funciones. Math.PI es una representación en coma flotante del valor de pi, y Math.random() es una función que devuelve un número aleatorio entre 0 y 1.

Validación de formulario-Validación de formulario (al enviar)

La práctica común es validar el formulario en el servidor después de que el cliente ingresa toda la información requerida y hace clic en el botón "Enviar". Si la información ingresada por el cliente es incorrecta o falta, el servidor debe devolver el formulario completo al cliente. Luego se le pide al cliente que envíe nuevamente la información correcta. Este es un proceso difícil y que requiere mucho tiempo y genera mucha tensión en el servidor.

Utilizando JavaScript, los datos del formulario se pueden validar en la computadora cliente antes de transmitirlos al servidor web. La validación de formularios en JavaScript requiere dos funciones básicas.

El primer paso es verificar que todos los campos obligatorios estén completos en el formulario. Se requiere un bucle simple sobre cada campo del formulario para determinar si los datos existen.
La segunda parte del proceso de validación es garantizar que los datos ingresados tengan la forma y los valores correctos. Para garantizar que los datos sean correctos, se debe incluir la lógica adecuada en el código.

function myFunction() {
  // Get the value of the input field with id="numb"
  let x = document.getElementById("numb").value;
  // If x is Not a Number or less than one or greater than 10
  let text;
  if (isNaN(x) || x < 1 || x > 10) {
    text = "Input not valid";
  } else {
    text = "Input OK";
  }
  document.getElementById("demo").innerHTML = text;
}

La función principal de este código es verificar si la entrada es un número y entre 1 y 10 según el valor ingresado por el usuario, y actualizar el contenido de visualización del elemento especificado en la página de acuerdo con diferentes situaciones. Si la entrada es ilegal, se muestra "Entrada no válida"; de lo contrario, se muestra "Entrada correcta".

A continuación se muestra un ejemplo de validación de formulario:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A simple JavaScript form validation</title>
<style> </style>
</head>
<script>
function validateform() {
  var name = document.myform.name.value;
  var mobile = document.myform.mobile.value;
  var email = document.myform.email.value;
  
  if (name == null || name == "") {
    alert("姓名不能为空");
    return false;
  } else if (mobile.length < 10) {
    alert("联系电话至少需要10个长度");
    return false;
  }
  
  alert("你的表单已经被提交");
  return true;
}
</script>
<body>
<form name="myform" method="post" action="#" onsubmit="return validateform()">
姓名: <input type="text" name="name"><br/><br/>
联系电话: <input type="text" name="mobile"><br/><br/>
邮箱: <input type="email" name="email"><br/><br/>
<input type="submit" value="提交">
</form>
</body>
</html>

La interfaz es la siguiente:

Estado uno:

Estado dos:

Estado tres: