Introducción a la programación (Clase 3)

Jordi Collelljordi@tempointeractiu.com@galigan

Repaso clase anterior en documentación:

http://www.master.tempointeractiu.com/jcollell/apuntes/

Resolveremos ejercicios anteriores...

Ejercicios refuerzo

> Vamos a escribir un programa que busque los números divisibles entre tres del 1 al 100

> Vamos a escribir un programa que sume el valor de dos campos de texto en documento html.

> Vamos a escribir un programa que muestre y oculte un bloque de texto al hacer clic en un enlace.

> Vamos a escribir un pequeño programa que cambie el fondo de una capa a un color aleatorio.

> Vamos a escribir un pequeño programa que cambie el fondo de una campa a un color de una lista

Arrays

Ejercicios:

1. Construiremos una array, de 1000 numeros, del 1, al 10, rellena con números aleatorios.

2. Calcularemos la media

3. Calcularemos las freqüencias para cada número y las mostraremos.

Objetos

Diccionarios. (Ver apuntes)

Ejercicios:

1. Crearemos un objeto en la variable alumno = {}Assignaremos propiedades, nombre, edad, profesón, genero, pais

2. Asignaremos a cada alumno de la clase, el objeto correspondiente, en la posición que toque...

3. Modificaremos la función para que en función del genero, nos muestre la informaicón en azul o en rosa.

4. Mostraremos también un enlace a su página en el dominio master.tempointeractiu.com/...

jQuery super báisco

Selector: Nos permite interactuar con elementos del DOM (Html)

<div id=capa” class=”item”>Contenido</div>

$(‘#capa’); // selector por id$(‘.item); // selector por clase css

$(selector).toggle(); Esconde/Muestra modo interruptor$(selectr).click(nombre_funcion) // assigna una fucnion a un clic$(selector).css(‘propiedad’, ‘valor’); // modifica una propiedad css$(selector).val(); // en un campo de formulario nos retorna, el contenido del campo$(selector).val(‘valor’); // nos permite escribir contenido en un campo de formulario...

Ejercicios jquery

1. Dado el html ejercicio_jquery_2.html, vamos a:

1. Esconder con css, las respuestas a las preguntas2. Añandir un efecto rollover a las preguntas, con javascript2b. Añadir un efecto de rollout a los titulares de las preguntas.3. Programar una función que dado un id de pregunta, nos muestre o oculte una respuesta.4. Assingar al evento clic de la pregunta, la función mostrar su respuesta.5. Ocultar con css los elementos destacados del sidebar.6. Mostrar un elemento del sidebar de forma aleatoria.7. Modificar el programa, para que solo exista una pregunta abierta al mismo tiempo.8. Añadir un efecto de desplegado al mostrar las respuestas.

Ejercicio álbum imagenes

Dado el html, ejercicio_imagenes.html:

1. Ocultar todas las imágenes con css.2. Programar una función que nos muestre una imagen.3. Asignar la funcion a los eventos del menu4. Ocultar la imagen anterior, si la hay, para mostrar la siguiente.5. Marcar el enlace correspondiente en el menu

Ejercicio formulario de contacto

Dado el html, ejercicio_form_contacto.html:

1. Validar que antes de enviar el formulario, los campos sean buenos.2. El campo nombre contenga algo superior a 2 letras3. El campo email, contenga una @4. El campo subject contenga algo superior a 5 carácteres, 5. El campo contenido, almenos contenga dos palabras.

Actividad extra de refuerzo:

Vamos a programar un reloj.

Hay una instrucción en javascript, llamada,

setInterval(1000, nombrefuncion)

i lo que hace es ejecutar una función cada x tiempo en milisegundo.En el caso anterior, cada segundo ejecutará la función nombrefuncion.

Con esto, un poco de jquery para escribir en un campo:$(‘#iddelcampo’).val( ‘lo que queremos escrivir’ )

Podemos hacer un reloj...