introducción a javascript computación web (curso 2015/2016)

Edited

with

em

acs

+LA

T EX

+pro

sper

Introducción a JavaScript

Computación 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


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.


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.


Edited

with

em

acs

+LA

T EX

+pro

sper

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 }


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 }


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.


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.


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 };


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 };


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


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 ';


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


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 };


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.


Edited

with

em

acs

+LA

T EX

+pro

sper

Invocación como método

1 var myObject = {2 value: 0,3 increment: function (inc) {4 this.value += inc;5 }6 };7

8 myObject.increment(2);9 myObject.value; // 2

10

11 myObject.increment(1);12 myObject.value; // 3


Edited

with

em

acs

+LA

T EX

+pro

sper

Invocación como función

1 var sum = add(3, 4); // sum is 7


Edited

with

em

acs

+LA

T EX

+pro

sper

Invocación como constructor

1 // Declare the constructor function2 var Color = function(r, g, b) {3 // Attributes4 this.r = r;5 this.g = g;6 this.b = b;7

8 // Methods9 this.luminosity = function() {

10 return Math.round(0.21 * this.r + 0.72 *this.g + 0.07 * this.b);

11 }12 }13

14 // Create a new object15 var red = new Color(255, 0, 0);16 red.luminosity(); // 54


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 }

10

11 try {12 add("seven");13 } catch (e) {

14 document.writeln(e.name + ': ' + e.message);15 }


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 ']


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.



http://proquest.safaribooksonline.com/book/programming/javascript/9780596517748


Edited

with

em

acs

+LA

T EX

+pro

sper

Client-side JavaScript


Edited

with

em

acs

+LA

T EX

+pro

sper


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.


Edited

with

em

acs

+LA

T EX

+pro

sper


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.


Edited

with

em

acs

+LA

T EX

+pro

sper

Inclusión de JavaScript en HTML

1 3 <script type="text/javascript">4 var d = new Date();5 document.write(d.toLocaleString());6 </script>78 9 <script src="scripts/util.js" type="text/javascript"></script>

1011 12 <input type="button" value="Change" onclick="changeName()">13 <p onmouseover="showHelp( 'p1 ')">...</p>

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");


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);


Edited

with

em

acs

+LA

T EX

+pro

sper

Referencias





Edited

with

em

acs

+LA

T EX

+pro

sper

JQuery


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.


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>


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 });


Edited

with

em

acs

+LA

T EX

+pro

sper

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", "sans-serif");2 $("body").prepend(title)3 .css("color", "navy")4 .fadeIn(5000)5 .fadeOut(5000);


Edited

with

em

acs

+LA

T EX

+pro

sper

Acceso a elementos


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});


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");


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 });


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");


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 })


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 });


Edited

with

em

acs

+LA

T EX

+pro

sper

Modificaciones del documento


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


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>");


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");


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/>");


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();


Edited

with

em

acs

+LA

T EX

+pro

sper

Manejadores de eventos


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.


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


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 });


Edited

with

em

acs

+LA

T EX

+pro

sper

Eventos del navegador


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.


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 });


Edited

with

em

acs

+LA

T EX

+pro

sper

Eventos de formulario


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.


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 });


Edited

with

em

acs

+LA

T EX

+pro

sper

Eventos de ratón


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.


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 );


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.


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 });


Edited

with

em

acs

+LA

T EX

+pro

sper

Animaciones


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().


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 });


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 });


Edited

with

em

acs

+LA

T EX

+pro

sper

Referencias

David Flanagan. “JQuery Pocket Reference”O’Reilly (2010).




JQuery API Documentation

https://api.jquery.com/


http://proquest.safaribooksonline.com/book/web-development/jquery/9781449398958


https://api.jquery.com/

introducción a javascript computación web (curso 2015/2016)

Documents