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

Like this? Share it with your network

Share

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

on

  • 834 views

 

Statistics

Views

Total Views
834
Views on SlideShare
834
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introducción a la programación con Javascript. Clase 4 Presentation 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...