Conociendo Javascript

Para los que leen mi blog y no me siguen en mis redes, la semana pasada hice una especie de torneo de lenguajes de programación en donde comparé varios lenguajes y deje que la comunidad decidiera cuál es su lenguaje de programación favorito y el ganador obtendría un post bien completo respecto del mismo. Bien pues, aquí esta el post.

¿Qué es Javascript?

Javascript o también conocido como JS es un lenguaje de programación interpretado, que se define como orientado a objetos, imperativo, débilmente tipado y dinámico. Se utiliza principalmente del lado del cliente, implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas. También tiene uso en aplicaciones de servidor pero mediante el uso de un framework especializado que permite al servidor interpretar su código y convertirlo en un lenguaje que él pueda entender. Además, también tiene uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets).

Todos los navegadores modernos interpretan el código JavaScript integrado en las páginas web. Para interactuar con una página web se provee al lenguaje JavaScript de una implementación del Document Object Model (DOM) que no es más que una representación en forma de objeto de la página.

Aunque su nombre pueda insinuarlo Javascript y Java son 2 lenguajes distintos y con propósitos separados que puede provocar la confusión entre personas ajenas a la materia o principiantes en el área de la programación. 

¿Para qué sirve?

Como lo mencioné antes, la función principal de Javascript es ser utilizado en páginas web para poder controlar los elementos de la página web mediante la utilización de scripts, pero esa no es su única utilidad, también sirve para hacer aplicaciones de escritorio y para distintos dispositivos. Al ser un lenguaje tan estandarizado es muy fácil que cualquier plataforma lo pueda utilizar y lo que esto significa es que javascript puede usarse para casi cualquier cosa si lo usamos en conjunto con las herramientas adecuadas.

Un ejemplo de esto es el hecho de que hoy en día existen videojuegos hechos exclusivamente con Javascript. Lo que me parece más increíble de javascript es que prácticamente está limitado por la imaginación del que lo utilice ya que permite modificar, agregar o quitar elementos del DOM y con esta posibilidad, podemos hacer prácticamente todo lo que queramos con nuestra página. 

Sintaxis

Javascript es un lenguaje débilmente tipado e interpretado. Lo que esto significa es que no es estricto en cuanto a la declaración de variables y métodos, no tenemos que especificar un tipo de datos al momento de declarar una variable en JS, y por interpretado lo que quiere decir es que no es necesario compilar el código para que corra, ya que el servidor o en este caso el cliente es el que se encargará de interpretar y correr ese código por nosotros.  La desventaja de esto es que muchas veces no nos daremos cuenta de que estamos cometiendo un error hasta que lo probemos y para probarlo tiene que estar corriendo en un navegador.

El DOM

El DOM es una representación en forma de objeto de una página web o de una ventana de una página web. Es lo que nos permite interactuar con el HTML de la página lo que a su vez nos permite hacerle modificaciones a ella. La verdad es que la cantidad de cosas que podemos hacer desde JS para interactuar con una página web es muchísima, te voy a hablar de las más conocidas y más usadas.

partamos de dos elementos HTML básicos y veamos cómo puede afectar nuestro JS a esos elementos:

Para empezar tenemos un elemento div con una clase css llamada “divElementClass” y un id=”divElementId”. Luego como hijo de ese elemento tenemos un elemento input que posee un name=»inputElementName» class=»inputElementClass» id=»inputElementId» vamos a ver poco a poco qué cosas podemos hacer con JS y la interacción con el DOM.

para interactuar con todos los elementos de nuestra página web, es decir todo el documento HTML podemos usar la palabra clave document partiendo del document podemos encontrar elementos usando una de las siguientes sentencias.

getElementById(): permite encontrar un elemento dentro del document que posea un id como el indicado. Usualmente los id de los elementos HTML que usamos son únicos por lo que siempre que usemos esto deberíamos encontrar solo un elemento en toda la página con ese id, si encontrásemos más de 1 la sentencia los almacenará todos en un arreglo y ya que Javascript no está tipado fuertemente, entonces no se producirá un error. Por esto tenemos que estar muy claros de cómo está construida nuestra página para saber qué esperar cuando usemos estas sentencias.

getElementByName(): similar al getElementById este encontrará todos los elementos que tengan el atributo name tal como se lo indiquemos en la sentencia. 

getElementByClassName(): similar a los demás me permite encontrar todos los elementos que tengan una clase css con el nombre indicado en la sentencia.

veamos unos ejemplos:

otra cosa interesante que podemos hacer mediante la manipulación del DOM es agregar HTML al mismo mediante Javascript, esto es especialmente útil cuando tenemos ciertos elementos que solo queremos que se muestren o se construyan basados en ciertas acciones del usuario.

por ejemplo podemos ubicar un elemento del DOM y modificar completamente su codificación HTML usando la función innerHTML de un elemento DOM:

los posibilidades que me da esto son muchísimas porque puedo modificar completamente una página simplemente modificando el HTML interno de un elemento más global dentro de la misma, como por ejemplo el <body>

Eventos del DOM

Hablemos ahora de otra cosa que hace a Javascript uno de los lenguajes más flexibles y dinámicos que existen y me refiero a los Eventos del DOM. Estos eventos no son más que funciones predefinidas en nuestra página que permite que ejecutemos código de Javascript basado en interacciones que el usuario haga con nuestra página. Estos eventos vienen definidos por defecto y para llamarlos tenemos que usar el nombre del evento precedido de la palabra “on” que en español podría traducirse como “al ocurrir”. Veamos algunos:

Algunos eventos de mouse:

onclick: permite ejecutar un código JS al momento en que el usuario hace presiona y suelta el botón izquierdo del mouse en el elemento que tenga este evento declarado.

onmousedown: permite ejecutar un código cuando el usuario presiona el botón izquierdo del mouse (no importa si no lo suelta). 

onmouseup: similar al anterior pero solo se ejecuta cuando el usuario suelta el botón izquierdo del mouse.

Algunos eventos de teclado:

onkeyup: permite ejecutar un código cuando el usuario suelta una tecla que tenía presionada.

onkeydown: permite ejecutar un código cuando el usuario presiona una tecla.

onkeypress: permite ejecutar un código cuando el usuario presiona una tecla. Específicamente cuando es una tecla que escribiría un carácter.

La verdad es que conocer todos los elementos de DOM disponibles ya es una tarea por sí sola, así que te invito a que averigues que otros elementos eventos existen y que los dispara, te dejo un enlace aquí a la referencia que use. 

Conociendo ya como interactuar con los elementos del DOM y cómo puedes saber cuando un usuario interactúa con los elementos del DOM entonces tienes el control de responder a prácticamente cualquier interacción que haga el usuario y mejor aun, si pasas como parametro a tu funcion de javascript el evento seleccionado, entonces podrás saber cual fue específicamente el elemento que disparó el evento, aunque por otro lado hay otras maneras más lentas pero menos complejas de hacer esto como por ejemplo declarando una función diferente para cada elemento del DOM del que desees capturar un evento.

Frameworks de JS

¿Qué es un framework? pues es un conjunto de herramientas prediseñadas que te permiten seguir ciertos patrones de desarrollo y que facilitan mucho el trabajo de un programador. Prácticamente todos los lenguajes poseen frameworks y JS no es la excepción. Algunos de los mejores frameworks que existen son los que te mencionaré a continuación pero no son los únicos

Angular

Lanzado por google el 2009 , es uno de los frameworks open source más avanzados. Posee una característica llamada vinculación bidireccional que permite tener una variable en el código js y que su valor cambie dinámicamente en el HTML y si este cambia en el HTML entonces también cambia su valor en el JS.  Angular cuenta además con el mayor apoyo comunitario activo en todo el mundo. Además posee una curva de aprendizaje muy baja y es muy utilizado por los ingenieros.

React.js

Aunque no es realmente un framework , si no una librería , dos de las aplicaciones web más utilizadas en el mundo están desarrolladas con React.js. Facebook e Instagram, entre muchas otras, utilizan esta librería. Si quieres lanzar una web robusta, dinámica y escalable con un rendimiento fiable, la elección debe ser React.js . Otra característica a destacar es la capacidad de traer elementos reutilizables. Esto permite a los desarrolladores reutilizar los componentes en varias aplicaciones. Por último, destacar que ofrece el diseño Material-UI, inspirándose en el diseño de materiales de Google.

Vue.js

Este framework es especialmente destacable debido a que se apoya en una API muy simple, pero a la vez desarrolla los elementos dinámicos de interfaces web muy sofisticadas. La clave reside en la facilidad de uso. También utiliza el paradigma de diseño MVC que permite simplicidad en el diseño. La principal característica es la libertad de utilizar módulos selectivos para necesidades particulares de desarrollo web.

Si quieres ver otros frameworks o profundizar más en esto puedes leer la fuente original de donde saqué esta información.

Aprender Javascript

En general JS es un lenguaje relativamente sencillo de aprender, en mi caso particular lo aprendí mediante la lectura del código de otras personas, lo que esto significa es que es muy intuitivo o al menos hasta cierto punto. Si bien creo que Javascript es un lenguaje sencillo de aprender, definitivamente es difícil convertirte en experto en el mismo y probablemente por esto es que los que se especializan en Javascript no quieren dejarlo puesto que tiene demasiadas vertientes a diferencia de otros lenguajes más cerrados como Java. 

Así que ahora probablemente estés pensando ahora mismo que todo esto es muy bonito y todo pero ¿Cómo puedo aprender Javascript? bueno mi primera recomendación es que lo practiques tú mismo, busca un par de tutoriales en youtube y empieza a poner en práctica esos conocimientos. Ya que tienes la posibilidad de incluir JS en cualquier documento HTML puedes hacer tu propia prueba creando un documento en tu maquina y abriéndolo con google chrome. Sino puedes buscar páginas para escribir código online como Codepen que es un editor de código online gratuito. 

Si con eso no es suficiente y lo que buscas es hacer un curso completo de Javascript entonces te daré algunas opciones que hay en internet gratuitas y no gratuitas para que aprendas:

Gratis:

Curso de JAVASCRIPT desde CERO (Completo) – Nivel JUNIOR

Curso de Javascript Pildorasinformaticas

Pago:

Desarrollo Web Completo con HTML5, CSS3, JS AJAX PHP y MySQL

Master en JavaScript: Aprender JS, jQuery, Angular, NodeJS

Conclusión

Bien ya con esto pudiste conocer un poco de qué es y cómo funciona Javascript espero que haya sido de tu agrado y que si te gusta puedas profundizar más en el tema. Una última recomendación que te puedo dar, es que el aprender Javascript no es algo que se haga de manera individual, casi siempre cuando aprendemos Javascript nos vemos casi obligados a aprender HTML y CSS para sacarle el jugo propiamente. Pero no te asustes porque si puedes aprender y entender JS lo demás sera super sencillo de entender y además serás un programador Frontend hecho y derecho.

Espero que te haya gustado este artículo, y si participaste en la encuesta, ¡gracias por participar!