<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body style="color:white;background-color:black">
<h4>Codigo para pruebas</h4>
<p id="campo_para_mostrar_datos"></p>
<input type="text" id="campo_para_ingresar_datos" placeholder="Ingrese informacion">
<button onclick="fn_Presionar_Boton()">Mensaje en el boton</button>
<script>
function fn_Presionar_Boton() // Codigo de ejemplo al presionar el boton
{ console.log("Iniciando fn_Presionar_Boton");
alert("Hago algo al presionar el boton");
//Codigo para recuperar
let info_campo = document.getElementById("campo_para_ingresar_datos").value;
info_campo = info_campo.trim(); // Elimina los espacios en blanco
let longitud_campo = info_campo.length; // Determina la longitud del campo.
if (longitud_campo==0) // Verifica el campo tenga texto
{ alert("No ingresaste nada"); }
else
{ alert ("Ingresaste ["+info_campo+"] con longitud ["+longitud_campo+"]" )
//Codigo para copiar el contenido dentro del campo de texto
document.getElementById("campo_para_mostrar_datos").textContent = "Información ingresada : "+info_campo;
}//fin if
}//fin de function fn_Presionar_Boton()
</script>
</body>
</html>
OBJETO DATE
Sobre la clase Date recae todo el trabajo con fechas y horas en Javascript, como obtener una fecha, el día la hora actuales y otras cosas. Para trabajar con fechas necesitamos instanciar un objeto de la clase Date y con él ya podemos realizar las operaciones que necesitemos.
Un objeto de la clase Date se puede crear de dos maneras distintas. Por un lado podemos crear el objeto con el día y hora actuales y por otro podemos crearlo con un día y hora distintos a los actuales. Esto depende de los parámetros que pasemos al construir los objetos.
Para crear un objeto fecha con el día y hora actuales colocamos los paréntesis vacíos al llamar al constructor de la clase Date.
<script>
let miFecha = new Date()
</script>
Para crear un objeto fecha con un día y hora distintos de los actuales tenemos que indicar entre paréntesis el momento con que inicializar el objeto. Hay varias maneras de expresar un día y hora válidas, por eso podemos construir una fecha guiándonos por varios esquemas. Estos son dos de ellos, suficientes para crear todo tipo de fechas y horas.
<script>
let miFecha = new Date(año,mes,dia,hora,minutos,segundos)
let miFecha2 = new Date(año,mes,dia)
</script>
Los valores que debe recibir el constructor son siempre numéricos. Un detalle: el mes comienza por 0, es decir, enero es el mes 0. Si no indicamos la hora, el objeto fecha se crea con hora 00:00:00.
Los objetos de la clase Date no tienen propiedades pero si metodos.
getDate() |
Devuelve el día del mes, un valor que puede ir desde 1 a 31. Depende del mes que sea, claro. |
getDay() |
Devuelve el día de la semana. Por ejemplo, si la fecha corresponde con el martes te devolvería 2. |
getHours() |
Devuelve el valor de la hora. |
getMinutes() |
Devuelve los minutos. |
getMonth() |
Devuelve el mes, comenzando por cero (atención a este valor porque el mes de enero correspondería con el valor 0, o diciembre con el 11). |
getSeconds() |
Devuelve los segundos. |
getTime() |
Devuelve los milisegundos transcurridos entre el día 1 de enero de 1970 y la fecha correspondiente al objeto al que se le pasa el mensaje. |
getFullYear() |
Retorna el año con todos los dígitos. Usar este método para estar seguros de que funcionará todo bien en fechas posteriores al año 2000. |
setDate() |
Actualiza el día del mes. |
setHours() |
Actualiza la hora. |
setMinutes() |
Cambia los minutos. |
setMonth() |
Cambia el mes (atención al mes que empieza por 0). |
setSeconds() |
Cambia los segundos |
setTime() |
Actualiza la fecha completa. Recibe un número de milisegundos desde el 1 de enero de 1970. |
setFullYear() |
Cambia el año de la fecha al número que recibe por parámetro. El número se indica completo ej: 2005 o 1995. Utilizar este método para estar seguros que todo funciona para fechas posteriores a 2000.
Como habréis podido apreciar, hay algún método obsoleto por cuestiones relativas al año 2000: setYear() y getYear(). Estos métodos se comportan bien en Internet Explorer y no nos dará ningún problema el utilizarlos. Sin embrago, no funcionarán correctamente en Netscape, por lo que es interesante que utilicemos en su lugar los métodos getFullYear() y setFullYear(), que funcionan bien en Netscape e Internet Explorer.
|
fechas en Javascript
Visto lo anterior, ahora podemos poner los conocimientos en la práctica en un ejemplo completo de trabajo con objetos de la clase Date.
En este ejemplo vamos a crear dos fechas, una con el instante actual y otra con fecha del pasado. Luego las imprimiremos las dos y extraeremos su año para imprimirlo también. Luego actualizaremos el año de una de las fechas y la volveremos a escribir con un formato más legible.
Ejemplo
<script>
//en estas líneas creamos las fechas
let miFechaActual = new Date();
let miFechaPasada = new Date(1998,4,23);
//en estas líneas imprimimos las fechas.
console.log (miFechaActual);
console.log (miFechaPasada)
//extraemos el año de las dos fechas
let anoActual = miFechaActual.getFullYear()
let anoPasado = miFechaPasada.getFullYear()
//Escribimos en año en la página
console.log("El año actual es: " + anoActual)
console.log("El año pasado es: " + anoPasado)
//cambiamos el año en la fecha actual
miFechaActual.setFullYear(2005)
//extraemos el día mes y año
let diaForzado = miFechaActual.getDate()
let mesForzado = parseInt(miFechaActual.getMonth()) + 1
let añoForzado = miFechaActual.getFullYear()
//escribimos la fecha en un formato legible
console.log ("Fecha Forzada = "+diaForzado + "/" + mesForzado + "/" + añoForzado)
//cambiamos el año en la fecha actual
miFechaActual =new Date();
//extraemos el día mes y año
let dia = miFechaActual.getDate()
let mes = parseInt(miFechaActual.getMonth()) + 1
let año = miFechaActual.getFullYear()
//escribimos la fecha en un formato legible
console.log ("Fecha real =" +dia + "/" + mes + "/" + año)
</script>
ACTIVIDADES A REALIZAR
Objetivo: Buenas practicas para utilizar un objeto.
Consideraciones:
- El código debe estar documentado y seguir buenas prácticas de programación.
- El código debe ser legible y fácil de entender
Crea un documento HTML y su codigo JavaScript asociado.
El HTML debe mostrar la hora y fecha actual.
Recomendado investiga como ejecutar la funcion cada segundo para actualizar continuamente la hora y la fecha.
Procura no copiar directamente la respuesta desde una IA