JavaScript y ES6+

# JavaScript y ES6+
Created by <i class="fab fa-telegram"></i>
[edme88]("https://t.me/edme88")

---
<style>
.grid-container2 {
    display: grid;
    grid-template-columns: auto auto;
    font-size: 0.8em;
    text-align: left !important;
}

.grid-item {
    border: 3px solid rgba(121, 177, 217, 0.8);
    padding: 20px;
    text-align: left !important;
}
</style>

## Temario
<div class="grid-container2">
<div class="grid-item">

* JavaScript
* Características
* Programación dirigida por eventos
* Lenguajes

### Eventos
* Definición
* Tipos de eventos
    * Mouse
    * Teclado
    * Navegador
    * Formularios

</div>
<div class="grid-item">

* Event Handler
* Event Listeners
* Objeto del evento
* EcmaScript
* Jerarquía de Objetos

</div></div>

---

## JavaScript

Es un lenguaje de scripting **multiplataforma** y orientado a eventos y objetos.

Es **multiplataforma** porque su código puede ejecutarse en diversos entornos:
- **Navegadores web:** Para el front-end.
- **Servidores:** Para el back-end usando [Node.js](https://nodejs.org/es/)
- **Aplicaciones móviles:** Usando frameworks como React Native o NativeScript.

---

## Características
* Orientado a Eventos y Objetos
* Lenguaje Interpretado
* Tipado dinámico (una variable puede tomar valores de distinto tipo)
* Eficiente (reduce el tiempo y costo de desarrollo para las diversas plataformas)
* Flexible (permite crear amplia variedad de aplicaciones)
* Amplio Ecosistema (cuenta con una gran cantidad de librerías y Frameworks)

---
## Programación Dirigida por eventos
Paradigma de programación en el que la estructura y la ejecución de los programas van determinados por los 
sucesos que ocurran en el sistema, definidos por el usuario o por el propio sistema.

El código no se ejecutará en un flujo lineal, sino, de forma asíncrona, según vayan ocurriendo los **eventos**.

---

## Lenguajes
* JavaScript
* ActionScript
* Visual Basic
* C#
* Visual C++
* etc...

---
## [Eventos](https://www.w3schools.com/jsref/dom_obj_event.asp)
Todo aquello que puede ser detectado y que pueda producir una reacción.

Ej. Hacer click en un botón, mover el puntero sobre un enlace, seleccionar un elemento de una lista desplegable, etc.

---
## Tipos de Eventos
* Eventos de Usuario
  * Eventos del mouse
  * Eventos del teclado
* Eventos del navegador
  * Manipulación de las ventanas del navegador
  * Comunicación con el servidor
* Eventos generados desde código
  * Cambios en el contenido, aspecto o estructura
  * Especificación DOM (Document Object Model)

---

## Eventos de Mouse

* **onClick**: Cuando el usuario hace clic con el mouse o el dedo en cualquier elemento HTML.
* **onMouseover, onMouseout**:	El evento ocurre cuando el puntero se mueve hacia dentro (para el mouseover) o hacia afuera 
(para el mouseout) un elemento, o uno de sus hijos.
* **contextmenu**: Cuando el usuario hace clic derecho en el mouse.
* **onMousemove**: Si el usuario mueve el mouse.
* **onMousedown, onMouseup**: Si el usuario presiona o suelta el mouse.

----

### Ejemplo de Evento de Mouse
````html
<input type="button" value="Mostrar Cartel" onclick="alert('Hola Mundo!!!');" />
<br>
<div id="contenidos" style="width:150px; height:60px; border:thin solid silver" 
     onmouseover="this.style.borderColor='black';" 
     onmouseout="this.style.borderColor='silver';">
    Sección de contenidos...
</div>
````

---
## Eventos de Teclado
* **onKeyup**: Cuando el usuario suelta la tecla del teclado.
* **onKeydown**: Cuando el usuario presiona la tecla del teclado.
* **onKeypress**: Cuando el usuario presiona y suelta la tecla del teclado. La diferencia de keydown/up es que Keypress 
solo funciona con teclas de caracteres. Por ejemplo, no funciona en las flechas arriba

---
## Eventos Navegador

* **Unload**: Abandonar la página
* **Load**: El navegador ha terminado de cargar el sitio web.
* **Error**: El evento ocurre cuando se produce un error al cargar un archivo externo (como un CSS o un JavaScript).
* **Scroll**: El evento ocurre cuando se realiza scroll.
* **PageHide, PageShow**: Cuando el usuario se enfoca en una ventana/pestaña diferente; o cuando el usuario vuelve de 
una ventana/pestaña diferente.
* **Resize**: Cuando la ventana se redimensiona.
* **Move**: Al mover la ventana del navegador
* **DragDrop**:Al soltar algo que se ha arrastrado sobre la página
* **Abort**: Al detenerse la carga de una imagen, de la página o irse de la pagina.

---
## Eventos de Formularios 

* **Submit**: El evento ocurre cuando se envía un formulario.
* **Focusin, Focusout**: El evento ocurre cuando el puntero se mueve a un elemento o a uno de los elementos secundarios del elemento.
* **Input**: El evento ocurre cuando un elemento obtiene la entrada del usuario.
* **Change**: El evento ocurre cuando el contenido de un elemento del formulario, la selección o el estado previamente 
establecido han cambiado (para ````<input>, <keygen>, <select>, y <textarea>````)

---
## Event Handler
El manejador de eventos contiene instrucciones acerca de que hacer cuando una clase particular de evento se dispara.

---
## Event Listeners
La única forma de reaccionar ante cualquier evento es **escuchar** ese evento y asignar una función que maneje el evento como lo necesite.

El detector de eventos se puede agregar:
* En el HTML
* En JavaScript

---
## Listeners en HTML
Por ejemplo, si se desea empezar a escuchar cuando el usuario hace clic en un botón, se debe especificar el atributo 
"onclick" para esa etiqueta HTML específica ````<button>````:
````javascript
<!– myClickHandler is a javascript function that will handle the event –>
<button onclick="llamar_alert();">Alertar Usuario</button>
 
<script>
function llamar_alert(){
    alert(‘Hola Usuario!!!’);
}
</script>
````

---
## Listeners en Javascript
A veces el elemento DOM no existe desde el principio, porque se crea después de una llamada a la base de datos o 
después de que el usuario haya hecho algo.

La función **.addEventListener** se puede usar en cualquier elemento DOM durante el tiempo de ejecución. 
Se debe especificar qué evento se quiere escuchar, y la función controladora que se llamará cada vez que ese evento se 
active en ese elemento DOM.

---
## Listeners en Javascript
Por ejemplo, este código muestra un alerta solo en el primer click.
````javascript
<body onload="inicialize();">
    <button id="onTimeButton">First time only</button>
</body>
 
<script>
var listenerFunction = function(){
    alert('First click');
    document.getElementById('onTimeButton').removeEventListener("click",listenerFunction);
}
function inicialize(){
    document.getElementById('onTimeButton').addEventListener("click",listenerFunction);
}
</script>
````

---
## Objeto del Evento

Los controladores de eventos pueden tener un parámetro opcional en la declaración de la función, que se llena con un 
objeto "Evento" que contiene información sobre el **evento que se activó** para obtener esta función llamada.

* **Objetivo**: Devuelve el objeto DOM que ha activado el evento.
* **Tipo**: El tipo de evento: haga clic en, al pasar el ratón, carga, etc .
* **Cancelable**: Si puede detener la propagación del evento o no.

---
## Objeto del Evento
````javascript
function myEventHandler(eventObj)
{
    console.log(eventObj.target);
     //imprimirá en la consola del objeto DOM que ha activado el evento
    console.log(eventObj.type);
     //Imprimirá en la consola el tipo de evento. 
    console.log(eventObj.cancelable);
     //Imprimiremos en la consola verdadero o falso si podemos detener la propagación de este evento.
}
````

Dependiendo del tipo de evento, tendrá propiedades adicionales que le darán información muy útil sobre lo que sucedió cuando se activó el evento.

---
## Objeto del Evento Mouse
* **clientX, clientY**: Devuelve la horizontal o vertical de coordenadas del puntero del ratón, con relación a la 
ventana actual, cuando el evento de ratón fue provocada.
* **pageX, pageY**: Devuelve la horizontal o vertical de coordenadas del puntero del ratón - en relación con el 
documento - cuando el evento de ratón fue provocado.
* **which**: Devuelve qué botón del ratón cuando se presiona el evento de ratón se desencadenó

---
## Objeto del Evento Teclado
* **keyCode**: Devuelve el código de caracteres Unicode de la tecla que activa el evento.
* **shiftKey, altKey o ctrlKey**: Devuelve si el shift,alt o ctrl se pulsan con el evento clave fue provocada.

---
### Objeto del Evento Rueda del Mouse
* **deltaX, deltaY**: Devuelve la cantidad de desplazamiento vertical u horizontal de una rueda del ratón ( eje y) o (eje x)
* **deltaMode**: Devuelve un número que representa la unidad de mediciones de valores delta (píxeles, líneas o páginas)

---
## Eliminar los Listeners
Se pueden eliminar los **listener** empleando:
````javascript
element.removeEventListener(type, eventHandlerFunction);
````

---

## ECMAScript
JavaScript está estandarizado por Ecma International, la asociación europea para estandarizar los sistemas de información 
y comunicación.

El último estándar es [ECMA-262](https://www.ecma-international.org/publications-and-standards/standards/ecma-262/), 
y también está aprobado por ISO (Organización Internacional de Normalización).

---

## Jerarquía de Objetos en Js
Podemos ver una página web como una colección de objetos. Por ejemplo, para JavaScript un formulario es un objeto, una imagen es un objeto, etc.

Los objetos tienen propiedades, métodos y eventos asociados.

Los objetos se organizan conforme a una jerarquía de forma que heredan métodos o propiedades de sus objetos padre, e incluso el nombre de un objeto se crea a partir de sus objetos padre.

---
## Jerarquía de Objetos en Js
![Jerarquia Obejtos](images/html/jerarquiaObjetos.png)

---
## Jerarquía de Objetos en Js

Todo documento HTML dispone de los siguientes objetos en la jerarquía de objetos JavaScript:
* **navigator:** tiene propiedades relacionadas con el nombre y la versión del navegador, protocolos de transferencia permitidos por el navegador (mime types) y sobre plugins instalados.

* **window:** considerado habitualmente el objeto global o de máximo nivel. Tiene propiedades relacionadas con la ventana del navegador. En caso de uso de frames (“subventanas”) hay un objeto window por cada “ventana hija” que exista.

* **document:** tiene propiedades relacionadas con el documento como título, links, formularios, etc.

* **location:** tiene propiedades relacionadas con la URL actual.

* **history:** tiene propiedades relacionadas con URLs previamente visitadas.

---
#### [Nombres dentro de laJerarquía de Objetos en Js](https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=858:jerarquia-de-objetos-javascript-forms-elements-images-navigator-useragent-geolocation-online-cu01170e&catid=78&Itemid=206)

Reglas al nombrar los objetos:

1. El nombre del objeto descendente incluye el nombre del objeto padre. 
Ej. window.document

2. Como todo desciende de window, podemos omitirlo:
Ej. document.body en lugar de window.document.body

3. Se organiza de forma automática ciertos objetos (forms, elements, images, links) en arrays. 
Ej. En caso de varios formularios window.document.forms[0] ó document.forms[0]

---
#### Jerarquía de Objetos en Js: Ejemplos
````javascript
windows.alert("Hola Mundo!!!");

document.getElementById("num1").value;

document.getElementsByName("miDiv")[0].style.display = 'none';

window.document.forms[0].nombreUsuario.value;
````

---
## ¿Dudas, Preguntas, Comentarios?
![DUDAS](images/pregunta.gif)