SlideShare una empresa de Scribd logo
1 de 41
Descargar para leer sin conexión
Introducción a JavaScript:
Expresiones
1
© Juan Quemada, DIT, UPM
JavaScript
Lenguaje de programación diseñado en 1995 por Brendan Eich
n Para animar páginas Web en el Navegador Netscape
w Hoy se ha convertido en el lenguaje del Web y de Internet
n Guía: https://developer.mozilla.org/es/docs/Web/JavaScript/Guide
JavaScript: sigue la norma ECMA-262 (European Computer Manufacturers Assoc.)
n “Seguida” por todos los navegadores: Chrome, Explorer, Firefox, Safari, ..
n https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
ECMA-262 ha evolucionado mucho, siempre con "compatibilidad hacia atrás”
n ES3 - ECMAScript 3 (Dec. 1999): navegadores antiguos
w Primera versión ampliamente aceptada, compromiso entre Netscape y Microsoft
n ES5 - ECMAScript 5.1 (Jun. 2011): navegadores actuales
w Desarrollado junto con plataforma HTML5 (HTML, CSS y JavaScript) de WHATWG (https://whatwg.org)
n ES6 - ECMAScript 6 (Jun. 2015): en vías de introducción en navegadores
w Introduce muchas mejoras, ver http://es6-features.org/
Este curso se centra en la partes buenas (Good parts) de ES3 y ES5
n Siguiendo el libro: JavaScript: The Good Parts, Douglas Crockford, 2008
2
© Juan Quemada, DIT, UPM
Expresiones numéricas y operadores
JavaScript incluye operadores
n Los operadores permiten formar expresiones
w componiendo valores con dichos operadores
n Una expresión representa un valor, que es el resultado de evaluarla
Ejemplo: operadores aritméticos +, -, *, / formando expresiones numéricas
n Las expresiones se evalúan (=>) a los valores resultantes
w Expresiones mal construidas dan error o llevan el interprete a un estado inconsistente
3
© Juan Quemada, DIT, UPM
13 + 7 => 20 // Suma de números
13 - 1.5 => 11.5 // Resta de números
// OJO! la coma española es un punto en la sintaxis inglesa
(8*2 - 4)/3 => 4 // Expresión con paréntesis
8 / * 3 => ?? // Expresión incorrecta
8 3 => ?? // Expresión incorrecta
4
© Juan Quemada, DIT, UPM
La consola de un navegador (Chrome) puede ejecutar
sentencias o expresiones JavaScript en modo interactivo.
El interprete analiza y ejecuta el texto introducido al
teclear nueva línea (Enter). Si tecleamos una expresión
la evalúa y calcula el resultado.
Despliega la consola
1) Abrir consola JavaScript de chrome
2) Ejecutar sentencias en consola de chrome
expresión introducida
resultado
introducir nueva expresión
o sentencia aquí.
Expresión sintacticamente
incorrecta da error
borrar consola
quitar mensajes de error
Texto: strings
El texto escrito se representa en JavaScript con strings
n Un string delimita el texto con comillas o apóstrofes, por ej.
w Frases: "hola, que tal" o 'hola, que tal'
w String vacío: "" o ''
Ejemplo de "texto 'entrecomillado' "
n comillas y apóstrofes se pueden anidar
w 'entrecomillado' forma parte del texto
Operador + concatena strings, por ejemplo
n "Hola" + " " + "Pepe" => "Hola Pepe”
La propiedad length de un string indica su longitud (Número de caracteres)
n "Pepe".length => 4
n “Hola Pepe".length => 9
5
© Juan Quemada, DIT, UPM
6
© Juan Quemada, DIT, UPM
expresión
introducida
resultado
La consola analiza y ejecuta
el texto introducido al teclear
nueva línea (Enter).
Si tecleamos una expresión de
strings, esta se evalúa,
presentando el string
resultante.
Los strings "Eva" y 'Eva' son literales de string
equivalentes, que representan el mismo string o texto.
El string " " o ' ' representa el carácter espacio (space)
o blanco (blank), que separa palabras en un texto.
El operador + aplicado a strings los concatena o une,
generando un nuevo string con la unión de los dos.
Es asociativo y permite concatenar más de 2 strings.
"Eva".length devuelve la longitud del string (número de
caracteres). Length es una "propiedad” del string.
Los operadores sobrecargados tienen varias semánticas
n dependiendo del contexto en que se usan en una expresión
Por ejemplo, el operador + tiene 3 semánticas diferentes
n Suma de enteros (operador binario)
n Signo de un número (operador unitario)
n Concatenación de strings (operador binario)
Sobrecarga de operadores
13 + 7 => 20 // Suma de números
+13 => 13 // Signo de un número
"Hola " + "Pepe" => "Hola Pepe" // Concatenación de strings
7
© Juan Quemada, DIT, UPM
JavaScript realiza conversión automática de tipos
n cuando hay ambigüedad en una expresión
w utiliza las reglas de prioridad para resolverla
La expresión "13" + 7 es ambigua
n porque combina un string con un number
w Con ambigüedad JavaScript da prioridad al operador + de strings, convirtiendo 7 a
string
La expresión +"13" también necesita conversión automática de tipos
n El operador + solo esta definido para number (no hay ambigüedad)
w JavaScript debe convertir el string "13" a number antes de aplicar operador +
Conversión de tipos en expresiones
8
© Juan Quemada, DIT, UPM
Consola JavaScript
. [] Acceso a propiedad o invocar método; índice a array
new Crear objeto con constructor de clase
() Invocación de función/método o evaluar expresión
++ -- Pre o post auto-incremento; pre o post auto-decremento
! ~ Negación lógica (NOT); complemento de bits
+ - Operador unitario, números. signo positivo; signo negativo
delete Borrar propiedad de un objeto
typeof void Devolver tipo; valor indefinido
* / % Números. Multiplicación; división; modulo (o resto)
+ + - Concatenación de strings; Números. 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
& Operación y (AND) de bits
^ Operación ó exclusivo (XOR) de bits
| Operación ó (OR) de bits
&& Operación lógica y (AND)
|| Operación lógica o (OR)
?: Asignación condicional
= Asignación de valor
OP= Asig. con operación: += -= *= /= %= <<= >>= >>>= &= ^= |=
, Evaluación múltiple
Operadores ES3, ES59
© Juan Quemada, DIT, UPM
8*2 - 4 => 12
* tiene más prioridad que -, pero (..)
obliga a evaluar antes - en:
8*(2 - 4) => -16
La prioridad de los operadores es descendente y de izquierda a derecha. (Mayor si más arriba o más a izq.)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
. [] Acceso a propiedad o invocar método; índice a array
new Crear objeto con constructor de clase
() Invocación de función/método o evaluar expresión
++ -- Pre o post auto-incremento; pre o post auto-decremento
! ~ Negación lógica (NOT); complemento de bits
+ - Operador unitario, números. signo positivo; signo negativo
delete Borrar propiedad de un objeto
typeof void Devolver tipo; valor indefinido
* / % Números. Multiplicación; división; modulo (o resto)
+ + - Concatenación de strings; Números. 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
& Operación y (AND) de bits
^ Operación ó exclusivo (XOR) de bits
| Operación ó (OR) de bits
&& Operación lógica y (AND)
|| Operación lógica o (OR)
?: Asignación condicional
= Asignación de valor
OP= Asig. con operación: += -= *= /= %= <<= >>= >>>= &= ^= |=
, Evaluación múltiple
10
© Juan Quemada, DIT, UPM
+"3" + 7 => 10
+ unitario (signo) tiene mas prioridad
que + binario (suma) y se evalúa antes
La prioridad de los operadores es descendente y de izquierda a derecha. (Mayor si más arriba o más a izq.)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
Operadores ES3, ES5
JavaScript:
Programas, sentencias y variables
11
© Juan Quemada, DIT, UPM
Un programa es una secuencia de sentencias
n que se ejecutan en el orden en que han sido definidas (con excepciones)
Las sentencias realizan tareas al ejecutarse en un ordenador
n Cada sentencia debe acabarse con punto y coma: ";”
Los comentarios solo tienen valor informativo
n para ayudar a entender como funciona el programa
Programa, sentencias y comentarios
12
© Juan Quemada, DIT, UPM
/* Ejemplo de
programa JavaScript */
var x = 7; // Definición de variable
// visualizar x en el navegador
document.write(x);
Sentencia 1: define la
variable x con valor 7.
Sentencia 2: visualiza
x en el navegador
Comentario multi-
línea: delimitado con
/* …. */
Comentario de una
línea: empieza con
// y acaba al final
de la línea
Script: programa JavaScript encapsulado entre marcas <script>
n Se ejecuta al cargar en el navegador la página Web que lo contiene
w JavaScript es un lenguaje interpretado que ejecuta las instrucciones a medida que las va leyendo
n document.write(<expresión>) convierte <expresión> a string y lo visualiza en el navegador
w El string se interpreta como HTML y se visualiza en el lugar de la página donde esta el script JavaScript
Una variable guarda valores para uso posterior
n Una variable representa el valor que contiene
w Puede utilizarse en expresiones como cualquier otro valor
13
Script JavaScript con variables
Define la variable
euro con valor 10
Visualizan en el
navegador el
resultado de
evaluar las
expresiones
Separación de
línea HTML
© Juan Quemada, DIT, UPM
Definición de variables y estado del programa
Las variables se crean con la sentencia de definición de variables
n La sentencia comienza con la palabra reservada var
w A continuación vienen una o más definiciones de variables separadas por comas
n Cada definición de variable comienza con el nombre de la variable
w A la variable se le puede asignar un valor usando el operador de asignación: =
undefined: valor (y tipo) especial de JavaScript que significa indefinido
n Las variables sin ningún valor asignado contienen el valor undefined
Estado de un programa:
n Conjunto de todas las variables creadas por el programa
w junto con sus correspondientes valores
14
© Juan Quemada, DIT, UPM
var x = 5; // Define la variable x con el valor 5
var y; // Define la variable y sin asignar ningún valor
var z = 1,∫ t = "Hola"; // Define las variables z y t con
// con los valores 1 y "Hola" respectivamente
5
x
"Hola"
t
undefined
y
1
z
El nombre (o identificador) de una variable debe comenzar por:
n letra, _ o $
w El nombre pueden contener además números
n Nombres bien construidos: x, ya_vás, $A1, $, _43dias
n Nombres mal construidos: 1A, 123, %3, v=7, a?b, ..
w Nombre incorrecto: da error_de_sintaxis e interrumpe el programa
Un nombre de variable no debe ser una palabra reservada de JavaScript
n por ejemplo: var, function, return, if, else, while, for, in, new, typeof, ….
Las variables son sensibles a mayúsculas
n mi_var y Mi_var son variables distintas
Sintaxis de los nombres de variables
15
© Juan Quemada, DIT, UPM
Asignación de variables y estado del programa
Una variable es un contenedor de valores, cuyo contenido puede variar
n La sentencia de asignación de variables asigna un nuevo valor con el operador: =
Las variables de JavaScript son no tipadas
n Esto significa que se puede asignar cualquier tipo de valor
w Una variable puede contener un número, un string, undefined, ..
Se denomina punto de ejecución del programa
n al estado en que queda el programa después de ejecutar una instrucción
w el estado de un programa varia en función del punto de ejecución
16
© Juan Quemada, DIT, UPM
var x = 5; // Crea la variable x y le asigna 5
x = "Hola"; // Asigna a x el string (texto) "hola"
x = undefined; // Asigna a x undefined (valor indefinido)
x = new Date(); // objeto Date: fecha/hora del reloj del
5
x
"Hola"
x
undefined
x
Mon Sep 02 2013
09:16:47 GMT+0200
x
Evolución
del estado
en función
del punto de
ejecución
del programa
Se recomienda delimitar las sentencias siempre con: ;
n La sintaxis de JS permite introducir caracteres adicionales (blanco, nueva linea, ..) para
facilitar la legibilidad del programa
JavaScript permite omitir ; si la sentencia acaba con nueva linea
n Esto puede dar problemas y no debe hacerse nunca
Cada sentencia debe ocupar una línea por legibilidad, salvo algunas excepciones
n Las sentencias con bloques de código: if/else, while, for, definición de funciones, …..
n sentencias que contienen expresiones muy largas
17
© Juan Quemada, DIT, UPM
Recomendaciones sobre sintaxis
// Ejemplos de delimitación de
// sentencias que no son
// recomendables
var x; var y = "Pepe"
x = "Hola"
undefined
x
"Hola"
x
"Pepe"
y
JavaScript:
Expresiones con variables
18
© Juan Quemada, DIT, UPM
Una variable representa el valor que contiene
n Puede ser usada en expresiones como cualquier otro valor
Una variable puede utilizarse en la expresión que se asigna a ella misma
n La parte derecha usa el valor anterior a la ejecución de la sentencia
w y = y - 2 asigna a y el valor 6 (8-2), porque y tiene el valor 8 antes de ejecutarse
Usar una variable no definida en una expresión
n provoca un error y la ejecución del programa se interrumpe
19
© Juan Quemada, DIT, UPM
var x = 3;
var y = 5 + x;
y = y - 2;
x = y + z;
3
x
Error
8
y
3
x
6
y
3
x
Evolución del estado en función del
punto de ejecución del programa
El error se produce porque la
variable z no ha sido definida.
Expresiones con variables
JavaScript posee los operadores ++ y -- de auto-incremento o decremento
n ++ suma 1 y -- resta 1 a la variable a la que se aplica
w ++ y -- se pueden aplicar por la derecha o por la izquierda a las variables de una expresión
n Si ++/-- se aplica por la izquierda a la variable (pre), el incremento/decremento se realiza antes de
evaluar la expresión
n Si ++/-- se aplica por la derecha (post) se incrementa/decrementa después de evaluarla
n Ojo! Usar con cuidado porque tiene efectos laterales y lleva a programas crípticos.
Documentación adicional
n https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators
20
© Juan Quemada, DIT, UPM
var x = 2;
++x
var y = ++x + 2;
var z = y-- + 2;
2
x
4
x
6
y
5
y
8
z
Paso 1
Paso 3.1
Paso 3.2
Paso 4.1
Paso 4.2
3
x
no cambia
Al ser pre-incremento el
orden de ejecución es:
1) Paso 3.1: ++x
2) Paso 3.2: y=x+2
Con post-decremento el
de ejecución orden es:
1) Paso 4.1: z=y+2
2) Paso 4.2: y--
3
x
Paso 2
Pre y post auto incremento o decremento
var x = 3; // define x inicializada a 3
x += 2; // suma 2 a x
x *= 3; // multiplica x por 3
x %= 4; // % operación módulo:
// divide x por 4 y devuelve el resto
Operadores de asignación
3
x
5
x
15
x
21
© Juan Quemada, DIT, UPM
3
x
Es muy común modificar el valor de una variable
n sumando, restando, .... algún valor
w Por ejemplo, x = x +7; y = y - 3; z = z * 8; …….
JavaScript tiene operadores de asignación especiales para estos casos
n +=, -=, *=, /=, %=, ……(y para otros operadores del lenguaje)
w x += 7; será lo mismo que x = x + 7;
n https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators
JavaScript:
Funciones
22
© Juan Quemada, DIT, UPM
function comer(persona, comida) {
return (persona + " come " + comida);
};
Función: bloque de código (con parámetros) asociado a un nombre
n La función se invoca (o ejecuta) por el nombre y devuelve un valor como resultado
w En la invocación se deben asignar valores concretos a los parámetros
Las funciones permiten crear operaciones de alto nivel
n Se denominan también abstracciones o encapsulaciones de código
La función representa el valor resultante de su ejecución (evaluación)
n El resultado de evaluar una función depende del valor de los parámetros
w Puede utilizarse en expresiones como cualquier otro valor
23
© Juan Quemada, DIT, UPM
Uso de
funciones
document.write(comer("José", "paella") + " hoy");
document.write(comer("Victor", "pan") + " hoy" );
"Jose come paella"
comer("Jose", "paella")
"Victor come pan"
comer("Victor", "pan")
Una función se define con la palabra reservada function seguida del nombre
n A continuación se definen los parámetros entre paréntesis
w Los parámetros son variables que se asignan en la invocación
n Puede asignarse nuevos valores en el bloque igual que a las variables
n A continuación se define el bloque de código delimitado entre llaves {}
w El bloque contiene instrucciones
La sentencia return <expresion> finaliza la ejecución
n Devolviendo el resultado de evaluar <expresion> como valor de retorno
w Si la función llega a final del bloque sin haber ejecutado un return, acaba y devuelve undefined
Documentación:
n https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Funciones
24
Función: definición e invocación
function comer(persona, comida) {
return (persona + " come " + comida);
};
comer("José", "paella"); => "José come paella"
comer("Victor", "pan"); => "Victor come pan"
© Juan Quemada, DIT, UPM
Una función se define con la palabra reservada function seguida del nombre
n A continuación se definen los parámetros entre paréntesis
w Los parámetros son variables que se asignan en la invocación
n Puede asignarse nuevos valores en el bloque igual que a las variables
n A continuación se define el bloque de código delimitado entre llaves {}
w El bloque contiene instrucciones
La sentencia return <expresion> finaliza la ejecución
n Devolviendo el resultado de evaluar <expresion> como valor de retorno
w Si la función llega a final del bloque sin haber ejecutado un return, acaba y devuelve undefined
Documentación:
n https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Funciones
25
© Juan Quemada, DIT, UPM
Función: definición e invocación
function comer(persona, comida) {
return (persona + " come " + comida);
};
comer("José", "paella"); => "José come paella"
comer("Victor", "pan"); => "Victor come pan"
Definición
de la función
Invocación
o ejecución
de la función
Nombre de
la función
Bloque de
código delimitado
por llaves: {....}
Parámetros
de la función
La función se puede invocar con un número variable de parámetros
n Un parámetro definido, pero no pasado en la invocación, toma el valor
undefined
w Un parámetro pasado en la invocación, pero no utilizado, no tiene utilidad
26
Parámetros de una función
function comer(persona, comida) {
return (persona + " come " + comida);
};
comer('José', 'paella'); => 'José come paella'
comer('José', 'paella', 'carne'); => 'José come paella'
comer('José'); => 'José come undefined'
© Juan Quemada, DIT, UPM
Los parámetros de la función están accesibles también a través del
n array de argumentos: arguments[....]
w Cada parámetro es un elemento del array
En: comer('José', 'paella')
n arguments[0] => 'José'
n arguments[1] => 'paella'
El array de argumentos de funciones
27
© Juan Quemada, DIT, UPM
function comer() {
return (arguments[0] + " come " + arguments[1]);
};
comer('José', 'paella'); => 'José come paella'
comer('José', 'paella', 'carne'); => 'José come paella'
comer('José'); => 'José come undefined'
Las funciones son objetos de pleno derecho
n pueden asignarse a variables, a propiedades, pasarse como parámetros, ….
Literal de función: function (..){..}
n Función sin nombre, que suele asignarse a una variable, que es la que le da nombre
w Se puede invocar a través del nombre de la variable
el operador (...) invoca una función ejecutando su código
n Este operador solo es aplicable a funciones (objetos de la clase Function), sino da error
w El operador puede incluir parámetros separados por coma, accesibles en el código de la función
28
Funciones como objetos
var comer = function(persona, comida) {
return (persona + " come " + comida);
};
comer('José','paella'); => 'José come paella'
© Juan Quemada, DIT, UPM
JavaScript:
Objetos, propiedades, métodos y DOM
29
© Juan Quemada, DIT, UPM
Los elementos HTML se visualizan en el navegador en cajas asociadas
n Los objetos DOM de JavaScript permiten inspeccionar y modificar los elementos HTML
w El atributo id=“…” es distinto en cada elemento y puede utilizarse para identificar los elementos HTML desde JavaScript
document.getElementById("fecha")
n devuelve el objeto DOM del elemento HTML con atributo id="fecha"
w El objeto DOM obtenido así permite modificar el elemento HTML visualizado e interaccionar con el usuario
Elementos HTML y objetos DOM
30© Juan Quemada, DIT, UPM
Objeto DOM <h2 id="titulo">….</div>
accesible desde JavaScript con:
document.getElementById("titulo")
Objeto DOM <div id="fecha">….</div>
accesible desde JavaScript con:
document.getElementById("fecha")
Objeto DOM <body id="cuerpo">….</div>
accesible desde JavaScript con:
document.getElementById("cuerpo")
Objetos JavaScript:
métodos y propiedades
31
Los objetos son colecciones de variables (propiedades) y funciones (métodos)
n agrupadas en un elemento estructurado que llamamos objecto
w Doc: https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos
Nombres de propiedades y métodos
n tienen la misma sintaxis que las variables: a, _method, $1, …
Propiedad: variable de un objeto
n Se acceden con el operador ".": objeto.propiedad
Método: función "especial" asociada a un objeto
n invocada con el operador ".": objeto.metodo(parametros)
w Un método devuelve un valor de retorno igual que una función
n El método tiene acceso al objeto y puede inspeccionar o modificar sus componentes
pn
mk
v1
p1
vn..
..fk
m1
f1
© Juan Quemada, DIT, UPM
Ejemplos de objetos DOM
32
Objetos DOM:
n dan acceso a los elementos HTML de una página Web, por ejemplo
document
n Objeto DOM que da acceso a la página Web cargada en el navegador
w Es un objeto visible en todo programa JavaScript cuando este se ejecuta en el navegador
getElementById(…….)
n Es un método que se puede invocar sobre document (pertenece a document)
document.getElementById("fecha")
n getElementById("fecha") devuelve el objeto DOM del elemento HTML con id="fecha"
w cuando se invoca sobre el objeto document
document.getElementById("fecha").innerHTML
n Es la propiedad innerHTML del objeto DOM asociado al elemento HTML con id="fecha"
var cl = document.getElementById("fecha")
n Asigna a la variable cl un objeto DOM
w cl.innerHTML es la propiedad innerHTML del objeto contenido en cl
pn
mk
v1
p1
vn..
..fk
m1
f1
© Juan Quemada, DIT, UPM
Ejemplo fecha y hora: innerHTML
33© Juan Quemada, DIT, UPM
La propiedad innerHTML de un objeto DOM contiene el HTML interno (delimitado entre marcas)
n La propiedad outerHTML contiene todo el HTML del elemento incluyendo las marcas
w Modificando el contenido de innerHTML o outerHTML modificamos desde javaScript la página visualizada en el navegador
La sentencia de asignación document.getElementById("fecha").innerHTML = new Date();
n muestra en el navegador la fecha y la hora en la caja del bloque <div> genérico identificado por "fecha"
<div id="fecha"></div> define un bloque HTML sin contenido
n la propiedad innerHTML de su objeto DOM contiene inicialmente: ""
n la propiedad outerHTML de su objeto DOM contiene inicialmente: "<div id="fecha"></div>"
El navegador no muestra nada al visualizar la página, pero el script inserta la hora y la fecha
Ejemplo fecha y hora: innerHTML
Bloque <div> vacío
no visualiza nada
34© Juan Quemada, DIT, UPM
<div id="fecha"></div>
define un bloque HTML genérico
y vacío, identificado por "fecha".
document.getElementById("fecha").innerHTML
= new Date()
muestra la fecha y la hora en el bloque <div> vacío
Fecha y hora equivalente
35© Juan Quemada, DIT, UPM
El script JavaScript mostrado aquí es totalmente equivalente al anterior
n pero es la forma habitual de hacerlo, porque es más conciso, más legible e incluso más eficiente
La sentencia de asignación document.getElementById("fecha").innerHTML = new Date();
n Se descompone aquí en dos sentencias (equivalentes a lo anterior)
w La primera carga el objeto DOM en una variable y la segunda modifica su propiedad innerHTML
Fecha y hora equivalente
36© Juan Quemada, DIT, UPM
La referencia document.getElementById(“fecha")
a objetos DOM es larga por lo que es muy habitual
almacenar primero el objeto DOM en una variable, para
acceder luego a sus propiedades, como hacemos aquí
var cl = document.getElementById("fecha");
cl.innerHTML = new date();
el programa es totalmente equivalente pero más
conciso, más legible e incluso más eficiente.
Varios scripts
37
© Juan Quemada, DIT, UPM
Varios scripts en una página forman
un único programa JavaScript
n Las definiciones (variables, funciones,
…) son visibles entre scripts
Los scripts se ejecutan siguiendo el
orden de definición en la página
n Instrucciones adicionales ejecutadas
en la consola del navegador, se
ejecutan después del último script
Este ejemplo también es equivalente
a los anteriores
n Define la función que inserta fecha y
hora en un script en la cabecera y la
invoca en el script del final
w La invocación debe realizarse al final, para
que el árbol DOM esté ya construido y el
elemento DOM se haya construido ya
Varios scripts
38
© Juan Quemada, DIT, UPM
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 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”
n Doc: https://developer.mozilla.org/en/docs/Web/API/Document
Funciones de selección de elementos DOM
39
© Juan Quemada, DIT, UPM
1: File > Load
40
© Juan Quemada, DIT, UPM
horizontal o vertical
La consola del navegador (Chrome) puede
ejecutar sentencias JavaScript en modo
interactivo, igual que node en modo interactivo.
horizontal o vertical
La ejecución de la sentencia JavaScript
document.getElementById("fecha").innerHTML="Hola pepsicola”
se realiza después de ejecutar el último script.
Es parte del mismo programa y puede acceder
a sus, variables, funciones y elementos HTML.
Aquí visualizamos el nuevo HTML
modificado con JavaScript.
Paso 1: Abrir la consola JavaScript
Paso 2: Ejecutar sentencias
JavaScript en consola
Final del tema
41
© Juan Quemada, DIT, UPM

Más contenido relacionado

La actualidad más candente

Sistema de archivos
Sistema de archivosSistema de archivos
Sistema de archivosMarvin Perez
 
Ejercicios Modelo Entidad Relación
Ejercicios Modelo Entidad RelaciónEjercicios Modelo Entidad Relación
Ejercicios Modelo Entidad Relaciónfloralicromero1
 
6 consultas
6 consultas6 consultas
6 consultasVirteco
 
Unidad 4 a HERENCIA, CLASES ABSTRACTAS, INTERFACES Y POLIMORFISMO . UML
Unidad 4 a HERENCIA, CLASES ABSTRACTAS, INTERFACES Y POLIMORFISMO . UMLUnidad 4 a HERENCIA, CLASES ABSTRACTAS, INTERFACES Y POLIMORFISMO . UML
Unidad 4 a HERENCIA, CLASES ABSTRACTAS, INTERFACES Y POLIMORFISMO . UMLCindy Adriana Bohórquez Santana
 
Modelo relacional y reglas de integridad
Modelo relacional y reglas de integridadModelo relacional y reglas de integridad
Modelo relacional y reglas de integridadkamui002
 
Programación orientada a objetos (POO) [JAVA]
Programación orientada a objetos (POO) [JAVA]Programación orientada a objetos (POO) [JAVA]
Programación orientada a objetos (POO) [JAVA]Hack '
 
Introduccion a la programacion
Introduccion a la programacionIntroduccion a la programacion
Introduccion a la programaciondianithacipriano
 
Conceptualización de tecnología orientada a objetos
Conceptualización de tecnología orientada a objetosConceptualización de tecnología orientada a objetos
Conceptualización de tecnología orientada a objetosJose Luis Garduño Torres
 
Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...
Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...
Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...Ianpierr Miranda
 

La actualidad más candente (20)

Sistema de archivos
Sistema de archivosSistema de archivos
Sistema de archivos
 
modelo er
modelo ermodelo er
modelo er
 
Ejercicios Modelo Entidad Relación
Ejercicios Modelo Entidad RelaciónEjercicios Modelo Entidad Relación
Ejercicios Modelo Entidad Relación
 
6 consultas
6 consultas6 consultas
6 consultas
 
Unidad 4 a HERENCIA, CLASES ABSTRACTAS, INTERFACES Y POLIMORFISMO . UML
Unidad 4 a HERENCIA, CLASES ABSTRACTAS, INTERFACES Y POLIMORFISMO . UMLUnidad 4 a HERENCIA, CLASES ABSTRACTAS, INTERFACES Y POLIMORFISMO . UML
Unidad 4 a HERENCIA, CLASES ABSTRACTAS, INTERFACES Y POLIMORFISMO . UML
 
Paradigmas de programación
Paradigmas de programaciónParadigmas de programación
Paradigmas de programación
 
Modelo relacional y reglas de integridad
Modelo relacional y reglas de integridadModelo relacional y reglas de integridad
Modelo relacional y reglas de integridad
 
Presentación CSS
Presentación CSSPresentación CSS
Presentación CSS
 
Arreglos unidimensionales
Arreglos unidimensionalesArreglos unidimensionales
Arreglos unidimensionales
 
Algoritmos
AlgoritmosAlgoritmos
Algoritmos
 
Dominios de internet
Dominios de internetDominios de internet
Dominios de internet
 
Ejercicios resueltos de entidad relacion
Ejercicios resueltos de entidad relacionEjercicios resueltos de entidad relacion
Ejercicios resueltos de entidad relacion
 
Programación orientada a objetos (POO) [JAVA]
Programación orientada a objetos (POO) [JAVA]Programación orientada a objetos (POO) [JAVA]
Programación orientada a objetos (POO) [JAVA]
 
Introduccion a la programacion
Introduccion a la programacionIntroduccion a la programacion
Introduccion a la programacion
 
Ejercicio 11
Ejercicio 11Ejercicio 11
Ejercicio 11
 
Conceptualización de tecnología orientada a objetos
Conceptualización de tecnología orientada a objetosConceptualización de tecnología orientada a objetos
Conceptualización de tecnología orientada a objetos
 
Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...
Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...
Proyecto de Aplicación-Implementación de una INTRANET = Colegio Sagrado Coraz...
 
Arreglos unidimensionales
Arreglos unidimensionalesArreglos unidimensionales
Arreglos unidimensionales
 
Javascript
JavascriptJavascript
Javascript
 
Modelo relacional
Modelo relacionalModelo relacional
Modelo relacional
 

Destacado

Javascript - Módulo 4: Booleano, if/else, string, número, DOM, eventos e inte...
Javascript - Módulo 4: Booleano, if/else, string, número, DOM, eventos e inte...Javascript - Módulo 4: Booleano, if/else, string, número, DOM, eventos e inte...
Javascript - Módulo 4: Booleano, if/else, string, número, DOM, eventos e inte...David Zapateria Besteiro
 
Javascript Módulo 5 - Bucles, Arrays. Funciones como objectos. Ámbitos. Cierr...
Javascript Módulo 5 - Bucles, Arrays. Funciones como objectos. Ámbitos. Cierr...Javascript Módulo 5 - Bucles, Arrays. Funciones como objectos. Ámbitos. Cierr...
Javascript Módulo 5 - Bucles, Arrays. Funciones como objectos. Ámbitos. Cierr...David Zapateria Besteiro
 
Javascript Módulo 7 - PROFUNDIZACIÓN EN ARRAYS, OBJETOS, PROPIEDADES, MÉTODOS...
Javascript Módulo 7 - PROFUNDIZACIÓN EN ARRAYS, OBJETOS, PROPIEDADES, MÉTODOS...Javascript Módulo 7 - PROFUNDIZACIÓN EN ARRAYS, OBJETOS, PROPIEDADES, MÉTODOS...
Javascript Módulo 7 - PROFUNDIZACIÓN EN ARRAYS, OBJETOS, PROPIEDADES, MÉTODOS...David Zapateria Besteiro
 
Javascript - Módulo 9: Geolocalización en HTML5, Google maps, y SVG
Javascript - Módulo 9: Geolocalización en HTML5, Google maps, y SVGJavascript - Módulo 9: Geolocalización en HTML5, Google maps, y SVG
Javascript - Módulo 9: Geolocalización en HTML5, Google maps, y SVGDavid Zapateria Besteiro
 
Javascript - Módulo 8: LocalStorage, iFrames, Origin policy y JSON
Javascript - Módulo 8: LocalStorage, iFrames, Origin policy y JSONJavascript - Módulo 8: LocalStorage, iFrames, Origin policy y JSON
Javascript - Módulo 8: LocalStorage, iFrames, Origin policy y JSONDavid Zapateria Besteiro
 
Aprende JavaScript
Aprende JavaScriptAprende JavaScript
Aprende JavaScriptAlf Chee
 
Programación Funcional en JavaScript
Programación Funcional en JavaScriptProgramación Funcional en JavaScript
Programación Funcional en JavaScriptJavier Vélez Reyes
 
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?Micael Gallego
 
Dirigiendo y gestionando proyectos Big Data
Dirigiendo y gestionando proyectos Big DataDirigiendo y gestionando proyectos Big Data
Dirigiendo y gestionando proyectos Big DataEmilio del Prado
 
Evaluar el desempeño de los aprendices durante el proceso de formación tenien...
Evaluar el desempeño de los aprendices durante el proceso de formación tenien...Evaluar el desempeño de los aprendices durante el proceso de formación tenien...
Evaluar el desempeño de los aprendices durante el proceso de formación tenien...Paola Andrea Velandia R
 
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAX
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAXJavascript: Particularidades del Lenguaje, DOM, Eventos y AJAX
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAXIrontec
 
Javascript para principiantes -Introducción
Javascript para principiantes -IntroducciónJavascript para principiantes -Introducción
Javascript para principiantes -IntroducciónOscar Josué Uh Pérez
 
Introducción al Diseño web
Introducción al Diseño webIntroducción al Diseño web
Introducción al Diseño webciwmx
 
ИКС - комплексное решение сетевой безопасности
ИКС - комплексное решение сетевой безопасностиИКС - комплексное решение сетевой безопасности
ИКС - комплексное решение сетевой безопасностиDiamantigor Igor.Suharev
 
Poland your place to invest 2017
Poland your place to invest 2017Poland your place to invest 2017
Poland your place to invest 2017CEO Magazyn Polska
 
7.9.1 Руководство по монтажу Altivar 1200
7.9.1 Руководство по монтажу Altivar 12007.9.1 Руководство по монтажу Altivar 1200
7.9.1 Руководство по монтажу Altivar 1200Igor Golovin
 

Destacado (20)

Javascript - Módulo 4: Booleano, if/else, string, número, DOM, eventos e inte...
Javascript - Módulo 4: Booleano, if/else, string, número, DOM, eventos e inte...Javascript - Módulo 4: Booleano, if/else, string, número, DOM, eventos e inte...
Javascript - Módulo 4: Booleano, if/else, string, número, DOM, eventos e inte...
 
Javascript Módulo 5 - Bucles, Arrays. Funciones como objectos. Ámbitos. Cierr...
Javascript Módulo 5 - Bucles, Arrays. Funciones como objectos. Ámbitos. Cierr...Javascript Módulo 5 - Bucles, Arrays. Funciones como objectos. Ámbitos. Cierr...
Javascript Módulo 5 - Bucles, Arrays. Funciones como objectos. Ámbitos. Cierr...
 
Javascript Módulo 7 - PROFUNDIZACIÓN EN ARRAYS, OBJETOS, PROPIEDADES, MÉTODOS...
Javascript Módulo 7 - PROFUNDIZACIÓN EN ARRAYS, OBJETOS, PROPIEDADES, MÉTODOS...Javascript Módulo 7 - PROFUNDIZACIÓN EN ARRAYS, OBJETOS, PROPIEDADES, MÉTODOS...
Javascript Módulo 7 - PROFUNDIZACIÓN EN ARRAYS, OBJETOS, PROPIEDADES, MÉTODOS...
 
Javascript - Módulo 9: Geolocalización en HTML5, Google maps, y SVG
Javascript - Módulo 9: Geolocalización en HTML5, Google maps, y SVGJavascript - Módulo 9: Geolocalización en HTML5, Google maps, y SVG
Javascript - Módulo 9: Geolocalización en HTML5, Google maps, y SVG
 
Javascript - Módulo 8: LocalStorage, iFrames, Origin policy y JSON
Javascript - Módulo 8: LocalStorage, iFrames, Origin policy y JSONJavascript - Módulo 8: LocalStorage, iFrames, Origin policy y JSON
Javascript - Módulo 8: LocalStorage, iFrames, Origin policy y JSON
 
Aprende JavaScript
Aprende JavaScriptAprende JavaScript
Aprende JavaScript
 
Programación Funcional en JavaScript
Programación Funcional en JavaScriptProgramación Funcional en JavaScript
Programación Funcional en JavaScript
 
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
 
JavaScript desde Cero
JavaScript desde CeroJavaScript desde Cero
JavaScript desde Cero
 
Dirigiendo y gestionando proyectos Big Data
Dirigiendo y gestionando proyectos Big DataDirigiendo y gestionando proyectos Big Data
Dirigiendo y gestionando proyectos Big Data
 
Evaluar el desempeño de los aprendices durante el proceso de formación tenien...
Evaluar el desempeño de los aprendices durante el proceso de formación tenien...Evaluar el desempeño de los aprendices durante el proceso de formación tenien...
Evaluar el desempeño de los aprendices durante el proceso de formación tenien...
 
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAX
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAXJavascript: Particularidades del Lenguaje, DOM, Eventos y AJAX
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAX
 
Javascript para principiantes -Introducción
Javascript para principiantes -IntroducciónJavascript para principiantes -Introducción
Javascript para principiantes -Introducción
 
Metaprogramación en JavaScript
Metaprogramación en JavaScriptMetaprogramación en JavaScript
Metaprogramación en JavaScript
 
Potência 8º
Potência   8ºPotência   8º
Potência 8º
 
JavaScript Avanzado
JavaScript AvanzadoJavaScript Avanzado
JavaScript Avanzado
 
Introducción al Diseño web
Introducción al Diseño webIntroducción al Diseño web
Introducción al Diseño web
 
ИКС - комплексное решение сетевой безопасности
ИКС - комплексное решение сетевой безопасностиИКС - комплексное решение сетевой безопасности
ИКС - комплексное решение сетевой безопасности
 
Poland your place to invest 2017
Poland your place to invest 2017Poland your place to invest 2017
Poland your place to invest 2017
 
7.9.1 Руководство по монтажу Altivar 1200
7.9.1 Руководство по монтажу Altivar 12007.9.1 Руководство по монтажу Altivar 1200
7.9.1 Руководство по монтажу Altivar 1200
 

Similar a Javascript Módulo 5 - javascript sentencia, expresión, variable, función - Univ. Carlos III

Similar a Javascript Módulo 5 - javascript sentencia, expresión, variable, función - Univ. Carlos III (20)

Diapo04
Diapo04Diapo04
Diapo04
 
Java script(diapositivas)
Java script(diapositivas) Java script(diapositivas)
Java script(diapositivas)
 
Javascript
JavascriptJavascript
Javascript
 
Presentación JavaScript
Presentación JavaScriptPresentación JavaScript
Presentación JavaScript
 
Fundamentos de programación en scilab
Fundamentos de programación en scilabFundamentos de programación en scilab
Fundamentos de programación en scilab
 
Lección No. 1 de Python
Lección No. 1 de PythonLección No. 1 de Python
Lección No. 1 de Python
 
Javascript
JavascriptJavascript
Javascript
 
OOP - Lab 1 - Variables y Asignacion.pdf
OOP - Lab 1 - Variables y Asignacion.pdfOOP - Lab 1 - Variables y Asignacion.pdf
OOP - Lab 1 - Variables y Asignacion.pdf
 
Conceptos-HTML-y-JavaScript-Bloque-3-JavaScript.pptx
Conceptos-HTML-y-JavaScript-Bloque-3-JavaScript.pptxConceptos-HTML-y-JavaScript-Bloque-3-JavaScript.pptx
Conceptos-HTML-y-JavaScript-Bloque-3-JavaScript.pptx
 
Proyectos Web 3 Introduccion Php
Proyectos Web   3 Introduccion PhpProyectos Web   3 Introduccion Php
Proyectos Web 3 Introduccion Php
 
Guía JavaScript
Guía JavaScriptGuía JavaScript
Guía JavaScript
 
Clase lenguaje c
Clase lenguaje c Clase lenguaje c
Clase lenguaje c
 
Clase lenguaje c xxxxxx
Clase lenguaje c xxxxxxClase lenguaje c xxxxxx
Clase lenguaje c xxxxxx
 
Clase lenguaje c xxxxxx
Clase lenguaje c xxxxxxClase lenguaje c xxxxxx
Clase lenguaje c xxxxxx
 
Estructura sintactica de los lenguajes de programacion
Estructura sintactica de los lenguajes de programacionEstructura sintactica de los lenguajes de programacion
Estructura sintactica de los lenguajes de programacion
 
Php
PhpPhp
Php
 
Introducción a Python
Introducción a PythonIntroducción a Python
Introducción a Python
 
4 variables, arreglos, estructuras y enum
4 variables, arreglos, estructuras y enum4 variables, arreglos, estructuras y enum
4 variables, arreglos, estructuras y enum
 
Fundamentos De Algoritmia
Fundamentos De AlgoritmiaFundamentos De Algoritmia
Fundamentos De Algoritmia
 
Taller completo
Taller completoTaller completo
Taller completo
 

Último

Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfRedes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfsoporteupcology
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdfIsabellaMontaomurill
 
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE  DE TECNOLOGIA E INFORMATICA PRIMARIACLASE  DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIAWilbisVega
 
La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafiosFundación YOD YOD
 
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíassuserf18419
 
Hernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptxHernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptxJOSEMANUELHERNANDEZH11
 
Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024GiovanniJavierHidalg
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfSergioMendoza354770
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricKeyla Dolores Méndez
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan JosephBRAYANJOSEPHPEREZGOM
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx241521559
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)GDGSucre
 
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 TestcontainersSalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 TestcontainersIván López Martín
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveFagnerLisboa3
 
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...silviayucra2
 
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesKELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesFundación YOD YOD
 
Plan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxPlan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxpabonheidy28
 
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...AlanCedillo9
 
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...FacuMeza2
 

Último (19)

Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfRedes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdf
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdf
 
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE  DE TECNOLOGIA E INFORMATICA PRIMARIACLASE  DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
 
La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafios
 
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnología
 
Hernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptxHernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptx
 
Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Joseph
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)
 
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 TestcontainersSalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
 
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
 
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesKELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento Protégeles
 
Plan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxPlan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docx
 
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...
Instrumentación Hoy_ INTERPRETAR EL DIAGRAMA UNIFILAR GENERAL DE UNA PLANTA I...
 
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
 

Javascript Módulo 5 - javascript sentencia, expresión, variable, función - Univ. Carlos III

  • 2. JavaScript Lenguaje de programación diseñado en 1995 por Brendan Eich n Para animar páginas Web en el Navegador Netscape w Hoy se ha convertido en el lenguaje del Web y de Internet n Guía: https://developer.mozilla.org/es/docs/Web/JavaScript/Guide JavaScript: sigue la norma ECMA-262 (European Computer Manufacturers Assoc.) n “Seguida” por todos los navegadores: Chrome, Explorer, Firefox, Safari, .. n https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript ECMA-262 ha evolucionado mucho, siempre con "compatibilidad hacia atrás” n ES3 - ECMAScript 3 (Dec. 1999): navegadores antiguos w Primera versión ampliamente aceptada, compromiso entre Netscape y Microsoft n ES5 - ECMAScript 5.1 (Jun. 2011): navegadores actuales w Desarrollado junto con plataforma HTML5 (HTML, CSS y JavaScript) de WHATWG (https://whatwg.org) n ES6 - ECMAScript 6 (Jun. 2015): en vías de introducción en navegadores w Introduce muchas mejoras, ver http://es6-features.org/ Este curso se centra en la partes buenas (Good parts) de ES3 y ES5 n Siguiendo el libro: JavaScript: The Good Parts, Douglas Crockford, 2008 2 © Juan Quemada, DIT, UPM
  • 3. Expresiones numéricas y operadores JavaScript incluye operadores n Los operadores permiten formar expresiones w componiendo valores con dichos operadores n Una expresión representa un valor, que es el resultado de evaluarla Ejemplo: operadores aritméticos +, -, *, / formando expresiones numéricas n Las expresiones se evalúan (=>) a los valores resultantes w Expresiones mal construidas dan error o llevan el interprete a un estado inconsistente 3 © Juan Quemada, DIT, UPM 13 + 7 => 20 // Suma de números 13 - 1.5 => 11.5 // Resta de números // OJO! la coma española es un punto en la sintaxis inglesa (8*2 - 4)/3 => 4 // Expresión con paréntesis 8 / * 3 => ?? // Expresión incorrecta 8 3 => ?? // Expresión incorrecta
  • 4. 4 © Juan Quemada, DIT, UPM La consola de un navegador (Chrome) puede ejecutar sentencias o expresiones JavaScript en modo interactivo. El interprete analiza y ejecuta el texto introducido al teclear nueva línea (Enter). Si tecleamos una expresión la evalúa y calcula el resultado. Despliega la consola 1) Abrir consola JavaScript de chrome 2) Ejecutar sentencias en consola de chrome expresión introducida resultado introducir nueva expresión o sentencia aquí. Expresión sintacticamente incorrecta da error borrar consola quitar mensajes de error
  • 5. Texto: strings El texto escrito se representa en JavaScript con strings n Un string delimita el texto con comillas o apóstrofes, por ej. w Frases: "hola, que tal" o 'hola, que tal' w String vacío: "" o '' Ejemplo de "texto 'entrecomillado' " n comillas y apóstrofes se pueden anidar w 'entrecomillado' forma parte del texto Operador + concatena strings, por ejemplo n "Hola" + " " + "Pepe" => "Hola Pepe” La propiedad length de un string indica su longitud (Número de caracteres) n "Pepe".length => 4 n “Hola Pepe".length => 9 5 © Juan Quemada, DIT, UPM
  • 6. 6 © Juan Quemada, DIT, UPM expresión introducida resultado La consola analiza y ejecuta el texto introducido al teclear nueva línea (Enter). Si tecleamos una expresión de strings, esta se evalúa, presentando el string resultante. Los strings "Eva" y 'Eva' son literales de string equivalentes, que representan el mismo string o texto. El string " " o ' ' representa el carácter espacio (space) o blanco (blank), que separa palabras en un texto. El operador + aplicado a strings los concatena o une, generando un nuevo string con la unión de los dos. Es asociativo y permite concatenar más de 2 strings. "Eva".length devuelve la longitud del string (número de caracteres). Length es una "propiedad” del string.
  • 7. Los operadores sobrecargados tienen varias semánticas n dependiendo del contexto en que se usan en una expresión Por ejemplo, el operador + tiene 3 semánticas diferentes n Suma de enteros (operador binario) n Signo de un número (operador unitario) n Concatenación de strings (operador binario) Sobrecarga de operadores 13 + 7 => 20 // Suma de números +13 => 13 // Signo de un número "Hola " + "Pepe" => "Hola Pepe" // Concatenación de strings 7 © Juan Quemada, DIT, UPM
  • 8. JavaScript realiza conversión automática de tipos n cuando hay ambigüedad en una expresión w utiliza las reglas de prioridad para resolverla La expresión "13" + 7 es ambigua n porque combina un string con un number w Con ambigüedad JavaScript da prioridad al operador + de strings, convirtiendo 7 a string La expresión +"13" también necesita conversión automática de tipos n El operador + solo esta definido para number (no hay ambigüedad) w JavaScript debe convertir el string "13" a number antes de aplicar operador + Conversión de tipos en expresiones 8 © Juan Quemada, DIT, UPM Consola JavaScript
  • 9. . [] Acceso a propiedad o invocar método; índice a array new Crear objeto con constructor de clase () Invocación de función/método o evaluar expresión ++ -- Pre o post auto-incremento; pre o post auto-decremento ! ~ Negación lógica (NOT); complemento de bits + - Operador unitario, números. signo positivo; signo negativo delete Borrar propiedad de un objeto typeof void Devolver tipo; valor indefinido * / % Números. Multiplicación; división; modulo (o resto) + + - Concatenación de strings; Números. 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 & Operación y (AND) de bits ^ Operación ó exclusivo (XOR) de bits | Operación ó (OR) de bits && Operación lógica y (AND) || Operación lógica o (OR) ?: Asignación condicional = Asignación de valor OP= Asig. con operación: += -= *= /= %= <<= >>= >>>= &= ^= |= , Evaluación múltiple Operadores ES3, ES59 © Juan Quemada, DIT, UPM 8*2 - 4 => 12 * tiene más prioridad que -, pero (..) obliga a evaluar antes - en: 8*(2 - 4) => -16 La prioridad de los operadores es descendente y de izquierda a derecha. (Mayor si más arriba o más a izq.) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
  • 10. . [] Acceso a propiedad o invocar método; índice a array new Crear objeto con constructor de clase () Invocación de función/método o evaluar expresión ++ -- Pre o post auto-incremento; pre o post auto-decremento ! ~ Negación lógica (NOT); complemento de bits + - Operador unitario, números. signo positivo; signo negativo delete Borrar propiedad de un objeto typeof void Devolver tipo; valor indefinido * / % Números. Multiplicación; división; modulo (o resto) + + - Concatenación de strings; Números. 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 & Operación y (AND) de bits ^ Operación ó exclusivo (XOR) de bits | Operación ó (OR) de bits && Operación lógica y (AND) || Operación lógica o (OR) ?: Asignación condicional = Asignación de valor OP= Asig. con operación: += -= *= /= %= <<= >>= >>>= &= ^= |= , Evaluación múltiple 10 © Juan Quemada, DIT, UPM +"3" + 7 => 10 + unitario (signo) tiene mas prioridad que + binario (suma) y se evalúa antes La prioridad de los operadores es descendente y de izquierda a derecha. (Mayor si más arriba o más a izq.) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence Operadores ES3, ES5
  • 11. JavaScript: Programas, sentencias y variables 11 © Juan Quemada, DIT, UPM
  • 12. Un programa es una secuencia de sentencias n que se ejecutan en el orden en que han sido definidas (con excepciones) Las sentencias realizan tareas al ejecutarse en un ordenador n Cada sentencia debe acabarse con punto y coma: ";” Los comentarios solo tienen valor informativo n para ayudar a entender como funciona el programa Programa, sentencias y comentarios 12 © Juan Quemada, DIT, UPM /* Ejemplo de programa JavaScript */ var x = 7; // Definición de variable // visualizar x en el navegador document.write(x); Sentencia 1: define la variable x con valor 7. Sentencia 2: visualiza x en el navegador Comentario multi- línea: delimitado con /* …. */ Comentario de una línea: empieza con // y acaba al final de la línea
  • 13. Script: programa JavaScript encapsulado entre marcas <script> n Se ejecuta al cargar en el navegador la página Web que lo contiene w JavaScript es un lenguaje interpretado que ejecuta las instrucciones a medida que las va leyendo n document.write(<expresión>) convierte <expresión> a string y lo visualiza en el navegador w El string se interpreta como HTML y se visualiza en el lugar de la página donde esta el script JavaScript Una variable guarda valores para uso posterior n Una variable representa el valor que contiene w Puede utilizarse en expresiones como cualquier otro valor 13 Script JavaScript con variables Define la variable euro con valor 10 Visualizan en el navegador el resultado de evaluar las expresiones Separación de línea HTML © Juan Quemada, DIT, UPM
  • 14. Definición de variables y estado del programa Las variables se crean con la sentencia de definición de variables n La sentencia comienza con la palabra reservada var w A continuación vienen una o más definiciones de variables separadas por comas n Cada definición de variable comienza con el nombre de la variable w A la variable se le puede asignar un valor usando el operador de asignación: = undefined: valor (y tipo) especial de JavaScript que significa indefinido n Las variables sin ningún valor asignado contienen el valor undefined Estado de un programa: n Conjunto de todas las variables creadas por el programa w junto con sus correspondientes valores 14 © Juan Quemada, DIT, UPM var x = 5; // Define la variable x con el valor 5 var y; // Define la variable y sin asignar ningún valor var z = 1,∫ t = "Hola"; // Define las variables z y t con // con los valores 1 y "Hola" respectivamente 5 x "Hola" t undefined y 1 z
  • 15. El nombre (o identificador) de una variable debe comenzar por: n letra, _ o $ w El nombre pueden contener además números n Nombres bien construidos: x, ya_vás, $A1, $, _43dias n Nombres mal construidos: 1A, 123, %3, v=7, a?b, .. w Nombre incorrecto: da error_de_sintaxis e interrumpe el programa Un nombre de variable no debe ser una palabra reservada de JavaScript n por ejemplo: var, function, return, if, else, while, for, in, new, typeof, …. Las variables son sensibles a mayúsculas n mi_var y Mi_var son variables distintas Sintaxis de los nombres de variables 15 © Juan Quemada, DIT, UPM
  • 16. Asignación de variables y estado del programa Una variable es un contenedor de valores, cuyo contenido puede variar n La sentencia de asignación de variables asigna un nuevo valor con el operador: = Las variables de JavaScript son no tipadas n Esto significa que se puede asignar cualquier tipo de valor w Una variable puede contener un número, un string, undefined, .. Se denomina punto de ejecución del programa n al estado en que queda el programa después de ejecutar una instrucción w el estado de un programa varia en función del punto de ejecución 16 © Juan Quemada, DIT, UPM var x = 5; // Crea la variable x y le asigna 5 x = "Hola"; // Asigna a x el string (texto) "hola" x = undefined; // Asigna a x undefined (valor indefinido) x = new Date(); // objeto Date: fecha/hora del reloj del 5 x "Hola" x undefined x Mon Sep 02 2013 09:16:47 GMT+0200 x Evolución del estado en función del punto de ejecución del programa
  • 17. Se recomienda delimitar las sentencias siempre con: ; n La sintaxis de JS permite introducir caracteres adicionales (blanco, nueva linea, ..) para facilitar la legibilidad del programa JavaScript permite omitir ; si la sentencia acaba con nueva linea n Esto puede dar problemas y no debe hacerse nunca Cada sentencia debe ocupar una línea por legibilidad, salvo algunas excepciones n Las sentencias con bloques de código: if/else, while, for, definición de funciones, ….. n sentencias que contienen expresiones muy largas 17 © Juan Quemada, DIT, UPM Recomendaciones sobre sintaxis // Ejemplos de delimitación de // sentencias que no son // recomendables var x; var y = "Pepe" x = "Hola" undefined x "Hola" x "Pepe" y
  • 19. Una variable representa el valor que contiene n Puede ser usada en expresiones como cualquier otro valor Una variable puede utilizarse en la expresión que se asigna a ella misma n La parte derecha usa el valor anterior a la ejecución de la sentencia w y = y - 2 asigna a y el valor 6 (8-2), porque y tiene el valor 8 antes de ejecutarse Usar una variable no definida en una expresión n provoca un error y la ejecución del programa se interrumpe 19 © Juan Quemada, DIT, UPM var x = 3; var y = 5 + x; y = y - 2; x = y + z; 3 x Error 8 y 3 x 6 y 3 x Evolución del estado en función del punto de ejecución del programa El error se produce porque la variable z no ha sido definida. Expresiones con variables
  • 20. JavaScript posee los operadores ++ y -- de auto-incremento o decremento n ++ suma 1 y -- resta 1 a la variable a la que se aplica w ++ y -- se pueden aplicar por la derecha o por la izquierda a las variables de una expresión n Si ++/-- se aplica por la izquierda a la variable (pre), el incremento/decremento se realiza antes de evaluar la expresión n Si ++/-- se aplica por la derecha (post) se incrementa/decrementa después de evaluarla n Ojo! Usar con cuidado porque tiene efectos laterales y lleva a programas crípticos. Documentación adicional n https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators 20 © Juan Quemada, DIT, UPM var x = 2; ++x var y = ++x + 2; var z = y-- + 2; 2 x 4 x 6 y 5 y 8 z Paso 1 Paso 3.1 Paso 3.2 Paso 4.1 Paso 4.2 3 x no cambia Al ser pre-incremento el orden de ejecución es: 1) Paso 3.1: ++x 2) Paso 3.2: y=x+2 Con post-decremento el de ejecución orden es: 1) Paso 4.1: z=y+2 2) Paso 4.2: y-- 3 x Paso 2 Pre y post auto incremento o decremento
  • 21. var x = 3; // define x inicializada a 3 x += 2; // suma 2 a x x *= 3; // multiplica x por 3 x %= 4; // % operación módulo: // divide x por 4 y devuelve el resto Operadores de asignación 3 x 5 x 15 x 21 © Juan Quemada, DIT, UPM 3 x Es muy común modificar el valor de una variable n sumando, restando, .... algún valor w Por ejemplo, x = x +7; y = y - 3; z = z * 8; ……. JavaScript tiene operadores de asignación especiales para estos casos n +=, -=, *=, /=, %=, ……(y para otros operadores del lenguaje) w x += 7; será lo mismo que x = x + 7; n https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators
  • 23. function comer(persona, comida) { return (persona + " come " + comida); }; Función: bloque de código (con parámetros) asociado a un nombre n La función se invoca (o ejecuta) por el nombre y devuelve un valor como resultado w En la invocación se deben asignar valores concretos a los parámetros Las funciones permiten crear operaciones de alto nivel n Se denominan también abstracciones o encapsulaciones de código La función representa el valor resultante de su ejecución (evaluación) n El resultado de evaluar una función depende del valor de los parámetros w Puede utilizarse en expresiones como cualquier otro valor 23 © Juan Quemada, DIT, UPM Uso de funciones document.write(comer("José", "paella") + " hoy"); document.write(comer("Victor", "pan") + " hoy" ); "Jose come paella" comer("Jose", "paella") "Victor come pan" comer("Victor", "pan")
  • 24. Una función se define con la palabra reservada function seguida del nombre n A continuación se definen los parámetros entre paréntesis w Los parámetros son variables que se asignan en la invocación n Puede asignarse nuevos valores en el bloque igual que a las variables n A continuación se define el bloque de código delimitado entre llaves {} w El bloque contiene instrucciones La sentencia return <expresion> finaliza la ejecución n Devolviendo el resultado de evaluar <expresion> como valor de retorno w Si la función llega a final del bloque sin haber ejecutado un return, acaba y devuelve undefined Documentación: n https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Funciones 24 Función: definición e invocación function comer(persona, comida) { return (persona + " come " + comida); }; comer("José", "paella"); => "José come paella" comer("Victor", "pan"); => "Victor come pan" © Juan Quemada, DIT, UPM
  • 25. Una función se define con la palabra reservada function seguida del nombre n A continuación se definen los parámetros entre paréntesis w Los parámetros son variables que se asignan en la invocación n Puede asignarse nuevos valores en el bloque igual que a las variables n A continuación se define el bloque de código delimitado entre llaves {} w El bloque contiene instrucciones La sentencia return <expresion> finaliza la ejecución n Devolviendo el resultado de evaluar <expresion> como valor de retorno w Si la función llega a final del bloque sin haber ejecutado un return, acaba y devuelve undefined Documentación: n https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Funciones 25 © Juan Quemada, DIT, UPM Función: definición e invocación function comer(persona, comida) { return (persona + " come " + comida); }; comer("José", "paella"); => "José come paella" comer("Victor", "pan"); => "Victor come pan" Definición de la función Invocación o ejecución de la función Nombre de la función Bloque de código delimitado por llaves: {....} Parámetros de la función
  • 26. La función se puede invocar con un número variable de parámetros n Un parámetro definido, pero no pasado en la invocación, toma el valor undefined w Un parámetro pasado en la invocación, pero no utilizado, no tiene utilidad 26 Parámetros de una función function comer(persona, comida) { return (persona + " come " + comida); }; comer('José', 'paella'); => 'José come paella' comer('José', 'paella', 'carne'); => 'José come paella' comer('José'); => 'José come undefined' © Juan Quemada, DIT, UPM
  • 27. Los parámetros de la función están accesibles también a través del n array de argumentos: arguments[....] w Cada parámetro es un elemento del array En: comer('José', 'paella') n arguments[0] => 'José' n arguments[1] => 'paella' El array de argumentos de funciones 27 © Juan Quemada, DIT, UPM function comer() { return (arguments[0] + " come " + arguments[1]); }; comer('José', 'paella'); => 'José come paella' comer('José', 'paella', 'carne'); => 'José come paella' comer('José'); => 'José come undefined'
  • 28. Las funciones son objetos de pleno derecho n pueden asignarse a variables, a propiedades, pasarse como parámetros, …. Literal de función: function (..){..} n Función sin nombre, que suele asignarse a una variable, que es la que le da nombre w Se puede invocar a través del nombre de la variable el operador (...) invoca una función ejecutando su código n Este operador solo es aplicable a funciones (objetos de la clase Function), sino da error w El operador puede incluir parámetros separados por coma, accesibles en el código de la función 28 Funciones como objetos var comer = function(persona, comida) { return (persona + " come " + comida); }; comer('José','paella'); => 'José come paella' © Juan Quemada, DIT, UPM
  • 29. JavaScript: Objetos, propiedades, métodos y DOM 29 © Juan Quemada, DIT, UPM
  • 30. Los elementos HTML se visualizan en el navegador en cajas asociadas n Los objetos DOM de JavaScript permiten inspeccionar y modificar los elementos HTML w El atributo id=“…” es distinto en cada elemento y puede utilizarse para identificar los elementos HTML desde JavaScript document.getElementById("fecha") n devuelve el objeto DOM del elemento HTML con atributo id="fecha" w El objeto DOM obtenido así permite modificar el elemento HTML visualizado e interaccionar con el usuario Elementos HTML y objetos DOM 30© Juan Quemada, DIT, UPM Objeto DOM <h2 id="titulo">….</div> accesible desde JavaScript con: document.getElementById("titulo") Objeto DOM <div id="fecha">….</div> accesible desde JavaScript con: document.getElementById("fecha") Objeto DOM <body id="cuerpo">….</div> accesible desde JavaScript con: document.getElementById("cuerpo")
  • 31. Objetos JavaScript: métodos y propiedades 31 Los objetos son colecciones de variables (propiedades) y funciones (métodos) n agrupadas en un elemento estructurado que llamamos objecto w Doc: https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos Nombres de propiedades y métodos n tienen la misma sintaxis que las variables: a, _method, $1, … Propiedad: variable de un objeto n Se acceden con el operador ".": objeto.propiedad Método: función "especial" asociada a un objeto n invocada con el operador ".": objeto.metodo(parametros) w Un método devuelve un valor de retorno igual que una función n El método tiene acceso al objeto y puede inspeccionar o modificar sus componentes pn mk v1 p1 vn.. ..fk m1 f1 © Juan Quemada, DIT, UPM
  • 32. Ejemplos de objetos DOM 32 Objetos DOM: n dan acceso a los elementos HTML de una página Web, por ejemplo document n Objeto DOM que da acceso a la página Web cargada en el navegador w Es un objeto visible en todo programa JavaScript cuando este se ejecuta en el navegador getElementById(…….) n Es un método que se puede invocar sobre document (pertenece a document) document.getElementById("fecha") n getElementById("fecha") devuelve el objeto DOM del elemento HTML con id="fecha" w cuando se invoca sobre el objeto document document.getElementById("fecha").innerHTML n Es la propiedad innerHTML del objeto DOM asociado al elemento HTML con id="fecha" var cl = document.getElementById("fecha") n Asigna a la variable cl un objeto DOM w cl.innerHTML es la propiedad innerHTML del objeto contenido en cl pn mk v1 p1 vn.. ..fk m1 f1 © Juan Quemada, DIT, UPM
  • 33. Ejemplo fecha y hora: innerHTML 33© Juan Quemada, DIT, UPM
  • 34. La propiedad innerHTML de un objeto DOM contiene el HTML interno (delimitado entre marcas) n La propiedad outerHTML contiene todo el HTML del elemento incluyendo las marcas w Modificando el contenido de innerHTML o outerHTML modificamos desde javaScript la página visualizada en el navegador La sentencia de asignación document.getElementById("fecha").innerHTML = new Date(); n muestra en el navegador la fecha y la hora en la caja del bloque <div> genérico identificado por "fecha" <div id="fecha"></div> define un bloque HTML sin contenido n la propiedad innerHTML de su objeto DOM contiene inicialmente: "" n la propiedad outerHTML de su objeto DOM contiene inicialmente: "<div id="fecha"></div>" El navegador no muestra nada al visualizar la página, pero el script inserta la hora y la fecha Ejemplo fecha y hora: innerHTML Bloque <div> vacío no visualiza nada 34© Juan Quemada, DIT, UPM <div id="fecha"></div> define un bloque HTML genérico y vacío, identificado por "fecha". document.getElementById("fecha").innerHTML = new Date() muestra la fecha y la hora en el bloque <div> vacío
  • 35. Fecha y hora equivalente 35© Juan Quemada, DIT, UPM
  • 36. El script JavaScript mostrado aquí es totalmente equivalente al anterior n pero es la forma habitual de hacerlo, porque es más conciso, más legible e incluso más eficiente La sentencia de asignación document.getElementById("fecha").innerHTML = new Date(); n Se descompone aquí en dos sentencias (equivalentes a lo anterior) w La primera carga el objeto DOM en una variable y la segunda modifica su propiedad innerHTML Fecha y hora equivalente 36© Juan Quemada, DIT, UPM La referencia document.getElementById(“fecha") a objetos DOM es larga por lo que es muy habitual almacenar primero el objeto DOM en una variable, para acceder luego a sus propiedades, como hacemos aquí var cl = document.getElementById("fecha"); cl.innerHTML = new date(); el programa es totalmente equivalente pero más conciso, más legible e incluso más eficiente.
  • 37. Varios scripts 37 © Juan Quemada, DIT, UPM
  • 38. Varios scripts en una página forman un único programa JavaScript n Las definiciones (variables, funciones, …) son visibles entre scripts Los scripts se ejecutan siguiendo el orden de definición en la página n Instrucciones adicionales ejecutadas en la consola del navegador, se ejecutan después del último script Este ejemplo también es equivalente a los anteriores n Define la función que inserta fecha y hora en un script en la cabecera y la invoca en el script del final w La invocación debe realizarse al final, para que el árbol DOM esté ya construido y el elemento DOM se haya construido ya Varios scripts 38 © Juan Quemada, DIT, UPM
  • 39. 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 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” n Doc: https://developer.mozilla.org/en/docs/Web/API/Document Funciones de selección de elementos DOM 39 © Juan Quemada, DIT, UPM
  • 40. 1: File > Load 40 © Juan Quemada, DIT, UPM horizontal o vertical La consola del navegador (Chrome) puede ejecutar sentencias JavaScript en modo interactivo, igual que node en modo interactivo. horizontal o vertical La ejecución de la sentencia JavaScript document.getElementById("fecha").innerHTML="Hola pepsicola” se realiza después de ejecutar el último script. Es parte del mismo programa y puede acceder a sus, variables, funciones y elementos HTML. Aquí visualizamos el nuevo HTML modificado con JavaScript. Paso 1: Abrir la consola JavaScript Paso 2: Ejecutar sentencias JavaScript en consola
  • 41. Final del tema 41 © Juan Quemada, DIT, UPM