Introducción a la Programación con Javascript. Clase 3

375 views
336 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
375
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introducción a la Programación con Javascript. Clase 3

  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 construir un boocle que escriba numeros del 20 al 10. </li></ul><ul><li>> Vamos a escribir un programa que sume, todos los numeros pares del 0 al 20. </li></ul><ul><li>> Vamos a escribir una función que devuelva un número aleatorio, entre 1 y el parametro n. </li></ul><ul><li>> Vamos a escribir un programa que nos devuelva el valor que existe dentro de un campo de texto al pulsar el botón enviar. </li></ul><ul><li>> Vamos a escribir un programa que sume el valor de dos campos de texto en documento html. </li></ul>
  4. 4. Arrays Listas de elementos. (Ver apuntes) Ejercicios: 1. Construiremos una lista de elementos, y lo recorreremos de inicio a fin, con las posiciones de la gente en la clase y su lugar. alumnos = Array() alumnos[0] = ‘’ 2. Escribiremos un bucle (una iteración) que nos escriba en el documento html un saludo a cada alumno. 3. Construiremos un segundo array, con los generos de cada alumno, y mediante una iteración saludaremos a cada alumno con la forma: Hola querido xxxxx! Hola querida xxxx!
  5. 5. Arrays Listas de elementos. (Ver apuntes) Ejercicios: 4. Crearemos una foto de la clase y con un mapa de imágen asignaremos a cada posición el nombre de la persona, para que cuando hagamos clic, nos muestre este en una salida de texto en el mismo documento.
  6. 6. 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/...
  7. 7. <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>
  8. 8. <ul><ul><li>Ejercicio. Cargaremos la web de LaVanguardia </li></ul></ul><ul><li>http://www.lavanguardia.es/ </li></ul><ul><ul><li>Abrimos la consola: </li></ul></ul><ul><ul><li>$(‘img’).toggle() </li></ul></ul><ul><ul><li>$(‘img’).toggle() </li></ul></ul><ul><ul><li>$(‘img’).fadeIn() </li></ul></ul><ul><ul><li>$(‘img’).fadeIn() </li></ul></ul><ul><li>$('h2 a').css('color', 'green') </li></ul><ul><li>$('h2 a').css('color', 'red') </li></ul><ul><li>$('div.header').css('opacity', 0.4) </li></ul><ul><li>$('div.menu').hide() </li></ul><ul><li>$('div.menu').show() </li></ul><ul><li>https://chrome.google.com/extensions/detail/cbbihnlpjnikhccblfddkbddcggagbci </li></ul>
  9. 9. <ul><ul><li>Instalaremos la siguiente extensión </li></ul></ul><ul><li>https://chrome.google.com/extensions/detail/cbbihnlpjnikhccblfddkbddcggagbci </li></ul><ul><ul><li>Accediremos al website de la UPF </li></ul></ul><ul><ul><li>http://www.upf.edu </li></ul></ul><ul><ul><li>$('#superior_izquierda a img').attr('src', ' http://www.ub.edu/web/ub/galeries/imatges/logo_home.png' ) </li></ul></ul><ul><ul><li>$('a.no_fletxa').css('color', 'violet'); </li></ul></ul><ul><ul><li>$('a.no_fletxa').css('background-color', 'black'); </li></ul></ul><ul><ul><li>$('#flash_home').remove() </li></ul></ul><ul><ul><li>$(‘embed’).remove() </li></ul></ul>
  10. 10. <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>
  11. 11. <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>
  12. 12. <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>

×