Mod4 JavaScript 2

37
© Juan Quemada, DIT, UPM Strings de JavaScript 1 Sunday, February 23, 14

description

javato

Transcript of Mod4 JavaScript 2

Page 1: Mod4 JavaScript 2

© Juan Quemada, DIT, UPM

Strings de JavaScript

1

Sunday, February 23, 14

Page 2: Mod4 JavaScript 2

El tipo stringString: texto internacionalizado codificado con el código UNICODEn delimitado entre comillas o apóstrofes

Ejemplosn "hola, que tal", 'hola, que tal', 'Γεια σου, ίσως' o '嘿,也许'

w string "hola, que tal" en varios idiomasn String vacío: "" o ''n "texto 'entrecomillado' "

w los delimitadores se pueden anidar: 'entrecomillado' forma parte del texto

Operador de concatenación de strings: +n "Hola" + " " + "Pepe" => "Hola Pepe"

2

Sunday, February 23, 14

Page 3: Mod4 JavaScript 2

String: un array de caracteres

Un string es un array de caracteresn cada caracter se referencia por un índice entre 0 y número_de_caracteres-1 n El string se procesa con métodos y propiedades de objetos

Propiedad: 'ciudad'.length => 6n devuelve número de caracteres del string

Acceso como array: 'ciudad'[2] => 'u'

Método: 'ciudad'.indexOf('da') => 3n devuelve posición de substring

Método: 'ciudad'.substring(2,5) => 'uda'n devuelve substring entre ambos índices

3

ciudad

[0] [1] ........ [5]

Sunday, February 23, 14

Page 4: Mod4 JavaScript 2

Script ilustrativoEl script genera un texto enmarcado con marcas HTML <pre>n Las marcas <pre> mantienen el formato del texto

Cada línea se inserta con document.writeln(..) que añade \n al final n En el lado derecho de cada línea se describe la expresiónn En el lado derecho se evalúa la expresión

w El resultado de la evaluación se transforma a string antes de concatenarlo

4

Sunday, February 23, 14

Page 5: Mod4 JavaScript 2

© Juan Quemada, DIT, UPM

Internacionalización: UNICODE

JavaScript está internacionalizadon Puede representar textos de muchas lenguas diferentes

Los strings JavaScript utilizan el Basic Multilingual Plane de UNICODEn Codificados en UTF-16

Limitación: teclados y editores de los ordenadores de cada paísn Los teclados y editores españoles soportan solo las lenguas oficiales

Teclado arabe

Tecladoschinos

5

Sunday, February 23, 14

Page 6: Mod4 JavaScript 2

© Juan Quemada, DIT, UPM

Caracteres escapadosLos caracteres escapadosn son caracteres no representables dentro de un string

w comienzan por la barra inclinada (\) y estan representados en la tabla

Ademas podemos representar cualquiér caracter UNICODE o ISO-LATIN-1:n \uXXXX caracter UNICODE de código hexadecimal XXXXn \xXX caracter ISO-LATIN-1 de código hexadecimal XX

Algunos ejemplosn "Comillas dentro de \"comillas\""

w " debe ir escapado dentro del stringn "Dos \n lineas"

w retorno de línea delimita sentenciasn "Dos \u000A lineas"

CARACTERES ESCAPADOS

NUL (nulo): \0, \x00, \u0000 Backspace: \b, \x08, \u0008Horizontal tab: \t, \x09, \u0009Newline: \n, \x0A, \u000AVertical tab: \t, \x0B, \u000BForm feed: \f, \x0C, \u000CCarriage return: \r, \x0D, \u000DComillas (dobles): \", \x22, \u0022Apóstrofe : \', \x27, \u0027Backslash: \\, \x5C, \u005C

6

Sunday, February 23, 14

Page 7: Mod4 JavaScript 2

© Juan Quemada, DIT, UPM

Boolean, igualdad y otros operadores lógicos de JavaScript

7

Sunday, February 23, 14

Page 8: Mod4 JavaScript 2

El tipo boolean solo tiene 2 valoresn true: verdaderon false: falso

Operador negación (negation): !n Convierte al valor lógico opuesto

Conversión a booleann false: 0, -0, NaN, null, undefined, "", ''n true: resto de valores

© Juan Quemada, DIT, UPM

Tipo boolean

!false => true!true => false

!4 => false!"4" => false!null => true!0 => true

!!"" => false!!4 => true

8

Sunday, February 23, 14

Page 9: Mod4 JavaScript 2

Igualdad estricta (identidad)n igualdad de tipo y valor: ===

w funciona bien con tipos básicos!n Objetos: identidad de referencias

n negación de igualdad estricta: !==

Igualdad y desigualdad débil: == y !=n Realiza conversiones impredecibles

w ¡NO UTILIZAR!

© Juan Quemada, DIT, UPM

Igualdad e identidad// Identidad de tipos básicos

0 === 0 => true0 === 0.0 => true0 === 1 => false0 === false => false

"" === '' => true

// Identidad de referencias // a objetos

var x = {}, y = x, z = {};x === y => truex === {} => falsex === z => false

9

Sunday, February 23, 14

Page 10: Mod4 JavaScript 2

Operador lógico Y (AND): a && bn si a evalua a false

w devuelve a, sino devuelve b

Operador lógico O (OR): a || bn si a evalua a true

w devuelve a, sino devuelve b

Operador condicional: (c) ? a : b;n si c evalua a true

w devuelve a, sino devuelve b

© Juan Quemada, DIT, UPM

Operadores: &&, || y ?:0 && true => 01 && "5" => "5"

// Evita error de ejecución// si x es undefined o nully = x && x.a;

undefined || 0 => 013 || 0 => 13

// Valor por defecto// si x es undefined o nully = x || 0;

(7)? 0 : 1 => 0("")? 0 : 1 => 1

10

Sunday, February 23, 14

Page 11: Mod4 JavaScript 2

JavaScript tiene 4 operadores de comparaciónn Menor: <n Menor o igual: <=n Mayor: >n Mayor o igual: >=

Números, booleanos, strings y objetosn tienen definida una relación de orden

w Aunque se utilizan principalmente con números

© Juan Quemada, DIT, UPM

Operadores de comparación

1.2 < 1.3 => true

1 < 1 => false1 <= 1 => true1 > 1 => false1 >= 1 => true

false < true => true

"a" < "b" => true

"a" < "a" => false"a" < "aa" => true

11

Sunday, February 23, 14

Page 12: Mod4 JavaScript 2

© Juan Quemada, DIT, UPM

La sentencia if/else de JavaScript

12

Sunday, February 23, 14

Page 13: Mod4 JavaScript 2

© Juan Quemada, DIT, UPM

Sentencia if/else Ejecución condicional den bloques de instrucciones

Condición debe ir entre paréntesisBloques de 1 sentencia pueden omitir {}La parte else es opcional

13

Sunday, February 23, 14

Page 14: Mod4 JavaScript 2

© Juan Quemada, DIT, UPMEjemplo con sentencia if/else 14

Sunday, February 23, 14

Page 15: Mod4 JavaScript 2

© Juan Quemada, DIT, UPMEjemplo con sentencia if 15

Sunday, February 23, 14

Page 16: Mod4 JavaScript 2

© Juan Quemada, DIT, UPM

Funciones alert(), confirm() y prompt()

Interaccion sencilla basada en “pop-ups”

alert(msj): n presenta un mensaje al usuario

w Retorna al pulsar OK

confirm(msj): n Presenta mensaje y pide confirmación/rechazo

w Retorna al pulsar, devuelve true(Cancel)/false(Ok)

prompt(msj):n Presenta mensaje y pide un dato de entrada

w Retorna al pulsar, devuelve string introducido

16

Sunday, February 23, 14

Page 17: Mod4 JavaScript 2

© Juan Quemada, DIT, UPM

Ejemplo de prompt()

17

Sunday, February 23, 14

Page 18: Mod4 JavaScript 2

© Juan Quemada, DIT, UPM

Ejemplo de else-if

18

Sunday, February 23, 14

Page 19: Mod4 JavaScript 2

© Juan Quemada, DIT, UPM

Características avanzadas de los objetos de JavaScript

19

Sunday, February 23, 14

Page 20: Mod4 JavaScript 2

Las propiedades de objetosn Pueden crearsen Pueden destruirse

Operaciones sobre propiedadesn x.c = 4 ¡¡OJO: sentencia compleja!!

w si propiedad x.c existe, le asigna 4; si x.c no existe, crea x.c y le asigna 4

n delete x.cw si existe y.c, la elimina; si no existe, no hace nada

n "c" in xw si x.c existe, devuelve true, sino devuelve, false

© Juan Quemada, DIT, UPM

Propiedadesdinámicas

20

var x = { peras:3, fresas:20};

x.peras = 7;

x.kiwis = 5;

delete x.fresas;

3 20

xperas fresas

7

xperas kiwis

5

7

xperas kiwis

5fresas

20

7 20

xperas fresas

Sunday, February 23, 14

Page 21: Mod4 JavaScript 2

Los objetos pueden anidarse entre sin Los objetos anidados representan arboles

La notación punto o array puede encadenarsen Representando un camino en el árbol

w Las siguientes expresiones se evaluan así:n pelicula.director.nombre => 'James'n pelicula['director']['nombre'] => 'James'n pelicula['director'].apellido => 'Cameron'n pelicula.apellido => undefinedn pelicula.apellido.director => Error_de_ejecución

© Juan Quemada, DIT, UPM

Objetos anidados: árboles

var pelicula = { titulo: 'Avatar', director:{ nombre:'James', apellido: 'Cameron' }};

pelicula

director

'Avatar'

pelicula

'James' 'Cameron'

nombre

directortitulo

apellido

21

Sunday, February 23, 14

Page 22: Mod4 JavaScript 2

© Juan Quemada, DIT, UPM

Objeto window: this

JavaScript se ejecuta dentro del objeto global windown El objeto global window tiene propiedades con información sobre

w Objetos predefinidos de JavaScript, el navegador, el documento HTML, .....

JavaScript permite refenciar window como this u omitirsen La propiedad document de window se puede referenciar como

w window.document, this.document o document

Documentación: http://www.w3schools.com/jsref/obj_window.asp

o o o

window

history Infinitydocument undefinedscreen o o o

o o oo o oo o oo o o

o o o

22

Sunday, February 23, 14

Page 23: Mod4 JavaScript 2

© Juan Quemada, DIT, UPM

Variables globales y el entorno de ejecución

Un programa JavaScript se ejecuta con el objeto window como entornon una asignación a una variable no definida como x = 1;

w Crea una nueva propiedad de window de nombre xn x = 1; es equivalente a this.x = 1; y a window.x = 1;

Olvidar definir una variable, es un error muy habitualn y al asignar un valor a la variable no definida, JavaScript no da error

w sino que crea una nueva propiedad de windown Es un error de diseño de JavaScript y hay que tratar de evitarlo

window

history navigatordocument locationscreen o o o

o o oo o oo o oo o o

x

o o o

23

Sunday, February 23, 14

Page 24: Mod4 JavaScript 2

© Juan Quemada, DIT, UPM

Objetos DOM de JavaScript

24

Sunday, February 23, 14

Page 25: Mod4 JavaScript 2

© Juan Quemada, DIT, UPM

DOM: Document Object Model

Objeto DOM: objeto js asociado al documento HTML visualizado en el navegadorn El navegador lo almacena en la propiedad document de window

w Que contiene el árbol de objetos DOM de la página HTMLn Documentación: http://www.w3schools.com/jsref/dom_obj_all.asp

Los objetos DOM pueden buscarse por atributos (“id”, “class”, ..) de HTMLn Por ej., el método document.getElementById("idx") devuelve el objeto DOM

w asociado al elemento de la página HTML con identificador “idx”

window tiene además propiedades con el nombre de los identificadoresn ¡OJO! peligro: Si el nombre no coincide con el de otra propiedad de window

window

history navigatordocument locationscreen

BODYHEAD

HTML

o o o

o o o

o o oo o oo o oo o o

o o o

25

Sunday, February 23, 14

Page 26: Mod4 JavaScript 2

© Juan Quemada, DIT, UPM

getElementById ("fecha") devuelve el objeto DOM de <div id="fecha"></div>

Propiedad innerHTML de un objeto DOMn Permite extraer/insertar HTML en el elemento del documento

Acceso a DOM

26

Sunday, February 23, 14

Page 27: Mod4 JavaScript 2

© Juan Quemada, DIT, UPM

La propiedad fecha de window contiene el objeto DOM de <div id="fecha"></div>n No está recomendado usar estas propiedades de window

w Si hay colisión de nombres con otras propiedades y puede haber problemasPropiedad innerHTML de un objeto DOMn Permite extraer/insertar HTML en el elemento del documento

Acceso a DOM

27

Sunday, February 23, 14

Page 28: Mod4 JavaScript 2

© Juan Quemada, DIT, UPM

Location, history, screen, ...

location: propiedad que contiene el URL a la página en curson location = “http://www.upm.es” // Carga la página en el navegador

w location.reload() re-carga la página en curson propiedades: href (url), protocol, hostname, port, pathname, search (query), ...

history: propiedad con la historia de navegaciónn Métodos para navegar por la historia: history.back(), history.forward(), ...

screen: dimensiones de la pantallan width, height, availWidth, availHeight: para adaptar apps a pantallas móviles

Documentacion: http://www.w3schools.com/jsref/

window

history navigatordocument locationscreen

BODYHEAD

HTML

o o o

o o o

o o oo o oo o oo o o

o o o

28

Sunday, February 23, 14

Page 29: Mod4 JavaScript 2

© Juan Quemada, DIT, UPM

window.screen

29

Sunday, February 23, 14

Page 30: Mod4 JavaScript 2

© Juan Quemada, DIT, UPM

Funciones de selección de elementos

getElementById(“my_id”)n Es el mas sencillo de utilizar porque devuelve

w El objeto DOM con el identificador buscado o null si no lo encuentran ¡Un identificador solo puede estar en un objeto de una página HTML!

getElementsByName(“my_name”), getElementsByTagName(“my_tag”), getElementsByClassName(“my_class”), querySelectorAll(“CSS selector”),...n Devuelven una matriz de objetos

w Por ejemplo: getElementsByName(“my_name”)[0] n referencia el primer elemento con atributo name=”my_name”

30

Sunday, February 23, 14

Page 31: Mod4 JavaScript 2

© Juan Quemada, DIT, UPM31

Al ejecutar la instrucción en laconsola Web de Firefox,cambiamos la fecha por “hola”

Sunday, February 23, 14

Page 32: Mod4 JavaScript 2

© Juan Quemada, DIT, UPM

Sentencia for/in de JavaScript

32

Sunday, February 23, 14

Page 33: Mod4 JavaScript 2

© Juan Quemada, DIT, UPM

Sentencia for/in

for (i in x) {..bloque de instrucciones..}n itera en todas las propiedades del objeto x

El nombre de propiedad y su contenido se referencian con "i" y "x[i]"n "i" contiene el nombre de la propiedad en cada iteraciónn "x[i]" representa el valor de la propiedad "i"

w Dentro de la sentencia for debe utilizarse la notación array

33

'adios'7 'hi'

x

a bc

Sunday, February 23, 14

Page 34: Mod4 JavaScript 2

© Juan Quemada, DIT, UPM

Sentencia for/in

En el ejemplo se utiliza for (i in x) {...}n para mostrar en una página Web

w el contenido de las propiedades de un objeto

34

'adios'7 'hi'

xa b

c

Sunday, February 23, 14

Page 35: Mod4 JavaScript 2

© Juan Quemada, DIT, UPM

Sintaxis de la sentencia for/in

La sentencia comienza por for

Sigue la condición (i in obj)n debe ir entre paréntesis (...)

Los bloques de más de 1 sentencian deben delimitarse con {....}

Bloques de 1 sentencian pueden omitir {..}, pero mejoran la

legibilidad delimitandolos con {..}

35

Sunday, February 23, 14

Page 36: Mod4 JavaScript 2

© Juan Quemada, DIT, UPM

window.screen

36

Sunday, February 23, 14

Page 37: Mod4 JavaScript 2

© Juan Quemada, DIT, UPM

Final del temaMuchas gracias!

37

Sunday, February 23, 14