Aplicaciones Web (Curso 2014/2015)

Transcripción

1 Introducción a JavaScript Aplicaciones Web (Curso 2014/2015) Jesús Arias Fisteus // jaf@it.uc3m.es Introducción a JavaScript p. 1

2 El lenguaje de programación JavaScript Introducción a JavaScript p. 2

3 Introducción a JavaScript JavaScript: Lenguaje de programación interpretado. Débilmente tipado. Sintácticamente parecido a C, C++ y Java. Utilizado habitualmente en navegadores Web (client-side JavaScript) para mejorar la interactividad de las páginas. Estandarizado bajo el nombre de ECMAScript. Introducción a JavaScript p. 3

4 Sentencias de control Relativamente similares en sintaxis a las de Java y C: if, switch. for, while, do while. return, break, continue. Introducción a JavaScript p. 4

5 Condicionales 1 if (n === 1) { 2 console.log("you have 1 new message."); 3 } else { 4 console.log("you have " + n + " new messages."); 5 } Introducción a JavaScript p. 5

6 Bucles 1 var count = 0; 2 while (count < 10) { 3 console.log(count); 4 count++; 5 } 1 for(var count = 0; count < 10; count++) { 2 console.log(count); 3 } 1 var person = {fname: "John", lname: "Doe", age: 25}; 2 var x; 3 for (x in person) { 4 console.log(person[x]); 5 } Introducción a JavaScript p. 6

7 Tipos de datos Tipos de datos simples: Números, cadenas de texto, booleanos,null, undefined. Objetos: Arrays, funciones, expresiones regulares, objetos. Introducción a JavaScript p. 7

8 Objetos Contenedores de propiedades: Cada propiedad tiene un nombre y un valor. No existe un concepto de clase que restrinja las propiedades que puede tener un objeto. Un objeto puede heredar de otro objeto. Introducción a JavaScript p. 8

9 Ejemplo: Inicialización literal de objetos 1 var empty_object = {}; 2 3 var stooge = { 4 "first-name": "Jerome", 5 "last-name": "Howard" 6 }; Introducción a JavaScript p. 9

10 Ejemplo: Inicialización literal de objetos 1 var flight = { 2 airline: "Oceanic", 3 number: 815, 4 departure: { 5 IATA: "SYD", 6 time: " :55", 7 city: "Sydney" 8 }, 9 arrival: { 10 IATA: "LAX", 11 time: " :42", 12 city: "Los Angeles" 13 } 14 }; Introducción a JavaScript p. 10

11 Acceso a propiedades de objetos Mediante corchetes o con punto: 1 stooge["first-name"] // "Jerome" 2 flight.departure.iata // "SYD" Las propiedades que no existen devuelven undefined: 1 stooge["middle-name"] // undefined 2 flight.status // undefined 3 stooge["first-name"] // undefined Introducción a JavaScript p. 11

12 Actualización de propiedades Mediante asignación: 1 stooge[ ³first-name ³] = ³Jerome ³; 2 flight.number = 7005; Si la propiedad no existe en el objeto, se crea automáticamente: 1 stooge[ ³middle-name ³] = ³Lester ³; 2 stooge.nickname = ³ Curly ³; 3 flight.equipment = { 4 model: ³ Boeing 777 ³ 5 }; 6 flight.status = ³ overdue ³; Introducción a JavaScript p. 12

13 Objetos por referencia Los objetos se pasan por referencia, al igual que en Java: 1 var x = stooge; 2 x.nickname = ³Curly ³; 3 var nick = stooge.nickname; 4 // nick is ³Curly ³ because x and stooge 5 // are references to the same object 6 7 var a = {}, b = {}, c = {}; 8 // a, b, and c each refer to a 9 // different empty object 10 a = b = c = {}; 11 // a, b, and c all refer to 12 // the same empty object Introducción a JavaScript p. 13

14 Funciones Las funciones son objetos: Pueden usarse como cualquier otro objeto en asignaciones, etc. Declaración literal de funciones: 1 // Create a variable called add and store a 2 // function in it that adds two numbers. 3 4 var add = function (a, b) { 5 return a + b; 6 }; Introducción a JavaScript p. 14

15 Invocación a funciones Varios patrones de invocación: Invocación como método. Invocación como función. Invocación como constructor. Invocación medianteapply. Introducción a JavaScript p. 15

16 Invocación como método 1 // Create myobject. It has a value and an increment 2 // method. The increment method takes an optional 3 // parameter. If the argument is not a number, then 1 4 // is used as the default. 5 6 var myobject = { 7 value: 0, 8 increment: function (inc) { 9 this.value += typeof inc === ³number ³? inc : 1; 10 } 11 }; myobject.increment(); 14 document.writeln(myobject.value); // myobject.increment(2); 17 document.writeln(myobject.value); // 3 Introducción a JavaScript p. 16

17 Invocación como función 1 var sum = add(3, 4); // sum is 7 Introducción a JavaScript p. 17

18 Invocación conapply 1 // Make an array of 2 numbers and add them. 2 3 var array = [3, 4]; 4 var sum = add.apply(null, array); // sum is 7 Introducción a JavaScript p. 18

19 Excepciones 1 var add = function (a, b) { 2 if (typeof a!== ³number ³ typeof b!== ³number ³) { 3 throw { 4 name: ³TypeError ³, 5 message: ³ add needs numbers ³ 6 }; 7 } 8 return a + b; 9 } try { 12 add("seven"); 13 } catch (e) { 14 document.writeln(e.name + ³: ³ + e.message); 15 } Introducción a JavaScript p. 19

20 Herencia En Javascript no existe el concepto de clase. Cada objeto está asociado a un prototipo. La herencia es de objeto a objeto mediante el sistema de prototipos. Introducción a JavaScript p. 20

21 Herencia 1 var mymammal = { 2 name: ³ Herb the Mammal ³, 3 get_name: function () { 4 return this.name; 5 }, 6 says: function () { 7 return this.saying ³ ³; 8 } 9 }; Introducción a JavaScript p. 21

22 Herencia (diferencial) 1 var mycat = Object.create(myMammal); 2 mycat.name = ³ Henrietta ³; 3 mycat.saying = ³ meow ³; 4 mycat.purr = function (n) { 5 var i, s = ³ ³; 6 for (i = 0; i < n; i += 1) { 7 if (s) { 8 s += ³- ³; 9 } 10 s += ³r ³; 11 } 12 return s; 13 }; 14 mycat.get_name = function () { 15 return this.says() + ³ ³ + this.name + ³ ³ + this.says(); 16 }; Introducción a JavaScript p. 22

23 Arrays 1 var empty = []; 2 var numbers = [ 3 ³zero ³, ³one ³, ³two ³, ³three ³, ³four ³, 4 ³five ³, ³six ³, ³seven ³, ³eight ³, ³nine ³ 5 ]; 6 7 empty[1] // undefined 8 numbers[1] // ³one ³ 9 10 empty.length // 0 11 numbers.length // numbers.length = 3; 14 // numbers is [ ³zero ³, ³one ³, ³two ³] numbers[numbers.length] = ³ shi ³; 17 // numbers is [ ³zero ³, ³one ³, ³two ³, ³shi ³] numbers.push( ³ go ³); 20 // numbers is [ ³zero ³, ³one ³, ³two ³, ³shi ³, ³go ³] delete numbers[2]; 23 // numbers is [ ³zero ³, ³one ³, undefined, ³shi ³, ³go ³] numbers.splice(2, 1); 26 // numbers is [ ³zero ³, ³one ³, ³shi ³, ³go ³] Introducción a JavaScript p. 23

24 Referencias Douglas Crockford. JavaScript: The Good Parts. O Reilly Media, Inc. (2008) Acceso en línea en Safari La mayoría de los ejemplos de estas transparencias provienen de este libro. David Flanagan. JavaScript: The Definitive Guide (6th Ed.) O Reilly. Acceso en línea en Safari Introducción a JavaScript p. 24

25 Client-side JavaScript Introducción a JavaScript p. 25

26 Client-side JavaScript El término client-side JavaScript hace referencia al entorno de ejecución de código JavaScript proporcionado por los navegadores web. Este entorno lo conforman las APIs de JavaScript definidas por HTML5 y otros estándares relacionados, e implementadas por los navegadores. Introducción a JavaScript p. 26

27 Client-side JavaScript Client-side JavaScript hace interactivo el documento HTML mediante, principalmente: Manejadores de eventos: Se puede ejecutar código específico (manejadores) cuando se cargue/cierre la página, el usuario interaccione con elementos de la misma, o periódicamente. Modificación dinámica del documento: Mediante APIs (p.e. la API de DOM) el programa JavaScript puede modificar el documento HTML que se visualiza. Introducción a JavaScript p. 27

28 Inclusión de JavaScript en HTML 1 <!-- directamente con el elemento script 2 (en la cabecera o en el cuerpo del documento) --> 3 <script type="text/javascript"> 4 var d = new Date(); 5 document.write(d.tolocalestring()); 6 </script> 7 8 <!-- desde un recurso externo --> 9 <script src="scripts/util.js" type="text/javascript" /> <!-- desde un manejador de eventos de HTML --> 12 <input type="button" value="change" onclick="changename()" /> 13 <p onmouseover="showhelp( ³ p1 ³)">...</p> Introducción a JavaScript p. 28

29 Ejemplo: API DOM (I) 1 var n = document.documentelement; // objeto Node 2 var children = n.childnodes; // objeto NodeList 3 var head = children[0]; 4 var body = children[1]; 5 6 // contar el número de tablas 7 var tables = document.getelementsbytagname("table"); 8 alert("el documento contiene " + tables.length + " tablas."); 9 10 // acceso a un párrafo <p id="specialparagraph">...</p> 11 var paragraph = document.getelementbyid("specialparagraph"); Introducción a JavaScript p. 29

30 Ejemplo: API DOM (II) 1 // modificar un atributo de un elemento 2 var headline = document.getelementbyid("headline"); 3 // alternativa genérica: 4 headline.setattribute("align", "center"); 5 // alternativa para atributos estándar del elemento 6 headline.align = "center"; 7 8 // añadir un elemento 9 var p = document.getelementbyid("headline"); 10 var i = document.createelement("i"); 11 i.class = "resaltado"; 12 i.appendchild(document.createtextnode("texto en cursiva")); 13 p.appendchild(i); Introducción a JavaScript p. 30

31 Referencias David Flanagan. JavaScript: The Definitive Guide (6th Ed.) O Reilly. Acceso en línea en Safari Introducción a JavaScript p. 31

32 JQuery Introducción a JavaScript p. 32

33 Hola mundo con JQuery Biblioteca de código para JavaScript: Proporciona una API más sencilla para el programador: Acceso al árbol DOM, envío de peticiones XMLHttpRequest, animaciones, etc. Proporciona un acceso uniforme a su funcionalidad, incluso en versiones antiguas de navegadores. Introducción a JavaScript p. 33

34 Hola mundo con JQuery 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>mi primera página con jquery</title> 6 <script src=" /2.1.1/jquery.min.js"></script> 7 <script type="text/javascript"> 8 $(document).ready(function() { 9 console.log("ready!"); 10 }); 11 </script> 12 </head> 13 <body> 14 <p> Hola Mundo!</p> 15 </body> 16 </html> Introducción a JavaScript p. 34

35 Hola mundo con JQuery 1 // Se ejecuta el código de inicialización cuando el árbol 2 // esté cargado 3 $(document).ready(function() { 4 console.log("ready!"); 5 }); 6 7 // Forma compacta equivalente a lo anterior 8 $(function() { 9 console.log("ready!"); 10 }); Introducción a JavaScript p. 35

36 Encadenamiento de métodos 1 var title = $("<h1> Hola!</h1>").css("font-family", "sans-serif") 2 $("body").prepend(title) 3.css("color", "navy") 4.fadeIn(5000) 5.fadeOut(5000); 6 }); Introducción a JavaScript p. 36

37 Acceso a elementos Introducción a JavaScript p. 37

38 Acceso a atributos de elementos 1 // Consulta atributo title del primer párrafo 2 $("p").attr("title"); 3 4 // Establece el atributo src del elemento con id "logo" 5 $("#logo").attr("src", "logo.png"); 6 7 // Establece varios atributos a la vez 8 $("#banner").attr({src:"banner.gif", 9 alt:"advertisement", 10 width:720, 11 height:64}); Introducción a JavaScript p. 38

39 Acceso a atributos de elementos 1 // Todos los enlaces se cargarán en ventana nueva 2 $("a").attr("target", "_blank"); 3 4 // Los enlaces se cargarán en ventana nueva o en la actual 5 // dependiendo de si referencian a otro dominio o al actual 6 $("a").attr("target", function() { 7 if (this.host == location.host) { 8 return "_self"; 9 } else { 10 return "_blank"; 11 } 12 }); // Elimina el atributo target de todos los enlaces 15 $("a").removeattr("target"); Introducción a JavaScript p. 39

40 Acceso a propiedades CSS de elementos 1 // Lee el valor de font-weight en el primer elemento h1 2 $("h1").css("font-weight"); 3 4 // establece una propiedad en todos los h1 5 $("h1").css("font-variant", "smallcaps"); 6 7 // establece una propiedad compuesta 8 $("div.note").css("border", "solid black 2px"); 9 10 // establece varias propiedades a la vez 11 $("h1").css({backgroundcolor: "black", 12 textcolor: "white", 13 fontvariant: "small-caps", 14 padding: "10px 2px 4px 20px", 15 border: "dotted black 4px"}); // Incrementa los tamaños de tipografía un 25% 18 $("h1").css("font-size", function(i, curval) { 19 return Math.round(1.25 * parseint(curval)); 20 }); Introducción a JavaScript p. 40

41 Acceso al atributo class 1 // Añade la clase "firstpara" a los p 2 // que aparezcan a continuación de un h1 3 $("h1+p").addclass("firstpara"); 4 5 // Elimina una clase de todos los párrafos 6 $("p").removeclass("firstpara"); 7 8 // Elimina todas las clases 9 $("p").removeclass(); // Alterna la clase (con dos clases a la vez) 12 $("h1").toggleclass("big bold"); // Averigua si un elemento es de las clases big y bold 15 $("#first").is(".big.bold"); Introducción a JavaScript p. 41

42 Acceso a valores de controles en formularios 1 // Obtiene el valor del control con id "surname" 2 $("#surname").val() 3 4 // Obtiene el valor del botón radio que esté seleccionado 5 $("input:radio[name=ship]:checked").val() 6 7 // Establece el valor de un control 8 $("#total_price").val("23.99") 9 10 // Marca dos checkboxes dados sus nombres o valores 11 $("input:checkbox").val(["opt1", "opt2"]) // Restablece los valores por defecto 14 $("input:text").val(function() { 15 return this.defaultvalue; 16 }) Introducción a JavaScript p. 42

43 Acceso al contenido de un elemento 1 // Obtiene el título del documento 2 var t = $("head title").text(); 3 4 // Obtiene el contenido del primer h1 como texto HTML 5 var hdr = $("h1").html() 6 7 // Establece un texto 8 $("#title").text("another title") 9 10 // Numera las secciones h2 del documento 11 $("h2").text(function(n, current) { 12 return " " + (n+1) + ": " + current; 13 }); Introducción a JavaScript p. 43

44 Modificaciones del documento Introducción a JavaScript p. 44

45 Modificaciones complejas del documento 1 // Añade al final del contenido de un elemento 2 $("#log").append("<em>new content</em>"); 3 4 // Añade al principio del contenido de cada h1 5 $("h1").prepend("chapter: "); 6 7 // Añade inmediatamente antes o después de cada h1 8 $("h1").before("<hr>"); 9 $("h1").after("<hr>"); // Reemplaza cada h2 por un h1, conservando el contenido 12 $("h2").each(function() { 13 var h2 = $(this); 14 h2.replacewith("<h1>" + h2.html() + "</h1>"); 15 }); // Envuelve cada imagen en un elemento div 18 $("img").wrap("<div class="image"></div>"); // Envuelve el contenido de cada elemento div 21 // con clase "img" con otro div 22 $("div.image").wrapinner("<div class="inner"></div>"); Introducción a JavaScript p. 45

46 Modificaciones complejas del documento 1 // Hay variantes de algunas de las funciones anteriores 2 // que aplican sobre el contenido a insertar 3 $("<em>new content</em>").appendto("#log"); 4 $(document.createtextnode("chapter: ")).prependto("h1"); 5 $("<hr/>").insertbefore("h1"); 6 $("<hr/>").insertafter("h1"); Introducción a JavaScript p. 46

47 Copia de elementos 1 // Añade una sección nav 2 $(document.body) 3.append("<nav id= ³ linklist ³ ><h1>links</h1></nav>"); 4 5 // Copia todos los enlaces 6 $("a").clone().appendto("#linklist"); 7 8 // Línea nueva tras cada enlace 9 $("#linklist > a").after("<br/>"); Introducción a JavaScript p. 47

48 Eliminación de contenido 1 // Elimina el contenido del elemento con id "log", 2 // pero mantiene el propio elemento 3 $("#log").empty(); 4 5 // Elimina el elemento con id "log", includidos 6 // los manejadores de eventos y datos auxiliares 7 $("#log").remove(); 8 9 // Extrae el elemento con id "log" y su contenido, 10 // pero conserva manejadores de eventos y datos auxiliares. 11 // Es útil para volver a insertar el elemento más tarde. 12 var e = $("#log").detach(); // Elimina el elemento que envuelva al elemento con id "log" 15 $("#log").unwrap(); Introducción a JavaScript p. 48

49 Manejadores de eventos Introducción a JavaScript p. 49

50 Manejadores de eventos Permiten registrar acciones a llevar a cabo cuando ocurran determinados eventos sobre un elemento de la página: Se hace click sobre el elemento. El ratón pasa por encima de un elemento. Cambia el valor de un control de un formulario.... Las acciones se expresan como una función JavaScript. Introducción a JavaScript p. 50

51 Eventos de carga del documento Normalmente los scripts necesitan que el documento haya sido cargado para ejecutarse de forma fiable. El código de inicialización debe esperar a eventos que así lo indiquen. Función jquery Descripción del evento ready() load() unload() Se ha cargado el modelo DOM del documento (se suelen registrar las inicializaciones en este evento). Se ha representado la página y cargado todos sus recursos adicionales. Se abandona la página (se sigue enlace, se cierra la pestaña, se recarga el documento, se va hacia atrás o hacia delante). Introducción a JavaScript p. 51

52 Eventos de carga del documento 1 // Con ready: 2 $(document).ready(function() { 3 console.log("ready!"); 4 }); 5 6 // Equivalente a lo anterior: 7 $(function() { 8 console.log("ready!"); 9 }); // Con load: 12 $(window).load(function() { }); // Cuando se abandona la página (se sigue enlace, se cierra 17 // la pestaña, se recarga el documento, se va hacia atrás 18 // o hacia delante): 19 $(window).unload(function() { }); Introducción a JavaScript p. 52

53 Eventos del navegador Función jquery error() resize() scroll() Descripción del evento Se ha producido un error en la carga del elemento (p.e. una imagen). Se envía awindow cuando cambia el tamaño de la ventana. Se hace scroll en la ventana o en un elemento con barras de scroll. Introducción a JavaScript p. 53

54 Eventos del navegador 1 $("#myphoto").error(function() { 2 alert("handler for.error() called.") 3 }) 4 5 $(window).resize(function() { 6 $("#log").append("<div>handler for.resize() called.</div>"); 7 }); 8 9 $(window).scroll(function() { 10 $("#log").append("<div>handler for.scroll() called.</div>"); 11 }); $("#target").scroll(function() { 14 $("#log").append("<div>handler for.scroll() called.</div>"); 15 }); Introducción a JavaScript p. 54

55 Eventos de formulario Función jquery focus() blur() focusin() focusout() change() submit() Descripción del evento El elemento consigue el foco. El elemento pierde el foco. El elemento o algún descendiente suyo consigue el foco. El elemento o algún descendiente suyo pierde el foco. Cambia el valor del elemento (sólo en controles de formulario). El usuario intenta enviar el formulario. Introducción a JavaScript p. 55

56 Eventos de formulario 1 // Si el id del elemento form es "target": 2 $("#target").submit(function(event) { 3 alert("handler for.submit() called."); 4 event.preventdefault(); // evita el envío 5 }); 6 7 // Fuerza el envío cuando se hace click en otro elemento: 8 $("#other").click(function() { 9 $("#target").submit(); 10 }); // Cambia el valor de un control de la clase "target": 13 $(".target").change(function() { 14 alert("handler for.change() called."); 15 }); Introducción a JavaScript p. 56

57 Eventos de ratón Función jquery Descripción del evento click() dblclick() El usuario hace click sobre el elemento. El usuario hace doble click sobre el elemento. mouseenter() El puntero entra en el área del elemento. mouseleave() El puntero sale del área del elemento. hover() mousedown() mousemove() toggle() El puntero entra en el área del elemento (primer manejador) o sale (segundo manejador). El botón del ratón es presionado con el puntero dentro del elemento. El puntero se mueve estando dentro del elemento. Registra dos o más manejadores para ser ejecutados alternativamente cuando se hace click en el elemento. Introducción a JavaScript p. 57

58 Eventos de ratón 1 $( "#target" ).dblclick(function() { 2 alert( "Handler for.dblclick() called." ); 3 }); 4 5 $("#outer").mouseenter(function() { 6 $("#log").append("<div>handler for.mouseenter().</div>"); 7 }); 8 9 $("td").hover( 10 function() { 11 $(this).addclass("hover"); 12 }, function() { 13 $(this).removeclass("hover"); 14 } 15 ); Introducción a JavaScript p. 58

59 Objetos evento Los manejadores de eventos reciben como argumento un objeto que representa el evento: Contiene propiedades con información acerca del evento: Elemento que genera el evento, teclas presionadas, posición del puntero, etc. Proporciona métodos: Para evitar la acción por defecto (envío de formulario, que se cargue el destino de un enlace, etc.) Para evitar que el evento continúe propagándose o se ejecuten otros manejadores. Introducción a JavaScript p. 59

60 Objetos evento 1 $(function() { 2 $("body").click(function(event) { 3 $("#log").html("clicked: " + event.target.nodename 4 + " at " + event.screenx 5 + ", " + event.screeny); 6 }); 7 }); Introducción a JavaScript p. 60

61 Animaciones Introducción a JavaScript p. 61

62 Efectos predefinidos Función jquery Descripción del efecto fadein() fadeout() fadeto() show() hide() toggle() slidedown() slideup() El elemento aparece mediante cambio progresivo de opacidad. El elemento desaparece mediante cambio progresivo de opacidad. Cambia progresivamente la opacidad del elemento desde la actual hasta la final proporcionada como parámetro. Aumenta el ancho, alto y opacidad del elemento progresivamente hasta que es visible. Reduce el ancho, alto y opacidad del elemento progresivamente hasta que no es visible. Alterna entreshow() yhide(). Aumenta progresivamente la altura del elemento hasta que es completamente visible. Reduce progresivamente la altura del elemento hasta que no es visible. slidetoggle() Alterna entreslidedown() yslideup(). Introducción a JavaScript p. 62

63 Efectos predefinidos 1 $(function() { 2 $(".clickable").css("cursor", "pointer") 3.click(function(event) { 4 $(event.target).parent().next().toggle("slow"); 5 }); 6 }); 1 $(function() { 2 $(".clickable").css("cursor", "pointer") 3.click(function(event) { 4 $(event.target).parent().next().slidetoggle(200); 5 }); 6 }); Introducción a JavaScript p. 63

64 Animaciones a medida 1 $(function() { 2 $(".clickable").css("cursor", "pointer") 3.click(function(event) { 4 $(event.target).parent().next().animate({ 5 width: "70%", 6 fontsize: "16pt" 7 }, { 8 duration: }); 10 }); 11 }); Introducción a JavaScript p. 64

65 Referencias David Flanagan. JQuery Pocket Reference O Reilly (2010). Acceso en línea en Safari David Flanagan. JavaScript: The Definitive Guide (6th Ed.) O Reilly. Acceso en línea en Safari Introducción a JavaScript p. 65