curso enfocado en aprender JavaScript, donde nos enfocaremos en aprender principalmente del lenguaje de programacion, tambien aprenderemos sobre Node.js y el proyecto final sera crear nuestra propia API, al final se daran recomendaciones de como se puede ampliar para que sigan estudiando por su cuenta, sera un temario enfocado en aquellas personas que aun no han programado en ningun lenguaje.
Visual Studio Code es el IDE preferido para escribir codigo, con muchas extensiones que ayudan como extensiones que resaltan errores en el codigo y otras que pueden ayudar a ser mas productivo al completar codigo por ti, aunque hayan mas IDEs o lugares para escribir codigo para el curso asumire que lo tienen instalado asi que sera mas optimo que lo tengan Descargar Visual Studio Code
Ala izquierda veran opciones que son herramientas utiles, estos iconos en la barra lateral izquierda seria bueno que los conozcan pero en este curso solo veremos una de ellas, que es el de las extensiones, su icono son cuatro cuadritos que deberan dar click.
cuando lo presionen veran que su barra lateral cambiara y en esa barra lateral arriba encontraran una de busqueda, donde tendran que colocar los nombres de las extensiones he instalarlas, les dare el nombre de algunas extensiones que les seran muy utiles para programar
Halcyon theme: es para añadir un tema oscuro que no daña los ojos, hace que el codigo se diferencie mejor, otra extension para tema de colores es "One Dark Pro", pueden personalizar el tema de su editor a su gusto con mas calma, esta es solo mi recomendacion.
Supermaven: inteligencia artificial para completar codigo, le dar a la tecla Tab para aceptar el autocompletado que te de
ESLint: una extension que ayuda para ayudar con posibles errores en el codigo
Error lens: te dira la linea en donde hay un error y detalles del error, resaltara esa linea donde haya un error con rojo y te dira detalles de por que hay un error
Esta es otra configuracion: en su teclado presionen las teclas Ctrl + Shift + P, Esto les abrira una barra de busqueda,
busquen: Preferences: Open Settings (JSON) presionen en esa opcion y les abrira un archivo, descarguen el archivo que les pasare, copien el contenido y peguenlo en el lugar donde iran sus configuraciones reales config.json
para activar el tema de color que instalaron, animacion para scroll, auto guardar, auto guardar despues de 5 segundos, desactivar minimapa y hacer que el texto se acomode a su pantalla
por ultimo la carpeta donde estaran sus archivos arrastrenlo hasta la aplicacion de vscode hasta que les indique la aplicacion que se abrira correctamente
JavaScript es un lenguaje de programación interpretado, de código abierto, dinámico y orientado a objetos. Es un lenguaje de programación de propósito general, que puede ser usado en cualquier contexto para crear aplicaciones web, móviles y de escritorio.
con el ejemplo de C++ es un lenguaje compilado porque hay que compilar todo el codigo, crea todo un archivo aparte para ejecutarlo, en el caso de JavaScript es interpretado porque no creara un archivo nuevo, el codigo se suele ejecutar directamente en el navegador, que interpretara linea por linea cada linea del codigo, lee una linea, la interpreta y ejecuta
Un lenguaje puede ser orientado a objetos cuando usa como base este paradigma, pero tiene orientacion a objetos cuando es algo opcional, el lenguaje soporta esta caracteristica, y es un paradigma muy util que veremos un poco de el.
en C++ el tipado es fuerte porque las variables se declaran como un tipo como numero y no puede cambiar el tipo de la variable, en JavaScript el tipado es dinamico porque las variables pueden cambiar de tipo, por ejemplo:
var a = 1; a = "hola"; a = true;
Este lenguaje es usado comunmente en la web pero también se usa en otros contextos, no solo para desarrollar aplicaciones web si no tambien aplicaciones desarrollo mobile, aplicaciones de consola entre etros.
para escribir variables o funciones usamos camelCase que es una forma de escribir donde si hay varias palabras la primera palabra se escribe en minusculas ejemplo: variable. y luego las demas palabras empiezan por mayusculas, ejemplo: sumarNumero, funcionParaSumarVariables. funciones integradas estan escritas asi por eso es importante
Las variables son espacios en memoria donde se almacenan los datos, las variables se declaran antes de usarse, por ejemplo:
var a = 1;
otra forma de declararlas es:
var b = 2;
var a = 2, b = "hola", c = true;
separandolas por comas, de esta forma se declaran todas las variables en una sola linea, pero puede ser mas interesante hacerlo en lineas separadas para mejorar la legibilidad del codigo.
para poder usar una variable primero hay que declararla, para declarar una nueva variable se usan las palabras var, let y const, que no se recomienda usar var, al declarar una variable con var su alcance sera global, por lo que podra existir y usarse en todos los ambitos del programa, pero es mejor practica que las variables sean let o const que tienen un alcance local, que usualmente tambien mas comun es let ya que const es para variables constantes, en otros lenguajes se dice que no son variables constantes, ya que o son variables por que pueden cambiar, o constantes porque son solo de lectura son inmutables por lo que no pueden cambiar de valor, pero en JavaScript si, evita que una variable se reasigne a otro valor, pero no garantiza la inmutabilidad del contenido, a diefrencia de otros lenguajes donde esto es mas estricto, si creas una variable como por ejemplo:
a = 10;
esta valiable por defecto usara var por lo que es recomendable siempre usar let o const
Ejemplo:
let a = 10;
como se ve en el ejemplo para declararlas se usa primero el alcance de la variable seguido de un espacio, se coloca el nombre de la variable pero hay algunas restricciones para el nombre de las variables que pueden ser palabras reservadas o signos por lo que una recomendacion es que las variables tengan nombres descriptivos, que el mismo nombre de la variable te diga para que seran utilizadaas, y por ultimo se le puede asignar un valor o no que al asignar un valor se dice que se estan inicializando, puede estar vacio para en un futuro inicializarse, lo inicializamos colocando un signo igual "=" despues del nombre de la variable y colocandole el valor que se desee agregar, una recomendacion es agregar punto y coma al final ";", representan el final de una sentencia de codigo, en JavaScript no es tan esctricto el uso y puede llegar a funcionar el codigo sin los punto y coma pero es buena practica usarlos debido a que pueden surgir errores ya que el interprete intenta adivinar donde pueden haber ";" y tu codigo puede hacer cosas inesperadas.
const PI = 3.14159;
let c;
ejemplo simple:
let c = 1;
el interprete puede llegar a verlo como
let a = 10;
let b = a
++c
let c = 1;
lo que seria un error de sintaxis.
let a = 10;
let b = a++c
para empezar a progamar con JavaScript lo mas comun es usar la web para ejecutar el codigo, por lo que deberan crear dos archivos con extensiones diferentes, en una carpeta creen un archivo index.html y un archivo app.js, el archivo con extension ".html" es para estructurar paginas web, y el arcihvo con extension ".js" es la logica que contendra esa pagina y es donde nosotros trabajaremos, en el archivo index.html deberan escribir lo siguiente:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Mi Página</title> </head> <body> <script src="app.js"></script> </body> </html>
la etiqueta script es para incluir archivos o codigo Javascript en un archivo aparte creas un archivo con el nombre que quieran pero con la extension .js y en el archivo index.html adentro de la etiqueta
<body></body>
adentro de esta etiqueta body debe ir al final de todo la etiqueta script y en src="" adentro de las comillar pones el nombre del archivo y trabajar escribiendo codigo desde ese archivo.js que es lo que recomiendo
<body> <script src="codigo.js></script> </body>
otra forma es escribiendo desde la etiqueta script el codigo sin poner src=""
<body> <script> let variable = "texto"; let numero = 1; let booleano = true; </script> </body>
en el archivo.js esciban una variable y muestrenlo con alert(), como por ejemplo:
let a = 10;
dirijanse a donde crearon su archivo .html de su proyecto, deberan darle click derecho al archivo .html y deberan escoger un navegador para ejecutar el codigo, como por ejemplo darle click derecho y elegir google, si siguieron bien los pasos anteriores deberian ver una alerta con el valor de la variable que hayan puesto.
alert(a);
deberan tener en cuenta el sitio donde colocaron los archivos para el src="", en el caso que solo hayan puesto el nombre de su archivo como por ejemplo:
src="sript.js"
buscara en la misma carpeta un archivo con ese nombre, tambien sucedera con ./ al principio del nombre, le estas indicando explicitamente que tu archivo esta en la misma carpeta que tu archivo .html, por ejemplo:
src="./script.js"
tambien otra opcion es que tengan la logica en una carpeta aparte adentro de la misma carpeta, lo cual puede ser una opcion muy buena en este caso ya que en el curso se haran varios ejercicios y en lugar de borrar lo que ya han hecho y escribir otro ejercicio estaria bien que crearan diferentes archivos con estension .js y solo tendrian que cambiar la ruta del src="" en el html, lo que les ayudara a tener guardada la logica y poder revisarla en un futuro cuando la necesiten para repasar, un ejemplo es que creen una carpeta llamada logica, en la carpeta logica creen un archivo llamado script.js y luego en su html en la ruta coloquen:
src="./carpeta/script.js"
luego otro caso es que tengan su archivo index.html en una carpeta y su logica este afuera de esa carpeta, en ese caso tendran que usar ../ donde se le indica que nuestra logica se encuentra una carpeta afuera de donde esta nuestro html, si estuviera dos carpetas afuera usariamos ../../ y asi susecivamente cuanto mas afuera este nuestra logica, por ejemplo:
src="../script.js"
y el ultimo ejemplo es que tengan el html en una carpeta y el codigo JavaScript en otra carpeta adentro de una carpeta que los contenga, que puede ser comun cuando trabajamos en un proyecto mas grande, como por ejemplo:
src="../logica/script.js"
que se puede entender como, busca una carpeta afuera, busca la carpeta logica, busca el archivo script.js y si lo encuentra usara esa logica.
eviten poner nombres con espacios, utilizen camelCase para evitar estos espacios en los nombres de las carpetas.
por ultimo, con el editor de codigo abierto, hay dos opciones para poder editar esos archivos para escribir el codigo, el primero es el mas facil, solo arrastran el folder con su proyecto adentro del editor de codigo hasta que el editor les indique que se abrira correctamente, el segundo es que en la barra superior a la izquierda del editor de codigo, o la barra que se encuentra arriba del todo a su izquierda, encontraran varias palabras, presionen File que les abrira un menu desplegable, en ese menu encuentren la palabra "Open Folder..." para la carpeta de su proyecto u "Open File..." para abrir un archivo en concreto.
los tipos que puede almacenar una variable
un tipo comun en JavaScript es el tipo string, para inicializar una variable para que contenga un string solo hay que colocar el texto adentro de comillas, ya sean dobles " ", simples ' ' o template strings ` `, estas cadenas de texto tienen ciertas interacciones interesantes con los operadores que los veremos luego, uno interesante es el operador + que es para sumar, pero con las cadenas de texto este los concatena o dicho de otra manera los une, por lo que si tenemos "texto1" + "texto2" nos dara como resultado "texto1texto2", esto pasara aunque los textos sean numeros, ya que podemos tener "22" y no lo vera como un numero si no como un string, al hacer la suma "22" + "10" nos devolvera un "2210", un ejemplo:
let cadena = "hola ";
y ahora solo es cuestion de probar el codigo, y veran su hola mundo en forma de alerta, felicitaciones! has creado tu primer hola mundo con JavaScript, ahora puedes presumirselo a todo el mundo como un gran logro. Deben tener en cuenta que los strings tambien tienen en cuenta los espacios en blanco por lo que pueden separar las palabras, para poder guardar comillas adentro de una variable string solo hay que usar comillas diferentes y asi se podran "escapar" como se le dice, si quieren escapar comillas dobles deberan usar por ejemplo ' "cadena" ', y para comillas simples " 'cadena' ", `` las templates strings tambien puede escapar ambas, en el ejemplo use espacios para que se note la diferencia pero como dije los espacios tambien cuentan y se guardaran por lo que es algo a tomar en cuenta. Una ultima interaccion es con el operador "-" que es para la resta, ya que el lenguaje tiene una particularidad muy interesante que es que si tienes cadenas de texto que son numeros y usas el operador - lo que hara sera que se restaran, por ejemplo:
let texto = "mundo";
let holaMundo = cadena + texto;
alert(holaMundo);
let numero1 = "1";
este nos devolvera un 0, porque JavaScript tambien es dinamico, lo que hace que va a intenta convertir los tipos de datos para que tu programa funcione, en este caso el operador - no se puede usar con cadenas de texto, se usan con numeros por lo que JavaScript intentara convertir el texto a tipo numerico y de ahi viene la interaccion tan curiosa que en otros lenguajes de programacion serian solo un error.
let numero2 = "1";
let numero3 = numero1 + numero2;
alert(numero3);
para guardar tipos de datos numericos que pueden ser decimales o enteros, un ejmpelo de decimal seria 30.10, y entero 100, estos tienen interacciones con operadores aritmeticos, como lo son + para la suma, - para la resta de numeros, * para la multiplicacion, / para la division y % que es para modulo o dicho de otra forma es el residuo de la division, son muy comunes y no se deben confundir con numeros que sean enrealidad strings, como por ejemplo:
let numero1 = 1;
que como vemos en este caso la variable numero1 cambio de ser tipo numerico a ser de tipo texto y asi se puede cambiar cuantas veces se quiera o necesite en la logica.
let numero2 = 1.5;
let numero3 = nomero1 + numero2;
let numeroCadena = "1";
numero1 = "4";
para almacenar datos booleanos que son solo dos valores, verdadero o falso, true or false, que tambien se pueden representar con 1 o 0, estos valores son muy utiles y muy utilizados en programacion en general, su uso lo veremos mas adelante, ejemplo:
let bool = true;
let bool2 = false;
son colecciones de datos, que se puede entender mejor como una lista de datos, por lo que en lugar de tener muchas variables de un mismo tipo, o que tengan relacion, una opcion muy buena es que esten adentro de un array, veremos mas a profundidad estos arrays pronto en el curso.
los objetos tambien son colecciones de datos, pero estos tienen una diferencia muy importante con respecto a los arrays que profundizaremos luego en el curso.
este es un tipo de dato que lo definimos nosotros, en el caso de que nuestra variable querramos que este vacia al inicio, ejemplo:
let vacio = null;
y lo podran ver al usar alert, que les mostrara que el tipo de dato es null, o explicitamente vacio.
este tipo de dato como su nombre en ingles lo indica, es un tipo de dato sin definir, cuando no se le agrega null para que este vacio, en lugar de es no se le dice lo que contendra.
let sinDato;
al hacer esta alerta podremos ver que lo que nos mostrara sera undefined.
alert(sinDato);
les recomiendo seguir y hacer los ejercicios, incluso el hacer sus propios ejercicios cambiando algunas cosas, ya que la mejor forma de aprender a programar es simplemente programando. En esta ocacion utilizaremos lo que es la consola, que es una herramienta demasiado utilizada para hacer pruebas o testeo.
para este ejercicio crearan un archivo con extension .js y crearan variables y las inicializaran, las variables deben contener todos los tipos de datos anteriormente mencionados en el curso, deberan mostrar tanto el dato, como el tipo de dato de la variable utilizando la consola.
para utilizar la consola tendran que hacer un click derecho sobre una pagina web, que en su caso sera sobre la pagina de su proyecto, al hacer click derecho les apareceran diferentes opciones, presionen la opcion de Inspeccionar que estara abajo del todo entre las opciones, esto les mostrara las herramientas de desarrollo que tienen los browsers, como google que tiene estas herramientas para ayudar a programadores con el desarrollo, a la derecha encontraran arriba una cinta de opciones, que contiene palabras como Elements o Console, deberan de presionar en Console para acceder a la consola, en caso de que no les aparezca, en esa cinta de opciones se encuentra unas flechitas dobles que deberan presionar y se desplegaran mas opciones y podran buscar la opcion Console, las opciones pueden llegar a esconderse si la barra lateral es muy pequeña asi que solo intenten estirarla a su izquierda y no deberian tener problemas.
bien, ya estan en la consola de comandos, ahora en su programa, en su archivo con extension .js tendran que mostrar los datos solicitados, ejemplo:
let num = 1;
luego de haber escrito este ejemplo tendran que ir a su pagina web, recargar la pagina y revisar en la consola, les tendran que aparecer los datos, tanto lo que almacenaba la variable como el tipo de dato, console.log() lo que hara sera que mostrara en la consola todo lo que le hayas puesto, tanto texto con comillas, numeros y variables, y la palabra typeof antes de la variable adentro del console.log() nos mostrara el tipo de dato de lo que venga despues de decir el typeof, algunos ejemplos de console.log():
console.log(num);
console.log(typeof num);
console.log("texto");
console.log(12 + 12);
console.log(true);
array como ya mencionamos son colecciones de datos o listas de datos, ejemplo de un array:
let lista = [];
que en este caso es un array vacio, no contiene nigun dato, otros lenguajes de programacion los array solo pueden contener un tipo de dato, como si son numeros, no puede almacenar otro tipo de dato que no sea numero, pero en JavaScript los datos pueden ser mixtos, como por ejemplo:
let coleccion = [true, "texto", 12];
lo mas comun y recomendado es que los datos todos tengan relacion entre si, en lugar de nosotros escribir algo como:
let lunes = "lunes";
que son muchas variables que contienen los dias de la semana, y asi pueden ser otras muchas variables mas que hagan el codigo largo y el programar mas tardado, en lugar de eso puedes hacer algo como:
let martes = "martes";
let miercoles = "miercoles";
let jueves = "jueves";
let viernes = "viernes";
let sabado = "sabado";
let domingo = "domingo";
console.log(lunes,martes,miercoles,jueves,sabado,domingo);
let diasDeLaSemana = ["lunes","martes","miercoles","jueves","viernes","sabado","domingo"]
copien ambos ejemplos y veran que ambos muestran que ambos muestran los dias de la semana pero con una diferencia, que el primero mostrara el valor de todos las variables, en el otro mostrara entre parentesis cuantos datos contienen a lista de datos, mostrara la lista de datos, y tambien habra una flechita a la que deberan darle click, les mostrara numeros de un lado y valores del otro, que es la posicion de cada valor, "lunes" esta en la primera posicion, pero los arrays comienzan con la posicion 0, por lo que veran algo como
console.log(diasDeLaSemana);
0: "lunes"
como veran son enrealidad listas clave valor, donde a cada valor le corresponde una clave numerica, que correspondera a su posicion empezando desde cero, que iran en direccion de izquierda a derecha, y para acceder a un valor en concreto hay que hacerlo mediante su posicion, por lo que si queremos mostrar solamente el dia lunes seria algo asi:
1: "martes"
2: "miercoles"
3: "jueves"
4: "viernes"
5: "sabado"
6: "domingo"
console.log(diasDeLaSemana[0]);
hay que colocar el nombre de la lista segido de corchetes [] y por ultimo colocarle la posicion que se quiera mostrar, y esto se puede usar tambien de otras maneras, y les dare un par de ejemplos:
let numero;
ahora la variable numero contendra el valor que tiene la posicion 0 de la lista numeros, por lo que numero ahora vale 1.
let numeros = [1,2,3,4];
numero = numeros[0];
let numero = 10;
en este caso en la lista numeros en la posicion 0 el valor se cambiara por el valor de la variable numero, la lista se veria algo asi [10,2,3,4]
let numeros = [1,2,3,4];
numeros[0] = numero;
let arr = [1,2,3,4];
en este este caso que vemos que los arrays tambien pueden contener otros arrays la lista se veria algo asi [[1,2,3,4],5,6,7]
let numeros = [arr,5,6,7];
let arr = [1,2,3,4];
.push es un metodo que tienen todos los arrays, ecribes el nombre del array, llamas a .push seguido de parentesis y adentro de los parentesis hay que darle un valor, este valor lo guardara en la lista al final, por lo que la lista quedaria algo asi [1,2,3,4,5] asi puedes hacer crecer la lista y agregar nuevos valores, no se preocupen si no entienden un termino que luego lo veremos.
arr.push(5);
los objetos tambien son una coleccion de datos clave valor, pero a diferencia de los arrays las claves las ponemos nosotros, un ejemplo de un objeto:
let persona = {nombre: "julio", edad: 22, trabaja: true};
el objeto persona es util en caso de que querramos concentrar informacion relacionado a algo, en este caso personas, que contendran nombres, edades, y si trabajan o no, se ponen llaves {}, se coloca adentro de las llaves la clave, luego colocar dos puntos : y por ultimo el valor, cada clave valor se separa por comas, para acceder a sus valores se puede hacer algo asi:
let persona = {nombre: "julio", edad: 22, trabaja: true};
donde ya no accedemos al valor por su posicion si no por su clave, los arrays y objetos pueden hacer combinaciones interesantes ya que, los objetos pueden contener a su vez, otros objetos, los arrays pueden contener arrays, los arrays pueden contener objetos, y los objetos arrays, por lo que algo frecuentemente usado es tener arrays de objetos, estas listas tambien pueden guardar variables, tambien se suelen usar saltos de linea para hacer que todo sea mas legible, por lo que mostrare unos ejemplos:
console.log(persona.nombre);
console.log(persona);
let listaDeEstudiantes = [
una array que contiene objetos, que tambien esos objetos contienen arrays y aun asu vez esos arrays adentro de los objetos podrian contener arrays u objetos, pero en este caso tiene logica que esten de esa forma, para acceder al valor de un curso de uno de los alumnos podemos hacer algo como:
{ nombre: "julia", promedio: 75, cursos: ["matematicas","calculo"]},
{ nombre: "jose", promedio: 68, cursos: ["matematicas","programacion","estadistica"]},
];
console.log(listaDeEstudiantes[0].cursos[0]);
que primero buscara la posicion 0 en el array "listaDeEstudiantes", luego buscara la clave cursos, y luego buscara en la posicion 0 de la lista de cursos y mostrara su valor, y en la segunda linea de codigo estamos cambiando su valor por otro, en este caso deberia recibir el curso de ingles en lugar de matematicas. antes de seguir con el siguiente tema les mostrare como comentar el codigo, algo muy importante al trabajar con otros en un mismo proyecto, para saber que hace el codigo de los demas, o incluso comentar tu propio codigo para que te sea mas claro en caso de querer cambiarlo en un futuro.
listaDeEstudiantes[0].cursos[0] = "ingles";
// este es un comentario de una sola linea, para comentar algo especifico del programa
todo lo que escribamos adentro de comentarios no se ejecutara y sera ignorado durante la ejecucion, son muy utiles mientras desarrollamos y recomiendo comentar todo los que les parezca nuevo asi cuando vuelvan a leer sus repasos les sera mas facil recordar todo lo que han hecho.
/* este es un comentario multilinea y se empleaa cuando el comentario es muy grande */
/*
el /* indica cuando el comentario empieza
*/ indica el final de un comentario
*/
tendran que crear otro archivo .js donde deberan hacer el siguiente ejercicio: crearan sus propios arreglos, tambien sus propios objetos, almenos tres arrays y almenos tres objetos, tendran que crear un objeto que contenga al menos dos arrays, esos arrays contendran a su vez almenos dos variables ya inicializadas con datos, y mostrarlos todos en la consola, y el ultimo el objeto con arrays que contienen variables deberan mostrar el valor de las cuatro variables que estan ahi tambien en la consola, y por ultimo si les molesta que su pagina se vea blanco fuerte pueden agregar la siguiente etiqueta y asi dañar menos su vista:
<style> body { background-color: #12122f; } </style>
copien y peguen esta etiqueta adentro de su archivo .html adentro de la etiqueta body ya sea adelante o atras de su etiqueta script y asi el fondo de la pagina tendra un color azul marino.
los operadores dicho de manera un poco tecnica es un simbolo o palabra que le indica al programa que hacer con ciertos operandos. veremos los diferentes tipos de operadores y cuales son sus interaciones
operadores para realizar operaciones matematicas con numericos
// operador de suma;
let suma = 1 + 2; // resultado: 3
// operador de resta;
let resta = 4 - 3; // resultado: 1
// operador de multiplicacion
let multiplicacion = 2 * 2; // resultado: 4
// operador de la division
let multiplicacion = 1 / 2; // resultado: 0.5
// operador de modulo o residuo de la division
let modulo = 1 % 2; // resultado: 0
sirven para asignar un valor y pueden combinar operaciones aritmeticas con asignacion
// = para asignar let num = 5; // += para suma y asignacion num += 5; /* el resultado sera 10 es una version mas corta de: num = num + 5; */ // -= para resta y asignacion num -= 2; // ahora num vale 8 // *= multiplicacion num *= 2; // num vale 16 // /= division num /= 2; // num vale 8 *= multiplicacion num %= 2; // num vale 0
sirven para asignar un valor y pueden combinar operaciones aritmeticas con asignacion
// = para asignar
let num = 5;
// += para suma y asignacion
num += 5;
/*
el resultado sera 10
es una version mas corta de:
num = num + 5;
*/
// -= para resta y asignacion
num -= 2; // ahora num vale 8
// *= multiplicacion
num *= 2; // num vale 16
// /= division
let num /= 2; // num vale 8
*= multiplicacion
let num %= 2; // num vale 0
con estos operadores puedes indicar que condiciones necesitas que se cumplan, dependiendo de si la condicion se cumple o no retornara valores booleanos, true en caso de que la condicion se cumpla, false en caso de que no se cumpla la condicion
/*
> mayor que
< menor que
>= mayor o igual que
<= menor o igual que
== igual que
!= diferente que
=== estrictamente igual que
!== estrictamente diferente que
*/
let variable = 1 < 2;
console.log(variable); // imprime true porque 1 es menor que 2
let variable2 = 1 > 2; // false
let variable3 = 1 <= 1; // true
let variable4 = 1 >= 2; // false 1 no es mayor o igual que 2
let variable5 = 1 == 1; // 1 es iSgual que 1 asi que es true
let variable6 = 1 != 1; // 1 no es diferente de 1 asi que es false
let variable7 = 1 === "1"; // este es false, compara tanto si el valor es igual como si el tipo de dato tambien lo es
let variable8 = 1 !== "1"; // true
que sirven para comparar valores booleanos
/*
&& ambos tienen que ser verdaderos para que sea verdadera
|| uno de los dos debe ser verdadero para que sea verdadero
! si es verdadero lo niega y convierte en falso, si es falso lo vuelve verdadero
*/
let var1 = true && false; // retornara un false
let var2 = true || false; // retornara un true
let var3 = !true; // retornara un false
let var4 = !(false);
/*
esta es otra forma de negar, donde le decimos que lo que este adentro de los parentesis es una expresion y lo que devuelva se tiene que negar por lo que se puede hacer un !(true && false) estos operadores son muy utiles y veremos el porque cuando lleguemos a la parte de los if else, y otra curiosidad es que otras cosas tambien devuelven booleanos por que JavaScript intenta convertir tipos de datos a otros para que tu programa funcione, si es tipo numerico un 0 es un false, en texto una cadena vacia "" es un false por lo que hacer un:
*/
alert(!("")); // retornara un true
en un contexto booleano puede convertir a booleano algunos tipos de datos, veremos que tipos pueden dar false:
false falsy 0 falsy -0 falsy "" falsy null falsy undefined falsy NaN falsy todo lo demas es truthy
antes de hablar de los condicionales les explicare sobre las llaves {} ya que no solo se usan para los objetos, son utilizados para representar bloques de codigo, o ambitos, por lo que se los mostrare con un ejemplo:
/*
en nuestro programa no vemos llaves pero en si es un bloque de codigo, todo lo que escribamos en el archivo son sentencias, condiciones e instrucciones que indican lo que hara el programa, tambien por legibilidad del codigo se recomienda tabular o identar el codigo que veremos en un momento como funciona esto.
*/
let a = 5; { let a = 20; let b = 10; console.log(a,b); // imprime 20 y 10 { console.log(a); // imprime // 20 } } console.log(a); // imprime 5
/*
toda la explicacion surge a partir de que nosotros no vamos a usar las llaves para crear bloques de codigo solo por que si, gracias a las condiciones podemos hacer que estos bloques de codigo se ejecuten si cumplen con ciertos parametros, hay tres tipos de condiciones, y les mostrare un operador que no les mostre antes. ejemplo:
aqui podemos notar varias cosas, primero que declaramos dos variables a, y esto es gracias a let, ya que su alcance es local, por lo que hay dos variables "a" pero viven en bloques de codigo diferentes, y por eso es buena practica usar let, por si queremos declarar una variable con el mismo nombre pero que vive en un bloque de codigo diferente, otra cosa es que el bloque que esta adentro de otro bloque puede usar la variable "a", esto es por que un bloque puede usar variables de su bloque padre o dicho de otra forma, el bloque que los contiene, por lo que si quitaramos la variable "a" que se declaro adentro de las llaves, lo que usarian estos bloques seria la variable "a" que esta afuera, osea la que vale 5, pero afuera de las llaves la variable b no se puede usar, solo adentro de su bloque o bloques que esten adentro de el. y por ultimo la identacion que no es mas que dar una tabulacion o dejar espacios, cuando creamos un bloque de codigo todo lo que se escriba adentro, todas las lineas deben tener espacios al principio, solo debes darle a la tecla tab, ya que aunque el programa funcione sera mas costoso saber lo que hace tu programa, porque incluso tu mismo debes saber lo que hace
*/
/* if: el bloque se ejecutara si la condicion es verdadera else if: si el bloque if no se ejecuto, buscara un else ig y vera si este cumple para ejecutar la logica dentro else: este se ejecutara en caso de que no se haya ejecutado if, y tampoco se haya ejecutado los if else para crear una condicion if hay que usar su palabra reservada "if" luego hay que colocar unos parentesis, adentro de estos parentesis estara la condicion que debe cumplirse, por ultimo un bloque de codigo {} donde ira la logica que quieras que se ejecute, y tambien se puede no poner los bloques de codigo en caso de que solo requieras de una linea de codigo, ejemplo: if () {} else if: este es cuando el if no ha cumplido la condicion, puedes tener tantos if else como quieras y siempre iran despues de un if, y son opcionales, puedes o no ponerlos, hay que colocar la palabra reservada "else" dejar un espacio luego la palabra reservade "if" parentesis, luego llaves if () {} else if () {} por ultimo else que se ejecutara siempre que no se haya cumplido la condicion if, y/o no haya cumplido con los else if, ira siempre despues de una condicion, o el final de todas las condiciones, primero hay que usar una condicion if para usar el else, se coloca la palabra reservada else y el bloque de codigo, y tambien es opcional el ponerlo if () {} else {} veamos ejemplos de esto en codigo real antes voy a mencionar que estos condicionales evaluan valores booleanos */ edad = 17 if ( edad >= 18 ) { console.log("ya eres mayor de edad"); // la variable edad no es igual o mayor a 18, este bloque no se ejecuta } else if ( edad > 0 && edad < 18 ) { console.log("aun no eres mayor de edad, estas chiquito"); // este bloque si se ejecutara porque la edad es mayor a 0 y tambien cumple que sea menor a 18 // para hacerlo un poco mas entendible la condicion puedes hacer ((edad > 0) && (edad < 18)) } else { console.log("la edad que ingreso no es valida"); // ya que los numeros tambien pueden ser negativos } /* este codigo no toma en cuenta que pasaria si le pasan una edad muy grande como 1000, pero es algo que ustedes mismos podrian implementar, como ven hacemos combinaciones entre operadores logicos && y de comparacion ya que ambos devuelven valores booleanos, hay que evitar que los condicionales se anides, con esto me refiero que una condicional este adentro de otra condicional, pero hay una practica muy util que de solo verificar que la condicion se cumpla y negarla, tal vez suene un poco confuso pero lo veremos con un ejemplo de muchas condiciones. Ejemplo: vendran invitados a casa y uno especial, los invitados son mayores de edad, si son hombres hay que darles un saludo cordial, en otro caso desearle un feliz dia, y el invitado especial es un hombre que tendra un atuendo deportivo y hay que darle un regalo. */ let invitado = { sexo: "masculino", edad: 18, atuendo: "deportivo" }; // mala practica if ( invitado.edad >= 18 ) { console.log("bienvenido a la fiesta, puedes pasar"); if ( invitado.sexo == "masculino" ) { console.log("un saludo cordial"); if ( invitado.atuendo == "deportivo" ) { console.log("tome un regalo"); } else { console.log("un gusto en verle"); // no se le da nadota } }else { console.log("tenga un lindo dia"); } } else { console.log("no puedes pasar, estas muy chiquito"); } // if anidados, muy dificil de leer // buena pracica if ( !(invitado.edad >= 18) ) { console.log("no puedes pasar por que estas chiquito"); } else { console.log("bienvenido a la fiesta, puedes pasar"); } if ( !(invitado.sexo == "masculino") ) { console.log("tenga un lindo dia"); } else { console.log("un saludo cordial"); } if ( !(invitado.atuendo == "deportivo") ) { console.log("un gusto en verle"); } else { console.log("tome un regalo"); } /* le pasamos los datos a evaluar y luego lo negamos, si el invitado no es mayor de edad devolvera un false, pero los condicionales if solo ejecutaran el codigo en caso de ser verdaderos, por lo que lo negamos asi dara true y se ejecutara el codigo que no lo dejara pasar */ // por ultimo veremos el operador ternario que es un condicional de una sola linea, asi no tenemos que usar un if else con los parentesis y llaves en una condicion pequeña //ejemplos: let persona = { nombre: "juan"}; /* importante decir que solo ejecutan una linea de codigo, en JavaScript pueden llegar a ejecutar mas pero lo interesante del operador ternario es que solo ejecuten uno y asi hacer legible el codigo, en caso de necesitar ejecutar mas codigo se puede emplear un if normal */ persona.nombre == "juan" ? console.log("hola") : console.log("adios"); let juan = persona.nombre == "juan" ? "juan" : "no es juan"; console.log(juan); /* tambien puede retornar valores, evalua (persona.nombre == "juan") el signo "?" es un if, se ejecutara si la expresion es verdadera, ":" es un else que se ejecutara si es falsa, por el signo de asignacion = espera un valor, que si solo es la condicion retornara un booleano, pero con el operador ternario podemos hacer que devuelva mas valores */
en un nuevo archivo llamado condicionales.js y en el debaran realizar varios ejercicios usando condicionales
ejercicio 1: crear un condicional if que verifique si un array esta vacio, si esta vacio debera mostrar en consola que esta vacio
ejercicio 2: creen un array de objetos, los objetos contendran el nombre de una fruta, el precio y la cantidad que hay guardada, almenos tres frutas, tendran una variable dinero, deberan simular que compran las frutas, restando su variable con el precio de la fruta, si no tienen suficiente dinero no podran comprar mas, tambien si no hay frutas disponibles no las podran comprar
ejercicio 3: copiaran y pegaran el ejercicio que yo escribi de la invitacion a la fiesta, crearan un objeto con sus datos y veran cual es el resultado que tendrian
los blucles los usamos junto con los bloques de codigo, un bucle es algo que repite lo mismo una y otra vez, por lo que podemos intuir que va a repetir el codigo una y otra vez, tenemos tres bucles diferentes que los estaremos viendo, el bucle while, do while, y for, hay un gran riesgo con los bucles, estos bucles pueden llegar a ser infinitos, que nunca terminen, esto puede generar que tu aplicacion se rompa por completo, veremos como manejar esto con todos los bucles
El bucle while es como un if ya que tendra unos parentesis que evaluaran valores booleanos, si la condicion se cumple entonces el programa termina, para usar un bucle while se llama a la palabra reservada "while" luego unos parentesis y por ultimo llaves
/* cada vez que el bucle haya ejecutado una vez todo el bloque de codigo se dice que ha terminado una "iteracion", recuerden esta palabra ya que la usare muy amenudo en el curso, puede hacer tantas iteraciones como querramos u la logica lo requiera, antes de entrar al siguiente ejemplo veremos el operador "++", es para incrementar un valor numerico en una unidad y les mostrare un ejemplo rapido: i = 0; i++ console.log(i); // imprime 1 en este caso mostrara en consola 1, tiene una interaccion diferente en caso de la posicion en la que agregues el operador con respecto al numero que se quiera incrementar console.log(i++); // imprime 1 console.log(++i); // imprime 3 el primero no imprimio 2 pero aun asi incremento el valor de la variable i en 1, cuando se hace i++ primero toma el valor de la variable i que es 1 y luego se incrementa, en el otro caso primero se incrementa y luego se toma el valor de la variable, ya que el codigo se ejecuta de izquierda a derecha, la letra i es por "incremental", ya que la variable se usara para que se incremente su valor. */ i = 0; while ( i < 100 ) { console.log(i); i++; } /* primero declaramos una variable i afuera y esto es importante, luego se coloca la sintaxis basica de un bucle while "while () {}"", y adentro del bloque de codigo se imprime el numero y luego se incrementa el numero, imprimira 100 veces la variable i, imprimiendo desde el 0 hasta al 99, un error que yo cometi fue el declarar la variable i adentro del bucle lo que genero un bucle infinito por que en cada iteracion la variable i se reseteaba por lo que siempre era 0, si le pasas adentro de los parentesis true o 1, los tomara como verdaderos siempre por lo que generara un bucle infinito, pero esto si se puede hacer de manera intencional gracias a que existe la palabra reservada "break" para detener el bucle por completo, el hacer lo del numero incremental no se usa con el while ya que es mejor hacerlo con el bucle for que veremos un momento, el bucle while se va a querer utilizar cuando no se sabe cuantas veces se necesita iterar sober el codigo. */ while ( true ) { numero = parseInt(prompt("ingrese un numero")); if ( numero < 100 ) { break; } } /* no pasa nada si no entienden todo el codigo, solo tienen que saber que primero por defecto es un bucle infinito que no va a acabar, le pedimos al usuario que ingrese un numero, luego se verificara que ese numero sea menor a 100, si cumple que el numero es menor a 100 entonces se llama a break para que el bucle finalize. */
este es casi lo mismo que el bucle while, pero con la diferencia es que el primero verifica una condicion, si la condicion se cumple se ejecuta el codigo y empieza el bucle, en el do while primero ejecutara el codigo y luego verificara que la condicion se cumpla para volver a ejecutar el programa, se llama a la palapra reservada "do" luego las llaves donde tendran su logica, al final de las llaves la palabra "while" y por ultimo parentesis "do {} while ()", que si lo traducimos podemos darnos una buena idea de lo que hace, do: hacer, while: mientras, haz { /*codigo*/} mientras ( /*condicion*/ )
do { numero = parseInt(prompt("ingrese un numero")); } while ( numero < 100 ); /* una solucion mejor al problema anterior, ideal cuando el codigo se tenga que ejecutar almenos una vez ya que este bucle hara eso, lo ejecutara una vez como minimo. */
el bucle mas comun de ver en programas, y se utilizara cuando conozcamos las veces que se quiera iterar, se llama a la palabra for, luego de parentesis y las llaves del codigo, pero estos parentesis reciben tres parametros, un parametro es informacion que se le pasara a algun procedimiento, y dicho de otra forma, un parametro es un dato de entrada, si no le pasas estos tres parametros seguramente recibas un error en el codigo o se rompa tu programa, el primer parametro es una variable numerica, que puede ser declarada adentro del parentesis o declarada afuera pero debe ser inicializada con un valor, el segundo parametro es la condicion, o cuantas veces se espera que el programa itere, por ultimo el incremento hacia la variable, estos tres deben estar separados por ";" esto se explica mejor con codigo:
for (let i = 0; i < 10; i++) { console.log(i); } /* ( let i = 0; /*variable que se incrementara: indica en que numero empieza el programa*/ i < 10; /*condicion: que indica cuando termina de iterar el bucle, mientras i sea menor a 10*/ i++ /*incremento: para que no de un bucle infinito por que i siga siendo 0, indicara cuanto se incrementara el numero ya que se peude hacer un i += 2 pero lo mas comun es ver que se use el i++*/ ) aqui declaramos la variable adentro, asi se veria declarada afuera let i = 0; for (i; i < 10; i++) { console.log(i); } es comun que el bucle empiece con el numero 0, ya que los arrays comienzan con la posicion 0 y son muy utilizados para recorrer cada elemento del array, tambien el incremental es comun que se utilize y solo se vea i++ ya que primero toma el valor de la variable en ese momento y luego lo incrementa, por lo que el bucle empieza desde 0, veremos un ejemplo recorriendo un array pero antes veremos .length que es una propiedad de los arrays en JavaScript, esta propiedad nos dice cuantos elementos tiene un array, solo colocando el nombre del array y llamando a su propiedad, el . viene por que la mayoria de las cosas en JavaScript son objetos, o se "encapsulan" en un objeto, por lo que es como llamar a la propiedad de un objeto. Dato curioso: gracias a que esta forma que tiene JavaScript de trabajar es que los datos pueden ser dinamicos, se puede imaginar como que cada vez que creas una variable JavaScript lo encapsula en un objeto, cuando le cambias el valor por otro incluso si es de diferente tipo solo tiene que quitar el contenido y remplazarlo por el nuevo en el objeto. */ // ejemplo: let comidas = ["pera","galleta","pizza","hamburguesa"]; let i = 0; for (i; i < comidas.length; i++) { let comida = comidas[i]; // en el array comidas en la posicion lo que valga i en esa iteracion, va a traerme el nombre y lo guardara console.log(comida); }
en un nuevo archivo deberan realizar los siguientes ejercicios:
ejercicio 1: realizaran un bucle while, do while y for, y con cada bucle deberan mostrar en consola los numeros del 1 al 200.
ejercicio 2: crearan un bucle while que rellene un array con numeros de 2 en 2 hasta llegar a 200, con un bucle for mostrarlos en consola.
antes de pasar a la siguiente definicion queria mencionar un operador para el control de flujo, "break" detiene el bucle, y otro operador para controlar el flujo del bucle es "continue", cuando sea llamado, el codigo que venga despues adentro del bucle ya no se ejecutara, y pasara a la siguiente iteracion del bucle, se emplea cuando que queremos que ciertas iteraciones sean ignoradas, un ejemplo rapido:
let i = 0; for (i; i < 10; i++) { if (i == 5) { continue; } console.log(i); // imprimira del 0 al 9 ignorando el numero 5 }
son casi iguales cada una ya que parten de la misma idea, el poder llamar a bloques de codigo pero con diferencias entre cada una.
la manera mas clasica es usar las funciones comunes que vienen de usar la palabra reservada function dejar un espacio y colocar el nombre de tu funcion que puede ser el nombre que quieras pero al igual que las variables tienen excepciones, luego irian unos parentesis que puede llevar parametros que veremos como son sin parametros y luego con parametros, por ultimo las llaves donde ira nuestro codigo.
function holaMundo() { console.log("hola mundo"); } /* y ya, creamos una funcion en JavaScript pero esta no se ejecutara solo asi, hay que llamarla para que se ejecute, hay que colocar el nombre de la funcion seguido de parentesis */ holaMundo(); /* eso deberia bastar para que se ejecute el codigo e imprima nuestro hola mundo, y ya que tienes tu funcion la puedes ejecutar tantas veces como quieras llamandola una y otra vez, una recomendacion es que la funcion debe ser descriptiva para que sepas lo que hace la funcion solo con ver el nombre, y que debe cumplir un proposito, si es una funcion de aritmetica puedes en lugar de llamar a una que sume, reste, multiplique, y te haga mil operaciones mas todo junto, se crea una que sume y otra que reste, veamos un ejemplo mas de funciones sin parametro */ a = 10; b = 15, function sumar() { return a + b; } /* una nueva palabra "return" que lo que indica que la funcion va a retornar un valor, puede ser el valor que sea, desde numeros, texto, arrays hasta otra funcion lo cual es un poco extraño, esta funcion nos retornara el valor de a + b que es 25 pero tenemos que guardarla en algun lado por lo que podemos hacerlo con una variable. */ suma = sumar(); console.log(suma); /* la palabra return que devuelve algo, tambien funciona como el break, pero este es para las funciones, cuando se llama a return incluso si no devuelve nada la funcion va a terminar, y todas las funciones aunque no devuelvan nada tienen implicitamente un return al final de la funcion, por lo que podremos hacer que la funcion se detenga en el caso de cumplirse una condicion. Los parametros como he dicho antes son valores de entrada y pueden haber tanto valores obligatorios como opcionales. */ function sumar(a, b) { console.log(a + b); } /* ahora ya no tiene valores a los que sumar en la funcion como antes, antes solo con ver la funcion podiamos conocer el valor que imprimiria en consola, eso es porque ahora esos valores lo tenemos que colocar nosotros cuando llamemos a la funcion, como tiene dos parametros, cuando llamemos a la funcion le tendremos que pasar dos valores */ sumar(10,10); // imprime 20 sumar(30,40); // imprime 70 /* asi nuestras funciones pueden cambiar dependiendo de los valores que le pasemos, que tambien pueden devolver cosas si queremos, poniendo el return haciendo que nos devuelva la suma "return a + b;" veremos por ultimo los parametros opcionales, que al igual que lo anterior sera algo facil de entender */ function resta(a, b = 0) { console.log(a - b); } resta(10,5); resta(10); function resta(a,b){ console.log("la restade los numeros es:"); console.log(a - b); } resta(10,4); /* probe el codigo y tiene una interaccion interesante debido a algo relacionado a las funciones en JavaScript, antes explicare los parametros opcionales que es que un parametro puede tener un valor por defecto, lo que lo convierte en un valor opcional, estos parametros deben ser los ultimos parametros que se puedan poner, ya que si el primero es opcional y el segundo obligatorio, de igual forma estaras obligado a pasarle los dos parametros lo que perderia el sentido de tener parametros opcionales, y como vemos gracias a que un parametro es opcional podemos colocarle tanto un valor cuando llamamos a la funcion como poder pasarle dos valores, pero surgen cosas extrañas, ya que hay dos funciones "resta" lo que en otros lenguajes esto seria un error. function resta(a,b){ console.log("la resta de los numeros es:"); console.log(a - b); } resta(10,2); // imprime 8 function resta(a,b) { console.log(a - b); } resta(10,3); // imprime 7 no imprime "la resta de los numeros es:" que esta usando la segunda funcion en ambos casos, ya que la segunda funcion esta sobreescribiendo al primero, pero si seguimos la logica de un programa que es de izquierda a derecha y luego de arriba hacia abajo primero deberia crear la primera funcion y luego ejecutarla, crear la segunda funcion y luego ejecutar esa funcion, pero en JavaScript esta el hoisting que es que se puede llamar a una funcion aunque se cree despues, por lo que la segunda funcion sobreescribe a la primera y tambien afecta a la llamada que esta anterior a su creacion. tambien esta la sobrecarga de funciones que es que se puede tener varias funciones con el mismo nombre si las funciones tienen diferentes cantidades de parametros y esto si es utilizado en los lenguajes de programacion de manera normal, pero en el caso de JavaScript no existe la sobrecarga de funciones, se emula con parametros por defecto o spread operator que es este "...", JavaScript utilizara la ultima funcion que exista con ese nombre. function resta(a,b){ console.log("la resta de los numeros es:"); console.log(a - b); } resta(10,2); // imprime 0 por que solo toma el primer valor y usara la segunda funcion function resta(a) { console.log(a - 10); } resta(10); // imprime 0 y la ultima particularidad que mencionare es que en caso de que en caso de haber dos funciones, la primera con un valor obligatorio y otro opcional, y la otra funcion tenga dos valores obligatorios, cuando se le pasen dos valores al llamarla, ejecutara lo que haya en la funcion con valores obligatorios. esto sucederia en otros lenguajes de programacion pero como es JavaScript solo usara la ultima funcion creada con el nombre que llamemos. function resta(a, b = 0) { console.log(a - b); } resta(10,5); // imprime 5 resta(10); // imprime NaN function resta(a,b){ console.log(a - b); } resta(10,4); // imprime 6 NaN significa "not a number" debido a que utiliza la ultima funcion que necesita dos parametros, por lo que estaria sumando 10 + undefined por lo que en todos los casos se ejecuta la segunda funcion por estos motivos tan curiosos y extraños del lenguaje. */
es una forma diferente de crear una funcion, y la diferencia con las funciones normales aparte de su sintaxis es cuando se utiliza la palabra "this" que es una palabra reservada que veremos cuando lleguemos a la parte de metodos.
const holaMundo = () => { console.log("hola mundo"); } holaMundo(); /* utilizamos la palabra reservada const, le colocamos el nombre de la funcion, usamos el signo igual, los parentesis de los parametros, => el signo igual seguido de mayor que, y por ultimo el bloque de codigo, funcionan igual que las funciones normales, pero es otra manera de crear funciones, estas funciones flecha pueden verse de diferente forma dependiendo del contexto. */ // las funciones flecha cuando tienen un solo parametro pueden no llevar parentesis, son opcionales const saludo = nombre => { console.log("un saludo " + nombre); } saludo("ortensio"); // las funciones flecha // las funciones que tienen cero, o mas de un parametro deben llevar parentesis const suma = (a,b) => { console.log(a + b); } // las funciones flecha si solo ejecutaran una linea de codigo pueden no tener llaves, son opcionales const despedida = nombre => console.log("adios " + nombre); despedida("mario"); /* las funciones flecha de una sola linea que retornan un valor no llevaran return, el return sera implicito y no se debe de colocar en este caso */ const multiplicacion = (a,b) => a * b; const resultado = multiplicacion(12,34); console.log(resultado); /* funciones flecha anonimas y que se llaman una vez se crean, una funcion flecha puede no tener nombre y aun puede llamarse, un ejemplo de estos dos conceptos */ ( () => { console.log("hola"); } )(); ( () => { console.log("mundo"); } )(); /* la funcion se coloca entre parentesis para indicar explicitamente que es una expresion, y otro parentesis para ejecutarlo, no tienen un nombre por lo que no va a crearse una funcion con un nombre, por lo que en este caso si pegara en consola hola y luego mundo, se ejecuta una vez se crea y luego no puede volver a usarse */
Los metodos son funciones que pertenecen a un objeto, pero cuando hablamos de metodos no nos referimos a los objetos que ya conocemos, se suele referir a objetos provenientes de clases, este es un tema correspondiente a programacion orientada a objetos pero para que los entiendan mejor, crearemos nuestros propios metodos estaticos, para utilizar un metodo que viene de una clase necesitariamos crear la clase, que es un molde que tiene propiedades y metodos, y luego crear un objeto, este nuevo objeto tendra las propiedades y metodos de la clase, y podemos crear tantos objetos como querramos apartir de la clase, pero con metodos estaticos no necesitamos crear un objeto a partir de la clase lo que nos permite usar directamente estos metodos, todo esto se entendera mejor cuando lo apliquemos a codigo.
/* primero debemos crear una clase, llamando a la palabra reservada class, luego el nombre de la clase que por convencion suele empezar por mayuscula, y luego unas llaves class Objeto {} un objeto puede tener propiedades, puede almacenar datos pertenecientes a la clase, para que podamos acceder a un atributo fuera de la clase debe ser estatica, imaginemos que queremos una clase persona, los atributos de una persona pueden ser el nombre, su edad, entre otros. class Persona { static nombre = "camilo"; static edad = 28; } se llama a la palabra reservada static, luego el nombre de la propiedad, el signo igual y por ultimo lo que va a contener la propiedad, que puede ser lo que contendria una variable normal hasta colecciones de datos, ya que son estaticos podemos llamar directamente a estas propiedades, ya que todas son propiedades de la clase, se asume que son locales por lo que no hay que colocar var o let para definir su alcance.ñ console.log( Persona.nombre ); solo se llama al nombre de la clase seguido de un punto seguido de su propiedad y eso deberia devolverte el valor que tiene, con los metodos se entiende que un objeto puede tener acciones, con el ejemplo de una persona este puede hablar o interactuar con otras cosas, antes del siguiente ejemplo veremos como concatenar texto, ya que si bien podemos usar el operador "+" una forma mas comun y mejor para concatenar cadenas con variables es usar template strings. las templates strings `` estan alapar de la letra "p" a su derecha en el teclado, son basicamente comillas, para concatenar cadenas con variables se deben usar las template strings, otras comillas no funcionan, luego para colocar el valor de la variable dentro de la cadena de texto se debe usar ${} adentro de esta ira la variable a juntar con el texto, un ejemplo es `cadena de texto ${cadena} mas texto` en lugar de hacer algo como ("cadena de texto " + cadena + " mas texto") class Persona { static nombre = "camile"; static edad = 28; static saludo() { console.log(`hola mi nombre es ${this.nombre}, tengo ${this.edad} años de edad`); } } Persona.saludo(); se utiliza "static" luego la funcion que puede ser normal como "saludo() {}", o flecha como "saludo = () => {}" y con eso seria suficiente para que tengas un metodo aunque no haga nada, en el ejemplo anterior vemos como funciona el "this" que sirve para apuntar al un objeto, que no profundizare muy a fondo en "this", como pueden ver se hace la llamada al metodo se hace primero escribiendo el nombre de la clase seguido de punto, se coloca el nombre del metodo y parentesis para indicar que es una funcion, Persona.saludo(); en este caso "this" adentro del metodo saludo apunta al objeto Persona y un punto para acceder a algo de la clase que en este caso es el atributo nombre y tambien para la edad, como si hicieramos la llamada Persona.nombre adentro de nuestro metodo en la misma clase, y Persona.edad en el metodo adentro de la clase, asi con "this" podemos tanto acceder a atributos adentro de la clase como tambien ejecutar metodos de la clase adentro de otro metodo en una misma clase, y para eto son los metodos, cuando hay funciones que nececiten acceder a los mismos atributos, sean funciones que tienen mucho que ver en comun unas con otras, funciones que se llamen entre ellas, y es una forma mas limpia de organizar el codigo, un ejemplo de metodos estaticos: */ // una forma muy limpia de crear una calculadora usando la consola class Operar { static suma = (a,b) => console.log(a + b); static resta = (a,b) => console.log(a - b); static multiplicacion = (a,b) => console.log(a * b); static division = (a,b) => console.log(a / b); static potencia = (a,b) => console.log(a ** b); } Operar.suma(2,4); Operar.resta(2,4); Operar.multiplicacion(2,4); Operar.division(2,4); Operar.potencia(2,4); // los metodos pueden tanto acceder como modificar los atributos class Empleado { static #id = 0; static #nombre = ""; static #edad = 0; // por convencion se utiliza set al principio del nombre de los metodos que modifican propiedades static setId = id => this.id = id; static setNombre = nombre => this.nombre = nombre; static setEdad = edad => this.edad = edad; // tambien por convencion cuando un metodo muestra informacion de las propiedades de la clase empezara por get static getInfo = () => console.log(`id: ${this.id}, nombre: ${this.nombre}, edad: ${this.edad}`); } // el poner get y set solo ayuda a entender mejor lo que hace el metodo Empleado.setId(2902); Empleado.setNombre("jorge"); Empleado.setEdad(29); Empleado.getInfo(); /* Empleado.id() Error. ya no se puede acceder directamente a los atributos de la clase ya que ahora son privados, el poner "#" al inicio del nombre de una propiedad "#edad" los convierte en propiedades privadas y fue integrado en JavaScript, esto es lo que se llama "encapsulacion", de esta forma tenemos un mayor control sobre los datos. */
hay funciones y metodos que vienen integrados con el lenguaje de JavaScript, hay muchos de ellos, hay metodos que se pueden usar con cadenas de texto, con arrays y aunque hay muchas no todas son tan buenas o la mejor opcion, como el metodo .concat() para hacer concatenacion de cadenas pero si sabes usar esta forma de concatenar cadenas `${}` sera mejor que el metodo concat(), asi que veremos las mas utiles.
/* Funciones: prompt(): es una funcion que generara una alerta en la pagina web, esta le pedira al usuario que ingrese algo, y devuelve una cadena de texto, adentro de los parentesis puede recibir un parametro que sera una cadena de texto, sera solamente para enviarle un mensaje al usuario para que sepa mejor que es lo que deberia colocar "prompt("ingrese su nombre");" ya que devuelve algo hay que guardarlo en un lugar como una variable, este casi no se usa pero lo tendran que utilizar en futuros ejercicios, ejemplo: nombre = prompt("ingrese su nombre"); toString(), parseInt() y parseFloat: los tres son funciones para convertir de un tipo de dato a otro, el toString convertira un tipo de dato en una cadena de texto, parseInt ya sea una cadena de texto "123" o un Float que es numerico pero con punto decimal 12.12, los convertira en numeros de tipo entero 123, 12, y parseFloat() para convertir a un numero con punto decimal, solo hay que colocar el dato en los parentesis y devolvera el valor convertido. ya que prompt lo que devuelve es una cadena de texto podemos usar estos convertidores let edad = parseInt(prompt("ingrese su edad")); let edad = parseFloat(prompt("ingrese su salario, ejemplo '3000.00')); toString(edad) */ // Metodos // para poner en mayuscular let nombre = "texto".toUpperCase(); // "TEXTO" console.log(nombre) // para poner en minusculas console.log(nombre.toLocaleLowerCase()); // "texto" // este metodo es tento para texto como para arrays, buscara el texto que le pongas entre parentesis y devolvera booleano dependiendo de si lo incluye o no, let consola = "texto"; console.log(consola.includes("texto")); // true let arr = ["1","2","3"]; console.log(arr.includes("1")); // true // Metodos de Arrays // .push(): ya lo habiamos visto y es para añadir un elemento al final de la listas let lista = [1,2,3]; lista.push(4); // [1,2,,3,4] // .pop(): para eliminar un elemento al final de una lista lista.pop(); // [1,2,3] // .shift(): para eliminar el primer elemento de la lista lista.shift(); // [2,3] // .map(): itera sobre un array existente y devolvera un nuevo array transformandolo segun una funcion const productos = [ { nombre: "Camisa", precio: 20 }, { nombre: "Pantalón", precio: 30 } ] const nombresProductos = productos.map(p => p.nombre); // ["Camisa", "Pantalón"] let resultado = lista.map( n => n * 2 ); // [4,6] /* recibe como parametro una funcion que en este caso usamos una funcion flecha, .map() iterara en la lista como en un bucle, "n =>" y "p =>" esto es una funcion flecha que recibe un solo parametro que puede tener el nombre que sea como "numero =>" para que sea mas claro, este parametro representa al un elemento individual de la lista, por lo que "n => n * 2" significaria, recorre la lista, cada numero en la lista de numeros multiplicalo por dos, y cuando termines devuelveme la lista de numeros multiplicada por 2 */ /* .filter(): sirve para filtrar un array, al igual que en el anterior recorrera todo el array, y tambien hay que pasarle como parametro una funcion, pero en este caso la funcion es para verificar una condicion, y te devolvera una nueva lista con los elementos que cumplan con la condicion */ const frutas = ["manzana", "pera", "uva", "mango"]; const conA = frutas.filter(fruta => fruta.includes("a")); console.log(conA); // ["manzana", "pera", "uva", "mango"]
si tuviera que hablar de todos los metodos y funciones que existen seria demasiado extenso, pero considero que estos son los mas utiles.
ejercicio 1: pedir con prompt al usuario que ingrese 20 numeros, deberan convertirlos a numeros y guardarlos en una lista
ejercicio 2: deberan crear un array de objetos, cada objeto es un producto diferente con un nombre y un precio, deberan filtrar ese array por uno que contenga productos con precio menor a 40, al menos 10 objetos
ejercicio 3: crearan su propia clase que contendra tres atributos privados, contendra tres metodos para modificar cada atributo y un metodo que devuelva la informacion, la clase se llamara Stock, y servira para gestionar mercancias guardadas, por ultimo llamaran a los metodos.
los callbacks como vimos anteriormente son funciones que se pasan como parametro a otras funciones, y ya hemos visto su utilidad en accion con filter y map que reciben una funcion como parametro, ejemplo de un callback:
// la funcion que ejecutara el callback function saludo(callback) { console.log("hola"); callback(); } // el callback que creamos function miCallback () { console.log("mi nombre es carmelio"); } saludo(miCallback); // le pasamos la funcion adentro de los parametros // y asi podemos ejecutar funciones adentro de otras funciones
hasta el momento todo lo que vimos en JavaScript son cosas que tambien estan en otro lenguajes de programacion, lo cual es bueno ya que si quieren aprender otro lenguaje la tendran mas facil, metodos, condicionales, bucles, entre otros, y la sintaxis entre lenguajes son diferentes pero si ya entienden el concepto lo podran usar, pero hay una razon por la que JavaScript es tan popular, uno es por su ecosistema y comunidad, que se han creado muchas herramientas para crear de todo con esta herramienta, y otra es que JavaScript es el lenguaje que utilizan los navegadores, por lo haremos un ejercicio simple sobre manipulacion del DOM. Haremos un contador de clicks, y antes de ir al ejercicio hablare sobre 'use strict' que es una directiva que se pone al principio del codigo, debe ser lo primero que se ponga en el codigo, entre comillas pondran use strict y tiene una utilidad para depuracion, hace que el codigo que nosotros creemos sea menos propenso a errores, ya que si escriben lo que sea como su nombre en el codigo asumira que es una variable global, pero con use strict deberas declarar una variable usando, var, let o const "pedrito = 10; Error: pedrito is not defined", prohibe que una variable const se le cambie el valor "se reasigne", evita que en funciones hayan nombres de parametros duplicados "function suma (a,a,b) {}", entre unas cuantas mas, te protege de errores que pudiste pasar por alto, tambien eliminar malas practicas.
utilizaremos un archivo HTML, uno JavaScript y un archivo CSS, ya que no es un curso de desarrollo web no tienen por que entender todo lo que yo les de, tan solo copienlo y miren la magia, pero JavaScript si veremos un poco mas en profundidad. asi que creen tres archivos, index.html, script.js, styles.css, todos en una misma carpeta.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Contador</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="contador-wrapper"> <div id="contenedor"></div> <button id="boton">Click</button> </div> <script src="app.js"></script> </body> </html>
* { box-sizing: border-box; } body { background-color: #12122f; background-color: #9f55ff; color: #fff; font-family: 'montserrat', Sans-serif; margin: 0; } .contador-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; padding: 10px; width: clamp(300px, 100%, 400px); background-color: #12122f; height: 500px; margin: 20px auto; border-radius: 10px; } #contenedor { width: 250px; height: 250px; background-color: #1d2433; display: grid; place-content: center; font-size: 2rem; } #boton { background-color: #48e; outline: none; border: none; user-select: none; cursor: pointer; padding: 15px; width: clamp(100px, 100%, 250px); border-radius: 7px; }
'use strict' const contenedor = document.getElementById('contenedor'); const boton = document.getElementById('boton'); let count = 0; boton.addEventListener('click', () => { count++; contenedor.innerHTML = `${count}`; });
y ahora solo debemos ejecutar el proyecto, veremos que hay cosas creadas, un cuadro en el centro con un boton y un cuadrado mas, el cuadro mas grande es una etiqueta div, que podemos darles tanto una clase como un id, para poder referirnos a ese elemento, hay dos etiquetas que tienen id, uno con el id contenedor y otro con el id boton, con clases o ids podemos trabajar con estos elementos adentro de nuestra logica, en el script.js que hicimos guardamos algo adentro de unas variables, estos son los elementos HTML que hay en nuestra pagina web, document.getElementById(); entre comillas adentro de los parentesis le agregamos el id que queremos que busque y nos devuelva ese elemento, el boton de nuestra pagina y el contenedor que contendra los numeros que aumentaran cuando se le de click al boton, creamos una variable que empieza en 0, tenemos la variable boton que contiene al elemento boton en nuestra pagina, addEventListener es un metodo que si lo traducimos dira algo como add: agregar, event: evento, listener: escuchador, por lo que el boton va a escuchar a un evento, estos eventos pueden ser muchos pero en este caso el evento click, el evento click no es exclusivo de los botones pero tiene sentido que se lo demos al boton en este caso, addEventListener() recibe dos parametros, el primero es el evento al que va a escuchar, el segundo parametro es una funcion, esta funcion se ejecutara cuando se escuche al evento, se puede deducir que la funcion se ejecutara cuando se haga click en el boton, y si se hace 100 clicks en el boton este se ejecutara 100 veces, se puede crear una funcion clasica y colocarla como segundo parametro a modo de callback, se crea una funcion flecha anonima para que sea mas directo, pero les mostrare un ejemplo de una funcion clasica.
'use strict' const contenedor = document.getElementById('contenedor'); const boton = document.getElementById('boton'); let count = 0; boton.addEventListener('click', contar); function contar() { count++; contenedor.innerHTML = `${count}`; }
esta tambien es otra forma pero de la primera forma es comun verla o usarla al ser mas directa, por ultimo lo que hace la funcion es que en cada llamada a la funcion la variable count se le sumara 1, luego innerHTML es un metodo que permite obtener o remplazar el contenido de un elemento HMTL, que si se le asigna algo con el operador de asignacion "=" va a remplazar su contenido por el contenido que le indiquemos entre comillas, por lo que al agregarle la variable podemos verla en nuestra pagina web.
como ya hemos visto podemos trabajar con eventos, que los eventos son lo que se llaman triggers que en español serian desencadenadores, en ejemplo anterior se ve su funcionamiento, un evento desencadenara un suceso, que en JavaScript lo que desencadenara sera que se ejecute alguna funcion, hay muchos eventos en JavaScript para el navegador como el hacer scroll o cambiar el ancho de la pagina son eventos, pero en Node.js el evento suele ser las peticiones, cuando se hace una peticion este es un evento que desencadenara una serie de codigo para que podamos obtener una respuesta, ya que una API es un comunicador entre aplicaciones, o mas preciso, Interfaz que define como un software se comunica con otro software, que es basicamente pedir una peticion y recibir una respuesta por parte de algun servicio, asi podremos tener una base de datos o conectarnos con algun servicio dentro de nuestra aplicacion.
Node.js es un entorno de ejecucion de JavaScript, no es otro lenguaje de programacion, lo que utiliza Node.js es JavaScript pero fuera del navegador y por eso el .js por JavaScript, es por eso que en este curso nos enfocamos mas en JavaScript que en node, muchas aplicaciones o software esta creado con JavaScript, incluso el editor de codigo de Visual Studio Code esta hecho con TypeScript, TypeScript es un "superset" de JavaScript, que para no agobiarlos tanto con nuevos nombres, TypeScript ayuda con la seguridad del codigo, y el codigo de TypeScript se convierte a codigo JavaScript, por lo que este mismo editor utiliza tecnologias web, asi que si conoces las tecnologias web podras crear tus propias extensiones para este editor, el que se ejecute JavaScript fuera del navegador hace que podamos acceder a informacion sobre nuestra computadora, por lo que podremos tener procesamiento de archivos como audio o video, crear herramientas de automatizacion, aplicaciones de escritorio como este mismo editor, bots y procesamiento de datos, incluso se puede usar para inteligencia artificial, por todo esto es que a pesar de que JavaScript puede llegar a ser menos seguro o menos optimo que otros lenguajes de programacion, genero una comunidad bastante grande, se ha creado TypeScript para mejorar la seguridad en la creacion de codigo con JavaScript, hay una cantidad muy grande de codigo de otras personas para no tener que crear desde cero todo, y tambien es muy versatil para lo muchisimas cosas. Para utilizar Node.js primero hay que instalarlo, asi que aqui les dejare el enlace de la instalacion: Instalacion Node.js
La instalacion es bastante sencilla, una recomendacion es que en la pagina de descarga hay diferentes versiones, una recomendada es la que tengan LTS en son a las que le daran soporte durante mucho tiempo que puede ser de varios años, y abajo instalar el prebuilt, o lo que seria su archivo ejecutable para instalar una aplicacion, y cuando ya obtienes el ejecutable solo es de darle a siguiente todo el rato hasta que lo instales, para saber si tienes instaladoNode.js tendras que abrir un cmd, para presionaran la tecla window, o le daran click al icono window abajo a la izquierda en la cinta de opciones de su computadora, y en la barra de busqueda escribiran cmd, que les puede aparecer como "simbolo del sistema" al abrir el cmd deberan escribir: node -v lo que les deberia mostrar la version de node que se haya instalado, tambien deberan ejecutar: npm -v que es una herramienta para instalar diferentes paquetes que utilizaremos en el curso.
npm significaria Node package manager, que traducido seria un gestor de paquetes de node, que como ya dijimos sirve para instalar paquetes que puede ser codigo de otras personas, librerias para integrar nuevas funcionalidades, incluso express.js que se define como un framework minimalista, son nombres nuevos pero veremos que es express, que nos ayudara a crear nuestra API.
en JavaScript podemos trabajar con mas de un archivo que maneje logica, esto nos permite crear variables, funciones y otras cosas mas que podremos usar desde cualquier otro archivo de JavaScript, trabajar de esta forma es comun y una buena practica en general, y existen dos maneras de trabajar con diferentes archivos que tengan logica, una es clasica que es de commonJS y otra forma moderna y recomendada es la de ESM, la forma clasica fue diseñada especificamente para Node.js, por lo que si lo usan en el navegador seguramente les aparezca un error, esta forma clasica utiliza las palabras exports y require, la version mas moderna fue introducida para que fuera compatible con los navegadores y utiliza las palabras import y export, pero esta no esta diseñada para utilizarse directamente en una pagina web, hay que generar lo que se llama un "cliente", si usamos modulos con HTML y Javascript y lo ejecutamos en el navegador en la consola veran que les mostrara un error y una palabra "CORS" ya que los navegadores implementan esto como una medida de seguridad y es por eso que utilizamos Node.js, aunque nosotros no lo haremos en el navegador, no haremos lo que es un "servidor local", lo utilizaremos en el propio entorno de Node.js con la consola, por lo que aprovechare para introducirlos a como trabajar con Node.
en una carpeta aparte, llamenla Node, creen un archivo de JavaScript, ya que no sera en el navegador no necesitaremos ningun archivo HTML, lleven y suelten la carpeta adentro del editor, y por ultimo escribiran adentro de su archivo creado lo siguiente.
console.log("hola mundo");
para poder ejecutar el codigo tendran que ejecutarlo en la terminal de comandos que lo pueden hacer desde el editor de codigo con un atajo de teclado, el comando es: "CTRL + `" la tecla control seguido de la tecla de comilla invertida o template string, esto les abrira una pestaña. que si se confunden que me ha pasado y he colocado la tecla control seguido de la tecla "+" esto les agrandara la pantalla, solo tendran que usar otra vez control mas la tecla "-" para achicarla, ya que estan en la terminal habran varias cosas, pero no explicare todo, solo los iconos de la derecha en su pestaña de terminal en la parte de arriba, que son la equis para ocultar la pestaña. una flecha hacia arriba o "^" para agrandar la pestaña. hay tres puntos con diferentes opciones que no explicare una por una asi que seguiremos con mas iconos, un bote de basura que es si colocamos el cursor encima veremos que dice kill terminal que es para finalizar lo que este haciendo la terminal, en caso de que generemos un loop infinito por accidente podemos finalizar lo que se este ejecutando, un icono de un dos rectangulos que es para tener dos terminales en la misma vista de la pestaña y a su derecha en la pestaña generara dos iconos para eliminar las terminales que no necesiten, y un signo mas con una flechita hacia abajo, esto es por que tienen cmd, o powershell para ejecutar comandos de terminal y podran elegir uno de ellos, o no querer una terminal que este en la misma vista, hasta ahi terminare la explicacion acerca de esta pestaña. Ahora si retomando lo de la ejecucion de su programa, solo tendran que escribir la palabra node, espacio y el nombre de su archivo, y deberian ver en la consola su mensaje, si soltaron su carpeta en el editor este los situa en esa ruta, pero si tu codigo esta en otra carpeta pueden usar rutas relativas como node ../app.js o ./codigo/app.js o cambiarse de carpeta, que pueden hacerlo con cd, que no se la traduccion literal pero lo entiendo como change directory o cambio de directorio, cd ../ que te llevara una carpeta atras o ya conocen las rutas relativas, lo pueden repasar.
ahora que ya sabemos como ejecutar codigo con node veremos unos ejemplos trabajando con codigo de JavaScript en diferentes archivos
function sumar(a,b){ console.log(a + b); } module.exports = sumar;
const sum = require("./exportar.js"); sum(12,3);
al ejecutar el archivo importar.js veremos que nos ha ejecutado la funcion que creamos en exportar.js y esta es la manera de trabajar con diferentes archivos, como vemos estamos guardando la funcion que nos devuelve en la variable sum, por lo que podremos usarla aunque no con el nombre exacto de la funcion, pero esto cambia cuando queremos importar mas de una funcion o otra cosa que queramos exportar para usarlo en otro archivo, y se intuye que adentro del require ira la ruta al archivo donde exportaremos estas funciones.
const suma = (a,b) => a + b; const resta = (a,b) => a - b; const multiplicacion = (a,b) => a * b; module.exports = {suma, resta, multiplicacion};
const { suma: sum, resta: rest, multiplicacion: mult } = require('./exportar.js'); console.log(sum(1,2)); console.log(rest(1,2)); console.log(mult(1,2));
entre llaves se colocan las funciones que se quieran usar, pero a diferencia del anterior, en este caso hay que colocar el nombre exacto de la funcion { suma, resta, multiplicacion } ya que en otro caso no funcionara, los dos puntos es para ponerle un alias, tenemos una funcion con un nombre largo pero le podemos poner un nombre corto para ser mas agil, { suma: s }, tambien otra forma es reasignarlas a otra variable como por ejemplo.
const Funciones = require('./funciones'); const s = Funciones.sumar; console.log(s(2,3));
por defecto node usa commonJS, por lo que tendran que abrir la terminal, verificar que esten en la carpeta de su proyecto, y por ultimo ejecutar el siguiente comando npm init -y esto le creara un archivo llamado package.json que sirve para gestionar los paquetes, deberan agregar esta a su archivo .json "type": "module" ejemplo:
{ "name": "prueba", "version": "1.0.0", "main": "metodos.js", "type": "module", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "description": "" }
este es un ejemplo, no lo copien y lo peguen
function saludo() { console.log("hola") } export default saludo;
import saludo from "./export.js"; saludo();
se utiliza export default cuando solo queremos exportar una sola cosa, por lo que al importarla podemos usar el nombre que querramos "import s from './s.js'"
export const suma = (a,b) => a + b; export const resta = (a,b) => a - b; /* const suma = (a,b) => a + b; const resta = (a,b) => a - b; export {suma, resta} */
hay dos formas de exportar mas de una funcion y una esta comentada ya que ambas funcionan, tanto colocando export antes de la funcion como exportandolo como en un objeto
import { suma as sum, resta as rest } from './export.js'; console.log(sum(1,2)); console.log(rest(1,2));'
tambien aqui hay que usar el nombre correcto de la funcion, si se le quiere agregar un nombre mas corto como alias se utiliza la palabra "as", todo esto se puede entender como importar {/*funciones*/} desde "lugar", y con eso terminaria esta parte de modulos.
Se define como un framework minimalista, que significa que nos va a permitir simplificar el desarrollo de aplicaciones web y APIs, es muy personalizable y es lo que utilizaremos, aunque no abarcare mucho en adelante ya que lo que para mi era lo mas importante era que llegaran hasta aqui conociendo JavaScript, veremos asincronia, aprenderemos a como podemos leer archivos, y por ultimo crearemos nuestra API.
La asincronia sirve para evitar que nuestra aplicacion no se bloquee completamente, aunque Node.js tenga un fuerte enfasis en eventos y asincronia, estos dos temas son mas propios del lenguaje JavaScript, con el ejemplo de una peticion, para leer un archivo, eso se deja para que la computadora lo devuelva, realmente no sabemos cuanto tiempo se tardara la computadora en devolvernos el archivo, durante ese lapso de tiempo nuestro programa se estaria pausando totalmente, pero tambien nuestro programa tiene que esperar a que se devuelva el archivo, si no lo espera no devolvera nada aunque el archivo exista, y nos devolvera undefined. Se puede tener asincronia de diferentes formas, con callbacks, con promesas y con async await, aunque la forma mas recurrente es usando async await, para comprender bien esto debemos ir a los temas anteriores, ya que las promesas enrealidad son callbacks, y async await son enrealidad promesas, para que me entiendan mejor les dare un ejemplo mas visual:
'use strict' function salida(mensaje) { console.log(`${mensaje}`); } salida("primera peticion"); salida("segunda peticion"); salida("tercera peticion");
un ejemplo simple sin asincronia (sincrono), se mostraran en consola de forma secuencial, hay algo llamado "call stack", el call stack preguntara si hay alguna funcion que deba ejecutarse, si lo hay, entrara al call stack, se ejecutara, y saldra del call stack, en este caso se veria algo como:
Callstack:
este es el normal que todos hemos trabajado hasta ahora, donde lo ejecutara en orden cada uno, el problema esque aqui estamos simulando peticiones, pero si esas fuesen peticiones reales nos devolverian undefined por que no esta esperando a que nos devuelva algo, asi que veremos como solucionar esto con las diferentes formas de asincronia.
peticion1: (entra)->(se ejecuta)->(sale del call stack)
peticion2: (entra)->(se ejecuta)->(sale del call stack)
peticion3: (entra)->(se ejecuta)->(sale del call stack)
los callback o funciones que se pasan por parametro nos permiten tener asincronia, es complicado explicarlo asi que lo veremos con un ejemplo.
este es un texto para leer
'use strict'; import fs from 'node:fs'; function tareaIntermedia() { console.log("haciendo algun proceso...") } function leerArchivoAsincono(nombreArchivo, callback) { console.log(`intentando leer el archivo ${nombreArchivo}`); fs.readFile(nombreArchivo, 'utf8', (err, data) => { // si hay un error al leer el archivo if(err) { console.error(`error al leer el archivo '${nombreArchivo}: `, err.message); callback(err, null); return; } // si la lectura fue exitosa console.log(`lectura del archivo ${nombreArchivo} exitosa`); callback(null, data); }); } function manejarContenido(err, data) { if (err) { console.log('no se pudo procesar el contenido del archivo'); } else { console.log('\ncontenido del archivo'); console.log(data); } } tareaIntermedia(); // leemos el archivo leerArchivoAsincono('archivo.txt', manejarContenido); tareaIntermedia();
intentare explicarles cuidadosamente todo, import fs rom 'node:fs' es un modulo nativo de Node.js que nos permite trabajar con archivos, leer, escribir, crear archivos o carpetas, entre muchos otros, se puede importar desde 'fs' pero esta bien indicar que es un modulo nativo de node con 'node:fs', creamos tres funciones, la primera es una funcion que simulara otros procesos en el transcurso de la lectura, otro que sera nuestra funcion que leera el archivo, y el callback que se ejecutara cuando termine de leer el archivo, nuestra funcion callback manejarContenido(err, data) si err existe, si le pasamos el paremetro de err cuando llamemos a la funcion solo ejecutara el console.log() con el mensaje que no pudo leer el archivo, en caso contrario nos mostrara el contenido del archivo, fs.readFile(); es el que nos permitira que pueda leer el archivo, para este programa podriamos solo usar .readFile() para que nos devuelva el texto del archivo de texto, pero el utilizarlo de esta forma nos permite una funcion mas util que puede aplicarse para leer otros archivos de texto, y podemos ver de mejor manera como es que se trabaja el callback, .readFile() recibe tres parametros, el primer parametro es el nombre del archivo, el segundo parametro es la codificacion, que para texto normal el utf8, que solo quiere decir que nos devolvera texto normal, el tercer parametro es el callback, una funcion flecha anonima que tiene dos parametros, pero en ningun momento nosotros le tenemos que pasar el valor de esos parametros, eso nos lo devolvera .readFile(), ya sea que no encuentre el archivo o que si lo encuentre, cuando ya tenga algo que devolver entonces llamara a la funcion callback y le devolvera por medio de los parametros, nosotros creamos un callback para funcion, que realmente podemos quitarlo y manejar nosotros adentro del callback que ya esta en .readFile() si hay algun error o si hay un resultado exitoso, pero este callback extra nos muestra algo importante, como es que .readFile() maneja el callback, el primer parametro es el error y el segundo son los datos en caso de que todo salga bien, el error es el primer parametro ya que nos obliga a colocarlo para manejar el error, si fuese el segundo parametro podriamos no colocarlo y seria una mala practica, en la funcion callback de .readFile() llamamos a la funcion callback que creamos afuera, if (err), si al finalizar no encontro un archivo con el nombre que le indicamos nos devolvera un error, osea que nos devolvera el primer parametro y el segundo lo dejara vacio, porque no encontro nada que puediera leer, por lo que en la condicion de if (err) nosotros llamamos a la funcion que creamos afuera, con los parametros callback(err,null); el primer parametro con un error y el segundo vacio que nos muestra como llamaria la funcion en caso de un error, y si no hay error se llama al la funcion de esta forma: callback(null,data); y asi vemos como es que maneja el callback .readFile(), por lo que tenemos sincronia, aunque solo hemos visto como funciona el ejemplo, pero veremos un ejemplo mas para que terminen de captar la idea y el porque es tan importante.
'use strict'; import fs from 'node:fs'; function tareaIntermedia() { console.log("haciendo algun proceso...") } tareaIntermedia(); fs.readFile('./archivo.txt', 'utf8', (err, data) => { // si hay un error al leer el archivo if(err) { console.error(`error al leer el archivo: `, err.message); return; } // si la lectura fue exitosa console.log(`lectura del archivo exitosa`); console.log(data) }); tareaIntermedia();
es lo mismo pero quitando las funciones extra que creamos, intentara leer archivo.txt y como ya conocemos de rutas relativas tambien las podemos usar para indicar donde esta el archivo en caso de que lo querramos (./archivo.txt), mucho mas pequeño y facil de leer, aun asi tareaIntermedia sigue ahi que nos mostrara mas acerca de la asincronia, y es que si ejecutamos el programa podremos ver algo como:
haciendo algun proceso...
algo que no tiene mucho sentido a simple vista, ya que primero se llama a tareaIntermedia() luego se llama al metodo para que nos muestre el archivo en consola, y luego volvemos a llamar a tareaIntermedia, y es que es debido a que la asincronia es no bloqueante, no va a bloquear el flujo de nuestro programa, ya que hay que esperar a que nos devuelva un resultado que es el texto de nuestro archivo, pero si fuera sincrono tendria que esperar el resultado, pero no ejecutaria nada mas, nuestro programa entero esta pausado mientras espera, no puede hacer nada mas, si tarda dos segudos en responder son dos segundos en que nuestro programa pudo haber hecho algo mientras tanto, pero sin embargo solo espero, y se veria algo asi:
haciendo algun proceso...
lectura de archivo exitosa
este es un texto para leer
Callstack:
todo ese tiempo que espero el programa no es que no pudiera ejecutar mas cosas, solo que esta esperando, por esto la asincronia es no bloqueante, lo que hara es reprogramar a la funcion para que se ejecute cuando ya este libre, con sincrono el callstack no ejecutara mas funciones hasta que este listo, con asincrono el callstack lo reprogramara para despues, pudiendo ejecutar mas funciones, y cuando este lista la peticion ahi la ejecutara.
tarea1: (entra)->(se ejecuta)->(sale)
peticion: (espera que devuelva algo)->(entra)->(se ejecuta)->(sale)
tarea2: (entra)->(se ejecuta)->(sale)
Callstack:
de esta forma podemos tener asincronia, una funcion que se ejecuta cuando ya este lista la peticion, pero los callbacks pueden llevar a lo que se llama como callbacks hell, donde pueden haber callbacks adetro de otros callbacks anidandose y haciendo que nuestro programa sea tan ilegible que ni nosotros mismos que lo creamos sepamos ya como funciona, es por eso que existen las promesas.
tarea1: (entra)->(se ejecuta)->(sale)
peticion: (lo reprograma hasta que este listo)
tarea2: (entra)->(se ejecuta)->(sale)
peticion lista: (entra)->(se ejecuta)->(sale)
las promesas en su interior son callbacks, son dos callbacks, uno es para manejar en caso de que todo haya salido bien, el otro callback se utiliza para manejar en el caso de que haya ocurrido algun error, ejemplo:
'use strict'; import fs from 'node:fs'; function leerArchivoPromesa(path, encoding) { return new Promise((resolve, reject) => { fs.readFile(path, encoding, (err, data) => { if (err) { reject(err); } else { resolve(data); } }); }); } leerArchivoPromesa('./archivo.txt', 'utf8') .then( data => console.log('contenido:', data)) .catch( err => console.error('error:', err.message))
llamamos a "new Promise" para poder usar las promesas en nuestro programa, Promise recibira un callback como parametro, y ese callback tambien recibe como parametro otros dos callbacks (resolve, reject) => {}, resolve es un callback que se ejecutara en caso de haber un resultado exitoso, o como en el programa, nosotros deberiamos usarlo en caso de un resultado exitoso pasandole los datos, y reject otro callback para manejar el error, leerArchivoPromesa() retorna una promesa, este Promise es enrealidad un objeto, es por eso que al final se llama a metodos con "." otra forma muy comun de ver los parametros es (res, rej) => {}, el resultado ya sea buena o mala tendremos que "consumir" la promesa, que solo quiere decir que vamos a decir que haremos en caso de el resultado sea exitoso llamando al metodo .then(), y tambien podemos manejar el error llamando al metodo .catch(), .then() recibe como parametro una funcion y nos devuelve los datos para que nosotros lo manejemos, al igual pasa con .catch() pero aqui le pasaremos la funcion que definira lo que hara en caso de que haya ocurrido un error, si no se resuelve la promesa se quedara pending, que es que se le ha llamado pero nunca se la he dicho que hacer cuando se resuelva, es otra manera de tener asincronia mucho mas limpio que con callbacks pero hay una manera aun mejor de tener asincronia, que es usando async await.
y esque async/await en su interior utiliza promesas, pero es muchisimo mejor al ser mas legible que los anteriores, el mejor para trabajar con asincronia de manera limpia, es lo que se le llama "sugar syntax" o azucar sintactico, lo que significa que estamos escribiendo el codigo con promesas pero esto se esconde para tener un codigo mas legible, para usar asincronia con async/wait lo que se utilizaba era envolver la peticion en una funcion que tuviera el nombre async, y usar await en la linea de codigo donde se espera retornar el valor de manera asincrona, aunque es mejor si lo vemos con un ejemplo:
'use strict'; import fs from 'node:fs/promises'; async function leerArchivo(path, encoding) { const data = await fs.readFile(path, encoding); console.log(data); } leerArchivo('./archivo.txt', 'utf8');
para usar async/await con fs, hay que usar el modulo 'fs/promises', se usa la palabra "async" antes de una funcion, y se fs.readFile() es donde se trabajara de manera asincrina, asi que esperara a que se resuelva y nos devolvera algo, con el modulo 'fs' no se podria hacer esto debido a que 'fs/promise' fue un modulo agregado para modernizarse y tener esta caracteristica, y habia comentado que async/await utilizaba promesas, asi que en la llamada a la funcion leerArchivo() aun nosotros podremos usar el metodo .then() pero esto no tendria mucho sentido, ya que async/await se encargan de "desenvolver" estas promesas, si await resolvio todo bien el programa seguira funcionando, con una sintaxis parecida al sincrono, pero si await falla nos lanzara un error, pero eso es malo, si nos lanza un error lo que hara el programa sera detener su ejecucion, por lo que hay que manejar el error, y eso es usando try/catch, antes de ver try/catch veremos un ejemplo de otra forma de asincronia con await, sin async, y es que hace tiempo que node.js permite que se pueda esperar algo de manera asincrona sin tener que envolverlo en una funcion async, ejemplo:
'use strict'; import fs from 'node:fs/promises'; data = await fs.promises.readFile('./archivo.txt', 'utf8'); console.log(data);
mucho mas limpio, mucho mas claro, y con poquisimas lineas de codigo, pero aun esta el problema de que tenemos que manejar el error, el que nuestro programa se detenga es un error demasiado grande para proyectos serios, y hay que usar los bloques try/catch
los bloques try catch nos ayudan como ya dijimos a manejar errores, y lo podran ver con esta sintaxis "try {} catch (e) {}" se utilizan en donde se sepa que algo puede romperse en nuestra aplicacion, esa parte del codigo donde creamos que pueda surgir un error, eso iria en el bloque try {}, y en el bloque catch iria como nosotros manejariamos el error, lleva () ya que nos devolvera informacion sobre el error en forma de objeto "catch (e) {}", por ultimo esta finally que es un bloque de codigo opcional quees como el else en condicionales, se utiliza ya sea que el codigo dio error como si se resolvio e iria al final de todo con esta sintaxis "finally {}", el ejemplo con codigo seria algo asi:
'use strict'; import fs from 'node:fs/promises'; async function leerArchivo(path, encoding) { try { const data = await fs.readFile(path, encoding); console.log(data);; } catch (err) { console.error('error:', err.message); } } leerArchivo('./archivo.txt', 'utf8');
y asi terminariamos con la parte de asincronia, si lo comparamos con el primer ejemplo el cambio es muy grande, ahora no solo saben usar asincronia si no que tambien saben como funciona, ya estan llegando a los tramos finales, y lo mejor es que tanto el manejar errores, como tambien asincronia son conceptos que se pueden ver en otros lenguajes de programacion.
significa JavaScript Object Notacion, esto se podria traducir como Notacion de Objetos de JavaScript, pero enrealidad esto no es unico de JavaScript, solo usa una sintaxis que parece a la de un objeto en JavaScript y de ahi su nombre, y ya lo habran visto cuando usaron el npm init -y que nos creara un package.json que contiene configuraciones del proyecto tambien nos mostrara lo que hayamos añadido con npm, como por ejemplo npm install express que se encargara de instalar todo lo necesario para que tengamos express instalado y podamos utilizarlo para nuestro proyecto, importante que es una instalacion por proyecto, no se aplicara para multiples proyectos, y les mostrare un ejemplo tanto de package.json como de un json normal, que nos servira para guardar informacion, que tambien es utilizado para configuraciones, como este editor de codigo donde al principio del curso les di una configuracion en formato JSON.
{ "name": "api-rest", "version": "1.0.0", "main": "app.js", "type": "module", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node app.js" }, "keywords": [], "author": "", "license": "ISC", "description": "", "dependencies": { "cors": "2.8.5", "express": "5.1.0", "zod": "3.24.3" } }
es una configuracion de un proyecto que yo hice, donde tiene el "type": "module" para las importaciones recomendadas, la version de mi propio proyecto, y en "scripts" en "start": "node app.js" contiene el script que yo utilizaria para iniciar el proyecto, en mi terminal escribiria npm run dev esto ejecutaria el comando para inicializar mi proyecto, que puede ser una mejor en un proyecto grande, y "dependencies que nos indican las dependencias que hayamos instalado con npm install que son cors, express y zod, que utilizaremos express para crear nuestra API
{ { "id": 1, "title": "The Last Stand", "year": 2015, "director": "John Smith", "duration": 120, "poster": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBJFQ3wCKVi_RSOPndOQyvO-6yooAIb1rScQ&s", "genre": ["Action"], "rate": 7.5 }, { "id": 2, "title": "Love in the City", "year": 2018, "director": "Emily Johnson", "duration": 95, "poster": "https://postercinema.eu/cdn/shop/files/daedosiui-salangbeob_o6kitvl9.jpg?v=1728415438", "genre": ["Romance"], "rate": 6.8 } }
guardamos como si fuese un objeto en JavaScript peliculas de manera estructurada, pero si desde nuestro proyecto, leemos el archivo no lo podremos usr como un objeto, ya que es considerado como texto, que se ha hecho asi aproposito, es mejor que se pueda mandar eso a manera de texto, por lo que en nuestro programa tendremos que "parsearlo", que significa que en nuestro programa lo utilizaremos como un objeto por lo que hay que convertirlo, y cuando nosotros mandemos un json, lo deberemos mandar como texto.
una API es un comunicador entre aplicaciones, estos se suelen usar para conectar una pagina web con una base de datos, ya que la API nos devolvera un JSON, que es algo que nosotros en una pagina web lo podemos llegar a manejar mejor por su forma organizada de almacenar los datos, una API lo que hara es abstraer lo que hay por detras, te lo van a ocultar dicho de otra forma, ya que no necesitas conocer toda la estructura de la API, solo gregar la nueva funcionalidad, es por eso que se trabaja con JSON, tu recibes un JSON, ero por detras se esta trabajando con bases de datos, servicios complejos, haciendo que tu trabajo sea mas facil, muchas cosas son API porque te esconden todo esta parte interna, pero que es una herramienta para tu trabajo como async/await. Para poder crear nuestra API debemos crear un servidor, y usaremos express.js para esto.
crearemos nuestro propio servidor con express.js, en una carpeta crearemos un archivo app.js y lo llevaremos al editor de codigo, en la terminal crearemos el package.json con npm init -y y luego instalaremos express con npm install express cuando termine veran que se ha creado en su carpeta algo llamado node_modules que no hay que tocarlos, manipularlos, son solo para desarrollo, contiene las dependencias para que podamos trabajar con en este caso express o alguna otra herramienta que necesitemos, importante que debemos agregar "type": "module" a nuestro package.json para que podamos usar import/export, y en nuestro proyecto solo tendremos que importar express y escribir lo siguiente
'use strict'; import express from 'express'; const app = express(); const PORT = process.env.PORT ?? 3000; app.get('/', (req, res) => { res.send("hello world"); }); app.listen(PORT, () => { console.log(`Servidor corriendo en http://localhost:${PORT}`); });
y listo, solo hay que usar node app.js, veran que cuando lo ejecuten eso seguira estando, esto es por que es un servidor local, lo que quiere decir que no lo podra usar alguien afuera, solo lo podremos ver nosotros desde para usarlo desde nuestro proyecto, y para verlo, nosotros creamos una variable PORT, en esa variable le indicamos el puerto donde esta corriendo, por lo que en el navegador solo tendriamos que poner un http://localhost:3000/ o gracias a visual studio code podemos ir directamente presionando "CTRL" mientras nuestro cursor esta en el link que esta en la terminal, nuestro cursor cambara a ser una manita y con solo darle click nos llevara directamente.
esto se puede mejorar mucho mas para que lea un JSON y lo devuelva y hay muchas cosas que no explique porque este es unn curso mas que nada de JavaScript, esta es la parte final del curso, ahora que ya sabe todo esto, pueden crear sus propias aplicaciones de consola que les haga mas facil el realizar operaciones, pueden configurar el IDE ya que conocen JSON, y explorar mucho mas del lenguaje ya que hay cosas que no llegue a ver del lenguaje como el objeto Date() que nos devuelve la fecha, programacion orientada a objetos mas alla de los metodos y propiedades estaticas, para cosas que pueden seguir aprendiendo es aprender TypeScript que es JavaScript pero con esteroides, tambien tecnologias web con HTML y CSS que pueden hacer cosas como crear paginas web, crear extensiones para el navegador, crear extensiones para este mismo editor, "slides" que es una pagina que nos puede ayudar a crear presentaciones como un powerpoint pero mejorado que usa reveal.js que es un framework de JavaScript y asuman que todo lo que tenga ".js" sera un framework de JvaScript, entre otras cosas, seguir viendo Node.js y poder llevar a JavScript mas alla de las tecnologias web, como el mismo express para API o REST API, tambien se pueden crear aplicaciones para el escritorio con "Electron" otro framework de JavaScript que este mismo IDE visual studio code utilizo electron para crear la aplicacion, tambien otra cosa que se puede llegar a hacer con JavaScript son videojuegos que pueden funcionar tanto dentro como fuera del navegador ya que existen motores de videojuegos o frameworks para esto, y entre otra de las cosas que puede hacer este lenguaje es crear aplicaciones moviles usando "ionic" que usa tecnologias web con frameworks de JavaScript para la web, por lo que si conoces estas tecnologias podras crear tus propias aplicaciones de celular, e incluso machine learning(inteligencia artificial) con tensorflow.js, asi que podria hablar tanto del lenguaje que no acabaria nunca pero mucho de lo que les enseñe lo podran aplicar en cualquier futuro proyecto que tengan, si llegaste hasta aqui debo felicitarte por tan gran esfuerzo que le has puesto al aprender, espero que esto pueda abrirte la curiosidad a seguir aprendiendo, ya que la programacion es una herramienta, que considero que es la mejor herramienta que ha existido gracias a que con ella podemos crear todo lo que podamos imaginar y mas.