Sandisk y Western Digital

Calculadora de aras Triangulo, rectángulo y circunferencia con JS

Areas de ...

Ejercicio de representación de areas

En la siguiente práctica he realizado una calculadora de áreas utilizando java Script. Puedes seleccionar la circunferencia, rectángulo o triangulo.

Una vez seleccionado introducir la base y altura o radio. Daremos al boton de calc y nos parece en la parte inferior el área

FORMULAS UTILIZADAS
1. triangulo ==> b*h/2
2. Rectángulo ==> b * h
3. circulo ==> π * r2

FIGURA BASE ALTURA RADIO

Aquí te dejo el código utilizado

Puedes descargar aquí el código desde Git. https://github.com/cvdgp/calculadora-de-areas.git

O verlo desde codePen

See the Pen calculadora áreas by CVDGP (@cvdgp) on CodePen.

Ordenar 3 números dados de menor a mayor

Como calcular el número de posibles permutaciones

¿Que es la permutación?

Las permutaciones son las posibles combinaciones que se pueden realizar con un número de elementos. Cada posible combinación del grupo de elementos será una permutación.

Cómo calcular las diferentes permutaciones

Para calcular las posibles combinaciones de elementos sacaremos el factorial del número de elementos. En nuestro caso estamos buscando las permutaciones de 3 elementos.

3! = 3 * 2 * 1 = 6

Por lo que existen seis posibles combinaciones:

A	B	C
A	C	B
B	A	C
B	C	A
C	A	B
C	B	A

El códgo sería el siguiente

En primer lugar declaramos tres variables, con tres valores aleatorios del 0 al 100. y creamos la variable txt para cargar el texto.

let a =    Math.round(Math.random()*100),
    b =    Math.round(Math.random()*100),
    c =    Math.round(Math.random()*100);
let txt = ``;
                    

Ahora procedemos a realizar la ordenación

if          (a < b && b < c)    txt = ` ${a},  ${b},  ${c}`;
else if     (a < c && c < b)    txt = ` ${a},  ${c},  ${b}`;
else if     (b < a && a < c)    txt = ` ${b},  ${a},  ${c}`;
else if     (b < c && c < a)    txt = ` ${b},  ${c},  ${a}`;
else if     (c < a && a < b)    txt = ` ${c},  ${a},  ${b}`;
else                            txt = ` ${c},  ${b},  ${a}`;
                    

Ya solo queda imprimir en pantalla

document.getElementById("cargadorTexto").textContent = txt;

                    

Resultado

CVDGP
David Giménez Plaza

Sucesión de Fibonacci

La sucesión de Fibonancci fué creada por el matemático Leonardo de Pisa.

Iniciaremos con el número 0 y 1. Crearemos un nuevo termino con la suma de los dos anteriores.
Los primeros 10 términos serán:

1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ...

Al considerar los términos en la sucesión de Fibonacci cuyos valores no superan los cuatro millones, encuentre la suma de los términos de valor par.

a_n=a_n-2+a_n-1

En la siguiente fórmula a es el termino, n será el número del termino.

See the Pen Sucesión de Fibonacci by CVDGP (@cvdgp) on CodePen.

DAVID GIMÉNEZ PLAZA
CVDGP
Dagipa@hotmail.es

26/02/2022

Números divisibles entre 3 y 5

Si enumeramos todos los números naturales debajo de 10 que son múltiplos de 3 o 5, obtenemos 3, 5, 6 y 9. La suma de estos múltiplos es 23.

Encuentra la suma de todos los múltiplos de 3 o 5 por debajo de 1000.

1. Confirmamos si el resto de dividir el número entre 3 y 5 es 0.
2. Si el resto es igual a 0 almacenamos el número.
3. Si el resto es igual a 0 lo sumamos.
4. Imprimimos el sumatorio en un div.
5. Imprimimos los múltiplos de 5 y 3 en divs que se posicionarán uno al lado del otro.

let resultado = 0;
let num =[];
let textoIntroducido = "";
let cargadorTxt     =   document.getElementById("txt");
let resultadoSuma   =   document.getElementById("resultado");
           
           
for(let i = 1 ; i < 1000; i++ ){
     if(i%3 == 0) num.push(i);
     if(i%5 == 0) num.push(i);
}
num.forEach((element)=>{
      resultado += element;
      textoIntroducido += 
      		"<div class=´cargador´>" +
            element + "</div>";
           
}); 
           
resultadoSuma.innerHTML = "La suma de todos los números es:  "  +  resultado;
cargadorTxt.innerHTML =  textoIntroducido;
        

Etiquetas interactivas html5

Cuadros de detalle y etiquetas modales

En el siguiente articulo podemos ver como generar cuadros modales o alertas personalizadas y como realizar acordeones. Antes pare realizar este tipo de efectos eran necesarias varias líneas de css y javaScript. Pero las etiquetas de html5 nos facilitan la labor.

Probablemente solemos subestimar html y la verdad es que a pesar de no ser un lenguaje de programación si no de marcado, puede facilitarnos mucho la vida estar al día de los cambios.

<details>

Es un contenedor que actúa como un acordeón o cuadro desplegable sin tener que programar el css. Cuando tocamos en el icono se desplegará y veremos el resto del articulo. Si deseamos que un acordeón por defecto este abierto cuando cargue la página utilizaremos el atributo open

Para generar un cuadro detalle o acordeón utilizaremos dos etiquetas:

• <details> que sera el contenedor de nuestro acordeón
• <sumary> Sera la parte visible de nuestro acordeón cuando no esté desplegado. Esta etiqueta es un hijo de details y siempre ha de estar encerrada dentro de ella. Por lógica yo la utilizo con un h2 o h3 seguido de un p con un breve resumen del contenido.

<sumary> Titulo visible del details</sumary>

Breve resumen del contenido de nuestro cuadro

Aqui se encuentra el texto oculto que tiene details. Cuando has hecho click he aparecido y si tocas otra vez desapareceré.

¿Cómo hacer una ventana desplegable o acordeón?

Este es nuestro código abrelo tocando en la flecha lateral

       <details>
          <summary><span id="eT_1">Cabecera</summary>
              <p>Aquí se encuentra el texto oculto que tiene details. Cuando has hecho click he aparecido y si tocas otra vez desapareceré.</p>
      </details>

                              

¡Formulario cargado!!!!!!!!!

Ventana emergente creada con etiqueta dialog.

<dialog>

La etiqueta <dialog> puede ser utilizada para crear una ventana modal de validación formulario sin tener que estar peleando con css y javaScript prácticamente. Una ventana modal es una ventana suspendida en el medio de la pantalla o ventan de dialogo.

La interpretación semántica de esta etiqueta es entendida por el navegador como un objeto independiente al body.

En javaScript existe una instrucción conocida de como alert("texto"), esta instrucción se utiliza para crear ventanas de dialogo, pero tiene la desventaja de que no se puede modificar. HTML5 crear la etiqueta dialog para crear ventanas de dialogo propias en las que podemos introducir imágenes, textos, inputs...
Todo esto facilitara la interactividad de nuestra web y ayudará a personalizar nuestros formularios, generar formularios emergentes, validaciones de ok o ko en rellenado de formularios y todo lo que se te pueda ocurrir.

Existen dos métodos que pueden resultar muy utiles close() y show() o showModal(). Como su nombre indica podremos utilizar estos métodos para oculta o mostrar la etiqueta dialog.
Por defecto la etiqueta dialog inicia oculta. En el caso de que deseemos mostrar nuestra etiqueta le incluiremos el tributo open. ( <dialog open>)

Cómo crear una ventana emergente o alert personalizado

      <button onclick="document.getElementById('cargado-ajax').show()">Abrir ventana Modal

                    <dialog id="cargado-ajax" >
                          <h2>¡Formulario cargado!!!!!!!!!</h2>
                                <p> Ventana emergente creada con etiqueta dialog.</p>
                                <button  onclick="document.getElementById('cargado-ajax').close()">cerrar Ventana </button>
                          </dialog>
                    

Diferencian entre forEach , find, map y filter

Existen varias formar de iterar con arrays y en ocasiones todas nos parecen iguales, pero la verdad es que existen pequéños matices entre unos métodos y otros. Según nos interese utilizaremos un método u otro

find

Nos regresará el primer elemento que cumpla los parámetros del callback

let arr = ["David", "Pedro", "juan", "manuel", "David"];

console.log(arr.find((element)=> element.includes("n") ));

/***nos regresa juan que es el primer elemento que contine n****/
                

forEach

Itera por cada uno de los elemento del array ejecuatando una acción pasa por el callback

let arr = ["David", "Pedro", "juan", "manuel", "David"];

arr.forEach((item)=>{
        
          (item.includes("n"))
            ? console.log(item) 
            : console.log(`${item} ......  no contine n`)
                        
});
                  
                

map

Crea un nuevo array en el que carga los datos modificados por el callback

let arr = [7,8,5,41,256,3,6,9,88,774,5,82,3,58];
const arr2 = arr.map(((item)=>item*10));
arr2.forEach((i)=>console.log(i));
                

filter

Crea un nuevo array en el que carga aquellos datos que cumplan la condición pasada por callback

let arr = [7,8,5,41,256,3,6,9,88,774,5,82,3,58];
const arr2 = arr.filter(((item)=>item < 10));
arr2.forEach((i)=>console.log(i));
                

Métodos getter y setter JS

Métodos con getters y setters en JavaScript

¿Que es un método get o set?

Son métodos que utilizaremos para modificar u obtener valores de propiedades de un objeto o clase. Cuando trabajamos con POO(Programación Orientada Objetos) hemos tener en cuenta que cuando una clase tiene una propiedad realizando calculos muy complejos, seria combeniente crear un método para tal función.
Utilizaremos get para obtener el valor de nuestra variable o atributo sin modificar su contenido y set para establecer propiedades pudiendo modificar su contenido. Serán métodos públicos que obtendremos o modificaremos desde una instancia de clase.
Los métodos getters y setters son útiles para encapsular las propiedades. Nos permite acceder a una propiedad de una forma determinada previamente por el programador, sin dejar cabos sueltos a la hora de estas modificaciones.

//utilizamos un generador para hacer un autoincremento de números  y crear un id
  
 function* generatorId(){
  let n = 0;
  while(true) yield n++;
}
 
const id = generatorId();




class doSomeThing{



  constructor(nombre, apellido1, apellido2, fechaNacimiento,contador){ 

  this.contador         = id.next().value;
  this.nombre           = nombre;
  this.apellido1        = apellido1;
  this,apellido2        = apellido2;
  this.fechaNacimiento  = new Date(fechaNacimiento); //obj fehca al que le pasamos una fecha

  }
  
 get impresor(){
   return `
   ID :   ${this.contador}
   ${this.nombre}  
   ${this.apellido1}
   ${this.apellido2}
   ${this.fechaNacimiento}
   `;
 }
 set modificadorNombre(name){
   this.nombre = name;
 }

}
const c = console.log;
const someThing = new doSomeThing("David","Gimenez","Plaza", "1977-17-12");

const someThing2 = new doSomeThing("David","Gimenez","Plaza", "1977-17-12");
const someThing3 = new doSomeThing("Rocio", "Madrigal", "Arias", "1985-15-02");


//utilizamos el setter
someThing3.modificadorNombre = "Maria Rocio";

//utilizamos el getter
c(someThing.impresor);
c(someThing2.impresor);
c(someThing3.impresor);


   

ECMAScript6

ECMAScript6

Que es ECMAScript6 (ES6)

Es la evolucion generada en el años 2015 del lenguaje JavaScript. En 1996 nace Netscap un navegador basado en el lenguaje JavaScript auque en ese momento se llamó LiveScript, pero con el paso de los años cuando java tenia tanta popularidad decidieron llamarlo javaScript nombre que ha perdurado hasta el moemnto.

Igual que W3c se encarga de los estandares web. ECMA International se encarga de los estandares y desarrollo de JavaScript. En su evolución sexta nos ha traido cosas tan interesantes como:

• Template String
• Variables con let y constant con scope a nivel de bloque de código.
• Funciones arrow o flecha
• Parámetros por defecto.
• Desestructuración de arrys u objetos con Destructuring assignment
• Spread Operator (...).
• Clases
• Promesas

Insertar textos con ES6 (template String)

ES6 nos facilita una solución elegante y sencilla para inyectar variables en textos.

Hasta ahora cuando deseavamos crear cadenas de texto e insertarle varialbes necesitavamos hacerlo de la siguiente forma:

1. Insertando el primer fragnmento de texto entre comillas
2. Insertamos un + la variable y otro +
3. Insertamos el siguiente fragmento de texto

Todo esto se complica y mucho cuando entran dentro del texto comillas simples y dobles. Supongo que en muchas ocasiones os habreis enfrentado a rompecabezas con comillas simples, comillas dobles, otra vez simples. Es una locura en ocasiones saber donde se cierran o no unas comillas:

var lista = new Array("uno", "dos", "tres","cuatro", "cinco" );
var options = '';
 for(var i = 0; i < lista.length; i++){
    options += '<option value="'+lista[i] +'" />';
    document.getElementById('ListaD').innerHTML = options;
 }
            

Ahora con ES6 es más sencillo:

1. Abriremos las comillas pero con ` (simbolo situado al lado derecho de la p en el teclado español).
2. Cada vez que deseemos concatenar una variable pondremos el signo $ y en tre corchetes nuesrta varialbe. ${miVar}
3. Ten en cuenta que cuando inyectes un texto con document.write y hagas un enter dentro del template String este lo considerá como un <br> en el texto resultante.)

Este es el jemplo anterior utilizando template string

		
		
		var lista = new Array("uno", "dos", "tres","cuatro", "cinco" );
		var options = '';
 for(var i = 0; i  < lista.length; i ++ ){
    options += `<option value="${lista[i]}" />`;
   
 }
  console.info(options) ;

En el siguiente ejemplo el texto lo inyecté con jquery utilizando append()

  var uno = 1, dos =2, tres =3;
  $(".templateString").append(`Esto es un texto de ES6 utilizando los template String,
  la variable uno es  ${uno},
  la variable dos es  ${dos} y 
  por ultimo en nuestra variable tre el resultado será de ${tres}, asi lo hemos hecho`);

  /***** resultado ****///

Funciones de flecha de JavaScript o arrow

En la version ES6 (ECMAScript 2015), se realizo una evolución de javaScript para la que existen detractores y partidarios las funciones en flecha. Si le pillas el tranquillo es una forma de ahorrarte unas líneas de código cosa que los motores de busqueda te agradecerán, a mayor velocidad de carga con buen contenido, mejor posicionamiento.

Una función tal y como conecmos has ahora se hace utilizando la palabra reservada function, nombrando unos paramatros y crando un código.

    function MiFuncion (param1,param2){

        return param1+param2;
    }
    document.getElementById("Pobadorddd").innerHTML =MiFuncion(1500,200);
                

Con ES6 las funciones pueden simplificarse así

  
        var MyFuncion = (param1 , param2) =>{
        code...
      return param1 + param2;
      }
        
         document.getElementById("Pobadorddd").innerHTML = MyFuncion(1500,200);
   
                

En el caso que una función solo tenga una línea de código podemos evitar porner el return y los corchetes;

  
        var MyFuncion = (param1 , param2) => param1 + param2;
        
         document.getElementById("Pobadorddd").innerHTML = MyFuncion(1500,200);
   
                

Una función anónima sería ásí pondriamos directamente unos parenteris en los que podemos introducir los parametros y la flecha (params)=>:

        
              
              $(document).click(()=>alert("carga"));
        
          

Si no deseamos pasarle parámetros a la función

       var MyFuncion = () => 8900 + 89;

        document.getElementById("Pobadorddd").innerHTML = MyFuncion();
         

Pasar un array a una función de flecha

var miArray = ( miArray1=[1,2,3,4,5,6,7,8,9,10] )=>{
       $("div").append( $("<p></p>"));
    for(let i =0; i< miArray1.length ; i++){
      $("div>p").append(miArray1[i] + "<br>");
    }
}
miArray();
                
            

Funciones flecha anónimas

Para este ejemplo usaremos la función .map creda para modificar arrays. Las funciones flechas cuando actuan como una función anónima se generan así. parámetro => code....

var miArray2=[4,6,9,7,8,6,3,8];

var miArray3= miArray2.map( n => n*2);
$("#dos").after(miArray3[1]);
            

Parametros por defecto

Antes de ES6 caundo declarabamos una función podiamos añadirle una serie de parámetros. Cuando indicabamos que una función tenía un parametro cada vez que la llamavamos tenias que indicar el valor de ese parámetro.

En ECMAScript 6 aparecen los parametros por defecto. Puedes indicarle que un parámetro si no se ha rellmado su valor será uno determinado por defecto cuando se cree.

function myFunction( param1, param2, param3 = "valor por defecto"){
                  code...
                }
                

  function miParamporDefecto(nombre,apellidos,pais="España"){
    return  `mi nombre es ${nombre}, mis apellidos son ${apellidos} y nací en ${pais}`; 
  }
  $(".paramXdefetp").html(miParamporDefecto("David", "Giménez Plaza"));
                    

                  

Tambien lo podemos hacer con una función flecha.

                    
  miParamporDefecto=(nombre,apellidos,pais="España")=>`mi nombre es ${nombre}, mis apellidos son ${apellidos} y nací en ${pais}`; 
  
  document.write (miParamporDefecto("David", "Giménez Plaza"));
                  

Desctructurar arrays u Objetos (Destructuring assignment)

La sintaxis de destructuring assignment es una expresión que hace posible la extracción de datos de arrays u objetos, para ello generamos una variable por cada posición del literal o del arreglo.

Destructurar Arrays

Así accediamos a un valor de un array hasta ahora:

    let misDatos=["David", "Gimenez Plaza", "https://cvdgp.blogspot.com"];

    console.log(misDatos[2]);  

Así lo haremos con destructuring assignment:

1. Declaramos un array como siempre.
2. Ahora con let o const creamos un array de varialbes y lo igualamos al array previamente creado. Con ello estamos igualando cada varible creada a una de las posiones del array, hacemos algo parecido a un literal o varialbe objeto.

                  
    /*creaamos el array*/     
    const miArray = ["David", "Gimenez Plaza", "https://cvdgp.blogspot.com"];
    /*igualamos un array de variables a nuestro array creado previamente*/
    const [nombre,apellidos,web]=miArray;

    document.write(`Mi nombre es ${nombre} ,mis apellidos son ${apellidos} y mi blog es ${web}. `);
                
                

Igual que podriamos poner parametros por defecto en este caso podemos dar valores por defecto a nuestro array. En el siguiente ejemplo si no definimos la tematica del blog por defecto cargara no definada.

                  
   
    const miArray = ["David", "Gimenez Plaza", "https://cvdgp.blogspot.com"];
    const [nombre,apellidos,web, tematicaBlog = "no definido"]=miArray;


    document.write(`Mi nombre es ${nombre} ,mis apellidos son ${apellidos} y mi blog es ${web} y el tema elegido para el blog es ${tematicaBlog} `);

    /*********resultado****/

    Mi nombre es David, mis apellidos son Gimenez Plaza y mi blog es https://cvdgp.blogspot.com y el tema elegido para el blog es no definido
    
                

Si desemoa no llamar una de las posines del array tenemos que dejar un espacio vacion entre dos comas

const miArray = ["David", "Gimenez Plaza", "https://cvdgp.blogspot.com"];
    const [nombre , , web, tematicaBlog = "no definido"]=miArray;


    document.write(`Mi nombre es ${nombre} , mi blog es ${web} y el tema elegido para el blog es ${tematicaBlog} `);

    /*********resultado****/

    Mi nombre es David, mis apellidos son Gimenez Plaza y mi blog es https://cvdgp.blogspot.com y el tema elegido para el blog es no definido
    

                

Destructuración de objetos

La verdad es que podemos hacerlo de la misma foma que con los arrays. Cuando destructuramos un objeto, a diferencia de los array destructurados, no hace falta que nombremos todos regitros. Podemos saltar registros sin tener que dejar el espacio con comas.

  
  let alumno={
                nombre: "David",
                apellidos:"Gimenez Plaza",
                edad: 42,
                blog: "https://cvdgp.blogspot.com",
                profesion: "administrativo"
              };

    let { nombre, blog, profesion } = alumno;
    
    
   document.write( `el blog ${blog} es de ${nombre}`);


                

Es muy normar que desestructuremos un objeto pasandolo por parámetros a una funcion arrow o flecha.

let alumno = {
                    nombre: "David",
                    apellidos:"Gimenez Plaza",
                    edad: 42,
                    blog: "https://cvdgp.blogspot.com",
                    profesion: "administrativo"
                }

const cargaInformacion = ( { nombre, blog, profesion }) => console.log(`Mi nimbre es ${nombre}, visita mi blog en ${blog}. Soy ${profesion} y aprendo programación todo el tiempo que tengo.`);
cargaInformacion(alumno);

                 

Spread Operator ...

Es un operador de ES6 en el que pondremos 3 puntos seguidos (...) y nos puede ser muy útil para:

• Concatenar arrays
• Convertir cadenas de texto en arrays de palabras
• Convertir arrays en cadena de texto o String.

let arr=[1,2,3,4,5,6];
let arr2=[7,8,9,10];
let text= "texto";
let texto2 = ["Esto", "es", "un", "array"];


console.log([ ...arr , ...arr2]); //[1,2,3,4,5,6,7,8,9,10]
console.info([ ...text]); //[ "t", "e", "x", "t", "o" ]
console.log( ...texto2);  // Esto es un array

              						  

Clases JavaScript

Las clases en JS se nombran con la palabra reservada class. El uso de clases ha sido utilizado por otros lenguajes de programación para la creación de objetos desde hace muchos años. En JS ya podiamos crear objeto utilizando los literales o variables objeto, pero en ES6 han decido establecer una sintaxis más clara para la creación de objetos, utilizando las clases para tal fin. En la actualidad existen bibliotecas de JavaScript como React que utilizan las calses para organizar mucho mejor el código.

Tal y como ya sabeis un objeto se compone de propiedades y métodos. Anteriormente ya hemos visto cómo crear objetos literales con métodos y propiedades

Utilizaremos la palabra reservada constructor para crear las propiedades de nuestro objeto y crearemos los métodos igual que cuando nombramos una función pero sin utilizar la palabra reservada function:

class formulario{

	constructor(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro){
		this.nombre = nombre;
		this.apellido1	= apellido1;
		this.apellido2	=	apellido2;
		this.fehcaNacimiento = fehcaNacimiento;
		this.fechaRegistro	=	new Date();
	}

	metodoImpresor(){

	return  `El nombre es :${this.nombre} 
	El primer apellido es ${this.apellido1} 
	el segundo apellido es ${this.apellido2}
	  nacido en fecha ${this.fehcaNacimiento} 
	  has generado el registro con fecha ${this.fechaRegistro}`;
}	

}

const formularion1 = new formulario('David',"Gimenez", "Plaza", "17/12/1977");

console.info(formularion1.metodoImpresor());

                  	

Cómo heredar propiedades de una clase a otra

Una de las propiedades de POO (programación orientada a objeto) es la herencia. La herencia es la capacidad que tiene un objeto de adquirir todas las propiedades y métodos de otro anteriormente creado.

Para heredar de un objeto utilizaremos la palabra reserbada extends al crear la clase. Y si deseamos cargar nuevas propiedades se las incluiremos en el constructor.

class formularioTelefonia extends formulario{
	constructor(producto,PVP){
		this.producto = producto;
		this.PVP = PVP

	}
}
  																
  																	

Cuando deseemos heredar propiedades le pasaremos por parámetros el nombre de las propiedades y dentro del constructor utilizaremos la palabra reservada super(propiedadHeredad,propiedadHerdada)

class formulario2 extends formulario{

	constructor(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro,articulo,pvp){
	super(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro);
	this.articulo = articulo;
	this.pvp = pvp; 
}
}
  																	

Si deseamos sobre escribir un método, lo nombraremos nuevamente en nuestra clase hija y lo modifificaremos a nuestro antojo.

class formulario2 extends formulario{

		constructor(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro,articulo,pvp){
			super(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro);
			this.articulo = articulo;
			this.pvp = pvp; 
		}
		/**sobre escribir un metodo existente**/
		metodoImpresor(){	
									
			txt =	`el producto que has comprado es : ${this.articulo} <br> y tiene un precio de ${this.pvp}`;	
			return txt;
										

		}
}
  																	

Si lo que deseamos es heredar las propiedades de un método ya creado y utilizarlo en uno nuevo. introduciendosuper.MetodoObjPadre();

  																		
class formulario2 extends formulario{

	constructor(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro,articulo,pvp){
		super(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro);
		this.articulo = articulo;
		this.pvp = pvp; 
	}
	/**crear un nuevo metodo**/
	metodoImpresor2(){	
			let txt= super.metodoImpresor();		
			txt +=	`el producto que has comprado es : ${this.articulo} <br> y tiene un precio de ${this.pvp}`;	
				return txt;
				

	}
}


  																	

El ejemplo completo sería el siguiente:

<script type="text/javascript">

class formulario{

	constructor(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro){
		this.nombre = nombre;
		this.apellido1	= apellido1;
		this.apellido2	=	apellido2;
		this.fehcaNacimiento = fehcaNacimiento;
		this.fechaRegistro	=	(new Date()).toDateString();
	}

	metodoImpresor(){

	return  `El nombre es :${this.nombre} <br>
	El primer apellido es ${this.apellido1} <br>
	el segundo apellido es ${this.apellido2}<br>
	nacido en fecha ${this.fehcaNacimiento} <br>
	has generado el registro con fecha ${this.fechaRegistro} <br>`;
	}	

}

class formulario2 extends formulario{

	constructor(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro,articulo,pvp){
		super(nombre, apellido1, apellido2, fehcaNacimiento, fechaRegistro);
		this.articulo = articulo;
		this.pvp = pvp; 
		}
	/**crear un nuevo metodo**/
	metodoImpresor2(){	
		let txt= super.metodoImpresor();		
		txt +=	`el producto que has comprado es : ${this.articulo} <br> y tiene un precio de ${this.pvp}`;	
		return txt;
									

		}
}	

var ventas_Movil = new formulario2 ("Francisco", "Gomez","Rubio","15/10/1985","undefined" ,"tablet", 200 );

//document.write(ventas_Movil.metodoImpresor());
document.write(ventas_Movil.metodoImpresor2());
	

</script>



  																	

Promesas Promise()

Qué son las promesas

Es un objeto que Js en su version ES6 utiliza para valorar el estado de una conexión asincrona (AJAX). Una promesa se compone de 3 estados y no podrá tener núnca dos estado al mismo tiempo:

• Pendiente
• Resuleta
• Rechazada

En primer lugar construimos uno objeto promesa al que pasamos por parametros una función anónima que contine dos parámetros resolve y recject

<script type="text/javascript">
	let promesa = new Promise((resolve,reject)=>{

				});
</script>
              							

Antes dijimos que el objeto promise recibe dos parametros:

• resolve: Nos regresa el resultado cuando nuestra conexión a sido correcta.
• reject: Nos regresa el error ocurrido en nuestra conexion ajax.

let promesa = new Promise((resolve,reject) =>{

	if(true){
	resolve("Promesa resuelta");
	}else{
	reject("error al resolver la promesa");
	}

});
              							

Una vez creado el objeto promesa y cargadas los valores de las propiedades rosolve y recject que hemos pasado por parámetos, recuperaremos esos valores con los métodos:

• then(response): Esta variable recivira por parámetros response que es el valor dado anteriormente a resolve
• catch(error): Recibe por parámetros el objeto error que almacena reject.

/*instanciamos un objeto Promise*//*instanciamos un objeto Promise*/
let promesa = new Promise((resolve, reject)=>{
 if(false){
	resolve("Promesa resuelta");
 }else{
	reject("error al resolver la promesa");
	}
    });
/*cargamos los métodos then y catch *//*cargamos los métodos then y catch */
promesa
	.then((response)=> console.log(`resolve : ${response}`))
	.catch((error)=>console.log(`error: ${error}`));
              									

Tal y como hemos dicho antes una promesa tiene tres estados: en proceso , resuelto (resolve) y error (reject). Pero no podra estar en dos estado a la vez primero estará en proceso y posteriormente estará resuelta o caerá en error. Esto la combierte en elemento perfecto para los envios de formularios con AJAX. Supongo que habreis visto los tipicos formularios que al enviarlos carga el circulo de carga y luego aparece como enviado o como error de envío.

Ejemplo de promesa con tres estados

En el siguiente ejemplo hemos utilizado un temporizador para que se vea el trascurso de los estado en un div con id contenedorCod .

              											
	let promesa = new Promise ((resolve, reject)=>{
		/*estado de carga*		
		$("#contenedorCod").html("cargando....");
		/*carga ok*
		setTimeout(()=> resolve("carga Correcta"),2000);
		/*carga ko*
		setTimeout(()=> reject("error carga"),5000);
	});

	promesa
	.then((response) => $("#contenedorCod").html(`resolve : ${response}`))
	.catch((error) =>$("#contenedorCod").html(`error: ${error}`));