class: center, middle, inverse

# Javascript
### DOM

.footnote[Mateu Yábar]

---
# DOM api
- [Web referencia](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)

---
# Seleccionar element del DOM

```javascrript
const button = document.querySelector("#myButton"); // Un element
const buttons = document.querySelectorAll("button"); // Molts elements

const elem1 =document.getElementById("id")
const elem2 =document.getElementsByClassName("className")
const elem3 =document.getElementsByTagName("tagName")
```

---
# Afegir un event

```javascript
const button = document.querySelector("#myButton");
button.addEventListener("click", updateName);
function updateName() {
  button.textContent = "Hello Javascript";
}
```

```javascript
const buttons = document.querySelectorAll("button");
for (const button of buttons) {
  button.addEventListener("click", updateName);
}
function updateName() {
  button.textContent = "Hello Javascript";
}
```

---
# Modificació d'elements del DOM
```
element.textContent
element.innerHTML
input.value

element.setAttribute(attribute, value)
element.getAttribute(attribute)
```

---
# Exercicis
- HelloName
- One button clicked

---
# Modificar estil
```javascript
element.style

element.style.backgroundColor = "blue";
element.style.border = "1px solid blue";
```

---
# Modificar classes
```javascript
element.classList.add(className)
element.classList.remove(className)
element.classList.toggle(className)
element.classList.contains(className)
```

---
# Exercicis
- Highlight Welcome
- Highlight welcome as class

---
# Creació i eliminació d'elements
```
const node = document.createElement(tagName);
parentElement.appendChild(node);

node.remove();
```

---
# Templates

```javascript
const template = document.createElement('template');
template.innerHTML = "<ul><li>it1</li><li>it2</li></ul>";
const node = template.content.firstElementChild;
container.appendChild(node);
```

---
# funció anònima
- S'utilitzen una sola vegada o com a callbacks.
- Són útils quan necessitem passar una funció com a argument d'una altra funció ( event listener , map, filter...).
```
const sayHello = function() {
  console.log('Hi!');
 };
sayHello();
```

```javascript
button.addEventListener("click", function() {
  console.log('Hi!');
});
```

---
# Funció fletxa

```
const sayHello = () => {
  console.log('Hello!');
};
sayHello();
```

- Permet una sintaxi concisa.
- Si la funció té un sol retorn, es pot ometre la paraula clau return i els claudàtors {}
-
```
button.addEventListener("click", () => console.log("HELLO"));
```

---
# Exercicis
- ItemList
- ItemListWithRemove

---
# Events en JavaScript
- Són accions o successos que ocorren en una pàgina web.
- Causades per:
    - accions de l'usuari.
    - esdeveniments del sistema.
- Es gestionen amb:
    - __event listeners__ : escolten o esperen el succés.
    - __callbacks__: acció que es duu a terme després de l'event.

```
element.addEventListener('event', callback);
element.removeEventListener('click', callback);
```
---
# Principals tipus d'events
- Events de ratolí: click, dblclick, mouseover, mouseout, mousemove, contextmenu.
- Events de teclat: keydown, keyup, keypress.
- Events de formulari: __submit__, change, focus, blur, input.
- Events de la finestra: load, resize, scroll.
- Events de DOM: DOMContentLoaded, animationend, transitionend, error.

Nota: en un formulari s'ha de validar en un event de submit

---
# Funcions de manipulació de CSS
```
window.getComputedStyle(element) // Retorna un objecte amb els valors CSS computats d'un element.
```