DW Intro Javascript

Introducción a JavaScript
Computación Web (2016/17) Introducción a JavaScript 1

Parte I
El lenguaje de programación JavaScript

Introducción a JavaScript
I JavaScript:
I Lenguaje de programación interpretado.
I Débilmente tipado.
I Sintácticamente parecido a C, C++ y Java.
I Utilizado habitualmente en navegadores Web (client-side
JavaScript) para mejorar la interactividad de las páginas.
I Estandarizado bajo el nombre de ECMAScript.

Sentencias de control
I Relativamente similares en sintaxis a las de Java y C:

I if, switch.
I for, while, do while.
I return, break, continue.

Condicionales y comparaciones
I Operadores de comparación:
I ===, !==
I <, <=, >, >=
I Operadores lógicos:
I &&, ||, !
1 if ( n === 1) {
2 console . log ( " You have 1 new message . " ) ;
3 } else {
4 console . log ( " You have " + n + " new messages . " ) ;
5 }

Bucles
1 var count = 0;
2 while ( count < 10) {
3 console . log ( count ) ;
4 count ++;
5 }
6
7 for ( var count = 0; count < 10; count ++) {
8 console . log ( count ) ;
9 }
10
11 var person = { fname : " John " , lname : " Doe " , age : 25};
12 var x ;
13 for ( x in person ) {
14 console . log ( person [ x ]) ;
15 }

Tipos de datos
I Tipos de datos simples:

I Números, cadenas de texto, booleanos, null, undefined.
I Objetos:
I Arrays, funciones, expresiones regulares, objetos.

Objetos
I Contenedores de propiedades:
I Cada propiedad tiene un nombre y un valor.
I Un objeto puede heredar de otro objeto.
I No existe un concepto de clase que restrinja las propiedades
que puede tener un objeto
I Aunque ECMAScript 6 (2015) introduce una capa sintáctica
que permite definir clases.

Ejemplo: Inicialización literal de objetos
1 var empty_object = {};

2
3 var stooge = {
4 " first - name " : " Jerome " ,
5 " last - name " : " Howard "
6 };

Ejemplo: Inicialización literal de objetos
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 };

Acceso a propiedades de objetos
I Mediante corchetes o con punto:

1 stooge [ " first - name " ] // " Jerome "
2 flight . departure . IATA // " SYD "
I Las propiedades que no existen devuelven undefined:

1 stooge [ " middle - name " ] // undefined
2 flight . status // undefined
3 stooge [ " FIRST - NAME " ] // undefined

Actualización de propiedades
I Mediante asignación:
1 stooge [ ' first - name ' ] = ' Jerome ' ;
2 flight . number = 7005;
I Si la propiedad no existe en el objeto, se crea

automáticamente:
1 stooge [ ' middle - name ' ] = ' Lester ' ;
2 stooge . nickname = ' Curly ' ;
3 flight . equipment = {
4 model : ' Boeing 777 '
5 };
6 flight . status = ' overdue ' ;

Objetos por referencia
I 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

Funciones
I Las funciones son objetos:

I Pueden usarse como cualquier otro objeto en asignaciones, etc.
I Declaració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 };

Invocación a funciones
I Varios patrones de invocación:

I Invocación como función.
I Invocación como método.
I Invocación como constructor.
I Invocación mediante apply.

Invocación como función

2 return a + b ;
3 };
4
5 var sum = add (3 , 4) ; // sum is 7

Invocación como mé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

Invocació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 + 0.72 * this . g
11 + 0.07 * this . b ) ;
12 }
13 }
14
15 // Create a new object
16 var red = new Color (255 , 0 , 0) ;
17 red . luminosity () ; // 54

Excepciones

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 }

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 // 10
12
13 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 ' ]
21
22 delete numbers [2];
23 // numbers is [ ' zero ' , ' one ' , undefined , ' shi ' , ' go ' ]
24
25 numbers . splice (2 , 1) ;
26 // numbers is [ ' zero ' , ' one ' , ' shi ' , ' go ' ]

Client-side JavaScript
I El término client-side JavaScript hace referencia al entorno de

ejecución de código JavaScript proporcionado por los
navegadores web.
I Este entorno lo conforman las APIs de JavaScript definidas
por HTML5 y otros estándares relacionados, e implementadas
por los navegadores.

Client-side JavaScript
I Client-side JavaScript hace interactivo el documento HTML

mediante, principalmente:
I Manejadores de eventos:
I Se puede ejecutar código especı́fico (manejadores) cuando se
cargue/cierre la página, el usuario interaccione con elementos
de la misma, o periódicamente.
I Modificación dinámica del documento:
I Mediante APIs (p.e. la API de DOM) el programa JavaScript
puede modificar el documento HTML que se visualiza.

Inclusió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 >
10
11 <! -- desde un manejador de eventos de HTML -- >
12 < input type = " button " value = " Change " onclick = " changeName () " >
13 <p onmouseover = " showHelp ( ' p1 ' ) " > ... </ p >

Referencias
I Douglas Crockford. “JavaScript: The Good Parts”. O’Reilly

Media, Inc. (2008)
I La mayorı́a de los ejemplos de estas transparencias provienen
de este libro.
I David Flanagan. “JavaScript: The Definitive Guide” (6th Ed.)
O’Reilly.

Parte II
JQuery

JQuery
I Biblioteca de código para JavaScript:

I Proporciona una API más sencilla para el programador:
I Acceso al árbol DOM, envı́o de peticiones XMLHttpRequest,
animaciones, etc.
I Proporciona un acceso uniforme a su funcionalidad, incluso en
versiones antiguas de navegadores.

Hola mundo con JQuery
1 <! DOCTYPE html >

2 < html >
3 < head >
4 < meta charset = " UTF -8 " >
5 < title > Mi primera p á gina con jQuery </ title >
6 < script src = " https :// ajax . googleapis . com / ajax / libs /
jquery /3.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 >

Hola mundo con JQuery
1 // Se ejecuta el c ó digo de inicializaci ó n cuando el á rbol

2 // est é cargado
5 }) ;
6
7 // Forma compacta equivalente a lo anterior
8 $ ( function () {
10 }) ;

Encadenamiento de métodos
I Versió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) ;
I Versión con encadenamiento de mé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) ;

Acceso a atributos de elementos
1 // Consulta atributo title del primer p á 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}) ;

Acceso a atributos de elementos
1 // Todos los enlaces se cargar á n en ventana nueva

2 $ ( " a " ) . attr ( " target " , " _blank " ) ;
3
4 // Los enlaces se cargar á 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 }) ;
13
14 // Elimina el atributo target de todos los enlaces
15 $ ( " a " ) . removeAttr ( " target " ) ;

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 2 px " ) ;
9
10 // establece varias propiedades a la vez
11 $ ( " h1 " ) . css ({ b ac kg ro u nd Co l or : " black " ,
12 textColor : " white " ,
13 fontVariant : " small - caps " ,
14 padding : " 10 px 2 px 4 px 20 px " ,
15 border : " dotted black 4 px " }) ;
16
17 // Incrementa los tama ~
n os de tipograf ı́ a un 25 %
18 $ ( " h1 " ) . css ( " font - size " , function (i , curval ) {
19 return Math . round (1.25 * parseInt ( curval ) ) ;
20 }) ;

Acceso al atributo class
1 // A ~ n ade la clase " firstpara " a los p

2 // que aparezcan a continuaci ó n de un h1
3 $ ( " h1 + p " ) . addClass ( " firstpara " ) ;
4
5 // Elimina una clase de todos los p á rrafos
6 $ ( " p " ) . removeClass ( " firstpara " ) ;
7
8 // Elimina todas las clases
9 $ ( " p " ) . removeClass () ;
10
11 // Alterna la clase ( con dos clases a la vez )
12 $ ( " h1 " ) . toggleClass ( " big bold " ) ;
13
14 // Averigua si un elemento es de las clases big y bold
15 $ ( " # first " ) . is ( " . big . bold " ) ;

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 ó n radio que est é 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 " ])
12
13 // Restablece los valores por defecto
14 $ ( " input : text " ) . val ( function () {
15 return this . defaultValue ;
16 })

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

Árbol DOM
1 <! DOCTYPE html >

2 < html >
3 < head >
4 < title > Barney says ... </ title >
5 </ head >
6 < body >
7 < h1 > Barney says </ h1 >
8 <p >
9 This is going to be < em > legendary </ em >
10 </ p >
11 </ body >
12 </ html >

Árbol DOM
html
head body
title h1 p
"Barney says..." "Barney says" "This is going to be" em
"legendary"

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 inmediat amente antes o despu é s de cada h1
8 $ ( " h1 " ) . before ( " <hr > " ) ;
9 $ ( " h1 " ) . after ( " <hr > " ) ;
10
11 // 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 }) ;
16
17 // Envuelve cada imagen en un elemento div
18 $ ( " img " ) . wrap ( " < div class = ' image ' > </ div > " ) ;
19
20 // Envuelve el contenido de cada elemento div
21 // con clase " img " con otro div
22 $ ( " div . image " ) . wrapInner ( " < div class = ' inner ' > </ div > " ) ;

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 . cre ateTextN ode ( " Chapter : " ) ) . prependTo ( " h1 " ) ;
5 $ ( " < hr / > " ) . insertBefore ( " h1 " ) ;
6 $ ( " < hr / > " ) . insertAfter ( " h1 " ) ;

Copia de elementos
1 // A ~
n ade una secci ó 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 / > " ) ;

Eliminació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 ú til para volver a insertar el elemento m á s tarde .
12 var e = $ ( " # log " ) . detach () ;
13
14 // Elimina el elemento que envuelva al elemento con id " log "
15 $ ( " # log " ) . unwrap () ;

Manejadores de eventos
I Permiten registrar acciones a llevar a cabo cuando ocurran

determinados eventos sobre un elemento de la página:
I Se hace click sobre el elemento.
I El ratón pasa por encima de un elemento.
I Cambia el valor de un control de un formulario.
I ...
I Las acciones se expresan como una función JavaScript.

Eventos de carga del documento
I Normalmente los scripts necesitan que el documento haya sido

cargado para ejecutarse de forma fiable.
I El código de inicialización debe esperar a eventos que ası́ lo
indiquen.
Función jQuery Descripción del evento
ready() Se ha cargado el modelo DOM del documento (se suelen registrar las inicializaciones
en este evento).
.on("load", handler) Se ha representado la página y cargado todos sus recursos adicionales.
.on("unload", handler) Se abandona la página (se sigue enlace, se cierra la pestaña, se recarga el documento,
se va hacia atrás o hacia delante).

Eventos de carga del documento
1 // Con ready :
4 }) ;
5
6 // Equivalente a lo anterior :
7 $ ( function () {
9 }) ;
10
11 // Con load :
12 $ ( window ) . on ( " load " , function () {
13 ...
14 }) ;
15
16 // Cuando se abandona la p á gina ( se sigue enlace , se cierra
17 // la pesta ~ n a , se recarga el documento , se va hacia atr á s
18 // o hacia delante ) :
19 $ ( window ) . on ( " unload " , function () {
20 ...
21 }) ;

Eventos del navegador

.on("error", handler) Se ha producido un error en la carga del elemento (p.e. una imagen).
resize() Se envı́a a window cuando cambia el tamaño de la ventana.
scroll() Se hace scroll en la ventana o en un elemento con barras de scroll.

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 }) ;
12
13 $ ( window ) . resize ( function () {
14 $ ( " # log " ) . append ( " < div > Handler for . resize () </ div > " ) ;
15 }) ;
16
17 $ ( window ) . scroll ( function () {
18 $ ( " # log " ) . append ( " < div > Handler for . scroll () </ div > " ) ;
19 }) ;
20
21 $ ( " # target " ) . scroll ( function () {
22 $ ( " # log " ) . append ( " < div > Handler for . scroll () </ div > " ) ;
23 }) ;

Eventos de formulario

focus() El elemento consigue el foco.
blur() El elemento pierde el foco.
focusin() El elemento o algún descendiente suyo consigue el foco.
focusout() El elemento o algún descendiente suyo pierde el foco.
change() Cambia el valor del elemento (sólo en controles de formulario).
submit() El usuario intenta enviar el formulario.

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 . preve ntDefau lt () ; // 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 }) ;
11
12 // Cambia el valor de un control de la clase " target ":
13 $ ( " . target " ) . change ( function () {
14 alert ( " Handler for . change () called . " ) ;
15 }) ;

Eventos de ratón

click() El usuario hace click sobre el elemento.
dblclick() El usuario hace doble click sobre el elemento.
mouseenter() El puntero entra en el área del elemento.
mouseleave() El puntero sale del área del elemento.
hover() El puntero entra en el área del elemento (primer manejador) o sale (segundo maneja-
dor).
mousedown() El botón del ratón es presionado con el puntero dentro del elemento.
mousemove() El puntero se mueve estando dentro del elemento.
toggle() Registra dos o más manejadores para ser ejecutados alternativamente cuando se hace
click en el elemento.

Eventos de rató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 );

Objetos evento
I Los manejadores de eventos reciben como argumento un

objeto que representa el evento:
I Contiene propiedades con información acerca del evento:
I Elemento que genera el evento, teclas presionadas, posición
del puntero, etc.
I Proporciona métodos:
I Para evitar la acción por defecto (envı́o de formulario, que se
cargue el destino de un enlace, etc.)
I Para evitar que el evento continúe propagándose o se ejecuten
otros manejadores.

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

Efectos predefinidos
Función jQuery Descripción del efecto

fadeIn() El elemento aparece mediante cambio progresivo de opacidad.
fadeOut() El elemento desaparece mediante cambio progresivo de opacidad.
fadeTo() Cambia progresivamente la opacidad del elemento desde la actual hasta la final pro-
porcionada como pará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().

Efectos predefinidos
1 $ ( function () {
2 $ ( " . clickable " ) . css ( " cursor " , " pointer " )
3 . click ( function ( event ) {
4 $ ( event . target ) . parent () . next () . toggle ( " slow " ) ;
5 }) ;
6 }) ;
1 $ ( function () {
4 $ ( event . target ) . parent () . next ()
5 . slideToggle (200) ;
6 }) ;
7 }) ;

Animaciones a medida
1 $ ( function () {
4 $ ( event . target ) . parent () . next () . animate ({
5 width : " 70 % " ,
6 fontSize : " 16 pt "
7 }, {
8 duration : 1000
9 }) ;
10 }) ;
11 }) ;

Referencias
I David Flanagan. “JQuery Pocket Reference” O’Reilly (2010).
I David Flanagan. “JavaScript: The Definitive Guide” (6th Ed.)

O’Reilly.
I JQuery API Documentation

I https://api.jquery.com/

DW Intro Javascript

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

DW Intro Javascript

Cargado por

Copyright:

Formatos disponibles

Introducción a JavaScript

Computación Web (2016/17) Introducción a JavaScript 1

El lenguaje de programación JavaScript

Computación Web (2016/17) Introducción a JavaScript 2

Computación Web (2016/17) Introducción a JavaScript 3

I Relativamente similares en sintaxis a las de Java y C:

Computación Web (2016/17) Introducción a JavaScript 4

Computación Web (2016/17) Introducción a JavaScript 5

Computación Web (2016/17) Introducción a JavaScript 6

I Tipos de datos simples:

Computación Web (2016/17) Introducción a JavaScript 7

Computación Web (2016/17) Introducción a JavaScript 8

1 var empty_object = {};

Computación Web (2016/17) Introducción a JavaScript 9

Computación Web (2016/17) Introducción a JavaScript 10

I Mediante corchetes o con punto:

I Las propiedades que no existen devuelven undefined:

Computación Web (2016/17) Introducción a JavaScript 11

I Si la propiedad no existe en el objeto, se crea

Computación Web (2016/17) Introducción a JavaScript 12

I Los objetos se pasan por referencia, al igual que en Java:

Computación Web (2016/17) Introducción a JavaScript 13

I Las funciones son objetos:

Computación Web (2016/17) Introducción a JavaScript 14

I Varios patrones de invocación:

Computación Web (2016/17) Introducción a JavaScript 15

1 var add = function (a , b ) {

Computación Web (2016/17) Introducción a JavaScript 16

Computación Web (2016/17) Introducción a JavaScript 17

1 // Declare the constructor function

Computación Web (2016/17) Introducción a JavaScript 18

1 var add = function (a , b ) {

Computación Web (2016/17) Introducción a JavaScript 19

Computación Web (2016/17) Introducción a JavaScript 20

I El término client-side JavaScript hace referencia al entorno de

Computación Web (2016/17) Introducción a JavaScript 21

I Client-side JavaScript hace interactivo el documento HTML

Computación Web (2016/17) Introducción a JavaScript 22

1 <! -- directamente con el elemento script

Computación Web (2016/17) Introducción a JavaScript 23

I Douglas Crockford. “JavaScript: The Good Parts”. O’Reilly

Computación Web (2016/17) Introducción a JavaScript 24

Computación Web (2016/17) Introducción a JavaScript 25

I Biblioteca de código para JavaScript:

Computación Web (2016/17) Introducción a JavaScript 26

1 <! DOCTYPE html >

Computación Web (2016/17) Introducción a JavaScript 27

1 // Se ejecuta el c ó digo de inicializaci ó n cuando el á rbol

Computación Web (2016/17) Introducción a JavaScript 28

I Versión con encadenamiento de métodos:

Computación Web (2016/17) Introducción a JavaScript 29

1 // Consulta atributo title del primer p á rrafo

Computación Web (2016/17) Introducción a JavaScript 30

1 // Todos los enlaces se cargar á n en ventana nueva

Computación Web (2016/17) Introducción a JavaScript 31

1 // Lee el valor de font - weight en el primer elemento h1

Computación Web (2016/17) Introducción a JavaScript 32

1 // A ~ n ade la clase " firstpara " a los p

Computación Web (2016/17) Introducción a JavaScript 33

1 // Obtiene el valor del control con id " surname "

Computación Web (2016/17) Introducción a JavaScript 34

1 // Obtiene el t ı́ tulo del documento

Computación Web (2016/17) Introducción a JavaScript 35