El lenguaje JavaScript es el encargado de crear animaciones y comportamientos dinámicos en la web, por lo que es un lenguaje orientado a objetos. En esta entrada os haré una breve introducción al lenguaje JavaScript. De hecho, este es el lenguaje empleado para desarrollar la librería Leaflet que trabaja con mapas, y las librerías D3 y NVD3 para generar figuras a partir de datos en HTML.
Quiero leer...
Introducción al lenguaje JavaScript
Para ilustrar el funcionamiento de JavaScript, vamos emplear el ejemplo de la librería Leaflet. Su adaptación para D3 lo tenéis en esta otra entrada.
Podemos introducir el código JavaScript de Leaflet de dos formas en nuestra web HTML, aunque antes os animo a revisar esta entrada sobre la estructura básica de un archivo HTML. Resumiendo rápidamente, el código JavaScript siempre estará situado entre las etiquetas <script></script>:
- Escribiendo el código directamente entre las etiquetas
<script></script>en el<body></body>.
<script>
var map = L.map ('map' ,{ center : [ 40.418889, - 3.691944 ], zoom : 6 }); L.tileLayer ('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution : '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }). addTo(map);
</script>
- Invocando o enlazando un archivo externo, utilizando las etiquetas
<script></script>(no se puede utilizar<link>para un archivo JavaScript) en el<body></body>o en el<head></head>.
<script src = "https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" ></script>
Tipos de variables en JavaScript
En JavaScript las variables pueden ser de varios tipos:
var string = "cadena de texto";
var numero = 25;
var booleano = true/false;
var nodefinido = undefined;
var nulo = null;
var objeto = { };
Términos básicos en JavaScript
Existen seis términos básicos del lenguaje JavaScript:
- Objeto: es una variable que puede tener propiedades. Siempre empieza la línea con var seguido del nombre que queramos dar al objeto, y bien en esa línea o en la siguiente, se define qué tipo de variable es. Un ejemplo sencillo:
// Un primer modo sencillo y directo var numero = 4; // Un segundo modo dando nombre a la variable (valor) var valor; numero = 4;
- Propiedad: es la característica de un objeto.
- Método: característica que nos permite implementar una funcionalidad asociada a un objeto.
.addTo()es un ejemplo. - Función: es una serie de sentencias que realizan una tarea, pero veamos un ejemplo sencillo para poder comprenderlo.
function sumar(sum1, sum2){
var resultado;
resultado = sum1 + sum2;
return resultado;
};
- Evento: interacción entre el usuario y las aplicaciones web. Este hecho sucede por ejemplo cuando el usuario hace click sobre un icono del mapa y se abre una ventana. En JavaScript existen unas funciones asociadas a cada evento.
- Clase: en Leaflet nos referimos a un objeto con sus propiedades y métodos. Por ejemplo, la clase
L.mapes la que se encarga de crear los mapas.
Sintaxis en JavaScript
El código JavaScript requiere de una “gramática” para que sea comprensible:
- El código distingue entre mayúsculas y minúsculas.
- var es una palabra restringida (no se puede usar en otro contexto).
- Los nombres de las variables no deben comenzar por números.
- Es recomendable finalizar cada línea con punto y coma (;).
- El código JavaScript se lee de arriba a abajo, por lo que el orden es básico.
Incluir comentarios en el código
Hay dos formas de introducir comentarios no ejecutables:
// Escribir aquí el comentario. /* Escribir aquí el comentario */
A donde estan los fondos libres de Firefox?