Mod4 JavaScript 2

Strings de JavaScript
Juan Quemada, DIT, UPM

Sunday, February 23, 14
El tipo string
String: texto internacionalizado codificado con el cdigo UNICODE
n
delimitado entre comillas o apstrofes
Ejemplos
n
"hola, que tal", 'hola, que tal', ' , ' o ''

w string "hola, que tal" en varios idiomas
n
n
String vaco:
"" o ''
"texto 'entrecomillado' "
w los delimitadores se pueden anidar: 'entrecomillado' forma parte del texto
Operador de concatenacin de strings: +

n
"Hola" + " " + "Pepe"
=>
"Hola Pepe"
2
ciudad
String: un array de caracteres
[0] [1] ........ [5]
Un string es un array de caracteres
n
n
cada caracter se referencia por un ndice entre 0 y nmero_de_caracteres-1

El string se procesa con mtodos y propiedades de objetos
Propiedad:
n
'ciudad'.length
=> 6
devuelve nmero de caracteres del string
Acceso como array:
'ciudad'[2]
=> 'u'
Mtodo:
'ciudad'.indexOf('da')
=> 3
devuelve posicin de substring
Mtodo:
n
'ciudad'.substring(2,5)
=> 'uda'
devuelve substring entre ambos ndices

3
Script ilustrativo
El script genera un texto enmarcado con marcas HTML <pre>
n
Las marcas <pre> mantienen el formato del texto
Cada lnea se inserta con document.writeln(..) que aade \n al final

n
n
En el lado derecho de cada lnea se describe la expresin

En el lado derecho se evala la expresin
w El resultado de la evaluacin se transforma a string antes de concatenarlo
4
Internacionalizacin:
UNICODE
Teclado arabe
JavaScript est internacionalizado

n Puede representar textos de muchas lenguas diferentes
Los strings JavaScript utilizan el Basic Multilingual Plane de UNICODE
n Codificados en UTF-16
Limitacin: teclados y editores de los ordenadores de cada pas
n Los teclados y editores espaoles soportan solo las lenguas oficiales
Teclados
chinos

Caracteres escapados
Los caracteres escapados
n son caracteres no representables dentro de un string
w comienzan por la barra inclinada (\) y estan representados en la tabla
Ademas podemos representar cualquir caracter UNICODE o ISO-LATIN-1:

n \uXXXX caracter UNICODE de cdigo hexadecimal
XXXX
n \xXX
caracter ISO-LATIN-1 de cdigo hexadecimal XX
Algunos ejemplos
n "Comillas dentro de \"comillas\""
w " debe ir escapado dentro del string
n
"Dos \n lineas"
w retorno de lnea delimita sentencias
"Dos \u000A lineas"

CARACTERES ESCAPADOS
NUL (nulo):
Backspace:
Horizontal tab:
Newline:
Vertical tab:
Form feed:
Carriage return:
Comillas (dobles):
Apstrofe :
Backslash:
\0,
\b,
\t,
\n,
\t,
\f,
\r,
\",
\',
\\,
\x00, \u0000
\x08, \u0008
\x09, \u0009
\x0A, \u000A
\x0B, \u000B
\x0C, \u000C
\x0D, \u000D
\x22, \u0022
\x27, \u0027
\x5C, \u005C
6
Boolean, igualdad y otros

operadores lgicos de JavaScript

Tipo boolean
El tipo boolean solo tiene 2 valores
n true:
verdadero
n false: falso
!false
!true
Operador negacin (negation): !

n Convierte al valor lgico opuesto
!4
!"4"
!null
!0
=> false
=> false
=> true
=> true
Conversin a boolean
n false: 0, -0, NaN, null, undefined, "", ''
n true: resto de valores
!!""
!!4
=> false
=> true

=> true
=> false
Igualdad e identidad
// Identidad de tipos bsicos
Igualdad estricta (identidad)

n igualdad de tipo y valor:
===
w funciona bien con tipos bsicos!
n Objetos: identidad de referencias
n negacin de igualdad estricta:
!==
Igualdad y desigualdad dbil:
== y !=
n Realiza conversiones impredecibles
w NO UTILIZAR!

0 === 0
0 === 0.0
0 === 1
0 === false
=> true
=> true
=> false
=> false
"" === ''
=> true
// Identidad de referencias
// a objetos
var x = {}, y = x, z = {};
x === y
=> true
x === {}
=> false
x === z
=> false
9
Operadores: &&, || y ?:
Operador lgico Y (AND): a && b
n si a evalua a false
w devuelve a, sino devuelve b
Operador lgico O (OR):
a || b
n si a evalua a true
Operador condicional: (c) ? a : b;
n si c evalua a true

0 && true
1 && "5"
=> 0
=> "5"
// Evita error de ejecucin

// si x es undefined o null
y = x && x.a;
undefined || 0
13 || 0
=> 0
=> 13
// Valor por defecto

// si x es undefined o null
y = x || 0;
(7)? 0 : 1
("")? 0 : 1
=> 0
=> 1
10
Operadores de comparacin
JavaScript tiene 4 operadores de comparacin
n Menor:
<
n Menor o igual: <=
n Mayor:
>
n Mayor o igual: >=
Nmeros, booleanos, strings y objetos
n tienen definida una relacin de orden
w Aunque se utilizan principalmente con nmeros

1.2 < 1.3
=> true
1< 1
1 <= 1
1> 1
1 >= 1
=> false
=> true
=> false
=> true
false < true
=> true
"a" < "b"
=> true
"a" < "a"

"a" < "aa"
=> false
=> true
11
La sentencia if/else de JavaScript

12
Sentencia if/else
Ejecucin condicional de
n bloques de instrucciones
Condicin debe ir entre parntesis
Bloques de 1 sentencia pueden omitir {}
La parte else es opcional

13
Ejemplo con sentencia if/else

14
Ejemplo con
sentencia if
15
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 confirmacin/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
Ejemplo de prompt()

17
Ejemplo de else-if

18
Caractersticas avanzadas de los

objetos de JavaScript

19
x
peras
Propiedades
dinmicas
Las propiedades de objetos
n Pueden crearse
n Pueden destruirse
x.peras = 7;
x.kiwis = 5;
peras
fresas
20
x
peras
20
x
delete x.fresas;
Operaciones sobre propiedades

n 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.c
w si existe y.c, la elimina; si no existe, no hace nada
n "c" in x
w si x.c existe, devuelve true, sino devuelve, false
var x = { peras:3, fresas:20};
fresas
kiwis
fresas
20
x
peras
7
20
kiwis
5
var pelicula = {
titulo: 'Avatar',
director:{
nombre:'James',
apellido: 'Cameron'
}
};
Objetos anidados: rboles

Los objetos pueden anidarse entre si
n Los objetos anidados representan arboles
La notacin punto o array puede encadenarse
n Representando un camino en el rbol
w Las siguientes expresiones se evaluan as:
n
n
n
n
n
pelicula.director.nombre
pelicula['director']['nombre']
pelicula['director'].apellido
pelicula.apellido
pelicula.apellido.director
=>
=>
=>
=>
=>
titulo
director
'Avatar'
'James'
nombre
'James'
'James'
'Cameron'
undefined
Error_de_ejecucin

pelicula
21
apellido
'Cameron'
Objeto window: this

window
screen
document
o o o
o o o
o o o
history
undefined
o o o
Infinity
o o o
o o o
o o o
JavaScript se ejecuta dentro del objeto global window

n
El objeto global window tiene propiedades con informacin sobre

w Objetos predefinidos de JavaScript, el navegador, el documento HTML, .....
JavaScript permite refenciar window como this u omitirse

n
La propiedad document de window se puede referenciar como

w window.document, this.document o document
Documentacin: http://www.w3schools.com/jsref/obj_window.asp
22
Variables globales y el entorno de ejecucin

window
screen
document
o o o
o o o
history
location
o o o
o o o
navigator
o o o
o o o
Un programa JavaScript se ejecuta con el objeto window como entorno

n una asignacin a una variable no definida como x = 1;
w Crea una nueva propiedad de window de nombre x
n
x = 1;
es equivalente a
this.x = 1;
ya
window.x = 1;
Olvidar definir una variable, es un error muy habitual

n y al asignar un valor a la variable no definida, JavaScript no da error
w sino que crea una nueva propiedad de window
n
Es un error de diseo de JavaScript y hay que tratar de evitarlo

23
Objetos DOM de JavaScript

24
DOM: Document Object Model

screen
document
o o o
history
o o o
HTML
HEAD
o o o
location
o o o
window
navigator
o o o
o o o
BODY
o o o
Objeto DOM: objeto js asociado al documento HTML visualizado en el navegador

n
El navegador lo almacena en la propiedad document de window
w Que contiene el rbol de objetos DOM de la pgina HTML
n Documentacin:
http://www.w3schools.com/jsref/dom_obj_all.asp
Los objetos DOM pueden buscarse por atributos (id, class, ..) de HTML
n Por ej., el mtodo document.getElementById("idx") devuelve el objeto DOM
w asociado al elemento de la pgina HTML con identificador idx
window tiene adems propiedades con el nombre de los identificadores
n OJO! peligro: Si el nombre no coincide con el de otra propiedad de window
25
getElementById ("fecha") devuelve el objeto DOM de <div id="fecha"></div>

Propiedad innerHTML de un objeto DOM
n Permite extraer/insertar HTML en el elemento del documento
Acceso a
DOM
26
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 colisin de nombres con otras propiedades y puede haber problemas
Propiedad innerHTML de un objeto DOM
n Permite extraer/insertar HTML en el elemento del documento
Acceso a
DOM
27
window
screen
document
o o o
history
o o o
HTML
HEAD
o o o
location
BODY
o o o
navigator
o o o
o o o
o o o
Location, history,
screen, ...
location: propiedad que contiene el URL a la pgina en curso

n location = http://www.upm.es
// Carga la pgina en el navegador
w location.reload() re-carga la pgina en curso
n propiedades: href (url), protocol, hostname, port, pathname, search (query), ...
history: propiedad con la historia de navegacin
n Mtodos para navegar por la historia: history.back(), history.forward(), ...
screen: dimensiones de la pantalla
n width, height, availWidth, availHeight: para adaptar apps a pantallas mviles
Documentacion: http://www.w3schools.com/jsref/
28
window.screen

29
Funciones de seleccin 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 encuentra
n
Un identificador solo puede estar en un objeto de una pgina 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
Al ejecutar la instruccin en la
consola Web de Firefox,
cambiamos la fecha por hola

31
Sentencia for/in de JavaScript

32
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 iteracin
n "x[i]" representa el valor de la propiedad "i"
w Dentro de la sentencia for debe utilizarse la notacin array
x
a
7
b
'hi'
'adios'

33
Sentencia for/in
En el ejemplo se utiliza for (i in x) {...}
n para mostrar en una pgina Web
w el contenido de las propiedades de un objeto

a b
7
'hi'
34
'adios'
Sintaxis de la
sentencia for/in
La sentencia comienza por for
Sigue la condicin (i in obj)
n debe ir entre parntesis (...)
Los bloques de ms de 1 sentencia
n deben delimitarse con {....}
Bloques de 1 sentencia
n pueden omitir {..}, pero mejoran la
legibilidad delimitandolos con {..}
35
window.screen

36
Final del tema

Muchas gracias!

37

Mod4 JavaScript 2

Cargado por

Información del documento

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

Mod4 JavaScript 2

Cargado por

Copyright:

Formatos disponibles

Strings de JavaScript

Juan Quemada, DIT, UPM

delimitado entre comillas o apstrofes

"hola, que tal", 'hola, que tal', ' , ' o ''

Operador de concatenacin de strings: +

"Hola" + " " + "Pepe"

Sunday, February 23, 14

cada caracter se referencia por un ndice entre 0 y nmero_de_caracteres-1

devuelve nmero de caracteres del string

Acceso como array:

devuelve posicin de substring

devuelve substring entre ambos ndices

Sunday, February 23, 14

Las marcas <pre> mantienen el formato del texto

Cada lnea se inserta con document.writeln(..) que aade \n al final

En el lado derecho de cada lnea se describe la expresin

JavaScript est internacionalizado

Juan Quemada, DIT, UPM

Ademas podemos representar cualquir caracter UNICODE o ISO-LATIN-1:

"Dos \u000A lineas"

Juan Quemada, DIT, UPM

Boolean, igualdad y otros

Juan Quemada, DIT, UPM

Operador negacin (negation): !

Juan Quemada, DIT, UPM

Igualdad estricta (identidad)

Juan Quemada, DIT, UPM

"" === ''

Juan Quemada, DIT, UPM

// Evita error de ejecucin

// Valor por defecto

Juan Quemada, DIT, UPM

1.2 < 1.3

false < true

"a" < "b"

"a" < "a"

La sentencia if/else de JavaScript

Juan Quemada, DIT, UPM

Juan Quemada, DIT, UPM

Ejemplo con sentencia if/else

Sunday, February 23, 14

Juan Quemada, DIT, UPM

Sunday, February 23, 14

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

presenta un mensaje al usuario

Presenta mensaje y pide confirmacin/rechazo

Presenta mensaje y pide un dato de entrada

Sunday, February 23, 14

Juan Quemada, DIT, UPM

Juan Quemada, DIT, UPM

Caractersticas avanzadas de los

Juan Quemada, DIT, UPM

Juan Quemada, DIT, UPM

Operaciones sobre propiedades

Sunday, February 23, 14

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

Objetos anidados: rboles

Juan Quemada, DIT, UPM

Objeto window: this

JavaScript se ejecuta dentro del objeto global window

El objeto global window tiene propiedades con informacin sobre

JavaScript permite refenciar window como this u omitirse

La propiedad document de window se puede referenciar como

Variables globales y el entorno de ejecucin