{
  "name": "The DOM",
  "order": 1,
  "time": "30 minutes",
  "challenges": [
    {
      "id": "56b15f15632298c12f31518f",
      "title": "The DOM: What's the Document Object Model?",
      "description": [
        "The DOM is the browser's internal, programmatic representation of a webpage. Languages like JavaScript allow you to modify the DOM, and thus the website without editing the HTML of the page.",
        "Technically, the DOM is an API (application programming interface). There are many types of APIs, but this particular API interacts with XML and HTML documents. It's in charge of how those documents are accessed and manipulated.",
        "Really, you can do a lot with the DOM, and if you're already scripting in JS and jQuery, you're already doing it.",
        "You can insert new things, elements, or alter style or content for elements that already exist.",
        "This can be done with pure JavaScript, like: document.getElementById(id), element.getElementsByTagName(name), or document.createElement(name).",
        "You can also use libraries like jQuery to simplify, standardize and automate manipulating the DOM, like: $('#box2').append('This will be added to box2!')"
      ],
      "challengeSeed": [
        "80Mr2Z6Qikc"
      ],
      "tests": [
        [
          "The DOM is complex and difficult to access.",
          false,
          "The DOM is easily accessed and manipulated with JavaScript and jQuery."
        ],
        [
          "The DOM is an API that is a part of the browser.",
          true
        ]
      ],
      "type": "hike",
      "challengeType": 6,
      "translations": {
        "es": {
          "title": "El DOM: ¿Qué es el Modelo de objetos del documento?",
          "description": [
            "El DOM es la representación interna y programática de una página web del navegador. Lenguajes como javascript te permiten modificar el DOM, y por lo tanto el sitio web, sin editar el código HTML de la página.",
            "Técnicamente, el DOM es un API (interfaz de programación de aplicaciones). Hay varios tipos de APIs, pero este API en particular interactúa con documentos XML y HTML. Está a cargo de cómo se accesan y se manipulan esos documentos.",
            "De hecho, puedes hacer muchas cosas con el DOM. De hecho, ya lo estás haciendo desde el momento en que estás escribiendo código en JS y jQuery.",
            "Puedes insertar nuevos elementos, o cambiar el estilo o contenido de los elementos previamente existentes.",
            "Esto se puede hacer con javascript puro, como: document.getElementById(id), element.getElementsByTagName(name), o document.createElement(name).",
            "También puedes usar librerías como jQuery para simplificar, estandarizar y automatizar la manipulación del DOM, como por ejemplo: $('#caja2').append('Esto se agregará a caja2!')"
          ]
        }
      }
    },
    {
      "id": "56b15f15632298c12f31518e",
      "title": "The DOM: Style in the Header, Script in the Footer",
      "description": [
        "Maybe you've been told that links to style sheets (CSS) should be included in the header and that links to script (JS) should be included in the footer. Ever asked yourself why?",
        "If you've ever seen a webpage that loads the text first, then after a bit loads the formatting and style, you've seen a page that didn't have the links to style and script in the correct places.",
        "This all has to do with how the browser decides it's loaded enough information to display. There's an event called 'DOMContentLoaded', and once that event happens, whatever is loaded will be displayed.",
        "The DOM will tell the browser it's ready once the HTML is loaded, and sometimes the CSS and JS hasn't caught up. However, if you place the CSS in the header and the JS in the footer, you can ensure that all content will be loaded before the DOM triggers the 'DOMContentLoaded' event, the event that shows the user your content.",
        "This is a simple explanation, as most of these videos are. For more information, I really liked this resource: <a href='http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload' target='_blank'>ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload</a>"
      ],
      "challengeSeed": [
        "i1rQi9Maem8"
      ],
      "tests": [
        [
          "Placing the style in the header and the script in the footer ensures the page is loaded for the user as you want it to appear.",
          true
        ],
        [
          "The CSS link should go in the header and the JS link should go in the footer. If you don't do it just that way, the webpage will crash.",
          false,
          "The webpage won't necessarily crash, but it might load in an unattractive or dysfunctional way."
        ]
      ],
      "type": "hike",
      "challengeType": 6,
      "translations": {
        "es": {
          "title": "El DOM: Estilo en el encabezado, código al pie de página",
          "description": [
            "Creo que ya te habrán dicho que los enlaces a código de estilo (CSS) deben ser incluidos en el encabezado (<code>header</code>) y que los enlaces al código (JS) deben estar incluidos al pie de página (<code>footer</code>). ¿Alguna vez te preguntaste por qué?",
            "Si alguna vez has visto una página web que carga el texto primero, y después de un momento carga el formato y el estilo, entonces era una página que no tenía los enlaces hacia el estilo y el código en los lugares correctos.",
            "Esto tiene que ver con la forma en que el navegador decide si ha cargado suficiente información para mostrar. Hay un evento llamado 'DOMContentLoaded', y una vez que ese evento ocurre, lo que sea que se haya cargado hasta entonces será mostrado.",
            "El DOM le dirá al navegador que está listo una vez que el código HTML ha sido cargado, y a veces el CSS y JS no se han alcanzado a cargar. Si pones el CSS en el encabezado y el JS al pie de página, puedes estar seguro que todo el contenido será cargado antes que el DOM desencadene el evento 'DOMContentLoaded', el cual muestra tu contenido al usuario.",
            "Esta es una explicación simplificada, al igual que la que encontrarás en el resto de estos videos. Si quieres más información, creo que el siguiente enlace es de bastante ayuda: <a href='http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload' target='_blank'>ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload</a>"
          ]
        }
      }
    }
  ]
}