IñaDev Blog

Conceptos Básicos de Programación

Antes de empezar a escribir código es necesario entender algunos conceptos de programación para asegurarnos de que hablamos el mismo idioma y nos entendemos.

Empecemos:

Variable: Una variable es un grupo de información que, como su nombre implica, varia, que puede representar múltiples valores, esto es así en todas las disciplinas que usan el término. En programación una variable puede ser tanto un numero como un texto o una afirmación de veracidad (verdadero, falso).
Constante: Una constante es prácticamente lo mismo que una variable con la diferencia de que una vez se les asigna un valor este no se puede cambiar.
Algoritmo: Un algoritmo es una lista de instrucciones que se siguen para conseguir un resultado, este resultado siempre es el mismo dadas las mismas variables. En programación el código que escribimos seria esa lista de instrucciones y cada vez que se ejecuta el código el resultado siempre será el mismo.
Función: En programación una función es un algoritmo diseñado para hacer una o más tareas (generalmente no más de 2), son un pedazo de código que se puede ejecutar múltiples veces a lo largo de tu código, a esto se le denomina llamar a la función.
JS: Es la abreviación de JavaScript

Donde escribir código

La gracia de JavaScript es que es el único lenguaje de programación que funciona en la web por lo que no necesitas instalar nada para poder empezar a escribir código, pero aun así tiene múltiples opciones para poder empezar:

Pagina en blanco: En los buscadores web como Chrome puede ir a la url about:blank, esto te abrirá una página en blanco en la que puedes editar. Para empezar, haces clic derecho y haces clic en "inspeccionar elemento" y dentro de las DevTools de Chrome abres donde dice console. Desde esa ventana puedes empezar a escribir código, aunque es un poco incomodo.
Haz un index.html con VSCode: También puedes instalar VSCode desde aquí, hacer las configuraciones pertinentes, crear una carpeta y crear un archivo llamado "index.html" y en el escribes lo siguiente:
```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script></script>
  </body>
</html>
```
y escribirías el código en la etiqueta script, luego, para ver la ejecución del código habría que entrar a la misma ventana cosole de antes.
Instalar Node.js: Por ultimo puedes instalar Node si quieres ejecutar el código en tu terminal (no recomendado para principiantes), y ejecutar el código con el comando:
```
 node [tucodigo].js
```
(reemplaza [tucodigo] con el nombre de tu archivo .js) notar que con este método se tiene que crear un archivo .js.
puedes instalar Node desde aquí.

Tu primer Programa

Generalmente el primer programa que se hace al aprender un nuevo lenguaje es el Hola Mundo!.

Para hacer el hola mundo en JavaScript se escribe el siguiente código:

console.log("Hola Mundo!");

En este código se escribe en la consola de la que hablamos antes con una función llamada log.

Usando variables en JS

En JS hay palabras reservadas, generalmente palabras inglesas, que se utilizan para poder asignar o llamar funciones, variables, etc. la palabra reservada para definir una variable es "let", por lo que una declaración quedaría como:

let variable;

pero nuestra variable no tiene un valor, si queremos asignar un valor seria de la siguiente manera:

let variable = 5;

ahora nuestra variable corresponde al valor 5, notar que no se pueden declarar 2 o más variables con el mismo nombre, por lo que daría un error si hicieras un código como este:

let variable;
let variable = 5;

También podemos leer variables con la función console.log() de antes. Ejemplo:

let variable = "hola";
console.log(variable);

También podemos declarar constantes de la siguiente manera:

const constante = 5;

Con esto declararíamos una constante con valor "5" y su valor no se podría cambiar.

¿Qué tipo de información puedo guardar en una variable?

Puesto que ya vimos como declarar variables estaría bien saber qué tipo de información se puede guardar en estas.

Number: Ya vimos el tipo Number en la parte anterior, este tipo es simplemente un número, puede ser entero (1, 2, 3, 4) o decimal (1.1, 0.5, 2.6)
String: Este tipo de dato es simplemente una cadena de texto. Se declara dentro de comillas simples (''), dobles ("") o inversas (``), para declarar un string se haría de la siguiente forma:
```
let string = "mi string";
```
Boolean: El tipo Boolean o Bool representa una afirmación de veracidad, ósea, puede decir si algo es verdadero o falso. Un Bool se declara de la siguiente forma:
```
let boolTrue = true;
let boolFalse = false;
```
En el ejemplo se pueden apreciar dos variables de tipo Bool, una es verdadero (true) y la otra es falsa (false)
Null: Una variable null significa que algo no existe pero la variable está declarada. Ejemplo:
```
let variable = null;
```
Undefined: Una variable undefined significa que la variable no está declarada. Ejemplo:
```
let variable;
```
Si intentaras leer el valor de la variable te respondería con "undefined"
NaN: NaN significa Not a Number y suele pasar cuando tratas de hacer una operación aritmética (matemática) con un valor numérico y otro no numérico. Ejemplo:
```
let multiplicacion = 5 * { name: "hola" };
```
Hay que mencionar que JS a veces infiere los tipos de las variables de forma dinámica, lo que evitaría el NaN. Ejemplo:
```
let suma = 5 + "jajas";
console.log(suma);
```
El código anterior devolvería "5jajas" en lugar de NaN.
Arreglo: Un arreglo es una lista de variables que, en JS, pueden ser todas de un mismo tipo o pueden tener múltiples tipos de variables, se les declara usando corchetes. En algunos lenguajes se les conoce como listas. Unos ejemplos de arreglos serian:
```
let arregloMismoTipo = [1, 2, 3, 4];
let arregloDistintoTipo = [1, "hola", true];
```
Diccionario u Objeto: Dependiendo de la persona les pueden llamar de cualquiera de las dos formas, por lo menos cuando son declarados directamente en una variable, los objetos se declaran con Brackets ({}). Los objetos tienen atributos o keys que son variables propias del objeto con un valor asignado. Para declarar un objeto se hace lo siguiente:
```
let objeto = {
  atributo1: "hola",
  atributo2: 25,
};
```

Aritmética

Los lenguajes de programación prácticamente fueron inventados para facilitar el trabajo de los matemáticos, ósea, para hacer matemática, por lo que es claro que se puede hacer matemática con ellos, así que veamos los símbolos de las operaciones matemáticas en programación:

+ : La suma.
- : La resta.
* : La multiplicación.
/ : La división.

También tenemos una operación llamada Modulo que consiste en obtener el resto de una división entera y que se representa con el símbolo %. Ejemplo:

5 % 2 == 1

La operación mostrada respondería con true debido a que el resto de la división 5/2 SIN CALCULAR DECIMALES es 1

5 / 2 = 2
1 // => resto

Condicionales

En los lenguajes de programación existe la posibilidad de ejecutar un código solo si una condición se cumple, esto debido a que no siempre queremos que el código se ejecute indiscriminadamente, a veces queremos que se ejecute solo si una o más condiciones se cumplen y para eso se usan las declaraciones if / else.

El código que este dentro del if solo se ejecutara si la condición dada es verdad. Ejemplo:

let x = 5;
if (x < 6) {
  console.log("hola");
}

En el código solo se imprimirá "hola" en la console siempre y cuando que la variable x sea menor a 6, también podemos invertir la veracidad de la condición, ósea, si queremos que se imprima "hola" cuando x NO sea menor a 6 se puede hacer lo siguiente:

let x = 5;
if (!x < 6) {
  console.log("hola");
}

También podemos hacer lo siguiente:

let x = 5;
if (x > 6) {
  console.log("hola");
}

Luego, también podemos comparar si dos elementos son iguales, pero cuidado porque en JS hay 2 formas de hacer esto.

Estricta: para comparar estrictamente se utiliza la operación "==="
No Estricta: para comparar NO estrictamente se utiliza la operación "=="

y también se puede pedir una desigualdad con los operadores "!==" y "!=" para comparación Estricta y No Estricta respectivamente.

Ejemplo de todas las comparaciones:

if ("5" == 5) {
  console.log("cinco no estricto");
}

if ("5" === 5) {
  console.log("cinco estricto");
}

if ("5" !== 5) {
  console.log("NO cinco estricto");
}

if ("5" != 5) {
  console.log("NO cinco no estricto");
}

El código imprimiría "cinco no estricto" y luego "NO cinco estricto" ya que estas condiciones son verdaderas.

También puedes usar los if para cuando una variable Booleana sea true:

if (true) {
  console.log("hola");
}

o cuando sea false:

if (!false) {
  console.log("hola");
}

Luego, tenemos los else que ejecutan código en caso de que la condición no se complete. Ejemplo:

let x = 5;
if (x > 5) {
  console.log("mayor");
} else {
  console.log("menor");
}

En este caso como el if no es verdadero se imprimiría "menor". Notar que los else no reciben una condición

Y para finalizar con los if / else tenemos el else if que, a diferencia del else, si recibe una condición.

El else if se usa cuando tienes múltiples condiciones que se pueden cumplir pero tiene que se una a la vez, ósea, si la primera condición no se cumple se entra al else if y se revisa si esa condición se cumple y así hasta que una condición se cumpla o hasta quedarnos sin else's.

Ejemplo:

let x = 5;
if (x > 6) {
  console.log("mayor");
} else if (x === 5) {
  console.log("cinco");
} else {
  console.log("menor");
}

En este caso se imprimiría "cinco". Hay que tener en cuenta el orden de los if's la usar else if pues un orden incorrecto puede llevar a comportamientos inesperados. Ejemplo:

let x = 5;
if (x < 6) {
  console.log("menor");
} else if (x === 5) {
  console.log("cinco");
}

Acá queríamos que devolviera "cinco" pero devolverá "menor" por lo que hay que tener cuidado con el orden de los if's.

Operadores lógicos

Ahora veamos todos los operadores lógicos que se pueden usar:

===: Estrictamente igual que
==: NO Estrictamente igual que
!==: Estrictamente distinto a
!=: NO Estrictamente distinto a
<: menor que
>: mayor que
<=: menor igual que
>=: mayor igual que

Ciclos

Para finalizar esta introducción a la programación con JS vamos a ver cómo hacer los ciclos básicos que hay.

Empecemos con el ciclo while:

El ciclo while declara un código que se va a ejecutar siempre que una condición dada se cumpla, ósea, "Mientras x condición se cumpla ejecuta este código"

Ejemplo:

let x = 0;
while (x < 5) {
  console.log("hola");
  x = x + 1;
}

En este código, mientras x sea menor a cinco se imprimirá en consola la palabra "hola" y para evitar hacer un ciclo infinito se declara que x sea su mismo valor más 1, ósea que por cada ciclo x aumenta su valor en 1, otra forma de hacer eso es escribiendo.

let x = 0;
while (x < 5) {
  console.log("hola");
  x++;
}

Donde x++ es una forma corta de escribir x = x + 1.

Luego tenemos el ciclo for que ejecuta el código un número determinado de veces, dado el ejemplo anterior de while este ciclo funciona igual que el while del ejemplo, pero el while tiene otras utilidades aparte.

para hacer un ciclo for se hace lo siguiente:

for (let i = 0; i < 5; i++) {
  console.log("hola");
}

El resultado de este código seria el mismo del ejemplo de while pero más compacto. En esencia lo que hace el for es declarar una variable para iterar (en "let i" i es por iterador) y cada vez que ejecuta el código en su interior aumenta automáticamente el valor de i sin necesidad de que este declarado den el código como con el while, otra ventaja del for es que si está mal declarado da un error lo cual ayuda a evitar ciclos infinitos.

Conclusión

Vimos como declarar variables, como usar condiciones para ejecutar código, como hacer ciclos, como hacer aritmética y como imprimir en consola. Con todo esto ya deberías ser capaz de empezar a escribir código propio con JavaScript en tu propia página web.

Conceptos Básicos de JavaScript