html eventos
<body onload="alert('La pagina se ha cargado correctamente')">
<p id="Eventos"></p>
<!-- Manejador como atributo de una etiqueta XHTML -->
<h1>Modelo de registro de evento en linea</h1>
<h3 id="cab1" onclick="this.innerHTML='Cambia el escrito a esto'" onmouseover="this.style.background='red'" onmouseout="this.style.background='white'">Pulse Aqui</h3>
<!-- Otra forma con funciones externas -->
<h3 onclick="cambiar(this)">Pulse Aqui</h3>
<script>
function cambiar(e) {
e.innerHTML = "Cambiar el titulo"
}
</script>
<!-- Hay acciones q desencadenan varios elementos Ej. submit desencadena onmousedown, onclick, onmouseup
Para evitar que el navegador ejecute la accion por defecto necesitamos
añadir "return false"-->
<a href="http://www.google.com" onclick="alertar(); return false;">Pulsa aquí para ver qué se ejecuta</a>
<script>
function alertar() {
alert("Vamos a Google");
}
</script>
<br/>
<a href="http://www.google.com" onclick="return preguntar();">Pulsa aquí para ver qué se ejecuta</a>
<script>
function preguntar() {
return confirm("¿Deseas ir a Google?");
}
</script>
<!-- Carga de página con evento onload -->
<!-- Escribimos la etiqueta: <body onload="funcion_ejecutar"> -->
</body>
4.02. Modelo de eventos tradicional
<body >
<h1>Modelo de registro de eventos tradicional</h1>
<h3 id="tradicional">Pulsa aquí para ver lo que se ejecuta</h3>
<script>
// Le asigna un evento a tradicional
document.getElementById("tradicional").onclick = cambiar; //¡¡Sin paréntesis!!
function cambiar() {
alert("Entramos en cambiar");
document.getElementById("tradicional").innerHTML = "Modelo de registro de eventos tradicional";
document.getElementById("tradicional").onclick = null;
}
</script>
<!-- Inconveniente: la página debe estar completamente cargada para que se utilicen las funciones DOM que asignan manejadores a los elementos HTML -->
<h3 id="tradicional2">Pulsa aquí para ver qué se ejecuta</h3>
<script>
window.onload = function () {
alert("La página ha cargado correctamente");
document.getElementById("tradicional2").onclick = miMensaje; //¡¡Sin paréntesis!!
}
function miMensaje() {
document.getElementById("tradicional2").innerHTML = "Modelo de registro de eventos tradicional";
}
</script>
</body>
EL FLUJO DE LOS EVENTOS
<body>
<h1>Modelo de eventos avanzados del W3C</h1>
<h3 id="w3c">Modelo del W3C</h3>
<h3 id="w3canonima">Modelo del W3C con funciones anónimas</h3>
<script>
/* elemento.addEventListener("<evento_sin_on>",<funcion>,<false|true>); */
document.getElementById("w3c").addEventListener("click", saludarUnaVez, false);
document.getElementById("w3c").addEventListener("click", colorearse, false);
document.getElementById("w3c").addEventListener("mouseover", fondo, false);
function saludarUnaVez() {
alert("¡Hola, caracola!");
document.getElementById("w3c").removeEventListener("click", saludarUnaVez);
}
function colorearse() {
document.getElementById("w3c").style.color = "red";
}
function fondo() {
document.getElementById("w3c").style.background = "blue";
}
/* Funciones anónimas */
/* elemento.addEventListener("<evento_sin_on>",function(){<codigo_funcion}),false); */
document.getElementById("w3canonima").addEventListener("click", function () {
this.style.background = "#C0C0C0";
});
</script>
Resumen
__________
if (!e) e = window.event;
//target: Obtener el elemento que desencadenó un evento específico:
if (e.target.id == "parrafo1") alert("Has pulsado el primer párrafo");
____________
<body>
<h1 id="eventos">Obtener información de un evento</h1>
<h2 id="parrafo1">Párrafo 1</h2>
<h2 id="parrafo2">Párrafo 2</h2>
<script>
document.getElementById("eventos").addEventListener("mouseover", manejador);
document.getElementById("eventos").addEventListener("mouseout", manejador);
document.getElementById("parrafo1").addEventListener("click", saludo);
document.getElementById("parrafo2").addEventListener("click", saludo);
function manejador(e) {
//Valoramos la posibilidad de que se utilice un navegador de Microsoft
if (!e) e = window.event;
switch (e.type) {
case "mouseover":
this.style.color = "purple";
break;
case "mouseout":
this.style.color = "yellow";
break;
}
}
function saludo(e) {
//Valoramos la posibilidad de que se utilice un navegador de Microsoft
if (!e) e = window.event;
//target: Obtener el elemento que desencadenó un evento específico:
if (e.target.id == "parrafo1") alert("Has pulsado el primer párrafo");
else if (e.target.id == "parrafo2") alert("Has pulsado el segundo párrafo");
alert("Has pulsado el " + e.target.id);
}
</script>
</body>
FORMULARIO.HTML
<!DOCTYPE html>
<html>
<head>
<title>Formulario</title>
<script src="validacion.js"></script>
<style>
.error {
border: solid 2px #FF0000;
}
</style>
</head>
<body>
<h1>Formulario</h1>
<form action="procesar.php" method="post" id="miFormulario">
<table>
<tr>
<td>Nombre: </td>
<td>
<input type="text" name="nombre" id="nombre" />
</td>
</tr>
<tr>
<td>Telefono: </td>
<td>
<input type="text" name="telefono" id="telefono" />
</td>
</tr>
<tr>
<td>Fecha de nacimiento: </td>
<td>
<input type="text" name="dia" size="2" id="dia" />
<input type="text" name="mes" size="2" id="mes" />
<input type="text" name="ano" id="ano" size="4" />
</td>
</tr>
<tr>
<td>Sexo : </td>
<td>
<input type="radio" name="sexo" value="H" checked /> Hombre
<input type="radio" name="sexo" value="M" /> Mujer
</td>
</tr>
<tr>
<td>Mayor de 18:</td>
<td>
<input type="checkbox" name="mayor" id="mayor" checked/>
</td>
</tr>
</td>
</tr>
</table>
<p>
<input type="submit" value="Enviar" id="enviar" />
<input type="reset" value="Borrar" id="borrar" />
</p>
</form>
</body>
</html>
validacion.js
//SELECCION DEL FORMULARIO
//Conociendo el id
var formulario = document.getElementById("miFormulario");
var formulario2 = document.forms["miFormulario"];
//Conociendo el número de formulario que es en la página
var formulario3 = document.getElementsByTagName("form")[0];
var formulario4 = document.forms[0];
//SELECCIONAR ELEMENTOS DE UN FORMULARIO
//.elements[] Devuelve un array con todos los input del formulario
//getElementById("idElemento") Devuelve un elemento con un id determinado
//getElementsByTagName("etiqueta") Devuelve un array con elementos de un tipo de etiqueta (input, select, etc.)
//getElementsByName("nombre") Devuelve un array con elementos que tienen el mismo nombre (por ejemplo, radiobutton).
window.onload = iniciar; //Sin paréntesis
function iniciar() {
document.getElementById("enviar").addEventListener('click', validar, false);
}
function validaNombre() {
var elemento = document.getElementById("nombre");
limpiarError(elemento);
if (elemento.value == "") {
alert("El campo no puede ser vacío");
error(elemento);
return false;
}
return true;
}
function validaTelefono() {
var elemento = document.getElementById("telefono");
if (isNaN(elemento.value)) {
alert("El campo teléfono tiene que ser numérico");
return false;
}
return true;
}
function validaFecha() {
var dia = document.getElementById("dia").value;
var mes = document.getElementById("mes").value;
var ano = document.getElementById("ano").value;
var fecha = new Date(ano, mes, dia);
if (isNaN(fecha)) {
alert("Los campos de la fecha son incorrectos");
return false;
}
return true;
}
function validaCheck() {
var campoCheck = document.getElementById("mayor");
if (!campoCheck.checked) {
alert("Debes ser mayor de edad");
return false
}
return true;
}
function validar(e) {
if (validaNombre() && validaTelefono() && validaFecha() && validaCheck() && confirm("Pulsa aceptar si deseas enviar el formulario")) {
return true;
} else {
e.preventDefault();
return false;
}
}
function error(elemento) {
elemento.className = "error";
elemento.focus();
}
function limpiarError(elemento) {
elemento.className = "";
}
4.07. Validación básica de formularios con HTML5
<body>
<h1>Formulario</h1>
<form action="procesar.php" method="post" id="miFormulario">
<table>
<tr>
<td>Nombre*: </td>
<td>
<input type="text" name="nombre" id="nombre" maxlength="15" pattern="[A-Za-z]{2,15}" title="Introduce entre 2 y 15 letras" required/>
</td>
</tr>
<tr>
<td>Edad*: </td>
<td>
<input type="number" name="edad" id="edad" min="18" max="100" required/>
</td>
</tr>
<tr>
<td>Telefono*: </td>
<td>
<input type="text" name="telefono" id="telefono" pattern="[0-9]{9}" title="Numero de 9 cifras" required/>
</td>
</tr>
</table>
<p>
<input type="submit" value="Enviar" id="enviar" />
<input type="reset" value="Borrar" id="borrar" />
</p>
</form>
</body>
VALIDACION.JS
window.onload = iniciar;
function iniciar() {
document.getElementById("enviar").addEventListener('click', validar, false);
}
function validaNombre() {
var elemento = document.getElementById("nombre");
if (!elemento.checkValidity()) {
if (elemento.validity.valueMissing) {
error2(elemento, "Debe introducir un nombre")
}
if (elemento.validity.patternMismatch) {
error2(elemento, "El nombre debe tener entre 2 y 15 caracteres");
}
//error(elemento);
return false;
}
return true;
}
function validaEdad() {
var elemento = document.getElementById("edad");
if (!elemento.checkValidity()) {
if (elemento.validity.valueMissing) {
error2(elemento, "Debe introducir una edad")
}
if (elemento.validity.rangeOverflow) {
error2(elemento, "El valor debe ser menor de 100")
}
if (elemento.validity.rangeUnderflow) {
error2(elemento, "El valor debe ser mayor o igual que 18");
}
//error(elemento);
return false;
}
return true;
}
function validaTelefono() {
var elemento = document.getElementById("telefono");
if (!elemento.checkValidity()) {
if (elemento.validity.valueMissing) {
error2(elemento, "Debe introducir un teléfono")
}
if (elemento.validity.patternMismatch) {
error2(elemento, "El telefono debe tener 9 numeros");
} //error(elemento);
return false;
}
return true;
}
function validar(e) {
borrarError();
if (validaNombre() && validaEdad() && validaTelefono() && confirm("Pulsa aceptar si deseas enviar el formulario")) {
return true
} else {
e.preventDefault();
return false;
}
}
function error(elemento) {
document.getElementById("mensajeError").innerHTML = elemento.validationMessage;
elemento.className = "error";
elemento.focus();
}
function error2(elemento, mensaje) {
document.getElementById("mensajeError").innerHTML = mensaje;
elemento.className = "error";
elemento.focus();
}
function borrarError() {
var formulario = document.forms[0];
for (var i = 0; i < formulario.elements.length; i++) {
formulario.elements[i].className = "";
}
}
FORMULARIO3.HTML
<!DOCTYPE html>
<html>
<head>
<title>VALIDACION DE FORMULARIOS CON HTML5</title>
<script src="validacion3.js"></script>
<style>
.error {
border: solid 2px #FF0000;
}
</style>
</head>
<body>
<h1>Formulario</h1>
<form action="procesar.php" method="post" id="miFormulario">
<table>
<tr>
<td>Nombre*: </td>
<td>
<input type="text" name="nombre" id="nombre" maxlength="15" pattern="[A-Za-z]{2,15}" title="Introduce entre 2 y 15 letras" required/>
</td>
</tr>
<tr>
<td>Edad*: </td>
<td>
<input type="number" name="edad" id="edad" min="18" max="100" required/>
</td>
</tr>
<tr>
<td>Telefono*: </td>
<td>
<input type="text" name="telefono" id="telefono" pattern="[0-9]{9}" title="Numero de 9 cifras" required/>
</td>
</tr>
</table>
<p id="mensajeError"></p>
<p>
<input type="submit" value="Enviar" id="enviar" />
<input type="reset" value="Borrar" id="borrar" />
</p>
</form>
</body>
</html>
4.09. Cookies. Introducción.
<!-- ¿Qué son las Cookies?
- Datos almacenados en nuestro ordenador en pequeños archivos de texto.
- Recuerdan la información de un usuario aunque se cierre el navegador o se desconecte del servidor.
- Podemos guardar el nombre de un visitante de la página, el número de veces que ha entrado, etc.
- Se guardan en forma de pares "nombre=valor": usuario = Ada Lovelace
-->
<script>
//Crear una cookie: nombre; fecha de expiracion -UTC-; edad máxima en segundos; ruta; dominio
//document.cookie ="usuario = Ada Lovelace; expires=Thu, 16 Nov 2017 12:00:00 UTC; path=/;";
document.cookie = "usuario = Ada Lovelace;";
document.cookie = "sexo = mujer;";
//Leer una cookie
var miCookie = document.cookie;
alert(miCookie);
//Modificar una cookie
document.cookie = "sexo = hombre;";
alert(document.cookie);
//Borrar una cookie
//document.cookie = "usuario=; expires=Thu, 01 Jan 1970 00:00:01 GMT";
document.cookie = "sexo=; expires=Thu, 01 Jan 1970 00:00:01 GMT";
alert(document.cookie);
</script>
<body>
<button type="button" id="incrementar">Incrementar</button>
<button type="button" id="decrementar">Decrementar</button>
<button type="button" id="logout">Logout</button>
<p id="saludo"></p>
<p id="contador"></p>
<script>
//Resumen
//localStorage: Almacena datos sin fecha de expiracion Ej
// localStorage.setItem("Nombre","Goyo");
//CONSULTAR UN ELEMENTO
// localStorage.getItem("Nombre");
//BORRAR UN ELEMENTO
// localStorage.removeItem("Nombre");
//BORRAR TODOS LOS ELEMENTO
// localStorage.clear();
//sessionStorage: almacena los datos durante una sesion (si se cierra la ventana o el navegador - desaparece)
//Comprobar si el navegador soporta webstorage
if (typeof(Storage) !== "undefined"){
//Saludo al usuario
saludar();
//Contador
contador();
//Botones incrementar y decrementar
document.getElementById("incrementar").addEventListener("click",incrementar);
document.getElementById("decrementar").addEventListener("click",decrementar);
document.getElementById("logout").addEventListener("click",logout);
}else{
alert("El navegador NO soporta WebStorage");
}
function saludar(){
alert("El navegador soporta WebStorage");
if(localStorage.getItem("usuario")!=null){
document.getElementById("saludo").innerHTML ="¡Bienvendo/a de nuevo, "+localStorage.getItem("usuario")+"!";
}else{
var nombre = prompt("¿Cómo te llamas?");
localStorage.setItem("usuario",nombre);
document.getElementById("saludo").innerHTML ="Tu primera visita, "+localStorage.getItem("usuario");
}
}
function contador(){
if (!sessionStorage.getItem("contador")){
sessionStorage.setItem("contador","0"); //Se utilizan cadenas
}
document.getElementById("contador").innerHTML = "Contador: "+sessionStorage.getItem("contador");
}
function incrementar(){
sessionStorage.setItem("contador",Number(sessionStorage.getItem("contador"))+1);
document.getElementById("contador").innerHTML ) "Contador: "+sessionStorage.getItem("contador");
}
function decrementar(){
sessionStorage.setItem("contador",Number(sessionStorage.getItem("contador"))-1);
document.getElementById("contador").innerHTML ) "Contador: "+sessionStorage.getItem("contador");
}
function logout(){
alert("Se ha cerrado la sesión de "+localStorage.getItem("usuario"));
localStorage.removeItem("usuario");
//localStorage.clear(); //Solo afecta a localStorage
document.getElementById("saludo").innerHTML= "";
}
</script>
No hay comentarios.:
Publicar un comentario