Introducción a la programación - conceptos básicos

Esta guía ofrece una introducción a la programación

1 Conceptos básicos

Lo primero que voy a explicar en estas secciones sobre programación base, sería que es un programa; puedes ver un programa como si fuera una receta de cocina para preparar por ejemplo una torta que van desde sus ingredientes, pasando por el proceso de crear la mezcla hasta cocinarla; en un programa informático tenemos los mismos elementos; por lo tanto.

Un programa permite:

1. Entrada de datos: Recoge datos de entrada para su procesamiento. Por ejemplo, a través del teclado o el ratón.
2. Procesamiento: El programa utiliza la información de entrada para realizar las operaciones que se le han programado.
3. Salida: El programa devuelve el resultado obtenido tras el procesamiento de los los datos.

En nuestro caso específico de desarrollo web podría ser como los siguientes ejemplos:

1. (Entrada de datos) Nuestro usuario ingresa mediante el navegador web.
2. (Procesamiento) El programa procesa que en este ejemplo viene siendo la fuente de entrada, la URL para saber exactamente qué quiere ver nuestro usuario.
3. (Salida) El programa devuelve una página que está atada la ruta anterior.

Otro ejemplo sería; si tenemos el siguiente formulario:

1. (Entrada de datos) Nuestro usuario ingresa los datos en el formulario.
2. (Procesamiento) El programa procesa la URL para saber qué petición está enviando nuestro usuario y saber mediante la URL o ruta a qué función tenemos que llamar, es decir, para saber exactamente qué tiene que hacer, ya que puedes tomar como referencia que el formulario anterior se encuentra atado a una función, que describe otros pasos o procesos para hacer algo con los datos que está recibiendo nuestro usuario; que puede ser por ejemplo:
   1. Crear o actualizar algún recurso, como una publicación
   2. Filtrar un listado, y un largo etc
3. (Salida) Finalmente, el programa devuelve la información solicitada mediante el navegador.

Un ejemplo práctico de una función que recibe una petición de nuestro usuario mediante un formulario sería como lo siguiente:

@invoiceProductBp.route('/enlace')
def procesar_form():
     form = InvoiceForm()
     form.validate_on_submit()
     if form.errors:
        return render_template('errores.html')
     post = Post()
     post.title = request.form['title']
     post.description = request.form['description']
     db.save(post)
  return render_template('exito.html')

Paneo del código anterior

En la cual vemos un proceso de cómo podemos recibir una petición que envía nuestro usuario desde el navegador, en nuestros ejemplos anteriores, este sería la función que se encarga de procesar la petición de nuestro usuario; va desde obtener una referencia al formulario que envió nuestro usuario, pasando por verificar si es válido el mismo. Mostrar una página de errores en caso de que existan los errores; en este caso, esta página de errores sería la salida del programa, el resto explicado sería simplemente el nivel de procesamiento.

Luego, si no existen errores sigue el proceso en el cual simplemente creamos una entidad, que puede ser cualquier cosa, un contacto, un reducto o en este caso por ejemplo un post que luego guardamos en base de datos y finalmente damos como salida un documento en HTML a nuestro usuario.  

En definitiva, ¿Qué es un programa?

Un programa simplemente son un conjunto de instrucciones de código, que son escritos en algún lenguaje de programación y que realiza alguna tarea en particular.

Generalmente, los programas, suelen contar con interfaz gráfica o UI de sus siglas en inglés, en donde el usuario puede interactuar con el programa, pero también existen programas en base a líneas de comando.

Los programas hoy en día no solamente funcionan en un ordenador con Windows, MacOS, Linux... si no tenemos un amplio abanico de elementos tecnológicos que pueden ejecutar programas; como teléfonos inteligentes o no con Android, iOS, tablets, relojes, televisores, consolas de videojuegos... en general, TODO aparato tecnológico que permita al usuario interactuar con la misma de manera digital, tiene un programa o conjunto de programas para tal fin.

Una característica común que tienen los programas, es que para poder ejecutarse y por lo tanto poder emplearlos, deben estar "cargados en memoria", este término hace referencia al hecho que el programa tiene que estar en la memoria RAM que es la memoria VOLÁTIL de nuestro equipo, TODO programa que se está ejecutando en el Sistema Operativo (SO) esta "en memoria" RAM.

Pasos o partes de un algoritmo

Básicamente un algoritmo en informática es una secuencia de operaciones a realizar que nosotros definimos para resolver un problema y que luego llevamos a un programa como la función que te mostraba anteriormente en la entrada anterior; es importante hacer notar que estas operaciones se ejecutan de manera secuencial, es decir una de bajo de la otra.

Pasos o partes de un algoritmo

Como mencionamos anteriormente, los algoritmos al igual que los programas constan de los 3 pasos fundamentales.

La entrada: para ingresar los datos con los cuales vamos a trabajar

Proceso: que es para hacer las operaciones lógicas para resolver la tarea y tomamos como entrada, los datos anteriores o los recibidos en el paso anterior.

Salida: finalmente, el objetivo de todo objetivo es resolver un problema, y mostrar el resultado; para esto último sería la fase de salida que muestra la respuesta del mismo una vez terminada la ejecución del algoritmo.

Con los algoritmo nosotros tenemos los pasos a seguir para solventar un problema y por supuesto los mismos tienen un inicio y un fin.

Ejemplo de algoritmo

Por ejemplo para hacer una torta; tenemos los mismos 3 pasos que te indicaba anteriormente; es decir Inicio o Entrada de datos, procesamiento y Salida:

Inicio (elementos de entrada: ingredientes y pasos a seguir) Añadir leche en una cacerola Añadir sal Añadir harina Mezclar Servir Hornear Salida/Fin (Presentar)

En el ejemplo que vimos anteriormente como entrada de datos la ruta o URL que empleó nuestro usuario para llegar a ver ese formulario y los datos que él colocó en el mismo.

Como procesamiento tenemos, la referencia al formulario, las validaciones de los datos, crear y registrar los datos en una estructura, que en este caso sería un post o entrada de un blog.

Y como salida finalmente tenemos la respuesta a una página HTML, que puede ser la de errores si tenemos problemas con los datos suministrados o la de exito.

2 ¿Qué es un lenguaje de programación y algunos tipos?

Para hacer un programa como el mostrado en la entrada anterior, necesitamos lenguajes de programación. Hoy en día existen múltiple de lenguajes de programación; prácticamente salen a diario y tenemos de todo según sea lo que queramos hacer; pero...

¿Qué es un lenguaje de programación?

Puede ser un poco difícil definir de una que es un lenguaje de programación, porque puede tomar muchas definiciones distintas y todas son ciertas; asi que te ofrezco varios conceptos claves para que entiendas que es un programa y algunas de sus características:

1. Un lenguaje de programación es un conjunto de símbolos, (sintaxis) y un orden en particular para orientar la programación.
2. Un lenguaje de programación es un conjunto de instrucciones (símbolos y sintaxis) que permite a una persona/programador la capacidad para escribir para que la computadora lo "entienda" y ejecute estas ordenes para hacer una tarea, entiéndase programa.
3. Un lenguaje de programación es un programa que permite construir otros programas de manera escrita (mediante instrucciones)

Todo aparato o dispositivo tecnológico de cómputo requiere de un lenguaje de programación para poder cumplir con los procesos o tareas que tienen programado.

Tipos de lenguaje de programación

Para hacer un programa como el mostrado en la entrada anterior, necesitamos lenguajes de programación. Hoy en día existen múltiple tipos de lenguajes de programación; prácticamente salen a diario y tenemos de todo según sea lo que queramos hacer:

1. Si quieres desarrollar aplicaciones de escritorio tenemos C#, Python e incluso JavaScript por mencionar algunos.
2. Si queremos desarrollar páginas webs (es decir contenido estático) o derivados tenemos JavaScript.
3. Si queremos desarrollar aplicaciones webs (que puedes ver una aplicación web como si fuera una  página web pero con contenido dinámico es decir, que va cambiando y podemos gestionar de alguna forma el mismo); para las aplicaciones web tenemos PHP, Python, e incluso JavaScript etc; pero estos son los que tratamos en mis cursos y por lo tanto son los de interés.

Realmente esta no es la clasificación sobre los tipos, ya que los tipos van un poco más allá de cambiar simplemente de un lenguaje de programación a otro.

Lenguaje de máquina

Este es el lenguaje de más bajo nivel, y es el que entiende la máquina, son puros ceros y unos es decir, binarios, por lo tanto no es un lenguaje que una persona en sus cabales pueda programar.

Lenguaje ensamblador

Este es un lenguaje intermedio entre el de máquina y un lenguaje de programación de alto nivel, que eran los señalados anteriormente; aquí disponemos de instrucciones que realmente son bloques de comandos para realizar diversas operaciones

Lenguaje de alto nivel

Aquí se encuentran los lenguajes de programación más empleados en la actualidad como son JavaScript, Python, PHP, Java, Kotlin, Dart, entre otros; y son los lenguajes que nos permite comunicar entre una persona y la máquina, por lo tanto, son los que generalmente empleamos al momento de hacer nuestros programas.

Son lenguajes que disponen de un conjunto de instrucciones y una lógica más fácil de entender porque está más cerca del lenguaje de un humano.
Todos estos lenguajes necesitan del uso de un intérprete o un compilador para poder traducir a un lenguaje de máquina que nuestra computadora pueda entender.
 

3 Elementos principales de un Lenguaje de programación

Ya sabemos que es un programa y su relación con los algoritmos en informatica como seria de pasos para resolver un problema, también vimos los lenguajes de programación en la entrada anterior, ahora vamos a ver cuales son los principales elementos que tenemos que tener en cuenta al momento de programar; lo primero que tienes que tener en cuenta sería la sintaxis, la sintaxis o forma en la cual podemos programar en un lenguaje de programación, define los elementos de dicho lenguaje y cómo se combinan para formar un programa. Los elementos típicos de cualquier lenguaje son los siguientes:

• Tipos de datos
• Variables
• Operadores
• Estructuras de control
• Comentarios
• Bloques de código (Funciones, Clases, etc)

Todos estos elementos los iremos abordando poco a poco a largo del curso.

4 ¿Qué es JavaScript? y Razones para dar los primeros pasos en la programación

JavaScript nos permite agregar interactividad a nuestras páginas web y en pocas palabras convertir un sitio estático en algo dinámico; por ejemplo agregando conexiones con otras aplicaciones que realicemos por ejemplo en PHP, Python u otros servicios.
JavaScript es el lenguaje de programación seleccionado para iniciar y dar los primeros pasos en la programación y conocer los fundamentos en cualquier lenguaje de programación, que de esto nos ocupamos en la siguiente sección; por lo tanto es el lenguaje de programación seleccionado en este curso para dar los primeros pasos en esta introducción a las tecnologías principales en el desarrollo web.

Razones para para dar los primeros pasos JavaScript

Muchos recomiendan empezar a programar con JavaScript porque es bastante flexible en sintaxis, puedes ver inmediatamente los resultados de lo que has hecho, y no es necesario aprender muchas herramientas; no requieres de tener prácticamente nada instalado salvo un navegador web para dar los primeros pasos con este lenguaje de programación; por lo tanto vamos a tomar a JavaScript para enseñar lo más básico como las variables o las funciones; ya que en todos mis cursos JavaScript de una manera u otra es un elemento central e imprescindible para poder hacer cualquier desarrollo.

JavaScript cuenta con las siguientes ventajas:

1. Es un lenguaje muy sencillo y flexible
2. Es rápido y estable
3. Es soportado en cualquier navegador web que se respete, por lo tanto lo podemos empezar a programar desde ya sin tener nada más.
4. Es multiplataforma al extremo, ya que lo puedes ejecutar sin importar si estas en Windows, MacOS, Linux, un iPhone, iPad, un Android y un largo etc.
5. Permite trabajar en lo que se conoce como FullStack, es decir en el frontend y  el backend; es decir del lado del cliente y del servidor; más adelante veremos qué es esto.
6. Te dejo un enlace de referencia para que le des un ojo y sepas exactamente para qué funciona JavaScript.

Vamos a emplear JavaScript para enseñar lo más básico como las variables o las funciones. Si quieres programar elementos interactivos para una página web, JavaScript es un imprescindible.

5 ¿Qué es una VARIABLE en programación?

Las variables son una de las características fundamentales de los lenguajes de programación, permiten acceder a la memoria para almacenar y recuperar (es decir, podemos leer o almacenar datos) los datos con los que nuestros programas van a trabajar.

edad = 5;
nombre = "andres"

Las mismas tienen que tener un esquema muy específico y esto puede cambiar dependiendo del lenguaje de programación

edad = edad + 1

Realmente las variables son un esquema bastante flexible en cuanto a sus usos y de momento quiero que te quedes con la idea de que una variable es simplemente un componente de software que podemos emplear para almacenar y leer datos que pueden ser de varios tipos según los que vimos anteriormente.

Operadores

En JavaScript al igual que en la mayoría de los lenguajes de programación contamos con operadores aritméticos para realizar operaciones matemáticas como sumar, restar, multiplicar y dividir y también para realizar comparaciones; por ejemplo:

1. + Suma. Los operandos pueden ser enteros o reales
2. - Resta. Los operandos pueden ser enteros o reales
3. * Multiplicación. Los operandos pueden ser enteros o reales
4. / División. Los operandos pueden ser enteros o reales
5. % Resto de la división

Comparación en programación

Los operadores de comparación son otro elemento fundamental en cualquier lenguaje de programación y nos permiten comparar, variables, expresiones y obtener un valor de verdadero y falso, es decir, un booleano:

<    Menor que
>    Mayor que
<=    Menor o igual
>=    Mayor o igual
!=    Distinto
==    Igual

Tal cual vistes en el ejemplo anterior, con un ejemplo de cómo podemos sumar por ejemplo edades, en una unidad; lo mismo aplica para el resto de los casos según el operador matemático que quieras emplear.

6 Tipos de datos Programación

Los tipos de datos son simplemente un mecanismo con el cual podemos representar para guardar valores mediante las variables que luego veremos que son.

Así que, en la mayoría de los lenguajes de programación contamos con los siguientes tipos de datos, tal vez existan algunos más o menos según el lenguaje de programación de tu preferencia:

Tipos de datos o primitivas

1. Números
2. Tipos enteros: byte, short, int, long.
3. Tipos reales: float y double.
4. Booleanos
5. String

Cada tipo primitivo tiene un rango diferente de valores positivos y negativos, excepto el boolean que sólo tiene dos valores: true y false. 

Ahora bien, cuál seleccionar te podrías preguntar; el tipo de dato que se seleccione para un determinado programa dependerá del rango y tipo de valores que vayan a almacenarse en cada una de ellas y de si éstos son enteros, reales, cadenas de texto, etc.

En la siguiente tabla, puedes ver una representación del tamaño de las primitivas anteriores; por ejemplo para un entero podemos representar hasta este número que vemos en pantalla tanto en los negativos como en los positivos; por lo tanto, si quieres representar un número que puede estar en este rango, puedes emplear un int.

Por otra parte para los short solamente podemos representar hasta los 32.768 en su parte negativa o positiva; por lo tanto si tu quieres representar por ejemplo un número de cédula en un país en donde habitan millones, tendrías que emplear un int en vez de un short, pero si quieres representar por ejemplo la cantidad de tomates que tiene una persona en su nevera, muy probablemente te alcance con un short; y así para el resto de los casos.

Estructura de control en programación

Las estructuras de control son el mecanismo que tenemos en los lenguajes de programación para romper el flujo básico o secuencial de las instrucciones que nosotros definamos en nuestro programa; nosotros podemos por ejemplo emplear condiciones como "Si esto se cumple entonces has esto" o "Si esto no se cumple haz esto otro" o crear condiciones realmente complejas; para eso podemos apoyarnos en los operadores que vimos anteriormente ya que básicamente lo que evaluamos en estas condiciones son condiciones de verdadero y falso.

También existen estructuras de control en las cuales podemos establecer condiciones o reglas como "Repite esto mientras se cumpla una condición" que nuevamente esta condición es simplemente un estado, que puede ser verdad o falso; en otras palabras un booleano.

Estructuras de control: if para realizar condicionales

El if es la estructura de control por excelencia nos permite tomar decisiones según una condición a evaluar; su definición luce como la siguiente:

if(condicion) {
  ...
}

Si la condición se cumple, es decir, su valor es true, entonces se va a ejecutar todo lo que coloquemos entre las llaves; que puede ser cualquier cosa, cualquier instrucción que hayamos visto hasta este punto y muchas más; inclusive podemos colocar otra condición, es decir otro condicional o if; por ejemplo:

var bool = true;
n=0
if(bool) {
  n = n + 5
}
n

Pero qué pasa si nosotros bool no es verdad:

var bool = false;
n=0
if(bool) {
  n = n + 5
}
n

Estructuras de control: if-else

Ahora bien, qué pasa si queremos también determinar "si esto se cumple entonces has esto" o "si esto no se cumple haz esto otro"; es decir, crear un flujo tanto si la condición es correcta como si no es correcta; en este tipo de situaciones perfectamente podemos emplear otro tipo de estructuras conocidas como el if-else

n=0
if(bool) {
  n = n + 5
} else {
  n = 2
}
n
edad = 21
mayorEdad = false
if(edad >= 18) {
  mayorEdad = true
} else {
  mayorEdad = false
}
mayorEdad

Estructuras de control: if anidados

Nosotros podemos encadenar la estructura del condicional para preguntar por varias condiciones; podemos crear tantos anidamientos como queramos; como puedes ver en este ejemplo tenemos un anidamiento para preguntar para saber si la persona es menor de edad; como puedes ver tenemos dos condiciones en una sola estructura condicional que sería todo el cuerpo que puedes ver.

En definitiva, para crear un if anidado o condicional anidado, tenemos que emplear la estructura else if y podemos crear tantas de estas estructuras como nosotros queramos, como nosotros necesitemos.

estado = ""
edad = 12
if(edad < 12) {
  estado = "Eres un niño"
} else if(edad < 18) {
  estado = "Eres un adolescente"
} else {
  estado = "Eres adulto"
}
estado = ""
edad = 12
if(edad < 12) {
  estado = "Eres un niño"
} else if(edad < 18) {
  estado = "Eres un adolescente"
} else if(edad >= 18) {
  estado = "Eres adulto"
} else if(edad >= 60) {
  estado = "Tercera edad"
}

Operadores lógicos y las condiciones en programación

Ahora bien, qué pasa si tu quieres evaluar más de una condición de verdadero y falso en un condicional; por ejemplo suponte que quieres preguntar si una persona es mayor de edad y es hombre o mujer:

edad = 21
mujer = false
hombreAdulto = false
De momento nosotros tenemos lo siguiente:
if(edad >= 18) {
  hombreAdulto = true
} else {
  hombreAdulto = false
}

Pero como podemos colocar que tambien necesitamos que la persona sea hombre, por ejemplo; para eso podemos emplear el operador lógico de and en JavaScript y el mismo tambien es soportado en cualquier lenguaje de programación que vayamos a ver en este curso pero en algunos cambio un poco su definición; es decir, por ejemplo para representar el operador de and en JavaScript sería colocar dos veces el signo conocido como et; es decir && y tenemos algo como lo siguiente:

if(edad >= 18 && mujer == false) {
  hombreAdulto = true
} else {
  hombreAdulto = false
}
hombreAdulto

Y aqui estamos preguntando que la edad sea mayo a 18 y que la persona sea hombre, por lo tanto con que uno de los mismos sea falso basta con que no se cumpla la condición anterior.

Por otra parte, si queremos hacer una estructura un poco más flexible y simplemente nos interesa que sea u hombre o que sea mayor de edad; como puedes inferir del contexto, con que solamente una de las mismas sea verdad, basta con que la condición se cumpla; para eso tenemos el operador de or en JavaScript o en cualquier lenguaje de programación; el mismo se encuentra representado por el caracter de ||:

if(edad >= 18 || mujer == false) {
  hombreOAdulto = true
} else {
  hombreOAdulto = false
}
hombreOAdulto

Condiciones complejas

Ahora bien, qué pasa si tu requieres hacer condiciones más complejas; perfectamente puedes definir tantos operadores lógicos como necesites; por ejemplo:

edad = 21
mujer = false
hombreOAdulto = false
terceraEdad = false
if(edad >= 18 || mujer == false && terceraEdad) {
  hombreOAdulto = true
} else {
  hombreOAdulto = false
}
hombreOAdulto

Estructuras de control: switch

Sin lugar a dudas la estructura condicional, es decir el if, es la estructura de control más empleada hoy en día; pero como puedes darte cuenta, cuando cuentas con múltiples condiciones un condicional se hace poco práctico; por la mala legibilidad del código para estos casos existe la estructura llamada switch la cual permite agrupar un conjunto de expresiones de una manera más simplificada:

switch(dia) {
  case 1: diaSemana = "lunes."; break;
  case 2: diaSemana = "martes."; break;
  case 3: diaSemana = "miércoles."; break;
  case 4: diaSemana = "jueves."; break;
  case 5: diaSemana = "viernes."; break;
  case 6: diaSemana = "sábado."; break;
  case 7: diaSemana = "domingo."; break;
}

Como puedes ver, en vez de estar evaluando condiciones repetidas para un mismo ente, simplemente colocamos el valor, que puedes ser cualquier cosa y tan compleja como quieras; en este caso simplemente estamos evaluando qué día es a partir de una representación numérica del día de la semana; pero tal vez te interese evaluar textos, booleanos, o condiciones complejas como la que tratamos en anteriores vídeos.

Te puede sonar un poco el uso del break; que como su nombre indica es una palabra reservada que podemos emplear para romper con el resto de la ejecución del bloque o en este caso más específico de la estructura de control; por lo tanto cuando encuentre coincidencia por el valor que estamos comparando simplemente se va a detener la ejecución del resto de bloque switch.

7 Estructuras de control: for para realizar ciclos 

Ya a partir de aquí terminamos los bloques condicionales y entramos en otro universo en el cual vemos cómo crear bucles, es decir una estructura de control que nos permite repetir una misma instrucción o las instrucciones que definan un conjunto finito de veces; las que especifiquemos; su uso es muy estructurado y es como el siguiente:

for(inicialización; condición; actualización) {  instrucción 1  instrucción 2  ...  instrucción N } 

1. En la fase de inicialización tenemos que colocar cual va a ser el valor inicial de una variable que se encarga de guardar el registro de la iteración que se esté llevando a cabo y que se incrementa en la fase de actualización.
2. La condición especifica la condición de parada; es decir; cuando la misma no se cumpla (devuelve un false) simplemente se detiene la repetición del for.
3. La fase de actualización es la actualización del valor que hacemos por cada iteración a la variable que inicializamos en la fase de inicialización.

Ejemplo de for

El ejemplo tradicional de un for luce como el siguiente:

n=0
for(var i = 0; i < 5; i++) {
  n=n+1;
}
n

Forma acortada de sumar una unidad a un elemento

n=0
for(var i = 0; i < 5; i++) {
  n++;
}
n

Los for o los ciclos en general son bastante útiles cuando tenemos colecciones que iterar, que más adelante veremos que son estas colecciones; pero abstraete un poco, y suponte que tenemos colecciones de elementos, que pueden ser post, productos etc, todo depende del propósito de la aplicación que estés construyendo, tienes un conjunto de valores que quieres desplegar de alguna manera; por ejemplo, en nuestro caso de interés que viene siendo el desarrollo web, tienes 3 valores a los cuales quieres construir un listado como el siguiente:

Perfectamente con los for puedes repetir las instrucciones que hacen que puedas construir una de esas cajas dado este conjunto de valores; pero más adelante nos ocuparemos de eso.

Ahora otro ejemplo; que pasa si sumamos el valor de i:

n=0
for(var i = 0; i < 5; i++) {
  n=n+i;
}
n

Ahora vamos a hacer otro ejemplo empleando la función de console.log; en este punto no hemos visto que es una función pero puedes verlo como si fuera simplemente un bloque con un conjunto de instrucciones que hace alguna operación en particular; para el caso del console.log sería mostrar un mensaje por la consola:

for(var i = 0; i < 5; i++) {
   console.log(i);
}

Y de esta forma puedes ver de una manera más efectiva el valor de i.

Estructuras de control: ciclo o bucle while

La estructura de while es similar a la de for, pero un poco más limpia y simplemente definimos la condición que indica hasta cuando se va a ejecutar el bucle o ciclo; como puedes ver, si partimos del for en la cual teníamos tres fases, la fase de inicialización, la de la condición y la de actualización; aquí solamente tenemos una fase, por lo tanto, el resto de las fases las tenemos que llevar de manera manual en alguna parte de nuestro código; el while nos ofrece una estructura más flexible que la del for, aunque en el desarrollo web al siempre tener un conjunto finito de elementos que queremos trabajar, generalmente la estructura que nos ofrece el for nos viene mejor:

var n = 0
 
while(n < 10) {
  console.log(n);
  n++
}
var n = 0
 
while(n < 10) {
  console.log(n);
  n = n + 2
}
var n = 10
 
while(n < 10) {
  console.log(n);
  n = n + 2
}

Estructuras de control: ciclo o bucle do while

El do while es básicamente el mismo while solamente que la condición se evalúa al final de todo, y con esto estamos garantizando que al menos la instrucción o instrucciones se ejecuten una vez; partiendo del ejercicio anterior:

var n = 10
while(n < 10) {
  console.log(n);
  n = n + 2
}

El cual recordemos que no se ejecutaba ya que n es igual a 10 por lo tanto supera al de la condición que colocamos en el while; pero si lo convertimos a un do while:

var n = 10
do{
  console.log(n);
  n = n + 2
}while(n < 10) 

Vas a ver que la instrucción al menos se ejecuta una vez independientemente de si la condición inicialmente es verdad o falso; por lo tanto, si necesitas esta clase de comportamientos en tu programa el do while es tu elección.

8 Uso de las funciones en la programación

Las funciones son unos de los pilares fundamentales en cualquier lenguaje de programación y en JavaScript no es la excepción; permite ejecutar un conjunto de instrucciones para realizar una tarea, calcular un valor y en pocas palabras podemos reutilizar fácilmente un conjunto de instrucciones mediante el uso de las funciones.

Para crear una función tenemos que emplear la palabra reservada function seguido del nombre de la función y para indicar el nombre de la función tienes que tomar en consideración los mismos aspectos que hablamos cuando definimos el nombre a una variable, no comenzar con números, no emplear caracteres especiales, espacios, etc:

function multiplica() {
  console.log(5 * 2);
}

Aquí simplemente creamos una función llamada multiplica que se encarga de multiplicar dos valores; entonces, si por alguna razón en la vida necesitamos multiplicar 5 * 2 múltiples veces en nuestro programa, perfectamente podemos crear una función; pero fíjate que solamente la hemos declarado, pero de momento la misma no ha sido ejecutada, es decir, la operación o conjunto de operaciones, entiéndase instrucciones que definimos en la misma no se han ejecutado; para ejecutar la función simplemente tenemos que colocar el nombre de la función y los paréntesis:
multiplica() 

9 Comentarios en lenguajes de programación y HTML

Los comentarios son el mecanismo que tenemos para dejar anotaciones en nuestro programa, y el carácter o conjunto de caracteres que podemos emplear varía según el lenguaje de programación que estemos empleando; en JavaScript son representados por un par de slash (//) consecutivos para colocar comentarios en una sola línea.

y en siguiente formato para hacer comentarios en múltiples línea, los comentarios tienen muchas funciones; pero su objetivo principal es que nos permiten dejar anotaciones o ayuda a otros programadores o a nosotros mismos que están trabajando con nuestro código en el cual explicamos cuál es el objetivo de lo que estamos haciendo.

Los comentarios son simplemente una o múltiples líneas de texto que al compilar o interpretar el código el compilador o interpretador ignota.

Esto es básicamente como funciona cualquier compilador hoy en día, que permite básicamente traducir de un lenguaje a otro; en nuestro baso de interés, de un lenguaje de programación como Java, C, C++, etc a lenguaje de máquina, es decir, a un binario; puros ceros y uno que es lo único que entiende nuestra computadora; por lo tanto, en la práctica, cuando el compilador estos //, simplemente NO los toma en cuenta, NO formarán parte del compilado o el código binario generado por el compilador.

Ejemplos de comentarios

Comentarios en múltiples líneas

En la mayoría de los lenguajes de programación, podemos definir múltiples línea de comentario empleando /**/; en JavaScript, Kotlin, Java... funcionan en base a este esquema:

/*
Esto es un comentario
En varias líneas
*/

En Python podemos emplear el siguiente esquema:

"""
Esto es un comentario
En varias líneas
"""

Comentarios en una sola línea

Los tradicionales o más sencillos sería colocar comentarios luego de los dos slash:

// Comentario en una sola linea, lo empleamos en JavaScript, C, Java...

Y en Python tenemos que emplear el numeral # en su lugar:

# comentario en Python

Comentario en HTML

En HTML, al ser un lenguaje (y no un lenguaje de programación) de etiquetas, la cosa cambia un poco y podemos crear comentarios en varias líneas de la siguiente manera:

<!-- 
Comentario HTML 
Podemos colocar tanto contenido como queramos
-->

10 Los Arrays en Programación

Las funciones son unos de los pilares fundamentales en cualquier lenguaje de programación y en JavaScript no es la excepción; permite ejecutar un conjunto de instrucciones para realizar una tarea, calcular un valor y en pocas palabras podemos reutilizar fácilmente un conjunto de instrucciones mediante el uso de las funciones.

Para crear una función tenemos que emplear la palabra reservada function seguido del nombre de la función y para indicar el nombre de la función tienes que tomar en consideración los mismos aspectos que hablamos cuando definimos el nombre a una variable, no comenzar con números, no emplear caracteres especiales, espacios, etc:

function multiplica() {
  console.log(5 * 2);
}

Aquí simplemente creamos una función llamada multiplica que se encarga de multiplicar dos valores; entonces, si por alguna razón en la vida necesitamos multiplicar 5 * 2 múltiples veces en nuestro programa, perfectamente podemos crear una función; pero fíjate que solamente la hemos declarado, pero de momento la misma no ha sido ejecutada, es decir, la operación o conjunto de operaciones, entiéndase instrucciones que definimos en la misma no se han ejecutado; para ejecutar la función simplemente tenemos que colocar el nombre de la función y los paréntesis: multiplica() 

Índices de los arrays

Como vimos anteriormente, para acceder a un elemento en particular, nos basta con colocar un valor numérico; por ejemplo:

carros[0]

Este número se conoce como índice y con él podemos acceder a TODOS los elementos del array, para acceder al primero, tenemos que colocar o emplear el índice con valor a cero, al siguiente, sería el uno:

var carros = ["Carro Corona", "Carro Fier", "Carro Safari", "Carro"]; 
carros[1] // aqui accedes a "Carro Fier"

Y así para el resto de los elementos.

Extra: Array bidimensional

Como te comentaba, existen múltiples tipos de arrays, aunque las matrices no es un esquema que vayas a emplear tanto al momento de desarrollar la mayoría de tus proyectos web, vamos a ver un poco como funciona todo esto.

Si como hemos visto hasta este punto, un array es simplemente una lista de elementos, algo secuencial que va en un solo sentido, pues un array bidimensional viene siendo un array de arrays, es decir un array con dos dimensiones (como una hoja de calculo); y aquí tenemos un punto muy importante y es que podemos definir múltiples dimensiones a un array, aunque nuevamente, en el desarrollo web, rara vez necesitamos emplear array de varias dimensiones.

Tamaño de los arrays

Al igual que ocurre con los array de una sola dimensión (los presentados anteriormente), podemos presentar el tamaño que queremos que tenga el array sea dimensional o no; por ejemplo:

matriz = [5][5]
* * * * *
* * * * *
* * * * *
* * * * *
* * * * *

En esta caso estaríamos creando un array de dos dimensiones de tamaño 5x5; si queremos un array de una dimensión de tamaño 5:

matriz = [5]
* * * * *

Arrays de dos dimensiones en JavaScript - Matrices

Esto por citar un poco todo esto de manera teórica, en JavaScript, podemos crear arrays de dos dimensiones de la siguiente manera:

var matriz= [1, 1, 2, 3, 5, [1,2,3]];

En este caso, estamos creando simplemente un array, en donde uno de sus elementos tiene otro array; por lo tanto, para acceder por ejemplo al elemento 1:

matriz[0]

O al array dentro del array:

matriz[5]

Y especificamos un valor en particular; para eso seguimos el mismo orden, de especificar el índice; por ejemplo, para acceder al último elemento:

matriz[5][2]

11 Objetos en los lenguajes de programación

En un mundo real un carro es un objeto, una mesa es un objeto; y en JavaScript nosotros tenemos maneras de representar esta clase de estructuras.

Los objetos en JavaScript son un acercamiento a las clases que son soportadas por otros lenguajes de programación con PHP o Python pero mucho más simple.

Si nosotros analizamos un objeto del mundo real, como un carro, veremos que tiene características comunes y que nos permiten discriminar por distintos tipos; por ejemplo.

Un carro tiene marca, tiene modelo, tiene peso y tiene color; por citar sus elementos más básicos. nosotros en JavaScript podemos simular este comportamiento mediante los objetos.

Para crear un objeto en JavaScript podemos hacerlo de la siguiente manera

var carro = {marca:"Fiat", modelo: 5000, color: "Blanco"}

Como puedes ver, es una estructura muy sencilla y pareciera que tenemos una variable que contiene variables; pero si te fijas la asignación que hacemos de manera interna cambia, ya no empleamos el igual si no los dos puntos, porque ahora estamos trabajando con objeto y no con variables.

Así que partiendo del objeto anterior, para acceder por ejemplo al nombre del carro 

carro.marca

Como puedes ver, simplemente accedemos al objeto llamado carro y sería al atributo, que así se conocen ahora cada uno de las variables o seudovariables que está contenida dentro de carro; por lo demás todo queda exactamente igual, según el tipo de dato de estos atributos podemos hacer algunas operaciones u otras, como sumar, restar, etc.

También podemos acceder a cada una de sus atributos para actualizar un valor:

carro.nombre="corona"