APUNTES de HTLM5, CSS, JavaScript, ES5, php, VBA, JAVA
Cuando empecé mi camino en la programación, me dí cuenta que en ocasiones no era tan fácil como creía encontrar apuntes y deseo compartir lo que voy aprendiendo por si a alguien le resulta de utilidad.
Ahora tengo una meta vivir de la programación, poco a poco intento sumar conocimientos y compartirlos con todos vosotros. Por el camino cometeré errores pero tengo las metas muy claras.
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);
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:
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:
Insertando el primer fragnmento de texto entre comillas
Insertamos un + la variable y otro +
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:
Abriremos las comillas pero con ` (simbolo situado al lado derecho de la p en el teclado español).
Cada vez que deseemos concatenar una variable pondremos el signo $ y en tre corchetes nuesrta varialbe. ${miVar}
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
varlista = newArray("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);
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:
Declaramos un array como siempre.
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"
}
constcargaInformacion = ( { 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.
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 = newDate();
}
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.
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)
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 = newPromise((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 = newPromise((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*/letpromesa = newPromise((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 .
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
Creamos un contenedor en html que llamaremos con el id cajaCode
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
Con CSS le damos forma a la caja principal y las diferentes cajas.
Por ultimo con JQuery ocultaremos todas las cajas dejando visible la de #codeHTML
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.
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.
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;
}
}
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.
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 JS
Evento
Uso
Etiquetas que lo soportan
blur
Al desselecionar el elemento
button, input, label, select, textarea, body
change
Al desseleccionar un elemento que fue modificado
input, select, textarea
click
Pinchar y soltar ratón
Todos
dblclick
Al hacer doble click
Todos
focus
Seleccionar un elemento
button, input, label, select, textarea, body
keydown
Mantener pulsada una tecla
Elementos del form y boy
keypress
Pulsar una tecla
Elementos del form y boy
keyup
soltar una tecla pulsada
Elementos del form y boy
load
Al cargar la página
body
mousedown
Al pulsar de forma sostenida un botón del ratón
Todos
mousemove
Al pasar el ratón por el elemento.
Todos
mouseout
Al soltar el botón del ratón
Todos
mouseenter
Al entar el ratón en el objeto
Todos
mouseleave
Al salir el ratón del objeto
Todos
hover(mouseIn,mouseOut)
Al pasar el ratón por el objeto
form
mouseup
Al pasar el ratón por el objeto
body
reset
Borrar los datos del formulario
form
resize
Al modificar el tamaño de la ventana
undefined
submit
Enviar formulario
undefined
Eventos JQuery
Podemos utilizar los evento en jquery de dos formas:
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:
$('.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.
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:
que utilizan las calses para organizar mucho mejor el código.
