Introducción a la Programación Multimedial

Presentación del tema: "Introducción a la Programación Multimedial"— Transcripción de la presentación:

1 Introducción a la Programación Multimedial
Javascript - Parte II

2 Operadores Lógicos AND (&&) Devuelve true sólo si todas las condiciones son true. OR (||) Devuelve true si alguna de las condiciones son true. NOT (!) Devuelve true si la condición es false (y viceversa).

3

4 Funciones Matemáticas
Math.PI Devuelve Math.ceil() Devuelve un número entero redondeando para arriba. Math.ceil(4.4) // 5 Math.floor() Devuelve un número entero redondeando para abajo. Math.ceil(4.4) // 4 Math.random() Devuelve un número aleatorio entre 0 y 1. Math.random() // Para obtener un número aleatorio entre dos números se puede usar: Math.floor (Math.random () * 9) + 1; // devuelve un random entre 1 y 10.

5 Ejercicio #1 Escriban un código que genere 10 rondas de dos números aleatorios por ronda (en total 20 números) y los imprima en pantalla, indicando cuál número es el mayor en cada ronda. El primer número de cada ronda deberá ser un número aleatorio entre 10 y 20. El segundo número de cada ronda deberá ser un número aleatorio entre 1 y 50.

6

7 Funciones Así como existen funciones propias de cada lenguaje (por ejemplo alert, prompt, etc), también podemos crear nuestras propias funciones. Esto nos sirve para organizar nuestro código, evitar instrucciones repetidas, simplificar la lectura, y reutilizar el código en otros proyectos.

8 Ejemplo #1 // Declaro la función llamada saludo. function saludo(){ document.write(“hola chicos!”); document.write(“chau chicos!); } // Ejecuto la función saludo. saludo();

9 Partes de una función Nombre Al igual que las variables, el nombre de una función no puede comenzar con número, ni tener espacios, ni ser una palabra reservada. Parámetros (opcional) Son variables que le paso a la función para que realice sus operaciones. Cada vez que llamo a la misma función, le puedo pasar o no los mismos valores para que realice o no las mismas operaciones. No todas las funciones admiten parámetros. Retorno (opcional) Es lo que la función me va a devolver al finalizar su ejecución, y esto debo almacenarlo en una variable. No todas las funciones devuelven valores.

10 Ejemplo #2 // Declaro la función llamada saludo que recibe como parámetro una variable llamada tipo_saludo. function saludo( tipo_saludo ){ if ( tipo_saludo==“bienvenida”){ document.write(“hola chicos!”); } else{ document.write(“chau chicos!); // Ejecuto la función saludo y le paso como parámetro la palabra “bienvenida”. saludo(“bienvenida”);

11 Ejemplo #3 // Declaro la función llamada saludo que recibe como parámetro una variable llamada tipo_saludo y devuelve el mensaje correspondiente. function saludo( tipo_saludo ){ if ( tipo_saludo==“bienvenida”){ return “hola chicos!”; } else{ return “chau chicos!”; // Ejecuto la función saludo y le paso como parámetro la palabra “bienvenida”. var mensaje = saludo(“bienvenida”); document.write(mensaje);

12 Ejercicio #2 Realicen el ejercicio #1 utilizando funciones para obtener el número aleatorio y el mensaje a imprimir en pantalla.

13

14 HTML dinámico La función document.write permite como parámetro no sólo texto común, sino código html. Entonces, desde javascript puedo escribir mis propias etiquetas y agregar a la página algo que antes no estaba.

15 Ejemplo #4

16 Combinando HTML + CSS + JS
Como document.write acepta cualquier etiqueta HTML, podemos combinarla con todo lo que ya sabemos de html, css y javascript, y hacer cosas como menúes, galerías de fotos, carruseles de imágenes, y cosas mucho más divertidas que veremos en el segundo cuatrimestre…

17

18 Ejercicio #3 Realizar una galería dinámica de por lo menos 10 fotos usando javascript, html y css. Pueden usar las imágenes que están en: Recuerden el tag para mostrar imágenes en html: <img src=“NOMBRE_IMAGEN” alt=“TITULO”>

19