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: bermartinv en 04 de Abril 2016, 18:25
-
Ejercicio CU01191E del curso básico de desarrollo web con JavaScript desde cero.
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.
<!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!!!!
-
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!
-
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.
<!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.
-
Ahora lo veo perfecto ;D