La descarga está en progreso. Por favor, espere

La descarga está en progreso. Por favor, espere

Introducción a la programación (Clase 2) Jordi

Presentaciones similares


Presentación del tema: "Introducción a la programación (Clase 2) Jordi"— Transcripción de la presentación:

1 Introducción a la programación (Clase 2) Jordi

2 Resumen clase anterior // numeros aleatorios Math.random() //entre dos numeros Math.round(Math.random()*5) // Redondeo Math.round( 1.6 ) // Mensaje emergente alert(un mensaje emergente) // prompt var k = prompt(pregunta al usuario) // variables var uno = Esto es un texto var dos = 23 quatro = 2 // operadores m = dos+quatro m = dos-quatro var f = dos*quatro m = dos/quatro // operadores lógicos (a == b) (a != b) (a > b && a <=c) (a >= b || b < c) a == true b == false // condicionales if(a==un valor) { alert(la resupuesta 1) } else { alert(la respuesta 2) } if(a==b) { // bloque } else if(a==c) { // bloque } else { // bloque }

3 Nuevos operadores ++ Incrementa -- Decrementa Ejercicio: var numero = 5; numero++ numero-- var val = 25; val += 5; // == x=x+5 val -= 5; // == x=x-5 val *= 2; // == x=x*2 Ejercicio: val = 5; val += 10; val -= 2; 13

4 Javascript dentro de un html Página de ejemplo para programar en javascript Contenido que no sirve para nada, solo para demostrar que es un documento html

5 Javascript dentro de un html código externo Página de ejemplo para programar en javascript con un fichero externo Contenido que no sirve para nada, solo para demostrar que es un documento html

6 Instrucciones con bloques if( condicion ) { // bloque de código } else { } switch(cond) { case val: // bloque break default: // bloque break } for(condicion) { //bloque de codigo } while(condicion) { // Condicion }

7 Javascript switch Se usa para seleccionar bloques de código en función de condiciones. switch(cond) { case A: // valor a break; case B: // valor B break; default: // codigo por defecto break; } En caso que cond sea valor A, ejecutará el bloque y terminará, en caso que b, ejecutará el bloque y terminará.

8 Ejercicio, en que cae? d = new Date(2011, 2, 27); dia = d.getDay() switch(numero) { case 1: console.info('lunes') break case 2: console.info('martes') break case 3: console.info('miercoles') break case 4: console.info('jueves') break case 5: console.info('viernes') break case 6: console.info('sabado') break case 0: console.info('domingo') break }

9 Javascript for Genera iteraciones de bloques de código. for(var i=1; i<5; i++) { document.write(El valor de i vale + i + ); } El valor de i vale 1 El valor de i vale 2 El valor de i vale 3 El valor de i vale 4 El valor de i vale 5 Ejercicio, calcula el factorial de 5, usando un for y sabiendo que el factorial se calcula con: 5*4*3*2*1

10 While (Mientras) Mientras se cumpla la condición ejecutará el bloque. i = 5 while(i!=1) { document.write(El valor de i vale + i + ); i-- } El valor de i vale 1 El valor de i vale 2 El valor de i vale 3 El valor de i vale 4

11 Instrucciones / Funciones > Las instrucciones tratadas son funciones, una función es una instrucción que recibe parámetros y puedo o no devolver algo. Así: alert(hola) Es una función que recibe un parametro cadena de texto, y no devuelve nada, realiza una acción. m = Math.round(2.6) Es una función que recibe un número decimal, y devuelve el número redondeado Decimos que devuleve (return) cuando podemos recuperar la salida de la misma y ver el resultado. k = prompt(danos un número) Es una función que devulve lo que el usuario entre con el teclado.

12 Funciones Una función es una agrupación de código que puede devolver o no devolver algo, una función, puede admitir parámetros y puede retornar valores. Para definir una función: function suma(valor, valor2) { return valor+valor2 } valor: Es el parametro 1 valor2: Es el parametro 2 return es una instrucción que retorna el valor siguiente, así, la función que acabamos de defnir, puede ser llamada: resultado = suma(5+8) ** Para definirla en la consola usaremos: function suma(v, v2) { return v+v2; }

13 Ejercicio Funciones Vamos a crear una función que divida, otra que sume, otra que reste y otra que multiplique function suma(num1, num2) { return num1 + num2 } Ejecutaremos las funciones, capturando el resultado y mostrandolo en la consola, con la instrucción: console.info( resultado )

14 Eventos. ¿Que es un evento? Una interacción del usuario. En javascript respondemos a eventos. function aprieta() { alert(aprieta) } Ejercicio: Programaremos un botón, que cuando lo apretemos llame a una función que muestra en un alert la hora. d = new Date() hora = d.getHours() minuto =d.getMinutes() segundo = d.getSeconds()

15 Eventos. ¿Que es un evento? Que otros eventos y en que elementos del DOM están disponibles: En los navegadores modernos en todos los elementos. Ejercicio Eventos Construiremos un documetno html, con elementos: h1, h2, p, a, b y les asignaremos un evento onclick, que llame a una función. Al mismo tiempo, esta función tiene que contar las veces que hacemos click.

16 Plantilla para el uso de jquery https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js Página de ejemplo para programar en javascript Contenido que no sirve para nada, solo para demostrar que es un documento html

17 Snippets basicos jquery https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min. js Selector por id Asignamos un evento Recuperamos un valor de un formulario

18 jQuery super báisco Selector: Nos permite interactuar con elementos del DOM (Html) Contenido $(#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... Ejericico. Probaremos, todos estos elementos dentro de un html.

19 Ejercicio final clase 2

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

21 Cliente/Servidor El cliente Mediante un navegador web, hace una petición (una página) a un servidor El servidor puede ejecutar un programa de script tipo php, y retornar un archivo de texto que contiene, html y javascript Una vez descargado el archivo, el cliente web (navegador) pinta el html y ejectua el código javascript en el ordenador cliente El código html, contiene referencias, a otros documentos, imágenes y archivos css que deben de descargarse des del servidor


Descargar ppt "Introducción a la programación (Clase 2) Jordi"

Presentaciones similares


Anuncios Google