Your SlideShare is downloading. ×
  • Like
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.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 523 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
523
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
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.
    • Introducción a la programación (Clase 3)
    • Jordi Collell
    • [email_address]
    • @galigan
  • 2.
    • Repaso clase anterior en documentación:
    • http://www.master.tempointeractiu.com/jcollell/apuntes/
    • Resolveremos ejercicios anteriores...
  • 3.
    • 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
  • 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.
    • 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...
  • 7.
    • Ejercicios jquery
    • 1. Dado el html ejercicio_jquery_2.html, vamos a:
    • 1. Esconder con css, las respuestas a las preguntas
    • 2. Añandir un efecto rollover a las preguntas, con javascript
    • 2b. 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.
  • 8.
      • 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 menu
      • 4. Ocultar la imagen anterior, si la hay, para mostrar la siguiente.
      • 5. Marcar el enlace correspondiente en el menu
  • 9.
      • 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 letras
        • 3. El campo email, contenga una @
        • 4. El campo subject contenga algo superior a 5 carácteres,
        • 5. El campo contenido, almenos contenga dos palabras.
  • 10.
      • 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...