<ul><li>Introducción a la programación (Clase 2)  </li></ul><ul><li>Jordi Collell </li></ul><ul><li>[email_address] </li><...
<ul><li>Resumen clase anterior </li></ul><ul><li>// numeros aleatorios </li></ul><ul><li>Math.random() </li></ul><ul><li>/...
<ul><li>Nuevos operadores </li></ul><ul><li>++ Incrementa </li></ul><ul><li>-- Decrementa </li></ul><ul><li>Ejercicio: </l...
<ul><li>Javascript dentro de un html </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><script type=”tex...
<ul><li>Javascript dentro de un html código externo </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><s...
<ul><li>Instrucciones con bloques </li></ul><ul><li>if( condicion ) </li></ul><ul><li>{ </li></ul><ul><li>// bloque de cód...
<ul><li>Javascript switch </li></ul><ul><li>Se usa para seleccionar bloques de código en función de condiciones. </li></ul...
<ul><li>Ejercicio, en que cae? </li></ul><ul><li>d = new Date(2011, 2, 27); </li></ul><ul><li>dia = d.getDay() </li></ul><...
<ul><li>Javascript for </li></ul><ul><li>Genera iteraciones de bloques de código. </li></ul><ul><li>for(var i=1; i<5; i++)...
<ul><li>While (Mientras) </li></ul><ul><li>Mientras se cumpla la condición ejecutará el bloque. </li></ul><ul><li>i = 5 </...
<ul><li>Instrucciones / Funciones </li></ul><ul><li>> Las instrucciones tratadas son funciones, una función es una instruc...
<ul><li>Funciones </li></ul><ul><li>Una función es una agrupación de código que puede devolver o no devolver algo, una fun...
<ul><li>Ejercicio Funciones </li></ul><ul><li>Vamos a crear una función que divida, otra que sume, otra que reste y otra q...
<ul><li>Eventos. ¿Que es un evento? </li></ul><ul><li>Una interacción del usuario. En javascript respondemos a eventos.  <...
<ul><li>Eventos. ¿Que es un evento? </li></ul><ul><li>Que otros eventos y en que elementos del DOM están disponibles: </li...
<ul><li>Plantilla para el uso de jquery </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><script src=&q...
<ul><li>Snippets basicos jquery </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><script src=&quot; htt...
<ul><li>jQuery super báisco </li></ul><ul><li>Selector:  Nos permite interactuar con elementos del DOM (Html) </li></ul><u...
<ul><ul><li>Ejercicio final clase 2 </li></ul></ul>
<ul><ul><li>Actividad extra de refuerzo: </li></ul></ul><ul><ul><li>Vamos a programar un reloj. </li></ul></ul><ul><ul><li...
<ul><li>Cliente/Servidor </li></ul>El cliente Mediante un navegador web, hace una petición (una página) a un servidor El s...
Upcoming SlideShare
Loading in …5
×

Introducción a la Progamación en Javascript. Classe 2

593 views

Published on

Conceptos básicos para la programación en Javascript. Documentación generada para el posgrado de Web 2.0 del IDEC de la UPF el año 2011

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
593
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introducción a la Progamación en Javascript. Classe 2

  1. 1. <ul><li>Introducción a la programación (Clase 2) </li></ul><ul><li>Jordi Collell </li></ul><ul><li>[email_address] </li></ul><ul><li>@galigan </li></ul>
  2. 2. <ul><li>Resumen clase anterior </li></ul><ul><li>// numeros aleatorios </li></ul><ul><li>Math.random() </li></ul><ul><li>//entre dos numeros </li></ul><ul><li>Math.round(Math.random()*5) </li></ul><ul><li>// Redondeo </li></ul><ul><li>Math.round( 1.6 ) </li></ul><ul><li>// Mensaje emergente </li></ul><ul><li>alert(‘un mensaje emergente’) </li></ul><ul><li>// prompt </li></ul><ul><li>var k = prompt(‘pregunta al usuario’) </li></ul><ul><li>// variables </li></ul><ul><li>var uno = “Esto es un texto” </li></ul><ul><li>var dos = 23 </li></ul><ul><li>quatro = 2 </li></ul><ul><li>// operadores </li></ul><ul><li>m = dos+quatro </li></ul><ul><li>m = dos-quatro </li></ul><ul><li>var f = dos*quatro </li></ul><ul><li>m = dos/quatro </li></ul><ul><li>// operadores lógicos </li></ul><ul><ul><ul><li>(a == b) </li></ul></ul></ul><ul><ul><ul><li>(a != b) </li></ul></ul></ul><ul><ul><ul><li>(a > b && a <=c) </li></ul></ul></ul><ul><ul><ul><li>(a >= b || b < c) </li></ul></ul></ul><ul><ul><ul><li>a == true </li></ul></ul></ul><ul><ul><ul><li>b == false </li></ul></ul></ul><ul><ul><ul><li>// condicionales </li></ul></ul></ul><ul><ul><ul><li>if(a==”un valor”) { </li></ul></ul></ul><ul><ul><ul><ul><li>alert(‘la resupuesta 1’) </li></ul></ul></ul></ul><ul><ul><ul><li>} else { </li></ul></ul></ul><ul><ul><ul><ul><li>alert(‘la respuesta 2’) </li></ul></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>if(a==b) { </li></ul></ul></ul><ul><ul><ul><ul><li>// bloque </li></ul></ul></ul></ul><ul><ul><ul><ul><li>} else if(a==c) { </li></ul></ul></ul></ul><ul><ul><ul><ul><li>// bloque </li></ul></ul></ul></ul><ul><ul><ul><ul><li>} else { </li></ul></ul></ul></ul><ul><ul><ul><ul><li>// bloque </li></ul></ul></ul></ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul>
  3. 3. <ul><li>Nuevos operadores </li></ul><ul><li>++ Incrementa </li></ul><ul><li>-- Decrementa </li></ul><ul><li>Ejercicio: </li></ul><ul><li>var numero = 5; </li></ul><ul><li>numero++ </li></ul><ul><li>numero++ </li></ul><ul><li>numero-- </li></ul><ul><li>var val = 25; </li></ul><ul><li>val += 5; // == x=x+5 </li></ul><ul><li>val -= 5; // == x=x-5 </li></ul><ul><li>val *= 2; // == x=x*2 </li></ul><ul><li>Ejercicio: </li></ul><ul><li>val = 5; </li></ul><ul><li>val += 10; </li></ul><ul><li>val -= 2; </li></ul><ul><li>13 </li></ul>
  4. 4. <ul><li>Javascript dentro de un html </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><script type=”text/javascript”> </li></ul><ul><li><!-- </li></ul><ul><li>alert(‘hola’) </li></ul><ul><li>// --> </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1>Página de ejemplo para programar en javascript</h1> </li></ul><ul><li><p>Contenido que no sirve para nada, solo para demostrar que es un </li></ul><ul><li>documento html</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  5. 5. <ul><li>Javascript dentro de un html código externo </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><script type=”text/javascript” src=”file.js”></script> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1>Página de ejemplo para programar en javascript con un fichero externo</h1> </li></ul><ul><li><p>Contenido que no sirve para nada, solo para demostrar que es un </li></ul><ul><li>documento html</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  6. 6. <ul><li>Instrucciones con bloques </li></ul><ul><li>if( condicion ) </li></ul><ul><li>{ </li></ul><ul><li>// bloque de código </li></ul><ul><li>} else { </li></ul><ul><li>} </li></ul><ul><li>switch(cond) </li></ul><ul><li>{ </li></ul><ul><li>case val: </li></ul><ul><ul><li>// bloque </li></ul></ul><ul><ul><li>break </li></ul></ul><ul><li>default: </li></ul><ul><li>// bloque </li></ul><ul><li>break </li></ul><ul><li>} </li></ul><ul><li>for(condicion) { </li></ul><ul><ul><li>//bloque de codigo </li></ul></ul><ul><li>} </li></ul><ul><li>while(condicion) { </li></ul><ul><ul><li>// Condicion </li></ul></ul><ul><li>} </li></ul>
  7. 7. <ul><li>Javascript switch </li></ul><ul><li>Se usa para seleccionar bloques de código en función de condiciones. </li></ul><ul><li>switch(cond) { </li></ul><ul><ul><li>case “A”: </li></ul></ul><ul><ul><ul><li>// valor a </li></ul></ul></ul><ul><ul><ul><li>break; </li></ul></ul></ul><ul><ul><ul><ul><li>case “B”: </li></ul></ul></ul></ul><ul><ul><ul><ul><li>// valor B </li></ul></ul></ul></ul><ul><ul><ul><ul><li>break; </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>default: </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>// codigo por defecto </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>break; </li></ul></ul></ul></ul></ul><ul><li>} </li></ul><ul><li>En caso que cond sea valor A, ejecutará el bloque y terminará, en caso que b, ejecutará el bloque y terminará. </li></ul>
  8. 8. <ul><li>Ejercicio, en que cae? </li></ul><ul><li>d = new Date(2011, 2, 27); </li></ul><ul><li>dia = d.getDay() </li></ul><ul><li>switch(numero) </li></ul><ul><li>{ </li></ul><ul><li>case 1: </li></ul><ul><li>console.info('lunes') </li></ul><ul><li>break </li></ul><ul><li>case 2: </li></ul><ul><li>console.info('martes') </li></ul><ul><li>break </li></ul><ul><li>case 3: </li></ul><ul><li>console.info('miercoles') </li></ul><ul><li>break </li></ul><ul><li>case 4: </li></ul><ul><li>console.info('jueves') </li></ul><ul><li>break </li></ul><ul><li>case 5: </li></ul><ul><li>console.info('viernes') </li></ul><ul><li>break </li></ul><ul><li>case 6: </li></ul><ul><li>console.info('sabado') </li></ul><ul><li>break </li></ul><ul><li>case 0: </li></ul><ul><li>console.info('domingo') </li></ul><ul><li>break </li></ul><ul><li>} </li></ul>
  9. 9. <ul><li>Javascript for </li></ul><ul><li>Genera iteraciones de bloques de código. </li></ul><ul><li>for(var i=1; i<5; i++) </li></ul><ul><li>{ </li></ul><ul><ul><li>document.write(‘El valor de i vale’ + i +’<br />’); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>El valor de i vale 1 </li></ul></ul><ul><ul><li>El valor de i vale 2 </li></ul></ul><ul><ul><li>El valor de i vale 3 </li></ul></ul><ul><ul><li>El valor de i vale 4 </li></ul></ul><ul><ul><li>El valor de i vale 5 </li></ul></ul><ul><li>Ejercicio, calcula el factorial de 5, usando un for y sabiendo que el factorial se calcula con: </li></ul><ul><li>5*4*3*2*1 </li></ul>
  10. 10. <ul><li>While (Mientras) </li></ul><ul><li>Mientras se cumpla la condición ejecutará el bloque. </li></ul><ul><li>i = 5 </li></ul><ul><li>while(i!=1) </li></ul><ul><li>{ </li></ul><ul><ul><li>document.write(‘El valor de i vale’ + i +’<br />’); </li></ul></ul><ul><ul><ul><li>i-- </li></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>El valor de i vale 1 </li></ul></ul><ul><ul><li>El valor de i vale 2 </li></ul></ul><ul><ul><li>El valor de i vale 3 </li></ul></ul><ul><ul><li>El valor de i vale 4 </li></ul></ul>
  11. 11. <ul><li>Instrucciones / Funciones </li></ul><ul><li>> Las instrucciones tratadas son funciones, una función es una instrucción que recibe parámetros y puedo o no devolver algo. Así: </li></ul><ul><li>alert(‘hola’) </li></ul><ul><li>Es una función que recibe un parametro cadena de texto, y no devuelve nada, realiza una acción. </li></ul><ul><li>m = Math.round(2.6) </li></ul><ul><li>Es una función que recibe un número decimal, y devuelve el número redondeado </li></ul><ul><li>Decimos que devuleve (return) cuando podemos recuperar la salida de la misma y ver el resultado. </li></ul><ul><li>k = prompt(‘danos un número) </li></ul><ul><li>Es una función que devulve lo que el usuario entre con el teclado. </li></ul>
  12. 12. <ul><li>Funciones </li></ul><ul><li>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: </li></ul><ul><li>function suma(valor, valor2) { </li></ul><ul><li>return valor+valor2 </li></ul><ul><li>} </li></ul><ul><li>valor: Es el parametro 1 </li></ul><ul><li>valor2: Es el parametro 2 </li></ul><ul><li>return es una instrucción que retorna el valor siguiente, así, la función que acabamos de defnir, puede ser llamada: </li></ul><ul><li>resultado = suma(5+8) </li></ul><ul><li>** Para definirla en la consola usaremos: </li></ul><ul><li>function suma(v, v2) { return v+v2; } </li></ul>
  13. 13. <ul><li>Ejercicio Funciones </li></ul><ul><li>Vamos a crear una función que divida, otra que sume, otra que reste y otra que multiplique </li></ul><ul><ul><li>function suma(num1, num2) </li></ul></ul><ul><li>{ </li></ul><ul><li>return num1 + num2 </li></ul><ul><li>} </li></ul><ul><li>Ejecutaremos las funciones, capturando el resultado y mostrandolo en la consola, con la instrucción: </li></ul><ul><li>console.info( resultado ) </li></ul>
  14. 14. <ul><li>Eventos. ¿Que es un evento? </li></ul><ul><li>Una interacción del usuario. En javascript respondemos a eventos. </li></ul><ul><li><script> </li></ul><ul><li>function aprieta() </li></ul><ul><li>{ </li></ul><ul><li>alert(‘aprieta’) </li></ul><ul><li>} </li></ul><ul><li><input type=”button” name=”hola” value=”Apreta” onclick=”aprieta()” /> </li></ul><ul><li>Ejercicio: Programaremos un botón, que cuando lo apretemos llame a una función que muestra en un alert la hora. </li></ul><ul><li>d = new Date() </li></ul><ul><li>hora = d.getHours() </li></ul><ul><li>minuto =d.getMinutes() </li></ul><ul><li>segundo = d.getSeconds() </li></ul>
  15. 15. <ul><li>Eventos. ¿Que es un evento? </li></ul><ul><li>Que otros eventos y en que elementos del DOM están disponibles: </li></ul><ul><li>En los navegadores modernos en todos los elementos. </li></ul><ul><li>Ejercicio Eventos </li></ul><ul><li>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. </li></ul>
  16. 16. <ul><li>Plantilla para el uso de jquery </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><script src=&quot; https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js &quot;> </script> </li></ul><ul><li><script type=”text/javascript”> </li></ul><ul><li><!-- </li></ul><ul><li>$(document).ready(function(){ </li></ul><ul><li>alert(‘hola’) </li></ul><ul><li>}) </li></ul><ul><li>// --> </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1>Página de ejemplo para programar en javascript</h1> </li></ul><ul><li><p>Contenido que no sirve para nada, solo para demostrar que es un </li></ul><ul><li>documento html</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  17. 17. <ul><li>Snippets basicos jquery </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><script src=&quot; https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js &quot;> </script> </li></ul><ul><li><script type=”text/javascript”> </li></ul><ul><li><!-- </li></ul><ul><li>$(document).ready(function(){ </li></ul><ul><ul><li>$(‘#boton’).click(function(){ </li></ul></ul><ul><ul><li>alert( $(‘#campo’).val() ) </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>}) </li></ul><ul><li>// --> </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><input type=”text” name=”valor” id=”campo”/> </li></ul><ul><li><input type=”button” name=”bt” value=”Probar” id=”boton”/> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>Selector por id Asignamos un evento Recuperamos un valor de un formulario
  18. 18. <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><ul><ul><li>Ejericico. </li></ul></ul><ul><ul><li>Probaremos, todos estos elementos dentro de un html. </li></ul></ul>
  19. 19. <ul><ul><li>Ejercicio final clase 2 </li></ul></ul>
  20. 20. <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>
  21. 21. <ul><li>Cliente/Servidor </li></ul>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

×