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.


Mensajes - paramonso

Páginas: 1 2 3 4 5 6 [7] 8 9 10 11 12 13
121
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Date JavaScript. Diferencias entre gmt y utc ó local getMonth Ejercicio CU01162E
« en: 12 de Febrero 2018, 12:48 »
Hola. Dejo mi solución al ejercicio CU01162E del tutorial pdf de programación JavaScript:  Date JavaScript. (now, parse, utc). Diferencias entre gmt y utc ó local. getMonth, getDate, getDay.

EJERCICIO

Citar
Crea un documento HTML que conste de un título h1 con el texto <<Calendario>>, y un div central de 400 por 400 px con el borde marcado y márgenes de 100px en todas direcciones. Dentro del div central crea una tabla de 7 columnas por 7 filas (total 49 celdas) con ancho de tabla 300 píxeles y tamaño de fuente en la tabla 24 píxeles. La primera columna corresponderá a lunes y la última a domingo. Usa un método JavaScript para determinar el mes actual. Mediante código JavaScript, haz que aparezca dinámicamente como texto encima de la tabla el mes y año de que se trate (por ejemplo <<MAYO DE 2050>>). Haz que cada celda de la primera fila se rellene indicando el día de la semana (Lu – Ma – Mi – Ju – Vi –Sa –Do). Haz que la tabla se rellene dinámicamente (al cargar la página) con:

a) Espacio en blanco si no corresponde ningún día.

b) El número del día del mes según corresponda (28, 30 ó 31 días según de qué mes se trate).

Código: [Seleccionar]
<!DOCTYPE html>

<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<script type="text/javascript">

window.onload = function()
{
entrarDatos();
}
function entrarDatos()
{
fechaActual=new Date();
cogerMesAñoDia();
generaTabla();
atributosTabla();
return fechaActual;

}
function cogerMesAñoDia()
{

meses=["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Septiembre","Octubre","Noviembre","Diciembre"];
diaSem=["Do","Lu","Ma","Mi","Ju","Vi","Sa","Do"]
mes=fechaActual.getMonth();
año=fechaActual.getFullYear();
   
   var  PrimerDiaMes=new Date(año,mes,1);     // coger la fecha del primer dia del mes
    primerDia = PrimerDiaMes.getDate();   // numero del primer dia del mes
primerDiaMesSem=PrimerDiaMes.getDay();// dia de la semana primer dia del mes
   var  UltimoDiaMes = new Date(año,mes+1,0); //coger la fecha del ultimo dia del mes
    ultimoDia=UltimoDiaMes.getDate();    // numero del ultimo dia del mes
        diaActual=fechaActual.getDate()
//Dar estilos css al calendario   
calendario.style.fontSize="35px"
calendario.style.color="Red";
calendario.style.textShadow="2px 2px 3px black";
calendario.innerHTML="<strong>"+meses[mes]+"<br/>"+año+"</strong>";
 
}
function atributosTabla()
{
  tabla.style.position='absolute';
  tabla.style.width="300px";
  tabla.style.fontSize="24px";
  tabla.style.color="black";
  tabla.style.textAlign="center";
  tabla.style.left='15% ';
  tabla.style.top='25%';
 
}

function generaTabla() {
  // Obtener la referencia del elemento calendario
   var Almanaque= document.getElementById("calendario");

  // Crea un elemento <table> y un elemento <tbHijo>
    tabla = document.createElement("table");
    tblHijo = document.createElement("tbHijo");
  // Crear las celdas
  var hoy=primerDia // Fecha primer dia del mes
  var semana=1;
  for (var i = 0; i < 7; i++)
  {
    // Crear las filas de la tabla
    var filas = document.createElement("tr");

for (var j = 0; j < 7; j++)
{
  var celda = document.createElement("td");
  celda.style.width="48px";
  celda.style.height="28px";
 
  //Poner el nombre de los dias de la semana en la primera fila
  if(i==0)
  {
  var textCelda = document.createTextNode(diaSem[j+1]);
  celda.appendChild(textCelda);
  }
  //Poner el numero del dia del mes desde la segunda fila hasta el final.Si filas es mayor que cero
  if(i>0) 
  {
//Si es domingo fondo rojo texto blanco
if (j==6 && hoy<=ultimoDia)
{
celda.style.backgroundColor="red";
celda.style.color="white";
}
//Hasta que semana no sea igual a primerDiaMesSem no entra en el bucle
if (semana>=primerDiaMesSem)
{
   if (hoy<=ultimoDia) // Mientras hoy sea menor o igual que el ultimo dia del mes
   {
   var textFila = document.createTextNode(hoy);
   // Si es hoy fondo azul texto amarillo
if (hoy==diaActual)
{
celda.style.backgroundColor="blue";
celda.style.color="yellow";
}

   hoy=hoy+1; // Sumar uno al dia para incrementar el calendario
   }
   else
   {
   // Si el dia del mes no coincide con el dia de la semana o llegamos a final de los dias
   //del mes se llenan las celdas con espacios vacios
   var textFila = document.createTextNode("");
       }
   celda.appendChild(textFila);
}
semana=semana+1;
  }
  filas.appendChild(celda);
}
 
    // agrega la filas al final de la tabla (al final del elemento tblHijo)
    tblHijo.appendChild(filas);
  }
  //borde de la tabla
  tabla.setAttribute("border", "2");
   
   // posiciona el <tbHijo> debajo del elemento <table>
  tabla.appendChild(tblHijo);
  Almanaque.appendChild(tabla);
   
 }
</script>



<style type="text/css">
body{background-color:green;}
 
  h1,h2,h3{
text-align:center;
margin:0;
padding:0;
color:white;
width:300;
height:200;
}

#calendario {
background-color:yellow;
border:groove red 8px;
border-radius:25px 25px;
color:black;
box-shadow: 12px 12px 25px black;
font-size:19px;
padding:15px;
overflow:hidden;
float:left;
margin:100px;
position:absolute;
left:25%;
width:400px;
height:400px;
text-align:center;
}


</style>
</head>

<body>

<h1>Calendario</h1>

<div id="calendario"></div>

</body>

</html>

Adios gracias.
 ;)

122
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Eventos teclado JavaScript fromCharCode keyCode which Ejercicio CU01161E
« en: 10 de Febrero 2018, 10:10 »
Hola. Dejo el  ejercicio CU01161E capturar eventos teclado JavaScript fromCharCode keyCode which del curso gratuito de JavaScript de aprenderaprogramar.
 
EJERCICIO 1
 
Citar
Crea un documento HTML que conste de un título h1 con el texto <<Pulsa una tecla>>, y un div central de 400 por 400 px con el borde marcado y márgenes de 100px en todas direcciones. Utiliza el evento keypress para determinar el carácter que el usuario ha escrito utilizando el teclado y haz que se muestre dentro del div con un tamaño de fuente de 250px.

Código: [Seleccionar]
<!DOCTYPE html>

<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">

<script type="text/javascript">

window.onload = function() {
  document.onkeyup = muestraInformacion;
  document.onkeypress = muestraInformacion;
  document.onkeydown = muestraInformacion;
  // Estilos CSS al elemento div (pizarra)
  Pizarra = document.getElementById('pizarra');
  Pizarra.style.width='400px';
  Pizarra.style.height='400px';
  Pizarra.style.margin='100px';
  Pizarra.style.fontSize='250px';
  Pizarra.style.border='groove red 8px';
  Pizarra.style.borderRadius='25px 25px';
   
 
  }
 
function muestraInformacion(elEvento)
{
  var evento = window.event || elEvento;
  var m=evento.type
if (m=="keydown"){borrar()}
var mensaje =String.fromCharCode(evento.charCode);
pizarra.innerHTML += mensaje
}
 
function borrar()
{
Pizarra.innerHTML = '';
var msg=''
Pizarra.innerHTML = msg;
}
</script>

<style type="text/css">
body{background-color:green;}
h1 {
text-align:center;
margin:0;
padding:0;
color:white;
}
#pizarra {
text-align:center;
background-color:black;
    color:white;
padding:15px;
float:left;
}
 
</style>
</head>

 <h1>Pulse una tecla</h1>
 
<div id="pizarra"></div>


</body></html>


EJERCICIO 2
Citar
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.

Código: [Seleccionar]
<!DOCTYPE html>

<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">

<script type="text/javascript">

window.onload = function()
{
// keyCode Devuelve el código de tecla pulsada para eventos keydown y keyup (Tabla pag 3)
    document.onkeydown = moverDiv
    stilos(); // Dar estilo css a la pagina
 }
 
 
function moverDiv(evento)
{
  // keyCode Devuelve el código de tecla pulsada para eventos keydown y keyup (Tabla pag 3)
  var codTecla= evento.keyCode;      // Capturar codigo de la tecla
  var posAcLeft = Pizarra.offsetLeft; // Coger posicion actual izquierda
  var posAcTop = Pizarra.offsetTop; // Coger posicion actual superior
   
  if (codTecla=="37"){Pizarra.style.left=posAcLeft-220+'px' ; } //Izquierda
  else if (codTecla=="38"){Pizarra.style.top=posAcTop-220+'px' ; } //Arriba
  else if (codTecla=="39"){Pizarra.style.left=posAcLeft-180+'px' ; } //Derecha
  else if (codTecla=="40"){Pizarra.style.top=posAcTop-180+'px' ; } //Abajo
  else {alert("Para mover el cuadrado\npulsa las flechas del cursor") }
}
 
 function stilos()
 {
 // Estilos CSS elemento div (pizarra)
  Pizarra = document.getElementById('pizarra');
  Pizarra.style.position='absolute';
  Pizarra.style.width='300px';
  Pizarra.style.height='300px';
  Pizarra.style.margin='200px';
  Pizarra.style.backgroundColor='yellow';
  Pizarra.style.border='groove black 1px';
  Pizarra.style.borderRadius='25px 25px';
  Pizarra.style.left='25%';
  Pizarra.style.textAlign="center";
 }
</script>

<style type="text/css">
body{background-color:green;}
h1 {
text-align:center;
margin:0;
padding:0;

}
 
 
</style>
</head>
<body >
 <h1>Pulse una flecha</h1>
 
<div id="pizarra"></div>
 


</body></html>


Ahí queda eso. Hasta luego. Un saludo
 ;)

123
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / objeto event javascript lista propiedades onmousemove coordenadas CU01160E
« en: 07 de Febrero 2018, 19:16 »
Hola. Dejo el ejercicio del tema CU01160E objeto event javascript lista propiedades type button target del curso básico de programación web de aprenderaprogramar.

Citar
EJERCICIO
Crea un documento HTML que conste de un título h1 con el texto <<Posición x:  - Posición y>>, y un div con ancho 500 px y alto 400 px. Utiliza el evento onmousemove para mostrar dinámicamente en el título h1 las coordenadas del puntero del ratón a medida que se desplaza por el elemento div.

Por ejemplo, cuando el usuario coloca el ratón sobre el div se deberá mostrar:  Posición x:  244 Posición y: 188, al mover el ratón las coordenadas indicadas cambiarán a otro valor, por ejemplo Posición x:  322 Posición y: 228, y así sucesivamente.

Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">

<script type="text/javascript">
window.onload = function()
{
document.getElementById('cabecera').onmousemove=mouseXY;


}
function mouseXY(e)
{
//Les resto 430 y 120 para que nos de las coordenadas de la ventana
//Sin restarles 430 y 120 nos daria las cordenadas de la pagina apartir de x=430 e y=120
x = e.pageX-430;
y = e.pageY-120;
document.getElementsByTagName('h1')[0].innerHTML = "Posición x : "+x +" - Posición y : "+y  ;

//alert(x+"-"+y)
}

</script>

</head>
<style type="text/css">
body{
background-color:red;
text-align:center;
}
div{
background:yellow;
width:500px;
height:400px;
border:solid green;
margin:1% auto;
text-align:center;}
h2{
text-align:center;
margin:35% auto;
}

</style>
<body>

<h3>Ejemplo JavaScript</h3>
<h1> Posición x:  - Posición y:</h1>
<div id="cabecera"><h2>aprenderaprogramar.com</h2></div>


</body>

</html>


Hasta pronto.
Saludos.
 ;)

124
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Lista de eventos JavaScript. (on) click, dblclick, mouseover formulario CU01159E
« en: 06 de Febrero 2018, 19:49 »
Hola. Dejo el Ejercicio CU01159E Lista de eventos JavaScript. (on) click, dblclick, mouseover, mouseout, change, submit, keypress del tutorial gratuito de programación JavaScript de aprenderaprogramar.

Ejercicio 1.

Citar
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.

Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.

Código: [Seleccionar]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>sin título</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.32" />
</head>
<script>
window.onload = function ()
{
msg="";
var elemento=document.querySelectorAll('img')
for (var i=0;i<elemento.length;i++)
{
elemento[i].addEventListener("mouseover", ratonDencima)
elemento[i].addEventListener("mouseout", ratonFuera)
}


function ratonDencima()
{
this.setAttribute('src','https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRmmPTWTF84dFlHa216Clud-J3KHknwjmYGahj4MKwQC6W6o7oCRg');   
}
function ratonFuera()
{
         this.setAttribute('src',"http://buhoprogramador.com/static/images/logo.svg");
}

}
</script>
<style>
  body *
 {
    margin: 10px;
    text-align:center;
  }
 body{background-color: yellow; }
 img
 {
display:block;
margin:auto;
width:200px;
height:200px;
 
 }
 
 
</style>
<body>
<h1>La web para aprender programación<br></h1>
 
 
    <p>Ejemplo de mouseover y mouseout</p>
    <p>utilizando setAttribute</p>
    <img src="http://buhoprogramador.com/static/images/logo.svg"  >
   
   
</body>

</html>

Ejercicio 2
Citar
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).

Código: [Seleccionar]
<html>
<head>
<title>Ejemplo curso aprenderaprogramar.com</title><meta charset="utf-8">

<script type="text/javascript">

/* ************************************************************************ */
/* *******************            EJERCICIO         *********************** */
/* ************************************************************************ */
function Comenzar()
{

  idNombre=document.getElementById("nombre");
  idApellidos=document.getElementById("apellidos");
  idEdad=document.getElementById("edad");
  idEmail=document.getElementById("email");

  idNombre.addEventListener("focus", colorOriginal);
  idApellidos.addEventListener("focus", colorOriginal);
  idEdad.addEventListener("focus", colorOriginal);
  idEmail.addEventListener("focus", colorOriginal);
 
}

function colorOriginal(){this.style.background='white'; }
 

function validacionConExpReg()
{
msg="";


// a) Validar Nombre
var regExp=/\w{1}/
nomTrue=regExp.test(idNombre.value);
apeTrue=regExp.test(idApellidos.value);
if (!nomTrue || !apeTrue)
{
if(!nomTrue){idNombre.style.background="red";}
if (!apeTrue){idApellidos.style.background="red";}
alert("El nombre  o el apellido no puede estar vacio");


}
// Validar que edad ni cero ni menor que cero
if(idEdad.value<="0"){
edadTrue=false;
alert("La edad no puede ser cero o menor que cero")
idEdad.style.background="red";
}
else {
edadTrue=true;
}

//c) Validar at = @
regExp=/\w+\sat\s\w+/;
atTrue=regExp.test(idEmail.value);
if (atTrue)
{
var atEmilio=idEmail.value;
idEmail.value=atEmilio.replace(/\sat\s/g,'@');
}
else{idEmail.style.background="red";}


//b) Validar @ , . y mas de dos caracteres despues de punto
regExp=/\@{1}\w+\.{1}\w{2}/;
arroTrue=regExp.test(idEmail.value);
if (!arroTrue)
{
alert('Falta el signo de la arroba @ o el punto .\n'+
'No se admite menos de una letra despues de arroba\n'+
'No se admite menos de dos letras despues de punto');
idEmail.style.background="red";

}
//Convertir a minusculas
if (arroTrue)
{
Emilio=idEmail.value;
idEmail.value=Emilio.toLowerCase();

}


/* ************************************************************************ */
/* *******************      FIN   EJERCICIO         *********************** */
/* ************************************************************************ */
//Vaciar datos y no enviar formulario
if (!arroTrue || !nomTrue || !edadTrue)
{
alert ("!!!!! LOS DATOS INTRODUCIDOS NO SON CORRECTOS ¡¡¡\n !!!! Y NO SE ENVIARAN ¡¡¡¡¡¡");
return false;
}
else
{
//Presentar datos y enviar formulario
var msg="Los datos introducidos son:\n";

msg=msg+"Nombre    :"+idNombre.value+"\n";
msg=msg+"Apellidos :"+idApellidos.value+"\n";
msg=msg+"Edad      :"+idEdad.value+"\n";
msg=msg+"Email     :"+idEmail.value;
msg=msg+"\n \n OK\n\nLOS DATOS VAN A SER ENVIADOS ¡¡¡¡"
alert(msg);
}
 }

</script>




<style type="text/css">
body{
background-color:green;
text-align:center;
}
#Contenedor {
background:yellow;
width:300px;
height:125px;
border:solid,red;
margin:12% auto;
text-align:center;

}
  p{
  color:black;
  display:block;
  margin:0px;
  padding:5px;
}


</style>
</head>
<body onload="Comenzar()">
<h1>La web para aprender programación</h1>
<h2>Ejercicio CU01159E-2</h2>
<p>Ejemplo de listas de eventos Javascript</p>
<p>(on) click, dblclick, mouseover, mouseout, change, submit, keypress.</p>

<div id="Contenedor">
<form name ="formularioContacto" class="form" method="get" onsubmit="return validacionConExpReg()">
<p><strong>Nombre : </strong><input id="nombre" type="text" name="nombre"> </p>
<p><strong>Apellidos:</strong> <input id="apellidos" type="text" name="apellidos"></p>
<p><strong>Edad:</strong> <input id="edad" type="text" name="edad"></p>
<p><strong>Email :</strong> <input id="email" type="text" name="email"></p>
<p><input type="submit" value="Enviar" ><input type="reset" value="Cancelar"></p>
</form>
</div>
&copy;parasabermas@hayquestudiar.com
</body
</html>
Espero este todo bien.
Gracias.
Un saludo.
 ;)


125
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:JavaScript for in recorrer elementos de colección innerHTML ejemplo CU01135E
« en: 03 de Febrero 2018, 19:37 »
Hola Ogramar.

Gracias por corregirme el error al poner el numero de ejercicio.

En este ejercicio.
Citar
EJERCICIO

1) Genera un script que pida cinco números al usuario usando un bucle for normal (usa prompt para pedir los datos y conviértelos a valor numérico posteriormente). Almacena los números introducidos por el usuario en un array. A continuación usando un for in que recorra el array, muestra un mensaje informando del resultado de multiplicar cada uno de los números por 3. Ejemplo:

Se pedirán al usuario cinco números, supongamos que introduce 1, 3, 9, 10 y 7

A continuación se mostrará el mensaje:

Multiplicamos por 3 los números introducidos: 1*3 = 3, 3*3 = 9, 9*3 = 27, 10*3 = 30 y 7*3 =21.

No veo que ponga por ningún lado la forma de presentar los datos por pantalla, ni he leido en ningún otro tema que no se puedan utilizar funciones o código que pertenezca a algo más avanzado.

Lo hice así por practicar y si ves algunos ejercicios más de los que tengo en el hilo, estoy con el innerHTML desde muy atrás del curso.

Mas concretamente desde el tema tipos de nodos del DOM al intentar sacar todos los nodos por pantalla no los podía ver y por eso comencé a utilizar el innerHTML.

Si lo empece a utilizar es porque en los navegadores que utilizo yo (chromium, opera y firefox ) la función alert() se queda muy corta a la hora de presentar los datos por pantalla y cuando es muy largo el scroll se corta y aparece al final una línea de puntos ....... como que aún quedan datos por sacar (y aun quedan ).

No sé en qué tema del curso se ataca a innerHTML,  yo me tuve que buscar la vida en la red ( Como aconsejan en otros cursos en esta misma web ) para encontrar algo parecido a un print en consola y poder ver todos los datos en pantalla.

P.D: Aunque no se si te refieres al título del ejercicio en el que puse innerHTML, lo puse por error .
Por lo demás el ejercicio me parece que cumple la función que se pide, se presenten los datos en pantalla como se presenten ya que no se trata de evaluar el innerHTML.



Gracias ;)

126
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / addEventListener JavaScript. Remove. AttachEvent Ejercicio CU01158E#
« en: 03 de Febrero 2018, 18:27 »
Hola. Dejo la entrega del  Ejercicio CU01158E del taller de programación gratuito con JavaScript de aprenderaprogramar

Citar
EJERCICIO

Crea un documento HTML donde dentro del elemento body tengamos un div con id “principal”, dentro de principal otro div denominado “secundario”, y dentro de secundario otro div con id “terciario”. Dentro de terciario debe existir un párrafo con el texto: Ejemplo de bubbling (burbujeo). Añade eventListeners con el evento click para los párrafos y todos los elementos div, document y window, y una función de respuesta común para todos ellos que emita el mensaje de alerta <<Soy un nodo tipo NombreDelNodo y estoy burbujeando>>.


Código: [Seleccionar]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>sin título</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.32" />
</head>
<script>
window.onload = function ()
{
msg="";
var elemento=document.querySelectorAll('p,div')
for (var i=0;i<elemento.length;i++)
{

elemento[i].addEventListener("click", nodoDOOM)

}

document.addEventListener("click", nodoDOOM)
window.addEventListener("click", nodoDOOM)
 
function nodoDOOM()
{ //**********************************************************************************
//Codigo añadido para comprobar el burbujeo y saber en que nodo nos encontramos
var nombre=this.nodeName;
if( nombre=='P'||nombre=='DIV'){msg=this.firstChild.nodeValue;}
//*********************************************************************************
//*********************************************************************************
    alert("Soy un nodo tipo "+ this.nodeName +" "+msg+" y estoy burbujeando" );
msg="";
}

}






</script>
<style>
  body *
 {
    margin: 10px;
    border: 5px solid white;
    text-align:center;
  }
 body{background-color: yellow; }
 #principal{
    position: absolute;
top:50%;
left:50%;
width:300px;
margin-left:-200px;
margin-top:-150px;
padding:5px;
background-color:red;
}
 #secundario{width:250px;background-color:blue;}
 #terciario{width:200px;background-color:green;}
 p{width:150px;background-color:yellow;}
 h1,h2{border: none;}
</style>
<body>
<h1>aprenderaprogramar.com<br>Ejercicio CU01158E<br></h1>
<h2>hacer click sobre cualquier cuadro</h2>
 
<div id="principal">div principal
  <div id="secundario" >div secundario
    <div id="terciario" >div terciario
    <p>Ejemplo de bubbling (burbujeo)</p>
    </div>
  </div>
 
</body>

</html>

127
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Eventos JavaScript. Tipos. Modelos. Usuario-sistema onmouseover CU01157E
« en: 30 de Enero 2018, 18:36 »
Hola. Dejo la entrega del Ejercicio CU01157E Eventos JavaScript. Tipos. Modelos. Usuario-sistema. Manejador (event handler), del tutorial gratuito de programación JavaScript de aprenderaprogramar.

Código: [Seleccionar]
<!DOCTYPE html>
<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 elementsH1H3 = document.querySelectorAll('h1,h3');
var elementsP = document.querySelectorAll('p');

for (var i=0;i<elementsH1H3.length;i++)
{
elementsH1H3[i].onmouseover = function()
{
this.style.color = "orange";
}
elementsH1H3[i].onmouseout = function()
{
this.style.color = "maroon";
}
}

for (var i=0;i<elementsP.length;i++)
{

elementsP[i].onmouseover = function()
{

this.style.width='450px';
this.style.backgroundColor = "yellow";
}
elementsP[i].onmouseout = function()
{
this.style.backgroundColor = "transparent";
}
}

}

</script>



<style type="text/css">
 
</style>
</head>

<body>
<p>
<a href="principal.html" title="Página principal" >Ir a la pagina principal</a>
</p>
<h1>Novedades</h1>
<p>Aquí presentamos las novedades del sitio.</p>
<h3>Lanzamos el producto X-FASHION</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
<p>
<img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" />
</p>
<h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto T-MOTION</p>
<p>
<img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" />
</p>

</body>

</html>

Hasta el prosimo.
 :)

128
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:JavaScript cambiar apariencia de una web con innerHTML y editar estilo CU01138E
« en: 30 de Enero 2018, 09:48 »
Hola Ogramar.

Estoy de acuerdo en lo de id.
Tanto utilizarlo se me fue el santo al cielo de que cada id debe de ser único para cada elemento y no repetirse.
Tendría que haber utilizado class.
Cita de: Ogramar en 29 de Enero 2018, 18:22
Aunque aparentemente funcione, este código no debe considerarse bueno porque una línea genera error, en concreto <div id="uno" onclick="this.">?</div>


He estado repasando el código que me dices que produce un error y no lo encuentro.
Podrías explicarme donde esta el error y lo corrijo.

Gracias. ;)

129
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:JavaScript transformar switch en if y ejemplo función eval mover imagen CU01133E
« en: 27 de Enero 2018, 11:39 »
Hola Ogramar.

Tienes razón en lo del código.
Tenia que haber puesto en primer lugar la evaluación de la tecla "C" para que no entrara en el primer if.

Código: [Seleccionar]
if (tecla=="C")
{
nodoTextoPantalla.nodeValue = ' ';
    }
if (tecla=='=')
{
var resultado = eval(nodoTextoPantalla.nodeValue);
nodoTextoPantalla.nodeValue = resultado;
}
else
{
nodoTextoPantalla.nodeValue = nodoTextoPantalla.nodeValue + tecla;
}


Fue un despiste de las prisas.
Por lo demás los codigos son casi idénticos.

En el ejercicio 2 y en el ejemplo que me pones lo veo algo corto a la hora de ver el funcionamiento de ir adelante o atras.
Ya que por mucho que pulses en los botones no se ve si avanza, retrocede o ya no puede avanzar o retroceder.

Si me dices que con la solución de Cabonata era suficiente par ver el funcionamiento estoy totalmente de acuerdo con tu corrección.

Yo lo hice asi por practicar un poco más y que se viera el efecto de ir hacia delante, hacia atras y no se podia avanzar o retroceder.


Gracias por corregirme.
 ;) ;D


130
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript redondear número a dos decimales función toFixed y expresion CU01156E
« en: 26 de Enero 2018, 16:08 »
Hola, dejo la entrega del Ejercicio CU01156E del tutorial pdf de programación web con JavaScript.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">

<script type="text/javascript">
 
function prueba()
{
msg='';
Millones(); // Llamada a funcion Numero mayor de 10.000.000
Decimales();// Llamada a funcion Numero con cuatro decimales redondeado a dos
FraseNumero(); // Llamada funcion Numero con Frase

   document.all.pizarra.innerHTML=msg;
       
     }

function Millones()
{
var numGran=prompt("Introduzca un numero mayor de 10.000.000 :");
miExpReg=/^\d{9}/;
while (numGran<=10000000 || miExpReg.test(numGran)==false)
{
alert ("El numero introducido es menor o igual que 10.000.000")
numGran=prompt("Introduzca un numero mayor de 10.000.000 :");
}
msg=msg+"el numero introducido es : "+numGran+"<br/>";
var Numero=parseInt(numGran);
numGran=Numero.toPrecision(3);
msg=msg+"el numero con tres dígitos significativos es : "+numGran+"<br/><br/>";

}

function Decimales()
{
var numDeci=prompt("Introduzca un numero con 4 decimales. Ej : 12.1234")
miExpReg=/\d+\.\d{4}/;
while (!miExpReg.test(numDeci))
{
alert ("El numero introducido no contiene 4 decimales")
numDeci=prompt("Introduzca un numero con 4 decimales. Ej : 12.1234")

}
msg=msg+"El numero introducido es :"+numDeci+"<br/>";
var numDeci=parseFloat(numDeci);
msg=msg+"El numero redondeado a dos decimales es:"+numDeci.toFixed(2)+"<br/><br/>";

}

function FraseNumero()
{
var textString=prompt("Introduzca una frase que comience por un número\n que puede ser entero o decimal.\nEjem: 123.321Pepe")
miExpReg=/^\d+\.\d+|^\d+/
while(!miExpReg.test(textString))
{
alert ("El numero introducido no comienza por un numero")
textString=prompt("Introduzca una frase que comience por un número\n que puede ser entero o decimal.\nEjem: 123.321Pepe")
}
msg=msg+"La frase introducida es :"+textString+"<br/>";
msg=msg+"La frase convertida es:"+textString.match(/^\d+\.\d+|^\d+/)+"<br/><br/>";

}

// **************************************
// ******* FIN DEL EJERCICIO **************
// *************************************

</script>

<style type="text/css">
body{background-color:green;}
h1,h2,h3
{
text-align:center;
margin:0;
padding:0;
color:white;

}

.boton
{
border:outset white  2px; 
width:200px;
border-radius:25px 25px;
box-shadow:3px 3px 2px 2px #AFF6AF;
text-align:center;
    background-color:#90EE90;
color:black;
font-size:19px;
margin-top :2px;
margin-left:5px;
margin-bottom:5px;

}
.boton, #externa{margin-left:150px;}


.boton:hover {
border:inset 2px green;
box-shadow:3px 3px 2px 2px  #0BF50B ;
    }
#pizarra {

background-color:black;
border:groove red 8px;
border-radius:25px 25px;


color:white;
font-size:19px;
padding:15px;
overflow:hidden;
float:left;
margin-left:10px;
margin-top:10px;
}
#Pizarras{float:left;}
</style>
</head>
<body>

<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplos JavaScript</h3></div>
<div id="Pizarras">
<div class="boton" onclick="prueba()" >Comprobar</div>
<div id="pizarra"></div>

</body>
</html>




Esperando esté todo correcto, hasta el próximo
 ;)

131
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript cómo hacer comprobaciones en formulario impedir su envío CU01155E#
« en: 18 de Enero 2018, 19:26 »
Hola. Dejo la entrega del ejercicio CU01155E del manual de programación pdf JavaScript desde cero.

Código: [Seleccionar]
<html>
<head>
<title>Ejemplo curso aprenderaprogramar.com</title><meta charset="utf-8">

<script type="text/javascript">

/* ************************************************************************ */
/* *******************            EJERCICIO         *********************** */
/* ************************************************************************ */
function validacionConExpReg()
{
msg="";
var idNombre=document.getElementById("nombre")
var idApellidos=document.getElementById("apellidos")
var idEmail=document.getElementById("email")
// a) Validar Nombre
var regExp=/\w{3}/
nomTrue=regExp.test(idNombre.value);
if (!nomTrue)
{
alert("El nombre no cumple tener al menos tres letras");
}
//c) Validar at = @
regExp=/\w+\sat\s\w+/;
atTrue=regExp.test(idEmail.value);
if (atTrue)
{
var atEmilio=idEmail.value;
idEmail.value=atEmilio.replace(/\sat\s/g,'@');
}

//b) Validar @ y .
regExp=/\@{1}.{1}/;
arroTrue=regExp.test(idEmail.value);
if (!arroTrue){alert('Falta el signo de la arroba @ o el punto .');};
if (arroTrue)
{
Emilio=idEmail.value;
idEmail.value=Emilio.toLowerCase();

}

/* ************************************************************************ */
/* *******************      FIN   EJERCICIO         *********************** */
/* ************************************************************************ */
//Vaciar datos y no enviar formulario
if (!arroTrue || !nomTrue)
{
idNombre.value="";
idApellidos.value="";
idEmail.value="";
msg="!!!!!!   EL FORMULARIO NO SE ENVIARA  ¡¡¡\nIntroduzca de nuevo los datos";
alert(msg);
return false;
}
else
{
//Presentar datos y enviar formulario
var msg="Los datos introducidos son:\n";

msg=msg+"Nombre    :"+idNombre.value+"\n";
msg=msg+"Apellidos :"+idApellidos.value+"\n"
msg=msg+"Email     :"+idEmail.value;
alert(msg);
}
}

</script>




<style type="text/css">
body{
background-color:green;
text-align:center;
}
#Contenedor {
background:yellow;
width:300px;
height:125px;
border:solid,red;
margin:12% auto;
text-align:center;

}
  p{
  color:black;
  display:block;
  margin:0px;
  padding:5px;
}


</style>
</head>
<body>
<h1>Aprenderaprogamar.com</h1>
<h2>Ejercicio CU01155E</h2>
<div id="Contenedor">
<form name ="formularioContacto" class="form" method="get" onsubmit="return validacionConExpReg()">
<p><strong>Nombre : </strong><input id="nombre" type="text" name="nombre"> </p>
<p><strong>Apellidos:</strong> <input id="apellidos" type="text" name="apellidos"></p>
<p><strong>Email :</strong> <input id="email" type="text" name="email"></p>
<p><input type="submit" value="Enviar" ><input type="reset" value="Cancelar"></p>
</form>
</div>
&copy;parasabermas@hayquestudiar.com
</body
</html>


Hasta mañana.
O no.
 ;)

132
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Cómo se interpretan las expresiones regulares JavaScript y su utilidad CU01154E
« en: 15 de Enero 2018, 12:03 »
Hola. Dejo la posible solución al ejercicio CU01154E del taller gratuito JavaScript desde Cero de aprenderaprogramar.

EJERCICIO

Dada la expresión regular de JavaScript /^[A-C]\w+\ses\s\w+/
indicar cuáles de las siguientes cadenas hacen match con la expresión regular,
 y en caso de hacer match, qué parte o partes son las que hacen match:

a) Juan es guapo :  False
   No cumple la condición por que no comienza con A o B o C,

b) Adriano no es feo : False
   No cumple la condición por que las letras que siguen al primer espacio no se corresponden con ( es ).

c) Adriano deja de ser guapo :False
   No cumple la condición por que las letras que siguen al primer espacio no se corresponden con ( es ).

d) Adriano ya es guapo : False
   No cumple la condición por que las letras que siguen al primer espacio no se corresponden con ( es ).

e) No es ahora : False
   No cumple la condición por que las letras iniciales no comienzan con A o B o C.

f) Ahora es no :True
   Se cumplen las dos condiciones Comienza con mayúscula A,B o C y los caracteres que siguen al primer espacio son ( es ).

g) Adriano es guapo : True
   Se cumplen las dos condiciones Comienza con mayúscula A,B o C y los caracteres que siguen al primer espacio son ( es ).

133
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript ordenar números de mayor a menor o palabras orden alfabético CU01153E
« en: 14 de Enero 2018, 12:35 »
Hola. Dejo la entrega del ejercicio CU01153E del programa formativo gratuito en JavaScript de aprenderaprogramar.

EJERCICIO 1

Crea un script donde a partir del array [33, 2, 36, 55, 4, 1] se realicen los siguientes procesos:

a) Mostrar el array ordenado de menor a mayor y de mayor a menor usando la función sort y definiendo la función de ordenación de forma anónima, es decir, deberás invocar X.sort(function (…) { … } ) definiendo la función de forma anónima en vez de cómo función con nombre.

b) Crea una variable de nombre deMenorAMayor que contenga el resultado de ordenar de menor a mayor los elementos del array.

c) Crea una variable de nombre deMayorAMenor que contenga el resultado de ordenar de mayor a menor los elementos del array.

d) Muestra por pantalla el array original, la variable deMenorAMayor y la variable deMayorAMenor.

EJERCICIO 2

Crea un script donde sea posible ordenar palabras por orden alfabético sin tener en cuenta la existencia de mayúsculas o minúsculas. Por ejemplo, declarar var miArray=['Moto', 'soto', 'Abaco', 'abeja', 'Sapo', 'nieve', 'Zumba, 'barco'] y tras ordenar obtener =[ 'Abaco', 'abeja', 'barco', 'Moto', 'nieve', 'Sapo', 'soto', 'Zumba].

Código para ambos ejercicios:

Código: [Seleccionar]
<!DOCTYPE html>

<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">

<script type="text/javascript">
/* ===========================================
   ================ EJERCICIO 1 ==============
   ===========================================*/
function ejemplo()
{
msg='';
var arrayOriginal = [33,2,36,55,4,1];
var myArray = [33,2,36,55,4,1];
//Apartado a)
msg=msg+"Apartado a) \n"
msg=msg+"Array ordenado de menor a mayor : "+myArray.sort(function(a, b) {return a - b;})+"\n"
msg=msg+"Array ordenado de mayor a menor : "+myArray.sort(function(a, b) {return b - a;})+"\n\n"
//Apartado b)
deMenorAMayor=myArray.sort(function(a, b) {return a - b;});
mMay="Array ordenado deMenorAMayor :"+deMenorAMayor+"\n";
//Apartado c)
deMayorAMenor=myArray.sort(function(a, b) {return b - a;});
maMen="Array ordenado deMayorAmenor :"+deMayorAMenor+"\n";
//Apartado d)
msg=msg+"Apartados b), c) y d)\nvariables deMenorAMayor, deMayorAMenor y arrayOriginal\n"
msg=msg+"El Array original es: "+ arrayOriginal+"\n";
msg=msg+mMay+maMen
alert(msg);
ejemplo2()
}
/* ===========================================
   ================ EJERCICIO 2 ==============
   ===========================================*/
function ejemplo2()
{
msg="";
var MyArray=['Moto', 'soto', 'Abaco', 'abeja', 'Sapo', 'nieve', 'Zumba', 'barco'];
msg=msg+'Array Original : '+MyArray+'\n\n';
var ordenMayMin=MyArray.sort();
msg=msg+'Palabras ordenadas por codigo ASCII: '+ ordenMayMin+'\n\n';
var alfabetica=MyArray.sort(function(a,b){return a.localeCompare(b);});
msg=msg+'Palabras por orden alfabético : '+alfabetica+'\n\n';
alert(msg);


}


</script>

</head>

<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplos JavaScript</h3>
</div>

<div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div>

</body>

</html>


Hasta el próximo tema.
Gracias. :)

134
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript cómo se interpreta o qué es condicional con interrogante CU01152E
« en: 13 de Enero 2018, 17:44 »
Hola. Dejo la entrega del ejercicio CU1152E Operadores ternarios js desde cero del curso gratuito de programación JavaScript de aprenderaprogramar.

EJERCICIO

Ejecuta este script y responde a las siguientes preguntas (algunas de ellas
corresponden a cuestiones que hemos visto a lo largo del curso):

a) ¿Qué significa el operador += que se emplea en el código?
   Se asigna a operador operador y lo que sigue detras del igual
   Es lo mismo que operador=operador + "Lo que sigue al signo +"

b) ¿Por qué usamos '['0']' para establecer nodoBody?
   Porque queremos que coja del arbol DOM el primer elemento body
   
c) ¿Qué ocurre si dejamos en blanco la respuesta cuando se pide un color? Razona por qué ocurre esto.
   Nos da un mensaje para decirnos que no hemos introducido un color.
   Ocurre que al evaluar la condición no se cumple porque colorUsuario esta vacio y devuelve falso.
   Al devolver falso se pasa a la siguiente condición.
   ? = si verdadero, : = en caso contrario;
   ? en este caso es falso y se pasa a : en caso contrario

d) ¿Qué ocurre si escribimos pink cuando nos pide el color? Razona por qué ocurre esto.
   El fondo se pone de color rosa y se imprime el texto.
   Ocurre por que nos pide un valor para colorUsuario y aunque en el mensaje de texto hayamos introducido tres colores, se presentará por pantalla el color introducido en la caja de texto (Siempre que ese color exista).
   Si le damos cualquier otro valor diferente a los colores que acepta HTML nos pondrá el fondo con el color por defecto.
   
e) Modifica el código para que usando el operador ternario, si el usuario no introduce como color red, yellow o blue aparezca el mensaje ‘No eligió color o el color es no válido’

Código: [Seleccionar]
<!DOCTYPE html>

<html>
<head>
  <title>Ejemplo aprenderaprogramar.com</title>
  <meta charset="utf-8">
<script type="text/javascript">
function ejemplo()
{
var htmlADevolver = '';
var colorUsuario = prompt('Elija color red, yellow o blue');
htmlADevolver += colorUsuario=='red' || colorUsuario=='yellow' || colorUsuario=='blue' ?
   '<h1 style="background-color:'+colorUsuario+';"> Usted eligió '+colorUsuario+'</h1>' : '<h1>No eligió color</h1>';
var nodoBody = document.getElementsByTagName('body')[0];
nodoBody.innerHTML = nodoBody.innerHTML + htmlADevolver;
}

</script>

</head>

<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>

<div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div>

</body>

</html>


f) Reescribe el código inicial de partida sustituyendo el condicional ternario por if tradicionales.

Código: [Seleccionar]
<!DOCT<<YPE html>

<html>
<head>
  <title>Ejemplo aprenderaprogramar.com</title>
  <meta charset="utf-8">
<script type="text/javascript">
function ejemplo()
{
var htmlADevolver = '';
var colorUsuario = prompt('Elija color red, yellow o blue');
if(colorUsuario=='red' || colorUsuario=='yellow' || colorUsuario=='blue')
{
htmlADevolver= '<h1 style="background-color:'+colorUsuario+';"> Usted eligió '+colorUsuario+'</h1>'
}
else { 
htmlADevolver= '<h1>No eligió color</h1>';
  }
var nodoBody = document.getElementsByTagName('body')[0];
nodoBody.innerHTML = nodoBody.innerHTML + htmlADevolver;
}

</script>

</head>>>

<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3></div>

<div style="color:blue;" id ="pulsador" onclick="ejemplo()"> Probar </div>

</body>

</html>

135
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Uncaught ReferenceError: ejemploObjetos is not defined JavaScript CU01151E
« en: 12 de Enero 2018, 10:45 »
Hola. Dejo el ejercicio CU01151E DEPURAR JAVASCRIPT del tutorial pdf de programación JavaScript de aprenderaprogramar.

¿Qué mensajes aparecen en la consola antes y después de pulsar <<Probar>>?

Antes de ejecutar
    Uncaught SyntaxError: missing ) after argument list            Depuracion2.html:14
    Error de sintaxis no detectada: falta) después de la lista de argumentos Depuracion2.html: 14
   
    Despues de Ejecutar
     Uncaught ReferenceError: ejemploObjetos is not defined
     at HTMLDivElement.onclick (Depuracion2.html:24)
     
    Error de referencia no capturado: ejemploObjetos no está definido
    en HTMLDivElement.onclick (Depuracion 2.html: 24)

Despues de corregir el error  ¿Qué mensajes aparecen ahora en la consola?
Ninguno

¿Qué interpretación podemos darle a los resultados que hemos obtenido?

Antes de ejecutar nos da el error de sintaxis por falta de un paréntesis en la linea 14.

Después de ejecutar el HTML al no poder ejecutar el navegador el javaScript no reconoce la llamada a la función en la linea 24 y da otro error.

Hasta otro.

136
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript código ejemplo implementar cadena de herencia usando call CU01150E
« en: 11 de Enero 2018, 11:38 »
Hola. Dejo el código de call JavaScript. Diferencia con apply. Constructores con herencia en cadena. Invocar this. Ejercicio CU01150E  del manual pdf de programación web con JavaScript.

Código: [Seleccionar]
<!DOCTYPE html>

<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<script type="text/javascript">
/* =====================================================================
/* =========================   EJERCICIO 1 =============================
/* ===================================================================== */
function Persona (nombre, nacionalidad)
{
this.nombre = nombre || 'Desconocido';
this.nacionalidad = nacionalidad || 'Desconocida';
}

Persona.prototype.mostrarNacionalidad = function()
{
alert('Hola mi nacionalidad es : '+this.nacionalidad);
}

function Medico (centroTrabajo,nombre, nacionalidad)
{
Persona.call(this,nombre,nacionalidad);
this.centroTrabajo=centroTrabajo || 'Desconocido';
}
Medico.prototype=new Persona();

function medicoEspecialista (especialidad,centroTrabajo,nombre,nacionalidad)
{
Medico.call(this,centroTrabajo,nombre,nacionalidad)
this.especialidad=especialidad || "Desconocida";
}
medicoEspecialista.prototype=new Medico

/* =====================================================================
/* =========================   EJERCICIO 2 =============================
/* ===================================================================== */
function Persona2 (nombre)
{
this.nombre = nombre || 'Nombre desconocido';
this.saludar = function ()
{
alert('Hola, soy ' + this.nombre+"\n");
}
}
Persona2.prototype.definicion = 'Ser humano';

function Profesor (institucionAcademica ,nombre)
{
Persona2.call(this,nombre)
this.institucionAcademica = institucionAcademica || 'Institución desconocida';
}
Profesor.prototype = new Persona2();

function ProfesorInterino(tiempoTrabajado,institucionAcademica,nombre)
{
Profesor.call(this,institucionAcademica,nombre)
this.tiempoTrabajado = tiempoTrabajado || 0;

}
ProfesorInterino.prototype = new Profesor();

function ProfesorTitular(tiempoTrabajado,institucionAcademica,nombre)
{
Profesor.call(this,institucionAcademica,nombre)
this.tiempoTrabajado = tiempoTrabajado || 0;
}
ProfesorTitular.prototype = new Profesor();

/* =====================================================================
/* ========================= FIN EJERCICIO 2  ==========================
/* ===================================================================== */
function ejemploObjetos()
{
var Especialista1=new medicoEspecialista("Dentista","Los Guinchos","Pascual","España")
Especialista1.mostrarNacionalidad();
var Especialista2=new medicoEspecialista("Traumatologo","","","Argentina");
var Especialista3=new medicoEspecialista("","Breña Baja","Ramiro Gutierrez","Chile");

msg="";
msg=msg+"EJERCICIO 1\n\n";

msg=msg+"Especialidad: "+Especialista1.especialidad+"\n"+"Centro medico: "+Especialista1.centroTrabajo+"\n";
msg=msg+"Me Llaman: "+Especialista1.nombre+"\n"+"Mi Nacionalidad es : "+Especialista1.nacionalidad+"\n\n";

msg=msg+"Especialidad: "+Especialista2.especialidad+"\n"+"Centro medico: "+Especialista2.centroTrabajo+"\n";
msg=msg+"Me Llaman: "+Especialista2.nombre+"\n"+"Mi Nacionalidad es : "+Especialista2.nacionalidad+"\n\n";

msg=msg+"Especialidad: "+Especialista3.especialidad+"\n"+"Centro medico: "+Especialista3.centroTrabajo+"\n";
msg=msg+"Me Llaman: "+Especialista3.nombre+"\n"+"Mi Nacionalidad es : "+Especialista3.nacionalidad+"\n\n";
presentarDatos(msg)

//************************
//Presentar datos del Ejercicio 2
//************************
msg="";
var ProfesorTitular1 =new ProfesorTitular(8,"Universidad de León","Juan");
ProfesorTitular1.saludar();
msg=msg+"Hola soy un Profesor Titular y mi Nombre es : "+ ProfesorTitular1.nombre+"\n";
msg=msg+"Estudie en: "+ ProfesorTitular1.institucionAcademica+"\n";
msg=msg+"Y los años trabajados son: "+ ProfesorTitular1.tiempoTrabajado+"\n";
msg=msg+"Soy un :"+ ProfesorTitular1.definicion+"\n\n";
var ProfesorInterino =new ProfesorTitular('22',"Universidad de Salamanca","Patrocinio");
msg=msg+"Hola soy un Profesor interino y mi Nombre es : "+ ProfesorInterino.nombre+"\n";
msg=msg+"Estudie en: "+ ProfesorInterino.institucionAcademica+"\n";
msg=msg+"Y tengo "+ ProfesorInterino.tiempoTrabajado +" meses trabajados \n";
msg=msg+"Soy un :"+ ProfesorInterino.definicion+"\n\n";
presentarDatos(msg)
}
function presentarDatos(msg)
{
alert(msg);
}
/* =====================================================================
/* ======================== FIN EJERCICIO =============================
/* ===================================================================== */
</script>

<style type="text/css">
body{background-color:green;}
  h1,h2,h3{
text-align:center;
margin:0;
padding:0;
color:white;
width:300;
height:200;
}

.boton {
border:outset white  2px; 
width:200px;
border-radius:25px 25px;
box-shadow:3px 3px 2px 2px #AFF6AF;
text-align:center;
    background-color:#90EE90;
color:black;
font-size:19px;
margin-top :2px;
margin-left:5px;
margin-bottom:5px;

}
 

 
</style>
</head>
<body>

<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplos JavaScript</h3></div>
 
<div class="boton" onclick="ejemploObjetos()" >Comprobar</div>
 
</body>
</html>


Gracias.
 ;)

137
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:Propiedad position CSS: static relative absolute fixed.Top right bottom CU01032D
« en: 10 de Enero 2018, 18:19 »
Hola LuisM.

En el ejercicio 1 en el CSS tienes que evitar la redundancia de código.
En #div1, #div2, #div3 repites esto:
        position:relative;
   margin:40px; padding:30px;
   width:300px; height:300px;

Tendrías que haber puesto:
#div1, #div2, #div3
{
        position:relative;
   margin:40px; padding:30px;
   width:300px; height:300px;
}

Si lo ponemos asi se evitamos repetir el código y ocupa menos espacio en memoria.

En programas de mucho código a la hora de analizar o si hay algún fallo te puedes volver loco y no lo encuentras.

El ejercicio 2 lo veo correcto.

Y el ejercicio 3 pide que el div sea de fondo amarillo por lo demás lo veo bien.

Te paso el codigo del Ejercicio 3 como lo hubiera hecho yo:

El HTML
Código: [Seleccionar]
<!--
   CodigoBaseParaCSS.html
   
   Copyright 2017 PabloRamon <pabloramon@ramon-Compaq-Presario-CQ61-Notebook-PC>
   
   This program is free software; you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
   the Free Software Foundation; either version 2 of the License, or
   (at your option) any later version.
   
   This program is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   GNU General Public License for more details.
   
   You should have received a copy of the GNU General Public License
   along with this program; if not, write to the Free Software
   Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
   MA 02110-1301, USA.
   
   
-->
<!DOCTYPE html>
<!-- Código base para el curso CSS -->
<html>

<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel="stylesheet" type="text/css" href="ejercicio3.css">
</head>
 
<!-- Contenido de la página web -->
<body>
<div class="div1">
<pre>
Esta pagina web utiliza cookies.
Si continua navegando acepta el
uso de cokies.
</pre>
</div>
<br/><br/><br/><br/><br/>
<div>
<h1>Ejercicio 3 entrega 32</h1>
<p>Los siguientes textos fueron tomados de <a href="http://www.blindtextgenerator.com/es">www.blindtextgenerator.com/es</a>
para que no llamen al psiquiatrico !!" Son textos del tipo "Lorem ipsum", que se usan habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final.
Aunque no posee actualmente fuentes para justificar sus hipótesis, el profesor de filología clásica Richard McClintock asegura que su uso se remonta a los impresores de comienzos del siglo XVI. Su uso en algunos editores de texto muy conocidos en la actualidad ha dado al texto lorem ipsum nueva popularidad.
El texto en sí no tiene sentido, aunque no es completamente aleatorio, sino que deriva de un texto de Cicerón en lengua latina, a cuyas palabras se les han eliminado sílabas o letras. El significado del texto no tiene importancia, ya que solo es una demostración o prueba, pero se inspira en la obra de Cicerón De finibus bonorum et malorum (Sobre los límites del bien y del mal) <p>
</div>
</br>
<div>
<h2>Muy lejos, más allá...</h2>
<p>Muy lejos, más allá de las montañas de palabras, alejados de los países de las vocales y las consonantes, viven los textos simulados. Viven aislados en casas de letras, en la costa de la semántica, un gran océano de lenguas. Un riachuelo llamado Pons fluye por su pueblo y los abastece con las normas necesarias. Hablamos de un país paraisomático en el que a uno le caen pedazos de frases asadas en la boca. Ni siquiera los todopoderosos signos de puntuación dominan a los textos simulados; una vida, se puede decir, poco ortográfica. Pero un buen día, una pequeña línea de texto simulado, llamada Lorem Ipsum, decidió aventurarse y salir al vasto mundo de la gramática. El gran Oxmox le desanconsejó hacerlo, ya que esas tierras estaban llenas de comas malvadas, signos de interrogación salvajes y puntos y coma traicioneros, pero el texto simulado no se dejó atemorizar. Empacó sus siete versales, enfundó su inicial en el cinturón y se puso en camino. Cuando ya había escalado las primeras colinas de las montañas cursivas, se dio media vuelta para dirigir su mirada por última vez, hacia su ciudad natal Letralandia, el encabezamiento del pueblo Alfabeto y el subtítulo de su...</p>
</div>
</br>
<div>
<h2>Don Quijote </h2>
<p>Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no te cabe parte dellas.Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro. Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no...</p>
</div>
</br>
<div>
<h2>Penas del joven Werther </h2>
<p>Reina en mi espíritu una alegría admirable, muy parecida a las dulces alboradas de la primavera, de que gozo aquí con delicia. Estoy solo, y me felicito de vivir en este país, el más a propósito para almas como la mía, soy tan dichoso, mi querido amigo, me sojuzga de tal modo la idea de reposar, que no me ocupo de mi arte. Ahora no sabría dibujar, ni siquiera hacer una línea con el lápiz; y, sin embargo, jamás he sido mejor pintor Cuando el valle se vela en torno mío con un encaje de vapores; cuando el sol de mediodía centellea sobre la impenetrable sombra de mi bosque sin conseguir otra cosa que filtrar entre las hojas algunos rayos que penetran hasta el fondo del santuario, cuando recostado sobre la crecida hierba, cerca de la cascada, mi vista, más próxima a la tierra, descubre multitud de menudas y diversas plantas; cuando siento más cerca de mi corazón los rumores de vida de ese pequeño mundo que palpita en los tallos de las hojas, y veo las formas innumerables e infinitas de los gusanillos y de los insectos; cuando siento, en fin, la presencia del Todopoderoso, que nos ha creado...</p>
</div>
</br>
<div>
<h2>Kafka</h2>
<p>Una mañana, tras un sueño intranquilo, Gregorio Samsa se despertó convertido en un monstruoso insecto. Estaba echado de espaldas sobre un duro caparazón y, al alzar la cabeza, vio su vientre convexo y oscuro, surcado por curvadas callosidades, sobre el que casi no se aguantaba la colcha, que estaba a punto de escurrirse hasta el suelo. Numerosas patas, penosamente delgadas en comparación con el grosor normal de sus piernas, se agitaban sin concierto. - ¿Qué me ha ocurrido? No estaba soñando. Su habitación, una habitación normal, aunque muy pequeña, tenía el aspecto habitual. Sobre la mesa había desparramado un muestrario de paños - Samsa era viajante de comercio-, y de la pared colgaba una estampa recientemente recortada de una revista ilustrada y puesta en un marco dorado. La estampa mostraba a una mujer tocada con un gorro de pieles, envuelta en una estola también de pieles, y que, muy erguida, esgrimía un amplio manguito, asimismo de piel, que ocultaba todo su antebrazo. Gregorio miró hacia la ventana; estaba nublado, y sobre el cinc del alféizar repiqueteaban las gotas de lluvia, lo que le hizo sentir una gran melancolía. «Bueno -pensó-; ¿y si siguiese durmiendo un rato y me olvidase de...</p>
</div>
</br>
<div>
<h2>Pangrama</h2>
<p>Quiere la boca exhausta vid, kiwi, piña y fugaz jamón. Fabio me exige, sin tapujos, que añada cerveza al whisky. Jovencillo emponzoñado de whisky, ¡qué figurota exhibes! La cigüeña tocaba cada vez mejor el saxofón y el búho pedía kiwi y queso. El jefe buscó el éxtasis en un imprevisto baño de whisky y gozó como un duque. Exhíbanse politiquillos zafios, con orejas kilométricas y uñas de gavilán. El cadáver de Wamba, rey godo de España, fue exhumado y trasladado en una caja de zinc que pesó un kilo. El pingüino Wenceslao hizo kilómetros bajo exhaustiva lluvia y frío, añoraba a su querido cachorro. El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palenque de paja.Quiere la boca exhausta vid, kiwi, piña y fugaz jamón. Fabio me exige, sin tapujos, que añada cerveza al whisky. Jovencillo emponzoñado de whisky, ¡qué figurota exhibes! La cigüeña tocaba cada vez mejor el saxofón y el búho pedía kiwi y queso. El jefe buscó el éxtasis en un imprevisto baño de whisky y gozó como un duque. Exhíbanse politiquillos zafios, con orejas kilométricas y uñas de gavilán. El cadáver de Wamba, rey godo de España, fue...</p>
</div>
</div>

</body>
<!-- Fin del contenido de la página web -->
</html>


CSS
Código: [Seleccionar]
/* Curso CSS estilos aprenderaprogramar.com*/
   *{
  font-family: Arial, sans-serif;
}
 html{
  font-size:19px;
  }
 
.div1 {
 
border-style: outset;
border-color: green;
border-width:5px;
background-color:yellow;
width: 600px;
height: 100px;
position:fixed;left:10px;top:10px;
    }

Saludos. ;)

138
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript implementar esquema de herencia usando prototype propiedades CU01149E
« en: 08 de Enero 2018, 18:39 »
Hola. Dejo el ejercicio CU01149E del tutorial gratuito de programación web con JavaScript de aprenderaprogramar. Espero que este biien.  :-\


Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<script type="text/javascript">
/* =====================================================================
/* =========================   EJERCICIO  ==============================
/* ===================================================================== */
function hortalizas ()
{
this.propiedadComun = 'Agua';
this.plantaMovilidad='Ser vivo sin movilidad';
}

hortalizas.prototype.tipoHortaliza = 'Indefinido';
function verduras () { this.nombreCientifico = 'Desconocido'; }
verduras.prototype=new hortalizas;
function tomate(){
this.numCalorias=39;
this.nombreCientifico="Solanum lycopersicum";
this.tipoHortaliza="Herbácea";
}
tomate.prototype=new verduras();

function zanahoria(){
this.numCalorias=45;
this.nombreCientifico="Daucus carota";
this.tipoHortaliza="Apiácea"
}
zanahoria.prototype=new verduras()



function lechuga(){
this.numCalorias=31;
this.nombreCientifico="Lactuca sativa";
this.tipoHortaliza="Herbácea";
}
lechuga.prototype=new verduras();

function pepino(){
this.numCalorias=39;

}
pepino.prototype=new verduras();

function ejemploObjetos()
{
msg='';
var tomate1=new tomate()
var zanahoria1=new zanahoria()
var lechuga1=new lechuga()
var pepino1=new pepino()
presentarDatos(tomate1,zanahoria1,lechuga1,pepino1);
}
function presentarDatos(tomate1,zanahoria1,lechuga1,pepino1){
msg=msg+"El tomate1 <br/><br/>";
msg=msg+"Tiene la Propiedad Comun: "+tomate1.propiedadComun+'<br/>';
msg=msg+"Tiene la propiedad Movilidad: "+tomate1.plantaMovilidad+'<br/>';
msg=msg+"Numero de calorias: "+tomate1.numCalorias+'<br/>' ;
msg=msg+"Nombre Cientifico: "+tomate1.nombreCientifico+'<br/>' ;
msg=msg+"Tipo de Verdura: "+tomate1.tipoHortaliza+'<br/><br/>' ;

msg=msg+"Zanahoria <br/><br/>";
msg=msg+"Tiene la propiedad Comun: "+zanahoria1.propiedadComun+'<br/>';
msg=msg+"Tiene la Movilidad: "+zanahoria1.plantaMovilidad+'<br/>';
msg=msg+"Numero de calorias: "+zanahoria1.numCalorias+'<br/>' ;
msg=msg+"Nombre Cientifico: "+zanahoria1.nombreCientifico+'<br/>' ;
msg=msg+"Tipo de Verdura: "+zanahoria1.tipoHortaliza+'<br/><br/>' ;

msg=msg+"Lechuga<br/><br/>";
msg=msg+"Tiene la propiedad Comun: "+lechuga1.propiedadComun+'<br/>';
msg=msg+"Tiene la Movilidad: "+lechuga1.plantaMovilidad+'<br/>';
msg=msg+"Numero de calorias: "+lechuga1.numCalorias+'<br/>' ;
msg=msg+"Nombre Cientifico: "+lechuga1.nombreCientifico+'<br/>' ;
msg=msg+"Tipo de Verdura: "+lechuga1.tipoHortaliza+'<br/><br/>' ;

msg=msg+"El Pepino <br/><br/>";
msg=msg+"Tiene la propiedad Comun: "+pepino1.propiedadComun+'<br/>';
msg=msg+"Tiene la propiedad Movilidad: "+pepino1.plantaMovilidad+'<br/>';
msg=msg+"Numero de calorias: "+pepino1.numCalorias+'<br/>' ;
msg=msg+"Nombre Cientifico: "+pepino1.nombreCientifico+'<br/>' ;
msg=msg+"Tipo de Verdura: "+pepino1.tipoHortaliza+'<br/>o no<br/> ' ;
document.all.pizarra.innerHTML=msg;
}
/* =====================================================================
/* ===================== FIN DEL EJERCICIO =============================
/* ===================================================================== */

</script>

<style type="text/css">
body{background-color:green;}
  h1,h2,h3{
text-align:center;
margin:0;
padding:0;
color:white;
width:300;
height:200;
}

.boton {
border:outset white  2px; 
width:200px;
border-radius:25px 25px;
box-shadow:3px 3px 2px 2px #AFF6AF;
text-align:center;
    background-color:#90EE90;
color:black;
font-size:19px;
margin-top :2px;
margin-left:5px;
margin-bottom:5px;

}
.boton, #externa{margin-left:150px;}


.boton:hover {
border:inset 2px green;
box-shadow:3px 3px 2px 2px  #0BF50B ;
    }
#pizarra {

background-color:black;
border:groove red 8px;
border-radius:25px 25px;


color:white;
font-size:19px;
padding:15px;
overflow:hidden;
float:left;
margin-left:10px;
margin-top:10px;
}
#Pizarras{float:left;}
</style>
</head>
<body>

<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplos JavaScript</h3></div>
<div id="Pizarras">
<div class="boton" onclick="ejemploObjetos()" >Comprobar</div>
<div id="pizarra"></div>

</body>
</html>

Hasta el poximo.  ;)

139
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript cómo definir propiedades y métodos estáticos o de clase CU01148E
« en: 07 de Enero 2018, 10:24 »
Hola. Dejo el Ejercicio del tema CU01148E JavaScript propiedades y métodos estáticos, del tutorial pdf de programación web de aprenderaprogramar.

EJERCICIO

Define un tipo de objeto Meteorito cuyas propiedades de instancia (específicas de cada objeto) sean diametro, temperatura y nombre. La temperatura será un valor numérico que suponemos está en grados centígrados. Como propiedad estática del tipo meteorito define definicionSegunDiccionario (que debe contener la definición de meteorito) y como métodos estáticos obtenerRadio (que debe devolver el radio a partir de un parámetro diametro) y obtenerTemperaturaFarenheit (que debe devolver el valor de temperatura expresado en grados Farenheit a partir de un parámetro temperatura).  Crea un objeto de tipo Meteorito con un diámetro, temperatura y nombre y comprueba que puedes acceder a las propiedades y métodos estáticos mostrando por pantalla la definición de meteorito, la superficie del objeto creado y la temperatura Farenheit del objeto creado.

Código: [Seleccionar]
<!DOCTYPE html>

<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<script type="text/javascript">

/* =====================================================================
/* =========================   EJERCICIO  ==============================
/* ===================================================================== */

function Meteorito(Diametro, Temperatura, Nombre)
{
this.Diametro = Diametro;
this.Temperatura = Temperatura;
this.Nombre = Nombre;
     
}
//Propiedad estatica
Meteorito.definicionSegunDiccionario=
'El término meteoro proviene del griego meteoron, que significa «fenómeno en el cielo». Se emplea para describir el destello<br/>'+
'luminoso que acompaña la caída de materia del sistema solar sobre la atmósfera terrestre. <br/>'+
'Dicho destello se produce por la incandescencia temporal que sufre el meteoroide a causa de la presión de choque (el aire<br/>'+
'atmosférico se comprime al chocar con el cuerpo y, al aumentar la presión, aumenta la temperatura, que se transfiere al meteoroide),<br/>'+
'no de la fricción.Esto ocurre generalmente a alturas entre 80 y 110 kilómetros sobre la superficie de la Tierra. <br/>'+
'Un meteoroide es un cuerpo menor del sistema solar de, aproximadamente, entre 100 µm hasta 50 m (de diámetro máximo).<br/>'+
'El límite superior de tamaño, 50 m, se emplea para diferenciarlo de los cometas y de los asteroides, mientras que el<br/>'+
'límite inferior de tamaño, 100 µm, se emplea para diferenciarlo del polvo cósmico; no obstante, los límites de tamaño<br/>'+
'no suelen usarse muy estrictamente siendo ambigua la designación de los objetos que se encuentren cercanos a estos límites.<br/><br/>'+
'Definicion extraida de  Wikipedia';
//Metodos estaticos
Meteorito.obtenerRadio=function(Diametro){
Radio=Diametro/2;
return Radio
};

Meteorito.obtenerTemperaturaFarenheit= function (Temperatura) { 
var GradFhar = Temperatura * 1.8 + 32;     
return GradFhar;
}


  function CrearObjetos()
{
//Creación de los objetos
var Meteoritos=new Array();
Meteoritos[0]=new Meteorito(50, 100, "Luso");
Meteoritos[1]=new Meteorito(20, 85, "Galileo");
Meteoritos[2]=new Meteorito(15.5, -15, "Reventon");
//Llamar funcion de presentar datos en Pantalla
PresentarDatos(Meteoritos)
}

/* =====================================================================
/* ===================== FIN DEL EJERCICIO =============================
/* ===================================================================== */

function PresentarDatos(Meteoritos){
var msg="",i=0;
//Presentar datos en pantalla
msg=msg+"DEFINICION DE LOS METEORITOS <BR/><BR/>"+Meteorito.definicionSegunDiccionario+'<br/><br/>'
for(var i in Meteoritos)
{
msg=msg+'Nombre del Meteorito'+i+' = '+Meteoritos[i].Nombre+'<br/>'+
'Diametro del Meteorito'+i+' = '+Meteoritos[i].Diametro+' metros de diametro<br/>';
Meteoritos[i].Diametro=Meteorito.obtenerRadio(Meteoritos[i].Diametro);
msg=msg+'Radio del Meteorito'+i+' = '+Meteoritos[i].Diametro+' metros de radio <br/>'+
'Temperatura del Meteorito'+i+'= '+Meteoritos[i].Temperatura+' Grados Celsius<br/>';
Meteoritos[i].Temperatura=Meteorito.obtenerTemperaturaFarenheit(Meteoritos[i].Temperatura);
msg=msg+'Temperatura del Meteorito'+i+'= '+Meteoritos[i].Temperatura+' Grados Fahrenheit<br/><br/>';

}
document.all.pizarra.innerHTML=msg;
}
</script>

<style type="text/css">
body{background-color:green;}
  h1,h2,h3{
text-align:center;
margin:0;
padding:0;
color:white;
width:300;
height:200;
}

.boton {
border:outset white  2px; 
width:200px;
border-radius:25px 25px;
box-shadow:3px 3px 2px 2px #AFF6AF;
text-align:center;
    background-color:#90EE90;
color:black;
font-size:19px;
margin-top :2px;
margin-left:5px;
margin-bottom:5px;

}
.boton, #externa{margin-left:150px;}


.boton:hover {
border:inset 2px green;
box-shadow:3px 3px 2px 2px  #0BF50B ;
    }
#pizarra {

background-color:black;
border:groove red 8px;
border-radius:25px 25px;


color:white;
font-size:19px;
padding:15px;
overflow:hidden;
float:left;
margin-left:10px;
margin-top:10px;
}
#Pizarras{float:left;}
</style>
</head>

<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplos JavaScript<br/>Ejercicio CU01148E<br/>Los Meteoritos</h3>
</div>
<div id="Pizarras">
<div class="boton" onclick="CrearObjetos()">Comprobar</div>
<div id="pizarra"></div>
</body>

</html>


Gracias.
 ;)

140
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript cómo se implementa la herencia con prototype código ejemplo CU01147E
« en: 05 de Enero 2018, 14:10 »
Hola. Entrego el código del Ejercicio CU01147E del tutorial gratuito de programación JavaScript de aprenderaprogramar.

EJERCICIO

Define un tipo de objeto Cometa cuyas propiedades de instancia (específicas de cada objeto) sean diametro, temperatura y nombre. La temperatura será un valor numérico que suponemos está en grados centígrados. Como propiedad común a todos los objetos de tipo cometa define definicionSegunDiccionario (que debe contener la definición de cometa según el diccionario) y como métodos comunes obtenerRadio (que debe devolver el radio) y obtenerTemperaturaFarenheit (que debe devolver el valor de temperatura expresado en grados Farenheit).  Crea tres objetos de tipo cometa y comprueba que puedes acceder tanto a las propiedades específicas como a las propiedades comunes y métodos comunes desde cada objeto.

Código: [Seleccionar]
<!DOCTYPE html>

<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title>
<meta charset="utf-8">
<script type="text/javascript">
msg='';
/* =====================================================================
/* =========================   EJERCICIO  ==============================
/* ===================================================================== */

function Cometa(Diametro, Temperatura, Nombre)
{
this.Diametro = Diametro;
this.Temperatura = Temperatura;
this.Nombre = Nombre;
     
}

//Llenar los prototipos de cometa
Cometa.prototype ={
definicionSegunDiccionario: 'Los cometas son los cuerpos celestes constituidos por hielo,<br/>'+
'polvo y rocas que orbitan alrededor del Sol siguiendo diferentes <br/>'+
'trayectorias elípticas, parabólicas o hiperbólicas. Los cometas, junto<br/>'+
'con los asteroides, planetas y satélites, forman parte del sistema solar.<br/>'+
'La mayoría de estos cuerpos celestes describen órbitas elípticas de gran <br/>'+
'excentricidad, lo que produce su acercamiento al Sol con un período considerable.<br/>'+
' A diferencia de los asteroides, los cometas son cuerpos sólidos compuestos de<br/>'+
'materiales que se subliman en las cercanías del Sol.',

obtenerRadio:function(){
Radio=this.Diametro/2;
return Radio
},

obtenerTemperaturaFarenheit: function () { 
var GradFhar = this.Temperatura * 1.8 + 32;     
return GradFhar;
}
}

  function CrearObjetos()
{
//Creación de los objetos
var Cometas=new Array();
Cometas[0]=new Cometa(1500, 410, "Pedrusco");
Cometas[1]=new Cometa(2000, 625, "MenuoRipio");
Cometas[2]=new Cometa(15000, 515, "Estrellator");
//Llamar funcion de presentar datos en Pantalla
PresentarDatos(Cometas)
}

/* =====================================================================
/* ===================== FIN DEL EJERCICIO =============================
/* ===================================================================== */

function PresentarDatos(Cometas){
//Presentar datos en pantalla
msg=msg+"DEFINICION DE LOS COMETAS <BR/><BR/>"+Cometas[0].definicionSegunDiccionario+'<br/><br/>'
for(var i in Cometas)
{
msg=msg+'Nombre del Cometa'+i+' = '+Cometas[i].Nombre+'<br/>'+
'Diametro del Cometa'+i+' = '+Cometas[i].Diametro+' metros de diametro<br/>';
Cometas[i].Diametro=Cometas[i].obtenerRadio();
msg=msg+'Radio del Cometa'+i+' = '+Cometas[i].Diametro+' metros de radio <br/>'+
'Temperatura del Cometa'+i+'= '+Cometas[i].Temperatura+' Grados Celsius<br/>';
Cometas[i].Temperatura=Cometas[i].obtenerTemperaturaFarenheit();
msg=msg+'Temperatura del Cometa'+i+'= '+Cometas[i].Temperatura+' Grados Fahrenheit<br/><br/>';

}
document.all.pizarra.innerHTML=msg;
}
</script>

<style type="text/css">
body{background-color:green;}
  h1,h2,h3{
text-align:center;
margin:0;
padding:0;
color:white;
width:300;
height:200;
}

.boton {
border:outset white  2px; 
width:200px;
border-radius:25px 25px;
box-shadow:3px 3px 2px 2px #AFF6AF;
text-align:center;
    background-color:#90EE90;
color:black;
font-size:19px;
margin-top :2px;
margin-left:5px;
margin-bottom:5px;

}
.boton, #externa{margin-left:150px;}


.boton:hover {
border:inset 2px green;
box-shadow:3px 3px 2px 2px  #0BF50B ;
    }
#pizarra {

background-color:black;
border:groove red 8px;
border-radius:25px 25px;


color:white;
font-size:19px;
padding:15px;
overflow:hidden;
float:left;
margin-left:10px;
margin-top:10px;
}
#Pizarras{float:left;}
</style>
</head>

<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplos JavaScript<br/>Ejercicio CU01147E<br/>Los Cometas</h3>
</div>
<div id="Pizarras">
<div class="boton" onclick="CrearObjetos()">Comprobar</div>
<div id="pizarra"></div>
</body>

</html>


Hasta pronto.
 ;)

Páginas: 1 2 3 4 5 6 [7] 8 9 10 11 12 13

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

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".