Ejercicio 1 de la entrega CU01159E del manual de programación web con JavaScript:
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros"><meta charset="utf-8">
<script type="text/javascript">
function start(){
var imgElem = document.getElementsByTagName('img')[0];
imgElem.addEventListener('mouseover', function(){
this.src = "http://i.imgur.com/SpZyc.png";
});
imgElem.addEventListener('mouseout', function(){
this.src = "http://i.imgur.com/tq5Bs.png";
});
}
</script>
</head>
<body onload="start()">
<h1>La web para aprender programación</h1>
<p>Primer párrafo de texto</p>
<p>Segundo párrafo de texto</p>
<img src="http://i.imgur.com/tq5Bs.png" title="imagen" alt="xfashion"/>
</body>
</html>
Ejercicio 2:
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros"><meta charset="utf-8">
<script type="text/javascript">
function start(){
var inputElems = document.querySelectorAll('.name, .edad, .correo');
for(var i=0;i<inputElems.length;i++){
inputElems[i].addEventListener('focus', function(){
this.style.backgroundColor = "";
});
}
}
function envio(){
var inputElems = document.getElementsByTagName('input');
if(!inputElems[0].value){
alert("campo nombre vacio");
inputElems[0].style.backgroundColor = "red";
return false;
}
if(!inputElems[3].value.match(/^\w+@\w+\.\w{2,}$/)) {
alert("Revise el campo correo electrónico");
inputElems[3].style.backgroundColor = "red";
return false;
}
if(parseInt(inputElems[2].value)<=0 || !Number(inputElems[2].value)) {
alert("Revise campo Edad");
inputElems[2].style.backgroundColor = "red";
return false;
}
return true;
}
</script>
</head>
<body onload="start()">
<h1>La web para aprender programación</h1>
<p>Primer párrafo de texto</p>
<p>Segundo párrafo de texto</p>
<form name="formulario" action="http://www.google.es" onsubmit='return envio();' method="get">
<input name="nombre" class="name" type="text" placeholder="nombre">
<input name="apellido" class="apellido" type="text" placeholder="apellido">
<input name="edad" class="edad" type="text" placeholder="edad">
<input name="correo" class="correo" type="text" placeholder="ejemplo@ejemplo">
<input type="submit" value="submit">
<input type="reset" value="cancelar">
</form>
</body>
</html>
Tema: JavaScript. Lista de eventos cambiar la imagen visible al pasar ratón CU01159E (Leído 1924 veces)
RSS -
WAP2