Introducción a JavaScript

Transcripción

1 Introducción a JavaScript Jesús Arias Fisteus Computación Web (2017/18) Computación Web (2017/18) Introducción a JavaScript 1

2 Parte I El lenguaje de programación JavaScript Computación Web (2017/18) Introducción a JavaScript 2

3 Introducción a JavaScript JavaScript: Lenguaje de programación interpretado. Débilmente tipado. Orientado a objetos. De propósito general, pero utilizado habitualmente en navegadores Web (client-side JavaScript). Estandarizado bajo el nombre de ECMAScript. Computación Web (2017/18) Introducción a JavaScript 3

4 Sentencias de control Relativamente similares en sintaxis a las de Java y C: if, switch. for, while, do while. return, break, continue. Computación Web (2017/18) Introducción a JavaScript 4

5 Condicionales y comparaciones Operadores de comparación: ===,!== <, <=, >, >= Operadores lógicos: &&,,! 1 if (n === 1) { 2 console. log (" You have 1 new message."); 3 } else { 4 console. log (" You have " + n + " new messages."); 5 } Computación Web (2017/18) Introducción a JavaScript 5

6 Bucles 1 var count = 0; 2 while ( count < 10) { 3 4 console. log ( count ); count ++; 5 } 6 7 for ( var count = 0; count < 10; count ++) { 8 console. log ( count ); 9 } var var person x; = { fname : " John ", lname : " Doe ", age : 25}; 13 for ( x in person ) { 14 console. log ( person [x]); 15 } Computación Web (2017/18) Introducción a JavaScript 6

7 Tipos de datos Tipos de datos simples: Números, cadenas de texto, booleanos, null, undefined. Objetos: Arrays, funciones, expresiones regulares, objetos. Computación Web (2017/18) Introducción a JavaScript 7

8 Objetos Contenedores de propiedades: Cada propiedad tiene un nombre y un valor. Un objeto puede heredar de otro objeto. No existe un concepto de clase que restrinja las propiedades que puede tener un objeto Aunque ECMAScript 6 (2015) introduce una capa sintáctica que permite definir clases. Computación Web (2017/18) Introducción a JavaScript 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 }; Computación Web (2017/18) Introducción a JavaScript 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 }; Computación Web (2017/18) Introducción a JavaScript 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 Computación Web (2017/18) Introducción a JavaScript 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 2 stooge [ 'middle - name '] = 'Lester '; stooge. nickname = ' Curly '; 3 4 flight. equipment = { model : 'Boeing 777 ' 5 6 }; flight. status = ' overdue '; Computación Web (2017/18) Introducción a JavaScript 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 Computación Web (2017/18) Introducción a JavaScript 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 var add = function (a, b) { return a + b; 6 }; Computación Web (2017/18) Introducción a JavaScript 14

15 Invocación a funciones Varios patrones de invocación: Invocación como función. Invocación como método. Invocación como constructor. Invocación mediante apply. Computación Web (2017/18) Introducción a JavaScript 15

16 Invocación como función 1 2 var add = function (a, b) { return a + b; 3 }; 4 5 var sum = add (3, 4); // sum is 7 Computación Web (2017/18) Introducción a JavaScript 16

17 Invocación como método 1 2 var myobject = { value : 0, 3 4 increment : function ( inc ) { this. value += inc ; 5 } 6 }; 7 8 myobject. increment (2) ; 9 myobject. value ; // myobject. increment (1) ; 12 myobject. value ; // 3 Computación Web (2017/18) Introducción a JavaScript 17

18 Invocación como constructor 1 // Declare the constructor function 2 var Color = function (r, g, b) { 3 // Attributes 4 this.r = r; 5 this.g = g; 6 this.b = b; 7 8 // Methods 9 this. luminosity = function () { 10 return Math. round (0.21 * this. r * this. g * this. b); 12 } this. tograyscale () { 15 var a = this. luminosity (); 16 return new Color (a, a, a); 17 } 18 } // Create a new object 21 var red = new Color (255, 0, 0); 22 red. luminosity (); // var gray = red. tograyscale (); // Color ( r: 54, g: 54, b: 54) Computación Web (2017/18) Introducción a JavaScript 18

19 Clases (a partir de ECMAScript 6) 1 class Color { 2 constructor (r, g, b) { 3 this.r = r; 4 this.g = g; 5 this.b = b; 6 } 7 8 get luminosity () { 9 return Math. round (0.21 * this. r * this. g * this. b); 11 } tograyscale () { var a = this. luminosity ; 15 return new Color (a, a, a); 16 } 17 } // Create a new object 20 var red = new Color (255, 0, 0); 21 red. luminosity ; // var gray = red. tograyscale (); // Color ( r: 54, g: 54, b: 54) Computación Web (2017/18) Introducción a JavaScript 19

20 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 } Computación Web (2017/18) Introducción a JavaScript 20

21 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 '] Computación Web (2017/18) Introducción a JavaScript 21

22 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. Computación Web (2017/18) Introducción a JavaScript 22

23 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. Computación Web (2017/18) Introducción a JavaScript 23

24 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 "></ script > <! -- desde un manejador de eventos de HTML --> 12 <input type=" button " value=" Change " onclick=" changename ()"> 13 <p onmouseover=" showhelp ( 'p1 ')">... </p> Computación Web (2017/18) Introducción a JavaScript 24

25 Referencias Douglas Crockford. JavaScript: The Good Parts. O Reilly Media, Inc. (2008) Acceso en ĺı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 ĺınea en Safari Computación Web (2017/18) Introducción a JavaScript 25

26 Parte II JQuery Computación Web (2017/18) Introducción a JavaScript 26

27 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. Computación Web (2017/18) Introducción a JavaScript 27

28 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 =" https :// ajax. googleapis. com / ajax / libs / jquery /3.2.1/ jquery. min.js"></ script > 7 < script type =" text / javascript "> 8 $( document ). ready ( function () { 9 console. log (" ready!"); 10 }); 11 </ script > </ head > <body > 14 <p> Hola Mundo!</p> 15 </ body > 16 </ html > Computación Web (2017/18) Introducción a JavaScript 28

29 El evento ready 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 }); Computación Web (2017/18) Introducción a JavaScript 29

30 Encadenamiento de métodos Versión tradicional : 1 var title = $("<h1 > Hola! </h1 >"); 2 title. css ("font - family ", "sans - serif "); 3 var body = $(" body "); 4 body. prepend ( title ) 5 body. css (" color ", " navy ") 6 body. fadein (5000) 7 body. fadeout (5000) ; Versión con encadenamiento de métodos: 1 var title = $("<h1 > Hola! </h1 >"). css ("font - family ", 2 "sans - serif "); 3 $(" body "). prepend ( title ) 4. css (" color ", " navy ") 5. fadein (5000) 6. fadeout (5000) ; Computación Web (2017/18) Introducción a JavaScript 30

31 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}) ; Computación Web (2017/18) Introducción a JavaScript 31

32 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 8 if ( this. host == location. host ) { return " _self "; 9 10 } else { return " _blank "; 11 } 12 }); // Elimina el atributo target de todos los enlaces 15 $("a"). removeattr (" target "); Computación Web (2017/18) Introducción a JavaScript 32

33 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 ", " small - caps "); 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 : " 10 px 2px 4px 20 px", 15 border : " dotted black 4px"}); // Incrementa los tama ~nos de tipograf ía un 25 % 18 $("h1"). css ("font - size ", function (i, curval ) { 19 return Math. round (1.25 * parseint ( curval )); 20 }); Computación Web (2017/18) Introducción a JavaScript 33

34 Acceso al atributo class 1 // A~n 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 "); Computación Web (2017/18) Introducción a JavaScript 34

35 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 (" ") 9 10 // Marca dos checkboxes dados sus nombres o valores 11 $(" input : checkbox "). val ([" opt1 ", " opt2 "]) // Restablece los valores por defecto $(" input : text "). val ( function () return this. defaultvalue ; { 16 }) Computación Web (2017/18) Introducción a JavaScript 35

36 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 }); Computación Web (2017/18) Introducción a JavaScript 36

37 Árbol DOM 1 <! DOCTYPE html > 2 <html > 3 <head > 4 <title > Barney says... </ title > 5 6 </ head > <body > 7 8 <h1 > Barney <p> says </h1 > 9 This is going to be <em > legendary </ em > 10 </ p> 11 </ body > 12 </ html > Computación Web (2017/18) Introducción a JavaScript 37

38 Árbol DOM html head body title h1 p "Barney says..." "Barney says" "This is going to be" em "legendary" Computación Web (2017/18) Introducción a JavaScript 38

39 Modificaciones del documento 1 // A~n ade al final del contenido de un elemento 2 $("# log "). append ("<em > new content </em >"); 3 4 // A~n ade al principio del contenido de cada h1 5 $("h1"). prepend (" Chapter : "); 6 7 // A~n 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 >"); Computación Web (2017/18) Introducción a JavaScript 39

40 Modificaciones 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"); Computación Web (2017/18) Introducción a JavaScript 40

41 Copia de elementos 1 // A~n 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/>"); Computación Web (2017/18) Introducción a JavaScript 41

42 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 (); Computación Web (2017/18) Introducción a JavaScript 42

43 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. Computación Web (2017/18) Introducción a JavaScript 43

44 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 ready().on("load", handler).on("unload", handler) Descripción del evento 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). Computación Web (2017/18) Introducción a JavaScript 44

45 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 : $( window ).on(" load ",... function () { 14 }); // Cuando se abandona la pá gina ( se sigue enlace, se cierra 17 // la pesta ~na, se recarga el documento, se va hacia atr ás 18 // o hacia delante ): $( window ).on(" unload ",... function () { 21 }); Computación Web (2017/18) Introducción a JavaScript 45

46 Eventos del navegador Función jquery.on("error", handler) resize() scroll() Descripción del evento Se ha producido un error en la carga del elemento (p.e. una imagen). Se envía a window cuando cambia el tamaño de la ventana. Se hace scroll en la ventana o en un elemento con barras de scroll. Computación Web (2017/18) Introducción a JavaScript 46

47 Eventos del navegador 1 $("# myphoto ").on(" error ", function () { 2 alert (" Handler for. error () called."); 3 }); 4 5 $( window ).on(" load ", function () { 6 $("# log "). append ("<div > Handler for window load </ div >"); 7 }); 8 9 $( window ).on(" unload ", function () { 10 $("# log "). append ("<div > Handler for window unload </ div >") ; 11 }); $( window ). resize ( function () { 14 $("# log "). append ("<div > Handler for. resize () </div >"); 15 }); $( window ). scroll ( function () { 18 $("# log "). append ("<div > Handler for. scroll () </div >"); 19 }); $("# target "). scroll ( function () { 22 $("# log "). append ("<div > Handler for. scroll () </div >"); 23 }); Computación Web (2017/18) Introducción a JavaScript 47

48 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. Computación Web (2017/18) Introducción a JavaScript 48

49 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 }); Computación Web (2017/18) Introducción a JavaScript 49

50 Eventos de ratón Función jquery click() dblclick() mouseenter() mouseleave() hover() mousedown() mousemove() toggle() Descripción del evento El usuario hace click sobre el elemento. El usuario hace doble click sobre el elemento. El puntero entra en el área del elemento. El puntero sale del área del elemento. 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. Computación Web (2017/18) Introducción a JavaScript 50

51 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 ); Computación Web (2017/18) Introducción a JavaScript 51

52 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. Computación Web (2017/18) Introducción a JavaScript 52

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

54 Efectos predefinidos Función jquery fadein() fadeout() fadeto() show() hide() toggle() slidedown() slideup() slidetoggle() Descripción del efecto 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 entre show() y hide(). Aumenta progresivamente la altura del elemento hasta que es completamente visible. Reduce progresivamente la altura del elemento hasta que no es visible. Alterna entre slidedown() y slideup(). Computación Web (2017/18) Introducción a JavaScript 54

55 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 () 5. slidetoggle (200) ; 6 }); 7 }); Computación Web (2017/18) Introducción a JavaScript 55

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

57 Referencias David Flanagan. JQuery Pocket Reference O Reilly (2010). Acceso en ĺınea en Safari David Flanagan. JavaScript: The Definitive Guide (6th Ed.) O Reilly. Acceso en ĺınea en Safari JQuery API Documentation Computación Web (2017/18) Introducción a JavaScript 57