PDF de programación - Javascript I

JavaScript I

Escuela Técnica Superior de Ingeniería de Telecomunicación

Universidad Rey Juan Carlos

gsyc-profes (arroba) gsyc.urjc.es

Febrero de 2018

GSyC - 2018

JavaScript

1

©2018 GSyC
Algunos derechos reservados.
Este trabajo se distribuye bajo la licencia

Creative Commons Attribution Share-Alike 4.0

GSyC - 2018

JavaScript

2

Contenidos

Introducción
1
2 Holamundo
3 node.js
4 Sintaxis
5 Tipos de datos
Identificadores
6
7 Operadores
8 Funciones
9 Tipos de variables
10 Sentencias de control
11 Procesamiento de cadenas
12 Arrays
13 Objetos
14 Referencias

GSyC - 2018

JavaScript

3

Introducción a JavaScript

Introducción

JavaScript es un lenguaje de programación. Junto con HTML y
CSS, es una de las principales tecnologías para presentar
contenidos en la World Wide Web

Creado por Brendan Eich, de Netscape, en 1995 como
lenguaje de scripting para el navegador. Tardó 10 días en
contruir el primer prototipo
Está presente en el 100 % de los navegadores web modernos,
donde no tiene rival

GSyC - 2018

JavaScript

4

Introducción

El nombre JavaScript es poco afortunado. En su día se
eligió por motivos de marqueting, para destacar que su
sintaxis es similar a la de Java. Pero ahí acaba el parecido, es
un lenguaje completamente distinto
En 1996, Netscape encarga a Ecma International la
normalización del lenguaje. La marca java pertenecía a Sun
(luego a Oracle), así que el nombre formal del lenguaje se
cambió a ECMAScript, aunque en la práctica lo normal es
seguir llamándolo JavaScript

GSyC - 2018

JavaScript

5

JavaScript Everywhere (1)

Introducción

El éxito de internet lleva este lenguaje a ser masivamente utilizado,
no solo en el navegador, se habla de JavaScript everywhere.
Aunque no fue inicialmente diseñado para esto, hoy puede usarse
también en
node.js
Entorno de ejecución de JavaScript para el servidor.
nw.js (antiguo node webkit)
Electron (antiguo Atom Shell)
Son entornos que permiten desarrollar aplicaciones nativas de
escritorio mediante tecnologías web (JavaScript, html, css...)

GSyC - 2018

JavaScript

6

JavaScript Everywhere (2)

Introducción

Mozilla Rhino. Implementación de JavaScript en java. Permite
ejecutar código JavaScript fuera del navegador, en cualquier
entorno donde esté disponible java
Express.js
Es un Web Application Framework, permite desarrollar
aplicaciones web en el servidor. Basado en Node.js.
Alternativa a Django o Ruby on Rails

GSyC - 2018

JavaScript

7

Críticas a JavaScript

Introducción

Es frecuente hacer críticas negativas a JavaScript, por diferentes
motivos, algunos justificados, otros no tanto

No es un lenguaje especialmente elegante, sobre todo las
primeras versiones. Fue diseñado apresuradamente y eso se
nota. Pero ha ido mejorando mucho con el tiempo

En JavaScript moderno, si el programador usa la técnicas
adecuadas, se puede generar código de gran calidad
Los primeros intérpretes eran lentos. Esto también ha
mejorado mucho. Incluso hay subconjuntos estáticos de
JavaScript como asm.js cuyos programas pueden ejecutarse al
70 % de la velocidad del código compilado en C++

Esto es muy adecuado para algoritmos que verdaderamente lo
necesiten

GSyC - 2018

JavaScript

8

Introducción

Todos los números son del mismo tipo: float
La distinción entre los tipos undefined y null es bastante
arbitraria
Hasta ECMAScript 3 no tenía excepciones. Los programas
fallaban silenciosamente
Hasta ECMAScript 6, no tenía variables limitadas a un
bloque, solo globales o limitadas a la función
Hasta ECMAScript 6, no tenía soporte (nativo) para módulos
Los números se representan como Binary Floating Point
Arithmetic (IEEE 754). Esto tiene sus ventajas para trabajar
con binarios, pero representa muy mal las fracciones decimales
> 0.3===0.3
true
> 0.1+0.2===0.3
false
> 0.3-(0.1+0.2)
-5.551115123125783e-17

GSyC - 2018

JavaScript

9

Introducción

La barrera de entrada para empezar a programar en JavaScript
es baja. Como cualquiera puede programar en JavaScript, el
resultado es que en JavaScript acaba programando cualquiera.
Esto es, hay mucho código de mala calidad
Es orientado a objetos. Pero en las versiones anteriores a
ECMAScript 6, solo admitía orientación a objetos basada en
prototipos. Este modelo es distinto al de lenguajes como C++
o Java, que están basados en clases y herencia. Si el
programador fuerza al lenguaje a un uso como el de C++ o
Java, el resultado es antinatural, incómodo y problemático.
It’s not a bug, it’s a feature
ECMASCript 6 admite programación orientada a objetos
basada en prototipos y programación orientada a objetos
basada en clases

GSyC - 2018

JavaScript

10

Versiones de JavaScript (1)

Introducción

Brendan Eich crea JavaScript. 1995
ECMAScript 1. 1997. Primera versión normalizada
ECMAScript 2. 1998. Pequeños cambios
ECMAScript 3. 1999
do-while, regexp, excepciones, mejor tratamiento de cadenas
(entre otros)
ECMAScript 4.
Abandonado en 2008, por falta de acuerdo sobre si las
mejoras deberían ser más o menos drásticas

GSyC - 2018

JavaScript

11

Versiones de JavaScript (2)

Introducción

ECMAScript 5. Año 2009. Modo strict, nuevos arrays, soporte
JSON (entre otros)
ECMAScript 6. Año 2015
Cambios muy relevantes: módulos, orientación a objetos
basada en clases, parámetros opcionales en funciones,
variables locales a un bloque

En el año 2015 los navegadores en general no soportaban
ECMAScript 6, era necesario transpilar el código a
ECMAScript 5.
En la actualidad (finales del año 2017) cualquier navegador
medianamente actualizado lo soporta. Con alguna excepción,
por ejemplo el uso de módulos. La necesidad del transpilador
es cada vez menor

GSyC - 2018

JavaScript

12

Características de JavaScript

Introducción

Muy integrado con internet y el web
La práctica totalidad de las herramientas necesarias para su
uso son software libre
El lenguaje no especifica si es interpretado o compilado, eso
depende de la implementación

Técnicas modernas como la compilación JIT (Just In Time) y
el uso de bytecodes hacen que la división entre compiladores e
intérpretes resulta difusa
Podemos considerarlo un híbrido. Los script engines (motores)
de JavaScript modernos tienden a ser más compilados que las
primeras versiones
Se acerca más a un lenguaje interpretado: el motor necesita
estar siempre presente, la compilación se hace en cada
ejecución y siempre se distribuye el fuente y solo el fuente

GSyC - 2018

JavaScript

13

Introducción

Es dinámico. Los objetos se crean sobre la marcha, sin definir
una clase. A los objetos se les puede añadir propiedades en
tiempo de ejecución
Es dinámicamente tipado. El tipo de las variables y objetos
puede cambiar en tiempo de ejecución
Multiparadigma, admite los paradigmas de programación:

Imperativa
Funcional
Basada en eventos (event-driven)
Orientada a objetos basada en prototipos
Desde ECMAScript 6, orientada a objetos basada en clases
(orientación a objetos tradicional)

GSyC - 2018

JavaScript

14

Holamundo

Holamundo

JavaScript no tiene una forma nativa de mostrar texto, emplea
distintos objetos, dependiendo de en qué entorno se ejecute

En el navegador puede escribir HTML mediante
document.write()
Puede usar console.log()

En el navegador el texto saldrá por una consola (del propio
navegador)
En node.js, por la salida estándar

Puede abrir una ventana con window.alert()

GSyC - 2018

JavaScript

15

Holamundo en HTML, incrustrado

Holamundo

<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<title>Hola, mundo</title>

</head>
<body>

</body>

</html>

<script>
document.write("Hola, mundo");
</script>

El elemento <script> puede aparecer 1 o más veces, tanto en la
cabecera como en el cuerpo del documento HTML

http://ortuno.es/holamundo01.html

GSyC - 2018

JavaScript

16

Holamundo en HTML, fichero externo

Holamundo

<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<title>Hola, mundo</title>
<script src="js/holamundo.js"></script>

</head>
<body>
</body>

</html>

holamundo.js:
console.log("Hola, mundo");

Si la codificación del script es diferente de la codificación del
fichero HTML, se indica con un atributo charset en el elemento
<script>

GSyC - 2018

JavaScript

17

http://ortuno.es/holamundo02.html

Holamundo mínimo aceptado

Holamundo

Apurando la norma de HTML, pueden incluso omitirse los
elementos <html>, <body> y <head>. Se consideran entonces
sobreentendidos, el siguiente ejemplo también sería válido, aunque
no recomendable en absoluto

<!DOCTYPE html>

<meta charset="utf-8">
<title>Hola, mundo</title>
<script src="js/holamundo.js"></script>

http://ortuno.es/holamundo03.html

GSyC - 2018

JavaScript

18

node.js

node.js

El entorno Node.js permite usar JavaScript como un lenguaje
de programación en el servidor o en la consola
También es útil para desarrollar código que luego vaya a
ejecutarse en el navegador

¿Donde colocar el código?

Nunca es recomendable incrustar el JavaScript dentro del
HTML, excepto tal vez para páginas muy sencillas
Un defecto muy habitual es organizar el código de la lógica de
negocio en función de las pantallas, (aunque sea en un fichero
externo)
O peor aún: repartirlo por los botones y formularios

Sugerencia: desarrolla la lógica de negocio en Node.js, luego
intégralo en el HTML

Excepto tal vez cosas muy sencillas
JavaScript

GSyC - 2018

19

¿nodejs o node?

node.js

El intérprete de Node.js en principio se llama node

En Linux

Este nombre ya estaba ocupado por otro programa. Así que las
distribuciones Linux lo renombran a nodejs
Si el otro node no está instalado, normalmente
/usr/bin/node es un enlace a /usr/bin/nodejs
Por tanto, podemos usar indistintamente cualquiera de las dos
formas
En resumen: según esté configurado nuestro Linux, el
intérprete será node, nodejs o ambos indistintamente

En MacOS
Generalmente se mantiene el nombre node

GSyC - 2018

JavaScript

20

node.js

Entorno Linux
Instalación
apt-get install nodejs