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

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

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
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
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

6
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

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
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
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
+"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

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
/* 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

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
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

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
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
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

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
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
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
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

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
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
};
comer("José", "paella"); => "José come paella"
comer("Victor", "pan"); => "Victor come 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
25
Función: definición e invocación
};
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
};
comer('José', 'paella'); => 'José come paella'
comer('José', 'paella', 'carne'); => 'José come paella'
comer('José'); => 'José come undefined'

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
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) {
};
comer('José','paella'); => 'José come paella'

JavaScript:
Objetos, propiedades, métodos y DOM
29

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>
Objeto DOM <body id="cuerpo">….</div>
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

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)
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

Ejemplo fecha y hora: innerHTML

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
<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

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
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

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

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

1: File > Load
40
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

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

Más contenido relacionado

La actualidad más candente (6)

Destacado (20)

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

Último (20)

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