Mostrando entradas con la etiqueta Javascript. Mostrar todas las entradas
Mostrando entradas con la etiqueta Javascript. Mostrar todas las entradas

domingo, 11 de junio de 2023

Handling 404 Errors in Express.js

 Introduction:

Handling 404 errors is an essential part of building web applications with Express.js. When a requested resource is not found, it's important to provide a meaningful response to the client. In this blog post, we'll explore how to handle 404 errors and return JSON responses using Express.js.


Setting up the Express Application:

Before we dive into error handling, let's set up a basic Express.js application:




const express = require('express');
const app = express();

// Your existing routes here...

// Middleware for handling 404 errors
app.use(function(req, res, next) {
  res.status(404).json({ error: 'Page not found' });
});

// Start the server
app.listen(3000, function() {
  console.log('Server started on port 3000');
});



Handling 404 Errors:

To handle 404 errors, we can use the built-in middleware app.use to capture all requests that do not match any existing routes. Here's an example of how we can achieve this:




app.use(function(req, res, next) {
    res.status(404).json({ error: 'Page not found' });
  });


In this example, the middleware is added after defining all your existing routes. When none of those routes match a request, the middleware will execute and return a JSON response with a 404 status code and an error message indicating that the page was not found.


Customizing the Error Response:

You can customize the JSON response according to your needs. Feel free to add additional properties to the JSON object, such as an error code or a more detailed description of the error.


Conclusion:

Handling 404 errors is crucial for providing a good user experience in web applications. With Express.js, it's straightforward to handle these errors and return JSON responses. By following the steps outlined in this blog post, you'll be able to ensure that your application gracefully handles 404 errors and communicates them effectively to the client.


Remember to place the 404 error handling middleware after all your existing routes in your Express application.

miércoles, 11 de agosto de 2021

JavaScript.- Funciones.

 ¿Que es una función?


Iniciemos con 2 primicias básicas.

-Nos sirven para empaquetar código.

-Nos permiten utilizar este código donde y las veces que lo necesitemos.

Sintaxis básica y ejemplo


-Utilizamos la palabra reservada function
-le ponemos un nombre 
-Paréntesis ().- los cuales pueden recibir parámetros
-Corchete {} Código que guardara nuestra función  


function Nombre_Funcion (){

    console.log("Instruccion guardada")

}


Vamos a notar que al recargar nuestra pagina , la instrucción (console.log) no se ejecuta.

Recordemos ; Una función guarda código , mas no la ejecuta.

Invocar/Ejecutar una Función


Para ejecutar nuestra función ,simplemente debemos escribir su nombre ,seguido de paréntesis ()


Nombre_Funcion();


Código completo


function Nombre_Funcion (){

    console.log("Instruccion guardada")

}

Nombre_Funcion();




Bien hasta el momento , Probemos 2 cosas mas 

1) Escribiremos mas instrucciones en nuestro empaquetado


function Nombre_Funcion (){

    console.log("Instruccion guardada")
    console.log("podemos escribir")
    console.log("la cantidad de instrucciones")
    console.log("que queramos")

}

Nombre_Funcion();



2) Voy a invocar 2 veces nuestra función.


function Nombre_Funcion (){

    console.log("Instruccion guardada")
    console.log("podemos escribir")
    console.log("la cantidad de instrucciones")
    console.log("que queramos")

}

Nombre_Funcion(); 
Nombre_Funcion(); 





Todo bien hasta este momento

Recapitulemos 

Las funciones nos permiten empaquetar codigo/Instrucciones , que podemos invocar donde queramos, y las veces que queramos con tan solo escribir su nombre()

lo cual nos da un código mas legible , fácil de ordenar y reutilizable, lo que significa un código mas simplificado.

Funciones con parámetros


Un parámetro es una variable de tipo local (Que solo funciona dentro de la función). la cual recibe su valor en la invocación , vayamos al ejemplo.


function Nombre_Funcion (parametro_1){

    console.log(`Buena dia ${parametro_1}`)
    
}

Nombre_Funcion("carlos"); 




Recordatorio ; No se pueden usar los parámetros definidos fuera de la función (tienen un alcance solo local) 


function Nombre_Funcion (parametro_1){

    console.log(`Buena dia ${parametro_1}`)
    
}

Nombre_Funcion("carlos"); 

console.log(parametro_1) //Error


Escribir mas de 1 parámetro.


Podemos escribir tantos parámetros que necesitemos, tan solo en la construcción de la función, hay que separarlos por comas , y al invocarla sus valores también separarlas por comas , estas recibirán sus valores en el orden escrito

Ejemplo


function Nombre_Funcion (par_1,par_2,par_3){

console.log(`Soy ${par_1} tengo ${par_2} monedas de a ${par_3}`)
    
}

Nombre_Funcion("carlos"3 , peso); 

  


Ejemplo 2


function Nombre_Funcion (parametro_1,parametro_2,parametro_3){

    console.log(`Soy ${parametro_1} tengo ${parametro_2} monedas de a ${parametro_3} ` )
    
}

Nombre_Funcion("carlos"3 , "peso"); 
Nombre_Funcion("Erik"2 , "dolar"); 
Nombre_Funcion("Juan"4 , "franco"); 




Poco a poco nos damos cuenta la utilidad de las funciones para automatizar código.

Hemos echo una maquina donde construimos la estructura para solo mandarle datos y recibirlos ya procesados , un ejemplo de esto en la vida real es una calculadora.

hagamos una estructura simple de una calculador que suma 2 números. 


function Calc_Suma (num_1,num_2){

    let suma = num_1 + num_2
    console.log(suma)
}

Calc_Suma(3,4); // 7 
Calc_Suma(1,2); // 3
Calc_Suma(3,2); // 5




Funciona perfectamente , pero.. si no queremos imprimirlo en consola dentro de la función , y si queremos guardar el resultado para usarla mas adelante , y por mas adelante nos referimos a fuera de la función.

Tal como esta , la variable suma no puede usarse ya que su alcance es local 


function Calc_Suma (num_1,num_2){

    let suma = num_1 + num_2
}

Calc_Suma(3,4); // 7 

console.log(suma) // 7





Return


Esta funcionalidad lo que hará será pasar el valor que le escribamos proveniente dentro de nuestra función a nuestra invocación.


function Calc_Suma (num_1,num_2){

   return num_1 + num_2 //Envia valor

}

 Calc_Suma(3,4); //Recibe valor


Procedemos a guardarla en una variable , para poder manipular mas a gusto y en este caso la imprimiremos en consola.


function Calc_Suma (num_1,num_2){

   return num_1 + num_2 // 7

}

 let suma_1 = Calc_Suma(3,4); // 7 

 console.log(suma_1)




Listo , aprendimos a manipular el resultado de nuestra función fuera de esta.

Haremos un ejemplo; crearemos una función para calcular restas e imprimiremos varias

TRATA DE HACERLO SIN VER EL CODIGO...


function Calc_Resta (num_1,num_2){

   return num_1 - num_2 
 
}

 let Resta_1 = Calc_Resta(8,1);  
 let Resta_2 = Calc_Resta(7,2);  
 let Resta_3 = Calc_Resta(9,5);  
 let Resta_4 = Calc_Resta(6,2);  

 console.log(Resta_1)
 console.log(Resta_2)
 console.log(Resta_3)
 console.log(Resta_4)



Conclusión


En este articulo , hemos aprendido lo básico para escribir funciones ,suficiente para seguir avanzando en el curso , iniciar tus primeras practicas e incluso escribir tus primeras aplicaciones web .

A pesar de ser solo lo principal , tienes mucho material de donde practicar y experimentar.


Despedida


Esperemos te haya servido de utilidad este articulo , síguenos en nuestras redes sociales para seguir aprendiendo juntos , compártenos cualquier duda o comentario que te haya surgido , puede ayudarnos a crecer a ambos.

TE DEJAMOS UNA imagen que puedes guardar como apuntes de tu progreso.





viernes, 6 de agosto de 2021

ECMAScript 6.- Desestructuración de Arrays

 




Creación de Array



const persona = ['Erik'27 , 'Mexico'];


   Para llamar un elemento del array debemos hacerlo por índices , luego podemos guardarlo en una variable .

En este caso vamos a imprimirlos en consola, pero los usos pueden ser múltiples.

const persona = ['Erik'27 , 'Mexico'];

const nombre = persona[0]
 const edad = persona[1]
 const pais = persona[2]
 
 console.log(edad)  // 27

Resultado de consola

 En caso de que nuestro array tenga muchos mas elementos o queramos llamarlos múltiples veces en nuestra aplicación , esto se empieza a complicar y dificultar su lectura.

ECMAScript 6 nos permite por medio de la siguiente sintaxis darle un nombre a cada elemento del Array de una forma mas legible.


const persona = ['Erik'27 , 'Mexico'];
 const [nombre,edad,pais] = persona

 console.log(edad)



 
Resultado de consola



¿Que pasa si no queremos nombrar todos los elementos?


-Vamos a dejar sin nombrar el 2do elemento , simplemente dejando su espacio vacío.


const persona = ['Erik'27 , 'Mexico'];
 const [nombre,,pais] = persona
 console.log(pais)




Resultado de consola
-Vamos a dejar sin nombrar el 1er elemento.


const persona = ['Erik'27 , 'Mexico'];
const [ , edad,pais] = persona 
 console.log(pais)



Resultado de consola

Podemos combinar la Desestructuración con el parámetro rest  y con Parámetros por defecto.

La desestructuración también puedes usarse con objetos

Pero eso será cuestión de otros artículos , practica y domina este articulo antes de avanzar.

Despedida


Esperemos te haya servido de utilidad este articulo , síguenos en nuestras redes sociales para seguir aprendiendo juntos , compártenos cualquier duda o comentario que te haya surgido , puede ayudarnos a crecer a ambos.

TE DEJAMOS UNA imagen que puedes guardar como apuntes de tu progreso



jueves, 5 de agosto de 2021

ECMAScript 6.- Desestructuración de Objetos

                                 

Creación de Objeto


const persona = {
    nombre: 'Carlos',
    edad:'27',
    pais:'Mexico'
 }
 

La diferencia vendrá a la hora que necesitamos llamar a las propiedades del objeto


const persona = {
    nombre: 'Carlos',
    edad:'27',
    pais:'Mexico'
 }
 //Antes de Ecma 
console.log(`${persona.nombre} de ${persona.pais}`)


Resultado que devuelve la consola

Si durante nuestra aplicación ,tuviéramos que llamar a las propiedades de este objeto constantemente , necesitamos una opción limpia y rápida.

La desestructuración no es otra cosa que un método rápido de asignar valores en bloque.


//objeto 
const persona = {
    nombre: 'Carlos',
    edad:'27',
    pais:'Mexico'
 }
 
 const {nombre,edad,pais} = persona //desestructuracion
  //Despues de Ecma 
 console.log(`${nombre} de ${pais}`)

Resultado que devuelve la consola

Esta funcionalidad puede aplicarse tanto a arrays y a objetos.

otro uso más común de la desestructuración en JavaScript es cuando estamos programando en Node con paquetes y funciones externas. 

Conclusión

La desestructuración es muy utilizada cuando acedemos mucho a las propiedades de una objeto o un array para tener un código mas limpio y legible.

Despedida


Esperemos te haya servido de utilidad este articulo , síguenos en nuestras redes sociales para seguir aprendiendo juntos , compártenos cualquier duda o comentario que te haya surgido , puede ayudarnos a crecer a ambos.

TE DEJAMOS UNA imagen que puedes guardar como apuntes de tu progreso




miércoles, 4 de agosto de 2021

ECMAScript 6.- Parámetros por defecto.

 

Problema

Tenemos una función que deberá recibir un nombre y un teléfono dentro de sus parámetros , debemos escribirlos en la consola , pero... y si no se envía un teléfono. 

No recibir este dato ,muchas veces nos causa conflicto ya que su valor por defecto seria Undefined .


Solución 

Antes de ECMAScript 6 , teníamos que resolverlo implementando un Condicional..


/Antes de ECMA 6
function Usuario (nombre , Telefono){
    if (!Telefono){
        Telefono = '00000000'
    }
    return `Nombre : ${nombre}, Tel : ${Telefono}`
}
console.log(Usuario('Carlos'));



Con ECMAScript 6 , Al escribir los parámetros que vamos a recibir, podemos escribir un valor por defecto, en caso de no recibir ningún dato .


//Despues de ECMA 6 

function Usuario (nombre , Telefono='00000000'){
    return `Nombre : ${nombre}, Tel : ${Telefono}`
}
console.log(UsuarioECMA6('Carlos')); 


Los valores por defecto nos ahorran mucho código y limpieza en algo que es muy común a la hora de programar , te dejamos un ejemplo todavía mas simplificado y limpio , pero ahora con una función tipo flecha.


const Usuario = (nombre , Telefono='00000000'=> `Nombre : ${nombre}, Tel : ${Telefono}`
console.log(Usuario('Carlos'));


Conclusión


                           Al definir los parámetros a recibir , podemos dejar un valor por defecto 
parametro='valor' 
en caso de que no le llegue uno

Despedida

Esperemos te haya servido de utilidad este articulo , síguenos en nuestras redes sociales para seguir aprendiendo juntos , compártenos cualquier duda o comentario que te haya surgido , puede ayudarnos a crecer a ambos.

TE DEJAMOS UNA imagen que puedes guardar como apuntes de tu progreso



sábado, 31 de julio de 2021

Diferencias entre ECMAScript y JavaScript


                                          

Pareciera que hablamos de lo mismo cierto? , pero hay cierta diferencia ...

 Hagamos una analogía con algo con de lo que estamos un poco mas familiarizados , "un teclado".

Piensa en todos los teclados que has usado alguna vez...

¿Tenían todos casi el mismo orden, las letras en un orden especifico , una barra espaciadora , una tecla Enter, y números ubicados horizontalmente en la parte superior?

Esto es así porque la mayoría de los fabricantes de teclados basan su diseño en el estándar QWERTY

Concepto y Significado de QWERTY » Talleres del PC y mucho Mac
Estos pueden ser de distintos, colores, alámbricos , inalámbricos, bluetooth o mecánicos , pero el orden de las teclas será el mismo ,respetando un estándar "El estándar QWERTY. (imagen arriba)
otro estándar seria AZERTY (imagen abajo) , Notas la diferencia?
Teclado QWERTY y AZERTY - CCM
Con esto en claro , continuemos.

 -ECMAScript es un estándar (lo que en el teclado fue el orden especifico de sus teclas)

-Javascript el modelo que respeta y/o se ajusta a este estándar. 

 Javascript es un modelo (posiblemente el mas popular) que se ajusta a los estándares de ECMAScript , pero no va a ser el único que existe , un par de ejemplos son , JScript y ActionScript

  Esperemos esta pequeña explicación te haya ayudado a aclarar la diferencia entre ambos.

estaremos publicando próximamente contenido sobre la versión mas estable de ECMAScript y sobre el modelo mas popular de este JavaScript 


ECMAScript 6 .- Parametro rest


                                    

 sin el Parámetro rest

Para este ejemplo definiremos una función y le pasaremos varios argumentos, que se guardaran en varios parámetros, e imprimiremos en pantalla


const persona= (nombre,edad,pais,altura,peso,genero=> {
   console.log(nombre,edad,pais,altura,peso,genero);
   }
   persona('Erik',27,'mexico',175,58,'hombre');

Lo que imprime la consola


En muchas ocasiones los argumentos a pasar son muchos mas , y tener que asignarles un parámetro a cada uno, a veces es eterno o teníamos que recurrir a algunos trucos.

  Tenemos una forma de pasar todos los argumentos 

rest

 ...nombredevariable . automáticamente se declarara la variable , y  guardara todos los argumentos que le pasemos en un único parámetro de tipo array. 


const persona= (...datos=> {  // Un solo parametro recibira los argumentos  
   console.log(datos);          // imprimimos un array
   persona('Erik',27,'mexico',175,58,'hombre');

Obtendremos nuestros datos en un array que después podemos utilizar como necesitemos.


Otra circunstancia 


Al primer argumento queremos darle un parámetro propio y todos los demás en un único parámetro rest


const persona= (nombrepersona , ...datos=> {    
   console.log(nombrepersona)
   console.log(datos);          
   }
   persona('Erik',27,'mexico',175,58,'hombre');



Podemos manipular por aparte ahora ambos parámetros.

Conclusión

Conocimos una alternativa a pasar varios argumentos , te recomendamos practicar mucho con diferentes ejemplo.

despedida

Esperemos te haya servido de utilidad este articulo , síguenos en nuestras redes sociales para seguir aprendiendo juntos , compártenos cualquier duda o comentario que te haya surgido , puede ayudarnos a crecer a ambos.

TE DEJAMOS UNA imagen que puedes guardar como apuntes de tu progreso.





viernes, 30 de julio de 2021

JavaScript .- Operadores de Asignación.

 



Explicación Importante

Tenemos ya una variable declarada y a esta variable queremos sumarle un nuevo valor

la lógica hasta ahora nos llevaría hacerlo de la siguiente manera.


let num_1 = 2//declaramos
num_1 = num_1 + 5 ; //le asignamos un nuevo valor
console.log(num_1)  //Mostramos




Pero con el operador += logramos una equivalencia de código 

Ejemplo.

Código JavaScript

let num_1 = 2//declaramos
//A mi variable le sumamos , la variable + el numero indicado
   num_1 += 5 ; //Sumamos 
// num_1 = num_1 + 5 
console.log(num_1)  //Mostramos en consola


Prácticamente al signo = le añadimos un operador aritmético para crear nuevos operadores.

OperadorEjemploEs igual que escribir
=x = yx = y
+=x += yx = x + y
-=x -= yx = x - y
*=x *= yx = x * y
/=x /= yx = x / y
%=x %= yx = x % y

Ejemplos.


Suma (cadenas de texto)


Código JavaScript


let texto = "Apuntes"//declaramos
   texto += "Navarrete" ; //operamos 
   //Es equivalente a escribir
// texto = texto + "Navarrete" 
console.log(texto)  //Mostramos






Resta


Código JavaScript


let num_1 = 9//declaramos
   num_1 -= 2 ; //operamos 
   //Es equivalente a escribir
// num_1 = num_1 - numero 
console.log(num_1)  //Mostramos



Multiplicación

Código JavaScript

let num_1 = 5//declaramos
   num_1 *= 2 ; //operamos 
   //Es equivalente a escribir
// num_1 = num_1 * numero 
console.log(num_1)  //Mostramos




División 

Código JavaScript

let num_1 = 20//declaramos
   num_1 /= 2 ; //operamos 
   //Es equivalente a escribir
// num_1 = num_1 / numero 
console.log(num_1)  //Mostramos



Residuo

Código JavaScript

let num_1 = 19//declaramos
   num_1 %= 2 ; //operamos 
   //Es equivalente a escribir
// num_1 = num_1 % numero 
console.log(num_1)  //Mostramos



Conclusión

Hemos aprendido una nueva forma de operar utilizando el signo =  mas operadores básicos , lo que facilita nuestra escritura de código , que si bien , parece ahorrarnos poco código , en un entorno real , donde has cientos de líneas de código , este ahorra será un gran alivio.

despedida

Esperemos te haya servido de utilidad este articulo , síguenos en nuestras redes sociales para seguir aprendiendo juntos , compártenos cualquier duda o comentario que te haya surgido , puede ayudarnos a crecer a ambos.

TE DEJAMOS UNA imagen que puedes guardar como apuntes de tu progreso.
 







Oxidative Stress and Sports

 Oxidative stress occurs when there is an imbalance in the body between free radicals and antioxidants. Free radicals are molecules with unp...