introducción a javascript aplicaciones web (curso … · sintácticamente parecido a c, c++ y...
TRANSCRIPT
Edited
with
em
acs
+LA
T EX
+pro
sper
Introducción a JavaScript
Aplicaciones Web (Curso 2015/2016)
Jesus Arias Fisteus // [email protected]
Introduccion a JavaScript– p. 1
Edited
with
em
acs
+LA
T EX
+pro
sper
El lenguaje de programación JavaScript
Introduccion a JavaScript– p. 2
Edited
with
em
acs
+LA
T EX
+pro
sper
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 lainteractividad de las páginas.
Estandarizado bajo el nombre de ECMAScript.
Introduccion a JavaScript– p. 3
Edited
with
em
acs
+LA
T EX
+pro
sper
Sentencias de control
Relativamente similares en sintaxis a las de Java yC:
if, switch.
for, while, do while.
return, break, continue.
Introduccion a JavaScript– p. 4
Edited
with
em
acs
+LA
T EX
+pro
sper
Condicionales
1 if (n === 1) {2 console.log("You have 1 new message.");3 } else {4 console.log("You have " + n + " new messages.");5 }
Introduccion a JavaScript– p. 5
Edited
with
em
acs
+LA
T EX
+pro
sper
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 }
Introduccion a JavaScript– p. 6
Edited
with
em
acs
+LA
T EX
+pro
sper
Tipos de datos
Tipos de datos simples:
Números, cadenas de texto, booleanos, null,undefined.
Objetos:
Arrays, funciones, expresiones regulares,objetos.
Introduccion a JavaScript– p. 7
Edited
with
em
acs
+LA
T EX
+pro
sper
Objetos
Contenedores de propiedades:
Cada propiedad tiene un nombre y un valor.
No existe un concepto de clase que restrinja laspropiedades que puede tener un objeto.
Un objeto puede heredar de otro objeto.
Introduccion a JavaScript– p. 8
Edited
with
em
acs
+LA
T EX
+pro
sper
Ejemplo: Inicialización literal de obje-tos
1 var empty_object = {};2
3 var stooge = {4 "first-name": "Jerome",5 "last-name": "Howard"6 };
Introduccion a JavaScript– p. 9
Edited
with
em
acs
+LA
T EX
+pro
sper
Ejemplo: Inicialización literal de obje-tos
1 var flight = {2 airline: "Oceanic",3 number: 815,4 departure: {5 IATA: "SYD",6 time: "2004-09-22 14:55",7 city: "Sydney"8 },9 arrival: {
10 IATA: "LAX",11 time: "2004-09-23 10:42",12 city: "Los Angeles"13 }14 };
Introduccion a JavaScript– p. 10
Edited
with
em
acs
+LA
T EX
+pro
sper
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 devuelvenundefined:
1 stooge["middle-name"] // undefined2 flight.status // undefined3 stooge["FIRST-NAME"] // undefined
Introduccion a JavaScript– p. 11
Edited
with
em
acs
+LA
T EX
+pro
sper
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 creaautomáticamente:
1 stooge[ 'middle-name '] = 'Lester ';
2 stooge.nickname = 'Curly ';3 flight.equipment = {
4 model: 'Boeing 777 '
5 };
6 flight.status = 'overdue ';
Introduccion a JavaScript– p. 12
Edited
with
em
acs
+LA
T EX
+pro
sper
Objetos por referencia
Los objetos se pasan por referencia, al igual queen Java:
1 var x = stooge;
2 x.nickname = 'Curly ';3 var nick = stooge.nickname;
4 // nick is 'Curly ' because x and stooge5 // are references to the same object6
7 var a = {}, b = {}, c = {};8 // a, b, and c each refer to a9 // different empty object
10 a = b = c = {};11 // a, b, and c all refer to12 // the same empty object
Introduccion a JavaScript– p. 13
Edited
with
em
acs
+LA
T EX
+pro
sper
Funciones
Las funciones son objetos:
Pueden usarse como cualquier otro objeto enasignaciones, etc.
Declaración literal de funciones:1 // Create a variable called add and store a2 // function in it that adds two numbers.3
4 var add = function (a, b) {5 return a + b;6 };
Introduccion a JavaScript– p. 14
Edited
with
em
acs
+LA
T EX
+pro
sper
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 mediante apply.
Introduccion a JavaScript– p. 15
Edited
with
em
acs
+LA
T EX
+pro
sper
Invocación como método
1 // Create myObject. It has a value and an increment2 // method. The increment method takes an optional3 // parameter. If the argument is not a number, then 14 // is used as the default.56 var myObject = {7 value: 0,8 increment: function (inc) {9 this.value += typeof inc === 'number ' ? inc : 1;
10 }11 };1213 myObject.increment();14 document.writeln(myObject.value); // 11516 myObject.increment(2);17 document.writeln(myObject.value); // 3
Introduccion a JavaScript– p. 16
Edited
with
em
acs
+LA
T EX
+pro
sper
Invocación como función
1 var sum = add(3, 4); // sum is 7
Introduccion a JavaScript– p. 17
Edited
with
em
acs
+LA
T EX
+pro
sper
Invocación con apply
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
Introduccion a JavaScript– p. 18
Edited
with
em
acs
+LA
T EX
+pro
sper
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 }
1011 try {12 add("seven");13 } catch (e) {14 document.writeln(e.name + ': ' + e.message);15 }
Introduccion a JavaScript– p. 19
Edited
with
em
acs
+LA
T EX
+pro
sper
Herencia
En Javascript no existe el concepto de clase.
Cada objeto está asociado a un prototipo.
La herencia es de objeto a objeto mediante elsistema de prototipos.
Introduccion a JavaScript– p. 20
Edited
with
em
acs
+LA
T EX
+pro
sper
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 };
Introduccion a JavaScript– p. 21
Edited
with
em
acs
+LA
T EX
+pro
sper
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 };
Introduccion a JavaScript– p. 22
Edited
with
em
acs
+LA
T EX
+pro
sper
Arrays1 var empty = [];2 var numbers = [3 'zero ', 'one ', 'two ', 'three ', 'four ',4 'five ', 'six ', 'seven ', 'eight ', 'nine '
5 ];67 empty[1] // undefined8 numbers[1] // 'one '
910 empty.length // 011 numbers.length // 101213 numbers.length = 3;14 // numbers is [ 'zero ', 'one ', 'two ']15
16 numbers[numbers.length] = 'shi ';17 // numbers is [ 'zero ', 'one ', 'two ', 'shi ']18
19 numbers.push( 'go ');20 // numbers is [ 'zero ', 'one ', 'two ', 'shi ', 'go ']2122 delete numbers[2];23 // numbers is [ 'zero ', 'one ', undefined, 'shi ', 'go ']2425 numbers.splice(2, 1);26 // numbers is [ 'zero ', 'one ', 'shi ', 'go ']
Introduccion a JavaScript– p. 23
Edited
with
em
acs
+LA
T EX
+pro
sper
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 estastransparencias provienen de este libro.
David Flanagan. “JavaScript: The Definitive Guide”(6th Ed.) O’Reilly.
Acceso en línea en Safari
Introduccion a JavaScript– p. 24
Edited
with
em
acs
+LA
T EX
+pro
sper
Client-side JavaScript
El término client-side JavaScript hace referencia alentorno de ejecución de código JavaScriptproporcionado por los navegadores web.
Este entorno lo conforman las APIs de JavaScriptdefinidas por HTML5 y otros estándaresrelacionados, e implementadas por losnavegadores.
Introduccion a JavaScript– p. 26
Edited
with
em
acs
+LA
T EX
+pro
sper
Client-side JavaScript
Client-side JavaScript hace interactivo eldocumento HTML mediante, principalmente:
Manejadores de eventos:Se puede ejecutar código específico(manejadores) cuando se cargue/cierre lapágina, el usuario interaccione conelementos de la misma, o periódicamente.
Modificación dinámica del documento:Mediante APIs (p.e. la API de DOM) elprograma JavaScript puede modificar eldocumento HTML que se visualiza.
Introduccion a JavaScript– p. 27
Edited
with
em
acs
+LA
T EX
+pro
sper
Inclusión de JavaScript en HTML
1 <!-- directamente con el elemento script2 (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>78 <!-- desde un recurso externo -->9 <script src="scripts/util.js" type="text/javascript" />
1011 <!-- desde un manejador de eventos de HTML -->12 <input type="button" value="Change" onclick="changeName()" />13 <p onmouseover="showHelp( 'p1 ')">...</p>
Introduccion a JavaScript– p. 28
Edited
with
em
acs
+LA
T EX
+pro
sper
Ejemplo: API DOM (I)
1 var n = document.documentElement; // objeto Node2 var children = n.childNodes; // objeto NodeList3 var head = children[0];4 var body = children[1];5
6 // contar el número de tablas7 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");
Introduccion a JavaScript– p. 29
Edited
with
em
acs
+LA
T EX
+pro
sper
Ejemplo: API DOM (II)
1 // modificar un atributo de un elemento2 var headline = document.getElementById("headline");3 // alternativa genérica:4 headline.setAttribute("align", "center");5 // alternativa para atributos estándar del elemento6 headline.align = "center";78 // añadir un elemento9 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);
Introduccion a JavaScript– p. 30
Edited
with
em
acs
+LA
T EX
+pro
sper
Referencias
David Flanagan. “JavaScript: The Definitive Guide”(6th Ed.) O’Reilly.
Acceso en línea en Safari
Introduccion a JavaScript– p. 31
Edited
with
em
acs
+LA
T EX
+pro
sper
JQuery
Biblioteca de código para JavaScript:
Proporciona una API más sencilla para elprogramador:
Acceso al árbol DOM, envío de peticionesXMLHttpRequest, animaciones, etc.
Proporciona un acceso uniforme a sufuncionalidad, incluso en versiones antiguas denavegadores.
Introduccion a JavaScript– p. 33
Edited
with
em
acs
+LA
T EX
+pro
sper
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="http://ajax.googleapis.com/ajax/libs/jquery
/2.1.4/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>
Introduccion a JavaScript– p. 34
Edited
with
em
acs
+LA
T EX
+pro
sper
Hola mundo con JQuery
1 // Se ejecuta el código de inicialización cuando el árbol2 // esté cargado3 $(document).ready(function() {4 console.log("ready!");5 });67 // Forma compacta equivalente a lo anterior8 $(function() {9 console.log("ready!");
10 });
Introduccion a JavaScript– p. 35
Edited
with
em
acs
+LA
T EX
+pro
sper
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 });
Introduccion a JavaScript– p. 36
Edited
with
em
acs
+LA
T EX
+pro
sper
Acceso a atributos de elementos
1 // Consulta atributo title del primer párrafo2 $("p").attr("title");34 // Establece el atributo src del elemento con id "logo"5 $("#logo").attr("src", "logo.png");67 // Establece varios atributos a la vez8 $("#banner").attr({src:"banner.gif",9 alt:"Advertisement",
10 width:720,11 height:64});
Introduccion a JavaScript– p. 38
Edited
with
em
acs
+LA
T EX
+pro
sper
Acceso a atributos de elementos
1 // Todos los enlaces se cargarán en ventana nueva2 $("a").attr("target", "_blank");3
4 // Los enlaces se cargarán en ventana nueva o en la actual5 // dependiendo de si referencian a otro dominio o al actual6 $("a").attr("target", function() {7 if (this.host == location.host) {8 return "_self";9 } else {
10 return "_blank";11 }12 });1314 // Elimina el atributo target de todos los enlaces15 $("a").removeAttr("target");
Introduccion a JavaScript– p. 39
Edited
with
em
acs
+LA
T EX
+pro
sper
Acceso a propiedades CSS de elemen-tos
1 // Lee el valor de font-weight en el primer elemento h12 $("h1").css("font-weight");34 // establece una propiedad en todos los h15 $("h1").css("font-variant", "smallcaps");67 // establece una propiedad compuesta8 $("div.note").css("border", "solid black 2px");9
10 // establece varias propiedades a la vez11 $("h1").css({backgroundColor: "black",12 textColor: "white",13 fontVariant: "small-caps",14 padding: "10px 2px 4px 20px",15 border: "dotted black 4px"});16
17 // 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 });
Introduccion a JavaScript– p. 40
Edited
with
em
acs
+LA
T EX
+pro
sper
Acceso al atributo class
1 // Añade la clase "firstpara" a los p2 // que aparezcan a continuación de un h13 $("h1+p").addClass("firstpara");4
5 // Elimina una clase de todos los párrafos6 $("p").removeClass("firstpara");78 // Elimina todas las clases9 $("p").removeClass();
1011 // Alterna la clase (con dos clases a la vez)12 $("h1").toggleClass("big bold");1314 // Averigua si un elemento es de las clases big y bold15 $("#first").is(".big.bold");
Introduccion a JavaScript– p. 41
Edited
with
em
acs
+LA
T EX
+pro
sper
Acceso a valores de controles en for-mularios
1 // Obtiene el valor del control con id "surname"2 $("#surname").val()3
4 // Obtiene el valor del botón radio que esté seleccionado5 $("input:radio[name=ship]:checked").val()67 // Establece el valor de un control8 $("#total_price").val("23.99")9
10 // Marca dos checkboxes dados sus nombres o valores11 $("input:checkbox").val(["opt1", "opt2"])1213 // Restablece los valores por defecto14 $("input:text").val(function() {15 return this.defaultValue;16 })
Introduccion a JavaScript– p. 42
Edited
with
em
acs
+LA
T EX
+pro
sper
Acceso al contenido de un elemento
1 // Obtiene el título del documento2 var t = $("head title").text();34 // Obtiene el contenido del primer h1 como texto HTML5 var hdr = $("h1").html()67 // Establece un texto8 $("#title").text("Another title")9
10 // Numera las secciones h2 del documento11 $("h2").text(function(n, current) {12 return " " + (n+1) + ": " + current;13 });
Introduccion a JavaScript– p. 43
Edited
with
em
acs
+LA
T EX
+pro
sper
Árbol DOM
html
head body
title
"Barney says..."
h1
"Barney says" em"This is going to be"
"legendary"
p
Introduccion a JavaScript– p. 45
Edited
with
em
acs
+LA
T EX
+pro
sper
Modificaciones complejas del docu-mento
1 // Añade al final del contenido de un elemento2 $("#log").append("<em>new content</em>");34 // Añade al principio del contenido de cada h15 $("h1").prepend("Chapter: ");6
7 // Añade inmediatamente antes o después de cada h18 $("h1").before("<hr>");9 $("h1").after("<hr>");
1011 // Reemplaza cada h2 por un h1, conservando el contenido12 $("h2").each(function() {13 var h2 = $(this);14 h2.replaceWith("<h1>" + h2.html() + "</h1>");15 });1617 // Envuelve cada imagen en un elemento div18 $("img").wrap("<div class= 'image'></div>");1920 // Envuelve el contenido de cada elemento div21 // con clase "img" con otro div22 $("div.image").wrapInner("<div class= 'inner'></div>");
Introduccion a JavaScript– p. 46
Edited
with
em
acs
+LA
T EX
+pro
sper
Modificaciones complejas del docu-mento
1 // Hay variantes de algunas de las funciones anteriores2 // que aplican sobre el contenido a insertar3 $("<em>new content</em>").appendTo("#log");4 $(document.createTextNode("Chapter: ")).prependTo("h1");5 $("<hr/>").insertBefore("h1");6 $("<hr/>").insertAfter("h1");
Introduccion a JavaScript– p. 47
Edited
with
em
acs
+LA
T EX
+pro
sper
Copia de elementos
1 // Añade una sección nav2 $(document.body)3 .append("<nav id= 'linklist'><h1>Links</h1></nav>");45 // Copia todos los enlaces6 $("a").clone().appendTo("#linklist");7
8 // Línea nueva tras cada enlace9 $("#linklist > a").after("<br/>");
Introduccion a JavaScript– p. 48
Edited
with
em
acs
+LA
T EX
+pro
sper
Eliminación de contenido
1 // Elimina el contenido del elemento con id "log",2 // pero mantiene el propio elemento3 $("#log").empty();45 // Elimina el elemento con id "log", includidos6 // los manejadores de eventos y datos auxiliares7 $("#log").remove();89 // 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();1314 // Elimina el elemento que envuelva al elemento con id "log"15 $("#log").unwrap();
Introduccion a JavaScript– p. 49
Edited
with
em
acs
+LA
T EX
+pro
sper
Manejadores de eventos
Permiten registrar acciones a llevar a cabo cuandoocurran determinados eventos sobre un elementode 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ónJavaScript.
Introduccion a JavaScript– p. 51
Edited
with
em
acs
+LA
T EX
+pro
sper
Eventos de carga del documento
Normalmente los scripts necesitan que eldocumento haya sido cargado para ejecutarse deforma fiable.
El código de inicialización debe esperar a eventosque así lo indiquen.
Función jQuery Descripción del evento
ready() Se ha cargado el modelo DOM del documento (se suelen regis-
trar las inicializaciones en este evento).
load() Se ha representado la página y cargado todos sus recursos adi-
cionales.
unload() 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).
Introduccion a JavaScript– p. 52
Edited
with
em
acs
+LA
T EX
+pro
sper
Eventos de carga del documento
1 // Con ready:2 $(document).ready(function() {3 console.log("ready!");4 });56 // Equivalente a lo anterior:7 $(function() {8 console.log("ready!");9 });
1011 // Con load:12 $(window).load(function() {13 ...14 });15
16 // Cuando se abandona la página (se sigue enlace, se cierra17 // la pestaña, se recarga el documento, se va hacia atrás18 // o hacia delante):19 $(window).unload(function() {20 ...21 });
Introduccion a JavaScript– p. 53
Edited
with
em
acs
+LA
T EX
+pro
sper
Eventos del navegador
Función jQuery Descripción del evento
error() Se ha producido un error en la carga del elemento (p.e. una ima-
gen).
resize() Se envía a window cuando cambia el tamaño de la ventana.
scroll() Se hace scroll en la ventana o en un elemento con barras de
scroll.
Introduccion a JavaScript– p. 54
Edited
with
em
acs
+LA
T EX
+pro
sper
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 });12
13 $("#target").scroll(function() {14 $("#log").append("<div>Handler for .scroll() called.</div>");15 });
Introduccion a JavaScript– p. 55
Edited
with
em
acs
+LA
T EX
+pro
sper
Eventos de formulario
Función jQuery Descripción del evento
focus() El elemento consigue el foco.
blur() El elemento pierde el foco.
focusin() El elemento o algún descendiente suyo consigue el foco.
focusout() El elemento o algún descendiente suyo pierde el foco.
change() Cambia el valor del elemento (sólo en controles de formulario).
submit() El usuario intenta enviar el formulario.
Introduccion a JavaScript– p. 56
Edited
with
em
acs
+LA
T EX
+pro
sper
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ío5 });6
7 // Fuerza el envío cuando se hace click en otro elemento:8 $("#other").click(function() {9 $("#target").submit();
10 });1112 // Cambia el valor de un control de la clase "target":13 $(".target").change(function() {14 alert("Handler for .change() called.");15 });
Introduccion a JavaScript– p. 57
Edited
with
em
acs
+LA
T EX
+pro
sper
Eventos de ratón
Función jQuery Descripción del evento
click() El usuario hace click sobre el elemento.
dblclick() 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() El puntero entra en el área del elemento (primer manejador) o
sale (segundo manejador).
mousedown() El botón del ratón es presionado con el puntero dentro del ele-
mento.
mousemove() El puntero se mueve estando dentro del elemento.
toggle() Registra dos o más manejadores para ser ejecutados alternati-
vamente cuando se hace click en el elemento.
Introduccion a JavaScript– p. 58
Edited
with
em
acs
+LA
T EX
+pro
sper
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 );
Introduccion a JavaScript– p. 59
Edited
with
em
acs
+LA
T EX
+pro
sper
Objetos evento
Los manejadores de eventos reciben comoargumento un objeto que representa el evento:
Contiene propiedades con información acercadel evento:
Elemento que genera el evento, teclaspresionadas, posición del puntero, etc.
Proporciona métodos:Para evitar la acción por defecto (envío deformulario, que se cargue el destino de unenlace, etc.)Para evitar que el evento continúepropagándose o se ejecuten otrosmanejadores.
Introduccion a JavaScript– p. 60
Edited
with
em
acs
+LA
T EX
+pro
sper
Objetos evento
1 $(function() {2 $("body").click(function(event) {3 $("#log").html("clicked: " + event.target.nodeName4 + " at " + event.screenX5 + ", " + event.screenY);6 });7 });
Introduccion a JavaScript– p. 61
Edited
with
em
acs
+LA
T EX
+pro
sper
Efectos predefinidos
Función jQuery Descripción del efecto
fadeIn() El elemento aparece mediante cambio progresivo de opacidad.
fadeOut() El elemento desaparece mediante cambio progresivo de opaci-
dad.
fadeTo() Cambia progresivamente la opacidad del elemento desde la ac-
tual hasta la final proporcionada como parámetro.
show() Aumenta el ancho, alto y opacidad del elemento progresivamente
hasta que es visible.
hide() Reduce el ancho, alto y opacidad del elemento progresivamente
hasta que no es visible.
toggle() Alterna entre show() y hide().
slideDown() Aumenta progresivamente la altura del elemento hasta que es
completamente visible.
slideUp() Reduce progresivamente la altura del elemento hasta que no es
visible.
slideToggle() Alterna entre slideDown() y slideUp().
Introduccion a JavaScript– p. 63
Edited
with
em
acs
+LA
T EX
+pro
sper
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 });
Introduccion a JavaScript– p. 64
Edited
with
em
acs
+LA
T EX
+pro
sper
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: 10009 });
10 });11 });
Introduccion a JavaScript– p. 65
Edited
with
em
acs
+LA
T EX
+pro
sper
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
JQuery API Documentation
https://api.jquery.com/
Introduccion a JavaScript– p. 66