JavaScript desde cero (1): Introducción

Breve introducción a JavaScript y a la programación

Antes de meternos de lleno con Javascript, vamos hacer una breve introducción de los principios de la programación para nuestros recién llegados padawans. Empecemos por lo básico, ¿qué es un programa?

Un programa es un trozo de texto (código) escrito por un programador, formando un conjunto de instrucciones que fuerza directamente al ordenador a cumplir su cometido.

Los ordenadores por sí mismos pueden hacer funciones básicas y sencillas, pero a una gran velocidad. Un programa puede combinar ingeniosamente esta enorme cantidad de tareas simples con el fin de hacer cosas muy complejas.

Para algunos de nosotros programar es fascinante. Un programa es como un edificio de ideas. Es menos costoso de construir, pesa menos y tiende a crecer más y más bajo nuestras manos de programador. Pero si no se tiene cuidado, el tamaño y la complejidad de un programa se saldría fuera de control, confundiendo incluso a la persona que lo creó.

Mantener un programa bajo control es uno de los principales dolores de cabeza de la programación. Cuando el programa funciona todo es maravilloso. El arte de programar es la habilidad de poder controlar la complejidad. Un buen programa es sutil, simple dentro de su complejidad.

Muchos programadores creen que esta complejidad se puede controlar mejor usando solo una serie de técnicas bien conocidas en sus programas. Han agrupado una serie de reglas estrictas («buenas prácticas») prescribiendo el formato que los programas deberían tener, y hasta el más ferviente de todos los programadores considerará que salirse de esta pequeña zona de seguridad lo volverá un mal programador.

El paraíso de las técnicas de programación es enorme, fascinante por su diversidad y en gran parte todavía inexplorado. Lo único que tienes que tener es ganas, ganas de seguir explorando y aprendiendo. Los programadores que se niegan a avanzar se estancarán, olvidarán su entusiasmo y les resultará aburrido su oficio.

La importancia del lenguaje

En los comienzos de la informática no había lenguajes de programación. Los programas tenían este aspecto:

Es un programita para sumar los números que van del 1 al 10 y luego imprimir el resultado: 1 + 2 + … + 10 = 55. En otros tiempos meter estos patrones de bits arcanos hacían creer al programador que era una especie de mago poderoso. Cada línea del programa de arriba contiene una sola instrucción. Se podría traducir a nuestro idioma como algo así:

Aunque esto es algo más legible que la anterior sopa de bits, todavía nos sangran los ojos al leerlo. Podría ayudar usar nombres en vez de números para las instrucciones y posiciones de memoria:

¿Puedes ver más o menos cómo funciona el programa? Las dos primeras líneas le asignan a dos posiciones de memoria sus valores iniciales (se declaran dos variables): total, que se usará para ir aumentando el resultado del cálculo, y count mantendrá un registro del número de veces que se está haciendo ese cálculo. Las líneas que usan compare pueden parecerte extrañas. El programa tiene que ver si el count (recuento) es igual a 11 a fin de decidir si se puede detener la ejecución. Porque suponiendo que ejecutamos el programa en un ordenador bastante primitivo, solo puede comprobar si un número es cero y tomar una decisión (o saltársela) basándose en esto. Por lo tanto compara el valor del count -11 y toma una decisión basándose en ese valor. Las dos líneas siguientes suman el valor del count al resultado e incrementa el count en 1 cada vez que el programa decide que el count aún no es 11.

Aquí tenemos el mismo programa en JavaScript:

Esta última versión mejora bastante el asunto. Lo más importante aquí es que la sentencia while(mientras) se encarga de especificar al programa cuando puede y cuando no puede saltar a la última instrucción. Continuará ejecutándose el trozo de código dentro de los corchetes {} mientras la condición se cumpla. Esta condición es que count<=10, «que significa «count es igual o menor que 10″. Ya no tenemos que crear un valor temporal y compararlo con cero. Parte del encanto de los lenguajes de programación es que se ocupan desinteresadamente de esos detalles para nosotros.

Al final del programa, cuando la ejecución del while ha finalizado, la función console.log() se aplica al resultado con el fin de escribirlo o pintarlo como una salida, output. Vamos, que muestra el resultado en consola.

Puedes ir a la consola del navegador Google Chrome y comprobarlo por vosotros mismos, en cualquier página web que estéis visitando o en este mismo blog pulsad F12 o click derecho->Inspeccionar elemento, luego le dais a Console y copiáis y pegáis el código de arriba:

Chrome Console

La moraleja de esta historia es que un buen lenguaje de programación ayuda al programador a comunicarse con el ordenador y a darle funciones a un alto nivel. Omite los detalles innecesarios de la conversación y va al grano proporcionándonos sólidos bloques para construir (como while y console.log) y que te permite definir más bloques de código como la suma de anterior.

¿Qué es JavaScript?

JavaScript es un lenguaje de programación introducido en 1995 como una forma de añadir programas a las páginas webs en el navegador Netscape Navigator. Luego este lenguaje lo adoptaron el resto de navegadores web. Gracias a JavaScript es posible hacer aplicaciones web modernas con las que el usuario puede interactuar directamente, sin tener que recargar la página por cada cosa que haga.

Fue creado por Brendan Eich, al principio el lenguaje se llamaba Mocha, luego lo renombró  como LiveScript hasta que finalmente le cambiaron el nombre a JavaScript.

Cabe señalar que JavaScript no tiene casi nada que ver con el lenguaje de programación Java. Que tenga un nombre similar fue cosa de puro marketing, más que de buen criterio. Ya que cuando JavaScript se empezó a introducir el lenguaje Java estaba siendo fuertemente publicitado y ganando mucha popularidad. Así que alguien en su día pensó en aprovechar este éxito. ¡Y ahora nos confunde!

Después de esta aceptación fuera de Netscape, un documento estándar fue escrito para describir la forma en que el lenguaje JavaScript debería escribirse y funcionar para hacer compatible otros programas con JavaScript. Se llamó el estándar ECMAScript, después la Ecma International Organization hizo la estandarización. En la práctica, los términos ECMAScript y JavaScript se pueden usar indistintamente, son dos nombres para el mismo lenguaje.

Historia de JavaScript

Hay quienes te dirán cosas malas de JavaScript. Muchas serán ciertas. El principal problema de JavaScript es que te da una libertad que roza lo ridículo, ya que en un principio este lenguaje se pensó para que fuera más fácil para los principiantes. Sin embargo, esta flexibilidad tiene sus ventajas. Nos deja vía libre para emplear técnicas que serían imposible de emplear con lenguajes más escritos o fuertemente tipados como Java, compensando de sobra las carencias de JavaScript.

En la versión 4 de JavaScript ya llegaron se quisieron hacer mejoras bestias, tan bestias que se volvió todo un quebradero de cabeza y el proyecto fracasó en 2008, pasándose a JavaScript 5 en 2009, una versión mucho menos ambiciosa que su predecesora.

Historia de JavaScript (2)

Los navegadores actuales soportan la versión 5, ECMAScript 5, y es el estándar actual, que es en la que nos centraremos en estos tutoriales.

¿Para cuándo ECMAScript 6 (JavaScript 6)?

Pero para Junio de 2015 , se va a estandarizar la posterior versión, JavaScript 6 o ECMAScript 6 que se empezó a implementar en algunos navegadores a mediados del 2014 de forma experimental (por ejemplo en el Chrome Canary), trae consigo mejoras como las clases, herencia, getters y setters, en definitiva, programación orientada a objetos ¡y muchas más cosas!, de las que tendría que hablaros en un artículo aparte.

No os preocupéis porque los conceptos que se explican en estos tutoriales se aplica a todo el JavaScript actual estandarizado, recordemos que el paso a la versión ECMAScript 6 supondrían más extras, que explicaré a su debido tiempo.

¿Quieres probar un poco de JavaScript 6?, primero bájate el navegador Chrome Canary, es la versión de Chrome donde se prueban las nuevas tecnologías y funcionalidades antes de ser llevadas al Chrome estándar.

Para probarlo en la consola escribimos en la barra del navegador:

chrome://flags

Y le damos a Habilitar JavaScript Experimental:

Habilitar JavaScript 6

¿Para qué se usa JavaScript?

Opción 1: JavaScript del lado del cliente

JavaScript puedes usarlo como lenguaje de programación del lado del cliente (se ejecuta en nuestro ordenador, no en el servidor). De hecho, normalmente la carta de presentación de es esa, «JavaScript es un lenguaje del lado del cliente».

Cuando un usuario accede a una página web cualquiera, envía desde su navegador una petición a un servidor web que nos devuelve «el servicio». Nos brinda una página web que visualizamos inmediatamente en nuestro navegador, es decir, esa petición envía al ordenador del usuario código HTML junto a código JavaScript.

El código HTML forma la estructura, por ejemplo un header o un menú. Mientras que el código JavaScript se encarga de crear efectos dinámicos en respuesta las acciones del usuario, por ejemplo, «cuando el usuario ponga el ratón encima del menú haz que se despliegue», manejando una serie de eventos.

De esta forma podemos crear efectos atractivos y dinámicos en las páginas web, ayudado de librerías como jQuery entre otras.

Opción 2: Javascript del lado del servidor

JavaScript no está limitado solo a los navegadores web. Las implementaciones de Javascript en el lado del servidor ha ido ganando adeptos desde el año 2000, siendo NodeJS una de las más populares, usándose así para el desarrollo de aplicaciones web escalables. NodeJS está construido sobre el intérprete o motor de JavaScript de Google Chrome (motor V8).

Es ideal para crear aplicaciones en tiempo real, como puede ser un chat. No quiero extenderme demasiado sobre NodeJS, echa un vistazo a esta entrada Introducción al Stack MEAN (2): Instalar NodeJS, donde hablo muy bien de él, quizás te enamores.

Otras casos donde se usa JavaScript

Ya sea con navegadores o con NodeJS del lado del servidor,  no son las únicas plataformas donde se emplea JavaScript. Algunas bases de datos como MongoDB usan JavaScript para sus consultas. En realidad JavaScript puede estar en cualquier plataforma que tenga instalado un intérprete de JavaScript, como dijimos anteriormente, es un lenguaje muy flexible en todos los aspectos.

El código y cómo testearlo

El código es el texto que conformará nuestros programas. En esta saga de tutoriales habrá mucho código, la lectura y escritura de código es una parte indispensable para aprender a programar, así que intenta no leerte solo los trozos de código de los ejemplos, ¡escríbelos tú mismo también! Lee atentamente y comprende. Al principio será lento y confuso, pero luego será como leer la lista de la compra. Lo mismo ocurre con los ejercicios. No supongas que los sabes sin haberles dado solución.

Prueba las soluciones de los ejercicios en un intérprete de JavaScript, es decir, un programa informático capaz de analizar y ejecutar JavaScript, interpreta el código fuente que hemos escrito y ejecuta un script acorde con las instrucciones que le hemos dado.

Te recomiendo encarecidamente la consola JavaScript de Google Chrome (Chrome Devtools), con su motor JavaScript V8.

¿Qué es la consola JavaScript del navegador?

Los navegadores webs modernos emplean esta increíble herramienta creada para los desarrolladores web y muestra información sobre los errores, alertas que se reciben al hacer las peticiones de carga, resultados de funciones y códigos, etc.

Son auténticos inspectores y depuradores de código.

Permite interactuar con la página ejecutando las funciones que queramos. En definitiva, el propósito de usar estas consolas es testear nuestra aplicación web y debuggearla (descubriendo posibles errores en nuestro código).

Por ejemplo, podemos usar console.log() para ver qué valores nos devuelve nuestro código por consola o podemos poner la maravillosa instrucción debugger; (en Chrome, Firefox e IE) dónde podemos señalar dónde se detendrá la ejecución de nuestro código para posteriormente ir comprobando el valor de sus variables línea por línea. Por ejemplo en este código:

La directiva debugger; escrita una línea antes que el condicional if crea una interrupción del código, podemos crear varios breakpoint (punto de interrupción) en las zonas que queramos debuggear, un breakpoint es una pausa intencionada del script y dónde detenemos su ejecución para comprobar que valores se están dando en esa línea en concreto:

debugger; en Chrome

El valor de la variable esPadre en ese momento es true, y por lo tanto al ser verdadero se ejecuta el grito desgarrador de Luke y se muestra por consola.

Conceptos básicos y curiosidades de JavaScript

• Su sintaxis toma influencias no sólo de Java, si no de también AWK, Python y Perl.
• Es un lenguaje de programación de formato libre y muy flexible, admite espacios, tabulaciones y comentarios en cualquier parte del código.
• Como en otros lenguajes, el funcionamiento de un programa en javascript lo forma una secuencia de instrucciones. El script es interpretado línea por línea por el navegador.
• Estas instrucciones se denominan sentencias, y se separan por punto y coma (;). Esto es opcional, no obstante es recomendable siempre añadir punto y coma al final de las sentencias para evitar efectos adversos.
• Se diferencian las minúsculas y las mayúsculas, javascript es case sensitive.
• Para el desarrollo web y probar nuestros scripts nos basta con los depuradores web de cada navegador: Google Chrome, Firefox, IE, Safari,  y Opera.

Comentarios en javascript

Objetivos de estos tutoriales: niveles básico, medio y avanzado

Vamos aprender JavaScript desde cero pasando por las fases: Básico, Medio y Avanzado.

Daremos las bases de JavaScript en este nivel básico (Padawan) y buenas prácticas. Con esto construiremos una sólida base que nos permitirá saltar al nivel medio de JavaScript (yo lo llamo Jedi) y posteriormente llegaremos al JavaScript avanzado (Maestro Jedi).

Sí, mola mucho más ver nuestros progresos en JavaScript desde el punto de la Orden Jedi.

«¿Puedo fiarme de tu criterio a la hora de seguir tus tutoriales?», por supuesto que puedes fiarte, ya que estos tutoriales son fuente varios libros en inglés que están en el Top de libros de JavaScript:

• Eloquent JavaScript (Marijn Haverbeke)
• JavaScript: The Good Parts (Douglas Crockford)
• JavaScript Patterns (Stoyan Stefanov)
• ¡Y muchos más!

Eso ha sido todo, en la siguiente entrada hablaremos de los Valores, tipos de datos y operadores en JavaScript.

¡Nos vemos joven padawan!