05_introduccion_a_dom.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[![imagenes/pythonista.png](imagenes/pythonista.png)](https://pythonista.io)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Ejecución de código en las celdas de Jupyter. \n",
    "\n",
    "En este capítulo se utilizarán los comandos mágicos ```%%html``` y ```%%javascript``` de la siguiente forma:\n",
    "\n",
    "* En una celda se desplegará código de HTML mediante el comando ```%%html```.\n",
    "* En celdas posteriores se modificarán el contenido de la celda mediante código usando el comando mágico ```%%javascript```."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Ejemplo:**\n",
    "\n",
    "* Se creará un elemento ```<p>``` con atributo ```id=\"ejemplo_1\"```."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%%html\n",
    "<p id=\"ejemplo_1\"></p>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "* Se añadirá un nodo de texto al elemento con identificador ```\"ejemplo_1\"```.\n",
    "\n",
    "**Nota:** El efecto se notará en la celda de arriba."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "let celda_1 = document.getElementById(\"ejemplo_1\");\n",
    "celda_1.append(\"Hola, Mundo.\");"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "##  El Modelo del objeto documento (DOM).\n",
    "\n",
    "Al abrir un documento HTML en cualquier navegador, dicho documento es considerado com un objeto, el  cual a su vez contiene otros objetos o elementos. \n",
    "\n",
    "El modelo del objeto documento (DOM) es una manera estandarizada en la que se puede acceder a los elementos de un documento HTML."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Árbol de nodos.\n",
    "\n",
    "El DOM permite identificar a los elementos de un documento HTML como una serie de nodos que a su vez podrían contener a otros nodos, los cuales se van bifurcando a partir de la raiz del documento al estilo de las ramas de un árbol a partir de su tronco.\n",
    "\n",
    "### Tipos de nodo.\n",
    "\n",
    "* El nodo *document* es el objeto base del DOM y contiene al resto de los nodos.\n",
    "* Elementos, los cuales son objetos instanciados de la clase *Element* y que corresponden a los elementos definidos por las etiquetas HTML de un documento.\n",
    "* Nodos de texto, los cuales sólo contienen cadenas de caracteres.\n",
    "* Nodos de comentarios.\n",
    "* Nodos de atributo.\n",
    "\n",
    "### Jerarquía y \"parentezco de los nodos\".\n",
    "\n",
    "El DOM presenta una estructura similar a la de un árbol genealógico, de tal forma que un nodo puede ser padre (parent) de varios nodos hijos (children) y estos nodos son hermanos (siblings) de sus nodos contiguos en la rama de la que provienen.\n",
    "\n",
    "```\n",
    "padre(parent)\n",
    "| hijos(children)\n",
    "├──elemento\n",
    "├──hermano(sibling)\n",
    "```\n",
    " \n",
    "### Manipulación de nodos y elementos.\n",
    "\n",
    "Mediante el DOM, es posible realizar las siguientes operaciones:\n",
    "\n",
    "* Acceder a los nodos de un documento.\n",
    "* Manipular las propiedades del objeto *document* y los nodos que contiene.\n",
    "* Crear o eliminar elementos y nodos.\n",
    "* Crear relaciones entre los nodos.\n",
    "\n",
    "**NOTA:** El acceso a los elementos de un documento HTML solamente pueden ser realizados sólo hasta que un documento haya sido desplegado por completo por el navegador."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## El objeto *document*.\n",
    "\n",
    "Cada ventana de un navegador crea un objeto llamado *document*, el cual está asignado exclusivamente a dicha vetana y contiene a los objetos creados por el documento HTML al ser cargado. \n",
    "\n",
    "Incluso una ventana vacía cuenta con un objeto *document*."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Algunas propiedades y métodos del objeto *document*.\n",
    "\n",
    "#### Propiedades.\n",
    "\n",
    "* *activeElement*\n",
    "* *alinkColor*\n",
    "* *all* \n",
    "* *anchors*\n",
    "* *applets*\n",
    "* *baseURI* \n",
    "* *bgColor*\n",
    "* *body*\n",
    "* *characterSet*\n",
    "* *charset*\n",
    "* *childElementCount* \n",
    "* *childNodes* \n",
    "* *children* \n",
    "* *compatMode*\n",
    "* *contentType*\n",
    "* *constructor* \n",
    "* *cookie*\n",
    "* *dir* \n",
    "* *doctype*\n",
    "* *documentElement* \n",
    "* *documentURI*\n",
    "* *domain*\n",
    "* *embeds*\n",
    "* *fgColor*\n",
    "* *firstChild* \n",
    "* *firstElementChild* \n",
    "* *fonts*\n",
    "* *forms*\n",
    "* *head*\n",
    "* *hidden* \n",
    "* *images*\n",
    "* *implementation*\n",
    "* *inputEncoding*\n",
    "* *isConnected* \n",
    "* *lastChild*\n",
    "* *lastElementChild*\n",
    "* *lastModified*\n",
    "* *lastStyleSheetSet*\n",
    "* *linkColor*\n",
    "* *links*\n",
    "* *location*\n",
    "* *nextSibling*\n",
    "* *nodeName*\n",
    "* *nodeType*\n",
    "* *nodeValue*\n",
    "* *ownerDocument*\n",
    "* *parentElement*\n",
    "* *parentNode*\n",
    "* *plugins*\n",
    "* *pointerLockElement*\n",
    "* *preferredStyleSheet*\n",
    "* *previousSibling*\n",
    "* *readyState*\n",
    "* *referrer*\n",
    "* *rootElement*\n",
    "* *scripts*\n",
    "* *stylesheets*\n",
    "* *textContent*\n",
    "* *title*\n",
    "* *URL*\n",
    "* *visibilityState*\n",
    "\n",
    "#### Métodos.\n",
    "\n",
    "* *addEventListener()*\n",
    "* *adoptNode()*\n",
    "* *append()*\n",
    "* *appendChild()*\n",
    "* *captureEvents()*\n",
    "* *caretPositionFromPoint()*\n",
    "* *clear()*\n",
    "* *close()*\n",
    "* *cloneNode()*\n",
    "* *compareDocumentPosition()*\n",
    "* *contains()*\n",
    "* *createAttribute()* \n",
    "* *createComment()*\n",
    "* *createElement()*\n",
    "* *createTextNode()*\n",
    "* *clearNode()*\n",
    "* *dispatchEvent()*\n",
    "* *elementFormPoint()*\n",
    "* *elementsFormPoint()*\n",
    "* *enableStyleSheetForSet()*\n",
    "* *evaluate()*\n",
    "* *execCommand()*\n",
    "* *exitPointerLock()*\n",
    "* *getElementsByClassName()*\n",
    "* *getElementById()*\n",
    "* *getElementsByName()*\n",
    "* *getElementsByTagName()*\n",
    "* *getRootNode()*\n",
    "* *getSelection()*\n",
    "* *hasChildNodes()*\n",
    "* *hasFocus()*\n",
    "* *hasOwnProperty()*\n",
    "* *importNode()*\n",
    "* *importEncoding()*\n",
    "* *insertBefore()*\n",
    "* *isDefaultNamespace()*\n",
    "* *isEqualNode()*\n",
    "* *isPrototypeOf()*\n",
    "* *isSameNode()*\n",
    "* *normalize()*\n",
    "* *open()*\n",
    "* *prepend()*\n",
    "* *propertyIsEnumerable()*\n",
    "* *queryCommandEnabled()*\n",
    "* *queryCommandIndeterm()*\n",
    "* *queryCommandState()*\n",
    "* *queryCommandSupported()*\n",
    "* *queryCommandValue()*\n",
    "* *querySelector()*\n",
    "* *querySelectorAll()*\n",
    "* *releaseCapture()*\n",
    "* *releaseEvents()*\n",
    "* *removeChild()*\n",
    "* *removeEventListener()*\n",
    "* *replaceChild()*\n",
    "* *toLocaleString()*\n",
    "* *toSource()*\n",
    "* *toString()*\n",
    "* *valueOf()*\n",
    "* *write()*\n",
    "* *writeline()*"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### El método *document.getRootNode()* .\n",
    "\n",
    "Este método permite acceder al nodo raíz del documento. Un documento HTML5 bien formado tiene como único nodo hijo al elemento *html* y este a su vez a *head* y a *body*.\n",
    "\n",
    "```\n",
    "document\n",
    "├──html\n",
    "   ├──head\n",
    "   ├──body\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Ejemplos en el  navegador:**\n",
    "\n",
    "* Abrir una ventana en blanco dentro de un navegador (se recomienda Firefox).\n",
    "* Seleccionar la consola del navegador a partir de la inspección de los elementos.\n",
    "* Al ejecutar el siguente código el nodo raíz será ligado a la variable *documento*.\n",
    "\n",
    "``` javascript\n",
    "const documento = document.getRootNode();\n",
    "```\n",
    "\n",
    "* Para acceder al elemento *body* del documento HTML se ejecuta lo siguiente:\n",
    "\n",
    "``` javascript\n",
    "documento.body;\n",
    "```\n",
    "\n",
    "Se desplegará el contenido y los atributos del elemento *body*."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%%html\n",
    "<p id=\"ejemplo_2\"></p>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "let ejemplo_2 = document.getElementById(\"ejemplo_2\");\n",
    "let raiz = document.getRootNode();\n",
    "let hijos_raiz = raiz.children;\n",
    "ejemplo_2.textContent = hijos_raiz[0].nodeName;"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Métodos de acceso a elementos de *document*.\n",
    " \n",
    "* *getElementsByTagName()*\n",
    "* *getElementsByName()*\n",
    "* *getElementById()*\n",
    "* *getElementsByClassName()*"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Métodos de creación de nodos.\n",
    "\n",
    "Es posible crear un tipo específico de nodo mediante los siguientes métodos:\n",
    "\n",
    "* createTextNode()\n",
    "* createElement()\n",
    "* createAttribute()\n",
    "* createComment()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Ejemplo:**\n",
    "\n",
    "* Se creará un elemento de tipo *p* y se asignará a la variable *parrafo*.\n",
    "\n",
    "``` javascript\n",
    "parrafo = document.createElement(\"p\");\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Inserción de nodos."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "El método *append()*.\n",
    "\n",
    "```javascript```\n",
    "<elemento_padre>.append(<nodo_hijo>);\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Inserción de elementos.\n",
    "\n",
    "El método *appendChild()* permite añadir al final de un elemento, otro elemento que es ingresado como argumento.\n",
    "\n",
    "```javascript```\n",
    "<elemento_padre>.appendChild(<elemento_hijo>);\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Elementos."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Propiedades y métodos básicos de un elemento.\n",
    "\n",
    "Los elementos contienen múltiples propiedades y métodos, algunos de ellas compartidas con *document*. \n",
    "\n",
    "#### Propiedades.\n",
    "\n",
    "* *accessKey*\n",
    "* *accessKeyLabel*\n",
    "* *align*\n",
    "* *assignedSlot*\n",
    "* *attributes*\n",
    "* *baseURI*\n",
    "* *childElementCount*\n",
    "* *childNodes*\n",
    "* *children*\n",
    "* *classList*\n",
    "* *className*\n",
    "* *clientHeight*\n",
    "* *clientLeft*\n",
    "* *clientTop*\n",
    "* *clientWidth*\n",
    "* *constructor*\n",
    "* *contentEditable*\n",
    "* *contextMenu*\n",
    "* *dataset*\n",
    "* *dir*\n",
    "* *draggable*\n",
    "* *firstChild*\n",
    "* *firstElementChild*\n",
    "* *hidden*\n",
    "* *id*\n",
    "* *innerHTML*\n",
    "* *innerText*\n",
    "* *isConnected*\n",
    "* *isContentEditable*\n",
    "* *lang*\n",
    "* *lastChild*\n",
    "* *lastElementChild*\n",
    "* *localName*\n",
    "* *nextElementSibling*\n",
    "* *nextSibling*\n",
    "* *nodeName*\n",
    "* *nodeType*\n",
    "* *nodeValue*\n",
    "* *offsetHeight*\n",
    "* *offsetLeft*\n",
    "* *offsetParent*\n",
    "* *offsetTop*\n",
    "* *offsetWidth*\n",
    "* *outerHTML*\n",
    "* *ownerDocument*\n",
    "* *parentElement*\n",
    "* *parentNode*\n",
    "* *previousElementSibling*\n",
    "* *previousSibling*\n",
    "* *scrollHeight*\n",
    "* *scrollLeft*\n",
    "* *scrollLeftmax*\n",
    "* *scrollTop*\n",
    "* *scrollWidth*\n",
    "* *style*\n",
    "* *tabIndex*\n",
    "* *tagName*\n",
    "* *textContent*\n",
    "* *title*\n",
    "\n",
    "#### Métodos.\n",
    "\n",
    "* *addEventListener()* \n",
    "* *after()*\n",
    "* *animate()*\n",
    "* *append()*\n",
    "* *appendChild()*\n",
    "* *attachShadow()*\n",
    "* *before()*\n",
    "* *blur()*\n",
    "* *click()*\n",
    "* *cloneNode()*\n",
    "* *closest()*\n",
    "* *compareDocumentPosition()*\n",
    "* *contains()*\n",
    "* *dispatchEvent()*\n",
    "* *focus()*\n",
    "* *getAttribute()*\n",
    "* *getAttributeNames()*\n",
    "* *getAttributeNode()*\n",
    "* *getBoundingClientRect()*\n",
    "* *getClientRects()*\n",
    "* *getElementsByClassName()*\n",
    "* *getElementsByTagName()*\n",
    "* *getRootNode()*\n",
    "* *hasAttribute()*\n",
    "* *hasAttributes()*\n",
    "* *hasChildNodes()* \n",
    "* *hasOwnProperty()*\n",
    "* *hasPointerCapture()*\n",
    "* *insertAdjacentElement()*\n",
    "* *insertAdjacentHTML()*\n",
    "* *insertAdjacentText()*\n",
    "* *insertBefore()*\n",
    "* *isDefaultNamespace()*\n",
    "* *isEqualNode()*\n",
    "* *isPrototypeOf()*\n",
    "* *isSameNode()*\n",
    "* *normalize()*\n",
    "* *prepend()*\n",
    "* *propertyIsEnumerable()*\n",
    "* *querySelector()*\n",
    "* *querySelectorAll()*\n",
    "* *releaseCapture()*\n",
    "* *releasePointerCapture()*\n",
    "* *remove()*\n",
    "* *removeAttribute()*\n",
    "* *removeAttributeNode()*\n",
    "* *removeChild()*\n",
    "* *removeEventListener()*\n",
    "* *replaceChild()*\n",
    "* *replaceWith()*\n",
    "* *requestPointerLock()*\n",
    "* *scroll()*\n",
    "* *scrollBy()*\n",
    "* *scrollIntoView()*\n",
    "* *scrollTo()*\n",
    "* *setAttribute()*\n",
    "* *setAttributeNode()*\n",
    "* *toggleAttribute()*\n",
    "* *toLocaleString()*\n",
    "* *toSource()*\n",
    "* *toString()*\n",
    "* *valueOf()*"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Gestión de atributos de un elemento.\n",
    "\n",
    "#### Listado de los atributos de un elemento.\n",
    "\n",
    "* La propiedad *attributes* regresa un arreglo que contiene los atributos de un elemento.\n",
    "``` javascript\n",
    "<elemento>.attributes;\n",
    "```\n",
    "\n",
    "####  Añadidura o modificación de un atributo.\n",
    "\n",
    "* El método *setAttribute* crea un atributo en el elemento. En caso de que el atributo exista, éste será modificado con el valor ingresado.\n",
    "\n",
    "``` javascript\n",
    "<elemento>.setAttribute(\"<atributo>\", \"<valor>\");\n",
    "```\n",
    "\n",
    "####  Obtención del valor de un atributo.\n",
    "\n",
    "* El método *getAttribute()* regresa el valor de un atributo específico del elemento.\n",
    "\n",
    "``` javascript\n",
    "<elemento>.getAttribute(\"<atributo>\");\n",
    "```\n",
    "\n",
    "####  Eliminación de un atributo.\n",
    "\n",
    "* El método *removeAttribute()* elimina un atributo específico del elemento.\n",
    "\n",
    "``` javascript\n",
    "<elemento>.removeAttribute(\"<atributo>\");\n",
    "```\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Eliminación de un elemento mediante el método *removeChild()*. \n",
    "El método *removeChild()* requiere como argumento al nodo que se va a eliminar. \n",
    "\n",
    "Esta función debe ser invocada desde el elemento padre de ese nodo que se quiere eliminar. La forma más segura y rápida de acceder al nodo padre de un elemento es mediante la propiedad nodoHijo.parentNode .\n",
    "\n",
    "**Nota:** Cuando se elimina un nodo, también se eliminan automáticamente todos los nodos hijos que tenga, por lo que no es necesario borrar manualmente cada nodo hijo."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Búsqueda de elementos en el DOM."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Búsqueda con XPath.\n",
    "\n",
    "Es posible realizar búsquedas con XPath por medio  del método *document.evaluate()* el cual regresará un iterador con el resultado de la búsqueda.\n",
    "\n",
    "https://developer.mozilla.org/en-US/docs/Web/API/Document/evaluate\n",
    "\n",
    "```javascript\n",
    "document.evaluate(\"<expresión XPath>\", <nodo de contexto>, <solucionador de espacio de nombres>, <tipo de resultado>, <resultado alterno>)\n",
    "```\n",
    "\n",
    "* Si se quiere hacer la búsqueda desde la raíz del documento, el nodo de contexto es *document*.\n",
    "* Por lo general el solucionador de espacio de nombres es *null*.\n",
    "* Por lo general el tipo de rfeultado es *XPathResult.ANY_TYPE*.\n",
    "* Por lo general la respuesta alterna es *null*.\n",
    "\n",
    "```javascript\n",
    "document.evaluate(\"<expresión XPath>\", document, null, XPathResult.ANY_TYPE, null)\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Búsqueda con selectores.\n",
    "\n",
    "Es posible buscar elementos mediante selectores utilizando:\n",
    "\n",
    "* *element.querySelector()*, el cual regresa el primer elemento que encuentre.\n",
    "* *element.querySelectorAll()* el cual regresa un arreglo de elementos.\n",
    "\n",
    "```javascript\n",
    "document.querySelector(\"<selector>\");\n",
    "document.querySelectorAll(\"<selector>\");\n",
    "```\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Eventos en el DOM.\n",
    "\n",
    "El DOM permite ligar a los elementos de un documento a acciones que incidan sobre de estos tanto por parte del usuario como de su entorno.\n",
    "\n",
    "### Eventos que pueden capturarse.\n",
    "\n",
    "Existen múltiples eventos, los cuales pueden ser capturados y que pueden ser consultados en:\n",
    "\n",
    "https://www.w3schools.com/jsref/dom_obj_event.asp\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Fases de un evento.\n",
    "\n",
    "Cuando ocurre, un evento puede propagarse y desencadenar diversas acciones no sólo en el elemento que captura al evento, sino incluso a los elementos que contienen a dicho elemento y que también son sensibles al evento. \n",
    "\n",
    "A partir de lo anterior, se definen dos fases en las que se propaga un evento:\n",
    "\n",
    "* Se conoce como *bubbling* a la fase en la que un evento capturado se desencadena desde el elemento más interno, difundiéndose a los elementos de maro orden. Esta es la fase que se ejecuta por defecto.\n",
    "\n",
    "* Se conoce como *capturing* cuando un evento capturado se desencadena desde el elemento más externo, difundiéndose a los elementos de orden inferior."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Adición de un evento a un elemento del DOM.\n",
    "\n",
    "El método *addEventListener()* permite ligar uno o varios eventos a un elemento del DOM e incluso directamente al objeto *document*.\n",
    "\n",
    "``` \n",
    "<elemento>.addEventListener(<evento>, <funcion>, <useCapture>); \n",
    "```\n",
    "\n",
    "El método ejecuta una función definida como argumento en caso de que ocurra el evento definido.\n",
    "\n",
    "El parámetro *useCapture* define la fase que se utilizará. En caso de que tenga un valor igual a *true* se define capturing y en caso de ser *false*, se define bubbling."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Ejemplo:**\n",
    "\n",
    "Se creará un elemento *div* con *id=\"boton\"* que corresponde a una superficie cuadrada de color gris."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%%html\n",
    "\n",
    "<style>\n",
    "    #boton\n",
    "    {\n",
    "        width: 50px;\n",
    "        height: 50px;\n",
    "        background-color: grey;\n",
    "        color: white;\n",
    "        text-align: center;\n",
    "    }\n",
    "</style>\n",
    "<div id=\"boton\"><div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "La siguente celda definirá acciones para los siguientes eventos que ocurran sobre el elemento con *id=\"boton\"*.\n",
    "* Cuando se le de click al elemento, éste cambiará a color negro.\n",
    "* Cuando se coloque el mouse encima del elemento, este desplegará un mensaje.\n",
    "* Cuando el mouse no se sitúe encima del elemento, no deplegará ningún mensaje."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%%javascript\n",
    "\n",
    "let boton = document.getElementById(\"boton\");\n",
    "boton.addEventListener(\"click\", function(){boton.style.backgroundColor=\"black\"});\n",
    "boton.addEventListener(\"mouseover\", function(){boton.textContent=\"¡Hola!\"});\n",
    "boton.addEventListener(\"mouseout\", function(){boton.textContent=\"\"});"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<p style=\"text-align: center\"><a rel=\"license\" href=\"http://creativecommons.org/licenses/by/4.0/\"><img alt=\"Licencia Creative Commons\" style=\"border-width:0\" src=\"https://i.creativecommons.org/l/by/4.0/80x15.png\" /></a><br />Esta obra está bajo una <a rel=\"license\" href=\"http://creativecommons.org/licenses/by/4.0/\">Licencia Creative Commons Atribución 4.0 Internacional</a>.</p>\n",
    "<p style=\"text-align: center\">&copy; José Luis Chiquete Valdivieso. 2019.</p>"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}