Mod4 JavaScript 2
description
Transcript of Mod4 JavaScript 2
© Juan Quemada, DIT, UPM
Strings de JavaScript
1
Sunday, February 23, 14
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
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
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
© 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
© 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
© Juan Quemada, DIT, UPM
Boolean, igualdad y otros operadores lógicos de JavaScript
7
Sunday, February 23, 14
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
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
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
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
© Juan Quemada, DIT, UPM
La sentencia if/else de JavaScript
12
Sunday, February 23, 14
© 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
© Juan Quemada, DIT, UPMEjemplo con sentencia if/else 14
Sunday, February 23, 14
© Juan Quemada, DIT, UPMEjemplo con sentencia if 15
Sunday, February 23, 14
© 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
© Juan Quemada, DIT, UPM
Ejemplo de prompt()
17
Sunday, February 23, 14
© Juan Quemada, DIT, UPM
Ejemplo de else-if
18
Sunday, February 23, 14
© Juan Quemada, DIT, UPM
Características avanzadas de los objetos de JavaScript
19
Sunday, February 23, 14
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
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
© 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
© 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
© Juan Quemada, DIT, UPM
Objetos DOM de JavaScript
24
Sunday, February 23, 14
© 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
© 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
© 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
© 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
© Juan Quemada, DIT, UPM
window.screen
29
Sunday, February 23, 14
© 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
© Juan Quemada, DIT, UPM31
Al ejecutar la instrucción en laconsola Web de Firefox,cambiamos la fecha por “hola”
Sunday, February 23, 14
© Juan Quemada, DIT, UPM
Sentencia for/in de JavaScript
32
Sunday, February 23, 14
© 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
© 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
© 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
© Juan Quemada, DIT, UPM
window.screen
36
Sunday, February 23, 14
© Juan Quemada, DIT, UPM
Final del temaMuchas gracias!
37
Sunday, February 23, 14