2da Parte
de
javascript
Dom
ACCEDER A UNA VARIABLE
Proteger la variable para que por error SCOPE
no se use en donde no se debe usar ÁMBITO DE
PROTEGO UNA VARIABLE CUANDO VARIABLES
LA METO DENTRO DE UNA FUNCIÓN
Se refiere al alcance de la variable
puede ser local o global.
Si está adentro o afuera de una función
AFUERA DE LA
FUNCIÓN
VARIABLE
var saludo =` nombre`; GLOBAL
declaro la función
function saludar(){
alert(saludo)
}
ejecuto la función
saludar()
ADENTRO DE LA
FUNCION
function despedida(){
VARIABLE
var adios = `adios`; LOCAL
alert(adios);
}
despedida();
Si colocara el alert afuera
de la función, después de
ejecutar la función, no se podría
acceder a la variable
SI LA VARIABLE ESTA AFUERA DE LA FUNCION,
DENTRO DE LA FUNCIÓN SI PUEDO ACCEDER A
ELLA
PERO NO PUEDO ACCEDER DESDE AFUERA DE UNA
FUNCIÓN A UNA VARIABLE QUE ESTÁ DENTRO DE
ESTA FUNCIÓN
FUNCION AUTOEJECUTABLE
(Función de protección)
Si encierro determinada parte del código dentro de
una función, protejo las variables del código del
resto del código.
Si llamo una variable igual, por error y la ejecuto
protejo lo que está dentro de la función deprotección
ESTRUCTURA
FUNCIÓN
AUTOEJECUTABLE
(function(){
No es necesario ejecutar se escribe el código
la función afuera de la
función, como se a proteger}())
hace generalmente
POO
PROGRAMACIÓN ORIENTADA A OBJETOS .
Es un estilo de programación con unas guías
determinadas para que el código se pueda
reutilizar
OBJETOS
OBJETOS EMULAN
LAS ENTIDADES REALES
SE BASA EN EL CONCEPTO
DE CLASES Y OBJETOS
PENSAR EN OBJETOS
PENSAR EN RELACIONES O
INTERACCIONES DE LOS
DIFERENTES
COMPONENTES DEL SISTEMA
OBJETOS
LAS ENTIDADES TIENEN;
- ESTADO: Atributos .
- COMPORTAMIENTO: Métodos
- IDENTIDAD: Propiedades, o propiedad que diferencia a un objeto.
ORGANZAR PIEZAS DE INFORMACIÓN Y COMPORTAMIENTOS RELACIONADOS EN UNA PLANTILLA
LLAMADA CLASE
SE CREAN OBJETOS INDIVIDUALES A PARTIR DE LA PLANTILLA DE CLASE
LA INTERACCIÓN ENTRE LOS OBJETOS CREA UN PROGRAMA M+AS GRANDE
Código reutilizable,
VENTAJAS
organizado, fácil de mantener DEL POO
Programar POO
SE TRATA DE HACER CLASES Y CREAR OBJETOS
CLASES
A PARTIR DE LAS CLASES
Es una plantilla.
Define de manera
genérica como van a ser
los objetos de
determinado tipo
ejemplo:
Clase: Animal
Tiene atributos
(propíedades)
Nombre, edad
Serie
(comportamientos/méto
dos de la clase
(funciones dentro del
objeto)
Correr, defenderse,
atacar
FUNCIÓN
CLASES
PORQUE ES UNA
Las clases son PALABRA
funciones SEGUIDA DE
constructoras PARÉNTESIS
Se escriben iniciando
con Mayúsculas creo variables tipo objeto
POR DEFECTO
var texto = new String (`Hola, soy un texto`); CLASES
String()
var numero = new Number (5);
JS POR
Number()
var booleano = new Boolean(true);
DEFECTO
- Palabra que empieza con mayúscula y sigue
con paréntesis
Es la clase que ejecuta JS
cuando creamos una variable de tipo texto
COMPUESTAS
CLASES POR
Arreglos es Array
var arreglo = new Array(`pera`,`manzana`,`fresa`);
DEFECTO JS
COMPUESTAS
Objetos es Object
var objeto = new Object ({
color:`rojo`,
tamaño:`grande`,
tipo: `artificial `
})
DESCRIPCIÓN RÁPIDA
CREAR
Iniciando con
palabra reservada function
CLASES
PERSONALIZADAS
Nombre primera en mayúscula
Y se definen adentro las
características
CLASE PERSONALIZADA
Puedo crear varias
1ero Defino función
constructora o clase frutas (clase)
function Frutas(){ LE DOY VALORES A LA
CLASE CREADA
this. npropiedad
this. nombre; var fruta1 = new Fruta();
[Link];} npropiedad this ,
.
.
npropiedad de esta clase .
[Link] = "nvalor";
Asi se crea un objeto nuevo
SE PUEDE ESCRIBIR DANDO LOS VALORES DENTRO DE LOS PARÉNTESIS,
ES DECIR COMO PARÁMETRO DENTRO
DE LA FUNCIÓN
function Pc (cpu,ram,tvideo) {
[Link]=cpu;
[Link]=ram;
[Link]=tvideo;}
var pc1 = new Pc (`amd`.`2teras`,`nvidia`)
así se crea el objeto y lo puedo usar
[Link](PC1)
CONSTRUIR
SIN NECESIDAD
OBJETOS
DE UNA CLASE
OBJETOS
Colección de propiedades y
métodos
MÉTODOS:
var planta {
color:`verde`, Son
tamaño:`grande`,
funciones
escribeInformacion:function(){
[Link](`el color de la planta dentro de
es `+ [Link] + `el tamaño
de la planta es `[Link]ño)
los objetos
}
}
[Link]();
OBJETOS
Para acceder a las propiedades
[Link]
En el ejemplo de la planta sería:
[Link]
La funcion se escribe dentro del objeto
sin nombre y asignada a una propiedad
Se ejecuta después de la llave de cierre del
objeto
[Link]();
En el ejemplo de la planta es:
[Link]()
SE HACE ESTO DE
POO, CLASE,OBJETO
PARA PODER ENCAPSULAR TODO
VARIABLES, FUNCIONES DENTRO DE
OBJETOS, PARA QUE EL CÓDIGO SEA
REUTILIZABLE
SE PUEDEN COLOCAR
PARÁMETROS DENTRO DE LOS MÉTODOS
En los paréntesis dentro de la
función del objeto, y al finalizar
al ejecutar y usar está función
afuera de las llaves del objeto,
le doy los parámetros dentro de los
paréntesis de ejecución
var colores = {
básico1:`rojo`,
básico2:`amarillo`,
básico3:`blanco`,
secundario1:`negro`,
mezcla: function (color){
[Link](.color);
}
}
[Link](`aqua`);
ESTRUCTURA
HTML DE LOS TRABAJAR
DOCUMENTOS
PADRES HIJO CON EL DOM
SELECTORES JS
DOCUMENT
Se refiere a un objeto que JS trae por defecto
el objeto es el documento html
[Link]
(Voy a seleccionar un elemento del objeto document)
Los selectores son métodos
objeto.métodos
[Link]()
SELECCIONAR
ELMENTOS DEL
DOM
SELECCIONAR ELEMENTOS DEL DOOM
PUEDO SEELCCIONAR Y PUEDO
ALMACENAR EN VARIABLES
selectores individuales
selectores múltiples
SELECTORES
INDIVIDUALES MULTIPLES
[Link] atributo Id [Link] clase especificada
[Link]('el id');
[Link] CSS [Link] especificada
[Link] CSS
Selector Individual (id)
1. Selecciono el elemento que tenga un id determinado
Voy a seleccionar el id = b que está en un párrafo
Lo hago con la función getElementById();
[Link]('b');
[Link] almaceno dentro de una variable
var selectorIndividualUno=[Link]('b');
[Link] puedo usar desde la variable
[Link](selectorIndividualUno)
"el b es por el ejemplo, es el id en el ejemplo"
Selector Individual CSS
[Link] el elemento que tenga un id, pero con
selector css devuelve el primer elemento que coincida.
Lo hago con la función querySelector();
[Link]('#a');
[Link] almaceno y lo uso desde una variable
var querySelectorUno = [Link](`#a`);
[Link](querySelectorUno);
Selector Múltiple CLASE
[Link] TODOS los elementos con clase especificada
Con la función .getElementsByClassName('class');
Se convierte en un vector
getElementsByClassName('item');
[Link] almacena en una varaiable y se guarda con el nombre de la clase
var selectorClaseUno;
var selectorClaseUno = [Link]('item');
// Puedo usarlo con el nombre de la variable
[Link](selectorClaseUno);
//Como es un vector,puedo usarlo en cada uno de sus
//elementos
[Link](selectorClaseUno[0]);
[Link](selectorClaseUno[1]);
[Link](selectorClaseUno[3]);
LOS MÚLTIPLES
SON
VECTORES
los uso
INDICANDO CUAL ELEMENTO
DEL DEL VECTOR [ ]
Selector Múltiple Tag Name
1. Selecciona todos los elementos con una
etiqueta específica.
con la función [Link]('tag');
Se convierten en un vector.
2. Se puede almacenar en una variable
var selectorTagUno;
Escojo la etiqueta y la selecciono con la función
var selectorTagUno = [Link]('h2');
La puedo usar desde la variable en la que la almacene.
[Link](selectorTagUno);
La puedo usar como vector;
var tamañoTag = [Link];
[Link](tamañoTag)
[Link](selectorTagUno[0]);
[Link](selectorTagUno[2]);
Selector Múltiple Query selector All
[Link] un selector CSS específico
con la función [Link]('selector');
Defino que selector css, y la puedo almacenar en
un variable.
var selectoresCss = [Link]('.item');
//Lo puedo usar con la variable en la que la almacené.
[Link](selectoresCss);
//Lo puedo usar como vectores.
var tamañoSelectorCss = [Link]
[Link](tamañoSelectorCss);
VERIFICAR
en console, sobre el
elemento que se resalte , otro
botón del mouse - reveal in
elments panels, o mostrar en
el panel de elementos
4. Etiqueta span
<span class=""> </span>
La etiqueta span permite asignar un estilo a un elemento
pequeño dentro de una etiqueta de bloque en html.
Por ejemplo asigna un color a una palabra dentro de un
párrafo.
<p> Frase con <span class="Azul"> color azul </span> </p>
CREANDO NUEVOS ELEMENTOS O
NODOS, CADA ELEMENTO (PADRE-HIJO)
ES UN NODO, TODO ELEMENTO ES UN
NODO
SE PUEDE CREAR UN NUEVO
NODO DESDE
JS
- Confucio
CREAR UN NUEVO ELEMENTO O NODO
EJEMPLO: Crear un nuevo párrafo
1. Crear el nuevo elemento
Para crearlo:
- [Link](`p`), p = Porque es un elemento de tipo párrafo
2. Para poderlo seleccionar y usar o aplicar lo guardo dentro de una variable
var parrafoNuevo = [Link](`p`);
3. Creo un nuevo texto para el párrafo
var nuevoTexto = [Link](`soy el nuevo texto`);
CREAR UN NUEVO ELEMENTO O NODO
EJEMPLO: Crear un nuevo párrafo
4. Agregar el nuevo texto dentro del nuevo párrafo:
EN ESTE CASO CON EL MÉTODO
[Link](nodo a agregar)
[Link](nuevoTexto);
[Link] le puede agregar una nueva clase:
[Link](`Atributo`,`valor`)
[Link](`class`.`nombre de la clase`);
EL EJEMPLO HASTA AHORA VA ASÍ:
<p class=`nombre de la clase`> Soy el nuevo texto </p>
CREAR UN NUEVO ELEMENTO O NODO
EJEMPLO: Crear un nuevo párrafo
6. Ahora ubico este nuevo elemento en algún lugar.
¿dentro de donde lo voy a agregar?
6.1 Seleccionar el contenedor que va a contener el nuevo elemento
lo hago con el método de selección de clases
var contenedor = [Link](`contenedor`)[0];
(siempre es un arreglo, para usarlo. debo decir en que elemento del arreglo, si solo tiene uno, en el 0.
6.2 Agrego el nuevo párrafo dentro del contenedor con appendChild, en la variable que creé al
seleccionar el contenedor, en ese caso la variable la llamé contenedor.
[Link](parrafoNuevo);
>
CAMBIAR CLASS O ID
SON PROPIEDADES NO MÉTODOS
NO TIENEN () AL FINAL
1. Para cambiar el identificador id dentro de un id, lo primero es seleccionar el elemento que tiene el
identificador
var seleccionar = [Link](`identificadorN`)
después con esta nueva variable con el id, cambio el Id al nuevo id
[Link] = `nuevo identificador`;
EN CLASS SE PONE: [Link] = "por lo que cambia"
>
esta segunda parte termina
en
Módulo: Estilos con JS
ELEMENTOS PADRE
UBICACIÓN DE LOS
ELEMENTOS
TRABAJANDO CON EL
DOM
PASO A PASO
DESPUES DE CREAR EÑ NUEVO NODO
1ero) ACCEDO CONTENEDOR PADRE
2do) UBICAR EL ELEMENTO
GENERAL
1ero) ACCEDO CONTENEDOR PADRE
seleccionando el elemento (si el elemento no tiene clase,
accedo con: [Link])
2do) Ubico el elemento
[Link](nuevo elemento, antes del elemento)
;cuando vaya a seleccionar si es múltiple, escojo el lugar,
si es solo o tag,
en el insertBefore(nuevo,seleccionado[0])
en el seleccionado coloco como vector [0]
PASO A PASO EL CONTENEDOR PADRE TIENE CLASE
1. Creo el nuevo elemento y su contenido.
var nuevoContenido = [Link](`p`);
var contenido = [Link](`Nuevo
contenido`);
[Link](contenido);
[Link](`class`,`uno`);
1. Accedo al contenedor padre por medio de su clase.
Almaceno dentro de una variable por medio de un
selector, puede ser selector de clase:
var contenedorPadre = [Link]('contenedor');
2. Lo agrego teniendo en cuenta, el vector que escoja para mirar la posición
var contenedorPadre = [Link]('item')[0];
[Link](nuevoContenido,contenedorPadre[0]);
PASO A PASO EL CONTENEDOR PADRE NO TIENE CLASE
Después de crear el nuevo elemento
1. Selecciono un elemento padre dentro del padre
var padre = [Link]('.item')[0];
2. Accedo con la propiedad parentNode, al elemento padre del
elemento que seleccioné en el paso (lo guardo dentro de una variable.
var padreClase = [Link];
[Link] doy una nueva clase
[Link]=`contenedor`
Después de darle clase, puedo ubicar el nuevo elemento en donde escoja.
[Link](nuevaPrueba,padre);
setAttribute
SIRVE PARA AGREGAR MÁS COSAS,
NO SOLO CLASS
REMPLAZANDO Y ELIMINANDO
ELEMENTOS
TRABAJANDO CON EL
DOM
VOY A REMPLAZAR UN ELEMENTO POR OTRO
Después de crear un nuevo elemento que es el que va a remplazar
el elemento que queramos remplazar.
1. Selecciono el elemento que voy a remplazar por el nuevo que cree.
var meCambian = [Link]('remplazar');
2. Selecciono el elemento Padre donde esta el que voy a remplazar.
var contenedor = [Link]('item')[3];
3. Lo remplazo
[Link](remplazo,meCambian)
VOY A ELIMINAR UN ELEMENTO
1. Selecciono el elemento a eliminar
var eliminarItem = [Link]('item');
2. Selecciono el padre de este elemento
var contenedor = eliminarItem[1].parentNode; (se puede seleccionar de cualquier
foram
3. Elimino el elemento con removeChild
[Link](eliminarItem[1]);
DESCRIPCIÓN RÁPIDA
AÑADIR Y REMOVER EVENTLISTENER
EVENTOS CLICK Y DOBLE CLICK
EVENTOS MOUSEOVER Y MOUSEOUT EVENTOS JS
EVENTOS FOCUS Y BLUR
EVENTO CHANGE
EVENTO LOAD
PALABRA RESERVADA THIS
(Listado de eventos)
[Link]
US/docs/Web/Events
DESCRIPCIÓN RÁPIDA
AÑADIR Y REMOVER EVENTLISTENER
EVENTOS JS
EVENTOS CLICK Y DOBLE CLICK
EVENTOS MOUSEOVER Y MOUSEOUT
EVENTOS FOCUS Y BLUR
EVENTO CHANGE
EVENTO LOAD
PALABRA RESERVADA THIS
(Listado de eventos)
[Link]
US/docs/Web/Events
AÑADIR EVENTLISTENER
DEFINICION Es hacer algo en el sitio, que
sea interactivos. hago algo, y paso algo en el
sitio web.
Hago algo, js escucha y algo sucede
[Link](`hago esto`,pasa esto)
- Confucio
AÑADIR Y REMOVER EVENTLISTENER
EJEMPLO: Cuando de click en botón, que aparezca la notificación de
alert.
1. Selecciono el botón. (ES MAS FÁCIL CON id)
var boton = [Link]('boton');
2. Creo la función que va a hacer el algo cuando pase algo
function alerta(){
alert(`hola mundo`);
}
3 Doy la instrucción, addEventListener
Escucha: cuando se hace click en boton. HACE: Aparece el alerta.
[Link](`click`,alerta);
REMOVER EVENTLISTENER
Quito la acción que pasaba si hacia algo
Se identifica la acción y el escuchador
(viene del escuchador anterior)
1. Selecciono un elemento para que al dar click, se elimine lo que se hacia en otro elemento
(para el ejemplo)
var boton2 = [Link]('item')[2];
2. Creo la función para remover el escuchador
function removerAlert(){
[Link](`click`,alerta);
}3. Uso el addeEventListener, para borrar lo que se hacía.
[Link](`click`,removerAlert);
DESCRIPCIÓN RÁPIDA
AÑADIR Y REMOVER EVENTLISTENER
EVENTOS JS
EVENTOS CLICK Y DOBLE CLICK
EVENTOS MOUSEOVER Y MOUSEOUT
EVENTOS FOCUS Y BLUR
EVENTO CHANGE
EVENTO LOAD
PALABRA RESERVADA THIS
(Listado de eventos)
[Link]
US/docs/Web/Events
click o dblclick
Es el mismo procedimiento,, solo que cambia
la palabra clisck o dblclick, y depende
de si el evento pasa cuando le doy un solo click
o doble click
EVENTOS CLICK - DOBLE CLICK(DBLCLICK)
- Confucio
EVENTOS CLICK - DOBLE CLICK(DBLCLICK)
Puedo colocar la function dentro del
addEventListener. dar click en agregarParrafo2
- Confucio
DESCRIPCIÓN RÁPIDA
AÑADIR Y REMOVER EVENTLISTENER
EVENTOS JS
EVENTOS CLICK Y DOBLE CLICK
EVENTOS MOUSEOVER Y MOUSEOUT
EVENTOS FOCUS Y BLUR
EVENTO CHANGE
EVENTO LOAD
PALABRA RESERVADA THIS
(Listado de eventos)
[Link]
US/docs/Web/Events
MOUSEOVER MOUSEOUT
Pasa algo cuando coloco el mouse encima
(MOUSEOVER)
Pasa algo cuando quito el mouse de encima
(MOUSEOUT)
LA IDEA ES ESCOGER LA CLASE QUE VA A TENER
EL BOTÓN QUE VA A DESAPARECER
MOUSEOVER
El encima es el elemento que se escoge para que pase algo cuando el mouse este encima
MOUSEOVER
El encima es el elemento que se escoge para que pase algo cuando el mouse este encima
DESCRIPCIÓN RÁPIDA
AÑADIR Y REMOVER EVENTLISTENER
EVENTOS JS
EVENTOS CLICK Y DOBLE CLICK
EVENTOS MOUSEOVER Y MOUSEOUT
EVENTOS FOCUS Y BLUR
EVENTO CHANGE
EVENTO LOAD
PALABRA RESERVADA THIS
(Listado de eventos)
[Link]
US/docs/Web/Events
EVENTOS FOCUS Y BLUR
Sucede algo cuando se da click en un campo de
un formulario FOCUS
(Ejemplo: Aparece algo en el campo cuando doy
click)
Pierde foco, desaparece ese algo del campo,
click afuera
EVENTOS FOCUS
Escojo como variable el campo al que le quiero
poner el foco,
creo la función con addEventListener
y setAttribute
Aparece la frase tengo el foco en el campo
relacionado en la función donde di click
EVENTOS BLUR
Escojo como variable el campo al que le quiero
poner el foco,
creo la función con addEventListener y setAttribute
Aparece la frase ya no tengo el foco
cuando doy click afuera del campo
EVENTOS BLUR
Escojo como variable el campo al que le quiero
poner el foco,
creo la función con addEventListener y setAttribute
En la función se puede hacer cualquier otra cosa
como un alert
SI COLOCO ESPÁCIO
ENTRE COMILLAS
PARA EL BLUR
NO ME APARECE NADA
Y SALE EL PLACEHOLDER
DEL CAMPO
DEL FORMULARIO
DESCRIPCIÓN RÁPIDA
AÑADIR Y REMOVER EVENTLISTENER
EVENTOS JS
EVENTOS CLICK Y DOBLE CLICK
EVENTOS MOUSEOVER Y MOUSEOUT
EVENTOS FOCUS Y BLUR
EVENTO CHANGE
EVENTO LOAD
PALABRA RESERVADA THIS
(Listado de eventos)
[Link]
US/docs/Web/Events
EVENTO CHANGE
Cambia pasa algo, cambia estado
Para el ejemplo cambia estado cuando señala casilla
EVENTO CHANGE
Para el ejemplo, tengo una casilla para seleccionar
o checkear la opcíon.
Procedimiento:
1. Seleccionar el elemento que tiene el cambio de estado (check)
2. Se hace la función con addEventListener(`change, elegirColor)
[Link] hace la función elegirColor con checked
(checked es true si la casilla esta seleccionada y false si no está
seleccionada
function elegirColor(){
var estadoActivador=[Link]('colorFavorito').checked;
} } Se aplica el checked en el elemento en el que
se va a cambiar el estado, al seleccionarlo dentro de
la función.
CHECKED
Si tomo el [Link](`colorFavorito`).checked;
Lo pego en la consola y miro el elemento con la casilla,si señala
la casilla da un valor true, si no la señalo da un valor false
FUNCIÓN CON CONDICIONAL
Si el cheked es verdadero,
se activan las casillas
que estaban
deshabilitadas.
Con disabled = false.
Si el estado activador no es
verdadero (checked false)
disabled es true, es decir
disabled deshabilita
el poder escoger color
DESCRIPCIÓN RÁPIDA
AÑADIR Y REMOVER EVENTLISTENER
EVENTOS JS
EVENTOS CLICK Y DOBLE CLICK
EVENTOS MOUSEOVER Y MOUSEOUT
EVENTOS FOCUS Y BLUR
EVENTO CHANGE
EVENTO LOAD
PALABRA RESERVADA THIS
(Listado de eventos)
[Link]
US/docs/Web/Events
EVENTO LOAD
Se ejecuta el evento a una función cuando
se haya cargado completamente el elemento
es decir cuando se haya cargado completamente la página
ACÁ SE USA EL OBJETO WINDOW, que se refiere a la página
Con esta opción en el documento Html, Se puede colocar la etiqueta
script, en el head, porque va a funcionar cuando se cargue
completamente la página.
EVENTO LOAD
Se coloca el load
relacionada con el
objeto window, y adentro
lo que se quiere hacer
cuando el evento de
cargar la página suceda
DESCRIPCIÓN RÁPIDA
AÑADIR Y REMOVER EVENTLISTENER
EVENTOS JS
EVENTOS CLICK Y DOBLE CLICK
EVENTOS MOUSEOVER Y MOUSEOUT
EVENTOS FOCUS Y BLUR
EVENTO CHANGE
EVENTO LOAD
PALABRA RESERVADA THIS
(Listado de eventos)
[Link]
US/docs/Web/Events
PALABRA RESERVADA THIS
ES LA PALABRA QUE ESPECIFÍCA EL ELEMENTO
AL QUE SE LE APLICA EL EVENTO
A ESTE ELEMENTO APLÍQUELE EL EVENTO
THIS
ENTRE MUCHOS ESCOJE ESTE (THIS)
POR EJEMPLO EN UN ARREGLO A QUE ELEMENTO
LE APLICO EL EVENTO O LO QUE QUIERA HACER
PALABRA RESERVADA THIS
se cambia el ejemplo, ya no es un form, ahora son unos párrafos
dentro de un contenedor...
Para la explicación le agrega a los párrafos que señale la
clase creada pero que se asigna con el this
Sirve por practicidad, para no tener que cambiar o agregar
funciones de cosa por cosa, si no que con this escojo
el elemento.
A ESTE ELEMENTO SE LE APLICA EL EVENTO
PALABRA RESERVADA THIS
THIS depende del contexto en donde se aplica,
Si se aplica fuera de funciones , objetos, etc,
se escribe en la hoja js, this se refiere a window, esta ventana
como con el load
dentro de una función se refiere al elemento al que se le aplica la
función, como con el evento addEventListener con algún
evento como con un click
PALABRA RESERVADA THIS
PROCEDIMIENTO
Se escoge el elemento a utilizar
se usa un ciclo for con el tamaño del vector que se usa
se hace la function con el addEventListener
y adentro de la función para definir a cuál de los elementos
se le aplica el evento (en el caso del ejemplo click),
se usa la palabra reservada this
Dependiendo de a cual elemento se le da click
ejecuta la función
PALABRA RESERVADA THIS
Por ejemplo la palabra reservada this en un objeto
dentro del objeto, se puede remplazar el nombre del objeto
por this (este objeto) , para el ejempo: Esta planta dentro de la
funcion que está dentro del objeto (el método)
PALABRA RESERVADA THIS
PARA MAS INFORMACIÓN DE LEER THIS EN SU CONTEXTO
[Link]
es/this
THIS EN EVENTOS, A QUE ELEMENTO SE LE APLICA EL EVENTO
Por ejemplo entre muchos botones que están relacionados en
la función, que la función se ejecuta sobre el que se le hace click
Existen formas de definir a que quiero a lo que se refiera this
se debe revisar el contexto (existen tutoriales)