Autor Tema: JavaScript calendario sencillo objeto Date() calcular primer día mes CU01162E# (Leído 8076 veces)

bermartinv · « **en:** 23 de Febrero 2016, 13:56 »

Ejercicio CU01162E del curso tutorial javascript desde cero.

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

He tenido que buscar material en la web , porque no conseguía saber los dias que tenía un mes si no fuera creando las reglas de años bisiesto,meses,etc. Encontré un prototype del objeto Date que te calculaba los días (muy guay).

Tendría que haber comentado un poco el código porque la persona que no ha trabajado en un código y empieza a leer variables, funciones,etc sin saber para que son , es un poco lioso.

Por cierto, un ejercicio muy laborioso.

Adjunto mi código para este ejercicio.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    #calendario{
        height:400px;
        width:400px;
        margin:100px;
        text-align:center;
        
    }    
    
    #table{
        font-size: 24px;
        width: 300px;
        border:solid thin black;
        margin:50px;
        border-collapse: collapse;
    }
    
</style>
<script>
window.onload = function(){
    
    calendario();  
}    

function calendario(){
    Date.prototype.monthDays= function(){
    var d= new Date(this.getFullYear(), this.getMonth()+1, 0);
    return d.getDate();
}
    fecha = new Date();
    fechaActual(fecha);
    var dias = fecha.monthDays();
    var nombreDias = ['Lu','Ma','Mi','Ju','Vi','Sa','Do'];
    var diacomienzo = empezarDia(fecha); escribirCalendario(fecha,nombreDias,diacomienzo,dias);
}
    
   function mesFecha(mes){
        switch (mes){
            case 0:return 'Enero';break;
            case 1:return 'Febrero';break;
            case 2:return 'Marzo';break;
            case 3:return 'Abril';break;
            case 4:return 'Mayo';break;
            case 5:return 'Junio';break;
            case 6:return 'Julio';break;
            case 7:return 'Agosto';break;
            case 8:return 'Septiembre';break;
            case 9:return 'Octubre';break;
            case 10:return 'Noviembre';break;
            case 11:return 'Diciembre';break;
        }
}
    
    function fechaActual(fecha){
        var anyo = fecha.getFullYear();
        var mes = mesFecha(fecha.getMonth());
        var msg = mes+' de '+anyo; document.getElementById("fechaActual").innerHTML = msg;
    }
    
    function empezarDia(fecha){
        fecha2 = new Date(fecha.getFullYear(),fecha.getMonth(),0);
        var diacomienzo = fecha2.getDay();
        return diacomienzo;
        
    }
    
    function escribirCalendario(fecha,nombreDias,diaComienzo,dias){
        var tds = document.getElementsByTagName('td');
        var contador = 1;
        // Para los dias de la semana;
        for (var i=0;i<tds.length;i++){
            
            if (i>0 && i<8 ){
                tds[i].innerHTML=nombreDias[i-1];
            }
            if (i>7 && diaComienzo!=0){
                tds[i].innerHTML = ' ' ;
                diaComienzo--;
            }
            else if (i>7 && diaComienzo==0 && contador<=dias){
                
                tds[i].innerHTML=contador;
                if (fecha.getDate() == contador){
                    tds[i].style.color = 'red';
                }
                contador++;
                
            }
            
        }
    }
    
    
</script>
</head>
<body>
   <h1>Calendario </h1>
    <div id="calendario">
        <table id="table">
            <tr>
                <td colspan="7" id="fechaActual">sd</td>
            </tr>
            <tr>
                <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
            <tr>
                <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
            </tr>
        </table>
    </div>
</body>
</html>

Mario R. Rancel · « **Respuesta #1 en:** 25 de Febrero 2016, 09:38 »

Buenos días, felicitarte porque el calendario te ha quedado muy bien y además has añadido algún detalle como marcar el día actual de un color diferente.

Como has indicado hubiera sido deseable que el código estuviera comentado explicando el cometido de las distintas funciones.

Voy a hacer un pequeño recorrido por el código.

Al cargarse la página tiene el evento onload y se llama a la función calendario(). En esta función se define una propiedad para todos los objetos Date a la que se denomina monthDays y que nos devuelve el número de días del mes asociado al objeto Date invocado.

Se crea un objeto Date sin parámetros (tiempo del sistema) y se llama a la función fechaActual que se encarga de mostrar por pantalla el texto de la fecha actual en formato tipo "Febrero de 2076"

Se crea un array con las abreviaturas de los días Lu, Ma, Mi...

Se establece el día de comienzo para el mes invocando la función emprezarDia(fecha) que nos devuelve un valor entre 0 y 6 representando qué día de la semana es el primer día del mes. Por ejemplo 0 sería domingo, 1 lunes, 2 martes, etc.

Por último se invoca la función escribirCalendario pasándole la fecha actual, el array con los nombres de los días Lu, Ma, Mi..., el día de comienzo de 0 a 6 y el número de días que tiene el mes: escribirCalendario(fecha,nombreDias,diacomienzo,dias);

La función escribirCalendario va recorriendo las celdas de la tabla (elementos td) rellenando la primera fila con los días de la semana Lu, Ma, Mi...

Luego si el día de comienzo del mes es el 4 por ejemplo va rellenando con espacios en blanco hasta llegar al día de comienzo. Una vez en el día de comienzo empieza a escribir en cada celda los días del mes hasta alcanzar el final. Si el día coincide con el día actual, lo pinta de rojo.

El código lo veo sencillo y efectivo, hace perfectamente lo que pedía el ejercicio. Hay algún detalle como usar:

Date.prototype.monthDays= function(){
var d= new Date(this.getFullYear(), this.getMonth()+1, 0);
return d.getDate();
}

Esto no parece que realmente fuera necesario, pero es un buen ejemplo de uso de prototype para conseguir por herencia características comunes a objetos.

Quien quiera ver otra solución puede hacerlo en este otro hilo https://www.aprenderaprogramar.com/foros/index.php?topic=3522.0

Saludos

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

Noticias: