Seguidores

MIS WEBS



sábado, 28 de diciembre de 2019

Métodos getter y setter JS

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);


   

domingo, 20 de octubre de 2019

ECMAScript6

Scpirts JS Títutlo pestaña

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:

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 imagen 20 x 18 del logo de 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}`));

              										

miércoles, 9 de octubre de 2019

CREAR UNA CAJA DE CÓDIGO

Caja contenedor de código html, css, js y php

En el siguiente ejercicio tenemos una caja para contener código, dentro de ella os dejaré el código.

Cómo crear una caja para insertar código sin utiliza codepen

  1. Creamos un contenedor en html que llamaremos con el id cajaCode
  2. Dentro de el cuatro botones, cuatro cajas de código y dentro de cada caja un div llamado (#codeHTML, #codeCSS , #codeJS, #codephp) dentro de estos div otros dos: uno con clase numeral y otro con el código class code
  3. Con CSS le damos forma a la caja principal y las diferentes cajas.
  4. Por ultimo con JQuery ocultaremos todas las cajas dejando visible la de #codeHTML
  5. Pondremos a la escucha los botones indicandoles que cuando se haga click en uno de ellos este se haga visible y el resto se oculten.
  6. Crearemos un for para cargar los números del div con clase numeral.

Tan solo tienes que copiar el código siguiente y copiar el tuyo en las cajas con clase code.

                 
 <CajaCodigo>
  <div id="cajaCode">
    
    <input class="tipoCode" type="button" value="html">
    <input class="tipoCode" type="button" value="css">
    <input class="tipoCode" type="button" value="JS">
    <input class="tipoCode" type="button" value="php">
    
    
    <div id="codeHTML">
         <div class="numeral"></div>
 
       <div class="code"><code><pre>
              
************html**********************               
       </pre></code></div>
    </div>
    
    <div id="codeCSS">
         <div class="numeral"></div>

         <div class="code"><code> <pre>
**********************css***************************
          </pre></code></div>
    </div>
    
    <div id="codeJS">
         <div class="numeral"></div> 
         <div class="code"><code><pre>
codeee*****************************************************
         
          
          </pre></code></div>
    </div>
    
    <div id="codephp">
         <div class="numeral"></div> 

  <div class="code"><code><pre>
code***********************
  </pre></code></div>   
      
      
  </div>
 </div>

 <script src="https://code.jquery.com/jquery-3.4.1.js"></script>


          
div#cajaCode{

background: darkslategrey;
border: 15px groove dimgrey;
width:80%;
height:250px;
border-radius:10px;
box-shadow: 5px 5px silver, 
  10px 10px darkgrey, 
  15px 15px grey ;  
}
.numeral{

padding-left:2px;


color:lightslategrey;
font-weight:bolder;
align-content:center;

width:20px;
height: 1900px;
}
.tipoCode{

margin-top:10px;
margin-left:18px;
margin-bottom:0px;
width:15%;
background:silver;

font-size:1.2em;
font-weight: bolder;
color:purple;
}
.tipoCode:hover{
background:darkgrey;
}
.code{
margin-left: 5%;
}
#codeHTML, #codeCSS , #codeJS, #codephp {
width:90%;
height:150px;
margin: 10px auto;
padding:20px;

display: grid;
grid-template-columns: 25px 1fr;
background:black;
color:whitesmoke;

overflow-x: auto;
overflow-y: auto;
white-space: nowrap;


}

@media(max-width: 600px) {

 div#caja{
 width:90%;
 }
 #codeHTML, #codeCSS , #codeJS, #codephp {
 width:80%;
 }
 .code{
 margin-left: 10%;
 }
 input[value='html']{
 width:20%;
 }
}


             

CajaCode();

/*Con esta funcion creamos cajas de código, nuestra caja tiene 
tres botones uno para mostrar el jS/JQ , html y php pomndremos todas las páginas ocultas
cuando pulsemos cada boton saltará una página. hemos creado una funcion llamada numeral
para cargar un div con numeros a la izquierda*/
function CajaCode(){
  /************ocultamos todos los div menos el de html***************/
      $("#codeCSS  , #codeJS, #codephp").hide();
       
      /**ponemos a la escula los botones y le indicamos que se haga visible el nuestro
      ocultando el resto**/
      $("input[value='css']").click(function(){ 
            $("#codeCSS").show();
            $(" #codeHTML , #codeJS, #codephp").hide(); 
      });
      $("#cajaCode input[value='css']").click(function(){ 
            $("#codeCSS").show();
            $(" #codeHTML , #codeJS, #codephp").hide(); 
      });
      $("#cajaCode input[value='html']").click(function(){ 
            $("#codeHTML").show();
            $(" #codeCSS , #codeJS , #codephp").hide(); 
      });
      $("#cajaCode input[value='JS']").click(function(){ 
            $("#codeJS").show();
            $(" #codeCSS , #codeHTML , #codephp").hide(); 
      });
      $("#cajaCode input[value='php']").click(function(){ 
            $("#codephp").show();
            $(" #codeCSS , #codeHTML , #codeJS").hide(); 
      });

/**********creamos un for para llenar el div numeral con numeros de 1 a 100*************/
      $(".numeral").html(C);
      function C(){
         
        let texto="";
        
        for(let i = 1; i<100; i++){
          
          texto += i+"<br>";
          
        }
      return texto;
 
}

}
            
             
             
***************si tienes php cargalo aquí***********************
     

domingo, 22 de septiembre de 2019

parctica load

AJAX CON JQUERY

h2

div

texto del articulo

sábado, 7 de septiembre de 2019

Eventos JQUERY

Scpirts JS Evento JS

OBJETO EVENTO

Un evento es un objeto para java script y como tal tiene sus propiedades y métodos:

    Propiedades

  • target: nos regresa el elemento del DOM que dispara nuestro evento.
  • clientX: es el punto x donde nos encontramos.
  • clientY: es el punto y donde nos encontramos.
  • data: Dato trasmitido al evento utilizando la función bind().

    Métodos

  • sotpPropagation: Evitará la propagación de eventos por el resto de objetos situados en el mismo lugar. Por ejemplo si le decimos que se desencadene el evento tras hacer click en la imagen debemos de tener en cuanta que la imagen pertenece a body que a su vez pertenece al document que a su vez pertenece al html. Tu puedes haber generado un evento para el documento y otro para la imagen. En el siguiente código la imagen responderia al click del body y al click de la imagen.
    $(document).click(function(){
      alert("Body");
    });
    $("img").click(function(){
      alert("Imagen");
    });

    El mismo código utilizando stopPrapagation() solo responderá a la imagen:
    $(document).click(function(){
      alert("Body");
    });
    $("img").click(function(e){
      e.stopPropagation();
      alert("Imagen");
    });

  • preventDefault: Detiene el comportamiento determinado del elemento. Imagina que tu tienes un botón con una etiqueta <a> dentro, si tu haces doble click por defecto te llevara a la dirección que tenga en el atributo href, utilizando preventDefault evitará que al hacer doble click te redireciona.
  • which: Nos regresa un número entero que representa un número unicode que representa la tecla presionada por un keypress

En el siguiente ejercicio utilizamos las propiedades clientX y clientY para ver en que punto de la pagina haces click.

En el siguiente ejemplo creamos una imagen svg con un circulo que seguira el raton. Cuando arrastremos el ratón dentro del svg el circulo irá tras nuestro ratón.

Ejemplo del uso del método stopPropagation, para evitar propagación de eventos

Eventos

Un evento es un desencadenante de una acción (cargarse la pagina, salir de la página, hacer click en un punto, mover el ratón, pasar el ratón por un objeto, pulsar intro...). Una acción es lo que ocurre una vez sucede el evento.

Podemos traducir evento algo que hace un objeto(página, ratón, teclado,formulario) y acción como la qué es lo que pasa cuando luego.

Ejm Cuando hagamos click en una etiqueta a nos llevará a otro pagina. En este caso el evento es hacer click y el evento desencadenado es ir a la pagina xxx.

Los eventos pueden ser de varios tipos:

  • Eventos de ratón:
    • click
    • dbclick
    • mousedown
    • mouseup
    • mouseover
    • mousemove
    • mouseenter
    • mouseeleave
  • Eventos de teclado:
    • keypress
    • keydown
  • Eventos de documento o ventana:
    • load
    • resize
    • scroll
    • unload
  • Eventos de formulario:
    • submit
    • reset
    • change
    • focus
    • blur

Eventos JQuery

Podemos utilizar los evento en jquery de dos formas:

  1. Pasarle una función por parámetros al evento.
    $("div").click(myfuncion);
    fuction myfuncion(){...code...}
  2. Crear una función anónima: $("div").click(function(){....code....});

Ejemplo de eventos con Jquery

EVENTOS JQUERY CON FUNCIÓN toggle() Y hover()

Utilizaremos estas funciones para realizar acciones con los eventos hover y click.

Función hover( cursorInside , cursorOut )

La función hover() desencadenará una acción cuando entre el cursor en el elemento y otra cuando salga de él.

Función toggle()

Lo utilizaremos para trabajar con el evento click, con el aparecerá y desaparecerá nuestro elemento cada vez que hagamos click. Se puede utilizar si queremos hacer una etiqueta <details> personalizada.

Ejemplo de menú con toggle:

Ejemplo de details con imagen personalizada utilizando la función toggle

Funciones next(), bind() on()

next("objeto")

La función next("objeto") nos ayudará a apuntar al próximo objeto que determinemos dentro del actual. Por ejemplo Si le decimos $("article").next("p") apuntará a la primera etiqueta p de cada articulo.

bind("desencadenanteEvento", data, open)

La función bind está en desuso actualmente utilizaremos .on("eventos", acción).

Si deseamos que un obejeto responda a dos o mas eventos (click, hover..) y al responder a ellos desencadene la misma función podemos utilizar bind().

Hasta el momento teniamos que hacer lo siguiente: $("p").click(funcionA).hover(funcionA)

Con bing lo podemos hacer bind("click hover", data, miFuncion)

data será un dato o variable con un dato que le pasamos a nuestra variable

.on("evento/os", funciónAcciónDesencadenada)

En los eventos podemos poner tantos eventos como deseemos que desencadenen nuestra acción, para ello los nombraremos separados con espcacios:

Ejm de múltiples eventos
.on("click dbclick scroll", funciónAcciónDesencadenada)
Ejemplo de eventos con diferentes funciones:
$('.h2').on({ click:hacerclick, mouseover: hacerhover});

function hacerclick(e) {
    e.preventDefault();
    console.log('has hecho click');
}
function hacerhover() {
    console.log('pasó el ratón');
}
                                    

Delegación de eventos

La delegación de eventos es una propiedad del objeto evento que nos puede resultar muy util para identificar el elemento del DOM que dispara el evento y sus atributos. Saviendo este dato podremos solicitar su modificación posterior mente.

En este ejemplo utilizamos la funcion .on() y le indicamos en primer lugar el elemento padre desde el que deseamos empezar la búsqueda $("ElementoPadre") y dentro de la función on le pasaremos por parámetros, los eventos desencadenantes de la acción, el hijo que debe identificarnos y por ultimo acción que desencadena.

$("ElementoPadre").on("eventos","ElementoHijo", function(){ $(this).attr("id") });

En el siguiente ejemplo nos regresará por consola la propiedad class de cada objeto del DOM por el que pasemos el ratón.

$("*").hover(function(e){console.log(e.target.className);});
Ejemplo de función next()

See the Pen función next() de JQ by CVDGP (@cvdgp) on CodePen.

Ejemplo de función .on("evento/s", acción):

En el siguiente ejemplo crearemos dos imágenes, cuando hagamos click o carguemos la página copiara la ruta de la imagen1 y se la dará a la imagen 2, poniendola visible (Show), cuando pasemos el ratón por la imágen 2 esta desaparecerá, utilizaremos el método stopPropagation() del objeto evento para evitar que se propague en otro objetos como el body:

Buscar este blog

Sandisk y Western Digital