JavaScript, el lenguaje del Marketing Digital (parte 1)

Es uno de los lenguajes de programación más utilizados en la actualidad, debido en gran parte a su versatilidad. Lo podríamos definir como el “santo grial” de la mayor parte de desarrollos vinculados a internet. Aunque apenas ha evolucionado en su base, su integración tecnológica se puede observar en multitud de plataformas online. De hecho, por ejemplo, cualquier píxel usado en Marketing Digital hoy en día está implementado bajo este lenguaje. En este caso, nos vamos a centrar exclusivamente en el lenguaje JS sin ningún tipo de artificio añadido (como puede ser la librería jQuery u otras opciones similares), ya que este es el único que puede asegurarnos un correcto funcionamiento en cualquier tipo de circunstancia.

Antes de nada, hemos de comprender cómo funcionan y cómo se estructuran la gran mayoría de lenguajes de programación. Todos ellos hacen uso de varias características tipo: variables, funciones, expresiones lógicas y estructuras de control.

Una variable se puede definir como un elemento capaz de almacenar un valor. Su tipología en JS es similar a la de otros lenguajes, aunque con pequeñas salvedades. Por ejemplo, no hay ninguna diferencia entre números de tipo entero y decimales. Para JS todos son números decimales separados por un punto (referencia anglosajona). La forma de declarar una variable es muy sencilla, simplemente debemos escribir la palabra reservada var, seguido del nombre que le queramos dar y asociarle un valor. Es importante tener en cuenta que sólo los valores de tipo cadena de texto (string) o fechas van entrecomillados. En el siguiente código se muestran varias declaraciones de variables de distinto tipo.

var fecha = new Date(1985, 2, 25);	// Se recoge la fecha 25 de febrero de 2019
var edad = 35;	// Se guarda un número entero, aunque para JS realmente sería el número decimal 34.0
var miNombre = "Joseba";	// Se guarda la cadena de texto Joseba
var notaMasAlta = Math.max(9, 1, 4, 10, 2, 5);	// Se selecciona el número más alto, es decir, el 10
var esDeBilbao = true;	// Variable booleana que sólo puede contener dos valores: true o false

// En las dos siguientes líneas de código se detalla como inicialmente se almacenan 7 nombres propios en una variable de tipo array y después en otra variable se guarda el nombre situado en la posición real 4 del mismo array. Concretamente el nombre Estibaliz. Se debe tener en cuenta que en los arrays siempre se empieza a contar desde la posición 0.

var miFamilia = [Maria, Engracia, Jose Maria, Estibaliz, Iraia, Lander, Javier];
var miHermana = miFamilia[3];

En algunos casos, concretamente a la hora de declarar o definir cadenas de texto, necesitaremos llevar a cabo lo que se conocen como secuencias de escape. Son caracteres que, precedidos por una contrabarra (), dejan de tener un significado literal en favor de realizar algún tipo de acción especial. Por ejemplo, si escribiéramos la línea de código

 var infoPersonal = "Joseba Ruiz n Ciudad Bilbao"; 

estaríamos almacenando en la variable infoPersonal la información lista para ser mostrada en dos líneas diferentes.

Unido de alguna forma a lo anterior, JS permite la conversión entre tipologías a través de métodos como toString(), el cual transforma cualquier valor a formato texto.

Para finalizar con las variables, es imprescindible que entendamos su ámbito de actuación. También conocido como scope, hace referencia al alcance de una variable dentro del código. Podemos distinguir básicamente dos tipologías: Las variables globales, las cuales son accesibles desde cualquier lugar de nuestro código, y las variables locales, las cuales sólo se accionan dentro de una determinada función.

Pero ¿qué es una función programáticamente hablando? Es un procedimiento conformado por líneas de código cuya única finalidad es llevar a cabo una determinada tarea. Habitualmente devuelve un valor concreto a través de la palabra reservada return.

function nombreFuncion(x, y) {
     return x+y;
}

Las variables x e y dentro del paréntesis se identifican como parámetros. Estos contienen y transmiten al interior de la función valores previamente asignados en otras partes del código. Por otro lado, los corchetes es la forma que tiene JS para aglutinar todas las líneas de código bajo una misma función o estructura de control (For, While, If, etc.), las cuales veremos a continuación. Como cabría esperar, una función puede contener a otra dentro de ella. Se las conoce como funciones anidadas. Esto ayuda a que futuros desarrolladores puedan interpretar el código y modificarlo sin lugar a equívocos (código escalable).

function sumarCuadrados (a, b) {
     function cuadrado(x) {
          return x*x;
     }
     return cuadrado(a) + cuadrado(b);
}

En este sentido y siempre que sea posible, intentaremos desglosar una función en más de un procedimiento. Es decir, trataremos de crear funciones elementales con identidad propia. De esta forma podremos utilizarlas en otros emplazamientos. Supongamos lo siguiente:

function crearListaOrdenada(lista){	// Se envía un array de elementos como parámetro
     function aperturaLista()
          lis='';     // Etiqueta HTML necesaria para inicializar una lista
     function cierreLista()
          lis=lis+'';	// Etiqueta HTML que finaliza un listado. Cierre de la lista anterior

     var lis='';	// Se crea una variable lis y se le añade el valor “vacío” (doble comilla simple)
     aperturaLista();	// Llamada a la función que inicializa la lista
     var i;
     for(i=0;i<lista.length;i++)     // Inserción de varios elementos en la lista creada
          lis=lis+''+lista[i]+'';

     cierreLista();	// Llamada a la función que finaliza la inserción de más elementos en una lista
     return lis;	// Se devuelve la lista correctamente creada en formato HTML
}

En este ejemplo, además de poder observarse cómo se llaman a las funciones, se puede apreciar otra curiosidad programática. Tanto en la declaración de funciones como en la de estructuras de control, si sólo añadimos una única línea de código no es necesario el uso de los corchetes (apertura y cierre). Lo cual simplifica más aún nuestro código.

La próxima semana seguiremos aprendiendo un poco más sobre este lenguaje tan útil y esencial para quienes nos dedicamos al ámbito del Marketing Digital.