Fundamentos de JavaScript

Published in

Aonitek

10 min readMar 19, 2019

Aprendiendo las bases solidas para dominar este lenguaje

(Se consideran aprendidos algunos conceptos como: tipos de variables, lo básico de como utilizar un editor de código)

Para empezar

Creamos una carpeta en el escritorio donde guardaremos los archivos (.html y .js)

Utilizaremos Atom como editor de código pero puede utilizar otros sin problema (SublimeText, Visual Studio Code, etc). Abrimos la carpeta antes mencionada desde el editor y creamos un archivo con el nombre “clase 1” y al momento de guardarlo lo escribimos como: clase1.html

Escribimos la estructura basica de un archivo html, esto es, un head y un body de la siguiente manera.

<DOCTYPE html>
<html>
  <head>    
   <meta charset="utf-8">    
  <title></title>  
  </head>  
  <body>    
      
  </body>
</html>

(En algunos entornos como Atom, si creas el archivo y lo guardas, al escribir “html” y presionar la tecla TAB, el codigo mencionado arriba se escribe solo.)

Colocamos el titulo “Clase 1 — Variables” en la etiqueta title y lo guardamos.

<!DOCTYPE html>
<html>
  <head>    
   <meta charset="utf-8">    
  <title>Clase 1 - Variables</title>  
  </head>  
  <body>    
      
  </body>
</html>

Creamos un archivo en la misma carpeta y lo llamamos “clase1.js” para crear nuestro código Javascript externo. Agregamos una etiqueta script dentro del body de la siguiente manera.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>    
   <meta charset="utf-8">    
  <title>Clase 1 - Variables</title>  
  </head>  
  <body>    
     <script src="clase1.js">
     </script>  
  </body>
</html>

Esto hace que el archivo html llame a nuestro archivo Javascript cuando lo ejecutemos.

Abriremos también el archivo desde Chrome porque veremos desde ahí algunos conceptos en la consola (clic derecho en navegador de Chrome/Inspeccionar/console). Para abrir el archivo desde Chrome, presiona Ctrl + O y selecciona el archivo clase1.html

Cada vez que hablemos sobre ver o escribir en consola se referirá a este lugar.

De ahora en mas empezaremos a trabajar desde nuestro archivo “clase1.js”

Si queremos mostrar algo en la consola utilizaremos la funcion console.log() como se muestra. (Esto aparece en la consola de Chrome, no en la pantalla de Chrome)

console.log("Hola mundo")

Variables

Para declarar una variable utilizamos var y el nombre seguido de un espacio.

var nombre

Para asignarle un valor a esta variable, que en esta caso será una string, haremos lo siguiente

var nombrenombre= "Joaquin"

(se puede usar comillas simples o dobles, por convención se utiliza mas la simple)

Ahora si vamos a la consola y escribimos la variable nombre, aparecerá el valor que le dimos anteriormente.

(Es importante notar que no colocamos el punto y coma (;) al final de cada linea. Esto es opcional, JS no nos obliga a usarlos salvo algunos casos que explicaremos mas adelante.)

Ahora queremos que la consola nos diga “Hola, Joaquin”, es decir que use el valor que le dimos a la variable nombre

var nombrenombre= "Joaquin"console.log("Hola " + nombre)

(Notar que después de Hola se deja un espacio y luego el simbolo de parentesis para que no salga todo junto (HolaJoaquin). Esto habrá que tenerlo siempre en cuenta para escribir texto con variables.)

Podemos simplificar esto haciendo la primera y segunda linea en una sola

var nombre = "Joaquin"console.log("Hola " + nombre)

Si queremos agregar el apellido también, se realiza de la misma manera

var nombre = "Joaquin"
var apellido = "Solis"console.log("Hola " + nombre + " " + apellido)

Es importante el detalle de agregar las comillas y un espacio entre ellas (“ ”) después de la variable nombre porque sino al momento de mostrar se veria algo asi

Hola JoaquinSolis

En cambio con eso en la consola veremos asi:

Hola Joaquin Solis

Podemos simplificar y colocar el nombre y apellido en la misma linea de codigo:

var nombre = "Joaquin", apellido = "Solis"console.log ("Hola " + nombre + " " + apellido)

Algo importante a tener en cuenta es que Javascript es un lenguaje debilmente tipado por lo que una variable acepta cualquier tipo de valor. Es decir que no hay nada que diga que la variable “nombre” siempre sera del tipo string/texto.

Por ejemplo creamos la variable “edad”:

var edad= 25console.log("tengo " + edad + " años")

lo que aparece en la consola es

tengo 25 años

pero si ahora en el mismo código defino de nuevo la variable “edad”

var edad = 25
edad = "25 años"
console.log("tengo " + edad )

la consola mostrará

tengo 25 años

Es decir que ambos casos muestran lo mismo pero en el primer caso edad era del tipo numérico y en el segundo caso era una cadena. A esto se refiere cuando se dice que JavaScript es un lenguaje débilmente tipado.

Variables String

Vamos a convertir la variable nombre en mayusculas

creamos la variable NombreEnMayusculas y le asignamos el valor de nombre con la funcion .tuUpperCase() todo junto

var NombreEnMayusculas = nombre.toUpperCase()

Si en la consola llamamos la variable NombreEnMayusculas aparece

JOAQUIN

(Es importante saber que la variable nombre original sigue teniendo el valor antiguo, ya que el nombre es mayúscula es una variable aparte. Lo mismo aplica para los casos siguientes.)

Si quiero la variable apellido en minúsculas

var ApellidoEnMinusculas = apellido.toLowerCase()

escribiendo ApellidoEnMinusculas en la consola, mostrará

solis

Si quiero saber la primer letra de mi variable nombre

var primeraletranombre = nombre.charAt(0)

La posicion cero (0) es la ubicacion de la primera letra de la variable nombre

Si llamamos a la variable primeraletranombre, la consola mostrará la J (si es mayuscula o minuscula dependera de como este escrito la variable nombre).

Si quiero saber la cantidad de caracteres de la variable nombre escribo

var CantidadDeLetras = nombre.lenght

Llamamos en la consola a la variable CantidadDeLetras y mostrará 7.

Si cambio el valor de nombre, la variable CantidadDeLetras seguirá teniendo el valor 7 porque es el valor que tomó al momento de asignarle y no dependerá que valor tome la variable nombre después salvo que asigne de nuevo con

var CantidadDeLetras = nombre.lenght

Concatenar variables

Ahora quiero en una variable tener mi nombre completo. Para hacerlo será

var nombrecompleto = nombre + " " + apellido

Notar otra vez que se coloca el espacio entre las dos, esto es valido y la consola mostrará cuando llame la variable nombrecompleto:

Joaquin Solis

Otra manera de concatenar seria la siguiente

var nombrecompleto =   `${nombre} ${apellido}`

Importante: notar el uso de las comillas invertidas ( ` ) , el signo peso $ y las llaves {}

Tambien puedo cambiar dentro de las llaves el valor de la cadena

var nombrecompleto =   `${nombre} ${apellido.toUpperCase()}`

Eso mostrará en la consola

Joaquin SOLIS

Tambien se puede acceder a un sub string dentro de un string, por ejemplo quiero las letras oa de la variable nombre Joaquin. Escribo

var str = nombre.charAt(1)+ nombre.chartAt(2)

La consola muestra

oa

Tambien puedo usar la variable substr( ) para elegir desde donde hasta donde quiero tomar de la variable

var str = substr( 1, 2)

Aqui esta tomando desde la posicion 1 a 2 , es decir esta tomando las letra oa de la variable joaquin.

La consola mostrará

oa

Números

Operaciones comunes

Partiremos de un archivo en blanco en Atom y crearemos la variable edad

var edad = 27

Ahora en la consola escribimos y nos muestra tal valor. Si queremos sumar un valor a esta variable haremos lo siguiente

edad = edad + 1

Esto se llama Incremento, y la consola mostrará el valor actual = 28

Esto tambien se puede escribir de la siguiente manera

edad += 1

De la misma manera se puede escribir una disminución con ambos métodos

var peso = 80peso = peso - 2

var peso = 80peso -=2

En ambos casos la consola mostrará peso =78

Suma

Para sumar (o restar) dos variables se procede así

var peso = 80var torta = 2peso = peso + torta

var peso = 80var torta = 2peso += torta

Ahora con decimales

var preciogaseosa= 70.3

ahora si quiero saber el precio de 3 gaseosas

var total = gaseosa * 3

Si pido en la consola la variable total, la consola mostrara

210.9000000000001

Esto es algo que tenemos que tener en cuenta al trabajar con decimales en JavaScript ya que este no tiene una manera precisa de almacenar decimales. Esto viene por su forma de almacenar los bytes en la memoria ram.

Una manera de solucionar esto

Multiplicar y dividir por 100, ya que esto transforma el decimal en un entero y después lo vuelve a dividir

var total = preciogaseosa * 100 *3 / 100

Esto hará que la consola muestre 210.9

Pero pusimos 100 porque conociamos el valor de la variable. Que pasa si no conocemos el valor?

var total = Math.round( preciogaseosa* 100 * 3) /100

Ahora me mostrara el valor 210.9 pero es considerando que no conocía el valor de la variable preciogaseosa

Si quiero que me muestre dos decimales agrego la siguiente linea

var total = Math.round( preciogaseosa* 100 * 3) /100var totalstr= total.toFixed(2)

Con esto la consola mostrara “210.90” ya que le pedi a la funcion (toFixed) que mostrara solo dos decimales.

Pero si lo notaron a la ultima variable la llamamos totalstr , esto es porque es una string. Si queremos llevarla de nuevo a numero decimal

var total = Math.round( preciogaseosa* 100 * 3) /100var totalstr = total.toFixed(2)var total2 = parseFloat(totalstr)

parseFloat lee mi variable y la transforma de nuevo a decimales (float)

División

var pizza = 8var personas = 2var cantidadporcionesporpersona = pizza / personas

La consola mostrará 4

Funciones

Dicho de forma fácil de entender las funciones son pedazos de código reutilizables.

Vamos a partir de un archivo vacío y vamos a crear una variable nombre y edad

var nombre = "joaquin" , edad = 25

Para definir una función utilizaremos la palabra function (esta palabra y otras más que iremos aclarando no las podemos utilizar para otra cosa, es decir no podemos poner “function” de nombre a una función)

var nombre = "joaquin" , edad = 25function imprimirEdad() {}

Notar que:

·el nombre de la función lo podemos elegir nosotros

·al lado de la función se colocan ( ) , esto es para recibir algún parámetro. En este caso estará vacío. Mas adelante diremos como usarlos.

·la utilización de llaves {} para limitar el cuerpo de la función.

Para que se muestre el nombre y la edad escribiremos

var nombre = "joaquin" , edad = 25function imprimirEdad() {     console.log(`${nombre} tiene ${edad} años`)
}imprimirEdad()

Al ejecutar esta función la consola mostrará

Joaquin tiene 25 años

Si queremos que esta función acepte parámetros, es decir que se pueda colocar el nombre y la edad que nosotros queramos, vamos a hacer lo siguiente

var nombre = "joaquin" , edad = 25function imprimirEdad(nombre, edad) {console.log(`${nombre} tiene ${edad} años`)
}imprimirEdad(nombre, edad)

Ahora la consola aceptara cualquier parámetro que nosotros definamos como nombre y edad

(Para hacerlo mas simple y práctico podemos utilizar dentro de la función la letra “n” en vez de nombre y “e” en vez de edad)

var nombre = "joaquin" , edad = 25function imprimirEdad( n , e ) {console.log (`${ n } tiene ${ e } años`)
}imprimirEdad( nombre , edad )

Pero cuando necesito llamar a la función (en la última linea) necesito hacerlo con el nombre de las variables que necesito

Ahora podemos reutilizar la función cambiar nombre con los datos que queramos agregarle, como se muestra

var nombre = "joaquin" , edad = 25function imprimirEdad( n , e ) {console.log (`${ n } tiene ${ e } años`)
}imprimirEdad( nombre , edad )
imprimirEdad( "Juan" , 26 )
imprimirEdad( "Carla" , 20 )
imprimirEdad( "Marcos" , 30 )

Entonces la consola mostrará

Joaquin tiene 25 años
Juan tiene 26 años
Carla tiene 20 años
Marcos tiene 30 años

Ahora veamos algunos situaciones particulares

Que pasa si le paso los datos invertidos

imprimirEdad( 25 , "Joaquin" )

La consola mostrará

25 tiene Joaquin años

Ahora si no le paso ningún parámetro

imprimirEdad()

Mostrará

undefined tiene undefined años

Esto es porque las función ahora necesita parámetros y no le estamos pasando ninguno, por lo que muestra como variable indefinida (undefined)

Si le pasamos un solo parámetro de dos

imprimirEdad (nombre)

La consola mostrará

Joaquin tiene undefined años

Esto se debe a que como decíamos antes, JavaScript es un lenguaje débilmente tipado, por lo que no espera que le pasemos los datos justos, sino que hará lo que puede y mostrara la variable indefinida y sin mostrar algún error.

Alcance de las funciones

Hablemos del alcance de las variables, es decir, a que variables pueden acceder y que darán por resultado al invocarlas.

Definiremos en un archivo en blanco la función ImprimirNombreEnMayuscula

var nombre = "Joaquin"function ImprimirNombreEnMayuscula(){    nombre = nombre.toUpperCase()    console.log (nombre)
}ImprimirNombreEnMayuscula()

Si ejecuto el código la consola mostrará el valor de nombre en mayúsculas JOAQUIN

Ahora notemos que esta función cambió el valor de la variable nombre de forma permanente, es decir que si ahora la llamo se mostrara todo en mayúsculas. Si yo no quiero que esto pase voy a tener que manejar parámetros.

Utilizare a “n” como parámetro

var nombre = "Joaquin"function ImprimirNombreEnMayuscula(n){      n = n.toUpperCase()      console.log (n)
}ImprimirNombreEnMayuscula(nombre)

Con esto, manejo una variable “n” que solo servirá dentro de la función que llamé ImprimirNombreEnMayuscula.

Esta variable “n” tiene un alcance local, es decir se maneja solamente dentro de la función. Si yo quiero llamarla por fuera de la función no tendrá un valor (n is not defined) . Opuesta a esta, la variable nombre que definí en la primera linea tiene un alcance global.

Este efecto que vimos en el primer caso cuya función cambiaba de forma permanente el valor de la variable global nombre, se llama efecto lateral (side effect)

Si quiero usar la palabra nombre para mi funcion sin cambiar el valor de la variable global, es posible ingresando la palabra nombre como parametro en la funcion.

var nombre = "Joaquin"function ImprimirNombreEnMayuscula(nombre){nombre = nombre.toUpperCase()console.log (nombre)
}ImprimirNombreEnMayuscula(nombre)

Esto dará como resultado en la consola el nombre en mayúscula (JOAQUIN) pero si quiero llamar a la variable nombre esta seguirá con su valor original (Joaquin).

Esto se debe a que tendremos una variable global llamada nombre y una variable local con el mismo valor. Pero es importante aclarar que la variable local debe ingresar como parámetro para cumplir esto.

(Este post esta basado en el curso Fundamentos de JavaScript dado por Sacha Lifszyc en la plataforma Platzi)

Link al curso aqui

Si quieres probar ese curso, te dejo un link si quieres un mes gratis : https://platzi.com/r/joaquinsolis/

Fundamentos de JavaScript

Para empezar

Concatenar variables

Números

Operaciones comunes

División

Funciones

Written by Joaquin Solis