Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: pedro,, en 11 de Noviembre 2015, 00:20
-
Hola.
EJERCICIO 1
Crea un documento HTML que conste de un título h1 con el texto <<La web para aprender programación>>, dos párrafos de texto y una imagen. Utiliza los eventos onmouseover para que la imagen original sea reemplazada por otra imagen cuando el usuario pasa el ratón sobre ella. Utiliza el evento onmouseout para hacer que cuando el usuario salga del espacio de la imagen, vuelva a aparecer la imagen original.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros"><meta charset="utf-8">
<script type="text/javascript">
window.onload = function(){
var elementoImagen = document.getElementById('imagen');
elementoImagen.addEventListener('mouseover', cambiaImagen);
elementoImagen.addEventListener('mouseout', cambiaAImagenInicial);
function cambiaImagen() { this.src = 'http://images4.hiboox.com/images/4111/diapo0289e8e5b4f9fb2375c0e99b518a8807.png?24';}
function cambiaAImagenInicial(){ this.src = 'http://i1336.photobucket.com/albums/o646/alejrod872/Curso%20JavaScript/javascript_logo_zps7835661f.png?t=1392290933';}
}
</script>
</head>
<body>
<h1>La web para aprender programación</h1>
<p>EJERCICIO 1</p>
<p>Crea un documento HTML que conste de un título h1 con el texto <<La web para aprender programación>>, dos párrafos de texto y una imagen.
Utiliza los eventos onmouseover para que la imagen original sea reemplazada por otra imagen cuando el usuario pasa el ratón sobre ella.
Utiliza el evento onmouseout para hacer que cuando el usuario salga del espacio de la imagen, vuelva a aparecer la imagen original.</p>
<img id="imagen" src="http://i1336.photobucket.com/albums/o646/alejrod872/Curso%20JavaScript/javascript_logo_zps7835661f.png?t=1392290933">
</body>
</html>
EJERCICIO 2
Crea un documento HTML que conste de un título h1 con el texto <<La web para aprender programación>>, dos párrafos de texto y un formulario con los campos nombre, apellidos, edad y correo electrónico, así como con botones enviar y cancelar. Utiliza el evento onsubmit y otras herramientas para impedir que se envíe el formulario si se produce alguna de estas circunstancias:
a) El nombre está vacío ó el correo electrónico está vacío.
b) El correo electrónico no contiene los símbolos @ (arroba) y . (punto). Por ejemplo juan arroba gmail.com no es un correo válido.
c) No existe al menos una letra precediendo el símbolo @ del correo electrónico y una letra después de este símbolo. Por ejemplo a@.com no es un correo válido.
d) No existen al menos dos letras después del punto en el correo electrónico. Por ejemplo juan@gmail.c no es un correo válido.
e) La edad es cero o menor de cero.
En caso de producirse una de estas circunstancias, debe mostrarse el campo del formulario de un color distinto y un mensaje de advertencia. El color de advertencia debe desaparecer (dinámicamente) cuando el campo que tenía un problema tome el foco (para ello usa el evento onfocus).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo curso aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {background-color:yellow; font-family: sans-serif;}
label {color: maroon; display:block; padding:5px;}
</style>
<script type="text/javascript">
window.onload = function(){
var elementoInput = document.getElementsByTagName('input');
for(var i = 0; i < elementoInput.length; i++){
elementoInput[i].addEventListener('focus', cambiaFondo);
elementoInput[i].addEventListener('blur', verificar);
}
function cambiaFondo(){this.style.backgroundColor = 'white'; this.nextSibling.textContent = '';}
function verificar(){verificaDatos(this);}
}
var nombreCorrecto = false;
var emailCorrecto = false;
var edadCorrecta = false;
function verificaDatosFormulario(){
var nodoNombre = document.getElementById('nombre');
var nodoEmail = document.getElementById('email');
if(nodoNombre.value=='' && nodoEmail.value==''){return false;}
}
function verificaDatos(nodo){
switch(nodo.name) {
case 'nombre':
if(!comprobarNombre(nodo.value)){
cambiaColorDeFondo(nodo);
edadCorrecta = false;
}else{
nombreCorrecto = true;
}
break;
case 'edad':
if(!comprobarEdad(nodo.value)){
cambiaColorDeFondo(nodo);
edadCorrecta = false;
}else{
edadCorrecta = true;
}
break;
case 'email':
nodo.value = pasarEmailAMinusculas(nodo.value);
if (comprobrarAtEnEmail(nodo.value)){nodo.value = cambiarAtEnEmail(nodo.value);}
if(!comprobarEmail(nodo.value)){
cambiaColorDeFondo(nodo);
edadCorrecta = false;
}else{
emailCorrecto = true;
}
break;
default:
break;
}
if(nombreCorrecto && emailCorrecto && edadCorrecta){return true;}else{return false;}
}
function comprobarEdad(edad){
if(edad>0){return true;}
}
function comprobrarAtEnEmail(email){
var expAt = /\w+\sat\s\w+/;
if(expAt.test(email)){return true;}
}
function cambiarAtEnEmail(email){
return email.replace(/\sat\s/g,'@');
}
function pasarEmailAMinusculas(email){
return email.toLowerCase();
}
function comprobarNombre(nombre){
var expReg = /\w{3}/;
if(!expReg.test(nombre)){
return false;
}else{
return true;
}
}
function comprobarEmail(email){
var expArroba = /[@]/;
var expPunto = /[.]/;
var expRegEmail = /\w+[@]\w+[.][A-Za-z]{2}/;
if(!expPunto.test(email) || !expArroba.test(email)){
if(!expArroba.test(email) && !expPunto.test(email)){
alert('Dirección de correo errónea, faltan el signo @ y el .');
}else if(!expArroba.test(email) && expPunto.test(email)){
alert('Dirección de correo errónea, falta el signo @');
}else{
alert('Dirección de correo errónea, falta el signo .');
}
return false;
}else{
if(expRegEmail.test(email)){
return true;
}else{
return false;
}
}
}
function cambiaColorDeFondo(nodo){
nodo.style.backgroundColor = 'orange'; nodo.nextSibling.textContent = 'Campo incorrecto.';
}
</script>
</head>
<body>
<h1>La web para aprender programación</h1>
<p>EJERCICIO 2</p>
<p>Crea un documento HTML que conste de un título h1 con el texto...</p>
<form name ="formularioContacto" class="formularioTipo1" method="get" onsubmit="return verificaDatosFormulario()">
<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" "><span></span></label>
<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos"><span></span></label>
<label for="edad"><span>Edad:</span> <input id="edad" type="text" name="edad" ><span></span></label>
<label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" ><span></span></label>
<label><input type="submit" value="Enviar"><input type="reset" value="Cancelar"></label>
</form>
</body
</html>
Saludos.
-
Hola, me acabo de dar cuenta que el ejercicio dos que inserte no era el que debía de poner ahí, seria este:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo curso aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {background-color:yellow; font-family: sans-serif;}
label {color: maroon; display:block; padding:5px;}
</style>
<script type="text/javascript">
window.onload = function(){
var elementoInput = document.getElementsByTagName('input');
for(var i = 0; i < elementoInput.length; i++){
elementoInput[i].addEventListener('focus', cambiaFondo);
elementoInput[i].addEventListener('blur', verificar);
}
function cambiaFondo(){this.style.backgroundColor = 'white'; this.nextSibling.textContent = '';}
function verificar(){verificaDatos(this);}
}
var nombreCorrecto = false;
var emailCorrecto = false;
var edadCorrecta = false;
function verificaDatosFormulario(){
if(nombreCorrecto && emailCorrecto && edadCorrecta){return true;}else{return false;}
}
function verificaDatos(nodo){
switch(nodo.name) {
case 'nombre':
if(!comprobarNombre(nodo.value)){
cambiaColorDeFondo(nodo);
nombreCorrecto = false;
}else{
nombreCorrecto = true;
}
break;
case 'edad':
if(!comprobarEdad(nodo.value)){
cambiaColorDeFondo(nodo);
edadCorrecta = false;
}else{
edadCorrecta = true;
}
break;
case 'email':
nodo.value = pasarEmailAMinusculas(nodo.value);
if (comprobrarAtEnEmail(nodo.value)){nodo.value = cambiarAtEnEmail(nodo.value);}
if(!comprobarEmail(nodo.value)){
cambiaColorDeFondo(nodo);
emailCorrecto = false;
}else{
emailCorrecto = true;
}
break;
default:
break;
}
}
function comprobarEdad(edad){
if(edad>0){return true;}
}
function comprobrarAtEnEmail(email){
var expAt = /\w+\sat\s\w+/;
if(expAt.test(email)){return true;}
}
function cambiarAtEnEmail(email){
return email.replace(/\sat\s/g,'@');
}
function pasarEmailAMinusculas(email){
return email.toLowerCase();
}
function comprobarNombre(nombre){
var expReg = /\w{3}/;
if(!expReg.test(nombre)){
return false;
}else{
return true;
}
}
function comprobarEmail(email){
var expArroba = /[@]/;
var expPunto = /[.]/;
var expRegEmail = /\w+[@]\w+[.][A-Za-z]{2}/;
if(!expPunto.test(email) || !expArroba.test(email)){
if(!expArroba.test(email) && !expPunto.test(email)){
alert('Dirección de correo errónea, faltan el signo @ y el .');
}else if(!expArroba.test(email) && expPunto.test(email)){
alert('Dirección de correo errónea, falta el signo @');
}else{
alert('Dirección de correo errónea, falta el signo .');
}
return false;
}else{
if(expRegEmail.test(email)){
return true;
}else{
return false;
}
}
}
function cambiaColorDeFondo(nodo){
nodo.style.backgroundColor = 'orange'; nodo.nextSibling.textContent = 'Campo incorrecto.';
}
</script>
</head>
<body>
<h1>La web para aprender programación</h1>
<p>EJERCICIO 2</p>
<p>Crea un documento HTML que conste de un título h1 con el texto...</p>
<form name ="formularioContacto" class="formularioTipo1" method="get" onsubmit="return verificaDatosFormulario()">
<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" "><span></span></label>
<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos"><span></span></label>
<label for="edad"><span>Edad:</span> <input id="edad" type="text" name="edad" ><span></span></label>
<label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" ><span></span></label>
<label><input type="submit" value="Enviar"><input type="reset" value="Cancelar"></label>
</form>
</body
</html>
Saludos.
-
Hola lo he chequeado, ejercicio 1 todo perfecto
Ejercicio 2 si está el formulario vacío y no se escribe nada y se intenta enviar debería mostrar las advertencias pero no hace nada
Salu2
-
Hola.
Rectifiqué la función verificaDatosFormulario(), quedando así:
function verificaDatosFormulario(){
if(nombreCorrecto && emailCorrecto && edadCorrecta){
return true;
}else{
if(!document.getElementById('nombre').value && !document.getElementById('email').value){
alert('No se ha rellenado ni el nombre ni el correo electrónico.');
}else if(!document.getElementById('nombre').value && document.getElementById('email').value){
alert('No se ha rellenado el nombre.');
}else if(document.getElementById('nombre').value && !document.getElementById('email').value){
alert('No se ha rellenado el correo electrónico.');
}
return false;
}
}
-
Cuadrado! ;D