Una experiencia realmente interesante resultó ser el curso inicial-avanzado de javascript que debí dar en 10 clases. El objetivo fue que el estudiante, el cual no tiene mucha noción acerca de esta tecnología aunque está capacitado para maquetar xhtml y css, pudiera trabajar de manera avanzada con scripts en js y finalmente
jQuery.
Si bien resulta algo ambicioso esperar que quien haga el curso logre tales objetivos, vale la pena realizarlo a la par que se hagan los ejercicios y se investigue profundizando en los temas planteados.
Recopilé en este post todo el material que produje: Temario, ejericios y ejemplos. Valió la pena.
Clase Nº1
Clase Nº2
- Temario: Clase N° 2
- Ejemplo:
- Trabajo práctico:
Continua la aplicacion:
El mensaje de bienvenida debe ahora validar por género: Si el nombre ingresado termina en “o” dirá “Bienvenido”+nombre. De terminar en “a” dirá “Bienvenida”+nombre. De ser otra letra dirá “BIenvenido/a”+nombre.
Al aceptar muestra la pantalla principal div id=”pantalla-inicial” y oculta el div del bt iniciar. En la pantalla principal aparece un menú con el bt iniciar Form.
Creamos un archivo crearForm que tenga una funcion del mismo nombre que agrega los elementos form, y un grupo de campos de texto (conjunto de pares de label, input). los campos son Nombre, apellido dirección y el botón de submit. el Formulario debe ser xhtml válido. con sus elementos, atributos y valores.
este formulario se agregará en el div id=”principal”.
bajar archivo
Clase Nº3
- Temario: Clase N° 3
- ejemplo:
- Trabajo práctico:
Continua la aplicacion:
El boton que antes creaba un formulario, creará ahora un submenu con 3 items. que se encuentran en un array. cada item de ese array abrirá un formulario distinto. Uno abrirá un formulario para guardar los datos de un disco. Otro para guardar los datos de un libro. Y otro para grabar los datos de un programa.
disco: artista,album,año,guardado en
libro: autor,nombre,año, guardado en
programa: nombre, utilidad, guardado en
Construiremos la clase formulario y esta tendrá un método público para generar campos.
bajar archivo
Clase Nº4
Clase Nº5
Clase Nº 6
Clase Nº 7
Clase Nº 8
Clase N° 9
- Trabajo práctico evaluatorio: jQuery
Al iniciarse la aplicación se llamará a un archivo .xml que tiene una estructura de datos de una colección de libros. En el menú de la izquierda (ul id=”menu”) se cargarán los títulos de los libros y en el id de results se muestra un texto pidiendo al usuario que elija uno de ellos. El usuario hará click sobre el título y: en h2 se cargará el título, en h3 el autor y en el div id=”result” el resumen de contenido.
bajar archivo
ver resultado
Clase N° 10
- Trabajo práctico evaluatorio: Final
El examen es de javascript/jQuery y Ajax, adjunto se encuentran todos los archivos necesarios para la consigna. Es necesario que utilicen un localhost.
- El usuario ingresa al index.html. Allí se encuentra con un form de user y pwd.
- El sistema se contacta via POST contra el archivo lector.php. Chequea si el user y pass son correctos (que como podràn ver en el php son “admin” y “1234”) de no ser asi los reclama (“ingrese el user y pass correctos”).
- Una vez que el usuario ingresa la data correspondiente debe mostrarse dos opciones de idiomas (es, en) estos vienen en formato JSON. Usar el método de jQuery parseJSON
- Las dos opciones son links al catalogo.html. la variable de idioma puede ir acompañado a la url como url#idioma o url?idioma=
- En el archivo catálogo se captura el idioma y dependiendo de este tomara datos de data_es.xml y data_en.xml.
- Cada archivo xml trae un catálogo de libros en diferentes idiomas. el sistema será un catálogo que permita navegarlos como si fuera un slide show, con botones “anterior” y “siguiente”.
- Al iniciarse se muestra el primer libro. con los botones de navegacion. el bt anterior estará desactivado (clase .pasivo de css) mientras que el siguiente estará activo (clase .activo de css)
- Al clickear en siguiente, se hará en efecto de ocultamiento del libro anterior y un fadeIn del libro siguiente. y se activará el boton de “anterior”.
- El usuario puede navegar hasta el último libro. Allí se desactivará el boton “siguiente”.
- El contenido de “titulo”,”autor” y “contenido” se mostrarán en el <div id=”content”> mientras que la imagen se mostrará dentro de <div id=”image-wrapper”>
bajar archivo