Llevo años queriendo aprender a programar, pero nunca me he puesto a ello. Voy a contarte mis peripecias como programador novel. En el tercer episodio doy los primeros pasos con JavaScript.
En el primer artículo, “En busca de mi primer lenguaje“, sopesé pros y contras de varios lenguajes, mientras que en el segundo, “Y el lenguaje elegido es…“, presenté el lenguaje escogido, JavaScript, y te contaba qué recursos iba a emplear.
Ahora toca dar los primeros pasos, pero no te asustes: serán muy básicos.
Recordatorio: qué hace falta para empezar
Como te expliqué en el artículo anterior, para empezar solo necesitas un navegador web y un editor de texto. Mi navegador favorito es Chrome, que incluye por defecto unas fantásticas herramientas de desarrollo que puedes invocar pulsando la tecla F12.
Estas herramientas son todo lo que necesitas para dar tus primeros pasos con el lenguaje. Libros, artículos y cursos interactivos son recursos más que bienvenidos, pero donde vas a “ensuciarte las manos” será en el navegador web.
Abriendo la consola de Chrome
La consola de Chrome es el sitio donde puedes probar el código de manera interactiva. Cuando presiones F12, verás aparecer las herramientas de desarrollo en la mitad inferior de la ventana. Haz clic en Console para ver la consola.
Para mayor comodidad, te aconsejo que separes la consola de la ventana principal; basta con hacer clic en el botón que aparece en la esquina inferior izquierda. Y como no vas a “dibujar” nada, no te hace falta ver Chrome: puedes minimizarlo.
La segunda cosa que debes hacer es limpiar el historial de la consola. Es una forma de hacer borrón y cuenta nueva, de tener una página en blanco. Para ello, haz clic derecho en el cuarto botón de la barra. Puedes hacerlo todas las veces que quieras.
Cómo funciona la consola de Chrome
Escribir en la consola es como chatear con el navegador: escribes un comando, presionas Intro y el navegador te contesta con la mayor rapidez posible. Pero para hablarle necesitas escribir código. Más en concreto, código JavaScript.
Si escribes algo que no es código, esto es lo que verás:
Un error. El navegador cree que lo que acabamos de escribir es algo que debería estar definido en algún sitio, pero al no captar la referencia, se queja. Y es que al navegador, que no deja de ser un programa, hay que ponérselo todo muy clarito.
Prueba ahora a escribir alert(“Hola, mundo”) y presionar la tecla Intro. Verás que en Chrome aparece un cuadro de aviso con el texto indicado. Es el comando más simple que existe, pero en algunos casos resulta valioso. ¡Y ha funcionado!
Habrás notado que justo debajo del comando aparece la palabra “undefined”. De momento, no te preocupes por eso. Es la forma que tiene la consola de Chrome de decirte que el código que has ejecutado no ha devuelto ningún valor (oficialmente).
Así funciona la consola de Chrome: pegas texto, pulsas Intro y ves el resultado.
Partes de un programa: saquemos la batidora
Un programa toma información, hace algo con ella y devuelve un resultado. En este sentido, un programa es como una máquina invisible que reside dentro del ordenador. Una máquina que se construye con palabras que tú mismo puedes escribir.
Para que lo entiendas mejor voy a usar una metáfora. Supongamos que queremos crear un programa llamado Batidora, que tritura comida hasta obtener un delicioso zumo. Es un ejemplo ridículo, pero te ayudará a comprender la lógica de los programas.
En su forma más básica, el programa Batidora constaría de cuatro pasos:
- Preparar y encender la batidora
- Poner comida en la jarra
- Triturar la comida hasta obtener zumo
- Servir el zumo en un vaso
En el universo de un ordenador nada viene dado desde el principio. Hay que definir cada cosa de antemano: lo que vamos a usar, las operaciones que hay que efectuar, etcétera. ¿Qué necesitaríamos para que este programa funcionara?
Para empezar, un procedimiento que pusiera la comida en la jarra. A continuación, algo que la triturara. Finalmente, una instrucción que le dijera a la batidora que debe servir el batido en un vaso. Sería una preciosa licuadora robótica, sí.
“Jarra” y “Vaso” son nuestras variables. Son los recipientes de lo que vamos a triturar, que es la comida. Las piezas de comida son nuestros valores. Jarra y Vaso siempre estarán ahí: son parte de la batidora. Lo que va cambiando es la comida.
El acto de triturar la comida hasta obtener el zumo es una función de la batidora, una de las muchas que tiene. Una función puede incluir condiciones (como ignorar objetos que no son comida) y bucles (triturar hasta que la comida esté líquida).
Obviamente, un programa informático no es una receta de cocina, pero en esencia se parece: hay una serie de pasos a seguir y repetir, unos objetos que alteran a otros objetos y unas condiciones que deben cumplirse.
Contenido y recipientes: valores y variables
En nuestra metáfora, lo que la batidora procesa es comida, y la comida está en contenedores. Los contenedores son las variables; el contenido son los valores.
Los datos que un programa maneja se componen de valores. A efectos prácticos, los valores pueden ser números o palabras. Usamos los números para efectuar cálculos y las palabras para comunicar (informar, preguntar, comentar).
En esencia, JavaScript admite dos tipos básicos de valores (o tipos primitivos): números y cadenas de texto. Hay otros tipos de tipos de datos especiales, pero los veremos más adelante; de momento son números y palabras.
En la consola los números se pueden escribir directamente. Por ejemplo, prueba a escribir el número 132399 en la consola de Chrome y presionar Intro. Verás que Chrome se limita a repetir el valor. Es algo así como un “lo he visto”.
Las cadenas de texto, por otro lado, requieren comillas. ¿Por qué? Porque las órdenes especiales del lenguaje, las que permiten construir los programas, también son palabras. Las comillas le dicen al ordenador que lo que has escrito es un texto.
En JavaScript las variables se “declaran” escribiendo “var” seguido del nombre que queramos darle a la variable. A esta acción se le denomina también “inicializar” la variable. Declararlas antes de usarlas es una costumbre muy sana, puesto que evita confusiones posteriores.
Al escribir el identificador de la variable en la consola, esta devuelve su valor actual
Si preparas un plato, mejor tenerlo todo organizado antes de cocinar, y ese es el sentido que tiene la declaración de variables: tenerlo todo ordenado y listo para el uso.
JavaScript es muy liberal en cuanto a los nombres que puedes darle a tus variables. Tan solo procura que empiecen con una letra del alfabeto y que no contengan espacios. Tus “recipientes” deben ser fácilmente reconocibles: es bueno para ti y para el programa.
Verter y comparar: los muchos usos de =
Como ves, al inicializar una variable (var = “Algo”), estás usando el operador de igualdad =. En JavaScript tiene muchos usos y significados diferentes según el contexto. Cada vez que usas = estás poniendo una “tubería” para “transvasar” un valor.
Fíjate como la variable Numerito va cambiando cada vez de valor dependiendo de lo que le digamos a la consola. Esto es tremendamente flexible y útil cuando se desea actualizar lo que tenemos en una variable mientras ejecutamos un programa.
Pero, si = se utiliza para asignar, ¿cómo se expresa entonces la igualdad? Para eso, JavaScript tiene operadores de igualdad y comparación. El operador == verifica si hay igualdad, mientras que != hace otro tanto para la desigualdad. Mira el ejemplo:
Si la igualdad o desigualdad no se cumple, la respuesta es “falso”; si se cumple, es “verdadero”. Lo mismo pasa cuando probamos a comparar con los operadores “mayor que” y “menor que”, junto con sus variantes “mayor o igual que” y “menor o igual que”:
Como ves, es posible comparar incluso cadenas de texto: el orden de los caracteres se basa en el estándar Unicode, y JavaScript lo respeta para determinar qué letra viene antes o después. En la práctica, no pasa de ser una mera curiosidad.
Trocear y mezclar: operadores aritméticos
Tener datos almacenados es un buen comienzo, pero así como un plato de pasta no se cocina con solo poner los ingredientes sobre la mesa, tampoco un programa hace algo si no le das instrucciones simples y concretas.
En una batidora, por ejemplo, hay funciones para trocear, mezclar, licuar. En JavaScript, que es uno de los muchos idiomas que entiende tu máquina, las operaciones básicas son las mismas que tienes en una calculadora de bolsillo.
Con los números, puedes hacer operaciones matemáticas. Prueba a escribir una operación aritmética simple en la consola, como 2 + 2, y presiona Intro. Como ves, el resultado es 4. Quizá Chrome se sienta humillado por hacer de calculadora.
El signo + que has usado es un operador. En JavaScript hay cinco que son básicos:
+ Sumar
– Restar
* Multiplicar
/ Dividir
% Módulo (resto de división)
Todos ellos pueden usarse igual que harías en una calculadora. Recuerda que JavaScript da a cada operador una importancia distinta a la hora de efectuar cálculos. Así, multiplicación y división se hacen antes que sumas y restas.
Para añadir claridad a las operaciones puedes usar paréntesis simples. Otra buena costumbre estilística que deberías seguir es poner espacios entre paréntesis, valores y operadores. Eso hará que el código sea más legible.
Hay una cosa más que deberías saber sobre los operadores: algunos se pueden usar para más de una cosa. Esto en programación se denomina “sobrecarga de operadores”. Puedes usar el tenedor para pinchar, pero también para batir.
En el caso del otro gran tipo de valores, las cadenas de texto, puedes usar el operador + para unir dos o más en una sola. A esta acción se le conoce como “concatenar”, y resulta muy útil a la hora de trabajar con texto.
Para cosas más complejas, como invertir o eliminar caracteres, sin embargo, tendrás que escribir tus propias funciones, algo que veremos más adelante, cuando lleguemos a las funciones, bloques de código que puedes reutilizar todas las veces que quieras.
Hora de usar un editor de verdad…
Por ahora has estado escribiendo en la consola de Chrome. Ahí es donde seguirás probando tu código. Pero para crear tus programas conviene que uses un editor de texto en condiciones, uno como Sublime Text, que tiene coloreado de sintaxis y formateo automático del código.
El coloreado de la sintaxis ayuda muchísimo a leer el código. Nota, por ejemplo, que los valores de texto aparecen en amarillo, mientras que los números tienen un color lila. Por otro lado, Sublime Text sugiere automáticamente palabras (variables, órdenes) para que ahorres tiempo al escribir.
Lo más importante, sin embargo, es la forma en que Sublime Text formatea el código, añadiendo tabulaciones y saltos de línea para estructurar mejor el código que escribes, y facilitar así la legibilidad posterior para ti y para otras personas. Lo mejor de todo es que el editor lo hace por ti, dejando que tú te concentres en el código.
Las líneas en gris oscuro son comentarios. Se escriben empezando con //
Si bien no existe un estándar en cuanto al estilo que hay que seguir a la hora de escribir código JavaScript, es recomendable seguir uno con el que te sientas cómodo y que permita una alta legibilidad. A mí me gusta Idiomatic.js.
Ejercicios en Codecademy
Entra en la sección JavaScript de CodeAcademy y realiza la primera unidad “Getting Started with Programming”. En ella se introducen algunas cosas que veremos en el próximo capítulo, pero no te será difícil entender su utilidad.
Conclusión: ¡ingredientes listos!
Hasta ahora hemos tocado los ingredientes básicos de un programa hecho en JavaScript: valores, variables y operadores. En el próximo capítulo veremos cómo hacer que la “batidora” funcione, gracias a funciones y bucles.
Y por supuesto, si tienes cualquier duda, no te prives de preguntar en los comentarios.
Episodios anteriores:
- Aprendiendo a programar I – En busca de mi primer lenguaje
- Aprendiendo a programar II – Y el lenguaje elegido es…
Sígueme en Twitter: @remoquete
