Mod2-JavaScript 1 GD

Juan Quemada, DIT, UPM
Introduccin a JavaScript, a sus

tipos y valores
1
Sunday, February 23, 14
JavaScript
!
Diseado por Netscape en 1995 para ejecutar en un Navegador
" Hoy se ha convertido en el lenguaje del Web y Internet
Norma ECMA (European Computer Manufacturers Association)
!
Versin soportada en navegadores actuales:
" ES5: ECMAScript v5, Dic. 2009, (JavaScript 1.5)
!
Navegadores antiguos soportan
" ES3: ECMAScript v3, Dic. 1999, (JavaScript 1.3)
Tutorial: http://www.w3schools.com/js/
Referencia: http://www.w3schools.com/jsref/
Libro: JavaScript Pocket Reference, D. Flanagan, OReilly 2012, 3rd Ed.
JavaScript
2
Tipos de JavaScript
!
number
" Literales de nmeros: 32, 1000, 3.8
!
boolean
" Los literales son los valores true y false
!
string
" Los literales de string son caracteres delimitados entre comillas o apstrofes
!
"Hola, que tal", 'Hola, que tal',
" Internacionalizcin con Unicode: '!"#$ %&', (%)*', ''
!
undefined
" undefined: representa indefinido
Objetos: agregaciones de valores estructurados
!
Se agrupan en clases: Object, Array, Date, ...
" Objeto null: valor especial que representa objeto nulo
Tipos, objetos y valores
3
v2
n2
vn
nn
..
v1
n1
JavaScript incluye operadores de tipos y objetos
!
Los operadores permiten formar expresiones
" Componiendo valores con los operadores
!
Que Javascript evalua hasta obtener un resultado
Por ejemplo, con las operaciones aritmeticas +, -, *, /
!
podemos formar expresiones nmericas
Operadores y expresiones
13 + 7 => 20 // Suma de nmeros
13 - 7 => 6 // Resta de nmeros
(8*2 - 4)/3 => 4 // Expresin compleja
// Incluyendo parntesis
4
Algunos operadores tienen varias semnticas diferentes
Por ejemplo, el operador + tiene 3 semnticas diferentes
!
Suma de enteros (operador binario)
!
Signo de un nmero (operador unitario)
!
Concatenacin de strings (operador binario)
Sobrecarga de operadores
13 + 7 => 20 // Suma de nmeros
+13 => 13 // Signo de un nmero
"Hola " + "Pepe" => "Hola Pepe" // Concatenacin de strings
5
JavaScript realiza conversin automatica de tipos
!
cuando hay ambiguedad en una expresin
" utiliza las prioridades para resolver la ambiguedad
La expresin "13" + 7 es ambigua
!
porque combina un string con un number
" JavaScript asigna mas prioridad al operador + de strings, convirtiendo 7 a string
La expresin +"13" tambin necesita conversin automtica de tipos
!
El operador + solo esta definido para number
" JavaScript debe convertir el string "13" a number antes de aplicar operador +
Conversin de tipos en expresiones
13 + 7 => 20
"13" + "7" => "137"
"13" + 7 => "137"
+"13" + 7 => 20
6
. [] Acceso a propiedad o invocar mtodo; ndice a array
new Crear objeto con constructor de clase
() Invocacin de funcin/mtodo o agrupar expresin
++ -- Pre o post auto-incremento; pre o post auto-decremento
! ~ Negacin lgica (NOT); complemento de bits
+ - Operador unitario, nmeros. signo positivo; signo negativo
delete Borrar propiedad de un objeto
typeof void Devolver tipo; valor indefinido
* / % Nmeros. Multiplicacin; divisin; modulo (o resto)
+ Concatenacin de string
+ - Nmeros. Suma; resta
<< >> >>> Desplazamientos de bit
< <= > >= Menor; menor o igual; mayor; mayor o igual
instanceof in objeto pertenece a clase?; propiedad pertenece a objeto?
== != === !== Igualdad; desigualdad; identidad; no identidad
& Operacion y (AND) de bits
^ Operacion exclusivo (XOR) de bits
| Operacion (OR) de bits
&& Operacin lgica y (AND)
|| Operacin lgica o (OR)
?: Asignacin condicional
= Asignacin de valor
OP= Asig. con operacin: += -= *= /= %= <<= >>= >>>= &= ^= |=
, Evaluacin mltiple
Operadores JavaScript
7
3 + 7 => 10
"3" + 7 => "37"
Los operadores estn ordenados con prioridad descendente. Mas altos ms prioridad.
. [] Acceso a propiedad o invocar mtodo; ndice a array
new Crear objeto con constructor de clase
() Invocacin de funcin/mtodo o agrupar expresin
++ -- Pre o post auto-incremento; pre o post auto-decremento
! ~ Negacin lgica (NOT); complemento de bits
+ - Operador unitario, nmeros. signo positivo; signo negativo
delete Borrar propiedad de un objeto
typeof void Devolver tipo; valor indefinido
* / % Nmeros. Multiplicacin; divisin; modulo (o resto)
+ Concatenacin de string
+ - Nmeros. Suma; resta
<< >> >>> Desplazamientos de bit
< <= > >= Menor; menor o igual; mayor; mayor o igual
instanceof in objeto pertenece a clase?; propiedad pertenece a objeto?
== != === !== Igualdad; desigualdad; identidad; no identidad
& Operacion y (AND) de bits
^ Operacion exclusivo (XOR) de bits
| Operacion (OR) de bits
&& Operacin lgica y (AND)
|| Operacin lgica o (OR)
?: Asignacin condicional
= Asignacin de valor
OP= Asig. con operacin: += -= *= /= %= <<= >>= >>>= &= ^= |=
, Evaluacin mltiple
Operadores JavaScript
Los operadores estn ordenados con prioridad descendente. Mas altos ms prioridad.
8
8*2 - 4 => 12
Script: programa JavaScript insertado en una pgina HTML
!
Delimitado con la marca <script> con atributo type=text/javascript
" Se ejecuta al cargar la pgina HTML en el navegador
Funcin Alert("mensaje"): genera una ventana desplegable
!
Que muestra el mensaje pasado como parmetro
Ejemplo: Script Expresin
9
El operador typeof permite conocer el tipo de un valor
!
Devuelve un string con el nombre del tipo
" "number", "string", "boolean", "undefined", "object" y "function"
Operador typeof
typeof 7 => "number"
typeof "hola" => "string"
typeof true => "boolean"
typeof undefined => "undefined"
typeof null => "object"
typeof new Date() => "object"
typeof new Function() => "function"
10
Sentencias, variables y
comentarios de JavaScript
11
Un programa es una secuencia de sentencias que
!
se ejecutan en el orden en que han sido definidas
Las sentencias realizan tareas al ejecutarse en un ordenador
!
pueden provocar cambios en el estado interno del programa
!
pueden interaccionar con el exterior del ordenador, p.e. con un usuario
Algunas sentencias modifican la ejecucin secuencial
!
como if/else, for, while, .. (se vern ms delante)
Programa y sentencias
12
alert("Primer desplegable");
alert("Segundo desplegable");
Primera sentencia:
genera desplegable
con primer mensaje
Segunda sentencia:
genera desplegable
con segundo mensaje
/* Ejemplo de comentario multilnea que ocupa 2 lneas
-> al tener ambiguedades, no se recomienda su utilizacin */
alert("Mi mensaje"); // Comentario monolnea que acaba aqu
Los comentarios son mensajes informativos
!
Documentan el programa, facilitando su comprensin
" Los programas deben documentarse bien
En JavaScript hay 2 tipos de comentarios
!
Monolinea: empiezan por // ..comentario..
!
Multilinea: Se delimitan con /* ..comentario.. */
" OJO! Los comentarios multilinea tienen problemas con las expresiones regulares
Comentarios
13
var x; // crea la variable x y asigna undefined
var y = "Hola"; // crea y, asignandole el valor "Hola"
var z = 1, t = 2; // crea x e y, asignandoles 1 y 2 respectivamente
Estado del programa
!
conjunto de valores contenido en sus variables
Las variables se crean con la sentencia de definicin de variables
!
Comienza con la palabra reservada var
" Seguida de la variable, a la que se puede asignar un valor inicial
!
Se pueden crear varias variables en una sentencia
" separando las definiciones por comas
Variables y estado del programa
undefined
x
"Hola"
y
1
z
2
t
14
Una variable ya creada es un contenedor de valores
!
La sentencia de asignacin introduce un nuevo valor en la variable
" Modificando, por tanto, el estado del programa
Las variables de JavaScript son no tipadas
!
pueden contener valores de cualquier tipo de JavaScript
Sentencia de asignacin de variables
15
var x = 5; // Crea la variable x y le asigna el valor inicial 5
x = "Hola"; // Asigna el string (texto) "hola" a la variable x
x = new Date(); // Asigna objeto Date a la variable x
5
x
"Hola"
x
Mon Sep 02 2013 09:16:47
GMT+0200 (CEST)
x
Una variable representa el valor que contiene
!
Puede ser usada en expresiones como cualquier otro valor
Una variable puede utilizarse en la expresin que se asigna a ella misma
!
La parte derecha usa el valor anterior a la ejecucin de la sentencia
" En y = y - 2; la variable y tiene el valor 8, por lo que se asigna a y un 6 (8-2)
Usar una variable no definida en una expresin
!
provoca un error y la ejecucin del programa se interrumpe
Expresiones con variables
var x = 3;
var y = 5 + x;
y = y - 2;
x = y + z; // variable z no ha sido definida
3
x
8
y
6
y
Error
16
var x = 3;
x = 5 + x; // sentencia til, porque la asignacin guarda el resultado
x*5 - 2; // expresin correcta, pero inutil en un programa
alert("Mi mensaje"); // expresin til porque tiene efecto lateral
La sentencia de ejecucin de expresiones contiene solo una expresin
!
que se calcula al ejecutar la sentencia, sin cambiar el estado del progr.
" Por ejemplo, (3 + 2) o alert("Mi mensaje") son sentencias correctas (expresiones)
Estas sentencias solo tienen utilidad si producen efectos laterales
!
Como alert("Mi mensaje") que muestra una ventana desplegable
Una expresin siempre se evala en un valor
!
Si ese valor no se guarda en una variable y no hay ningun efecto lateral
" La instruccin no tiene ningun efecto en el programa, solo consume recursos
Sentencia de ejecucin de expresiones
17
// Ejemplos de delimitacin de
// sentencias que
// no recomendables
var x; x = "Hola"
var y = "Pepe"
; delimita el final de una sentencia
El final de sentencia tambin puede demitarse con nueva linea
!
Pero hay ambiguedades y no se recomienda hacerlo
Se recomienda terminar siempre con ; -> es mas legible y seguro
Delimitacin de sentencias
undefined
x
"Hola"
x
"Pepe"
y
18
Nombres de variables
El nombre (o identificador) de una variable debe comenzar por:
!
letra, _ o $
" El nombre pueden contener adems nmeros
!
Nombres bien construidos: x, ya_vs, $A1, $, _43dias
!
Nombres mal construidos: 1A, 123, %3, v=7, a?b, ..
" Nombre incorrecto: da error_de_ejecucin e interrumpe el programa
Un nombre de variable
!
no debe ser una palabra reservada de JavaScript
Las variables son sensibles a maysculas
!
mi_var y Mi_var son variables distintas
19
Objetos, propiedades y mtodos
de JavaScript
20
Los objetos son colecciones de variables
!
agrupadas como un elemento estructurado que llamamos objecto
" Las variables se denominan propiedades
Una propiedad es un par nombre:valor donde
!
los nombres deben ser todos diferentes en un mismo objeto
Se definen con el literal: { nombre:valor, ... }
!
Por ejemplo: {titulo: 'Avatar', director: 'James Cameron'}
" crea un objeto con 2 propiedades:
!
titulo:'Avatar'
!
director:'James Cameron'
21
Objetos
v2
n2
vn
nn
.
.
v1
n1
v2
n2
vn
nn
..
v1
n1
'Avatar'
'James
Cameron'
director titulo
El acceso a propiedades utiliza el operador punto
!
obj.propiedad
Por ej. en: var pelicula = {titulo: 'Avatar', director: 'James Cameron'}
!
pelicula.titulo => "Avatar"
!
pelicula.director => "James Cameron"
!
pelicula.fecha => undefined // la propiedad fecha no existe
Aplicar el operador punto sobre undefined o null
!
Provoca un Error_de_ejecucin y aborta la ejecucin del programa
La notacin punto solo acepta nombres de propiedades
!
Con la sintaxis de variables: a, _method, $1, ...
" No son utilizables: "$43", "?a=1", ......
Propiedades
'Avatar'
pelicula
'James
Cameron'
director titulo
22
La notacin array permite acceder tambin a propiedades
!
objeto["propiedad"] es equivalente a objeto.propiedad
en el ejemplo anterior: var pelicula = {titulo: ...., director: ......}
!
pelicula["titulo"] es equivalente a pelicula.titulo
La notacin array permite utilizar strings arbitrarios como nombres
!
objeto["El director"], pelicula[""] o a["%43"]
" OJO! es conveniente utilizar siempre nombres compatibles con notacin punto
Strings arbitrarios como nombres son posibles tambin en un literal:
!
Por ej. {"titulo": 'Avatar', "El director": 'James Cameron'}
Notacin array
'Avatar'
pelicula
'James
Cameron'
director titulo
23
Un mtodo es una operacin realizable sobre un objeto
!
Se invoca con la notacin punto: objeto.metodo(..params..)
Un objeto hereda mtodos de su clase
!
Adems pueden definirse mtodos adicionales
" Invocar un mtodo no heredado ni definido sobre un objeto da error_de_ejecucin
Por ejemplo
!
document.write("Hola Mundo!")
" inserta string "Hola Mundo!" en pgina Web
!
document.writeln("Hola Mundo!")
" inserta string "Hola Mundo!" y nueva linea en la pgina Web
Mtodos
24
Todos los objetos de JavaScript pertenecen a la clase Object
!
Las clases predefinidas en Javascript derivan de Object
" Array, Function, ....
La clase Object tiene el constructor Object()
!
que permite crear objetos con el operador new
" new Object() crea un objeto vaco equivalente a {}
Los objetos heredan propiedades y mtodos de su clase padre
!
p. e., todo objeto de la clase Object hereda el mtodo toString()
" que devuelve el string "[object Object]" cuando se invoca sobre un objeto
25
Clases y herencia
Ejemplos de Scripts JavaScript
26
Script I: genera
HTML al vuelo
27
'Avatar'
pelicula
'James
Cameron'
director titulo
Script II: texto
formateado con <pre>
'Avatar'
pelicula
'James
Cameron'
director titulo
28
Aplicaciones de cliente
Programa que se ejecuta en el navegador
!
Se identificada por el URL de la pgina Web que los contiene
" Por ejemplo: http://upm.es/misapps/webapp.html
!
Se descarga con HTTP del servidor
Servidor sirve fichero
identificado por URL
1) Cliente solicita WebApp
identificada con URL
2) Script se ejecuta al
cargar la pgina Web en
el navegador:
Solicitud HTTP asociada
a un URL
Respuesta HTTP:
pgina Web con script
29
Firefox - HTML5
Web Developer
Firefox tiene herramientas de
desarrollo muy eficaces, en
!
Tools -> Web Developer -> **
Consola JavaScript
!
Permite ejecutar sentencias
!
Muestra errores en scripts
!
........
Los demas navegadores
!
tienen herramientas
similares
Explicadas en Screencasts
Cliente pide pgina Web (URL)
Servidor enva pgina Web
30
31
Haciendo clic aqu
Aparece el fichero resaltando la
lnea con el error de sintaxis
Firefox detecta que
falta el parntesis,
aborta la ejecucin
y lo notifica en la
consola
32
La consola nos va mostrando
el resultado de ejecutar las
sentencias JavaScript
Aqu se introduce la sentencia
33
Inspector nos muestra los
comandos CSS que aplican
sobre un elemento HTML
Publicar en la nube (Google Drive)
34
Una pgina Web o un recurso en Internet
!
puede ser pblico o de acceso restringido
Recurso pblico
!
Para ser accedido en modo lectura por cualquiera en Internet
" Una pgina Web, una foto, una pelicula, etc.
Recurso de acceso restringido
!
Utilizado en aplicaciones Web, como Google Drive
" Puede ser creado, editado o borrado, pero solo por usuarios autorizados
!
Autorizacin: se concede si el usuario se autentica y tiene derecho
" Autenticacin: por usuario y contrasea, eDNI, huella dactilar, ....
Recursos pblicos y de acceso restringido
35
Se debe utilizar una cuenta de Google
!
Para publicar pginas Web y Apps en Google Drive
" http://drive.google.com
Google Drive permite crear directorios con acceso pblico
!
El directorio se crea y edita con acceso restringido
" Pero el directorio y sus recursos tienen adems acceso pblico
!
Con otro URL que da acceso en modo solo lectura
Este segundo URL pblico permite
!
Probar que los ejercicios funcionan en Internet
" accediendo a ellos desde el PC, mviles y otros terminales
!
Entregar los ejercicios funcionando, para que otros los correjan
Publicacin en la nube: Google Drive
36
1. clicar para crear nueva carpeta
2. Escribir nombre
y clicar para crear
la carpeta
Seguir pasos 1 y 2 para crear un directorio en Google Drive
Crear un directorio pblico I
37
0. En modo
cuadricula
2. clicar para
compartir (share)
1. clicar para seleccionar
3. clicar para
cambiar Change)
Seguir pasos 1, 2 y 3 para acceder al cambio de permisos
Crear un directorio pblico II
38
(Public on the Web)
2. clicar para guardar seleccin
Seguir pasos 1 y 2 para finalizar el cambio de permisos
!
La carpeta Ejercicios ya es pblica en Internet
Crear un directorio pblico III
39
Todos los accesos anteriores estn restringidos
!
Al usuario que es dueo del disco (cuenta) de Google Drive
" Que solo puede acceder si est autenticado
Estos accesos utilizan URLs de acceso restringido, como
!
https://drive.google.com/?tab=Xo&authuser=0#/0B48KCWfVwCIEcEdDcEVSTS1MS00
Carpetas y ficheros pblicos poseen adems un URL pblico
!
Permite acceder a otros pero solo en modo solo lectura
" https://googledrive.com/host/0B48KCWfVwCIEcEdDcEVSTS1MS00/
Acceso pblico con nuevo URL
40
2. desplegar
funciones
adicionales
3. clicar para ver
mas detalles
Seguiendo los pasos 1, 2 y 3 accedemos a los detalles del directorio
!
Tal y como se muestra aqu
41
1. seleccionar
Encontrar URL de acceso pblico
42
URL pblico
Los detalles (details) del recurso
!
muestran el URL pblico de acceso en modo lectura
URL privado
URL de acceso pblico
43
URL privado:
https://drive.google.com/?tab=Xo&authuser=0#folders/0B48KCWfVwCIEcEdDcEVSTS1MS00
URL pblico:
https://googledrive.com/host/0B48KCWfVwCIEcEdDcEVSTS1MS00/
Acceso pblico:
solo lectura
Acceso autenticado:
lectura, modificacin, borrado, ..
Final del tema
Muchas gracias!
44
Entrega de ejercicios en Google
Drive
45
El directorio pblico creado para esta asignatura
!
ser utilizado para publicar el ejercicio de la entrega semanal
El ejercicio deber subirse al directorio pblico
!
Y el URL pblico deber incluirse en la entrega en la platforma
El URL pblico debe utlizarse tambin para
!
Probar y ver las pginas y aplicaciones Web
" En nuestro PC, telfonos mviles y tabletas
Se recomienda guardar el URL a la carpeta pblica
!
En los favoritos del navegador utilizado: PC, mvil, tableta, ...
" Para probar los ejercicos realizados en todos los dispositivos con facilidad
Publicacin de ejercicios
46
1. Desplegar y clicar Files para subir fichero
Seleccionar Files... para subir fichero
Subir un ejercicio al directorio I
47
0. En modo
cuadricula
Seguir pasos 1 y 2 para subir fichero
48
fichero
2. clicar para subir fichero
Subir un ejercicio al directorio II
Confirmar que el fichero se sube a un directorio pblico
!
El fichero tambin ser pblico y ser visible como pagina Web en Internet
49
Clicar para confirmar que el fichero se sube y se comparte
Subir un ejercicio al directorio III
El fichero T2!.2_lista.html ya esta en directorio pblico
!
Pasos 1, 2 y 3 nos llevan a detalles del recurso (ver transp. siguiente)
50
Encontrar el URL pblico I
2. desplegar
funciones
adicionales
3. clicar para ver
mas detalles
1. seleccionar
Haciendo clic en el URL pblico
!
Vemos T2_3-2_lista.html como pgina Web
51 Fichero T2_3-2_lista.html
Encontrar el URL pblico II
URL pblico
Final del tema
Muchas gracias!
52

Mod2-JavaScript 1 GD

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

Mod2-JavaScript 1 GD

Cargado por

Copyright:

Formatos disponibles

Juan Quemada, DIT, UPM

Introduccin a JavaScript, a sus

También podría gustarte