JAVASCRIPT

JAVASCRIPT

 HTML5 puede ser imaginado como un edificio soportado por tres

grandes columnas:
 HTML
 CSS
 Javascript.

2
¿Qué es JavaScript?

 JavaScript es un lenguaje de programación que se utiliza

principalmente para crear páginas web dinámicas.
 Una página web dinámica es aquella que incorpora efectos como
texto que aparece y desaparece, animaciones, acciones que se
activan al pulsar botones y ventanas con mensajes de aviso al
usuario.
 Técnicamente, JavaScript es un lenguaje de programación
interpretado, por lo que no es necesario compilar los programas para
ejecutarlos. En otras palabras, los programas escritos con JavaScript
se pueden probar directamente en cualquier navegador sin necesidad
de procesos intermedios.
 A pesar de su nombre, JavaScript no guarda ninguna relación directa
con el lenguaje de programación Java. 
3
JAVASCRIPT

 Javascript es un lenguaje interpretado usado para múltiples

propósitos pero solo considerado como un complemento hasta ahora.
 Una de las innovaciones que ayudó a cambiar el modo en que vemos
Javascript fue el desarrollo de nuevos motores de interpretación,
creados para acelerar el procesamiento de código.
 La clave de los motores más exitosos fue transformar el código
Javascript en código máquina para lograr velocidades de ejecución
similares a aquellas encontradas en aplicaciones de escritorio.
 Esta mejorada capacidad permitió superar viejas limitaciones de
rendimiento y confirmar el lenguaje Javascript como la mejor opción
para la web.

4
Especificaciones oficiales

 ECMA ha publicado varios estándares relacionados con ECMAScript. En Junio

de 1997 se publicó la primera edición del estándar ECMA-262. Un año
después, en Junio de 1998 se realizaron pequeñas modificaciones para
adaptarlo al estandar ISO/IEC-16262 y se creó la segunda edición.
 La tercera edición del estándar ECMA-262 (publicada en Diciembre de 1999)
es la versión que utilizan los navegadores actuales y se puede consultar
gratuitamente en http://www.ecma-
international.org/publications/standards/Ecma-262.htm
 la cuarta versión de ECMA-262, se abandonó.

 ECMA también ha definido varios estándares relacionados con ECMAScript,

como el estándar ECMA-357, que define una extensión conocida como E4X y
que permite la integración de JavaScript y XML.

5
 Versión Nombre Oficial
1 ECMAScript 1 (1997)
2 ECMAScript 2 (1998)
3 ECMAScript 3 (1999)
4 ECMAScript 4
5 ECMAScript 5 (2009)
5,1 ECMAScript 5.1 (2011)
6 ECMAScript 2015
7 ECMAScript 2016
8 ECMAScript 2017
9 ECMAScript 2018
Cambios
Primera edición
Sólo cambios editoriales
Añadidas expresiones regulares
Añadido try/catch
Abandonada
Añadido el “strict mode”
Añadido JSON
Añadido String.trim()
Añadido Array.isArray() y Array Iteration Methods
Sólo cambios editoriales
Añadido let y const
Añadido valores de parámetros por defecto
Añadido Array.find() y Array.findIndex()
Añadido operador exponencial (**)
Añadido Array.prototype.includes
Añadido string padding
Añadidas nuevas propiedades de object
Añadidas Async functions
Añadida Shared Memory
Añadidas rest/spread propiedades
Añadidas Asynchronous iteration. (iteraciones asíncronas)
Añadido promise.finally()
Añadidos complementos adicionales a RegExp
6
Incorporando Javascript

 Siguiendo la misma línea que en CSS, existen tres técnicas para

incorporar código Javascript dentro de HTML:
 En línea
 Embebido
 En un archivo externo

 Sin embargo, al igual que en CSS, solo la inclusión de archivos

externos es la recomendada a usar en HTML5.

7
Incorporación en línea

 Esta es una técnica simple para insertar Javascript en nuestro

documento que se aprovecha de atributos disponibles en elementos
HTML. Estos atributos son manejadores de eventos que ejecutan
código de acuerdo a la acción del usuario.
 Los manejadores de eventos más usados son, en general, los
relacionados con el ratón, como por ejemplo onclick, onMouseOver, u
onMouseOut. Sin embargo, encontraremos sitios web que
implementan eventos de teclado y de la ventana, ejecutando
acciones luego de que una tecla es presionada o alguna condición en
la ventana del navegador cambia (por ejemplo, onload u onfocus).

8
Incorporación en línea
<!DOCTYPE html>
<html lang=”es”>
<head>
<title>Este texto es el título del documento</title>

</head>
<body>
<div id=”principal”>
<p onclick=”alert(‘hizo click!’)”>Hacer Click</p>

<p>No puede hacer click</p>

</div>

</body>
</html>

9
Incorporación en línea

 El uso de Javascript dentro de etiquetas HTML está permitido en

HTML5, pero por las mismas razones que en CSS, esta clase de
práctica no es recomendable.
 El código HTML se extiende innecesariamente y se hace difícil de
mantener y actualizar. Así mismo, el código distribuido sobre todo el
documento complica la construcción de aplicaciones útiles.
 Nuevos métodos y técnicas fueron desarrollados para referenciar
elementos HTML y registrar manejadores de eventos sin tener que
usar código en línea (inline).

10
Incorporación embebido

 Para trabajar con códigos extensos y funciones personalizadas

debemos agrupar los códigos en un mismo lugar entre etiquetas
<script>.
 El elemento <script> actúa exactamente igual al elemento <style>
usado para incorporar estilos CSS. Nos ayuda a organizar el código en
un solo lugar, afectando a los elementos HTML por medio de
referencias.
 Del mismo modo que con el elemento <style>, en HTML5 no
debemos usar ningún atributo para especificar lenguaje. Ya no es
necesario incluir el atributo type en la etiqueta <script>. HTML5
asigna Javascript por defecto.

11
Incorporación embebido
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<script>
function mostraralerta(){

alert('hizo click!');

function hacerclick(){

document.getElementsByTagName('p')[0].onclick=mostraralerta;

window.onload=hacerclick;

</script>

</head>
<body>
<div id=”principal”>
<p>Hacer Click</p>

<p>No puede hacer Click</p>

</div>

</body> 12

</html>
Incorporación embebido
 El elemento <script> y su contenido pueden ser posicionados en
cualquier lugar del documento, dentro de otros elementos o entre ellos.
 Para mayor claridad, se suele colocar siempre el código Javascript en la
cabecera del documento y luego referenciar los elementos que van a
ser afectados usando los métodos Javascript apropiados para ese
propósito.
 Actualmente existen distintos métodos disponibles para referenciar
elementos HTML desdeJavascript:
 getElementsByTagName referencia un elemento por su nombre o palabra
clave.
 getElementById referencia un elemento por el valor de su atributo id.
 getElementByName referencia un elemento por el valor de su atributo name.
 getElementsByClassName es una nueva incorporación que nos permite
referenciar un elemento por el valor de su atributo class.

13
Incorporación embebido

 Incluso si seguimos la práctica recomendada (posicionar el código

dentro de la cabecera del documento), una situación debe ser
considerada: el código del documento es leído de forma secuencial
por el navegador y no podemos referenciar un elemento que aún no
ha sido creado.
 Por eso es recomendable poner el código javascript en la parte
inferior de nuestro código html.

14
Incorporación Archivos Externos

 Los códigos Javascript crecen exponencialmente cuando agregamos

nuevas funciones y aplicamos alguna de las APIs existentes.
 Los Códigos embebidos incrementan el tamaño de nuestros
documentos y los hacen repetitivos (cada documento debe volver a
incluir los mismos códigos).
 Para reducir los tiempos de descarga, incrementar la productividad y
poder distribuir y reusar el código javascript en cada documento sin
comprometer eficiencia, se recomenda grabar todos los códigos
Javascript en uno o más archivos externos y llamarlos usando el
atributo src.

15
Incorporación Archivos Externos

<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<script src=”micodigo.js”></script>

</head>
<body>
<div id=”principal”>
<p>Hacer Click</p>
<p>No puede hacer Click</p>

</div>
</body>
</html>
16
 Etiqueta noscript

 Algunos navegadores no disponen de soporte completo de JavaScript,

otros navegadores permiten bloquearlo parcialmente e incluso
algunos usuarios bloquean completamente el uso de JavaScript
porque creen que así navegan de forma más segura.
 En estos casos, es habitual que si la página web requiere JavaScript
para su correcto funcionamiento, se incluya un mensaje de aviso al
usuario indicándole que debería activar JavaScript para disfrutar
completamente de la página.

 Imagen de www.Netvibes.com con JavaScript

desactivado 17

Imagen de www.Netvibes.com con JavaScript activado

Etiqueta noscript

 El lenguaje HTML define la etiqueta <noscript> para mostrar un mensaje al

usuario cuando su navegador no puede ejecutar JavaScript. El siguiente
código muestra un ejemplo del uso de la etiqueta <noscript>:
<head> ... </head>
<body>
<noscript>
<p>Bienvenido a Mi Sitio</p>
<p>La página que estás viendo requiere para su funcionamiento el uso de JavaScript.
Si lo has deshabilitado intencionadamente, por favor vuelve a activarlo.</p>
</noscript>
</body>
 La etiqueta <noscript> se debe incluir en el interior de la etiqueta <body>
(normalmente se incluye al principio de <body>). El mensaje que muestra
<noscript> puede incluir cualquier elemento o etiqueta XHTML.

18
Glosario

 Script: cada uno de los programas, aplicaciones o trozos de código creados con
el lenguaje de programación JavaScript. Unas pocas líneas de código forman un
script y un archivo de miles de líneas de JavaScript también se considera un
script. A veces se traduce al español directamente como "guión", aunque script
es una palabra más adecuada y comúnmente aceptada.

 Sentencia: cada una de las instrucciones que forman un script.

 Palabras reservadas: son las palabras (en inglés) que se utilizan para construir
las sentencias de JavaScript y que por tanto no pueden ser utilizadas
libremente. Las palabras actualmente reservadas por JavaScript son: break,
case, catch, continue, default, delete, do, else, finally, for, function, if, in,
instanceof, new, return, switch, this, throw, try, typeof, var, void, while, with.

19
else
enum
Palabras
export reservadas en javascript
extends
false
finally
for
function
if
implements
import
in
interface
instanceof
let
new
null
package 20

private
Sintaxis
 La sintaxis de un lenguaje de programación se define como el conjunto de reglas que deben seguirse al
escribir el código fuente de los programas para considerarse como correctos para ese lenguaje de
programación.
 La sintaxis de JavaScript es muy similar a la de otros lenguajes de programación como Java y C. Las
normas básicas que definen la sintaxis de JavaScript son las siguientes:
 No se tienen en cuenta los espacios en blanco y las nuevas líneas: como sucede con XHTML, el intérprete
de JavaScript ignora cualquier espacio en blanco sobrante, por lo que el código se puede ordenar de forma
adecuada para entenderlo mejor (tabulando las líneas, añadiendo espacios, creando nuevas líneas, etc.)
 Se distinguen las mayúsculas y minúsculas: al igual que sucede con la sintaxis de las etiquetas y elementos
XHTML. Sin embargo, si en una página XHTML se utilizan indistintamente mayúsculas y minúsculas, la página se
visualiza correctamente, siendo el único problema la no validación de la página. En cambio, si en JavaScript se
intercambian mayúsculas y minúsculas el script no funciona.
 No se define el tipo de las variables: al crear una variable, no es necesario indicar el tipo de dato que
almacenará. De esta forma, una misma variable puede almacenar diferentes tipos de datos durante la ejecución
del script.
 No es necesario terminar cada sentencia con el carácter de punto y coma (;): en la mayoría de lenguajes
de programación, es obligatorio terminar cada sentencia con el carácter ;. Aunque JavaScript no obliga a hacerlo,
es conveniente seguir la tradición de terminar cada sentencia con el carácter del punto y coma (;).
 Se pueden incluir comentarios: los comentarios se utilizan para añadir información en el código fuente del
programa. Aunque el contenido de los comentarios no se visualiza por pantalla, si que se envía al navegador del
usuario junto con el resto del script, por lo que es necesario extremar las precauciones sobre la información incluida
en los comentarios.

21
Comentarios
 JavaScript define dos tipos de comentarios: los de una sola línea y los que ocupan varias líneas.
 Ejemplo de comentario de una sola línea:
// a continuación se muestra un mensaje
alert("mensaje de prueba");
 Los comentarios de una sola línea se definen añadiendo dos barras oblicuas (//) al principio de
la línea.

 Ejemplo de comentario de varias líneas:

/* Los comentarios de varias líneas son muy útiles
cuando se necesita incluir bastante información
en los comentarios */
alert("mensaje de prueba");

 Los comentarios multilínea se definen encerrando el texto del comentario entre los símbolos /* y
*/.

22
Variables

 Las variables en los lenguajes de programación siguen una lógica

similar a las variables utilizadas en otros ámbitos como las
matemáticas. Una variable es un elemento que se emplea para
almacenar y hacer referencia a otro valor. Gracias a las variables es
posible crear "programas genéricos", es decir, programas que
funcionan siempre igual independientemente de los valores concretos
utilizados.
 De la misma forma que si en Matemáticas no existieran las variables
no se podrían definir las ecuaciones y fórmulas, en programación no
se podrían hacer programas realmente útiles sin las variables.

23
Variables

 Las variables en JavaScript se crean mediante la palabra reservada var.

var numero_1 = 3;
var numero_2 = 1;
var resultado = numero_1 + numero_2;
 La palabra reservada var solamente se debe indicar al definir por primera
vez la variable, lo que se denomina declarar una variable.
 Cuando se utilizan las variables en el resto de instrucciones del script,
solamente es necesario indicar su nombre.
 Si cuando se declara una variable se le asigna también un valor, se dice
que la variable ha sido inicializada.
 En JavaScript no es obligatorio inicializar las variables, ya que se pueden
declarar por una parte y asignarles un valor posteriormente.
24
Variables
 Una de las características más sorprendentes de JavaScript para los
programadores habituados a otros lenguajes de programación es que
tampoco es necesario declarar las variables. En otras palabras, se pueden
utilizar variables que no se han definido anteriormente mediante la palabra
reservada var.
var numero_1 = 3;
var numero_2 = 1;
resultado = numero_1 + numero_2;

 La variable resultado no está declarada, por lo que JavaScript crea una

variable global
 (recuerdo) Una variable se inicializa cuando se establece su contenido o valor
por primera vez

25
Variables
 también sería correcto el siguiente código:
numero_1 = 3;
numero_2 = 1;
resultado = numero_1 + numero_2;
 En cualquier caso, se recomienda declarar todas las variables que se
vayan a utilizar.
 El nombre de una variable también se conoce como identificador y
debe cumplir las siguientes normas:
 Sólo puede estar formado por letras, números y los símbolos $ (dólar) y _
(guión bajo).
 El primer carácter no puede ser un número.

26
Variables
 Por tanto, las siguientes variables tienen nombres correctos:

 var $numero1;
 var _$letra;
 var $$$otroNumero;
 var $_a__$4;

 Sin embargo, las siguientes variables tienen identificadores

incorrectos:

 var 1numero; // Empieza por un número

 var numero;1_123; // Contiene un carácter ";"

27
Variables
 en Javascript no hace falta declarar una variable antes de su uso. Ejemplos:
var Testear = 0;
testeaTexto = “Mi casa”;
SeleccionarColor = true;
 JavaScript permite que una variable pueda almacenar distintos tipos de datos
en cada trozo de código. Es decir, una variable que ahora almacena texto,
después puede almacenar números.
 Tras declarar la variable, su valor puede cambiar mediante la asignación de un valor:
 Testear = 12.3;
 O mediante la asignación del resultado de una operación:
 Testear = 12 * 3 + varX;

28
Conversion de datos en variables

 En muchas lenguajes si una variable toma valores de texto y luego se

quiere hacer que tome números, resulta imposible hacerlo. No es el caso
de JavaScript ya que realiza conversiones implícitas. Ejemplo:
 var x=”50” //x es una variable de texto
 var y=10 //y es una variable numérica
 z1=x+y //z1 es variable de texto y vale “5010”
 Naturalmente ocurrirá un error si pretende convertir a un número, un texto
normal como “Hola” por ejemplo. En cualquier caso no conviene hacer
conversiones de tipo en ningún caso.

29
Conversión de datos en variables
Var x = “50”;
Var y = 10;
Resultado = x + y;  resultado = “5010” (printf(Resultado))
Typeof(Resultado);  string (printf(Typeof(Resultado));)

Resultado = y + x;  resultado = “1050”

Typeof(Resultado) ; string

Resultado += 1;  resultado = “10501”

Typeof(Resultado);  string

Resultado++;  resultado = 10502

Typeof(Resultado)  number
30
Conversión de datos en variables
Var Resultado = 2 + 3 + 1 + “5”
Resultado = 65
typeof(Resultado);  string

Var Resultado = “5” + 2 + 3 + 1

Resultado = 5231
typeof(Resultado);  string

Var Resultado =6 + 2+ “5” + 2 + 3 + 1

Resultado = 85231
typeof(Resultado);  string

31
Tipos de variables

 Hay dos tipos de variables

 Tipos primitivos
 Number (Numericas)
 String (Cadenas de texto)
 Boolean (tipo booleano, con valor true/false)
 Null (tipo especial, que contiene null)
 Undefined (tipo especial, que contiene undefined)
 Tipos objeto
 Tipos predefinidos de JavaScript (Date (fechas), RegExp (expresiones regulares), Error (datos de error))
 Tipos definidos por el programador / usuario (Funciones simples / Clases)
 Arrays
 Objetos especiales
 Objeto global
 Objeto prototipo
32
 Otros
Tipos de variables Numéricas
 Se utilizan para almacenar valores numéricos enteros (llamados
integer en inglés) o decimales (llamados float en inglés).
 En este caso, el valor se asigna indicando directamente el número
entero o decimal.
 Los números decimales utilizan el carácter . (punto) en vez de ,
(coma) para separar la parte entera y la parte decimal:

 var iva = 16; // variable tipo entero

 var total = 234.65; // variable tipo decimal

33
Tipos de variables Cadenas de
texto
Se utilizan para almacenar caracteres, palabras y/o frases de texto. Para asignar el valor a la
variable, se encierra el valor entre comillas dobles o simples, para delimitar su comienzo y su
final:
 var mensaje = "Bienvenido a nuestro sitio web";
 var nombreProducto = 'Producto ABC';
 var letraSeleccionada = 'c';
 En ocasiones, el texto que se almacena en las variables no es tan sencillo. Si por ejemplo el
propio texto contiene comillas simples o dobles, la estrategia que se sigue es la de encerrar
el texto con las comillas (simples o dobles) que no utilice el texto:
// El contenido de texto1 tiene comillas simples, por lo que se encierra con comillas dobles
var texto1 = "Una frase con 'comillas simples' dentro";

/* El contenido de texto2 tiene comillas dobles, por lo que

se encierra con comillas simples */
var texto2 = 'Una frase con "comillas dobles" dentro';
34
Tipo de variables. Cadena de texto
 No obstante, a veces las cadenas de texto contienen tanto comillas simples como dobles. Además, existen otros
caracteres que son difíciles de incluir en una variable de texto (tabulador, ENTER, etc.) Para resolver estos
problemas, JavaScript define un mecanismo para incluir de forma sencilla caracteres especiales y problemáticos
dentro de una cadena de texto.
 El mecanismo consiste en sustituir el carácter problemático por una combinación simple de caracteres. A
continuación se muestra la tabla de conversión que se debe utilizar:
Si se quiere Se debe
incluir... incluir...
Una nueva línea \n
Un tabulador \t
Una comilla simple \'
Una comilla doble \"
Una barra inclinada \\
 De esta forma, el ejemplo anterior que contenía comillas simples y dobles dentro del texto se puede rehacer
de la siguiente forma:
var texto1 = 'Una frase con \'comillas simples\' dentro';
var texto2 = "Una frase con \"comillas dobles\" dentro";
35
 Este mecanismo de JavaScript se denomina "mecanismo de escape" de los caracteres problemáticos, y es
habitual referirse a que los caracteres han sido "escapados".
Tipo de variables. Undefined. Null.
NaN
El contenido de una variable no inicializada es undefined. (decimos que la variable
es de tipo Undefined).
 Var a;
 El contenido de una variable puede ser null (decimos que la variable es de tipo Null).
 Var a = null;
 Dato = null;
 Si intentamos realizar una operación matemática con una variable cuyo contenido no
es numérico sino texto, la variable toma el valor NaN. Para JavaScript NaN
(abreviatura de “Not-a-Number”) es un valor numérico especial, que representa
“número ilegal o no representable”.
 La asignación de NaN que realiza JavaScript automáticamente cuando se intentan realizar
operaciones numéricas ilegales evita la aparición de errores explícitos o que el código
JavaScript deje de ejecutarse.
Var saludo= “hola”;
Var valor = 1;
Resultado = saludo++ + valor;  NAN

36
Tipo de variables. Arrays
 En ocasiones, a los arrays se les llama vectores, matrices e incluso arreglos. No obstante, el término array es
el más utilizado y es una palabra comúnmente aceptada en el entorno de la programación.
 Un array es una colección de variables, que pueden ser todas del mismo tipo o cada una de un tipo
diferente. Su utilidad se comprende mejor con un ejemplo sencillo: si una aplicación necesita manejar los
días de la semana, se podrían crear siete variables de tipo texto:
var dia1 = "Lunes";
var dia2 = "Martes";
...
var dia7 = "Domingo";
 Aunque el código anterior no es incorrecto, sí que es poco eficiente y complica en exceso la programación. Si
en vez de los días de la semana se tuviera que guardar el nombre de los meses del año, el nombre de todos
los países del mundo o las mediciones diarias de temperatura de los últimos 100 años, se tendrían que crear
decenas o cientos de variables.
 En este tipo de casos, se pueden agrupar todas las variables relacionadas en una colección de variables o
array. El ejemplo anterior se puede rehacer de la siguiente forma:
var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
 Ahora, una única variable llamada dias almacena todos los valores relacionados entre sí, en este caso los
días de la semana. Para definir un array, se utilizan los caracteres [ y ] para delimitar su comienzo y su final
y se utiliza el carácter , (coma) para separar sus elementos:
 var nombre_array = [valor1, valor2, ..., valorN];

37
Tipo de variables. Arrays
 Una vez definido un array, es muy sencillo acceder a cada uno de sus elementos.
Cada elemento se accede indicando su posición dentro del array. La única
complicación, que es responsable de muchos errores cuando se empieza a
programar, es que las posiciones de los elementos empiezan a contarse en el 0 y
no en el 1:
var array=[10];
var array2 = new Array(7);
var diaSeleccionado = dias[0]; // diaSeleccionado = "Lunes"
var otroDia = dias[5]; // otroDia = "Sábado"
 En el ejemplo anterior, la primera instrucción quiere obtener el primer elemento
del array. Para ello, se indica el nombre del array y entre corchetes la posición del
elemento dentro del array
 El valor dias[5] hace referencia al elemento que ocupa la sexta posición dentro del
array dias. Como las posiciones empiezan a contarse en 0, la posición 5 hace
referencia al sexto elemento, en este caso, el valor Sábado.
38
Tipo de variables. Booleanos
 Las variables de tipo boolean o booleano también se conocen con el
nombre de variables de tipo lógico.
 Una variable de tipo boolean almacena un tipo especial de valor que
solamente puede tomar dos valores: true (verdadero) o false (falso).
 Los únicos valores que pueden almacenar estas variables son true y
false, por lo que no pueden utilizarse los valores verdadero y falso. A
continuación se muestra un par de variables de tipo booleano:
var clienteRegistrado = false;
var ivaIncluido = true;

39
Ámbito de las variables

 El ámbito de una variable (llamado "scope" en inglés) es la zona del programa

en la que se define la variable. JavaScript define dos ámbitos para las
variables: global y local.
 una variable local  es aquella que solamente está definida dentro de una
función.
 Cualquier instrucción que se encuentre dentro de la función puede hacer uso de esa
variable, pero todas las instrucciones que se encuentren en otras funciones o fuera
de cualquier función no tendrán acceso a ella.
 una variable global, es aquella que está definida en cualquier punto del
programa (incluso dentro de cualquier función).
 La recomendación general es definir como variables locales todas las variables
que sean de uso exclusivo para realizar las tareas encargadas a cada función.
Las variables globales se utilizan para compartir variables entre funciones de
forma sencilla.
40
Operadores
 Las variables por sí solas son de poca utilidad.Para hacer programas realmente útiles,
son necesarias otro tipo de herramientas.
 Los operadores permiten manipular el valor de las variables, realizar operaciones
matemáticas con sus valores y comparar diferentes variables. De esta forma, los
operadores permiten a los programas realizar cálculos complejos y tomar decisiones
lógicas en función de comparaciones y otros tipos de condiciones.
 Tipos de operadores
 Asignación (=)
 Incremento y decremento (++, --)
 Logicos
 Negación (!)
 And (&&)
 Or (||)
 Matematicos (suma (+), resta (-), multiplicación (*) y división (/))
 Relacionales (mayor que (>), menor que (<), mayor o igual (>=), menor o igual (<=), igual
que (==) y distinto de (!=))
41
Operadores de comparación
Operador Significado
== Igual a
!= Diferente a
=== Contenido y tipo igual a
!== Contenido y tipo diferente de
> Mayor que
< Menor que
>= Mayor igual que
<= Menor igual que

42
Operadores
 De estos ocho operadores, dos de ellos pueden ser difíciles de
entender para un principiante: se trata === y ! ==. de modo que se
indica cómo trabajan con algunos ejemplos:
 var numero = 4, text = '4 ',
 resultado = numero == texto;
 alert (resultado); / / Muestra "verdadero"
 mientras que "número" es un número y el "texto" de una cadena de
caracteres
 resultado = numero === texto;
 alert (resultado); / / Muestra "false"
 porque este operador también compara tipos de variables en adición a sus
valores

43
Estructuras

 JavaScript también permite tener expresiones condicionales (if {…} else {…})
 Switch (switch(variable) { case valor_1: ... break; … default: … })
 Bucles
 For (for(inicializacion; condicion; actualizacion){…})
 For in (for(indice in array) {…})
 While (while(condicion) {…})
 Do While (do { ... } while(condicion);)
 Funciones
 function nombre_funcion() { … }
 Funciones con parámetros
 function nombre_funcion(param1, param2,…) { ... }

44
Mensajes
 Se trata de ventanas que desde el código se lanzan al usuario para
hacer que éste reaccione ante una situación o nos informe ante una
duda.
 Las instrucciones que muestran mensajes son:
 Alert
 Prompt
 Confirm

45
Mensajes - Alert

 Es el mensaje más usado. Saca un mensaje por la pantalla el cual

sólo deja la posibilidad de aceptarle. Su uso es mostrar información al
usuario pero resaltándola de la página. Su sintaxis es:
 alert(texto_del_mensaje);
 Ejemplo:
 Alert (“Hello world!”);

46
Mensajes - prompt
 En este caso se trata de una ventana que pide entrar datos al usuario. De modo que
esta función devuelve un valor que se puede usar en el código si es asignado a una
variable. Su sintaxis es:
 prompt(texto_del_mensaje,valor_por_defecto);
 El segundo parámetro (valor por defecto) no es obligatorio incluirle y permite
asignar un valor al cuadro de texto en el que el usuario tendrá que introducir
información. Ejemplo de uso de prompt:
 respuesta=prompt(“¿Qué quieres hacer?”,”comer”);
 En el ejemplo, el resultado de lo que el usuario responde se almacena en la variable
resultado y al principio la ventana contendrá el valor comer en el cuadro de texto
destinado al usuario. Naturalmente, el usuario podrá variar este valor si lo desea.
 El cuadro de diálogo que saca prompt posee dos botones, uno es el de Aceptar y el
otro es el de Cancelar. Si el usuario pulsa Cancelar, la función prompt devuelve el
valor nulo (null).

47
Mensaje - Confirm

 Saca un mensaje de confirmación el cual suele tener dos botones:

Aceptar y Cancelar. Sintaxis:
 confirm(texto_del_mensaje)
 La ventana mostrará el texto elegido (normalmente es una pregunta)
y el usuario elegirá si desea aceptar o no el contenido. Confirm
devuelve un valor true en el caso de que el usuario acepte el
mensaje, y false si no lo hace.

48
DOM

 La creación del Document Object Model o DOM es una de las

innovaciones que más ha influido en el desarrollo de las páginas web
dinámicas y de las aplicaciones web más complejas.
 DOM permite a los programadores web acceder y manipular las
páginas XHTML como si fueran documentos XML. De hecho, DOM se
diseñó originalmente para manipular de forma sencilla los
documentos XML.
 A pesar de sus orígenes, DOM se ha convertido en una utilidad
disponible para la mayoría de lenguajes de programación (Java, PHP,
JavaScript) y cuyas únicas diferencias se encuentran en la forma de
implementarlo.

49
DOM
 Una de las tareas habituales en la programación de aplicaciones web con JavaScript
consiste en la manipulación de las páginas web. De esta forma, es habitual obtener el
valor almacenado por algunos elementos (por ejemplo los elementos de un formulario),
crear un elemento (párrafos, <div>, etc.) de forma dinámica y añadirlo a la página,
aplicar una animación a un elemento (que aparezca/desaparezca, que se desplace, etc.).
 Todas estas tareas habituales son muy sencillas de realizar gracias a DOM. Sin embargo,
para poder utilizar las utilidades de DOM, es necesario "transformar" la página original.
Una página HTML normal no es más que una sucesión de caracteres, por lo que es un
formato muy difícil de manipular. Por ello, los navegadores web transforman
automáticamente todas las páginas web en una estructura más eficiente de manipular.
 Esta transformación la realizan todos los navegadores de forma automática y nos
permite utilizar las herramientas de DOM de forma muy sencilla. El motivo por el que se
muestra el funcionamiento de esta transformación interna es que condiciona el
comportamiento de DOM y por tanto, la forma en la que se manipulan las páginas.
 DOM transforma todos los documentos XHTML en un conjunto de elementos llamados
nodos, que están interconectados y que representan los contenidos de las páginas web y
las relaciones entre ellos. Por su aspecto, la unión de todos los nodos se llama "árbol de
nodos".

50
DOM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Página sencilla</title>

</head>

<body>
<p>Esta página es <strong>muy sencilla</strong></p>

</body>
</html>
51
Tipos de nodos
 La especificación completa de DOM define 12 tipos de nodos, aunque las páginas
XHTML habituales se pueden manipular manejando solamente cuatro o cinco tipos
de nodos:
 Document, nodo raíz del que derivan todos los demás nodos del árbol.
 Element, representa cada una de las etiquetas XHTML. Se trata del único nodo que puede
contener atributos y el único del que pueden derivar otros nodos.
 Attr, se define un nodo de este tipo para representar cada uno de los atributos de las
etiquetas XHTML, es decir, uno por cada par atributo=valor.
 Text, nodo que contiene el texto encerrado por una etiqueta XHTML.
 Comment, representa los comentarios incluidos en la página XHTML.

 Los otros tipos de nodos existentes que no se van a considerar son DocumentType,
CDataSection, DocumentFragment, Entity, EntityReference, ProcessingInstruction y
Notation.
52
Acceso directo a los nodos

 Una vez construido automáticamente el árbol completo de nodos DOM, ya es posible

utilizar las funciones DOM para acceder de forma directa a cualquier nodo del árbol. Como
acceder a un nodo del árbol es equivalente a acceder a "un trozo" de la página, una vez
construido el árbol, ya es posible manipular de forma sencilla la página: acceder al valor de
un elemento, establecer el valor de un elemento, mover un elemento de la página, crear y
añadir nuevos elementos, etc.
 DOM proporciona dos métodos alternativos para acceder a un nodo específico: acceso a
través de sus nodos padre y acceso directo.
 Las funciones que proporciona DOM para acceder a un nodo a través de sus nodos padre
consisten en acceder al nodo raíz de la página y después a sus nodos hijos y a los nodos
hijos de esos hijos y así sucesivamente hasta el último nodo de la rama terminada por el
nodo buscado. Sin embargo, cuando se quiere acceder a un nodo específico, es mucho
más rápido acceder directamente a ese nodo y no llegar hasta él descendiendo a través de
todos sus nodos padre.
 Por ese motivo, no se van a presentar las funciones necesarias para el acceso jerárquico de
nodos y se muestran solamente las que permiten acceder de forma directa a los nodos.
 Por último, es importante recordar que el acceso a los nodos, su modificación y su
eliminación solamente es posible cuando el árbol DOM ha sido construido completamente,
es decir, después de que la página XHTML se cargue por completo.

53
getElementsByTagName()

 Como sucede con todas las funciones que proporciona DOM, la función
getElementsByTagName() tiene un nombre muy largo, pero que lo hace
autoexplicativo.
 La función getElementsByTagName(nombreEtiqueta) obtiene todos los elementos de
la página XHTML cuya etiqueta sea igual que el parámetro que se le pasa a la
función.
 El siguiente ejemplo muestra cómo obtener todos los párrafos de una página XHTML:
var parrafos = document.getElementsByTagName("p");
 El valor que se indica delante del nombre de la función (en este caso, document) es
el nodo a partir del cual se realiza la búsqueda de los elementos. En este caso, como
se quieren obtener todos los párrafos de la página, se utiliza el valor document como
punto de partida de la búsqueda.
 El valor que devuelve la función es un array con todos los nodos que cumplen la
condición de que su etiqueta coincide con el parámetro proporcionado. El valor
devuelto es un array de nodos DOM, no un array de cadenas de texto o un array de
objetos normales. Por lo tanto, se debe procesar cada valor del array de la forma que
se muestra en las siguientes secciones.

54
getElementsByTagName()
 De este modo, se puede obtener el primer párrafo de la página de la siguiente
manera:
var primerParrafo = parrafos[0];
 De la misma forma, se podrían recorrer todos los párrafos de la página con el
siguiente código:

for(var i=0; i<parrafos.length; i++) {

var parrafo = parrafos[i];
}
 La función getElementsByTagName() se puede aplicar de forma recursiva sobre
cada uno de los nodos devueltos por la función. En el siguiente ejemplo, se
obtienen todos los enlaces del primer párrafo de la página:
var parrafos = document.getElementsByTagName("p");
var primerParrafo = parrafos[0];
var enlaces = primerParrafo.getElementsByTagName("a");

55
getElementsByName()

 La función getElementsByName() es similar a la anterior, pero en

este caso se buscan los elementos cuyo atributo name sea igual al
parámetro proporcionado. En el siguiente ejemplo, se obtiene
directamente el único párrafo con el nombre indicado:
var parrafoEspecial = document.getElementsByName("especial");
<p name="prueba">...</p>
<p name="especial">...</p>
<p>...</p>
 Normalmente el atributo name es único para los elementos XHTML
que lo definen, por lo que es un método muy práctico para acceder
directamente al nodo deseado. En el caso de los elementos XHTML
radiobutton, el atributo name es común a todos los radiobutton que
están relacionados, por lo que la función devuelve una colección de
elementos.

56
getElementById()

 La función getElementById() es la más utilizada cuando se desarrollan

aplicaciones web dinámicas. Se trata de la función preferida para
acceder directamente a un nodo y poder leer o modificar sus
propiedades.
 La función getElementById() devuelve el elemento XHTML cuyo atributo
id coincide con el parámetro indicado en la función. Como el atributo id
debe ser único para cada elemento de una misma página, la función
devuelve únicamente el nodo deseado.
var cabecera = document.getElementById("cabecera");
<div id="cabecera">
<a href="/" id="logo">...</a>
</div>
 La función getElementById() es tan importante y tan utilizada en todas
las aplicaciones web, que casi todos los ejemplos y ejercicios que
siguen la utilizan constantemente.
57
getElementsByClassName()

 El método getElementsByClassName () en este caso se buscan los

elementos cuyo atributo class (clase) sea igual al parámetro
proporcionado.
document.getElementsByClassName(classname)

58
Nuevos Selectores

 los elementos HTML tienen que ser referenciados desde Javascript

para ser afectados por el código.
 Los métodos getElementById, getElementByName,
getElementsByTagName y getElementsByClassName no son
suficientes para contribuir a la integración que este lenguaje necesita
y sostener la relevancia que posee dentro de la especificación de
HTML5.
 Para elevar Javascript al nivel que las circunstancias requieren,
nuevas alternativas debieron ser incorporadas. Desde ahora podemos
seleccionar elementos HTML aplicando toda clase de selectores CSS
por medio de los nuevos métodos querySelector() y
querySelectorAll().

59
Nuevos Selectores
 querySelector()
 Este método retorna el primer elemento que concuerda con el grupo de
selectores especificados entre paréntesis. Los selectores son declarados
usando comillas y la misma sintaxis
 Sustituyendo en el ejemplo anterior:
function hacerclick(){
document.querySelector(“#principal p:first-child”).onclick=mostraralerta;

}
function mostraralerta(){
alert('hizo click!');

}
window.onload=hacerclick;

 querySelector() devolverá el primer elemento <p> que encuentre

60
dentro del <div> que es, por supuesto, su primer hijo <p>.
Nuevos Selectores
 querySelectorAll()
 el método querySelectorAll() retorna todos los elementos que concuerdan
con el grupo de selectores declarados entre paréntesis. El valor retornado
es un array conteniendo cada elemento encontrado en el orden en el que
aparecen en el documento.
 Sustituyendo en el ejemplo anterior:
function hacerclick(){
var lista=document.querySelectorAll(“#principal p”);
lista[0].onclick=mostraralerta;

}
function mostraralerta(){
alert('hizo click!');

}
window.onload=hacerclick;
61
Nuevos Selectores
 En este ejemplo no muestra el potencial de querySelectorAll().
 Normalmente será utilizado para afectar a varios elementos y no solo
uno, como en este caso. Para interactuar con una lista de elementos
retornados por este método, podemos utilizar un bucle for:
function hacerclick(){
var lista=document.querySelectorAll(“#principal p”);
for(var f=0; f<lista.length; f++){
lista[f].onclick=mostraralerta;

}
function mostraralerta(){
alert('hizo click!');

}
window.onload=hacerclick;
62
Nuevos Selectores

 Podemos juntar selectores

function hacerclick(){
var
lista=document.getElementById(‘principal’).querySelectorAll(“p”);
lista[0].onclick=mostraralerta; <!DOCTYPE html>
<html lang="es">
} <head>
<title>Este texto es el título del documento</title>
function mostraralerta(){ <script src=”micodigo.js”></script>
</head>
alert('hizo click!'); <body>
<div id=”principal”>
} <p>Hacer Click</p>
<p>No puede hacer Click</p>

window.onload=hacerclick; </div>
</body>
</html>
63
Manejadores de eventos
 el código Javascript es normalmente ejecutado después de que el
usuario realiza alguna acción. Estas acciones y otros eventos son
procesados por manejadores de eventos y funciones Javascript
asociadas con ellos.
 Existen tres diferentes formas de registrar un evento para un
elemento HTML:
 Podemos agregar un nuevo atributo al elemento.
 Podemos registrar un manejador de evento como una propiedad del
elemento
 Podemos usar el nuevo método estándar addEventListener().

64
Conceptos básicos:
 En Javascript las acciones de los usuarios son llamadas eventos.
 Cuando el usuario realiza una acción, como un click del ratón o la
presión de una tecla, un evento específico para cada acción y cada
elemento es disparado.
 Además de los eventos producidos por los usuarios existen también
otros eventos disparados por el sistema (por ejemplo, el evento load
que se dispara cuando el documento es completamente cargado).
 Estos eventos son manejados por códigos o funciones. El código que
responde al evento es llamado manejador.
 Cuando registramos un manejador lo que hacemos es definir cómo nuestra
aplicación responderá a un evento en particular.
 Luego de la estandarización del método addEventListener(), este
procedimiento es usualmente llamado “escuchar al evento”, y lo que
hacemos para preparar el código que responderá a ese evento es “agregar
una escucha” a un elemento en particular.
65
Manejadores de eventos en línea
 Se trata simplemente de utilizar los atributos provistos por HTML para
registrar eventos para un elemento en particular. Esta es una técnica
en desuso pero aun extremadamente útil y práctica en algunas
circunstancias, especialmente cuando necesitamos hacer
modificaciones rápidas para testeo.
<!DOCTYPE html>
<html lang=”es”>
<head>
<title>Este texto es el título del documento</title>

</head>
<body>
<div id=”principal”>
<p onclick=”alert(‘hizo click!’)”>Hacer Click</p>

<p>No puede hacer click</p>

</div>

</body> 66

</html>
Lista de eventos
 onClick
 Se produce cuando el usuario hace clic en el objeto. Sólo los vínculos y los botones de los formularios
permiten capturar este evento en ambos navegadores.
 onDblClick
 Se genera cuando el usuario hace doble clic con el ratón. Sólo los vínculos admiten este evento en
ambos navegadores.
 onMouseOver
 Se produce cuando el usuario pasa el cursor por encima del objeto. Sólo los vínculos permiten este
evento en ambos navegadores.
 onMouseOut
 Ocurre cuando el usuario abandona el objeto. Sólo los vínculos permiten este evento en ambos
navegadores.
 onMouseDown
 Se produce cuando el usuario mantiene pulsado el botón principal del ratón a la vez que se sitúa
encima de un objeto. Funciona en los vínculos, en los botones y en las imágenes.

67
Lista de eventos
 onMouseUp
 Ocurre cuando el usuario levanta el botón del ratón. Funciona en los mismos
casos que el anterior.
 onMouseMove
 Sucede cuando el usuario mueve el ratón. onKeyDown, onKeyPress y onKeyUp
Ocurren respectivamente cuando el usuario pulsa una tecla, cuando la
mantiene pulsada y cuando la suelta. Tienen poca utilidad y pocas etiquetas los
admiten. onLoad Se produce cuando la página se está cargando. La etiqueta
BODY es la idónea para este evento.
 onUnload
 Se produce cuando la página se está descargando, porque se está cargando
otra o porque se cierra el navegador. La etiqueta BODY es la idónea para este
evento.
 onResize
 Ocurre cuando se cambia el tamaño de la ventana. La etiqueta BODY o la
FRAME son las que manejan este evento.
68
Lista de eventos
 onBlur
 Se produce cuando un objeto pierde el foco (deja de ser el objeto activo).
La etiqueta BODY, los botones, cuadros de formulario y los enlaces
admiten esta propiedad.
 onFocus
 Sucede cuando un objeto gana el foco (pasa a ser el objeto activo). La
etiqueta BODY, los botones, cuadros de formulario y los enlaces admiten
esta propiedad.
 onAbort
 Se produce si el usuario pulsa el botón Detener mientras se estaba
cargando una imagen. La etiqueta IMG es la que maneja este evento.
 onError
 Se produce cuando ocurre un error. Casi todas lo permiten, no
obstante su uso no parece muy interesante.
69
addEventListener()
 El método addEventListener() es la técnica ideal y la que es
considerada como estándar por la especificación de HTML5.
 Este método tiene tres argumentos:
 El nombre del evento
 La función a ser ejecutada
 Puede referenciar a una función
 Puede referenciar a una función anónima
 Funciones anónimas son funciones dinámicamente declaradas y que no tienen nombre
(por esto son llamadas “anónimas”). Esta clase de funciones son extremadamente útiles
en Javascript, nos ayudan a organizar el código y no sobre poblar el objeto global con
funciones independientes.

 Un valor booleano (falso o verdadero) que indica cómo un evento será

disparado en elementos superpuestos.
 Verdadero  el evento va a ser lanzado en múltiples elementos.
 Falso  el evento sólo será lanzado en un elemento.
70
addEventListener()
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<script>
function mostraralerta(){

alert('hizo click!');

function hacerclick(){

var elemento=document.getElementsByTagName('p')[0];

elemento.addEventListener(‘click’, mostraralerta, false);

window.addEventListener(‘load’, hacerclick, false);

</script>

</head>
<body>
<div id=”principal”>
<p>Hacer Clic</p>

<p>No puede hacer Clic</p>

</div>
71
</body>
</html>
Versiones de javascript
Versión Nombre Oficial Descripción
1 ECMAScript 1 (1997) First Edition
2 ECMAScript 2 (1998) Editorial changes only.
3 ECMAScript 3 (1999) Added Regular Expressions.
Added try/catch.
4 ECMAScript 4 Never released
5 ECMAScript 5 (2009) Added "strict mode".
Added JSON support.
Added String.trim().
Added Array.isArray().
Added Array Iteration Methods.
5.1 ECMAScript 5.1 (2011) Editorial changes.

72
Versiones de javascript
Versión Nombre Oficial Descripción
6 ECMAScript 2015 Added let and const.
Added default parameter values.
Added Array.find().
Added Array.findIndex().
7 ECMAScript 2016 Added exponential operator (**).
Added Array.prototype.includes.
8 ECMAScript 2017 Added string padding.
Added new Object properties.
Added Async functions.
Added Shared Memory.
9 ECMAScript 2018 Added rest / spread properties.
Added Asynchronous iteration.
Added Promise.finally().
Additions to RegExp.

73
JavaScript y los navegadores

 Navegadores que soportan javascript

 La versión ECMAScript 3, es soportada por todos los navegadores.
 La versión ECMAScript 5, es soportada por todos los navegadores
modernos.

74
JavaScript y los navegadores

 Internet Explorer no soporta ECMAScript 2015

75
JavaScript y los navegadores

 https://www.w3schools.com/js/js_versions.asp

76
Applets
 Los applets son pequeños programas en JAVA que se ejecutan en el
navegador.
 Los applets de Java pueden ejecutarse en un navegador utilizando
la Java Virtual Machine (JVM), o en el AppletViewer de Sun.
 Entre sus características podemos mencionar un esquema
de seguridad que permite que los applets que se ejecutan en el
equipo no tengan acceso a partes sensibles (por ej. no pueden
escribir archivos), a menos que uno mismo le dé los permisos
necesarios en el sistema.
 En Java, un applet es un programa que puede incrustarse en
una página web. Cuando un navegador carga una página web que
contiene un applet, este se descarga en el navegador web y
comienza a ejecutarse. Esto permite crear programas que cualquier
usuario puede ejecutar con tan solo cargar la página web en su
navegador.
77
Ventajas Applets
 Son multiplataforma (funcionan en Linux, Windows, OS X, y en cualquier sistema
operativo para el cual exista una Java Virtual Machine).
 El mismo applet puede trabajar en "todas" las versiones de Java, y no sólo en la
última versión del plugin. Sin embargo, si un applet requiere una versión
posterior del Java Runtime Environment (JRE), el cliente se verá obligado a
esperar durante la descarga de la nueva JRE.
 Puede ser almacenado en la memoria caché de los navegadores web, de modo
que se cargará rápidamente cuando se vuelva a cargar la página web, aunque
puede quedar atascado en la caché, causando problemas cuando se publican
nuevas versiones.
 Puede tener acceso completo a la máquina en la que se está ejecutando, si el
usuario lo permite.
 Puede ejecutarse a velocidades comparables a las de otros lenguajes
compilados, como C++ (dependiendo de la versión de la JVM).
 Puede trasladar el trabajo del servidor al cliente, haciendo una solución web
más escalable tomando en cuenta el número de usuarios o clientes.
78
Desventajas Applet
 Requiere el plugin de Java, sin embargo los navegadores Chrome y IE
Edge no soportan plugins y Firefox dejará de soportarlos próximamente. En
ese sentido también Oracle abandono el desarrollo del plugin de Java a
partir de la salida de Java 9.
 No puede iniciar la ejecución de un applet, hasta que la JVM esté en
funcionamiento, y esto puede tardar la primera vez que se ejecuta.
 Si no está firmado como confiable, tiene un acceso limitado al sistema del
usuario - en particular no tiene acceso directo al disco duro del cliente o al
portapapeles.
 Algunas organizaciones sólo permiten la instalación de software a los
administradores. Como resultado, muchos usuarios (sin privilegios para
instalar el plugin en su navegador) no pueden ver los applets.
 Un applet podría exigir una versión específica del JRE.
 Puede tener vulnerabilidades que permitan ejecutar código malicioso
 No es compatible con la mayoría de los navegadores web.
79
Servlet
 Permite generar dinámicamente la respuesta HTML a las
peticiones de cliente, todo en el servidor
 Recibe la petición en un objeto de clase httpservletrequest,
y contesta al cliente depositando la contestación en un
objeto de la clase httpservletresponse.
 Requiere JRE en el servidor de aplicaciones.

80
Servlet - Ejemplo
 Los métodos
son:
 doGet
 doHead
 doPost
 doPut
 doDelete
 doOptions
 doTrace

81
Servlet – Ciclo de vida

 1. Inicializar el servlet
 Método init del servlet
 2. Interactuar con los clientes
 Atender peticiones del cliente (doGet, doHead, doPost, doPut, doDelete,
doOptions, doTrace)
 3. Destruir el servlet
 Método destroy del propio servlet

82
LENGUAJES DE SCRIPTING
 SCRIPTS DE CLIENTE
 Características de los Scripts de Cliente
 Generación dinámica de contenido HTML en el propio navegador
 Manejo de una interfaz más dinámica: animaciones, menús desplegables, etc.
 Interacción con applets, plugins y demás elementos de la página
 Comprobaciones básicas de la información introducida (javascritp…)
 Manejo de las cookies del cliente
 Ejecución 100% integrada en el cliente (en el propio HTML), sin interacción con
el Servidor, con la consiguiente reducción tráfico
 Por seguridad, funcionalidad limitada en el cliente
 Más ligeros que los Applets
 Históricos problemas de compatibilidad entre distintos navegadores

83
JAVASCRIPT

 JavaScript y ECMAScript - Características:

 Sintaxis similar a Java (pero NO es Java)
 Basado en objetos
 Orientado a eventos
 Interpretado

84
VBScript

 Características:
 Desarrollo por Microsoft en respuesta a JavaScript
 Creado a partir de VBA (Visual Basic for Applications), versión ligera de
Visual Basic incorporada en Excel y otros.
 Mayor funcionalidad que JavaScript
 Lenguaje más general, se ejecuta en un intérprete tipo IE (Internet
Explorer) o Windows Script Host que expone los objetos al script y gestiona
su ejecución
 Se incluye también en ficheros con la extensión “.vbs”

85
TypeScript
 TypeScript es un lenguaje de programación libre y de código abierto desarrollado y mantenido
por Microsoft.
 Es un superconjunto de JavaScript, que esencialmente añade tipado estático y objetos basados
en clases. 
 Anders Hejlsberg, diseñador de C# y creador de Delphi y Turbo Pascal, ha trabajado en el
desarrollo de TypeScript. TypeScript puede ser usado para desarrollar aplicaciones JavaScript que
se ejecutarán en el lado del cliente o del servidor (Node.js).
 TypeScript extiende la sintaxis de JavaScript, por tanto cualquier código JavaScript existente
debería funcionar sin problemas. Está pensado para grandes proyectos, los cuales a través de un
compilador de TypeScript se traducen a código JavaScript original.
 TypeScript soporta ficheros de definición que contengan información sobre los tipos de librerías
JavaScript existentes, similares a los ficheros de cabeceras de C/C++ que describen la estructura
de ficheros de objetos existentes. Esto permite a otros programas usar los valores definidos en
los ficheros como si fueran entidades TypeScript de tipado estático. Existen cabeceras para
librerías populares como jQuery, MongoDB y D3.js, y los módulos básicos de Node.js.
 El compilador de TypeScript está escrito asimismo en TypeScript, compilado a JavaScript y
con Licencia Apache 2.
 TypeScript se incluye como lenguaje de programación de primer nivel en Microsoft Visual
Studio 2013 Update 2 y posteriores, junto a C# y otros lenguajes de Microsoft. Una extensión
oficial permite a Visual Studio 2012 soportar también TypeScript.

86
Lenguajes de script de servidor
 Características.
 Se utilizan para producir páginas dinámicas
 Se 'embeben' en las páginas HTML
 Se interpretan en el servidor antes de enviarse al cliente
 Los principales beneficios:
 Permiten separar parcialmente la lógica del programa de la
presentación
 Portabilidad: en el servidor (multiplataforma) como en el cliente
(ejecución en el servidor)
 Reutilización: usando componentes reusables (Ej: JavaBeans)
 Extensibilidad: a través de librerías de tags o etiquetas personalizados

87
ASP (Active Server Pages)

 Caracteristicas:
 Tecnología propietaria de Microsoft
 ASP usa lenguajes de script como Jscript o Vbscript interpretados.
 Superado por ASP.NET (framework desarrollo .NET). Código MSIL
 Se ejecuta sólo en servidores MS IIS

88
PHP (PHP Hypertext
Preprocessor)
 Caracteristicas:
 Inicialmente era un desarrollo personal que ha tenido gran éxito, dado su
buena integración en plataformas LAMP (Linux Apache MySql PHP).
 Estructura similar a C ó Perl
 Ventajas: Open Source, multiplataforma, sencillo, rápido
 Pieza base en la arquitectura LAMP
 Incorpora POO
 Interpretado

89
Perl (Practical Extraction and Report Language)

 Caracteristicas:
 Lenguaje creado por Larry Wall en 1987 (act. Perl v5)
 Orientado inicialmente a administradores de sistemas (basado en C y la
programación shell de Unix)
 De propósito general.
 Open Source y multiplataforma (muy portable).
 Especializado en el tratamiento y generación de ficheros de texto
 Muy eficiente, en la web se usa para la programación CGI
 Para interactuar con Bases de Datos utiliza DBI/DBD
 DBI: Capa de interfaz independiente de la BBDD
 DBD: Driver Perl para la BBDD concreta. Es usado por DBI

90
JSP (JavaServer Pages)
 Características:
 Arquitectónicamente, JSP puede verse como una abstracción de alto
nivel de servlets de Java . 
 Los JSP se traducen en servlets en tiempo de ejecución, por lo que JSP es un
Servlet; cada servlet JSP se almacena en caché y se reutiliza hasta que se
modifica el JSP original. 
 JSP se puede utilizar de forma independiente o como el componente de vista de
un diseño del lado del servidor MVC , normalmente con JavaBeans como el
modelo y servlets de Java (o un marco como Apache Struts ) como el
controlador.  
 Los JSP generalmente se usan para entregar documentos HTML y XML, pero,
también pueden entregar otros tipos de datos. 
 El contenedor web crea objetos JSP implícitos como solicitud, respuesta, sesión,
aplicación, configuración, página, páginaContexto, salida y excepción. El motor
JSP crea estos objetos durante la fase de traducción.

91
JAVASCRIPT EN EL MARCO DE LA PROGRAMACIÓN WEB

 Ya hemos comentado que JavaScript se integra dentro de los desarrollos

web con otras tecnologías como HTML, CSS y generalmente con un lenguaje
del lado del servidor como PHP, JSP ó ASP u otros.
 El uso principal de javascript es ejecutarse del lado del cliente

 JavaScript es una tecnología (o lenguaje) aceptada por todos los

navegadores y que interviene en prácticamente todo desarrollo web, grande
o pequeño.
 Se encarga de dotar de respuesta rápida y efectos controlados 92

directamente desde el computador del usuario a las páginas web.

JAVASCRIPT EN EL MARCO DE LA PROGRAMACIÓN WEB
 Los lenguajes de programación del lado del servidor realizan procesos en el servidor
(máquina remota (o no) que se encarga de enviar las páginas web a través de internet (o
no)): podemos citar entre estos lenguajes Java (JSP), ASP.NET, o PHP  entre los principales.
 Los lenguajes de programación del lado del cliente realizan procesos en la máquina del
usuario (efectos visuales, cálculos, etc.): podemos citar entre estos lenguajes JavaScript, Java
(applets), VBScript ó Dart (impulsado por Google), entre los principales.
 JavaScript es el lenguaje de programación del lado del cliente más utilizado hoy día en los desarrollos
web y es aceptado por todos los navegadores.
 En cuanto a bases de datos podemos nombrar MySQL, SQLServer y Oracle, entre las
principales.
 Las tecnologías se combinan entre ellas de muy diversas formas. Podemos citar algunas
combinaciones bastante habituales entre lenguajes de programación y bases de datos: Java
+ Oracle, ASP.NET + SQLServer, PHP + MySQL. Sea cual sea la combinación utilizada, en un
desarrollo web moderno siempre intervendrá HTML, CSS y JavaScript.
 En resumen, JavaScript es un lenguaje de programación del lado del cliente cuyos aspectos
básicos deben ser conocidos por los programadores web. En la práctica, muchas veces se
entremezcla el código de programación del lado del servidor o del lado del cliente con el
código HTML y código CSS, de ahí que coloquialmente se hable de “programación web” para
referirse a todo este conjunto, aunque formalmente ni HTML ni CSS son lenguajes de
programación.
93
 JAVASCRIPT DEL LADO DEL SERVIDOR

 JavaScript es un lenguaje que aparece en prácticamente todo desarrollo web como

lenguaje del lado del cliente.
 No obstante, hace ya varios años que ha empezado a tener uso en algunos
desarrollos web como lenguaje del lado del servidor para permitir desarrollos web
completos.
 El desarrollo en JavaScript del lado del servidor se hace instalando en el servidor
herramientas que permiten el uso de JavaScript del lado del servidor como:
 Node.js: es quizás la herramienta más utilizada dentro de los desarrollos que usan
JavaScript del lado del servidor. Node.js es un entorno de programación que incluye
numerosas librerías preparadas para ser usadas por parte de los programadores.
 Jaxer
 RingoJS
 EJScript
 AppengineJS
 El desarrollo con JavaScript del lado del servidor permite crear desarrollos web
completos, pero es una práctica que todavía no está generalizada y en cierta
medida se sigue considerando no habitual, o al menos no recomendable para
quienes no conozcan JavaScript básico.
94
Framework más usados en FRONT-
END
 React
 es una librería de Facebook enfocada en la creación de vistas con
particularidades como los patrones de eventos que permiten actualizar las
mencionadas vistas cuando los datos hayan sido modificados, aportando
una carga en tiempo real a nuestro desarrollo.

 Angular 1.X
 Este framework, y el resto de sus versiones fue creado inicialmente y
es promovido por Google, entre sus características encontramos que
modifica el DOM directamente y alguna que otra característica
revolucionaria para su época que hoy en día nos sorprenden poco,
habiendo visto el panorama que hay de frameworks y librerías.

95
Framework más usados en FRONT-
END
 VueJS
 Vue fue creado por un ex-empleado de Google, que había estado relacionado con
AngularJS y que pretendía coger sus partes favoritas de este framework y crear
algo muy ligero. Desde 2014 está disponible a toda la comunidad y, como no podría ser
de otra manera es un proyecto Open Source.

 Angular 2
 introducía una gran diferencia con respecto a su versión anterior, lo que causó que los
desarrolladores se enfurecieran al encontrarse una nueva API e incluso que todo el nuevo
código está escrito en TypeScript, que no todo el mundo es experto en este compilador.
 todas las novedades que introducía y el lavado de cara que llevaba a Angular 2 a poder
ser comparado con alternativas del momento como React hizo que los desarrolladores
optaran por migrar a esta tecnología. No debemos de olvidar también que Google
trabaja para que las siguientes versiones de Angular sea retrocompatibles 
96
Framework más usados en FRONT-
END
 No framework
 Muchos desarrolladores prefieren no usar ningún framework y
trabajar con código Vanilla, que es como se le conoce a escribir
JavaScript puro.
 Vanilla JS, o Javascript puro trae consigo numerosas ventajas como
el tiempo de carga que te ahorras al no tener un framework que cargar o
el poder estar en contacto con las APIs de Javascript de directamente.

97
JavaScript en BACK-END

 Node js
 es un entorno en tiempo de ejecución multiplataforma, de código abierto,
para la capa del servidor (pero no limitándose sólo a esta capa) basado en
el lenguaje de programación ECMAScript, es asíncrono, con entrada y
salida de datos en una arquitectura orientada a eventos y basado en el
motor V8 de Google.
 Fue creado con el enfoque de ser útil en la creación de programas de red
altamente escalables, como por ejemplo, servidores web

98
Framework más usados en BACK-
END
 Express
 es un framework bastante grande y que resolverá la mayoría de las
necesidades en cuanto a servir un sitio, rutas, templates, etc.
 Koa
 Koa, según su propia definición, es la nueva generación de framework para
la web. Está creada por desarrolladores que estuvieron creando Express y entre
sus cualidades, con las que pretenden que este framework sea mejor que
Express, se encuentran:
 Tamaño (menor que express)
 Mayor expresividad en los métodos, es decir, que sus nombres sean más claros.
 Mayor solidez a la hora de crear aplicaciones web y API’s.

 Meteor
 Va más allá de la definición de framework, puede llegar a ser considerado toda
una plataforma ya que, aunque en su estructura constituye un framework es
capaz de exportar el código escrito en diferentes entornos: web, mobile y
99
desktop.
Framework más usados en BACK-
END
 Hapi
 Este framework se centra en que el código que crees para tu aplicación
sea reusable en vez de estar perdiendo el tiempo con código innecesario.
 Sails
 SailsJS es un framework web creado por Mike McNeil, con el fin de tener
una estructura con la que crear aplicaciones para sus clientes, lo que no
esperaba es que se convertiría en uno de los frameworks más usados
 En comparación al resto de los mencionados, destaca que la mayoría
de acciones pueden ser realizadas con el generador.

100
 JSON
JavaScript Object Notation
Notación de Objetos de
JavaScript

101
JSON

 Es un formato ligero para intercambiar datos, independiente del

lenguaje de programación y de la plataforma:
 Estándar abierto, RFC 4627, año 2006
 Originalmente se consideraba subconjunto del lenguaje JavaScript y se
denominaba JavaScript Object Notation, aunque ya no es parte de
JavaScipt
 Diseñado como alternativa a XML, más ligero.
 Actualmente es más popular que XML
 Carece de algunas características de XML, por ejemplo gramática o
diferencia texto entre texto y metadato

102
JSON
 Es un formato ligero de intercambio de datos.
 Leerlo y escribirlo es simple para humanos, mientras que para las máquinas
es simple interpretarlo y generarlo.
 Está basado en un subconjunto del Lenguaje de Programación JavaScript, 
Standard ECMA-262 3rd Edition - Diciembre 1999.
 JSON es un formato de texto que es completamente independiente del
lenguaje pero utiliza convenciones que son ampliamente conocidos por los
programadores de la familia de lenguajes C, incluyendo C, C++, C#, Java,
JavaScript, Perl, Python, y muchos otros.
 Estas propiedades hacen que JSON sea un lenguaje ideal para el intercambio
de datos.

103
JSON

 JSON está constituído por dos estructuras:

 Una colección de pares de nombre/valor. En varios lenguajes esto es
conocido como un objeto, registro, estructura, diccionario, tabla hash, lista
de claves o un arreglo asociativo.
 Una lista ordenada de valores. En la mayoría de los lenguajes, esto se
implementa como arrays, vectores, listas o secuencias.
 Estas son estructuras universales; virtualmente todos los lenguajes
de programación las soportan de una forma u otra.
 Es razonable que un formato de intercambio de datos sea
independiente del lenguaje de programación.

104
JSON
 En JSON, se presentan de estas formas:
 Objeto
 Array

105
JSON - OBJETO
 Un objeto es un conjunto desordenado de pares nombre/valor. Un objeto comienza
con { (llave de apertura) y termine con } (llave de cierre). Cada nombre es seguido
por : (dos puntos) y los pares nombre/valor están separados por , (coma).

 Un objeto es una secuencia de pares clave-valor, separados por comas

 En json las claves han de ser cadenas
106
JSON - ARRAY
 Un array es una colección de valores.
 Un array comienza con [ (corchete izquierdo) y termina con ]
(corchete derecho). Los valores se separan por , (coma).

107
JSON - ARRAY

 Un valor json puede ser un número, una cadena, un array o un objeto,

además de las constantes true, false y null

108
JSON -NUMEROS
 Los números son como las constantes numéricas de cualquier
lenguaje de programación moderno

109
JSON - STRING
 Las cadenas son como las de cualquier lenguaje de programaci´on
moderno

110
Ejemplos válidos de JSON

 "hola, mundo"
 4243.12
 -947e-5
 null
 [1,2,3,4]
 [1, "azul", [1,2,3]]
 [
1,
"azul",
[
1,
2,
3
]
]

111
Ejemplos válidos de JSON

 { "nombre":"Juan", "apellido":"Pérez"}
 { "v1":true, "v2":null, "v3":false}
 { "nombre": "Juan", "notas":[5.5, 7.2, 6.1]}
 { "nombre": "Juan", "notas": [
5.5,
7.2,
6.1
]
}
 {"nombre":null }
112
Ejemplos NO válidos de JSON

 True
 ’hola, mundo’
 {"hola,mundo"}
 {1:"uno", 2:"dos"}

113
XML VS JSON
 XML
 Ventajas:
 Tiene un formato muy estructurado y fácil de comprender.
 Puede ser validado fácilmente mediante Schemas(XSD)
 Se pueden definir estructuras complejas y re utilizables.
 Desventajas:
 Es mas complicado de entender
 El formato es sumamente estricto.
 Lleva mas tiempo procesarlo
 Un error con los namespace puede hacer que todo el documento sea invalido

 JSON
 Ventajas: 
 Formato sumamente simple
 Velocidad de procesamiento alta
 Archivos de menor tamaño
 Desventajas:
 Tiene una estructura enredosa y difícil de interpretar a simple vista

114
XML VS JSON

115
XML VS JSON

 En el caso de aplicaciones orientadas a mostrar información, es mejor

usar JSON, en lugar de XML, debido a su simplicidad y facilidad de
datos en el lado del cliente.
 XML puede ser indispensable en el servidor, pero JSON es
definitivamente más fácil trabajar en el cliente.
 En caso de aplicaciones orientadas a servicios, si el servicio web
SOAP lo mejor es XML, si el servicios web REST es más fácil y rápido
implementarlo con JSON.

116