Your SlideShare is downloading. ×
0
Introducción a la programación con Javascript. Clase 4
Introducción a la programación con Javascript. Clase 4
Introducción a la programación con Javascript. Clase 4
Introducción a la programación con Javascript. Clase 4
Introducción a la programación con Javascript. Clase 4
Introducción a la programación con Javascript. Clase 4
Introducción a la programación con Javascript. Clase 4
Introducción a la programación con Javascript. Clase 4
Introducción a la programación con Javascript. Clase 4
Introducción a la programación con Javascript. Clase 4
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

548

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
548
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. <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. <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. 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. 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. <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. <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. <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. <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. <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>

×