Introducción al lenguaje JavaScript para uso en Leaflet

El lenguaje JavaScript es el encargado de crear animaciones y comportamientos dinámicos en la web. Además, JavaScript es un lenguaje orientado a objetos. En esta entrada os haré una breve introducción al lenguaje JavaScript, ya que es el lenguaje empleado para desarrollar la librería Leaflet.

Introducción al lenguaje JavaScript para uso en Leaflet

Introducción al lenguaje JavaScript

Podemos introducir el código JavaScript de Leaflet de dos formas en nuestra web HTML (revisar estra entrada de HTML), aunque 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 : '&copy; <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> o en el <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 como 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.map es 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 */

Deja un comentario