02 - JavaScript

Conceptos básicos del lenguaje JavaScript

Índice
 ¿Qué es JavaScript?
 Estandarización
 Compatibilidad
 ¿Qué puede hacer?
 La etiqueta <script>
 JavaScripts externos
 Sentencias
 Bloques de código
 Objetos HTML

ALBERT BASSONS 2
¿Qué es JavaScript?
 JavaScript es el lenguaje de
programación más popular, debido
a que es el lenguaje para la web.

 JavaScript es un lenguaje de
script o de guión (en castellano).

 Los lenguajes de guión son

lenguajes ligeros.

ALBERT BASSONS 3
¿Qué debemos saber?

 Para trabajar con JavaScript, debemos conocer:

Como mínimo hay que tener

conocimiento general de Internet,
saber HTML (y no está de más
CSS) y algo de experiencia en
programación.

ALBERT BASSONS 4
¿Qué es JavaScript?

 Resumiendo, Javascript es un lenguaje de script

interpretado, multi-plataforma, dinámicamente tipado,
orientado a objeto, con pocos elementos sintácticos y
ligero, que se ejecuta en un host (por ejemplo un
navegador web).

 Por su nombre, podría parecer que JavaScript tiene algo

que ver con el lenguaje de programación Java. Pero no es
así.

ALBERT BASSONS 5
¿Qué es JavaScript?

ALBERT BASSONS 6
Lenguaje interpretado

 Como JavaScript es interpretado, requiere de un motor

de JavaScript en la aplicación host (navegador).

 Y aquí comienzan las complicaciones puesto que no todas

las aplicaciones usan el mismo motor, introduciendo así
diferencias en la compatibilidad entre unas y otras.

 De todos modos, como veremos a continuación, existe una

estandarización para asegurar una compatibilidad correcta.

ALBERT BASSONS 7
Versiones de JS
 JavaScript ha ido evolucionando a
lo largo de los años.

 Actualmente la última versión

es ECMAScript 2016; (17 de junio
de 2016).

 Esta versión de JS es totalmente

compatible con el estándar
ECMA-262 versión 5 (ECMAScript
5 o ES5).

ALBERT BASSONS 8
Estandarización
 JavaScript se encuentra estandarizado mediante la ECMA
(European Computer Manufacturers Association),
actualmente conocida por the european association for
standardizing information and communications systems.

 La idea es: ECMA define un estándar y las siguientes

versiones de JS se adaptan a él. En este sentido,
JavaScript es un dialecto de ECMAScript.

 O visto al revés, la versión estandarizada de JavaScript

se llama ECMAScript, que se comporta igual en todas las
aplicaciones lo soporten.

ALBERT BASSONS 9
Estandarización

 Desde el lanzamiento del estándar en junio de 1997, ha

existido ECMAScript 2, 3 y la versión más usada
actualmente, que es la 5. La cuarta versión fue abandonada.

 En junio de 2015 se publico la versión ECMAScript 6 (ES6),

pero las versiones actuales de JavaScript aún no
implementan algunas de sus características (pero lo irán
haciendo…).

ALBERT BASSONS 10
Compatibilidad
Application Dialect and latest ECMAScript edition
version
Google Chrome, the V8 engine JavaScript ECMA-262, edition 5
Mozilla Firefox, Gecko, JavaScript 1.8.5 ECMA-262, edition 5
SpiderMonkey, y Rhino
Safari, Nitro engine JavaScript ECMA-262, edition 5.1
Opera ECMAScript with some ECMA-262, edition 5.1
JavaScript 1.5
and JScript extensions
KHTML layout engine, KDE's JavaScript 1.5 ECMA-262, edition 3
Konqueror
Adobe Acrobat JavaScript 1.5 ECMA-262, edition 3

ALBERT BASSONS 11
Compatibilidad
 Compatibilidad con ES5: http://kangax.github.io/compat-table/es5/

ALBERT BASSONS 12
Compatibilidad
 Nosotros hablaremos de JavaScript y no ECMAScript.

 Sin embargo, sí debemos tener en cuenta que veremos

JavaScript compatible con el estándar ECMAScript 5 y, por
tanto, funcionará en los navegadores que usaremos, tal y
como se muestra en las tablas de las transparencias
anteriores.

ALBERT BASSONS 13
JavaScript
 Javascript contiene una librería estándar de objetos como:
Array, Date, y Math, y un núcleo de elementos de
lenguaje como son: operadores, estructuras de control y
sentencias.

 Javascript es fácil de aprender si ya se conoce otro

lenguaje de programación.

ALBERT BASSONS 14
JavaScript
 El núcleo de Javascript se puede extender para multitud de
propósitos, incluyendo nuevos objetos como por ejemplo:

 Client-side JavaScript: extiende el núcleo aportando elementos

para controlar un navegador web y su modelo de objetos del
documento (DOM).

 Existe también la extensión de servidor que trabajar con base

de datos (nosotros usaremos PHP, aunque si queréis aquí
tenéis un listado de tecnologías que se pueden usar, si alguien
prueba Node.js con el servidor v8 que nos lo haga saber ).
https://en.wikipedia.org/wiki/Comparison_of_server-side_JavaScript_solutions

ALBERT BASSONS 15
La etiqueta <script>

 Para insertar JavaScript en una página HTML, se usa la

etiqueta <script>.

 Las etiquetas <script> y </script> marcan el inicio y

el final del código. En ellas podemos ubicar código
directamente (que se ejecutará cuando el navegador
alcance dicho punto al cargar la página) o bien funciones
que llamaremos posteriormente.

ALBERT BASSONS 16
La etiqueta <script>

ALBERT BASSONS 17
La etiqueta <script>
 En el ejemplo anterior, el script se ejecutará
directamente al cargar la página.

 Más adelante veremos que podemos crear funciones y

tratar eventos, de forma que los scripts se ejecuten en
momentos concretos, no durante la carga de la página.

 El código JavaScript se puede colocar en el body o en el

head de la página, así como en ficheros externos de
extensión *.js

ALBERT BASSONS 18
¿Qué puede hacer?

 Con JavaScript podemos hacer muchísimas cosas, y en el

ámbito de las páginas web (lado del cliente) podemos:

 Tratar eventos e interactuar con el usuario.

 Crear, modificar o eliminar elementos del documento.
 Cambiar el contenido de los elementos.
 Modificar los atributos de los elementos.
 Cambiar dinámicamente el estilo de un elemento.
 Realizar cálculos.
 Validar inputs en formularios.
 Temporalizar acciones…

ALBERT BASSONS 19
Ejemplos
 Se pueden tratar eventos e interactuar con el usuario.

ALBERT BASSONS 20
Ejemplos

 Respecto al ejemplo anterior, cuando se ponen atributos

HTML para el tratamiento de eventos, el valor que hay que
indicar en su interior es directamente código JS sin que hagan
falta las etiquetas <script></script>.

 Es parecido a cuando ponemos estilos inline en un elemento,

caso en el que usamos el atributo style e indicamos como
valor código CSS sin necesidad de indicar <style> y
</style>.

ALBERT BASSONS 21
Ejemplos

 JavaScript puede crear elementos HTML (de varias formas,

esta es la más sencilla).

ALBERT BASSONS 22
Ejemplos

 JavaScript puede modificar el estilo CSS de los elementos

de nuestras páginas.

ALBERT BASSONS 23
Ejemplos (1 de 2)

ALBERT BASSONS 24
Ejemplos (2 de 2)

ALBERT BASSONS 25
Ejemplos (1 de 2)
 Con JS podemos crear aplicaciones.

ALBERT BASSONS 26
Ejemplos (2 de 2)

ALBERT BASSONS 27
Ejemplos

 JavaScript puede modificar los

elementos HTML (atributos y
contenido).

ALBERT BASSONS 28
Scripts externos
 Podemos extraer el código JavaScript del fichero HTML de
forma parecida a como hicimos con las hojas de estilo.

 Se puede hacer tanto en el head como en el body

(normalmente en el head), los ficheros deben tener la
extensión *.js

ALBERT BASSONS 29
Sentencias
 Se entiende como sentencia o instrucción, la línea de código
hasta el punto y coma. El punto y coma separa instrucciones
en JavaScript

 Podríamos poner más de una sentencia por línea usando

puntos y comas (no es nada recomendable, el código es más
difícil de comprender).

 En un bloque, las sentencias son ejecutadas en orden, de

arriba abajo.

ALBERT BASSONS 30
Escribir en el documento

 Se pueden escribir textos directamente sobre el documento

mediante document.write(‘texto’);. Esto solamente lo
haremos cuando el script esté en el body.

ALBERT BASSONS 31
Escribir en consola

 Se pueden escribir mensajes en consola mediante

console.log(‘mensaje’);. Esto se utiliza habitualmente
en el proceso de depuración del programa.

ALBERT BASSONS 32
Bloques de código

 Generalmente, un conjunto de
sentencias o instrucciones se conoce
como bloque.

 Sin embargo, al hablar de ámbitos, nos

referiremos como bloque a la porción de
código que se encuentra dentro de
cualquier estructura de control de flujo
(habitualmente entre { } ).

ALBERT BASSONS 33
Comentarios
 Se usa la doble barra // para poner comentarios de una línea
y la combinación /* y */ para comentarios de múltiples
líneas.

 El navegador no interpreta los comentarios, como si no

estuvieran ahí.

ALBERT BASSONS 34
Comentarios

ALBERT BASSONS 35
Consideraciones importantes
 Se diferencias minúsculas de mayúsculas: numero es
diferente de Numero.

 No se tienen en cuenta los espacios extra: var i = 3; es

equivalente a var i=3;

 Los nombres de las variables, funciones, métodos…

solamente podrán contener letras, números y el guión bajo,
no pudiendo comenzar nunca por número.

 JS utiliza la codificación de caracteres UTF-8.

ALBERT BASSONS 36
Objetos HTML

 Desde JavaScript podemos tomar elementos HTML y tratarlos

como objetos de programación. Los objetos en JS tienen
básicamente propiedades y métodos (ya lo veremos).

 Imaginemos el siguiente elemento HTML:

ALBERT BASSONS 37
Objetos HTML

 El objeto puede ser tomado desde Javascript así:

De esta forma imag es un objeto que contiene todas las

propiedades del elemento HTML (src, id, width…).

ALBERT BASSONS 38
Objetos HTML

 Como se puede ver en el ejemplo anterior, se usa el operador

punto para poder acceder a los diferentes campos del objeto
imagen, que son los atributos del elemento HTML.

 De la misma forma, se puede acceder al estilo de los

elementos HTML usando el objeto interno style.

ALBERT BASSONS 39
Objetos HTML

 Se puede modificar el contenido de los elementos HTML

usando la propiedad innerHTML.

 Como puedes ver, document.getElementById(‘…’) es

una manera sencilla de obtener un elemento HTML de nuestra
página web a partir de su id.

ALBERT BASSONS 40
Ejercicios
Comenzando con JavaScript
Ejercicios

 Prueba los ejemplos de estas transparencias.

Cuando comprendas cómo funcionan, modifícalos para

que hagan acciones ligeramente diferentes.

ALBERT BASSONS 42