Introducción Javascript

Introducción Javascript

¿Cómo nació Javascript?

Javascript es un lenguaje de programación multiparadigma, es orientado a objetos y funcional, por eso es un lenguaje muy potente. Está basado principalmente en dos lenguajes de programación con características únicas:

  1. Scheme, Paradigma funcional. Influenciado por Lisp
  2. Self, Paradigma orientado a objetos, basado en prototipos en lugar de clases. Influenciado por Smalltalk

A mediados de los noventa, la compañía Netscape necesitaba un lenguaje para su navegador web. Entonces contrataron a Brendan Eich quien inicialmente quería usar algo como Scheme dentro del navegador.

En esa época, Netscape tenía tratos con Sun microsystems para mostrar Java en el navegador a través de applets. Así que tenían en mente un lenguaje hermano, mucho más simple. Pero poquito despues sintieron que ya no deberían crear este lenguaje, que con Java era suficiente.

Al final gracias a Brendan y otras dos personas de Netscape y Sun Microsystems, se vio la necesidad de un lenguaje que pudiera correr directo en una página web. Y que pudiera ser utilizado por personas que no supieran lo que es un compilador.

Brendan Eich tomó la sintaxis de Java, el modelo funcional de Scheme, y la programación orientado a objetos basada en prototipos de Self.

Aunque la sintaxis la toma de Java, esta sintaxis realmente viene de C/C++ de los cuales Java surgió.

Javascript: scheme, self y Java en uno
Javascript: scheme, self y Java en uno

JavaScript fue creado a prisas y con mucha presión, en diez días Brendan Eich creó la primera versión, aun así la habilidad de Brendan en tomar los mejores aspectos de los lenguajes de programación Scheme, Self y C/C++ han hecho de JavaScript un lenguaje muy potente y expresivo.

Si quieres saber más al respecto, puedes visitar ¿Qué relación tiene JavaScript con Scheme, Self y Java? Nacimiento de JavaScript donde seguro despejaras dudas y te recomiendo que lo leas después de esta introducción.

Nombre y estandarización

En un inicio se llamó mocha, después LiveScript en su primer lanzamiento oficial en 1995 y tres meses después lo llamaron JavaScript. Este último nombre tiene muy poco que ver con el lenguaje, según se entiende, lo llamaron así por estrategia de mercadotecnia porque Netscape incrustaba Java en el navegador web.

Tiempo después Netscape anuncio una reunión con la organización de estándares Ecma International para dar paso a la estandarización de Javascript. Así la primera edición ECMA-262, fue aceptada por la asamblea general de Ecma en junio de 1997. Realmente el estándar del lenguaje se llama ECMAScript.

¿Dónde se usa Javascript?

Javascript es un lenguaje de programación muy flexible, multiparadigma, dinámico y con un gran potencial, es por eso que lo encontramos actualmente en diferentes áreas, por mencionar algunas:

  • Navegadores web como Firefox, Google Chrome, Opera, Safari.
  • Aplicaciones móviles, incrustados en la aplicación nativa mediante WebViews, o con herramientas como Cordova y Ionic
  • En Node.js para crear servidores http, ftp y cualquier tipo de tecnología de red de una forma escalable, otro ejemplo es ejecutar scripts en tu sistema operativo para automatizar tareas.
  • Bases de datos como MongoDB.
  • Aplicaciones de escritorio, un ejemplo es Electron, los editores Atom y Visual Studio Code están hechos con electron.
  • Programación de Robots e IoT (Internet de las cosas), por ejemplo Arduino y johnny-five.

¿Cómo se usa Javascript?

Javascript es un lenguaje compilado en el momento (Just-in-time compiled), el motor de JavaScript recorre linea por línea y así va traduciendo el código a lenguaje maquina para que la computadora lo pueda entender. En las primeras versiones de JavaScript se ocupaba un intérprete.

Como ya mencionamos, Javascript no solo se puede ejecutar en el navegador web, sino también del lado del servidor, como lo hace en node.js, a estos lugares donde javascript se puede ejecutar se les llama ambientes huésped. Estos ambientes tienen sus propias funcionalidades y APIs que no son parte del estándar de ECMAScript. Por ejemplo, en el navegador encontramos los objetos window y document, en node.js podemos encontrar los objetos http y fs.

Para aprender cualquier otro lenguaje, todos sabemos que necesitamos saber su gramática, es por eso que vamos a ver la definición de gramática sacada de Wikipedia:

La gramática es el estudio de las reglas y principios que gobiernan el uso de las lenguas y la organización de las palabras dentro de unas oraciones y otro tipo de constituyentes sintácticos.

Solo veremos la gramática básica para poder empezar a crear código. De tal manera que se combinen con ejemplos prácticos y en próximas publicaciones iremos aumentando nuestro entendimiento de la misma forma.

Variables

Uno de los elementos más usados son las variables, las variables son cajitas con etiquetas, y tienen un espacio de memoria para guardar algún tipo de dato.

Las etiquetas de las cajitas deben cumplir ciertas reglas. Su nombre o identificador no puede iniciar con un número, deben iniciar con alguna letra (incluyendo _ y $), y además Javascript es sensible a mayúsculas y minúsculas.

Existen dos maneras de declarar una variable. Una es usando var y la otra usando let.

See the Pen Variables by Jaime Cervantes Velasco (@jaime_cervantes_ve) on CodePen.

Es importante describir correctamente el contenido de las variables, porque así le facilitamos la vida a la siguiente persona que necesite leer y modificar nuestro código. Esta siguiente persona muy a menudo eres tú del futuro, y al menos que seas un robot, no podrás recordar cada detalle de tu código.

Del código anterior, presta atención solo a las definiciones de variables, ahí tanto let como var tienen el mismo efecto, definen una variable global que puede ser accedida en cualquier parte de la ejecución.

También podemos ver que no es necesario definir el tipo de dato, y realmente no lo necesitamos, vemos claramente que las variables contienen cadenas de caracteres (string), un string se declaran dentro de unas comillas simples o dobles.

A las variables que no le definimos algún valor, Javascript les asigna el valor undefined.

See the Pen undefined by Jaime Cervantes Velasco (@jaime_cervantes_ve) on CodePen.

Constantes

Además de las variables existe un tipo de cajita que no puede cambiar lo que guarda una vez definido su valor, por eso se llaman constantes.

Al tratar de reasignar un valor a una constante como en la cuarta línea del código, JavaScript mostrara un TypeError, indicando que no se puede reasignar un valor a una constante.

See the Pen Constantes by Jaime Cervantes Velasco (@jaime_cervantes_ve) on CodePen.

Tipos de datos

Javascript es un lenguaje débilmente tipeado, o sea, que no es necesario definir el tipo de dato. Pero no quiere decir que no tenga tipos, pues el tipo de dato es definido en tiempo de ejecución por Javascript, recordemos que Javascript es un lenguaje compilado en el momento.

Datos primitivos

Casi todo en JavaScript es un Objeto, la excepción son los datos primitivos, los cuales no son Objetos y no tiene métodos, entonces tenemos siete tipos de datos, objetos y los siete datos primitivos de abajo:

  1. Number, números como; 1, 0, 18500, 89.95124
  2. BigInt, agregado en el 2020, para representar números enteros muy, pero muy grandes.
  3. String, cadena de caracteres como ‘Hola’ y ‘Buenas noches’.
  4. Boolean, solo acepta true o false, es decir, si o no.
  5. null, sirve para indicar que algo es nada, su único valor es null.
  6. undefined, sirva para indicar que algo aún no está definido.
  7. Symbol, nuevo en el lenguaje a partir de EcmaScript 6, año 2015

Objetos

Todo lo demás son objetos, incluso los tipos de datos String, Boolean, Number y Symbol tiene su correspondiente representación en Objeto. Una función es un objeto. Ejemplos de objetos:

  • Object
  • Function
  • Array
  • Date
  • RegExp
  • Error

La verdad que no preocuparme por el tipo de dato me ha facilitado el desarrollo de software. Además los editores de código vienen con muchas herramientas y plug-ins que te ayudan mucho en este aspecto, te ahorras bastante dolor de cabeza al tratar de convertir entre tipos.

Solo nos interesa lo que nuestro objeto puede hacer, no de que tipo es o si es padre o hijo  de algo. Cuando realizas una suma entre números en el mundo real, no te importa que tipo es, solo te importa que se puedan sumar, sin importar si es un entero o decimal, o fracción.

Normalmente si nombras tus variables/objetos de manera adecuada y de manera muy entendible, con el contexto de tu función, modulo o componente sabrás que tipo de datos son.

Su valor ya te indica de que tipo es, me parece redundante definir el tipo de algo a lo que yo mismo le asigno el valor.

Comentarios

Aunque los comentarios no los recomiendo porque son un indicador de que nuestro código no es fácil de entender, se pueden usar para casos en los que ya no tenemos de otra.

La sintaxis de los comentarios fue tomada de C++.

// Este es un comentario de mucho valor
/**
* Este es un comentario con mas de una linea
* y esta es la segun linea
* y una tercera linea
*/

Funciones

Las funciones son otro de los elementos más importantes del lenguaje. Si no es que el más importante. Con una función podemos realizar un conjunto de acciones sin volverlo a escribir y nos permitirá obtener un resultado según los argumentos que recibe a la hora de ejecutarla.

Pero no solo eso, nos permite resolver problemas desde el punto de vista de paradigmas de programación como funcional y orientado a objetos. Por poner un ejemplo, nos permite crear patrones de diseño muy útiles como el Singleton o el Patron de diseño Observador.

¿Por qué las funciones son tan flexibles en JavaScript? Porque las funciones son objetos de primera clase en el lenguaje. Es decir, pueden ser tratadas como cualquier otra variable, pueden ser pasadas como parámetros y pueden ser el valor de retorno de otra función.

Un consejo, selecciona bien tus nombres, un nombre de función debe ser un verbo, porque internamente realiza una acción.

Otro consejo procura usar muy pocos argumentos, no más de tres, créeme, no todos tenemos memoria de fotográfica y con muchos argumentos es difícil reusar la función. Porque no sabremos que parámetros recibe y en que orden.

See the Pen Funciones by Jaime Cervantes Velasco (@jaime_cervantes_ve) on CodePen.

Cuando queremos que el código de una función se ejecute, se dice que necesitamos invocar la función. Para invocar a una función se deben poner un par de paréntesis (), y si tiene parámetros o argumentos, estos se separan con comas.

En el ejemplo vemos como invocamos dos veces la función getNombreCompleto(nombre, apellido) ahorrando tiempo y esfuerzo obteniendo un resultado similar. Esta función recibe dos parámetros, los cuales separamos con una coma.

Ámbito de variables

En Javascript no existe ámbitos de bloques como en C y Java, donde las variables definidas en un bloque utilizando llaves {} solo existen en ese ámbito y no puede ser accedidas desde afuera.

JavaScript tiene ámbito de función, para ilustrar este tipo de ámbito vamos a crear una función donde se definen dos variables. Más adelante en el código, fuera de la función se intenta obtener el valor de la variable jaime, pero esto no es posible y tendremos un ReferenceError.

See the Pen Ambito de variables 1 by Jaime Cervantes Velasco (@jaime_cervantes_ve) on CodePen.

Hasta junio del 2015 solo existía la forma de var para declarar variables. Actualmente la forma let de declarar variables permite utilizar ámbito de bloque. Por ejemplo en un bloque if, o simplemente dentro de llaves:

See the Pen Ambito de variables 2 by Jaime Cervantes Velasco (@jaime_cervantes_ve) on CodePen.

Objeto literal

Por último veamos como crear un objeto. Un objeto literal es una colección de pares nombre: valor, parecido a los arrays asociativos de PHP. Estos pares de nombre/valor se les llama propiedades, una propiedad es como una variable y puede contener cualquier tipo de valor.

Para crear un objeto no necesitas crear una clase, tú simplemente creas el objeto y lo empiezas a utilizar.

See the Pen Objetos by Jaime Cervantes Velasco (@jaime_cervantes_ve) on CodePen.

En el ejemplo tenemos un objeto persona, tiene varias propiedades de diferentes tipos, su nombre es un String, su edad es un Number, getNombre y hablar son de tipo Function, las funciones que son miembros de un objeto se les llama métodos.

Referencias

https://www.pensemosweb.com/javascript-scheme-self-java/
¿Qué relación tiene javascript con scheme, self y java? Nacimiento de Javascript

¿Qué relación tiene javascript con scheme, self y java? Nacimiento de Javascript

Para poder entender la relación entre Javascript, scheme, self y java, tenemos que entender un poco de la historia de los lenguajes.

No somos creadores de la historia. Estamos hechos por la historia.

Martin Luther King, Jr.

De Algol a Smalltalk

Los lenguajes de programación más usados en los sesentas, eran:

  1. FORTRAN
  2. LISP (Paradigma funcional)
  3. COBOL
  4. ALGOL

ALGOL (Algorithmic Language) introdujo la utilización de bloques utilizando las palabras reservadas begin y end.

Como clara influencia, actualmente en JavaScript, C, Java, entre otros, se utiliza las llaves {}  para definir bloques de código.

En 1967 se lanzó Simula 67, Simula fue el primer lenguaje de programación orientado a objetos,  básicamente le agregó clases y objetos a ALGOL.

La programación orientada a objetos fue descubierta en 1966 por los mismos creados de Simula, Ole Johan Dahl y Kristen Nygaard.

Tiempo después se creó Smalltalk, un lenguaje de programación orientado a objetos mucho más sofisticado y moderno, a cargo de este proyecto estaba Alan Kay.

Alan Kay comentó lo siguiente:

Lamento que hace tiempo haya acuñado el término Objetos para la programación porque hizo que las personas se enfocaran en la parte menos importante. La gran idea es “Envío de mensajes“.

Alan Kay
Camino smalltalk
Camino smalltalk

Posteriormente se empezaron a crear otros lenguajes de programación orientados a objetos, todos basados en ideas de Smalltalk y C.

Se crearon Objective C, C++ y Eiffel, de los cuales surgieron otros lenguajes de programación como Java, C# y Ruby.

Influencias sobre lenguajes de programación orientada a objetos
Influencias sobre lenguajes de programación orientada a objetos

JavaScript surge poquito después de JAVA, en el mismo año. JavaScript tomará influencias de smalltalk, porque Self fue influido por smalltalk.

De Smalltalk a Self

Smalltalk permitió también la creación de Self, creado en Xerox Parc y luego migrado a Sun Microsystems Labs.

En este lenguaje de programación se introdujo la idea de prototipos, eliminando la utilización de clases para crear objetos, este lenguaje utiliza los objetos mismos para permitir que un objeto reutilice las funcionalidades de otro.

Self es un lenguaje rápido y en general se le conoce por su gran rendimiento, self hizo un buen trabajo en sistemas de recolección de basura y también utilizaba una maquinar virtual para administrar su ejecución y memoria.

La maquina virtual Java HotSpot se pudo crear gracias a Self, debido a la influencia de Self tenemos hoy en día el motor de JavaScript V8, el cual lo utiliza node.js y Google Chrome internamente.

Self seguía una de las recomendaciones del libro Design Patterns: Elements of Reusable Object-Oriented Software, mucho antes de que saliera publica esta recomendación:

Mejor composición de objetos a herencia de clases.

Design Patterns: Elements of Reusable Object-Oriented Software

Actualmente Javascript utiliza prototipos para la reutilización de código, se podría decir que usa composición, en lugar de herencia.

De cálculo lambda a Scheme

La programación funcional es el paradigma de programación más viejo, de hecho su descubrimiento fue mucho antes de la programación para computadoras, fue descubierto en 1936 por Alonzo Church, cuando invento el cálculo lambda mientras resolvía el mismo problema matemático que Alan Turing.

El símbolo del cálculo lambda es :

λ

LISP fue el primer lenguaje funcional, creado por John McCarthy.

JavaScript tomó influencias de LISP, porque Scheme fue influido por LISP.

Smalltalk usa el “El Modelo Actor”, el cual dice que los actores se comunican entre ellos a través de mensajes.

Por otro lado tenemos a LISP, el cual tiene un “Modelo despachador de funciones” que actualmente le llamamos lenguaje funcional, estos modelos son idénticos, porque las funciones y métodos lo que hacen es enviar mensajes entre actores.

Un ejemplo de esto es cuando una función llama a otra función o cuando se invoca el método de un objeto, lo que sucede es que existen actores y se comunican entre ellos a través de mensajes.

Entonces podemos decir que la idea principal de la programación orientada a objetos es el envío de mensajes y que no es muy diferente de la programación funcional. Y aquí es importante remarcar lo que dijo Alan Kay Co-creador de SmallTalk:

Lamento que hace tiempo haya acuñado el término Objetos para la programación porque hizo que las personas se enfocaran en la parte menos importante. La gran idea es “Envío de mensajes“.

Alan Kay

Mi ingles es malo así que pueden revisar el texto original aquí.

Tomando estos dos modelos idénticos, se refinaron, y se creó Scheme.

Scheme tiene la bondad de usar Tail recursion y closure para obtener un lenguaje funcional, closure permite tener acceso a las variables de una función externa aun cuando esta ya haya regresado algún valor.

Javascript usa mucho closure en su faceta de lenguaje funcional.

Predecesor de la PC moderna y el desarrollo de componentes web

Por otro lado tenemos a NLS (oN-Line System), fue un sistema de colaboración entre computadoras diseñado por Douglas Engelbart e implementado por la ARC (Augment Research Center) en el Instituto de investigación de Stanford SRI.

Fue el primer sistema en usar enlaces de hipertexto, mouse, monitores de video, Información organizada por relevancia, GUI (Interfaces gráficas de usuario), programa para presentaciones y otros conceptos modernos de computación.

Después cuando Steve Jobs se le ocurrió la idea de crear la computadora personal más sofisticada, la Macintosh (esta idea venía concebida desde NLS), los programadores tenían que usar lenguaje ensamblador para crear programas.

Era muy difícil conseguir programadores que desarrollaran en ensamblador, debido a esta dificultad, Bill Atkinson que ya había creado MacPaint y QuickDraw, se le ocurrió crear una interesante aplicación que le permitiera a personas que no se dedicaran a la programación crear fácilmente programas.

A esta aplicación le agregó un lenguaje de scripting, y se le llamó HyperCard, tenía botones, enlaces y muchas cosas que actualmente se tienen en el desarrollo web, en la web misma y en los navegadores modernos.

Hypercard
Hypercard

Por ejemplo para agregar un botón tú pulsabas Cmd + B y se abría un cuadro de diálogo para crear el botón y tenía las opciones de configuración que se ven en la imagen de abajo, poner icono, algún efecto y hasta agregarle funcionalidad a través de un script.

IDE HyperCard agregar un botón
IDE HyperCard agregar un botón

Una gran ventaja de HyperCard es que si tú creabas un componente como un botón y te lo llevabas a otra tarjeta o página, el botón seguía teniendo toda la configuración, incluyendo el script.

Es claro que esto ultimo es un predecesor de los componentes web actuales. Su lenguaje de script se llamaba HyperTalk y era así:

HyperTalk script parecido a Javascript
HyperTalk script parecido a Javascript

Se puede notar el parecido con la funcionalidad mouseup de los navegadores web actuales, de hecho el creador de JavaScript tomo esta influencia para agregar eventos a elementos de un sitio web, como por ejemplo el onmouseup:

Surgimiendo de los navegadores web

Se empezó un proyecto llamado Xanadu, este sistema computacional utilizaba el concepto de hipertexto.

La idea de Xanadu era el fin de concebir un documento global y único que cubra todo lo escrito en el mundo mediante una gran cantidad de ordenadores interconectados que contenga todo el conocimiento existente.

Xanadu fue el predecesor de WWW, tiempo despues Tim Berne’s Lee creó la WWW o World Wide web.

Con la WWW funcionando, vinieron los navegadores web como Mosaic, este se dividió en Netscape y SpyGlass.

Tiempo después SpyGlass fue comprado por Microsoft para poder concebir al navegador más odiado por los desarrolladores web, Internet Explorer.

Surgimiento de Internet Explorer y Netscape
Surgimiento de Internet Explorer y Netscape

De navegadores web a Javascript

A mediados de los noventa, la compañía Netscape necesitaba un lenguaje para su navegador web, así que contrataron a Brendan Eich quien inicialmente quería usar algo como Scheme dentro del navegador.

Netscape tenía tratos con Sun microsystems para mostrar Java en el navegador a través de applets, así que tenían en mente un lenguaje hermano, mucho más simple. De hecho en un punto ya no sintieron que deberían crear Javascript, pensaban que con Java era suficiente.

Al final gracias a Brendan y otras dos personas de Netscape y Sun Microsystems, se vio la necesidad de un lenguaje que pudiera correr directo en una página web, que pudiera ser utilizado por personas que no supieran lo que es un compilador.

Brendan Eich tomó la sintaxis de Java, el modelo funcional de Scheme, y la programación orientado a objetos basada en prototipos de Self.

Aunque la sintaxis la toma de Java, esta sintaxis realmente viene de C/C++ de los cuales Java surgió.

Javascript: scheme, self y Java en uno
Javascript: scheme, self y Java en uno

Ahora bien si nos ponemos a pensar, Javascript tiene más que ver con LISP y Scheme en la parte funcional, con Self en la parte orientada a objetos y con C/C++ en su sintaxis.

JavaScript fue creado a prisas y con mucha presión, en diez días Brendan Eich creó la primera versión, aun así la habilidad de Brendan en tomar los mejores aspectos de los lenguajes de programación Scheme, Self y C/C++ han hecho de JavaScript un lenguaje muy potente y expresivo.

En un inicio se llamó mocha, después LiveScript en su primer lanzamiento oficial en 1995 y tres meses después lo llamaron JavaScript, este último nombre tiene muy poco que ver con el lenguaje, según se entiende, lo llamaron así por estrategia de mercadotecnia porque Netscape incrustaba Java en el navegador web.

Netscape anuncio una reunión con la organización de estándares Ecma International para dar paso a la estandarización de Javascript. Así la primera edición ECMA-262, fue aceptada por la asamblea general de Ecma en junio de 1997. Así que realmente el estándar del lenguaje se llama ECMAScript.

Javascript en múltiples plataformas

Javascript es un lenguaje de programación muy flexible, multiparadigma, dinámico y con un gran potencial, es por eso que lo encontramos actualmente en diferentes áreas, por mencionar algunas:

  • Navegadores web como Firefox, Google Chrome, Opera, Safari.
  • Aplicaciones móviles, incrustado en la aplicación nativa, un ejemplo es Cordova y Ionic
  • En Node.js para crear servidores http, ftp y cualquier tipo de tecnología de red de una forma escalable, otro ejemplo es ejecutar scripts en tu sistema operativo para automatizar tareas.
  • Bases de datos como MongoDB.
  • Aplicaciones de escritorio, un ejemplo es Electron, los editores Atom y Visual Studio Code están hechos con electron.
  • Programación de Robots e IoT (Internet de las cosas), por ejemplo Arduino y johnny-five.

Conclusión

La implementación interna de la programación orientado a objetos y funcional desde el inicio en JavaScript, han hecho que este lenguaje de programación tenga el éxito global de hoy en día. Permitiendo crear un código más eficiente y expresivo

Referencias

https://www.youtube.com/watch?v=JxAXlJEmNMg

http://wiki.c2.com/?AlanKayOnMessaging

https://www.youtube.com/watch?v=yvx4ObDBGZs

https://thenewstack.io/brendan-eich-on-creating-javascript-in-10-days-and-what-hed-do-differently-today/

es_MXES_MX