Introducción | Bases de JavaScript

↑ Me gusta (0)

JavaScript es hoy día un lenguaje de programación muy popular, las grandes y pequeñas empresas necesitan programadores con mucha habilidad y competencia en este lenguaje. Todo el dinamismo que aprecias en Facebook, Gmail, Twitter y otras aplicaciones es gracias a él.

Si trabajamos con PHP puro y duro o Laravel directamente veremos como la página o sistema refresca después de cualquier acción.

Si aprendes JavaScript podrás crear sitios web, aplicaciones para escritorio, sistemas para un servidor y también aplicaciones para dispositivos móviles.

Cuando yo empecé no me gustaba este lenguaje porque solo veía ejemplos con alert, prompt y confirm. Supongo que estaba siendo mal guiado.

Seguro has encontrado muchos Framework de JavaScript y eso la verdad abruma mucho. Mira esta pequeña lista:

  1. Angular.
  2. React.
  3. VUEjs.
  4. Ember.
  5. Polymer.
  6. Backbone.
  7. ...

Es probable que hayas escuchado de todos ellos.

Y créeme, hay muchos mas... Tanta información hace que abandonemos el tema o por ejemplo nos casemos con un Framework como VUEjs y no nos atrevamos a aprender otro. Yo estoy escribiendo al respecto porque si sabes bien JavaScript entenderás cada Framework rápidamente.

Quizás te ha pasado que sabes muchos VUEjs y poco de JavaScript (eso pasa a veces). A mi me sucedió cuando aprendí jQuery.

Acompáñame y aprende desde la base del lenguaje. Quiero enseñarte todo al respecto, incluso sobre el estándar ECMA, Babel, Vanilla JS y mucho más.

Espero disfrutes y compartas con tus compañeros esta gran guía que he escrito con mucho cariño para mis suscriptores. Si nos va bien con esta serie grabaré entonces videos sobre JavaScript para nuestro canal.

Toma en cuenta que JavaScript fue diseñado para mejorar nuestras páginas en cuanto a efectos y animaciones, pero su evolución lo convierte ahora en un sistema o lenguaje multiproposito y llegó a su tope en popularidad cuando pudimos hacer uso de AJAX.

Temas que trataremos

Trataré de abarcar gran parte de lo que necesitamos a nivel de sintaxis, mi interés es brindarte en detalle lo que necesitas en el mundo laboral y que al mismo tiempo entiendas rápidamente cuando hablemos de VUEjs, React u otro Framework.

Aprenderemos:

  1. Condicionales.
  2. Tipos de datos.
  3. Funciones.
  4. Variables.
  5. Clases y objetos.
  6. Etc.

Está increíble, espero lo disfrutes.

Términos claves

Hoy día se manejan muchos términos al respecto, tantos que cuesta mantenerse al día. Yo quisiera hablar sobre los términos más importantes para que no huyas y aprendas mucho sobre JavaScript, vamos a comenzar.

Vanilla JS

Es otra forma de referirse a JavaScript puro y duro, es importante definirlo así porque muchas veces los alumnos comienzan con JavaScript sin escribir directamente JavaScript, quizás comenzaste como yo en jQuery. Eso hace que seas un programador en jQuery y no en JavaScript ¿se entiende la idea?.

¿Al final que tenemos?. Tenemos a una persona que sabe mucho sobre la librería pero poco o muy poco sobre lenguaje de programación (este fenómeno también existe con Laravel).

Vanilla es usar JavaScript en forma de Framework.

La frase clave es: JavaScript en forma de Framework puedes ir a http://vanilla-js.com/ y descargar lo que deseas implementar al respecto, por ejemplo AJAX o DOM.

Para usarlo solo debemos importar este archivo descargado desde nuestro HTML.

<script src="js/vanilla.min.js"></script>

Esto es tan divertido que en su página web tienen el siguiente texto:

Cuando vaya a subir su página web a su servidor (producción) haga la importación de la siguiente manera.


¿Ves que no hay nada?, ese es el chiste. En su web concluyen con lo siguiente:

Así es, no hay código en absoluto. Vanilla JS es tan popular que los navegadores lo han estado cargando automáticamente durante más de una década.

Podemos entonces concluir con lo siguiente, cuando escuches Vanilla JS debes saber que están hablando de JavaScript puro y duro.

Ejemplo final

//Con Vanilla JS o JavaScript puro
document.getElementById("name").value;

//con jQuery
$('#name').val();

El tema es desarrollar criterio y decidir qué usar cuándo y cómo.

ECMAScript

Esto hace referencia a un estándar creada por una organización llamada ECMA Internacional, lo que sucede es que ES6 o ECMAScript 6 fue tan famoso que suena a algo reciente o novedoso. Pero básicamente esta empresa está creando y mejorando el estándar usado de JavaScript desde 1996.

Historia rápida:

  1. La versión 1 fue publicada en 1997.
  2. La versión 2 se publicaría en 1998.
  3. En 1999 como puedes imaginar nace la versión 3.
  4. La versión 4 no existió "se abandonó".
  5. En el 2009 nace la versión 5 y con ella el soporte JSON.
  6. En el 2011 tendríamos la versión 5.1 y comenzamos a llamas a nuestras versiones ES, que en este caso sería ECMAScript 5.
  7. En el 2015 vino el renacer, tenemos en este caso al famoso ES6 o ECMAScript 6. Trajo consigo cambios significativos en cuanto a sintaxis y nuevas funciones permitiéndonos por supuesto tener como resultado aplicaciones realmente complejas y avanzadas. Es tan famosa esta versión o estándar que muchos no saben que luego han venido nuevas revisiones.
  8. Podemos concluir con ECMAScript 7, ECMAScript 2017 y ECMAScript 2018... Básicamente aquí tenemos nuevas versiones que se han encargado de incluir al ES6 mejoras y funciones.

El gran cambio o evolución se presentó de ECMAScript 5 a ES6, similar a lo ocurrido con Laravel 4 y el salto a Laravel 5. Ya se habla incluso de la versión ECMAScript 2019... Y así, esto involucra mejoras de lo que ya existe, nada será tan fuerte como de ECMAScript 5 a ES6.

No debemos preocuparnos... Mientras mas mejoras y funciones tengamos disponibles es mucho mejor para nosotros. Te explico todo esto porque no quiero que el mundo de las versiones te cause miedo o desanimo.

ECMAScript6 o ECMAScript 2015

Es una pregunta válida, que usar y cómo mantener la compatibilidad, aunque no lo creas aún muchos navegadores no tienen todas las mejoras ni soportes necesarios.

Ahí surge Babel, que básicamente te permitirá escribir ES6 y Babel lo traducirá a ECMAScript 5.

La documentación de Babel se llama así misma "Compilador de JavaScript que se utiliza para convertir el código ECMAScript 2015 o superior a versiones de JavaScript anteriores y así garantizar la compatibilidad".

Puedes estar al tanto sobre Babel en su web https://babeljs.io/

JavaScript o ECMAScript

Esto no tendría que traerte un problema alguno (lo explico porque me lo han preguntado), podemos resumirlo en lo siguiente:

  1. JavaScript: Lenguaje de programación.
  2. ECMAScript: Estándar de programación.

Extendiendo un poco mas la definición, podemor decir que ECMAScript nos da las reglas, los detalles y las directrices a seguir. Al usar JavaScript debemos cumplir esas reglas.

Es importante seguir un estándar, no recomiendo nunca hacer las cosas como creamos convenientes o como mejor nos parezca. Tendríamos un gran problema al trabajar en un teclado con el Enter ubicado donde va la barra espaciadora y la barra espaciadora ubicada donde va comúnmente la tecla Enter. ¡El caos!.

Todos los teclados son técnicamente iguales porque siguen un estándar. Nosotros en programación debemos hacer lo mismo.

Ecma International

Esto no es muy relevante para mi pero si tenías curiosidad te cuento que ECMA significa European Computer Manufacturers Association. Es el nombre de la empresa Suiza que desarrolló el estándar usado en JavaScript.

Esta super empresa ha creado los siguientes estándares:

  1. ECMA-262: Usado en JavaScript.
  2. ECMA-334: Usado en C#.
  3. Y así muchos otros estándares mas.

Para que entiendas esto bien te pongo un ejemplo: ES6 sería decir la sexta edición del estándar ECMA-262.