Home Blog/ Transformación digital/
Transformación digital

¬ŅQu√© es Javascript? La gu√≠a para perderle el miedo a la programaci√≥n

Angela Palacios - 30 May 21

Articulo

7 min.

¬ŅTe interesa saber qu√© es Javascript y entender a√ļn m√°s los lenguajes de programaci√≥n, pero te asusta pensar en tantos c√≥digos? Es normal sentirnos as√≠ cuando no dominamos un tema. Lo importante es que ya diste el primer paso y por eso, est√°s en este art√≠culo. Nosotros daremos el siguiente paso contigo, explic√°ndote de una manera m√°s sencilla los fundamentos de Javascript.

Prepárate para conocer qué es Javascript, sus funciones y entender las ventajas y desventajas de Javascript. 

Estamos seguros que despu√©s de aprender Javascript desde lo m√°s b√°sico, el miedo se ir√° y las ganas de conocer m√°s sobre este tema se quedar√°n para siempre. ¬°Est√°s m√°s cerca de saber c√≥mo crear p√°ginas din√°micas y llamativas! ¬ŅListo para lograrlo?ūüöÄ

Desde lo b√°sico: ¬ŅQu√© es Javascript?

Partiremos por decirte que el interés por aprender más sobre las funciones de JavaScript es muy acertado, pues estamos hablando del lenguaje de programación más utilizado a nivel mundial por desarrolladores profesionales, de acuerdo al ranking publicado por Stack Overflow.

Entendiendo la popularidad de Javascript, ahora sí hablaremos sobre qué es Javascript o JS, como también se le conoce. Se trata de un lenguaje de programación que le da mayor interactividad a las páginas web, gracias a la lógica que maneja a través de códigos.

De acuerdo con Sergio Agamez Negrete, profesor del curso Fundamentos de JavaScript, ‚Äúeste es uno de los lenguajes de programaci√≥n m√°s usados en el mundo tanto en programaci√≥n Frontend, como en l√≥gica Backend. Tiene m√ļltiples usos, es utilizado para la creaci√≥n de sitios web y aplicaciones web, m√≥viles y de escritorio‚ÄĚ.

JS permite implementar funciones complejas en una página web, de ahí que algunos lo consideren como una herramientas más difícil de manejar que HTML y CSS (de los que pronto haremos las diferencias). 

Pero entonces, ¬Ņpor qu√© complicarse la vida? Porque con Javascript te olvidas de las p√°ginas web est√°ticas para pasar a opciones mucho m√°s interactivas a la hora de mostrar la informaci√≥n. Por ejemplo, mapas interactivos, botones, animaciones, banner de video, entre otros.¬†

Al aprender cómo programar en Javascript entenderás que así podrás establecer una comunicación con la computadora a través de un lenguaje lógico.

¬ŅPerdido? Vamos despacio. Con el lenguaje de programaci√≥n de Javascript podr√°s crear un puente entre el c√≥digo binario que solo entiende la computadora y la acci√≥n que t√ļ quieres que realice tu web. Por ejemplo, que al hacer scroll, aparezca una ventana emergente en tu p√°gina. ¬ŅM√°s claro? Se trata de darle mayor funcionalidad a tu sitio web. ūü§ď

Ranking Javascript

Fuente: Stack Overflow

Hagamos una pausa para una aclaración: HTML, CSS y Javascript

Si eres nuevo en el mundo de la programación, tal vez podrías pensar que saber qué es Javascript, te hará elegirlo por encima de HTML y CSS, y la realidad es que aunque son términos relacionados y aparentemente, pueden lograr resultados similares, no son lo mismo. Más bien, son un complemento.

HTML y CSS no son lenguajes de programaci√≥n t√©cnica. Seg√ļn el profesor Sergio Agamez, ‚Äúson lenguajes de marcado y de estilos‚ÄĚ. Es decir, que se encargan de la estructura de la p√°gina y la informaci√≥n de estilo.

Te compartimos tres puntos para no olvidar qué es Javascript, HTML y CSS:

  1. HTML: estructura del contenido de una página web a través del uso de elementos envueltos en etiquetas compatibles universalmente. Por ejemplo, tablas, párrafos y encabezados.

  1. CSS: describe cómo nuestros elementos en HTML serán mostrados en una pantalla de computadora, celular u otro dispositivo multimedia. Por ejemplo, tipos de letra y colores de fondo.

  1. JS: es la lógica de lo que hará la página web. Es decir, lo que le puede dar interacción al HTML y CSS. Por ejemplo, imágenes interactivas, botones y ventanas emergentes.

 

Ventajas y desventajas de Javascript

Haremos un breve recuento de las ventajas y desventajas de Javascript para que comprendas las posibilidades que tendrás al entender qué es Javascript y usar este lenguaje de programación.

Ventajas

  • Aprender c√≥mo descargar Javascript y c√≥mo activar Javascript es muy f√°cil. Como te explicamos al principio, podr√≠a parecer algo tedioso, pero la sintaxis es f√°cil de entender. Adem√°s, existen muchos tutoriales de Javascript de los cuales puedes aprender.

  • Es un lenguaje vers√°til. Al ser tan popular, JS puede integrarse con muchas otras tecnolog√≠as y puedes insertar su c√≥digo en otras p√°ginas sin importar la extensi√≥n de los archivos.

  • Al aprender c√≥mo habilitar Javascript, entender√°s que la ejecuci√≥n del programa se hace del lado del cliente, haciendo que la carga en el servidor del sitio web sea mucho m√°s r√°pida.

  • Podr√°s crear interfaces din√°micas y ejecutarlo en diferentes sistemas operativos y CMS.

Desventajas 

  • El lenguaje de programaci√≥n Javascript se puede desactivar del navegador. Entonces, es posible que un usuario, sin darse cuenta, lo desactive y los c√≥digos de la web no se ejecuten.

  • JS, al ser un programa que se ejecuta del lado del cliente, los c√≥digos usados pueden ser le√≠dos por otros usuarios.

  • Para poder desarrollar un sitio web completo, deber√°s ayudarte de otros lenguajes de programaci√≥n.

Fundamentos Javascript

Fuente: Unsplash

Fundamentos de Javascript

Cuando aprendemos cómo usar Javascript es importante tener en cuenta el editor de código fuente que utilizaremos para hacer magia en nuestro sitio web. Algunos de los más populares son Sublime Text, Virtual Studio Code, Brackets y Atom.

Luego de tener la herramienta en la que trabajarás tu lenguaje de programación Javascript, pasaremos a aclarar otros conceptos que debes manejar.

Declaraciones

¬ŅQu√© es JavaScript? Un mundo con c√≥digos en el que podr√°s realizar infinidad de acciones. De ah√≠ que tengas claro qu√© son las declaraciones de Javascript, porque es lo que har√°s todo el tiempo. Estas son las indicaciones que dar√°s al programa para que ejecute actividades. Existen tres tipos de declaraciones de variables:

‚úĒÔłŹ ¬†var: declara una variable.

‚úĒÔłŹ let: declara una variable local con √°mbito de bloque.

‚úĒÔłŹconst: declara un nombre de constante de solo lectura y √°mbito de bloque.

A continuaci√≥n entender√°s mejor en qu√© consisten las variables de Javascript.ūüĎá

Variables de Javascript

Est√°s aqu√≠ porque quieres saber qu√© es Javascript y c√≥mo aprender Javascript, entonces, empezaremos con uno de los elementos que utilizar√°s a la hora de programar: las variables. ¬ŅQu√© son? Como ya lo indicamos, son elementos que se emplean para almacenar y hacer referencia a otro valor.

La p√°gina Desarrollo Web explica que las variables de Javascript ‚Äúson un espacio en la memoria donde se almacena un dato, all√≠ podemos guardar cualquier tipo de informaci√≥n que necesitemos para realizar las acciones de nuestros programas‚ÄĚ.

Sergio Agamez compara ‚Äúlas variables de Javascript con una caja, donde se pueden guardar una o m√°s variables‚ÄĚ. Y lo ejemplifica a trav√©s del siguiente ejercicio:

‚ÄúPara declarar una variable hay que crear la variable reservada var, luego, se pone el nombre de la variable, que en este caso recibir√° el t√≠tulo nombre‚ÄĚ.

Ejemplo variables JavascriptFuente: Crehana

Este es el resultado en el navegador:

Ejemplos variables Javascript navegadorFuente: Crehana

Existen diferentes tipos de variables en Javascript, algunos de ellos son: n√ļmeros, cadena de texto, valor booleana (valor l√≥gico que puede ser true o false), elementos HTML, arreglos (variables con m√°s de un valor), objetos (puede tener propiedades y valores) y funciones.

Reminderūüö®: ya sabes qu√© es Javascript, por eso, es importante tener en cuenta que las indicaciones se llaman declaraciones y que estas deben cerrarse con punto y coma (;) para que el c√≥digo se ejecute y se eviten errores.

Tipos de variables JavascriptFuente: Crehana

Operadores de Javascript

Ya has visto para qu√© se utiliza Javascript, pero a√ļn falta m√°s. Por eso, te contaremos qu√© son los operadores.

Básicamente, los operadores en Javascript son lo que te permitirán manipular el valor de las variables. Con estos podrás hacer operaciones matemáticas y comparar variables. El plus de los operadores es la posibilidad que ofrecen de hacer cálculos complejos y tomar decisiones lógicas.

Los operadores de Javascript son los siguientes:

  • Aritm√©ticos.

  • L√≥gicos.

  • De comparaci√≥n.

  • Binarios.

  • De asignaci√≥n.

De acuerdo con Desarrollo web, ‚Äúel resultado de las operaciones en JS es lo que hace que un programa var√≠e su comportamiento seg√ļn los datos que tenga para trabajar y nos ofrezca resultados que sean relevantes para el usuario que lo utilice‚ÄĚ.¬†

Condicionales de Javascript

Conocer qu√© es Javascript incluye comprender lo que podemos hacer con este lenguaje de programaci√≥n. Los condicionales son una de estas posibilidades. Pero, ¬Ņqu√© significan? Son sentencias que nos permiten indicar a la computadora que realice, o no, alguna tarea, dependiendo de ciertas condiciones.¬†

Su funcionamiento es muy sencillo, siempre debes escribir la palabra reservada if, seguida de par√©ntesis (donde escribir√°s la condici√≥n) y, despu√©s, abres llaves para indicar en estas la tarea a realizar. La idea es que si se cumple la condici√≥n especificada, se har√° la tarea. ¬ŅAhora entiendes m√°s qu√© es Javascript?

Esta opción de JS también permite usarla para el caso contrario. Es decir, si no se cumple cierta acción, tendrá que realizar x tarea. Para ello, escribirás else entre llaves como se muestra en la imagen de abajo.

Para que entiendas mejor la utilidad de los condicionales al activar Javascript, te daremos un ejemplo: si en un videojuego el n√ļmero de vidas del jugador es 0, entonces el juego se termina. ¬ŅVes lo √ļtil que puede llegar a ser instalar Javascript?

Condicionales JavascriptFuente: Crehana

Intervalos y retardos

¬ŅYa te hab√≠amos dicho que en este art√≠culo te estamos adelantando algunos de los consejos del curso de Javascript desde cero? ¬°Ya lo sabes! y, por eso, debes estar muy atento a todo lo que te contamos, pues as√≠, en caso de que accedas al curso, podr√°s entender mucho mejor la parte pr√°ctica que ver√°s en este.

Por esa raz√≥n, vale la pena entender los conceptos de intervalos de ejecuciones (‚ÄėsetInterval‚Äô) y retardos en ejecuci√≥n de un m√©todo (‚ÄėsetTimeout‚Äô).

Vamos con el primer término, los intervalos de ejecuciones en JS son una función reservada que permite agregar dos parámetros. El primero es la acción a realizar, y el segundo es el tiempo en milisegundos en el que se ejecutará la acción una y otra vez. El código de los intervalos se verá así:

setInterval("javascript function",milisegundos);

Ahora, vamos con los retardos de ejecución de un método. Al entender qué es Javascript y  cómo programar en Javascript, observarás que con este elemento podrás indicar que las acciones se realicen después de cierto periodo de tiempo. El código del retardo se verá así:

setTimeout("javascript function",milisegundos);

Ciclos

Los ciclos son muy √ļtiles para entender qu√© es Javascript, porque permiten que un bucle (opci√≥n que ofrece una forma r√°pida y sencilla de hacer algo repetidamente) se repita una y otra vez. Parecen intervalos pero son diferentes, porque estos √ļltimos se repiten cada tanto tiempo, mientras que en el ciclo se ejecutar√° todo de golpe.

Imagina que quisieras repetir la frase ‚ÄúHola mundo‚ÄĚ cinco veces. Lucir√≠a as√≠:

Ciclos Javascript

Fuente: makeitrealcamp

En ese caso puedes hacerlo de manera manual sin ning√ļn problema, pero ¬Ņqu√© pasar√≠a si quisieras repetirlo 850 veces? Complicado, ¬Ņcierto? All√≠ salen los ciclos a rescatarnos. En ese caso se usar√≠a el siguiente c√≥digo:

ciclos while Javascript

Fuente: makeitrealcamp

Es importante que sepas que los códigos de los cuales te hemos hablado, se han hecho de forma imperativa, es decir, sin programación. Esta manera es válida, pero también existe otra forma de programar, se trata de la programación orientada a objetos (POO), que te permite ser organizado para que otras personas puedan reutilizar el código y adelantar su trabajo.

El DOM en Javascript

¬ŅRecuerdas que habl√°bamos de que al descargar Javascript y entender qu√© es Javascript lograr√≠as p√°ginas m√°s interactivas? Bueno, hemos llegado al punto que le dar√° dinamismo a tu p√°gina web. Nos referimos al DOM, que significa Document Object Model.

¬ŅEn qu√© consiste? Seg√ļn el sitio web Lenguajes JS, ‚Äúel DOM es la estructura que podemos modificar de forma din√°mica desde Javascript, a√Īadiendo nuevas etiquetas, modificando o eliminando otras, cambiando sus atributos HTML, a√Īadiendo clases, cambiando el contenido de texto, etc.‚ÄĚ.

Puedes crear los frameworks de Javascript desde cero con el DOM o descargar libros de Javascript con código abierto como React para crear interfaces de usuario.

Eventos de Javascript

Con este √ļltimo fundamento cerraremos nuestra explicaci√≥n sobre qu√© es Javascript. Dejamos lo mejor para lo √ļltimo, ya entender√°s por qu√©.

Con los eventos, JS controla las acciones de los visitantes y define un comportamiento de la p√°gina cuando se produzcan. Por ejemplo, que al presionar un bot√≥n te muestre un anuncio, que al cerrar una pesta√Īa aparezca una ventana emergente que invite al usuario a quedarse‚Ķ son infinidad de eventos los que puedes crear para que tu p√°gina web interact√ļe con tus usuarios.

Entender qué es Javascript puede tomarnos mucho más tiempo, sin embargo, estamos seguros que no eres el mismo que comenzó a leer este artículo, ahora sabes muchos trucos y conceptos. Tener fundamentos de Javascript te abre la mente al mundo de los lenguajes de programación y además, te anima a querer conocer más.

Por eso, te recomendamos aprender Maquetaci√≥n de sitios web din√°micos con Javascript desde cero. Con las ense√Īanzas de este curso y de esta gu√≠a sobre qu√© es Javascript, seguro crear√°s sitios web muy pro. As√≠ que, ya que perdiste el miedo y diste el primer y el segundo paso, vamos por el tercero: seguir practicando. ¬°Te ir√° muy bien! ūüĎŹ