<commit_before>---
categories: [presentaciones, nivel3]
title: "(nivel 3) Sesión 1: programando la web con el DOM"
layout: slideshow
---

class: center, middle, inverse

# DOM: programando la web 

---

## Qué es el DOM?

* **D**ocument **O**bject **M**odel: el _documento_ tratado como un _objeto_
* Sí, un objeto de javascript
* Una interfaz estándar que permite presentar, inspeccionar y manipular documentos HTML
* JS en los browsers trae una implementación del estándar.

---

class: center, middle 

# HTML

---

## HTML: términos útiles

* _Hypertex Markup Language_: una forma de especificar la **estructura** de un documento.
* **Elements (Elementos)**: componentes de una página
* **Tags (etiquetas)**: marcan el inicio/fin de un elemento. Algunos elementos pueden *contener* otros elementos.
* **Attributes (atributos)**: información adicional acerca de un elemento.
* **Documents (documentos)**: una estructura de html con un elemento principal: `html`, una cabeza (`head`) y un cuerpo (`body`)
* El elemento `head` tiene información *acerca* del documento, `body` es el documento en sí.
* Componentes especiales: doctype y comentarios.
* **Doctype**: declara la versión de html.
* Vamos a estar hablando de [HTML 5](http://diveintohtml5.info/).
* Todos los ejemplos pueden ser copiados a [thimble](https://thimble.webmaker.org/)

---
## HTML: un documento de ejemplo

[Click aquí para verlo en el browser](http://www.rizomas.org/javascript/codigo/ejemplo.html)

```html
<!doctype html>
<!-- el de arriba es el doctype para html 5 -->
<html>
<!-- el espacio en blanco no importa: la indentación es una ayuda visual -->
  <head>
      <!-- el tag meta tiene información útil para el cliente (e.g. un browser)-->
      <meta charset="utf-8" />
      <title>Demo de HTML</title>
  </head>
  <body>
      <h1>Hola HTML!</h1>
      <p>
        Este es un párrafo con algo <em>enfatizado</em>
        y algo en <strong>negritas</strong>.
        Algunos elementos tienen atributos:
        <a href="http://www.rizomas.org/javascript/codigo/ejemplo.html">
          click aquí para ver esta página en el browser
        </a>
      </p>
  </body>
</html>
```
---

## HTML: otros elementos notables

* Listas [ordenadas](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol), [sin orden](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) y [de definiciones](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl)
* Elementos sin una representación, para organizar: [`div`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) y [`span`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span)
* Elementos editoriales como `header`, `footer`, `abbr`, etc; explicados en la [referencia de mozilla](https://developer.mozilla.org/en-US/docs/Web/HTML/Element). Algunos son [nuevos de html 5](http://diveintohtml5.info/peeks-pokes-and-pointers.html)

---

## HTML: formularios

[Click aquí para verlo en el browser](http://www.rizomas.org/javascript/codigo/ejemplo_formulario_simple.html).
Referencia sobre formularios [en mozilla](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)

```html
<!doctype html>
<html>
  <head>
      <title>Demo de Formularios</title>
  </head>
  <body>
    <form action="">
      <label for="GET-nombre">Nombre:</label>
      <input id="GET-nombre" type="text" name="name">
      <input type="submit" value="Save">
    </form>
  </body>
</html>
```

[Click acá para un formulario más complejo](http://www.rizomas.org/javascript/codigo/ejemplo_formulario_simple.html) (tomado de la [guía de formularios de mozilla](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form))

---

class: center, middle 

# DOM

---



## Referencias

* [Introducción a HTML, por mozilla](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction)
* ["Dive into HTML5": introducción a lo nuevo en html 5](http://diveintohtml5.info/)
* [Referencia de HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference)
* [Introducción al DOM, por mozilla](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)
* Capítulos sobre el [browser](http://eloquentjavascript.net/12_browser.html), [DOM](http://eloquentjavascript.net/13_dom.html), [eventos](http://eloquentjavascript.net/14_event.html) y [formularios](http://eloquentjavascript.net/18_forms.html)
* [Guía sobre formularios de mozilla](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms)<commit_msg>medio termina la presentación sobre el DOM<commit_after>---
categories: [presentaciones, nivel3]
title: "(nivel 3) Sesión 1: programando la web con el DOM"
layout: slideshow
---

class: center, middle, inverse

# DOM: programando la web 

---

class: center, middle 

# HTML

---

## HTML: términos útiles

* _Hypertex Markup Language_: una forma de especificar la **estructura** de un documento.
* **Elements (Elementos)**: componentes de una página
* **Tags (etiquetas)**: marcan el inicio/fin de un elemento. Algunos elementos pueden *contener* otros elementos.
* **Attributes (atributos)**: información adicional acerca de un elemento.
* **Documents (documentos)**: una estructura de html con un elemento principal: `html`, una cabeza (`head`) y un cuerpo (`body`)
* El elemento `head` tiene información *acerca* del documento, `body` es el documento en sí.
* Componentes especiales: doctype y comentarios.
* **Doctype**: declara la versión de html.
* Vamos a estar hablando de [HTML 5](http://diveintohtml5.info/).
* Todos los ejemplos pueden ser copiados a [thimble](https://thimble.webmaker.org/)

---
## HTML: un documento de ejemplo

[Click aquí para verlo en el browser](http://www.rizomas.org/javascript/codigo/ejemplo.html)

```html
<!doctype html>
<!-- el de arriba es el doctype para html 5 -->
<html>
<!-- el espacio en blanco no importa: la indentación es una ayuda visual -->
  <head>
      <!-- el tag meta tiene información útil para el cliente (e.g. un browser)-->
      <meta charset="utf-8" />
      <title>Demo de HTML</title>
  </head>
  <body>
      <h1>Hola HTML!</h1>
      <p>
        Este es un párrafo con algo <em>enfatizado</em>
        y algo en <strong>negritas</strong>.
        Algunos elementos tienen atributos:
        <a href="http://www.rizomas.org/javascript/codigo/ejemplo.html">
          click aquí para ver esta página en el browser
        </a>
      </p>
  </body>
</html>
```
---

## HTML: otros elementos notables

* Listas [ordenadas](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol), [sin orden](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) y [de definiciones](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl)
* Elementos sin una representación, para organizar: [`div`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) y [`span`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span)
* Elementos editoriales como `header`, `footer`, `abbr`, etc; explicados en la [referencia de mozilla](https://developer.mozilla.org/en-US/docs/Web/HTML/Element). Algunos son [nuevos de html 5](http://diveintohtml5.info/peeks-pokes-and-pointers.html)

---

## HTML: formularios

[Click aquí para verlo en el browser](http://www.rizomas.org/javascript/codigo/ejemplo_formulario_simple.html).
Referencia sobre formularios [en mozilla](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)

```html
<!doctype html>
<html>
  <head>
      <title>Demo de Formularios</title>
  </head>
  <body>
    <form action="">
      <label for="GET-nombre">Nombre:</label>
      <input id="GET-nombre" type="text" name="name">
      <input type="submit" value="Save">
    </form>
  </body>
</html>
```

[Click acá para un formulario más complejo](http://www.rizomas.org/javascript/codigo/ejemplo_formulario_complejo.html) (tomado de la [guía de formularios de mozilla](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form))

---

class: center, middle 

# DOM

---

## Qué es el DOM?

* **D**ocument **O**bject **M**odel: el _documento_ tratado como un _objeto_
* Sí, un objeto de javascript.
* Una interfaz estándar que permite presentar, inspeccionar y manipular documentos HTML.
* Completamente orientada a objetos (todo elemento tiene atributos y métodos).
* JS en los browsers trae una implementación del estándar.

---

## DOM: visualizando la estructura

```html
<!doctype html>
<html>
  <head>
    <title>My home page</title>
  </head>
  <body>
    <h1>My home page</h1>
    <p>Hello, I am Marijn and this is my home page.</p>
    <p>I also wrote a book! Read it
      <a href="http://eloquentjavascript.net">here</a>.</p>
  </body>
</html>
```

---

## DOM: visualizando la estructura:

![tradicional](http://eloquentjavascript.net/img/html-boxes.svg)

---

## DOM: visualizando la estructura:

* `document.documentElement`: la _raíz_ del árbol.
* cada elemento en el árbol es un "nodo". Y tiene descendientes (children); y éstos, "hermanos" (siblings) al mismo nivel.

![arbol](http://eloquentjavascript.net/img/html-tree.svg)

---

## DOM: navegando el árbol

* los nodos tienen métodos para llegar a otros nodos.
* los "hijos" de un nodo son instancias de `NodeList`, no verdaderos arreglos.

![traverse](http://eloquentjavascript.net/img/html-links.svg)

---

## DOM: ejemplo de navegar el árbol

```javascript
function talksAbout(node, string) {
  //cada nodo tiene una propiedad que tiene un número que lo
  //identifica con un cierto tipo de nodo
  if (node.nodeType == document.ELEMENT_NODE) {
    for (var i = 0; i < node.childNodes.length; i++) {
      if (talksAbout(node.childNodes[i], string))
        return true;
    }
    return false;
  } else if (node.nodeType == document.TEXT_NODE) {
    return node.nodeValue.indexOf(string) > -1;
  }
}

console.log(talksAbout(document.body, "book"));
```
---

## DOM: encontrando elementos:

[Aquí en jsFiddle](http://jsbin.com/wirobegofo/1/edit?html,css,js,console)

```html
<ol id="gente">
  <li class="escritor"><NAME></li>   
  <li class="compositor" id="varesse"><NAME></li>   
  <li class="escritor"><NAME></li>   
  <li class="fisico"><NAME></li>   
<ol>
<script>
   function toArray(a){
     return Array.prototype.slice.apply(a);
   }
   var gente = document.getElementsByTagName("li");
   var escritores = document.getElementsByClassName("escritor");
   var varesse = document.getElementById("varesse");
   var nombres_escritores = toArray(escritores).map(function(node){
     return node.textContent;
   });
   console.log(nombres_escritores);
</script>

```
Uno puede encontrar elementos de formas aún más sofisticadas con [`querySelectorAll`](https://developer.mozilla.org/en/docs/Web/API/Document.querySelectorAll), que usa [selectores de CSS](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors)

---

## DOM: manipulando el documento

Un nodo solo puede existir en un lugar.

```html
<div id="move">
<p>One</p>
<p>Two</p>
<p>Three</p>
</div>

<div id="replace">
<p>One</p>
<p>Two</p>
<p>Three</p>
</div>

<script>
  var move = document.getElementById("move");
  var paragraphs = move.getElementsByTagName("p");
  move.insertBefore(paragraphs[2], paragraphs[0]);

  var replace = document.getElementById("replace");
  var paragraphs = replace.getElementsByTagName("p");
  replace.replaceChild(paragraphs[2], paragraphs[0]);
</script>
```

---

## DOM: creando elementos

```html
<p>The <img src="img/cat.png" alt="Cat"> in the
  <img src="img/hat.png" alt="Hat">.</p>

<script>
  function replaceImages() {
    var images = document.body.getElementsByTagName("img");
    //va al revés para no alterar elementos al principio
    for (var i = images.length - 1; i >= 0; i--) {
      var image = images[i];
      if (image.alt) {
        var paragraph = document.createElement("p");
        var text = document.createTextNode(image.alt);
        paragraph.appendChild(text);
        image.parentNode.replaceChild(paragraph, image);
      }
    }
  }
  replaceImages();
</script>
```

---

## DOM: atributos

```html
<ol id="gente">
  <li class="escritor" data-especialidad="ficción"><NAME></li>   
  <li class="compositor" id="varesse" data-especialidad="postmodernismo"><NAME></li>   
  <li class="escritor" data-especialidad="realismo mágico"><NAME></li>   
  <li class="fisico" data-especialidad="electromecánica"><NAME></li>   
<ol>
<script>
   function toArray(a){
     return Array.prototype.slice.apply(a);
   }
   var gente = document.getElementsByTagName("li");
   var especialidades = toArray(gente).map(function(node){
     return node.textContent+
	" ("+node.className + "): " +
	node.getAttribute("data-especialidad");
   });
   console.log(especialidades);
</script>
```
---

## Eventos

Los eventos se "publican" y son "escuchados" por **handlers**

```html
<button>Click me</button>
<button onclick="console.log('inline event!')">And me!</button>
<p>No handler here.</p>
<script>
  var button = document.querySelector("button");
  function once(){
    console.log("Button clicked.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>
```

---

## Eventos como objetos

Como todo, también son [objetos](https://developer.mozilla.org/en-US/docs/Web/API/Event)

```html
<button>A</button>
<button>B</button>
<button>C</button>
<script>
  document.body.addEventListener("click", function(event) {
    if (event.target.nodeName == "BUTTON")
      console.log("Clicked", event.target.textContent);
  });
</script>
```

---

## Eventos: acciones por defecto

```html
<a href="https://developer.mozilla.org/">MDN</a>
<script>
  var link = document.querySelector("a");
  link.addEventListener("click", function(event) {
    console.log("Nope.");
    event.preventDefault();
  });
</script>
```

---

## Simplificando todo:

[introducción rápida a jQuery](http://learn.jquery.com/about-jquery/how-jquery-works/).
O una [guía más comprensiva](http://learn.jquery.com/using-jquery-core/)

---

## Referencias

* [Introducción a HTML, por mozilla](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction)
* ["Dive into HTML5": introducción a lo nuevo en html 5](http://diveintohtml5.info/)
* [Referencia de HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference)
* [Introducción al DOM, por mozilla](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)
* Capítulos sobre el [browser](http://eloquentjavascript.net/12_browser.html), [DOM](http://eloquentjavascript.net/13_dom.html), [eventos](http://eloquentjavascript.net/14_event.html) y [formularios](http://eloquentjavascript.net/18_forms.html)
* [Guía sobre formularios de mozilla](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms)
* [Referencia de eventos en el DOM](https://developer.mozilla.org/en-US/docs/Web/Reference/Events)
* [El objeto Event](https://developer.mozilla.org/en-US/docs/Web/API/Event)
* [Guía de Web APIs](https://developer.mozilla.org/en-US/docs/Web/Guide/API)
* [usando jQuery](http://learn.jquery.com/using-jquery-core/)
{'fraction_non_alphanumeric': 0.16201154382007563, 'fraction_numerical': 0.003648908644596298, 'mean_word_length': 4.077130346918154, 'pattern_counts': {'":': 2, '<': 173, '<?xml version=': 0, '>': 174, 'https://': 33, 'lorem ipsum': 0, 'www.': 8, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7385848', 'n_tokens_mistral': 5375, 'n_tokens_neox': 5200, 'n_words': 1233}