javaScript

# JavaScript: 2da Parte
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">

* Refactorización de Código

[Ejercicio: Refactorización de Conversión de Unidades](U5_javaScript2.html#/3)

* Modificar CSS mediante Js

[Ejercicio: Mostrar/Ocultar div](U5_javaScript2.html#/9)

[Ejercicio: Operaciones Mateáticas](U5_javaScript2.html#/11)

* Math Round
* Math Random
* Ejemplo: Random y Round
* ParseFloat
* ParseInt
* toFixed(X)
* Fórmulas

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

[Ejercicio: Conversor de Unidades 2](U5_javaScript2.html#/23)

[Ejercicio: Operaciones Mateáticas 2](U5_javaScript2.html#/26)

[Ejercicio: Primera a Segunda web](U5_javaScript2.html#/29)

* LocalStorage

[Ejercicio: Primera a Segunda web empleando LocalStorage](U5_javaScript2.html#/34)

* Métodos para Strings

</div>
</div>

---
## Refactorizar Código: que es?
* Limpieza de código
* No arregla errores ni incorpora funcionalidades
* Altera la estructura interna del código sin cambiar su comportamiento externo

Objetivos:
* Mejorar la facilidad de comprensión del código
* Cambiar su estructura y diseño
* Eliminar código muerto
  *Facilitar el mantenimiento en el futuro

---
### Ejercicio: Conversión de Unidades
Refactorice el código de manera tal que:
* Emplee función flecha en lugar de **function**
* Al principio se creen las variables necesarias
* Operar todos los valores empleando las variables
* Al final hacer la asignación de valores a los campos en la UI

---
### Ejercicio: Conversión de Unidades
````javascript
convertirUnidades = (id,valor) => {
    let met, pul, pie, yar;

if(valor.includes(",")){
        valor = valor.replace(",", ".")
    }
    if(isNaN(valor)){
        alert("El valor ingresado es incorrecto");
        met = "";
        pul = "";
        pie = "";
        yar = "";
    }else if(id==="metro"){
        met = valor;
        pul = valor*39.3701;
        pie = valor*3.28084;
        yar = valor*1.09361;
    }else if(id==="pulgada"){
        //tarea
    }
    else if(id==="pie"){
        //tarea
    }else if(id==="yarda"){
        //tarea
    }
    document.lasUnidades.unid_metro.value = Math.round(met*100)/100;
    document.lasUnidades.unid_pulgada.value = Math.round(pul*100)/100;
    document.lasUnidades.unid_pie.value = Math.round(pie);
    document.lasUnidades.unid_yarda.value = Math.round(yar);
}
````

---
## Modificar CSS mediante Javascript
- Modificar una única propiedad CSS de un elemento.
- Manipular el atributo class del elemento.
- Técnicas avanzadas, como inyección de nodos style o el reemplazo de toda una hoja de estilos externa por otra

---
### Ejemplo Mostrar/Ocultar Div

<div style="text-align: left; display: inline-block; margin: auto;">
    Valores de Velocidad </br>
    <input style="width: 30px;height: 30px" type="radio" name="velocidad" value="Vinicial" onclick="seMuestra(this.value)">Velocidad Inicial </br>
    <input style="width: 30px;height: 30px" type="radio" name="velocidad" value="Vfinal" onclick="seMuestra(this.value)">Velocidad Final </br>
    <input style="width: 30px;height: 30px" type="radio" name="velocidad" value="NingunaV" onclick="seMuestra(this.value)">Ninguna Velocidad </br>
    Valores de Distancia </br>
    <input style="width: 30px;height: 30px" type="radio" name="distancia" value="Dinicial" onclick="seMuestra(this.value)">Distancia Inicial </br>
    <input style="width: 30px;height: 30px" type="radio" name="distancia" value="Dfinal" onclick="seMuestra(this.value)">Distancia Final </br>
</div>
<div id="variasCosas1" style="display: none; background-color: #0d99a5">
Aca hay valores de Velocidad! O mas radios, o algo xD
</div>
<div id="variasCosas2" style="display: none; background-color: #1b91ff">
Aca hay valores de Distancia! O mas radios, o algo xD
</div>

---
## HTML: Displayed
<small>Esto es solo un ejemplo. Las propiedades CSS deben ir en hoja de estilo separada.</small>
````html
<div style="text-align: left; display: inline-block; margin: auto;">
    <input type="radio" name="velocidad" value="Vinicial" onclick="seMuestra(this.value)">Velocidad Inicial
    <input type="radio" name="velocidad" value="Vfinal" onclick="seMuestra(this.value)">Velocidad Final
    <input type="radio" name="velocidad" value="NingunaV" onclick="seMuestra(this.value)">Ninguna Velocidad
    <input type="radio" name="distancia" value="Dinicial" onclick="seMuestra(this.value)">Distancia Inicial
    <input type="radio" name="distancia" value="Dfinal" onclick="seMuestra(this.value)">Distancia FInal
</div>
<div id="variasCosas1" style="display: none; background-color: #0d99a5">
Aca hay valores de Velocidad! O mas radios, o algo xD
</div>
<div id="variasCosas2" style="display: none; background-color: #1b91ff">
Aca hay valores de Distancia! O mas radios, o algo xD
</div>
````

---
## JavaScript: Displayed
````javascript
let seMuestra = (nombre) => {
   if (nombre === "Vinicial" || nombre === "Vfinal") {
        document.getElementById('variasCosas1').style.display = 'block';
   } else if (nombre === "NingunaV") {
        document.getElementById('variasCosas1').style.display = 'none';
   } else if (nombre === "Dinicial" || nombre === "Dfinal") {
        document.getElementById('variasCosas2').style.display = 'block';
   }
}
````

---
### Ejercicio: Mostrar/Ocultar div
Escribir una función JavaScript para mostrar u ocultar el div celeste.
* Emplear **OnChange** en los radio button
* Los campos deben contener un nombre u ID
* Se debe cambiar el estilo de display

![Mostrar/Ocultar](images/html/mostrarOcultarDiv.png)

---
### Ejercicio: Mostrar/Ocultar div
Escribir una función JavaScript para mostrar u ocultar el div celeste.
<iframe width="560" height="315" src="https://www.youtube.com/embed/mP-S_eqCPYc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

---
### Ejercicio: Mostrar/Ocultar Dialog
- En **productos.html** coloque un botón de "Ver detalle de Producto"
- Al presionar el botón se debe visualizar un **dialog**.
- El dialog debe tener un botón para cerrar.

---
### Ejercicio: Mostrar/Ocultar Dialog

---
## Ejercicio: Operaciones Matemáticas
Escribir funciones JavaScript para resolver las operaciones matemáticas una vez que el usuario ingresa un valor numérico en ambos inputs.
* Se debe castear de tipo String a tipo Number
* Los resultados deben contener el atributo disabled

---
## Ejercicio: Operaciones Matemáticas
![Operaciones Matematicas](images/html/operacionesMatematicas.png)

---
## Ejercicio: Operaciones Matemáticas II
<iframe width="560" height="315" src="https://www.youtube.com/embed/7w3TRLPPIho" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

---
![Meme JS](images/html/meme_js.jpg)

---
## [Math Round](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Math/round)
La función Math.round() retorna el valor de un número redondeado al entero más cercano.
* Si la porción fraccionaría del número es 0.5 o mayor, se redondea al siguiente número entero superior. 
* Si la porción de la fracción del número es menor a 0.5, se redondea al siguiente número entero inferior.
````javascript
console.log(Math.round(200.34))
````  
Por consola veriamos "200"

---
## [Math Random](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Math/random)
La función Math.random() devuelve un número de coma flotante pseudo-aleatorio, comprendido en el rango de 0 a 
menor que 1 (es decir, incluido el 0 pero no el 1), con una distribución aproximadamente uniforme en este rango.
````javascript
console.log(Math.random())
````  
Por consola veriamos:
````javascript
> 0.34963102221109255
> 0.43184160054419074
> 0.6179071257408261
````

---
## Ejemplo: Random y Round
````javascript
let numAleatorio = (a,b) => {
   document.prueba1.textoP.value = Math.round(Math.random()*(b-a)+parseInt(a));
}
````   
       
<form name="prueba1">
    <input style="font-size: 48px;text-align: center;" type="text" size="1" onclick="numAleatorio(1,10)" name="textoP">
</form>

---
## ParseFloat
La función parseFloat() analiza un argumento (si es necesario, lo convierte en una cadena) y devuelve un número de coma flotante.
````javascript
parseFloat(4.567); //4.567
parseFloat(4.36275hdkjfhd); //4.36275
parseFloat(jkdfjsdh); //NaN
````

---
## ParseInt
Convierte (parsea) un argumento de tipo cadena y devuelve un entero de la base especificada.
````javascript
parseInt(4.567); //4
parseInt(856.36275hdkjfhd); //856
parseInt(jkdfjsdh); //NaN
````

---
## toFixed
El método toFixed() formatea un número usando notación de punto fijo.
````javascript
34.67648768736.toFixed(4); //34.6764
"34.67648768736".toFixed(4); //Error: "34.67648768736".toFixed is not a function
Number("34.67648768736").toFixed(4); //34.6764
````

---
## JavaScript: Formulas
<form name="formulas">
    distancia=<input size="1" style="font-size: 28px" type="text" id="dist2">
    <select name="longitud">
        <option value="pulgadas">pulgadas</option>
        <option value="metros">metros</option>
    </select>
    <br>
    angulo=<input size="1" style="font-size: 28px" type="text" id="ang2">
    <select name="angulo2">
        <option value="radianes">radianes</option>
        <option value="grados">grados</option>
    </select>
    <br>
    <button style="font-size: 28px" onclick="calculoFun(dist2.value, ang2.value, longitud.value, angulo2.value)"> Calcular</button>
    <br>
    calculo=<input size="1" style="font-size: 28px" type="text" id="distR" disabled>*Sen<input size="1" style="font-size: 28px" id="angR" disabled>=<input size="1" style="font-size: 28px" type="text" id="result" disabled>
</form>
Nota: Math.sin(ang) se calcula con un valor de ang en radianes

---
## JavaScript: Formulas
````javascript
let calculoFun = (numDist, numAng, longi, angul) => {
    if (isNaN(numDist) || isNaN(numAng)) {
    alert("Los valores ingresados no son numeros");
    } else {
        if (longi === "pulgadas")
            numDist = convertMetros(numDist);
        if (angul === "radianes")
            numAng = convertGrados(numAng);
    document.getElementById("distR").value = numDist;
    document.getElementById("angR").value = numAng;
    document.getElementById("result").value = numDist * Math.sin(numAng * Math.PI / 180);
    }
}
       
let convertMetros = (distPulgadas) => {
    let enMetros = distPulgadas * 0.0254;
    enMetros = Math.round(enMetros * 10000) / 10000;
    return enMetros;
}

let convertGrados = (radianes) => {
    let enGrados = radianes * 180 / Math.PI;
    enGrados = Math.round(enGrados * 10000) / 10000;
    return enGrados;
}
````

---
## Ejercicio: Conversor de Unidades II
Modificar las funciones para que el resultado de la conversión sólo posea 2 decimales.
* Emplear **Math.Round** ó **miVar.toFix(2)** antes de asignar el resultado
* Reemplace ',' por '.' para evitar errores

---
## Ejercicio: Conversor de Unidades II
![Conversor Unidades](images/html/conversorUnidades.png)

---
## Ejercicio: Conversor de Unidades II
<iframe width="560" height="315" src="https://www.youtube.com/embed/a73NqZTeP2g" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

---
## Ejercicio: Operaciones Matemáticas II
Modificar el HTML para quitar los inputs de los resultados. Emplear span, p o div, y en JavaScript, emplear innerHTML.
* Emplear **innerHTML** para asignarle valores a los divs.

---
## Ejercicio: Operaciones Matemáticas II
![Operaciones Matematicas](images/html/operacionesMatematicas.png)

---
## Ejercicio: Operaciones Matemáticas II
<iframe width="560" height="315" src="https://www.youtube.com/embed/Z2eiHH0qGbQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

---

### [innerText](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText)

Representa el contenido de texto que se desea renderizar en un elemento.

Ejemplo de uso:
```js
document.getElementById("saludo").innerText = `Bienvenido/a ${usuario}!!!`
```

---

### [innerHtml](https://www.w3schools.com/jsref/prop_html_innerhtml.asp)

Permite reemplazar el contenido de un nodo con la cadena que se asigne:

Ejemplo de uso:
```js
const tarjeta = `<div class="card">Juego 1: Adivinanzas</div>`;
document.getElementById("principal").innerHtml = tarjeta;
```

---

### Ejercicio: Renderizado Dinámico

1. Cree una "Base de Datos" de los productos que desea vender definiendo los elementos:
````js
const productos=[
    {
        "nombre": "Par de focos redondos",
        "description": "Par de focos de 25cm x 25cm para hacer entrenamiento.",
        "categoria": "Entrenamiento",
        "marca": "Gran Marc",
        "talle:" ["s/talle"],
        "precio": 15000, 
        "imagen": "train/focos.png"
    },
    {
        "nombre: "Dobok Dan",
        "description": "Dobok habilitado para compentencias en torneos internacionales",
        "categoria": "Ropa",
        "marca": "Sasung",
        "talle": ["4","5","6","7","8"],
        "precio": 115000,
        "imagen": "clothes/dobok-dan.png"
    }
];
````

----

### Ejercicio: Renderizado Dinámico

2. Escriba una función Js que se llame cuando la página se carga. Esta función debe
crear una tarjeta `<div>` por cada elemento. Esta tarjeta deberá mostrar la información del producto: nombre, precio y la imagen. (**innerHTML**)

----

### Ejercicio: Renderizado Dinámico

---

### Ejercicio: Renderizado Dinámico del Dialog

2.1. Modificar las funciones desarrolladas previamente para que el contenido del **dialog** varíe
dinámicamente acorde al producto que seleccionó el usuario.

----

### Ejercicio: Renderizado Dinámico del Dialog

---
## [JS: LocalStorage](https://developer.mozilla.org/es/docs/Web/API/Web_Storage_API)

La API de almacenamiento web permite almacenar información de tipo clave/valor.
* **sessionStorage**: mantiene el almacenamiento mientras dure la sesión de la página (mientras el navegador esté abierto, 
incluyendo recargas de página y restablecimientos).
* **localStorage**: el almacenamiento persiste incluso cuando el navegador se cierre y se reabra.

Al invocar uno de éstos, se creará una instancia del objeto Storage, a través del cual los datos pueden ser creados, recuperados y eliminados.

---
## JS: LocalStorage

* **Storage**: Permite crear, recuperar y eliminar datos de un dominio y tipo de almacenamiento (sesión o local) específicos.
* **Window**: Las propiedades **Window.sessionStorage** y **Window.localStorage** proveen acceso a la sesión actual 
del dominio y a objetos Storage locales. Ofrece un manejador de evento Window.onstorage que se dispara cuando un área 
de la memoria cambia (por ejemplo, cuando se almacena un nuevo elemento).
* **StorageEvent**: El evento se dispara en el objeto Window de un documento cuando un área de la memoria cambia.

---
## JS: Ejemplo LocalStorage
HTML
````javascript
<body onload="tomarDatos()">
Esto es una prueba del local storage. <br>
Ingrese su nombre <input type="text" id="NombreUsuarioInput" onchange="guardarNombre(this.value)">
<p>Su nombre es <span id="aCompletar"></span></p>
</body>
````

JavaScript
````javascript
let tomarDatos = () => {
    let nombre = localStorage.getItem("NombreDelUsuario");
    document.getElementById("NombreUsuarioInput").value = nombre;
    document.getElementById("aCompletar").innerHTML = nombre;
}

let guardarNombre = (nombreUsu) => {
    localStorage.setItem("NombreDelUsuario", nombreUsu);
}
````

---
### Ejercicio: Carrito de Compras con localstorage

1. Agregar un botón "Agregar al carrito" en cada tarjeta de producto que permita agregar el producto
a un array. (guardar este array en un localstorage)
2. Agregar una página **carrito.html** que tenga el mismo header, nav, footer y variar el main para visualizar un listado de productos.

---
### Ejercicio: Carrito de Compras con localstorage

---
## Bibliografia xD
[![W3 School](images/html/logo_w3schoolscom.png)](http://www.w3schools.com/js/default.asp)

[![MDN](images/html/logo_MDN.png)](https://developer.mozilla.org/es/docs/Web/JavaScript)

---
## Cursos Online
[![CodeCademy](images/Eventos/codecademy.png)](https://www.codecademy.com/)

[![Acamica](images/Eventos/acamica.jpg)](https://www.acamica.com/)

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