Javascript 1-2-3

Semana 1 [31-enero al 6-febrero]

Temas

• Hacer las presentaciones de cada miembro en el foro.
• Establecer, de ser posible, un horario común para hacer una o dos sesiones grupales a la semana, según la disponibilidad de tiempo y la ubicación geográfica de cada participante.
• Revisar los temas del 1 al 4 del temario con ayuda del libro Introducción a Javascript (ver la página de recusos en línea), los capítulos 1 y 2 pueden servir para esta parte.

Primer ejercicio

Hay que leer los primeros dos capítulos del libro Introducción a Javascript y hacer como práctica el Ejercicio 1 que viene al final del capítulo 2. Si tienen problemas, allí mismo vienen las soluciones. Subir los archivos al servidor js123.dreamhosters.com en la carpeta js123 y probar que funcionen. Más datos sobre el servidor pueden ser consultados en la sección de Servidor web, en Course Material.

Bonus

Hay que crear una página como la que se requiere en el ejercicio 1 que hicieron como práctica (omitiendo el paso 1, por lo que el código JavaScript debe estar en el mismo archivo html y no en otro aparte). Hay que agregarle un poco más de contenido HTML. La página debe estar escrita en XHTML estricto e incluir el botón del W3C (http://validator.w3.org/) para validarla. Los mensajes que deben desplegarse son los siguientes:

1. "Soy el primer script"
2. "2<3 significa que dos es menor que tres"
3. "<h1> es la etiqueta que marca el inicio de un encabezado de primer nivel"

Ahora hay que solucionar los errores que señala la validación.

Sugerencias

• Comenzar con la siguiente plantilla: http://js123.dreamhosters.com/pares/pascalin/ejercicio1.html
• La solución genérica a los conflictos entre el código JavaScript y el XHTML estricto, y la que se recomienda, es emplear una declaración XML llamada CDATA.

Semana 2 [7-febrero al 13-febrero]

Temas

• Reforzar lo aprendido sobre el flujo de ejecución de Javascript .
• Revisar los elementos básicos de programación en Javascript: variables, tipos de datos, operaciones. Utilizar el capítulo 3 del libro Introducción a Javascript, en particular las secciones 3.1-3.3.
• Utilizar la consola (shell) de Javascript para agilizar el aprendizaje de la sintaxis y los elementos de programación: http://www.squarefree.com/shell/ (dar click donde dice Open the shell para abrir la consola).

Segundo ejercicio

Reunir las tareas indicadas en los ejercicios 2, 3 y 4 del libro, pero empleando, además de la función alert, la función document.write que se utiliza en el ejemplo empleado en la primera presentación: http://js123.dreamhosters.com/pares/pascalin/ejercicio01/index.html para imprimir en la ventana del navegador los resultados de las operaciones solicitadas en el ejercicio 4.

Bonus

1. El código del segundo ejercicio debe seguir validando como XHTML estricto. Incluir el botón de validación.
2. Hacer dos preguntas al usuario empleando la función confirm que se incluyó en el ejemplo de la presentación y almacenar los resultados en dos variables distintas.
3. Escribir el resultado de combinar las dos respuestas del usuario con las operaciones lógicas && (AND) y || (OR).
4. Emplear CSS para hacer que los resultados producidos por Javascript mediante la función document.write aparezcan resaltados en amarillo u algún otro color de su elección.

Sugerencias

• Comenzar con la siguiente plantilla: http://js123.dreamhosters.com/pares/pascalin/ejercicio2.html

Semana 3 [14-febrero al 20-febrero]

Temas

• Control de flujo: if, if ... else, if ... else  if ... else, for, for ... in. Utilizar la sección 3.4 del libro Introducción a Javascript.
• Funciones. Utilizar las secciones 3.5-4.2 del libro Introducción a Javascript.
• Ejecución asíncrona de Javascript (impulsada por eventos). Utilizar el Capítulo 5 del Curso de Javascript (ojo, la información de este curso es algo vieja, pero servirá para darse una idea del tema). También les recomiendo una página que, aunque sólo está en inglés, es una consulta útil para revisar los elementos estándar de HTML: http://htmlhelp.com/reference/html40/alist.html en este sitio pueden revisar los atributos de cada elemento y ver así qué tipos de eventos se aceptan de manera estándar en HTML hasta la versión 4, y por lo tanto también en XHTML 1.0 y 1.1

Tercer ejercicio

Escribir un documento (X)HTML que incluya encabezados, imágenes, párrafos, botones, etc. Implementar tres funciones Javascript:

1. La primera función debe mostrar al usuario el texto: "Hola eventos JavaScript".
2. La segunda función debe preguntarle al usuario mediante una instrucción confirm si debe habilitar la tercera función.
3. La tercera función debe pedir al usuario un texto, empleando la función prompt, debe preguntar al usuario mediante una instrucción confirm si debe mostrar sólo el conteo de las vocales y si el usuario contesta que sí, debe mostrar el conteo de vocales en el texto dado por el usuario, o si contesta negativamente, el conteo total de caracteres (la longitud del texto), mediante la función alert.

Cada función debe ejecutarse cuando se active un evento en la página. El texto de la página o un estilo particular con CSS debe hacer servir de guía al usuario sobre cuáles son los elementos activos (los que causarán que se ejecuten las funciones). La tercera función debe desactivarse cuando el usuario conteste negativamente a la pregunta de la segunda función, y activarse si contesta positivamente o si no se ha ejecutado la segunda función.

Bonus

1. El código del tercer ejercicio debe seguir validando como XHTML estricto. Incluir el botón de validación.
2. Implementar otras dos funciones, una que debe ejecutarse cada vez que se ejecute una de las primeras tres funciones y que debe llevar la cuenta de cuántas veces se ha ejecutado cada una. La otra función debe activarse empleando el evento onunload en el elemento body, de manera que muestre una ventana con alert que resuma el número de veces que se ejecutó cada función.

Sugerencias

• Revisar con cuidado la sección 4.2 del libro Introducción a Javascript, donde se habla del ámbito de las variables, pues para este ejercicio se requerirá el uso de las infames, pero tan socorridas, variables globales.

Semana 4 [21-febrero al 27-febrero]

Temas

• En esta semana revisaremos cómo emplear los objetos en Javascript. Aunque ya hemos empleado sin saberlo objetos, revisaremos por qué elementos se forma el objeto window que crean todos lo navegadores.
• Objetos, métodos y atributos en Javascript.: el objeto window (utilizando objetos de Javascript). Utilizar el Curso de Javascript de Víctor M. Rivas Santos, del Capítulo 5. Window, las secciones de la 1 a la 2.3.
• Explorando el Modelo de Objeto del Documento (DOM) con Javascript. Utilizar las secciones 5.1-5.3 del libro Introducción a Javascript.

Cuarto ejercicio

Todo navegador crea un objeto de tipo window que corresponde a cada ventana o pestaña abierta, y cada objeto window tiene un atributo document que se refiere a otro objeto de tipo HTMLDocument. En este ejercicio lo que hay que hacer es lo siguiente:

1. Crear un documento (X)HTML que debe contener tres botones.
2. Al activarse el primer botón, se debe preguntar al usuario mediante una llamada a confirm la dirección de una página web.
3. Debe abrirse una nueva ventana (ventana 2) y cargar en ésta la dirección indicada por el usuario.
4. El segundo botón, al activarse, debe mostrar en una ventana con la llamada alert la cantidad de nodos p y div que son nodos hijos del nodo correspondiente a la etiqueta body del documento cargado en la ventana 2.
5. El tercer botón debe cerrar la ventana 2.

Bonus

1. El código del tercer ejercicio debe seguir validando como XHTML estricto. Incluir el botón de validación.
2. Además de los tres botones, incluir una imagen en el documento.
3. Incluir un cuarto botón que cada vez que se presione cambie la imagen mostrada, de manera que al menos se muestren 3 imágenes distintas.

Sugerencias

• Desde hace ya varios años la mayoría de los navegadores bloquean las ventanas que un programa Javascript intenta abrir, de manera que para que puedan realizar el ejercicio es posible que tengan que configurar su navegador para que no bloquee la apertura de ventanas, al menos para el servidor que estamos usando para los ejercicios.
• Para el bono hay que tener en cuenta que los objetos tienen además de funciones propias (o métodos), variables propias (propiedades). En los tipos de objetos definidos por el propio lenguaje o incluidos en el navegador muchas propiedades son de solo lectura, como la propiedad length de los objetos String, de las cadenas de texto. Los objetos de tipo HTMLImageElement tienen una propiedad llamada src que corresponde con el atributo del mismo nombre del elemento html img.
• En resumen, en tanto que a la propiedad length de las cadenas de texto no les podemos asignar un nuevo valor, a la propiedad src del nodo correspondiente a la imagen sí le podemos asignar un nuevo valor, como si se tratara de una variable cualquiera.

Semana 5 [28-febrero al 6-marzo]

Temas

• Modificando el Modelo de Objeto del Documento (DOM) con Javascript. Utilizar las secciones 5.4 y 5.5 del libro Introducción a Javascript.
• Javascript que no estorba. Revisar el Retos Javascript: Reto 7.

Semana 6 [7-marzo al 13-marzo]

Temas

• Un poco más de eventos Javascript. Utilizar las secciones 6.1 y 6.2 del capítulo 6 del libro Introducción a Javascript. Particularmente les recomiendo poner atención en el uso de la variable this en el contexto de los manejadores de eventos.
• Portabilidad del código Javascript y seguimiento de los estándares. Pueden utilizar el siguiente documento que trata acerca de algunos problemas con la compatibilidad de Javascript entre distintos navegadores. Incluye varias recomendaciones al respecto: Detección del navegador y cobertura a múltiples navegadores.

Quinto (o sexto) ejercicio

Modificar el código Javascript del siguiente documento: http://js123.dreamhosters.com/pares/pascalin/semana6/innerhtml.html De manera que haga lo siguiente:

1. En lugar de un texto genérico, debe aparecer un texto diferente para cada persona.
2. El texto debe cambiar cuando el puntero del ratón se coloque sobre la imagen, empleando el evento onmouseover, y cuando el puntero no esté apuntando a ninguna imagen debería aparecer un texto indicando lo que se debe hacer para que aparezca la información de cada usuario, emplear para esto el evento onmouseout.

Además de estos cambios en el funcionamiento, el código Javascript debe ser modificado de la siguiente manera:

1. En lugar de emplear la propiedad innerHTML, usar las técnicas que hemos visto empleando el DOM para hacer los cambios.
2. Debe emplearse Javascript no-obstructivo, por lo que el código JS debería estar en un archivo aparte.
3. Seguir las sugerencias del documento sobre portabilidad del código en donde sea pertinente.

Bonus

1. El código del tercer ejercicio debe seguir validando como XHTML estricto. Incluir el botón de validación.
2. Además de cambiar el texto correspondiente a cada persona, cambiar también el fondo, los colores, y/o los bordes de manera que sea claro qué imagen corresponde con el texto mostrado en un momento dado.
3. En el diseño de la aplicación, tener en cuenta las características de los navegadores o los usuarios que desactivan o no son capaces de ejecutar Javascript, de los lectores de pantalla que emplean las personas invidentes, y de los buscadores.

Sugerencias

• Como se va a emplear JS no obstructivo, una manera de hacer que se muestren los textos adecuados cuando el cursor se posa sobre cada una de las imágenes es crear tres funciones distintas, algo así como muestraTextoRob(), muestraTextoAurora() y muestraTextoAlan(). Esta solución, si bien posible,es sumamente ineficiente. Para evitar hacer esto, podemos emplear la variable this dentro de una función que se encargue de cambiar todos los textos, para que lea un atributo que hayamos puesto en la etiqueta de imagen, y que sirva para decidir qué texto es el que se ha de mostrar.
• Para el bono, les recomiendo investigar un poco en Internet acerca de accesibilidad del contenido y Javascript, pero de entrada una sugerencia es que es mejor que el texto, cuando sea posible, esté desde el principio y que se oculte al momento de cargar el documento, a que el contenido esté oculto de manera predeterminada, o que se cree completamente a partir de Javascript.