Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Prácticas Javascript

Ejercicios de prácticas para crear elementos interactivos con javascript


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Tiempo IV

Calendario I

Descripción del ejercicio

En esta página y las siguientes haremos un ejercicio que consistirá en la creación de un calendario. Este nos mostrará en principio el mes actual, y debajo del mismo la fecha actual. También podremos mediante otros enlaces ver el mes anterior y el siguiente del mostrado. Debajo del mismo pondremos un formulario que nos permitirá visualizar cualquier otro mes de cualquier otro año.

Para hacernos una idea vemos en el siguiente enlace cómo debe quedar la página del ejercicio una vez finalizado:

Calendario Finalizado


El calendario tiene las siguientes características:

Para la creación del calendario utilizaremos varios archivos, uno para cada tipo de lenguaje. es decir un archivo HTML, otro CSS y otro Javascript, convenientemente enlazados.


El archivo HTML

Empezaremos por el archivo HTML, al cual llamaremos "calendario.html":


La cabecera:

Empezamos a crear el archivo, en el cual ponemos la siguiente cabecera (etiqueta head):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Calendario</title> 
<link rel="stylesheet" type="text/css" href="calendario.css" media="all" />
<script type="text/javascript" src="calendario.js"></script>
</head>

Simplemente observar que enlazamos con los archivos CSS y Javascript, los cuales crearemos más adelante. Continuamos con el "body". Aquí crearemos un div id="calendario" que englobará el calendario. Veamos cómo lo construimos:


Calendario: parte superior
<body>
<h1>Calendario con javascript</h1>
<br/><br/>
<div id="calendario">
  <div id="anterior" onclick="mesantes()"></div>
  <div id="posterior" onclick="mesdespues()"></div>
  <h2 id="titulos"></h2>
  ...

Empezamos a crear el div del calendario. Aquí creamos la cabecera del calendario:

Como estos elementos son cambiantes, y los buscaremos mediante javascript, de momento los hemos dejado vacíos.


Cuerpo principal del calendario

El siguiente paso es hacer el cuerpo principal del calendario, es decir, una tabla en la que en la primera fila estén los días de la semana, y en las demás los días del mes, distribuídos según el día que les corresponda. Seguiremos el código de la siguiente forma:

  <table id="diasc">
    <tr id="fila0"><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr>
    <tr id="fila1"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr id="fila2"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr id="fila3"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr id="fila4"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr id="fila5"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr id="fila6"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  </table>

Hemos construido aquí una tabla de 7 por 7 celdas, las cuales están todas vacías. La primera fila tiene etiquetas th, ya que es ahí donde pondremos los nombres de los días de la semana. Las otras seis filas las ocuparemos con los números correspondientes a los días del mes. Todas las celdas están vacías, ya que las rellenaremos mediante javascript.

Observa cómo cada etiqueta de fila tiene un "id" con un número (filaN); esto nos simplificará el código javascript cuando tengamos que buscar el número correspondiente a cada celda.


Línea de la fecha actual

Seguimos escribiendo el código, con una línea que nos mostrará la fecha actual:

<div id="fechaactual"><i onclick="actualizar()">HOY: </i></div>

También rellenaremos esta línea mediante javascript, para poner el día de la semana y la fecha actual; El evento "onclick" nos lleva a la funcion actualizar(). Esta función devolverá el calendario al mes actual.


Linea de buscar fecha

La última línea nos servirá para poder mostrar cualquier otro mes en el calendario. Para ello la línea consta de un formulario en el que introducimos el mes y el año que queremos ver. Una función javascript se encargará de buscar y mostrar el mes indicado. El código HTML seguirá así:

<div id="buscafecha">
    <form action="#" name="buscar">
      <p>Buscar ... MES
        <select name="buscames">
          <option value="0">Enero</option>
          <option value="1">Febrero</option>
          <option value="2">Marzo</option>
          <option value="3">Abril</option>
          <option value="4">Mayo</option>
          <option value="5">Junio</option>
          <option value="6">Julio</option>
          <option value="7">Agosto</option>
          <option value="8">Septiembre</option>
          <option value="9">Octubre</option>
          <option value="10">Noviembre</option>
          <option value="11">Diciembre</option>
        </select>
      ... AÑO ...
        <input type="text" name="buscaanno" maxlength="4" size="4" />
      ... 
        <input type="button" value="BUSCAR" onclick="mifecha()" />
      </p>
    </form>
  </div>

El formulario consta de tres partes, en la primera una etiqueta select nos permite elegir un mes del año. Observa que los valores de los meses se corresponden con el valor que obtenemos en javascript mediante getMonth(). La segunda parte nos permite elegir el año mediante una etiqueta input type="text". La tercera parte es el botón que pulsaremos para buscar el mes del calendario una vez hallamos rellenado los otros dos; al pulsarlo llamaremos a una función javascript (mi fecha()) que nos buscará el mes y año indicado.

Por último cerramos el div "calendario" que tenemos todavía abierto, y acabamos la página:

</div>
</body>
</html>

Hemos acabado el archivo HTML, para hacernos una idea de lo que hemos hecho abrimos el archivo en el navegador y lo vemos como en el siguiente enlace:

Calendario - fase 1

La página no se parece mucho a lo que pretendemos que sea su aspecto final, sin embargo puede mejorar considerablemente al crear la hoja de estilo CSS.


El archivo CSS

Tal como hemos indicado en el código anterior. crearemos un archivo CSS llamado "calendario.css" y ubicado en el mismo directorio que el archivo HTML.

Pondremos en principio algunas instrucciones CSS para dar forma al calendario y hacernos una idea de como queda. Empezaremos por dar unas instrucciones generales para la página y para la cabecera de la misma:

/*instrucciones generales*/
* { margin: auto; }
/*cabecera de la página*/
h1 { text-align: center; padding: 0.5em; }

Seguimos con el div principal del calendario: bordes, margenes, color de fondo, y alineación centrada:

/*div principal del calendario*/
#calendario { border: 4px double black ; max-width: 536px; 
              background-color:#fffafa; text-align: center; }

Continuamos con la tabla que forma el calendario. le damos forma a las celdas, las cuales las separamos y les ponemos un color de fondo. También indicamos un color para cuando escribamos algo en ellas.

/*tabla del calendario*/
#diasc { border: 1px solid black; border-collapse: 
         separate; border-spacing: 4px; }
#diasc th,#diasc td { font: normal 14pt arial; width: 70px; height: 30px; }
#diasc th { color: #990099; background-color: #5ecdec }
#diasc td { color: #492736; background-color: #9bf5ff }

Seguimos con la línea que indica la fecha actual. indicamos formato para el tipo de letra. El cambio del tipo de cursor y la pseudoclase hover hace que el elemento al que se le aplica tenga aspecto de enlace.

/*línea de la fecha actual*/
#fechaactual { font: bold 12pt arial; padding: 0.4em }
#fechaactual i { cursor: pointer ; }
#fechaactual i:hover { color: blue; text-decoration: underline; }

Por último cambiamos el aspecto del formulario de búsqueda. Cambiamos el color del texto y del fondo, así como algunos aspectos de los elementos del formulario.

/*formulario de busqueda de fechas*/
#buscafecha { background-color: #663366; color: #9bf5ff; padding: 5px }
#buscafecha select, #buscafecha input  { background-color: #9bf5ff; 
            color: #990099; font: bold 10pt arial;  }
#buscafecha [type=text]  { text-align: center; }
#buscafecha  [type=button] { cursor: pointer; }

Nos hemos dejado de aplicar estilo CSS en la cabecera del calendario. Lo haremos más adelante cuando rellenemos el texto de la misma mediante javascript.

Después de escribir el archivo CSS la página del ejercicio la veremos ya como en el siguiente enlace:

Calendario - fase 2


Esto se parece más a lo que queremos que sea la página, sin embargo todavía es una página estática. tenemos que empezar a crear el código javascript, pero eso lo veremos ya en la siguiente página.

En el siguiente enlace se abre una página en la que se muestran los códigos HTML y CSS que hemos escrito hasta ahora.

Código de "calendario" - fase 2






En la siguiente página seguimos creando el calendario. Empezaremos ya con el código javascript

Calendario II.



Practicas js: el tiempo

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com