Javascript: lenguaje interactivo para dinamizar la web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 26
Visitas el mes pasado: 41
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
En la página anterior vimos cómo escribir una fecha y cómo acceder a las distintas partes de la misma (dia, mes, año, etc). Aquí veremos cómo cambiar las partes de la misma.
Los métodos javascript para leer las fechas empezaban todos por la
palabra get
. Si cambiamos la palabra get
por la palabra set
, tenemos
los métodos de escritura. El funcionamiento es idéntico a los métodos de lectura,
es decir, debemos poner delante y separado por un punto la variable donde
guardamos la fecha, sin embargo dentro del paréntesis debemos poner el número
o la variable que queremos modificar:
fecha = new Date();
nuevoDia = 1;
fecha.setDate(nuevoDia)
En este ejemplo cambiamos el día del mes de la fecha actual, de forma que cambiará el día pero el resto de la fecha queda como está.
La lista de los métodos de escritura es la siguiente.
getTime()
devuelve el número de milisegundos desde el 1 de enero de 1970. Con la función
setTime()
Cambiamos la fecha entera al cambiar este número.Estos métodos son sólo de escritura, ya que si intentamos leer la fecha con cualquiera de estos métodos nos devuelve el número de milisegundos transcurridos desde el 1-enero-1970.
Por otra parte el método de lectura getDay()
, que corresponde al
día de la semana, no tiene correspondencia en los métodos de escritura, ya que
no podemos modificar el día de la semana sin modificar el día del mes.
Una de las operaciones más habituales es sumar o restar días a una fecha, por ejemplo saber qué fecha será dentro de 120 días. para ello lo primero que haremos será obtener el día del mes actual:
fecha = new Date();
diaActual = fecha.getDate();
Después le sumamos (o restamos) el número de días que nos separan de la nueva fecha:
diaBuscado = diaActual + 120
Después cambiamos el día mediante la función de escritura setDate()
fecha.setDate(diaBuscado)
El valor de fecha
ha aumentado en 120 días, haciendo las modificaciones
necesarias para ver la fecha correcta.
puedes ver este ejemplo, en el que se muestra que fecha será dentro de 120 días pulsando en el siguiente párrafo. La fecha se nuestra en formato del objeto Date, en un mensaje de alerta:
Pulsa aquí para ver que fecha será dentro de 120 días.
De forma similar se pueden sumar o restar años, meses, horas, minutos o segundos.
La siguiente página de ejemplo permite al usuario cambiar la fecha, por otra que él escribe. este es su código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> <script type="text/javascript"> var Semana = ["domingo","lunes","martes","miércoles","jueves","viernes","sábado"]; var Mes = ["enero","febrero","marzo","abril","mayo","junio","julio","agosto","septiembre","octubre","noviembre","diciembre"]; hoy = new Date() //fecha actual var diaS = hoy.getDay(); diaS = Semana[diaS] //lectura de fecha actual ... var diaM = hoy.getDate() var mes = hoy.getMonth(); mes = Mes[mes] var ano = hoy.getFullYear() var hora = hoy.getHours() var minuto = hoy.getMinutes() var segundo = hoy.getSeconds() miFecha = hoy //inicio de fecha modificada function cambios() { diaN = document.nueva.diaN.value;diaN = Number(diaN) //recoger datos del usuario ... mesN = document.nueva.mesN.value; mesN = Number(mesN); mesN-- anoN = document.nueva.anoN.value; anoN = Number(anoN); horaN = document.nueva.horaN.value; horaN = Number(horaN) minutoN = document.nueva.minutoN.value; minutoN = Number(minutoN) segundoN = document.nueva.segundoN.value; segundoN = Number(segundoN) if (isNaN(diaN) || diaN<=0) { miDia = diaM } //modificar día del mes else { miFecha.setDate(diaN) } miDia = miFecha.getDate() if (isNaN(mesN)|| mesN<0 || mesN>12) { miMes = mes } //modificar mes else { miFecha.setMonth(mesN) } miM = miFecha.getMonth(); miMes = Mes[miM] if (isNaN(anoN) || anoN<=0) { miAno = ano } //modificar año else { miFecha.setFullYear(anoN) } miAno = miFecha.getFullYear(); if (isNaN(horaN) || horaN=="") { miHora = hora } //modificar hora else { miFecha.setHours(horaN) } miHora = miFecha.getHours() if (isNaN(minutoN) || minutoN=="") { miMinuto = minuto } //modificar minuto else { miFecha.setMinutes(minutoN) } miMinuto = miFecha.getMinutes() if (isNaN(segundoN) ||segundoN=="") { miSegundo = segundo } //modificar segundo else { miFecha.setSeconds(segundoN) } miSegundo = miFecha.getSeconds() miS = miFecha.getDay(); miSemana = Semana[miS] //dia de semana en nueva fecha texto2 = document.getElementById("nuevo") // escribir nuevos datos texto2.innerHTML = miSemana+", "+miDia+" de "+miMes+" de "+miAno texto2.innerHTML += ", hora: "+miHora+"h. "+miMinuto+"min, "+ miSegundo +"seg." } window.onload = function() { texto = document.getElementById("actual") //escribir fecha actual texto.innerHTML = diaS+", "+diaM+" de "+mes+" de "+ano texto.innerHTML += ", hora: "+hora+"h. "+minuto+"min, "+ segundo +"seg." } </script> </head> <body> <p>Cambiar la fecha</p> <p>Esta es la fecha actual:</p> <p id="actual"></p> <form action="#" name="nueva"> <p>Escribe los cambios a la fecha actual: (el mes en número)</p> <p>dia: <input type="text" size="4" maxlength="4" name="diaN" /> ... mes: <input type="text" size="4" maxlength="4" name="mesN" /> ... año: <input type="text" size="4" maxlength="4" name="anoN" /> ... hora: <input type="text" size="4" maxlength="4" name="horaN" /> ... minuto: <input type="text" size="4" maxlength="4" name="minutoN" /> ... segundo: <input type="text" size="4" maxlength="4" name="segundoN" /> </p> <p><input type="button" onclick="cambios()" value="Ver cambios" /></p> </form> <p>Pulsa el botón "Ver cambios" para ver tu nueva fecha.</p> <p id="nuevo"></p> </body> </html>
Puedes ver cómo queda esta página de ejemplo en tu navegador, pulsando en el siguiente enlace:
En la siguiente página veremos métodos para el control del tiempo en la ejecución de scripts
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com