View
457
Download
4
Category
Preview:
Citation preview
Capítulo 8. Otras utilidades de javascript
Preparado por:
Aguilar Maidelyn, Martínez Kathya, Trujillo Silvia
12 Junio 2012
Universidad de PanamáCentro Regional Universitario de Coclé
Facultad de Informática, Electrónica y ComunicaciónLicenciatura en Informática para la Gestión Educativa y Empresarial
Asignatura: Programación Web
Profesora: Arelis Valdés
CONTENIDO
CAPÍTULO 8
8.1. RELOJES - FUNCIONES
8.2. SINTAXIS DE UN EJEMPLO
8.3. EJEMPLO DE RELOJ
8.4. CALENDARIO
8.5. EJEMPLO DE CALENDARIO
8.6. TOOLTIP
8.7. PASOS PARA HACER UN TOOLTIP
8.8. LIBRERÍA OVERLIB
8.10.EJEMPLO CON TOOLTIP
8.11.RESULTADO DEL TOOLTIP
8.9. FUNCIONES DEL TOOLTIP
INTRODUCCIÓN
CONTENIDO…
8.12. MENÚ DESPLEGABLE
8.13. SINTAXIS DE UN EJEMPLO
8.14.EJEMPLO SENCILLO
8.15.GALERÍA DE IMÁGENES
8.16. PAQUETE DE IMÁGENES
CONCLUSIÓN
Introducción
• En el capítulo 8 pretendemos ofrecer información mas esencial para aprender a incluir scripts como calendario, reloj, menú desplegable, tooltip, galería de imágenes los cuales se programan en el lenguaje de javascript que nos pueden ayudar a aplicar dinamismo a una página web.
SEGUIR
Capítulo 8: Otras utilidades básicas dentro de una página web con Javascript
• Reloj• Calendario• Tooltip• Menú desplegables• Galería de Imagénes
SEGUIR
8.1. Relojes--Funciones
• Actualizar• Contar• Marcar• GenerarLas horas indefinidamente.
SEGUIR
8.2. Sintaxis de un ejemplo• function mueveReloj(){ • momentoActual = new Date() • hora = momentoActual.getHours() • minuto = momentoActual.getMinutes() • segundo = momentoActual.getSeconds() • str_segundo = new String (segundo) • if (str_segundo.length == 1) • segundo = "0" + segundo • str_minuto = new String (minuto) • if (str_minuto.length == 1) • minuto = "0" + minuto • str_hora = new String (hora) • if (str_hora.length == 1) • hora = "0" + hora • horaImprimible = hora + " : " + minuto + " : " + segundo • document.form_reloj.reloj.value = horaImprimible • setInterval("mueveReloj()",1000) • }
utilidad que proporciona JavaScript para crear fechas y horas
Indicar que se ejecute dentro de 1 segundo
Esta función hace que el reloj se ejecute indefinidamente
SEGUIR
8.3. Ejemplo Completo
F:\PROGRA.PARA WEB\ejem_libro_int_java
SEGUIR
El calendario es una cuenta sistematizada del transcurso del tiempo, utilizado para la organización cronológica de las actividades humanas.
http://sourceforge.net/projects/jscalendar/
<head><style type="text/css">@import url("css/calendar-estilo.css");</style><script type="text/javascript" src="js/calendar.js" /><script type="text/javascript" src="js/calendar-es.js" /><script type="text/javascript" src="js/calendar-setup.js" /></head>
8.4. Calendario
SEGUIR
ifFormat
button
inputField
PropiedadesElementos
Cuadro de texto
Imagen o icono
8.5. Ejemplo
SEGUIR
8.6. Tooltip
• Los tooltips son pequeños recuadros de información que aparecen al posicionar el ratón sobre un elemento. Se utilizan para ofrecer información adicional sobre el elemento seleccionado o para mostrar al usuario pequeños mensajes de ayuda.
SEGUIR
8.7. Pasos necesarios para incluir un tooltip básico en cualquier página web:
1) Enlazar los archivos JavaScript requeridos.http://www.bosrup.com/web/overlib/
2) Definir el texto que activa el tooltip y su contenido.
SEGUIR
8.8. Uso de la librería overLIB
• La librería overLIB permite configurar completamente el aspecto y comportamiento de cada tooltip. Las opciones se indican en cada tooltip y se incluyen como parámetros al final de la llamada a la función overlib();
SEGUIR
8.9. Funciones del Tooltip
• onmouseover = el dispositivo apuntador se sitúa sobre un elemento
• onmouseout = el dispositivo apuntador se aparta de un elemento.
SEGUIR
8.10. Ejemplo con tooltip
SEGUIR
8.11. Resultado del ejemplo con tooltip
SEGUIR
8.12. Menú desplegable
• Navegación• Menús• Horizontal y Vertical• Niveles • Usuario• Elemento
SEGUIR
8.13. Sintaxis de un ejemplo• <body>• <ul class="menu" id="menu">• <li><a href="#" class="menulink">Frutas</a>• <ul>• <li><a href="#">Manzana</a></li>• <li>• <a href="#" class="sub">Uva</a>• <ul>• <li class="topline"><a href="#">Verdes</a></li>• <li><a href="#">Sin semillas</a></li>• <li><a href="#">Negras</a></li>• <li><a href="#">Amarillas</a></li>• <li><a href="#">Rojas</a></li>• </ul>• <li>• <li>• <a href="#" class="sub">Mangos</a>• <ul>• <li class="topline"><a href="#">Piñas</a></li>• <li><a href="#">Alcanfor</a></li>• <li>• …..• <html>
Contiene las etiquetas que irán dentro de
cada menú
SEGUIR
8.14. Ejemplo Sencillo
• F:\PROGRA.PARA WEB\ejem_libro_int_java\dropdown-menu\dropdown-menu
SEGUIR
8.15. Galerías de imágenes (Lightbox)
La galería no es mas que un espacio que se le otorga dentro de la pagina a las fotos e imágenes.Técnica Lightbox
Http://www.huddletogether.com/projects/lightbox2/
SEGUIR
8.16. PAQUETE DE IMÁGENES
SEGUIR
ConclusiónHemos aprendido de explicar el capítulo 8, en donde nos podemos percatar que los errores mas comunes al ejecutar JavaScript son los errores de sintaxis por escribir de manera errónea las líneas de código a la hora de escribir nombres de una estructura o utilizar llaves o paréntesis incorrectamente.
Hemos aprendido que las pequeñas utilidades que contiene una página web hacen de esta una página dinámica con una mejor navegabilidad.
Como construir nuestros propios objetos dentro de una página y conociendo la función que realiza cada una de ellas.
GRACIAS POR SU ATENCIÓN
Recommended