<ul><li>Introducción a la programación (Clase 3)  </li></ul><ul><li>Jordi Collell </li></ul><ul><li>[email_address] </li><...
<ul><li>Repaso clase anterior en documentación: </li></ul><ul><li>http://www.master.tempointeractiu.com/jcollell/apuntes/ ...
<ul><li>Ejercicios refuerzo </li></ul><ul><li>> Vamos a escribir un programa que busque los números divisibles entre tres ...
Arrays Ejercicios: 1. Construiremos una array, de 1000 numeros, del 1, al 10, rellena con números aleatorios. 2. Calculare...
Objetos Diccionarios. (Ver apuntes) Ejercicios: 1. Crearemos un objeto en la variable alumno = {} Assignaremos propiedades...
<ul><li>jQuery super báisco </li></ul><ul><li>Selector:  Nos permite interactuar con elementos del DOM (Html) </li></ul><u...
<ul><li>Ejercicios jquery </li></ul><ul><li>1. Dado el html ejercicio_jquery_2.html, vamos a: </li></ul><ul><li>1. Esconde...
<ul><ul><li>Ejercicio álbum imagenes </li></ul></ul><ul><ul><li>Dado el html, ejercicio_imagenes.html: </li></ul></ul><ul>...
<ul><ul><li>Ejercicio formulario de contacto </li></ul></ul><ul><ul><li>Dado el html, ejercicio_form_contacto.html: </li><...
<ul><ul><li>Actividad extra de refuerzo: </li></ul></ul><ul><ul><li>Vamos a programar un reloj. </li></ul></ul><ul><ul><li...
Upcoming SlideShare
Loading in …5
×

Introducción a la programación con Javascript. Clase 4

675 views
602 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
675
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introducción a la programación con Javascript. Clase 4

  1. 1. <ul><li>Introducción a la programación (Clase 3) </li></ul><ul><li>Jordi Collell </li></ul><ul><li>[email_address] </li></ul><ul><li>@galigan </li></ul>
  2. 2. <ul><li>Repaso clase anterior en documentación: </li></ul><ul><li>http://www.master.tempointeractiu.com/jcollell/apuntes/ </li></ul><ul><li>Resolveremos ejercicios anteriores... </li></ul>
  3. 3. <ul><li>Ejercicios refuerzo </li></ul><ul><li>> Vamos a escribir un programa que busque los números divisibles entre tres del 1 al 100 </li></ul><ul><li>> Vamos a escribir un programa que sume el valor de dos campos de texto en documento html. </li></ul><ul><li>> Vamos a escribir un programa que muestre y oculte un bloque de texto al hacer clic en un enlace. </li></ul><ul><li>> Vamos a escribir un pequeño programa que cambie el fondo de una capa a un color aleatorio. </li></ul><ul><li>> Vamos a escribir un pequeño programa que cambie el fondo de una campa a un color de una lista </li></ul>
  4. 4. 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.
  5. 5. 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/...
  6. 6. <ul><li>jQuery super báisco </li></ul><ul><li>Selector: Nos permite interactuar con elementos del DOM (Html) </li></ul><ul><ul><li><div id=capa” class=”item”>Contenido</div> </li></ul></ul><ul><ul><li>$(‘#capa’); // selector por id </li></ul></ul><ul><ul><li>$(‘.item); // selector por clase css </li></ul></ul><ul><ul><li>$(selector).toggle(); Esconde/Muestra modo interruptor </li></ul></ul><ul><ul><li>$(selectr).click(nombre_funcion) // assigna una fucnion a un clic </li></ul></ul><ul><ul><li>$(selector).css(‘propiedad’, ‘valor’); // modifica una propiedad css </li></ul></ul><ul><ul><li>$(selector).val(); // en un campo de formulario nos retorna, el contenido del campo </li></ul></ul><ul><ul><li>$(selector).val(‘valor’); // nos permite escribir contenido en un campo de formulario... </li></ul></ul>
  7. 7. <ul><li>Ejercicios jquery </li></ul><ul><li>1. Dado el html ejercicio_jquery_2.html, vamos a: </li></ul><ul><li>1. Esconder con css, las respuestas a las preguntas </li></ul><ul><li>2. Añandir un efecto rollover a las preguntas, con javascript </li></ul><ul><li>2b. Añadir un efecto de rollout a los titulares de las preguntas. </li></ul><ul><li>3. Programar una función que dado un id de pregunta, nos muestre o oculte una respuesta. </li></ul><ul><li>4. Assingar al evento clic de la pregunta, la función mostrar su respuesta. </li></ul><ul><li>5. Ocultar con css los elementos destacados del sidebar. </li></ul><ul><li>6. Mostrar un elemento del sidebar de forma aleatoria. </li></ul><ul><li>7. Modificar el programa, para que solo exista una pregunta abierta al mismo tiempo. </li></ul><ul><li>8. Añadir un efecto de desplegado al mostrar las respuestas. </li></ul>
  8. 8. <ul><ul><li>Ejercicio álbum imagenes </li></ul></ul><ul><ul><li>Dado el html, ejercicio_imagenes.html: </li></ul></ul><ul><ul><li>1. Ocultar todas las imágenes con css. </li></ul></ul><ul><ul><li>2. Programar una función que nos muestre una imagen. </li></ul></ul><ul><ul><li>3. Asignar la funcion a los eventos del menu </li></ul></ul><ul><ul><li>4. Ocultar la imagen anterior, si la hay, para mostrar la siguiente. </li></ul></ul><ul><ul><li>5. Marcar el enlace correspondiente en el menu </li></ul></ul>
  9. 9. <ul><ul><li>Ejercicio formulario de contacto </li></ul></ul><ul><ul><li>Dado el html, ejercicio_form_contacto.html: </li></ul></ul><ul><ul><li>1. Validar que antes de enviar el formulario, los campos sean buenos. </li></ul></ul><ul><ul><ul><li>2. El campo nombre contenga algo superior a 2 letras </li></ul></ul></ul><ul><ul><ul><li>3. El campo email, contenga una @ </li></ul></ul></ul><ul><ul><ul><li>4. El campo subject contenga algo superior a 5 carácteres, </li></ul></ul></ul><ul><ul><ul><li>5. El campo contenido, almenos contenga dos palabras. </li></ul></ul></ul>
  10. 10. <ul><ul><li>Actividad extra de refuerzo: </li></ul></ul><ul><ul><li>Vamos a programar un reloj. </li></ul></ul><ul><ul><li>Hay una instrucción en javascript, llamada, </li></ul></ul><ul><ul><li>setInterval(1000, nombrefuncion) </li></ul></ul><ul><ul><ul><li>i lo que hace es ejecutar una función cada x tiempo en milisegundo. </li></ul></ul></ul><ul><ul><ul><li>En el caso anterior, cada segundo ejecutará la función nombrefuncion. </li></ul></ul></ul><ul><ul><ul><li>Con esto, un poco de jquery para escribir en un campo: </li></ul></ul></ul><ul><ul><ul><li>$(‘#iddelcampo’).val( ‘lo que queremos escrivir’ ) </li></ul></ul></ul><ul><ul><ul><li>Podemos hacer un reloj... </li></ul></ul></ul>

×