Importante para recién llegados: en este hilo están las normas, sugerencias y políticas para escribir en los foros: https://aprenderaprogramar.com/foros/index.php?topic=1460.0 ¡Léelo antes de escribir!
Mostrar Mensajes
Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.
<!DOCTYPE html>
<html><head> <title>Curso JavaScript aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {font-family: sans-serif; text-align:center; }
div {border-style:solid;margin: 30px; padding:25px; display:inline-block;}
div div {background-color: yellow;}
</style>
<script type="text/javascript">
function crearNodoHijo(nodoPadre) {
var nodoHijo=document.createElement("div");
nodoHijo.innerHTML=nodoPadre.innerHTML;
nodoHijo.onclick=function (){crearNodoHijo(nodoPadre)};
nodoHijo.style.color="blue";
document.body.appendChild(nodoHijo);
}
</script>
</head>
<body>
<div id="nodoRaiz" onclick="crearNodoHijo(this)">Pulsa aquí para duplicar este nodo</div>
</body></html><!DOCTYPE html>
<html><head> <title>Curso JavaScript aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {font-family: sans-serif; text-align:center; }
div {border-style:solid;margin: 30px; padding:25px; display:inline-block;}
div div {background-color: yellow;}
</style>
<script type="text/javascript">
function crearNodoHijo(nodoPadre) {
var nodoHijo =nodoPadre.cloneNode(false);
nodoHijo.innerHTML=nodoPadre.innerHTML;
nodoHijo.onclick="";
document.body.appendChild(nodoHijo);
nodoHijo.style.color="blue";
}
</script>
</head>
<body>
<div id="nodoRaiz" onclick="crearNodoHijo(this)">Pulsa aquí para duplicar este nodo</div>
</body></html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#cuadrado{
position:absolute;
width:204px;
height:204px;
border:solid thin red;
top:30%;
left:30%;
}
div.cuadrante{
border:solid thin red;
text-align: center;
width:100px;
height:100px;
float:left;
line-height: 100px;
}
input{
float:right;
margin-top:2em;
}
</style>
<script>
var contador=0;
var cuadrante=document.getElementsByClassName("cuadrante");
function avanzar(){
switch (contador){
case 0: cuadrante[contador].style.backgroundColor="black";
cuadrante[contador].style.color="white";
cuadrante[contador].innerHTML="El";
break;
case 1:
cuadrante[contador].innerHTML="poder ";
break;
case 2:
cuadrante[contador].innerHTML="de";
break;
case 3: cuadrante[contador].style.backgroundColor="yellow";
cuadrante[contador].innerHTML="JavaScript";
break;
default: alert ("No es posible hacer mas ");
}
contador++;
}
</script>
</head>
<body>
<div id="cuadrado">
<div class="cuadrante">
<span>?</span>
</div>
<div class="cuadrante">
<span>?</span>
</div>
<div class="cuadrante">
<span>?</span>
</div>
<div class="cuadrante">
<span>?</span>
</div>
<input type="button" onclick="avanzar()" value="Avanzar">
</div>
</body>
</html>Gracias por tus sugerencias
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#cuadrado{
border:solid thin blue;
width:300px;
height:300px;
margin-left:50px;
margin-top:10px;
}
#botones{
left:100px;
margin: 30px;
}
input{
text-align:center;
margin:10px ;
}
</style>
<script>
var contador =1;
function anyadir(donde){
var nodocuadrado=document.getElementById("cuadrado");
var nodobody=document.body;
var nodohijo=document.createElement("span");
nodohijo.style.color="green";
nodohijo.id="elemento"+(contador+1);
nodohijo.innerHTML="Nodo creado "+contador+ "<br/>";
if (donde=="caja"){
nodocuadrado.appendChild(nodohijo);
contador++
}
else {
nodobody.appendChild(nodohijo);
contador++;
}
}
</script>
</head>
<body>
<div id="cuadrado">
<p>Curso JavaScript aprenderaprogramar.com</p>
</div>
<div id="botones">
<input type="button" value="Añadir fila" onclick="anyadir('caja')" />
<input type="button" value="Anidar" onclick="anyadir('fuera')" />
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#cuadrado{
position:absolute;
width:204px;
height:204px;
border:solid thin red;
top:30%;
left:30%;
}
div.cuadrante{
border:solid thin red;
text-align: center;
width:100px;
height:100px;
float:left;
line-height: 100px;
}
input{
float:right;
margin-top:2em;
}
</style>
</head>
<body>
<div id="cuadrado">
<div class="cuadrante">
<span>?</span>
</div>
<div class="cuadrante">
<span>?</span>
</div>
<div class="cuadrante">
<span>?</span>
</div>
<div class="cuadrante">
<span>?</span>
</div>
<input type="button" onclick="avanzar()" value="Avanzar">
</div>
</body>
<script>
var contador=0;
var cuadrante=document.querySelectorAll(".cuadrante");
function avanzar(){
switch (contador){
case 0: cuadrante[contador].style.backgroundColor="black";
cuadrante[contador].style.color="white";
cuadrante[contador].innerHTML="El";
break;
case 1:
cuadrante[contador].innerHTML="poder ";
break;
case 2:
cuadrante[contador].innerHTML="de";
break;
case 3: cuadrante[contador].style.backgroundColor="yellow";
cuadrante[contador].innerHTML="JavaScript";
break;
default: alert ("No es posible hacer mas ");
}
contador++;
}
</script>
</html>
EJERCICIO 2
Crea un documento HTML que conste de un título h1 con el texto <<Pulsa una flecha>>, y un div de 300 por 300 px con borde color negro, color de fondo amarillo y márgenes de 200px en todas direcciones. Utiliza el evento keypress para determinar si el usuario pulsa una tecla del cursor, y en ese caso utilizando CSS haz que el cuadrado que define el div se desplace 20px en la dirección de flecha elegida por el usuario. Por ejemplo, si el usuario pulsa la flecha derecha, el div debe desplazarse 20 px dentro de la ventana, hacia la derecha.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
h1 {
text-align: center;
}
#cuadrado{
margin:200px;
border: solid 1px blue;
background:yellow;
width:300px;
height:300px;
position: absolute;
}
</style>
<script>
window.onload=function(){document.onkeydown=desplazar};
function desplazar(objeto){
var tecla = objeto.which;
var situacionY = document.getElementById("cuadrado").offsetLeft;
var situacionX = document.getElementById("cuadrado").offsetTop;
switch (tecla){
case 37 :
cuadrado.style.left = situacionY-220+"px" ; break;
case 38 :
cuadrado.style.top = situacionX-220+"px" ;break;
case 39 :
cuadrado.style.left = situacionY-180+"px" ;break;
case 40 :
cuadrado.style.top = situacionX-180+"px" ;break;
default :alert("Se ha equivocado, debe pulsar las flechas del teclado");
}
}
</script>
<body>
<h1>Pulse una flecha</h1>
<div id="cuadrado"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1 {
display:inline;
}
div#pantalla{
border:black thin solid;
height:400px;
width:500px;
position:absolute;
top:20%;
left:20%;
}
</style>
<script>
window.onload=function(){
document.getElementById("pantalla").onmousemove=situacion;
document.getElementById("pantalla").onmouseout=situacionOut;
}
function situacion(evento){
var x=evento.clientX;
var y=evento.clientY;
valorX=document.getElementById("valorX");
valorY=document.getElementById("valorY");
valorX.innerHTML=x;
valorY.innerHTML=y;
valorX.style.color="red";
valorY.style.color="red"
}
function situacionOut(evento){
document.getElementById("valorX").innerHTML='';
document.getElementById("valorY").innerHTML='';
}
</script>
</head>
<body>
<div id="pantalla">
<h1 >Posicion x:<span id="valorX"></span></h1>
<h1 >Posicion y:<span id="valorY"></span></h1>
</div>
</body>
</html>Saludos.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script>
window.onload=function(){
var nombreOk=false;
var apellidoOk=false;
var edadOk=false;
var emailOk=false;
function validarDatos(){
if (nombreOk && apellidoOk && edadOk && emailOk){
alert("Ha introducido todos los datos correctamente");
return true;
}else{
alert("Hay errores");
return false;
}
}
var everyInputs=document.getElementsByTagName('input');
for (var i=0;i<(everyInputs.length);i++){
everyInputs[i].addEventListener('focus',estilo);
everyInputs[i].addEventListener('blur',estilo2);
var nodoname=everyInputs[i].name;
switch (nodoname){
case "nombre":
everyInputs[i].addEventListener('blur',validarNombre);
break;
case "apellido":
everyInputs[i].addEventListener('blur',validarApellido);
break;
case "edad":
everyInputs[i].addEventListener('blur',validarEdad);
break;
case "email":
everyInputs[i].addEventListener('blur',validarEmail);
break;
default :break;
}
}
function estilo(){
this.style.backgroundColor="yellow";
}
function estilo2(inputElement){
this.style.background='transparent';
this.nextSibling.src="http://images.all-free-download.com/images/graphiclarge/tick_ok_sign_4190.jpg";
}
function estiloRojo(inElement){
inElement.style.backgroundColor="red";
inElement.nextSibling.src="http://griponclimate.files.wordpress.com/2013/03/wrong.png";
}
function validarNombre(){
var nombre=document.getElementById("nombre");
var expresionRegular=/^\w{3,}$/;
if ((expresionRegular.test(nombre.value))==true){
nombreOk=true;
estilo2(nombre);
}
else {
nombreOk=false;
estiloRojo(nombre);
}
}
function validarApellido(){
var apellido=document.getElementById("apellido");
var expresionRegular=/^\w{3,}$/;
if ((expresionRegular.test(apellido.value))==true){
apellidoOk=true;
estilo2(apellido);
}
else {
apellidoOk=false;
estiloRojo(apellido);
}
}
function validarEdad(){
var edad=document.getElementById("edad");
if ((edad.value>10) && (edad.value<99)){
edadOk=true;
estilo2(edad);
}
else {
edadOk=false;
estiloRojo(edad);
}
}
function validarEmail(){
var valorEmail=document.getElementById("email");
var expresionRegular=/^([\w-\.]{3,}\@.+\..+)$/;
var email=convertirMinusculas(valorEmail.value);
email=comprobarAtEmail(email);
if ((expresionRegular.test(email))==true) {
emailOk=true;
estilo2(valorEmail);
}
else {
emailOk=false;
estiloRojo(valorEmail);
}
}
function convertirMinusculas(email){
return email.toLowerCase();
}
function comprobarAtEmail(email){
var expresion=/\sat\s/g;
return email.replace(expresion,'@');
}
function validarDatos(){
var msg='Los datos que debe rectificar son:';
if (nombreOk && apellidoOk && edadOk && emailOk){
alert ("Ha introducido todos los datos correctamente y su formulario va a ser enviado");
return true;
}else{
if (nombreOk===false){
msg = msg + 'nombre';
}
if (apellidoOk===false){
msg = msg + 'apellido';
}
if (edadOk===false){
msg = msg + 'edad';
}
if (emailOk===false){
msg = msg + 'email';
}
alert (msg);
return false;
}
}
}
</script>
<body>
<h1>La web para aprender programacion</h1>
<p>Esta cantidad de eventos puede resultar desconcertante por excesiva. No te preocupes por entender ahora el significado de cada uno de ellos. Simplemente ten unas nociones básicas que te permitan resolver los retos que como programador te puedan ir surgiendo.</p>
<p>Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.</p>
<img id="img1" src="http://i.imgur.com/tq5Bs.png" />
<form name="miniformualario" class="formulario" method="get" onsubmit="return validarDatos()">
<label >Escriba nombre</label>
<input type="text" id="nombre" name="nombre"/><img width="20" height="20"/><br/>
<label>apellidos</label>
<input type="text" id="apellido" name="apellido"/><img width="20" height="20"/><br/>
<label>edad</label>
<input type="text" id="edad" name="edad"/><img width="20" height="20"/><br/>
<label>Correo electronico</label>
<input type="text" id="email" name="email"/><img width="20" height="20"/><br/><br/>
<input type="submit" value="Enviar" />
<input type="reset" value="Reiniciar datos" />
</form>
<script>
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form method="get" name="formulario" onsubmit="validar()">
<label>Introduzca su nombre</label>
<input type="text" id="nombre" size="20"/><br/>
<label>Introduzca su apellido</label>
<input type="text" id="apellido" size="20"/><br/>
<label>Introduzca su email</label>
<input type="text" id="email" size="50"/><br/>
<input type="submit" value="submit" />
<input type="reset" value="Reiniciar datos" />
</form>
<script>
var contador=0;
function validar(){
validarNombre();
validarApellido();
validarEmail();
validarOk();
}
function validarNombre(){
var nombre=document.getElementById("nombre").value;
var expresionRegular=/^\w{3,}$/;
if (!(expresionRegular.test(nombre))){
alert ("Ha introducido los datos de nombre mal. Deberá indicar un nombre superior a tres letras");
}
else {
contador++;
}
}
function validarApellido(){
var apellido=document.getElementById("apellido").value;
var expresionRegular=/^\w{3,}$/;
if (!(expresionRegular.test(apellido))){
alert ("Ha introducido los datos de apellido mal. Deberá indicar un apellido superior a tres letras");
}
else {
contador++;
}
}
function validarEmail(){
var email=document.getElementById("email").value;
email=convertirMinusculas(email);
email=comprobarAtEmail(email);
if( !(/^([\w-\.]{3,}\@.+\..+)$/.test(email)) ) {
alert ("Le recordamos condiciones que debe cumplir su correo electronico:\n\t 1.Su nombre ha de tener almenos 3 caracteres(alfanumericos o el subrayado)\n\t 2.Debe contener la '@' ");
}
else {
contador++;
}
}
function validarOk(){
if (contador==3){
alert ("Introdujo todos los valores correctamente y su formulario será enviado");
}
}
function convertirMinusculas(email){
return email.toLowerCase();
}
function comprobarAtEmail(email){
var expresion=/\sat\s/g;
return email.replace(expresion,'@');
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick="mostrarObjeto()">Mostrar Objeto</button>
<script>
function persona(nombre,nacionalidad){
this.nombre = nombre || 'Desconociso' ;
this.nacionalidad = nacionalidad || 'Desconocido';
}
persona.prototype.mostrarNacionalidad=function(){
alert ('La nacionalidad de '+this.nombre+' es '+this.nacionalidad);
}
function medico(nombre,nacionalidad,centroDeTrabajo){
persona.call(this,nombre,nacionalidad);
this.centroDeTrabajo=centroDeTrabajo || 'Desconocido';
}
function medicoEspecialista(especialidad,centroDeTrabajo,nacionalidad,nombre){
medico.call(this,nombre,nacionalidad,centroDeTrabajo);
this.especialidad=especialidad || 'Desconocida';
}
medico.prototype=new persona();
medicoEspecialista.prototype=new medico();
function mostrarObjeto(){
var primerMedico=new medicoEspecialista('traumatologo','Hospital 9 de Octubre','española','Beltran');
var msg = ('El medico '+primerMedico.nombre+' con nacionalidad '+primerMedico.nacionalidad+' trabaja en '+primerMedico.centroDeTrabajo+' y tiene la especialidad de ' +primerMedico.especialidad);
primerMedico.mostrarNacionalidad();
alert(msg);
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick="crearObjetos()">Mostrar Objetos</button>
<script>
function Persona(nombre){
this.nombre = nombre || 'Desconociodo'
this.saludar = function (){
alert ('Soy '+this.nombre+' profesor ');
}
}
Persona.prototype.definicion="Una persona es una persona";
function Profesor(nombre,institucionAcademica){
Persona.call(this,nombre);
this.institucionAcademica = institucionAcademica || 'Desconocido';
}
function ProfesorInterino(nombre,institucionAcademica,mesesContratado){
Profesor.call(this,nombre,institucionAcademica);
this.mesesContratado = mesesContratado;
}
ProfesorInterino.tipoContrato="temporal";
function ProfesorTitular(nombre,institucionAcademica,anyosTrabajados){
Profesor.call(this,nombre,institucionAcademica);
this.anyosTrabajados=anyosTrabajados;
}
ProfesorTitular.tipoContrato="indefinido";
Profesor.prototype=new Persona();
ProfesorInterino.prototype = new Profesor();
ProfesorTitular.prototype = new Profesor();
function crearObjetos(){
var ProfesorTitular1=new ProfesorTitular('Juan','Universidad de Leon',8);
var msg1 = ('El profesor '+ProfesorTitular1.nombre+' ha trabajado durante '+ProfesorTitular1.anyosTrabajados+' anyos en '+ProfesorTitular1.institucionAcademica+' y tienen un contrato '+ProfesorTitular.tipoContrato);
var ProfesorInterino1=new ProfesorInterino('Pedro','Universidad Politecnica de Valencia',5);
var msg2 = ('El profesor '+ProfesorInterino1.nombre+' ha trabajado durante '+ProfesorInterino1.mesesContratado+' meses en '+ProfesorInterino1.institucionAcademica+' y tienen un contrato '+ProfesorInterino.tipoContrato);
alert(msg1);
alert(msg2);
ProfesorTitular1.saludar();
ProfesorInterino1.saludar();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick="mostrarObjeto()">Mostrar Objeto</button>
<script>
function persona(nombre,nacionalidad){
this.nombre = nombre || 'Desconociso' ;
this.nacionalidad = nacionalidad || 'Desconocido';
}
persona.prototype.mostrarNacionalidad=function(){
alert ('La nacionalidad de '+this.nombre+' es '+this.nacionalidad);
}
function medico(nombre,nacionalidad,centroDeTrabajo){
persona.call(this,nombre,nacionalidad);
this.centroDeTrabajo=centroDeTrabajo || 'Desconocido';
}
function medicoEspecialista(especialidad,centroDeTrabajo,nacionalidad,nombre){
medico.call(this,nombre,nacionalidad,centroDeTrabajo);
this.especialidad=especialidad || 'Desconocida';
}
medico.prototype=new persona;
medicoEspecialista.prototype=new medico;
function mostrarObjeto(){
var primerMedico=new medicoEspecialista('traumatologo','Hospital 9 de Octubre','española','Beltran');
var msg = ('El medico '+primerMedico.nombre+' con nacionalidad '+primerMedico.nacionalidad+' trabaja en '+primerMedico.centroDeTrabajo+' y tiene la especialidad de ' +primerMedico.especialidad);
primerMedico.mostrarNacionalidad();
alert(msg);
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick="crearObjetos()">Mostrar Objetos</button>
<script>
function Persona(nombre){
this.nombre = nombre || 'Desconociodo'
this.saludar = function (){
alert ('Soy '+this.nombre+' profesor '+this.tipo);
}
}
Persona.prototype.definicion="Una persona es una persona";
function Profesor(nombre,institucionAcademica,tipo){
Persona.call(this,nombre);
this.institucionAcademica = institucionAcademica || 'Desconocido';
this.tipo = tipo || 'Desconocido';
}
function ProfesorInterino(nombre,institucionAcademica,tipo,mesesContratado){
Profesor.call(this,nombre,institucionAcademica,tipo);
this.mesesContratado = mesesContratado;
}
function ProfesorTitular(nombre,institucionAcademica,tipo,anyosTrabajados){
Profesor.call(this,nombre,institucionAcademica,tipo);
this.anyosTrabajados=anyosTrabajados;
}
Profesor.prototype=new Persona();
ProfesorInterino.prototype = new Profesor();
ProfesorTitular.prototype = new Profesor();
function crearObjetos(){
var ProfesorTitular1=new ProfesorTitular('Juan','Universidad de Leon','titular',8);
var msg1 = ('El profesor '+ProfesorTitular1.tipo+' '+ProfesorTitular1.nombre+' ha trabajado durante '+ProfesorTitular1.anyosTrabajados+' anyos en '+ProfesorTitular1.institucionAcademica);
var ProfesorInterino1=new ProfesorInterino('Pedro','Universidad Politecnica de Valencia','interino',5);
var msg2 = ('El profesor '+ProfesorInterino1.tipo+' '+ProfesorInterino1.nombre+' ha trabajado durante '+ProfesorInterino1.mesesContratado+' meses en '+ProfesorInterino1.institucionAcademica);
alert(msg1);
alert(msg2);
ProfesorTitular1.saludar();
ProfesorInterino1.saludar();
}
</script>
</body>
</html>
function construyendoProto(){
this.definicionSegunDiccionario="Un cometa es muy chulo";
this.obtenerRadio=function(){
return(this.diametro)/2;
}
this.obtenerTemperaturaFarenheit=function(){
return (1.8*this.temperatura)+32;
}
}
cometaDef.prototype=new construyendoProto();cometaDef.definicionSegunDiccionario="Un cometa es muy chulo";
cometaDef.obtenerRadio=function(){
return(this.diametro)/2;
}
cometaDef.obtenerTemperaturaFarenheit=function(){
return (1.8*this.temperatura)+32;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick="mostrar()">Cometas</button>
<script>
// Definicion del objeto
function cometaDef(diametro,temperatura,nombre){
this.diametro=diametro;
this.temperatura=temperatura;
this.nombre=nombre;
}
//Definicion Metodo Clase del objeto
function construyendoProto(){
this.definicionSegunDiccionario="Un cometa es muy chulo";
this.obtenerRadio=function(){
return(this.diametro)/2;
}
this.obtenerTemperaturaFarenheit=function(){
return (1.8*this.temperatura)+32;
}
}
cometaDef.prototype=new construyendoProto();
function mostrar(){
var cometa=new Array();
cometa[0]=new cometaDef(13,12,"arena de mal");
cometa[1]=new cometaDef(120,12,"bonito");
cometa[2]=new cometaDef(123,12,"rueda amarilla");
var msg='';
for(i in cometa){
msg = 'Definicion de cometa ' + cometa[i].definicionSegunDiccionario + '\n';
msg = msg + 'El cometa ' + cometa[i].nombre + ' tiene de diametro ' + cometa[i].diametro + ' y su radio es de '+cometa[i].obtenerRadio()+ "\n";
msg = msg + 'Además tiene una temperatura de ' +cometa[i].obtenerTemperaturaFarenheit()+ ' de grados Farenheit, y una temperatura en grados centigrados de '+cometa[i].temperatura;
alert(msg);
}
}
</script>
</body>
</html>function cometa1(){
var diametro=prompt("Cual va a ser su diametro:");
var temperatura=prompt("Que temperatura tiene:");
var nombre=prompt("Que nombre le vas a poner:");
var cometa[0]=new cometaDef(diametro,temperatura,nombre);
}Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.
Abraham Lincoln (1808-1865) Presidente estadounidense.
aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación
RSS -
WAP2