Rimorsoft Online
Blog Foro

Introducción a Javascript


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 refresca después de cualquier acción.

Si aprendes Javascript podrás crear sitios web, aplicaciones para escritorio, 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. ...

Y créeme, hay muchos mas... Tanta información hace que abandonemos el tema y 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).

Acompáñame y aprende desde la base del lenguaje.

Quiero enseñarte todo al respecto, incluso sobre el estándar ECMA, babel, Vanilla 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

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 o React.

  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 más importantes para que no huyas y aprendas mucho al respecto.

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 en jQuery, eso hace que seas un programador en jQuery y no en Javascript ¿se entiende la idea?.

Al final que tenemos. Una persona que sabe mucho sobre la librería pero poco del lenguaje de programación.

Vanilla es usas 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 e incrustarlo en 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 lo siguiente, cuando escuches Vanilla JS debes saber que están hablando de Javascript puro y duro.

Ejemplo final

//Vanilla o Javascript puro
document.getElementById("name").value;

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

El tema es pensar o preguntarse y desarrollar criterio.

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 suceda a algo nuevo o reciente. Pero básicamente esta empresa está creando y mejorando el estándar usado en Javascript desde 1996.

  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. Es tan famosa esta versión o estándar que muchos no saben que luego han venido nuevas versiones.
  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 a 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. 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, podemos resumirlo en lo siguiente:

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

Extendiendo un poco mas a la definición, digamos que ECMAScript nos da las reglas, los detalles y las directrices a seguir. Al usar Javascript debes 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 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.

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.

Uso de let y const

Variables let

Anteriormente la forma de declarar una variable era utilizando la palabra reservada var, esto lo que permitía es que la variables puede ser accedida globalmente, es decir desde cualquier sección del código.

if(true) {
    //La variable 'message' es accesible desde cualquier parte del código
    var message = "Variable global";
}
//En consola se mostrará el mensaje de 'Variable global'
console.log(message);

Las variables declaradas como let lo que permite es encapsularlas y solo poder utilizarlas en el ámbito donde fueron declaradas es decir entre las llaves de alguna estructura.

Aquí un ejemplo claro para entender esto mejor.

if(true) {
    //La variable sólo será accesible dentro de las llaves del if()
    let message = "Variable limitada";
}
//Esto dará un error ya que la variable 'message' no está definida
console.log(message);

Esta es la manera más común de declarar las variables de ahora en adelante, esto para mantener el encapsulamiento de la información.

Variables const

Ahora una nueva forma de declarar variables cuyo valor no admiten ser cambiados es con el uso de la palabra reservada const.

const constVar = value;

Al declarar una variable como const solo permitirá asignar el valor a dicha variable en la misma declaración y no se podrá modificar ni re declarar.

const PI = 3.14;
//Dará un error ya que no se puede redefinir un nuevo valor
PI = 100;
console.log(PI);

La asignación de la variable solo se permitirá en la declaración, lo que quiere decir que no es posible declarar una variable en una línea y asignarle un valor en otra.

const PI;
//Mostrará un error por que la asignación del valor se hace en la declaración
PI = 3.14;

Otra característica de las variables const es que a diferencia de las variables var no se puede re-declarar la misma variable de esta manera.

var num = 3; //se declara la variable num con el valor 3
console.log(num); //imprime en consola el valor 3
var num = 4; //se re-declara la variable num con el valor 4
console.log(num); //imprime en consola el valor 4

//se declara una constante con el valor 18
const constVar = 18; 
//lanza un error puesto que no se puede re-definir una variable const
const constVar = 100; 

Las variables let tampoco se pueden volver a re-declarar.

En cuanto a los objetos el funcionamiento es un poco diferente, ya que solo se aplica a la variable más no al contenido de la misma.

Aquí un ejemplo para ver esto.

const user = {
	name: 'Italo',
	lastname: 'Morales',
	phone: '0000000000'
};
console.log(user);

//Los atributos dentro del objeto no son afectados por const
user.name = 'Otro nombre';
console.log(user);

//No podemos re-asignar otro valor a la variable user
//Esto dará un error
user = 15; 

En conclusión, en ES6 se introducen dos nuevas formas de declarar variables, ahora let se utilizará en la mayoría de los casos esto para tener un mejor manejo de los errores, mientras que var se seguirá utilizando pero solo cuando por el contexto no sea adecuado utilizar let, por último las variables const se utilizarán cuando se necesite declarar variables cuyo valor no deba ser cambiado.

Libro de TDD - Lo que debes saber
Compra el libro
TDD lo que debes saber

Newsletter

Únete a más de 4.000+ personas y no te pierdas nunca más de las nuevas clases, tips, tutoriales y más cada semana.

    No enviamos spam. Puedes darte de baja en cualquier momento.