Foros aprenderaprogramar.com

Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: Pepote21 en 19 de Junio 2017, 09:54

Título: Javascript cómo crear un calendario del mes Objeto Date. Ejercicio CU01162E
Publicado por: Pepote21 en 19 de Junio 2017, 09:54
Hola a todos. Os paso mi código del ejercicio CU01162E del curso de desarrollo web desde cero con JavaScript. Gracias. Un saludo.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
    <head>
        <title>Ejercicio  aprenderaprogramar.com</title>
        <meta charset="utf-8">
        <style type="text/css">
            div{width:400px; height:400px; border:2px solid black; margin:100px; margin-left:400px;}
table{width:300px; font-size:24px; text-align:center; margin:50px;}
        </style>
        <script type="text/javascript">   
            var meses=["enero","febrero","marzo","abril","mayo","junio","julio","agosto","septiembre","octubre","noviembre","diciembre"];
            var dias=["lunes","martes","miercoles","jueves","viernes","sabado","domingo"];
function tituloCalendario(mes,ano){
    var titulo=document.getElementById('titulo');
titulo.innerHTML=meses[mes]+' DE '+ano;
}
function nombreDiasSemana(){
    var nodoFila0=document.getElementById('fila0');
for(var i=0;i<7;i++){
    var dia=nodoFila0.getElementsByTagName('th')[i];
dia.innerHTML=dias[i].toUpperCase().substring(0,2);
}
}
function calcularDiasMes(ano,mes){
var a=new Date();
                var diasMes=(Date.UTC(a.getFullYear(),a.getMonth()+1)-Date.UTC(a.getFullYear(),a.getMonth()))/1000/60/60/24;
return diasMes;
            }
function diaSemana(ano,mes){
    var diaUno=new Date(ano,mes,0);
var dia1=diaUno.getDay();
return dia1;
}
function agregarDias(hoy,diasMes,diaUno){
var tds=document.getElementsByTagName('td');
var cont=1;
for(var i=0;i<tds.length;i++){
    if (diaUno!=0){
                        tds[i].innerHTML = ' ' ;
                        diaUno--;
                    }else if (diaUno==0 && cont<=diasMes){
                        tds[i].innerHTML=cont;
                        if (hoy.getDate() == cont){
                            tds[i].style.color = 'blue';
                        }
                        cont++;             
                    }
}
            }         
window.onload=function(){    
var hoy=new Date();
var mesActual=hoy.getUTCMonth();
meses[mesActual]=meses[mesActual].toUpperCase();
var anoActual=hoy.getUTCFullYear();
tituloCalendario(mesActual,anoActual);
nombreDiasSemana();
var diasMes=calcularDiasMes(anoActual,mesActual);
var diaUno=diaSemana(anoActual,mesActual);
agregarDias(hoy,diasMes,diaUno);
}
        </script>
    </head>
    <body>
    <script type="text/javascript">
           
        </script>
        <h1>Calendario</h1>
<div id="calendario">
    <table>
                <caption id="titulo"></caption>
                <tr id="fila0"><th></th><th></th><th></th><th></th><th></th><th></th><th></th></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>
Título: Re:Javascript Objeto Date. Ejercicio CU01162E
Publicado por: Pepote21 en 19 de Junio 2017, 17:14
Hola de nuevo. Había cometido un error en el código y lo paso nuevo ya rectifricad. Espero que solo sea uno.
Gracias
Un saludo

Código: [Seleccionar]
<!DOCTYPE html>
<html>
    <head>
        <title>Ejercicio  aprenderaprogramar.com</title>
        <meta charset="utf-8">
        <style type="text/css">
            div{width:400px; height:400px; border:2px solid black; margin:100px; margin-left:400px;}
table{width:300px; font-size:24px; text-align:center; margin:50px;}
        </style>
        <script type="text/javascript">   
            var meses=["enero","febrero","marzo","abril","mayo","junio","julio","agosto","septiembre","octubre","noviembre","diciembre"];
            var dias=["lunes","martes","miercoles","jueves","viernes","sabado","domingo"];
function tituloCalendario(mes,ano){
    var titulo=document.getElementById('titulo');
titulo.innerHTML=meses[mes]+' DE '+ano;
}
function nombreDiasSemana(){
    var nodoFila0=document.getElementById('fila0');
for(var i=0;i<7;i++){
    var dia=nodoFila0.getElementsByTagName('th')[i];
dia.innerHTML=dias[i].toUpperCase().substring(0,2);
}
}
function calcularDiasMes(a){

                var diasMes=(Date.UTC(a.getFullYear(),a.getMonth()+1)-Date.UTC(a.getFullYear(),a.getMonth()))/1000/60/60/24;
return diasMes;
            }
function diaSemana(ano,mes){
    var diaUno=new Date(ano,mes,0);
var dia1=diaUno.getDay();
return dia1;
}
function agregarDias(hoy,diasMes,diaUno){
var tds=document.getElementsByTagName('td');
var cont=1;
for(var i=0;i<tds.length;i++){
    if (diaUno!=0){
                        tds[i].innerHTML = ' ' ;
                        diaUno--;
                    }else if (diaUno==0 && cont<=diasMes){
                        tds[i].innerHTML=cont;
                        if (hoy.getDate() == cont){
                            tds[i].style.color = 'blue';
                        }
                        cont++;             
                    }
}
            }         
window.onload=function(){    
var hoy=new Date();
var mesActual=hoy.getUTCMonth();
meses[mesActual]=meses[mesActual].toUpperCase();
var anoActual=hoy.getUTCFullYear();
tituloCalendario(mesActual,anoActual);
nombreDiasSemana();
var diasMes=calcularDiasMes(hoy);
var diaUno=diaSemana(anoActual,mesActual);
agregarDias(hoy,diasMes,diaUno);
}
        </script>
    </head>
    <body>
    <script type="text/javascript">
           
        </script>
        <h1>Calendario</h1>
<div id="calendario">
    <table>
                <caption id="titulo"></caption>
                <tr id="fila0"><th></th><th></th><th></th><th></th><th></th><th></th><th></th></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>

Título: Re:Javascript cómo crear un calendario del mes Objeto Date. Ejercicio CU01162E
Publicado por: Ogramar en 08 de Julio 2017, 12:34
Buenas Pepote21, el ejercicio cumple con lo que se pedía, buen código.

En este hilo puede verse otra forma de resolverlo interesante: https://www.aprenderaprogramar.com/foros/index.php?topic=6037.0

Salu2