Autor Tema: Importancia usar buen estilo al programar normas de estilo JavaScript CU01191E (Leído 2801 veces)

bermartinv · « **en:** 04 de Abril 2016, 18:25 »

Ejercicio CU01191E del curso básico de desarrollo web con JavaScript desde cero.

Citar

a) Reescribe el código HTML que presenta distintas deficiencias y no se ajusta a las normas de estilo habituales.

b) Reescribe el código JavaScript para que cumpla con las normas de estilo que hemos estudiado.

c) Corrige el código del reloj para que se vea una mejor presentación y funcione correctamente.

d) Incluye comentarios en el código indicando qué es lo que hacen las diferentes partes del código JavaScript.

e) Como resultado de este ejercicio debes presentar el código con todos los cambios antes mencionados.

Código: [Seleccionar]

 <!DOCTYPE html>
 <html>
 <head>
 <title>Hora y Fecha</title>
<style>
    #contenedor{
        background-image:url('http://lh5.ggpht.com/_PeVwghrmOec/TMkzEonRrcI/AAAAAAAAAHc/IxL8g0fTYtk/an_oliva_png.png');
        background-repeat: no-repeat;
        background-size:200px 200px;
        background-position: center;
        width:300px;
        height:200px;
        border:solid thin black;
        padding:10px;
        position: relative;
        box-shadow: 10px 10px 10px;
        top:150px;
        left:35%;
        
    }  
    
    #contenedor div{
        display: inline-block;
    }
    
    #clock{
        background-color: antiquewhite;
        border: solid thin coral ;
        position:absolute;
        width:90px;
        
        bottom :10px;
        left:10px;
        text-align: center;
        line-height: 30px;
        
        
    }
    
    #fecha{
        background-color: antiquewhite;
        border: solid thin coral ;
        position:absolute;
        width:90px;
        
        bottom:10px;
        left:215px;
        text-align: center;
        line-height: 30px;
    }
    
    
    #enlace{
        position: absolute;
        bottom: 60px;
        left:40px;
        height:30px;
        width:230px;
        border:solid thin black;
        border-radius:25px;
        background-color:gainsboro;
        text-align: center;
        font-size:20px;
    }
</style>
 <script language="JavaScript">
// Se carga la ejecución cuando se haya cargado todos los elementos de la pagina html
window.onload = function() {
    
    // LLamada a la función para la fecha
    
    getthedate()

    // Llamada a la funcion para la hora
    showtime();
    
}


// funcion para recuperar la fecha actual y mostrarlo en el codigo html en la etiqueta con id = 'fecha'
function getthedate() {
    
    var today = new Date();
    
    var fecha = document.getElementById('fecha');
    
    theDate = "" + (today.getMonth()+ 1) +" / "+ today.getDate() + " / ";
    
    theDate += today.getFullYear();

    fecha.innerHTML = theDate;

}


 
// funcion para recuperar la hora actual y mostrarlo en el código html en la etiqueta con id='clock'
function showtime () {

    var now = new Date(); 
    
    var hours = now.getHours(); 
    
    var minutes = now.getMinutes();

    var seconds = now.getSeconds();
    
    var reloj = document.getElementById('clock');

    var timeValue = "" + ((hours >12) ? hours -12 :hours);

    timeValue += ((minutes < 10) ? ":0" : ":") + minutes;

    timeValue += ((seconds < 10) ? ":0" : ":") + seconds;

    timeValue += (hours >= 12) ? " P.M." : " A.M.";

    reloj.innerHTML = timeValue;

    var timerID = setTimeout("showtime()",1000); 

}

</script>

</head>

<body>

<div id='contenedor'>
    <h2>Esto es un reloj hecho con JavaScript</h2>
        <div id = 'clock'></div>
        <div id = 'fecha'></div>
        <div id = 'enlace'>
            
                <a href="http://aprenderaprogramar.com">aprenderaprogramar.com</a>
            
        </div>
</div>

</body>
</html>

Saludos!!!!

César Krall · « **Respuesta #1 en:** 06 de Abril 2016, 11:22 »

Hola! En mi navegador no se ve del todo bien porque el reloj queda tapado en parte por el link de aprenderaprogramar.com

Algunos detalles:

Usar la sintaxis camelCase para declarar nombres de variables y funciones: por ejemplo en lugar de getthedate() usar getTheDate()

En lugar de <script language="JavaScript"> preferible <script type="text/javascript"> o simplemente <script>

Saludos!

bermartinv · « **Respuesta #2 en:** 06 de Abril 2016, 11:58 »

Gracias César Krall,
por tu tiempo. Tienes razón sobre lo de usar camelCase, se me pasó.
Sobre el código que dices que no ves bien el logo, modifico un height. Y así se ve mejor.

Código: [Seleccionar]

<!DOCTYPE html>
 <html>
 <head>
 <title>Hora y Fecha</title>
<style>
    #contenedor{
        background-image:url('http://lh5.ggpht.com/_PeVwghrmOec/TMkzEonRrcI/AAAAAAAAAHc/IxL8g0fTYtk/an_oliva_png.png');
        background-repeat: no-repeat;
        background-size:200px 200px;
        background-position: center;
        width:300px;
        height:400px;
        border:solid thin black;
        padding:10px;
        position: relative;
        box-shadow: 10px 10px 10px;
        top:150px;
        left:35%;
       
    } 
   
    #contenedor div{
        display: inline-block;
    }
   
    #clock{
        background-color: antiquewhite;
        border: solid thin coral ;
        position:absolute;
        width:90px;
       
        bottom :10px;
        left:10px;
        text-align: center;
        line-height: 30px;
       
       
    }
   
    #fecha{
        background-color: antiquewhite;
        border: solid thin coral ;
        position:absolute;
        width:90px;
       
        bottom:10px;
        left:215px;
        text-align: center;
        line-height: 30px;
    }
   
   
    #enlace{
        position: absolute;
        bottom: 60px;
        left:40px;
        height:30px;
        width:230px;
        border:solid thin black;
        border-radius:25px;
        background-color:gainsboro;
        text-align: center;
        font-size:20px;
    }
</style>
 <script language="JavaScript">
// Se carga la ejecución cuando se haya cargado todos los elementos de la pagina html
window.onload = function() {
   
    // LLamada a la función para la fecha
   
    getthedate()

    // Llamada a la funcion para la hora
    showtime();
   
}


// funcion para recuperar la fecha actual y mostrarlo en el codigo html en la etiqueta con id = 'fecha'
function getthedate() {
   
    var today = new Date();
   
    var fecha = document.getElementById('fecha');
   
    theDate = "" + (today.getMonth()+ 1) +" / "+ today.getDate() + " / ";
   
    theDate += today.getFullYear();

    fecha.innerHTML = theDate;

}


 
// funcion para recuperar la hora actual y mostrarlo en el código html en la etiqueta con id='clock'
function showtime () {

    var now = new Date();
   
    var hours = now.getHours();
   
    var minutes = now.getMinutes();

    var seconds = now.getSeconds();
   
    var reloj = document.getElementById('clock');

    var timeValue = "" + ((hours >12) ? hours -12 :hours);

    timeValue += ((minutes < 10) ? ":0" : ":") + minutes;

    timeValue += ((seconds < 10) ? ":0" : ":") + seconds;

    timeValue += (hours >= 12) ? " P.M." : " A.M.";

    reloj.innerHTML = timeValue;

    var timerID = setTimeout("showtime()",1000);

}

</script>

</head>

<body>

<div id='contenedor'>
    <h2>Esto es un reloj hecho con JavaScript</h2>
        <div id = 'clock'></div>
        <div id = 'fecha'></div>
        <div id = 'enlace'>
           
                <a href="http://aprenderaprogramar.com">aprenderaprogramar.com</a>
           
        </div>
</div>

</body>
</html>

Saludos y gracias.

César Krall · « **Respuesta #3 en:** 07 de Abril 2016, 14:46 »

Ahora lo veo perfecto

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

Noticias:

Autor Tema: Importancia usar buen estilo al programar normas de estilo JavaScript CU01191E (Leído 2801 veces)

bermartinv

Importancia usar buen estilo al programar normas de estilo JavaScript CU01191E

César Krall

Re:Importancia usar buen estilo al programar normas de estilo JavaScript CU01191E

bermartinv

Re:Importancia usar buen estilo al programar normas de estilo JavaScript CU01191E

César Krall

Re:Importancia usar buen estilo al programar normas de estilo JavaScript CU01191E

Preguntas y respuestas