Tabla de contenido

Javascript es un lenguaje que desde su creación, aproximadamente en el año de 1995, se ha popularizado en el mundo de desarrollo web, especialmente con el uso de Frameworks como React, Vue, Svelte, Astro o cualquier otro que tengas en mente.

Es por ello que en esta ocasión quiero hablarte un poco acerca de los fundamentos básicos de Javascript con ejemplos que iremos desarrollando poco a poco.

¿Por qué usar Javascript?

Antiguamente, los desarrolladores utilizaban Javascript para poder darles un poco de interacción a sus sitios web, por medio de animaciones, agregando o eliminando textos e imágenes, o realizando call to actions que generaran más interacción al usuario.

Actualmente, entre sus múltiples funcionalidades, sirve como una extensión a lo que podemos hacer con HTML y CSS, adicionando nuevos métodos y formas de trabajar, desarrollando nuevos flujos de trabajo o automatizando ciertas tareas que comúnmente eran bastante tediosas de realizar.

Es por ello que cada vez se crean nuevas herramientas y frameworks que facilitan su uso y están enfocadas en cumplir cierta actividad o propósito, pero eso te lo platico en otra entrega, por el momento, toca el turno de empezar a mover las manos y conocer los fundamentos de Javascript.

¿Por donde inicio con Javascript?

Para poder iniciar a utilizar Javascript (JS como abreviatura), basta que tengamos a la mano un navegador y si bien, la mayor parte o todos los navegadores en este momento ya cuentan con herramientas para desarrolladores, nos vamos a centrar específicamente en el uso de Chrome.

¿Cómo usar Javascript?

Para acceder a Chrome Developer Tools o simplemente DevTools, es necesario que abras una nueva pestaña en Chrome (Ctrl + T en Windows, Cmd + T en Mac)

En la barra de direcciones, en lugar de escribir una url como google.com, añadiremos las palabras about:blank, puedes copiar y pegar directamente pulsando enter al final.

Una vez que ya estamos en una pestaña nueva y totalmente en blanco, podemos ir al menú Ver > Opciones para desarrolladores > Herramientas para desarrolladores o simplemente presionar Cmd + Option (ALT) + I.

Si no encuentras la opción también puedes dar clic con el botón derecho del mouse encima de una espacio en blanco del navegador y pulsar la opción Inspeccionar / Inspeccionar elemento

Una vez que nos haya aparecido una ventana del lado derecho o en la parte inferior de nuestra pantalla, tendremos varios encabezados, el primero dice Elements o Elementos, pero deberemos pulsar el que dice Console o Consola.

Son muchos pasos ¿Hay otra opción?

La respuesta es si, pero te recomiendo que te empieces a familiarizar con las Chrome DevTools ya que serán el pan de cada día, al principio como en todo, será medio complejo de recordar, pero después, es muy sencillo su uso.

De cualquier manera, en caso que quieras probar alguna funcionalidad, repetir o extraer pedazos de código, etc. Te recomiendo que instales RunJS, el cual definen como un Playground de Javascript para tu escritorio.

¿Y ahora qué sigue? Necesito aprender Javascript desde cero

Cada vez que estamos aprendiendo algo nuevo, la ansiedad e impaciencia se apoderan de nosotros, por querer ser lo más productivos en el menor tiempo posible y volvernos expertos en un minuto o menos, todo el mundo de la programación requiere tiempo, descanso, constancia y paciencia, por lo que te aconsejo te la lleves con calma y repitas las cosas las veces que sean necesarias, es por eso que aquí te dejo un listado de las cosas que deberías saber de Javascript:

Variables en Javascript

Para utilizar variables en Javascript tenemos 3 palabras reservadas: var, let y const, ejemplo:

var numero = 1
let numero = 1
const numero = 1

JavaScript

Si ejecutas este código todo junto, probablemente te aparezca un error como: `SyntaxError: Identifier ‘numero’ has already been declared.` , esto es porque la declaración de variables se debe de hacer solo una vez y si observas en el ejemplo, te estoy poniendo la declaración en sus 3 formas distintas, ¡no es necesario que las ejecutemos las 3 veces!, así que seguramente te estes preguntando: y entonces, ¿Cuál uso?

var, let y const: ¿Cuál debo de usar?

En términos muy sencillos, var fue la primera forma de poder declarar variables, así se declaraban anteriormente, sin embargo, con las nuevas actualizaciones de Javascript, aparecieron let y const. ¿Sospechoso no? 🤔 Esto fue porque existen algunos problemas asociados al declarar con var

por lo que, si hay problemas asociados a var ¿Tiene sentido que hayan aparecido nuevas formas de declaración, no crees? La recomendación es que ya no declares con var

Let resuelve los problemas que var presentaba en su momento por lo que puedes usarlo para declarar tus variables sin ningún inconveniente, lo único que tienes que tener en consideración es que let puede modificarse, pero no debe volver a declararse, ¿qué quiere decir esto?

Si podemos

let numero = 1
let numero = 2

JavaScript

Seguramente tendremos el mismo error del inicio, ya que estamos declarando dos veces la misma variable, por lo que simplemente una vez que la variable se declare, podemos modificarla sin el uso de let, es decir:

let numero = 1
numero = 2

JavaScript

Por cierto, seguramente te has fijado que mis ejemplos no llevan el punto y coma (;), es importante mencionarte que es opcional para javascript. 🥳

Const es la última palabra reservada para declarar variables en javascript y la particularidad con respecto a let, es que no se puede modificar la variable una vez que haya sido asignada, ejemplo:

const numero = 1
numero = 2

JavaScript

Esto traería consigo un error del tipo: TypeError: Assignment to constant variable. ya que como te comenté hace un momento, no se puede modificar el valor de una variable const, OJO con los objetos declarados con const, no podemos reemplazar el objeto completamente, pero si podemos modificar sus atributos o parámetros, ya iremos viendo esto más adelante.

Bueno, ya aprendimos sobre variables, ¿ahora que sigue?

Funciones en Javascript

Una función en Javascript es una serie de instrucciones que se encuentran encapsuladas o contenidas, es decir, una función es un listado de tareas o instrucciones para poder realizar algo.

Podemos definir de diversas formas una función, aquí te dejo unos ejemplos

function bienvenida(){
  alert("Bienvenido a mi sitio web")
}

JavaScript

Podemos observar algunos componentes importantes de una función:

  1. Se define o declara mediante la palabra reservada function
  2. Se le asigna un nombre, en este caso, el nombre de la función es bienvenida, aunque cabe aclarar que hay funciones que no tienen nombre, se les conoce como funciones anónimas
  3. Se añaden paréntesis, todas las funciones deberán de llevar paréntesis y dentro de ellas, pueden contener variables que en este caso, se denominan parámetros, si es más de un parámetro, se separan mediante comas (,)
  4. Se añaden corchetes para poder segmentar las líneas de código de la función
  5. Por último, en este caso, estamos nombrando a otra función, la cual se denomina alert y que contiene una cadena de texto con la leyenda Bienvenido a mi sitio web

Esta misma función la podemos escribir mediante una función de flecha o arrow function, la cual quedaría de la siguiente forma

const bienvenida = () => alert("Bienvenido a mi sitio web")

JavaScript

Como puedes observar, hacemos uno de la palabra reservada const para poder asignar el nombre a la función de flecha, ahora imaginemos que queremos que de la bienvenida agregando el nombre del usuario, la función quedaría de la siguiente forma:

function bienvenida(name){
  alert("Bienvenido a mi sitio web " + name)
}
const bienvenida = (name) => alert("Bienvenido a mi sitio web " + name)

JavaScript

Como puedes observar, es exactamente el mismo ejemplo, pero en el primero se ocupa la palabra reservada function mientras que en la otra utilizamos el arrow function o función flecha.

Ahora hay algunas cosas importantes que tengo que mencionarte:

Los ejemplos anteriores de funciones, se denominan declaración de la función, ya que se está definiendo que es lo que va a realizar la función, sin embargo, existe otra operación que tenemos que hacer una vez que ya está definida la función, se denomina ejecución, básicamente consiste en hacer uso de la función y eso se hace escribiendo el nombre de la función con la información que queremos mandarle, ejemplo:

bienvenida('8devmx')

JavaScript

Probablemente ya tengas una idea de lo que eso hace, básicamente, nos mandaría un mensaje en la pantalla con la leyenda: Bienvenido a mi sitio web 8devmx

¿Observaste que cuando le pasé un parámetro a la función llevaba el signo de más (+)?

El signo de más nos ayuda a concatenar cadenas de texto, en este caso, la cadena “Bienvenido a mi sitio web” se concatena con la cadena “8devmx”, sin embargo, existe otra forma de hacer esto y es mediante la interpolación de variables o comúnmente nombrados template strings

Te dejo el ejemplo para que puedas notar la diferencia:

function bienvenida(name){
  alert(`Bienvenido a mi sitio web ${name}`)
}
const bienvenida = (name) => alert(`Bienvenido a mi sitio web ${name}`)

JavaScript

Tanto concatenar como interpolar obtendrían el mismo resultado, pero la forma de escribirlos cambia un poco, en la concatenación ocupamos las comillas simples(’) o comillas dobles(""), mientras que en la interpolación se deberán ocupar las comillas invertidas(“)

Adicional, observa que en la interpolación se reemplaza el signo + por ${}, justo para poder interpolar la variable dentro del template string.

Creo que por el momento hemos aprendido bastante de sobre Javascript, es importante saber que esto es lo más básico, pero sin duda estamos cimentando los conocimientos para los siguientes días.

Antes de terminar, quiero hacerte una preguntas:

  1. ¿Como abrimos la consola o DevTools de Chrome?
  2. ¿Qué es una variable en Javascript?
  3. ¿Cuántas palabras reservadas tenemos para poder declarar una variable en Javascript?, ¿Cuáles son?
  4. ¿Cuáles son las 3 formas de poder definir funciones en Javascript?

Artículos Relacionados

Créeme que si contestaste correctamente a todas las preguntas, hemos avanzado un montón y sino es así, simplemente vuelve a leer, seguro pronto se te quedará grabado.