Autor Tema: Date JavaScript. Diferencias entre gmt y utc ó local getMonth Ejercicio CU01162E (Leído 1830 veces)

paramonso · « **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.

Ogramar · « **Respuesta #1 en:** 17 de Junio 2018, 13:45 »

Buenas, el ejercicio está bien resuelto. Hay un aspecto del diseño del código que recomendaría mejorar. Con esto me refiero a los nombres de las funciones y el contenido de las mismas. El nombre de una función debe representar lo que es o lo que hace. En el caso de una función entrarDatos debería servir únicamente para entrar datos. Sin embargo en esta función vemos que entrarDatos recupera la fecha, genera una tabla, etc.

Código: [Seleccionar]

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

Esto se recomienda una mala práctica de programación porque en programas de miles de líneas hace el código confuso y difícil de depurar.

Para evitar problemas con los juegos de caracteres recomendamos no usar eñes en el código, por ejemplo en lugar de cogerMesAñoDia usar cogerMesAnnoDia

Salu2

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: