Introducción

1. Introducción al lenguaje JavaScript

A. Programas, lenguajes, scripts...

Antes de comenzar: no debemos asustarnos por el lenguaje técnico. Para quién comienza desde cero, estas cosas son lo primero que debiera conocer: qué es eso de programa, lenguaje, scripts....

Un programa no es mas que una serie de instrucciones que le damos a un sistema para que haga cosas. En otras palabras, y en el caso que nos atañe, es decirle a adquio como hacer una determinada tarea. Puede por tanto ser algo tan simple como decirle que sume dos números y nos diga el resultado hasta algo tan complejo como decirle que controle todo un edificio: temperatura, puertas, iluminación... En nuestro caso es algo bastante sencillo, vamos a decirle a adquio que cuando se produzca un evento como que un detector de presencia se activó, haga algo como por ejemplo encender un punto de luz, iniciar el hilo musical, etc.

JavaScript es un lenguaje interpretado, es decir, el programa escrito (código fuente) es leído instrucción a instrucción, se traduce y se ejecuta. O sea, es necesario traducir el programa cada vez que se ejecuta. ¿Quién traduce las instrucciones del programa? Pues muy sencillo, otro programa: el traductor o intérprete.

B. Javascript....

Escribir un programa por lo tanto es simplemente escribir instrucciones para que las ejecute adquio, utilizando para ello un cierto lenguaje. Es como escribir en inglés: necesitas conocer el vocabulario y la gramática del idioma. En nuestro caso usamos el lenguagje JavaScript y necesitas conocer sus reglas y su vocabulario.

C. Variables, datos, objetos...

Para comenzar a utilizar Javascript es necesario conocer algunos conceptos básicos, no podemos empezar a hacer una casa si no sabemos que existen los ladrillos. Un programa es una lista de instrucciones, pero esas instrucciones se deberán ejecutar sobre algo, si damos una instrucción escribir debemos especificar qué es lo que hay que escribir. Es evidente pues que en las instrucciones del programa también deben figurar los datos con que trabajar. Por ejemplo el nombre de una persona es "Juan", esta palabra es un dato. El precio de una manzana en € es 0,10, este número es otro dato. Estos datos no suelen usarse tal cual sino que se almacenan en unos elementos con nombre denominados Variables. En los ejemplos previos usaría una variable, nombre , para guardar "Juan" o precio para guardar 0,10. Si ahora digo a adquio que escriba nombre adquio escribirá su contenido, o sea, Juan. Un pequeño ejemplo para no aburrirnos: entra en adquio y vente a la opción del menú principal de scripts, crea uno nuevo y dale un nombre, en la caja de texto escribe esto:

let nombre = 'juan';
logger.warn(nombre);

¡Acabas de escribir un par de instrucciones en JavaScript! (no te preocupes aún de su significado), como ves has dado un valor a la variable nombre y luego se ha escrito el valor de esa variable. En el ejemplo anterior también podrías haber escrito:

logger.warn('Mi nombre: ' + nombre);

Mediante el símbolo + has concatenado ambas cadenas. Has usado un operador, algo que no es nuevo si has estudiado alguna vez matemáticas. Los operadores son símbolos usados para realizar operaciones con los datos, son los símbolos +, -, /, *, respectivamente sumar, restar, dividir y multiplicar. Como sabes estos operadores se usan con datos numéricos: 4 + 5 son 9. Estas dos instrucciones que has escrito podrían encerrarse en un bloque con un nombre , por ejemplo mepresento() y tendrías una función. Podríamos definir una función llamada quehoraes() que encierre las instrucciones necesarias para que aparezca en el log la hora actual. Es decir mediante las funciones creamos las órdenes que luego podremos darle a adquio para que actúe según nuestro deseo.

Hasta aquí has visto los elementos básicos existentes cualquier lenguaje de programación, pero alguna vez habrás leído que Javascript es un lenguaje que utiliza objetos. ¿Y que es eso de objetos? Los objetos son como una extensión de las variables, una estructura que nos permite agrupar diferentes valores y nombres de funciones.

Una variable numérica sólo puede contener eso, un número: 10 o 20 o 2000, una cadena tipo sólo puede guardar una serie de caracteres "ACAD", "LE18P". Un objeto va mas allá puede guardar varias cosas a la vez. ¿Suena raro?. Veamos un ejemplo muy sencillo: un rectángulo se caracteriza por la longitud de sus lados y por la forma de dibujarlo.

En un programa el rectángulo se asimilaría a un objeto que tendría dos propiedades: base y altura, y un método: como_dibujarlo. Este como_dibujarlo sería una función que dibuja rectángulos. Si un programa define la variable mirectángulo como un objeto de este tipo y contiene la instrucción mirectangulo.como_dibujarlo dibujaría en pantalla un rectángulo.

La ventana inferior del editor que tienes delante es un objeto con propiedades y métodos como log, warm, error... Vamos a hacer algo con este objeto que se llama logger , para ello vete a la ventana de tu script y escribe: js logger.warn('Hola mundo');
¿Has visto lo que ocurre? Has usado el método warn() del objeto logger para saludar. Para ver el resultado debes pulsar sobre el botón inferior Guardar y después en refrescar en la parte inferior de log, a la derecha de este.

Los objetos son bastante mas complicados que lo aquí expuesto, JavaScript puede crearlos y por supuesto manipularlos. Los scripts manipulan los objetos propios del lenguaje y los que nosotros mismos hemos creado.

D. La ejecución de los scripts.

Habitualmente cuando quieres ejecutar un programa basta con buscar el archivo correspondiente y hacer un sencillo click de ratón o pulsar la tecla enter. ¿Pero que pasa con los programas en JavaScript?.

En los ejemplos que has escrito en los apartados anteriores has enviado instrucciones en javascript a adquio, le has dado órdenes en directo. Pero esta no es la forma habitual de ejecutar programas en JavaScript.

Lo normal es que la ejecución se realice de forma automática cuando en adquio sucede un evento, o cuando el usuario decide lanzarlo desde otro script, etc.

Los cambios que adquio recibe del exterior por sus buses, sondas, etc provocan los llamados eventos que reaccionarán en la forma adecuada: si has programado algo y lo has vinculado a dicho evento.

Esos eventos son los que se aprovechan para que se ejecuten las instrucciones que nosotros escribimos en JavaScript. A cada evento se le puede asociar una función para que haga algo predeterminado por nosotros.

Por ejemplo cuando una entrada digital cambia de valor se produce un evento que puede aprovecharse para hacer que se active otra salida. Los eventos tienen la naturaleza de objetos, o sea, poseen métodos y propiedades.

Así cuando se produce un evento podemos saber quien lo dispara, y otras propiedades dependientes de cada evento en concreto.

Pero sigamos con el tema de la ejecución de los programas, veamos que es eso del flujo de programa. Cuando adquio empieza a leer el script para ejecutarlo lo hace en orden secuencial, o sea, empieza con la primera instrucción, sigue por la segunda y así hasta llegar al final.

Esto es lo que se conoce como ejecución secuencial o lineal. Pero a veces es necesario saltarse instrucciones, por ejemplo, construyes un script al que sólo puede entrar si otra variable contiene un valor, deberás escribir una función que pida dicho valor, si es el adecuado continua la ejecución y si no, no se ejecuta el resto del código.

Tu programa no ha seguido un flujo lineal, unas veces ejecutará esa parte de tu código y otras no. Otra situación bastante común: deseas que tu programa recorra todas las variables modificables de un dispositivo y vaya cambiando su contenido, no vas a escribir el mismo código una y otra vez, lo ideal sería escribir las instrucciones y poderlas repetir...

Cualquier lenguaje de programación tiene solucionado este asunto mediante las llamadas sentencias de control del flujo de programa. Son sentencias que permiten que se ejecuten condicionalmente algunos pasos (condicionales) o repetir una serie de instrucciones una y otra vez (bucles). Estas instrucciones la veremos en capítulos posteriores, con ejemplos y pruebas.