class: center, middle, inverse

# Javascript
### Introducció

.footnote[Mateu Yábar]

---
# Javascript

![javascript](execution.png)

---
# Javascript
- web: - HTML/CSS/Javascript
- Utilitats de javascript
    - Modificar dinàmicament l'HTML per actualitzar l'interficie d'usuari.
- Com
    - A través de l'API del model d'objectes del document: DOM
- També es pot utilitzar com a llenguatge fora d'entorn client.

---
# Javascript
- Llenguatge client
  - S'executa al navegador
- El codi de cada pestanya s'executa de forma completament independent.
  - El codi d'una pestanya no pot afectar el codi d'altres pestanyes.
- Llenguatge interpretat

---
# Hello world

```html
<button type="button" id="#myButton">Hello world!</button>
<script>
    const button = document.querySelector("#myButton");
    button.addEventListener("click", updateName);
    function updateName() {
        button.textContent = "Hello Javascript";
    }
</script>
```

---
# Hello world en fitxer js

```html
<head>
  <script src="jssample.js" type="module"></script>
</head>
<body>
    <button type="button" id="#myButton">Hello world!</button>
</body>
```

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

---
# Consola de desenvolupament
- Navegador té una consola interactiva.