Domina el DOM con JavaScript
4.1 (27 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
212 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Domina el DOM con JavaScript to your Wishlist.

Add to Wishlist

Domina el DOM con JavaScript

Crea tus aplicaciones con JavaScript sin límites
4.1 (27 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
212 students enrolled
Last updated 11/2016
Spanish
Curiosity Sale
Current price: $10 Original price: $20 Discount: 50% off
30-Day Money-Back Guarantee
Includes:
  • 4.5 hours on-demand video
  • 10 Articles
  • 10 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • El alumno revisará la historia, las bases y las herramientas para el estudio del DOM.
  • El alumno conocerá los arreglos y métodos del DOM original.
  • El alumno conocerá y aplicará los métodos del DOM para acceder a los nodos de su documento HTML.
  • El alumno conocerá las propiedades de los nodos y la forma de modificarlos.
  • El alumno aprenderá a crear, modificar y eliminar los nodos de un documento con las instrucciones DOM.
  • El alumno aprenderá a utilizar las propiedades DOM para navegar en el documento.
  • El alumno aprenderá los diferentes modelos de captura de eventos y su forma de aplicarlos.
  • El alumno aplicará los eventos del DOM desde JavaScript para realizar aplicaciones.
  • El alumno aprenderá a utilizar los eventos DOM de un formulario.
View Curriculum
Requirements
  • Tener conocimientos generales de HTML y CSS.
  • Tener conocimientos generales de JavaScript.
Description

JavaScript se ha convertido rápidamente en uno de los lenguajes más utilizados para el desarrollo de aplicaciones en Internet es incluso es utilizado para el desarrollo de aplicaciones para dispositivos móviles. Una área de suma importancia para el completo aprovechamiento de este lenguaje es el dominio de las instrucciones, propiedades y eventos que se encuentran al rededor del DOM o Document Object Model.

Este curso no es un curso básico de JavaScript. Usted debe tener conocimientos básicos del mismo, pues no se explicarán cosas esenciales como lo ciclos, las variables o estructuras condicionales, así como conocer las etiquetas y las reglas de estilo, sin necesidad de ser un experto.

El objetivo de este curso es aprender los métodos, propiedades y eventos relacionados con el DOM, y algunos ejemplos, como el desarrollo de un sencillo juego de cajita de números o una página en parallax.

Para poder sacarle mayor provecho a este curso, usted debe tener algún editor de código como Aptana, SublimeText o Brackets, pero puede seguirnos con cualquier otro.. Los objetivos generales son:

  • El alumno revisará la historia, las bases y las herramientas para el estudio del DOM.
  • El alumno conocerá los arreglos y métodos del DOM original.
  • El alumno conocerá y aplicará los métodos del DOM para acceder a los nodos de su documento HTML.
  • El alumno conocerá las propiedades de los nodos y la forma de modificarlos.
  • El alumno aprenderá a crear, modificar y eliminar los nodos de un documento con las instrucciones DOM.
  • El alumno aprenderá a utilizar las propiedades DOM para navegar en el documento.
  • El alumno aprenderá los diferentes modelos de captura de eventos y su forma de aplicarlos.
  • El alumno aplicará los eventos del DOM desde JavaScript para realizar aplicaciones.
  • El alumno aprenderá a utilizar los eventos DOM de un formulario.

 Cuenta con lo apuntes en formato PDF y los ejercicios del curso al final del mismo.

Who is the target audience?
  • Desarrolladores web con conocimientos generales de JavaScript
Students Who Viewed This Course Also Viewed
Curriculum For This Course
80 Lectures
04:34:33
+
Bienvenida al curso Domina el DOM con JavaScript
1 Lecture 04:56

JavaScript se ha convertido rápidamente en uno de los lenguajes más utilizados para el desarrollo de aplicaciones en Internet es incluso es utilizado para el desarrollo de aplicaciones para dispositivos móviles. Una área de suma importancia para el completo aprovechamiento de este lenguaje es el dominio de las instrucciones, propiedades y eventos que se encuentran al rededor del DOM o Document Object Model.

Este curso no es un curso básico de JavaScript. Usted debe tener conocimientos básicos del mismo, pues no se explicarán cosas esenciales como lo ciclos, las variables o estructuras condicionales, así como conocer las etiquetas y las reglas de estilo, sin necesidad de ser un experto.

El objetivo de este curso es aprender los métodos, propiedades y eventos relacionados con el DOM, y algunos ejemplos, como el desarrollo de un sencillo juego de cajita de números o una página en parallax.


Preview 04:56
+
Introducción al estudio del DOM
7 Lectures 24:13

Historia Document Object Model

  • DOM Level 0: Netscape 2 y 3 (DOM heredado).
  • DOM Level 1: publicada en 1998.
  • DOM Level 2: publicada en 2000.
  • DOM Level 3: publicada en 2004.
  • DOM Level 4: se esperaba como recomendación oficial en 2016.

(las fechas son aproximadas)

Preview 03:08

¿Qué es DOM?

  • El modelo de representación de documentos o DOM (Document Object Model) es la forma en que podemos representar un documento.
  • Las mismas reglas las podremos utilizar en documentos XML.
  • Por "documento" no se refiere a un documento tipo Word, si no a una página en HTML.
  • El DOM determina la relación entre etiquetas, atributos y textos en una página.
  • Los navegadores interpretan y organizan el HTML como una estructura DOM.
¿Qué es el DOM?
02:33

  • El modelo de representación de documentos o DOM (Document Object Model) es la forma en que podemos representar un documento.
  • Las mismas reglas las podremos utilizar en documentos XML.
  • Por "documento" no se refiere a un documento tipo Word, si no a una página en HTML.
  • El DOM determina la relación entre etiquetas, atributos y textos en una página.
  • Los navegadores interpretan y organizan el HTML como una estructura DOM.
  • Podemos representar una página en el modelo DOM como un árbol genealógico, por ejemplo:
  • A las etiquetas les llamaremos elementos o nodos.
  • Tenemos una etiqueta raíz o root <html>
  • Todo nodo tendrá un nodo “padre”.
  • Los nodos del mismo padre serán hermanos o “sibling”.
  • Los nodos que tienen un nodo padre se llaman hijos o “children”.

En HTML y XML TODO es un nodo.

¿Cómo podemos representar el DOM?
04:24

Los tipos de nodos en DOM
02:37

  • Con los navegadores modernos podemos inspeccionar una página web, así como ver el código fuente.
  • Desde la consola podemos añadir, modificar o borrar nodos dentro de la página.
  • Botón derecho para inspeccionar la página.
  • En las PCs puedes pulsar la tecla F12.
  • Cmd+Option+I en Mac
  • Ctrl+Mayúscula+I en PC
  • Para manejar el DOM necesitaremos el panel “Elementos”  y “Consola”.
  • Cmd+Option+J en Mac
  • Ctrl+Mayúscula+J en PC
  • Con Escape puede abrir las dos ventanas en forma simultánea.
  • dir(document.body.childNodes)
  • $(“#main”) (selecciona como en CSS)
Herramienta para explorar el árbol DOM y sus nodos
05:55

  • console.log(document.querySelector(“#main”));
  • console.dir(document.querySelector(“#main”));
  • console.info(“Hola, cara de bola”);
  • console.warn(“Hola, cara de bola”);
  • console.error(“Hola, cara de bola”);
  • console.group(“Links”);
  • console.dir(document.querySelectorAll(“a”));
  • console.groupEnd();
Los mensajes de la consola desde JavaScript
05:34

Apuntes de la sección : Introducción al estudio del DOM

Apuntes de la sección : Introducción al estudio del DOM
00:02
+
El DOM 0, legado o heredado
12 Lectures 32:33

Document Object Model Heredado o Legado

  • document.anchors
  • document.body
  • document.documentElement
  • document.embeds
  • document.forms
  • document.head
  • document.images
  • document.links
  • document.url
  • document.title
  • document.cookie
  • document.write()
  • document.embed
Preview 02:15

Document Object Model: document.anchors

  • Regresa un arreglo con todos los hipervínculos o “anchors” de las etiquetas <a>
  • document.anchors[0];
  • document.anchors[“name”];
  • Desactualizado en HTML5, aunque algunos navegadores lo pueden seguir soportando por compatibilidad.
Seleccionar las etiquetas <a> o anchors
02:59

Document Object Model: document.body

  • Regresa la referencia del objeto <body>
  • Puedes sobrescribir los elemento dentro de <body>
  • document.documentElement
  • Regresa el elemento <html>
  • Es soportado por todos los navegadores
Seleccionar la etiqueta <body>
01:55

Document Object Model: document.documentElement

  • Regresa el elemento <html>
  • Este elemento no se puede modificar
  • Si el documento no tiene la etiqueta <html> regresa un valor nulo.
Seleccionar la etiqueta <html>
03:08

Document Object Model: document.forms

Regresa las referencias de las etiquetas <form> en un arreglo.

Acepta:

  • document.form[0];
  • document.form[“name”];
  • documento.forma.elementoForma;
Seleccionar las etiquetas <forms>
03:40

Document Object Model: document.images

  • Regresa un arreglo con las referencias a las etiquetas <img>.
  • El orden del arreglo es como aparecen las imágenes en el documento HTML.
  • El arreglo no registra a las etiquetas <input> con atributo type=“image”.
  • Tiene la propiedad “length” y el método item()
Seleccionar las etiquetas <img>
03:12

Document Object Model: document.links

  • Se obtiene las direcciones de las etiquetas <a> y <area> de los atributos href.
  • Si las etiquetas no tienen el atributo href, no se obtiene nada.
  • Las referencias aparecen en el arreglo según aparezcan las etiquetas en el código fuente.
  • Posee la propiedad length y el método item().
Seleccionar los links de las etiquetas <a> o <area>
02:32

Document Object Model: document.url

  • Regresa la dirección URL de la página.
  • Es similar a la propiedad location.href

Seleccionar la URL de la página
01:20

Document Object Model: document.title

  • Obtiene el contenido de la etiqueta <title>
  • También podemos modificar el título
Seleccionar el título de la página de la etiqueta <title>
01:52

Document Object Model: document.cookie

Permite grabar información en el disco duro del cliente.

La información se almacena como nombre=valor.

Los valores son persistentes.

Podemos crear, modificar y borrar las cookies con JS.

Podemos crear una cookie por medio de:

document.cookie = "usuario=Pedro Infante; expires=Thu, 18 Dec 2013 12:00:00 UTC";

Podemos leer una cookie:

var x = document.cookie;

El formato sería una cadena similar a:

cookie1=valor; cookie2=valor; cookie3=valor;


Guardar, modificar, leer y borrar cookies
06:39

Document Object Model: document.write()

  • El método write() escribe desde el código JavaScript al documento HTML.
  • Si el documento ha terminado de ser escrito y utiliza el método write(), el contenido de la página será borrado.
  • Puede aceptar varios parámetros, separados por comas.
El método write() para escribir en <body>
02:59

Apuntes de la sección 2: El DOM legado o heredado

Apuntes de la sección 2: El DOM legado o heredado
00:02
+
Acceder a los nodos DOM
6 Lectures 27:18

DOM: Seleccionar por identificador

  • Acceder a los nodos por identificadores
  • Podemos seleccionar un elemento por su identificador, atributo “id”:
  • document.getElementById(“identificador”);
  • El identificador es sensible a mayúsculas y minúsculas.
  • Si no encuentra el identificador, regresa un valor nulo (null).
  • Los identificadores en HTML deben ser únicos.
  • Si existen más de uno, los navegadores sólo toman el primer elemento.
  • Podemos almacenar la referencia del elemento en una variable.
  • Todas las acciones sobre la variable, afectarán al elemento
Preview 07:16

DOM: Seleccionar por tipo de etiqueta

  • Podemos seleccionar todos los elementos de una misma etiqueta con:
  • getElementsByTagName();
  • Genera un “nodeList” en el mismo orden en que aparecen las etiquetas en el código HTML.
  • El nodeList es similar a un arreglo, se indexa con un número entero e inicia en cero.
  • Podemos recorrer un nodeList con un ciclo y la propiedad “length”.
  • Con el comodín “*” podemos leer todos los elementos de la página.
El método getElementsByTagName() para seleccionar por tipo de etiqueta
05:46

DOM Seleccionar por clase

  • Seleccionar nodos por clase
  • Contamos con la instrucción:
  • getElementsByClassName();
  • La cual nos reporta un arreglo o “nodeList” con los elementos que tienen esta clase.
  • Esta instrucción no es soportada por el IE8-
El método getElementsByClassName() para seleccionar por nombre de clase
04:18

DOM: Seleccionar por nombre

  • Seleccionar nodos por nombre
  • Contamos con la instrucción: getElementsByName();
  • La cual nos reporta un arreglo o “nodeList” con los elementos que tienen esta nombre del atributo “name”.
  • Esta instrucción no es soportada por el IE8-
  • En HTML 5 el atributo “name” ha quedado obsoleto, por lo que no se recomienda el uso de esta sentencia.
El método getElementsByName() para seleccionar por el atributo "name"
03:56

DOM: Query Selector

  • Seleccionar elementos por los selectores de CSS
  • Contamos con las instrucciones:

querySelector();

querySelectorAll();

  • El primero reporta sólo un elemento y el segundo un arreglo o ‘nodeList’.
  • Podemos seleccionar por clase, identificador, atributo o pseudo clase (CSS).
  • Esta instrucción es soportada por el IE8+
  • Ambas utilizan los selectores de CSS.
Los métodos querySelect() y querySelectAll()
06:00

Apuntes de la sección 3: Acceder a los nodos DOM

Apuntes de la sección 3: Acceder a los nodos DOM
00:02
+
Modificar los nodos y sus propiedades
9 Lectures 30:28

Las propiedades de los nodos

  • node.nodeType: tipo de nodo.
  • node.nodeName: nombre del nodo.
  • node.attributes: atributos del nodo.
  • node.nodeValue: valor del nodo.
Preview 05:41

Los valores de los nodos: nodeValue

  • Regresa el valor del nodo.
  • Si el nodo es un elemento (etiqueta) el valor es nulo (null).
  • El valor se encuentra en los nodos de texto.
  • El valor que regresa, depende del tipo de nodo (nodeType)
  • Se puede utilizar la propiedad textContent.
  • Se puede utilizar la propiedad innerHTML.
Las propiedades nodeValue y textContent
05:16

DOM: Los atributos de los nodos

  • Recuperamos el valor del atributo: attributes;
  • Los atributos también son nodos.
  • Se pueden indexar, donde el primer índice es cero.
  • Las propiedades de los nodos son:
  • attr.isId: regresa verdadero si el atributo es el “id” (puede fallar en algunos navegadores).
  • attr.name: el nombre del atributo.
  • attr.value: valor del atributo.
  • attr.specified: si el atributo fue creado pero no asignado
La propiedad attribute para el manejo de los atributos
03:22

DOM: Modificar los nodos

  • Recuperamos el valor del atributo:

elemento.getAttribute("align");

  • Modificamos el valor de un atributo:

elemento.setAttribute("align","left");

Los métodos getAttribute() y setAttribute()
02:35

DOM: Trabajar con los atributos del nodo

Los métodos para modificar los nodos:

• getAttribute()

• setAttribute()

• removeAttribute()

• hasAttribute()

Estos métodos son compatibles en todos los navegadores.

Los métodos hasAttribute() y removeAttribute()
02:50

DOM: Modificar, tomar y remover texto de un nodo

Por medio de la siguiente propiedad podemos modificar, recuperar su valor o remover texto con o sin etiquetas:

innerHTML

outerHTML

insertAdjacentHTML(insertionPoint, htmlText);

textContent

La única compatible con todos los navegadores es la primera.

Nombre de la regla en cascada y su valor:

elemento.style.estilo = valor

La propiedad innerHTML para modificar el texto de un nodo
02:33

DOM: classlist

  • Soportada por IE10+
  • nodo.classList.add(clases)
  • nodo.classList.remove(clases)
  • nodo.classList.toggle(clases)
  • nodo.classList.length
  • nodo.classList.cointains
La propiedad classList
03:21

En este video veremos un ejemplo del método classList().

Ejemplo de la propiedad classList
04:48

Apuntes a la sección 4: Modificar los nodos y sus propiedades

Apuntes a la sección 4: Modificar los nodos y sus propiedades
00:02
+
Crear, modificar y eliminar nodos con JavaScript
7 Lectures 24:30

Crear elementos del DOM

1. Crear los elementos (createElement)

2. Poblar el elemento (innerHTML)

3. Añadir los elementos (addChild)

Ejemplo:

//Crea el nodo

document.createElement("li");

//Añade el nodo

miElemento.appendChild(nuevoElemento);

//Llena o puebla el nodo

nuevoElemento.innerHTML = "Texto";

//Inserta antes del nodo

parent.insertBefore(nuevoElemento, otroElemento);

Preview 04:38

DOM: Insertar “antes” un nodo

Insertar un nodo

El método “insertBefore()” inserta un elemento como un “primer hijo” (first child).

El método “insertChild()” inserta un elemento como “último hijo” (last child) y hay que indicar a partir del hijo.

elemento.insertBefore(insertar,nodoExistente);

Insertar un nodo antes de otro nodo
05:50

DOM: Eliminar un nodo

  • Un nodo no puede eliminarse así mismo.
  • Necesitamos eliminarlo desde su nodo padre.
  • parent.removeChild(elemento)
Remover un nodo de un árbol DOM
04:46

DOM: Clonar un nodo

  • Para duplicar un nodo utilizamos:
  • cloneNode(true|false);
  • Duplica todos los atributos y sus valores.
  • Necesitamos los métodos addChild() e insertBefore().
  • El parámetro es opcional: true clona todos los hijos (children) y falso sólo la etiqueta.
Clonar un nodo de una estructura DOM
03:18

DOM:Crear un nodo de texto

  • Crea un nodo de texto con contenido.
  • Hay que añadirlo a un nodo con appendChild() o insertBefore().
  • El método es:
  • createTextNode();
Crear un nodo de texto con createTextNode()
02:41

DOM: Reemplazar un nodo

  • Por medio de este método, podemos reemplazar un nodo por otro:
  • nodoPadre.replaceChild(nodoNuevo, nodoViejo);
  • Puede ser un nodo que ya exista o uno nuevo.
Reemplazar un nodo con replaceChild()
03:14

Apuntes de la sección 5: Crear, modificar y eliminar nodos con JavaScript

Apuntes de la sección 5: Crear, modificar y eliminar nodos con JavaScript
00:03
+
Navegar en la estructura DOM
8 Lectures 28:36

DOM: Navegar en el documento

Los métodos para moverse a través del árbol DOM son:

  • parentNode (hacia arriba)
  • previousSibling (izquierda)
  • nextSibling (derecha)
  • firstChild (abajo)
  • lastChild (abajo)
Preview 03:01

DOM: Parent node

  • La propiedad parentNode regresa el nodo padre como un “Node object”.
  • En HTML, el documento tiene como padre a la etiqueta HTML. Sus nodos hijos son HEAD y BODY.
  • Esta propiedad es sólo lectura, no podemos modificarla.
La propiedad parent
05:24

DOM: childNodes

  • Regresa la colección de los nodos hijos.
  • Los nodos aparecen según aparecen los nodos en el código fuente.
  • Se indexan como arreglos, iniciando en cero.
  • Los espacios en blanco, los tabuladores y los saltos de línea, se consideran como nodos de texto.
  • La propiedad “length” regresa el número de nodos del “nodeList”.
  • La propiedad childNodes[0] equivale a “firstChild”.
  • Es una colección sólo lectura, no podemos modificarla.
  • Los comentarios también son nodos
La propiedad childNodes
03:59

DOM: children

  • Regresa la colección de los nodos hijos.
  • Los nodos aparecen según aparecen los nodos en el código fuente.
  • Se indexan como arreglos, iniciando en cero.
  • Los espacios en blanco, los tabuladores y los saltos de línea, NO se consideran como nodos de texto.
  • La propiedad “length” regresa el número de nodos del “nodeList”.
  • Es una colección sólo lectura, no podemos modificarla.
  • Los comentarios NO se consideran como nodos.
  • IE6-8 regresan los comentarios también.
  • La versión IE9+ sólo regresan los nodos elementos.
La propiedad children
02:53

DOM: firstChild y lastChild

  • Las propiedades “firstChild” y “lastChild” regresan el primer y el último nodo de una “nodeList”.

  • Regresa un nodo ya sea elemento, texto o comentario.

  • Son propiedades de sólo lectura.
Las propiedades firstChild y lastChild
02:24

DOM: previousSibling y nextSibling

  • Las propiedades “previousSibling (izquierda)” y “nextSibling (derecha)” nos proporcionan los nodos anterior y posterior del nodo seleccionado.

  • Regresa un nodo ya sea elemento, texto o comentario.

  • Son propiedades de sólo lectura.

Las propiedades previousSibling y nextSibling
02:35

En este video realizaremos un sencillo juego de "caja de números" con JavaScript

Ejemplo práctico: juego de caja de números
08:18

Apuntes de la sección 6: Navegar en la estructura DOM

Apuntes de la sección 6: Navegar en la estructura DOM
00:02
+
El manejo de eventos en DOM
8 Lectures 33:22

DOM: El  registro de los eventos

  • Un evento es algo que no está programado y debemos estar atentos cuando suceda.
  • Para poder detectar un evento utilizamos un “listener” o “escucha” para “registrarlo”.
  • Podemos tener eventos de usuario como: pulsar una tecla, mover el apuntador del ratón, pulsar el ratón, enviar una forma.
  • Eventos de sistema sería: cuando se carga una página, la finalización de un video, se inicia la carga de un archivo, etc.
  • Tendremos diferentes formas de “registrar” los eventos:
  • En las etiquetas
  • Como DOM 0 o legacy
  • Como DOM 2
  • Los eventos en las etiquetas se deben de evitar:
  • <button onClick=”alerta()”>Alerta</button>
  • Los eventos de DOM 0 o “legado” se utiliza en todos los navegadores, pero tiene algunas limitaciones:


Preview 08:50

DOM: Usar eventos en un navegador viejo

Los navegadores IE6-8 no tienen addEventListener(). Se utiliza:

attachEvent(evento, funcion);

No utiliza el parámetro para la propagación.

Si es crítico el manejo de navegadores viejos, puede considerar utilizar jQuery.

El manejo de los eventos en navegadores viejos, como IE6-8
03:49

DOM: Las propiedades de los eventos

  • Las propiedades generan un objeto con toda la información del mismo: event object.
  • Esta información cambia un poco dependiendo del navegador.
  • El “event object” depende del evento.
  • Las principales propiedades son:
    • type: tipo de evento.
    • timeStamp: momento en que el evento sucedió.
    • currentTarget: Indica el elemento donde se generó el eventListener. No compatible con IE6-8.
    • target: Indica el objeto donde se originó el evento.
    • bubbles: si está activo en la fase de burbujas.
    • cancelable: puede ser cancelado con preventDefault(),
    • eventPhase: regresa la fase de propagación.
    • view: objeto de la ventana donde ocurrió el evento.
Las propiedades de un evento: el eventObject
06:24

DOM: El modelo de propagación de eventos

El modelo de propagación de eventos tiene tres fases: captura, notificación y burbujeo.

IE8- no soportan este modelo.

  • FASE DE CAPTURA
  • FASE DE DESTINO
  • FASE DE BURBUJAS
El modelo de propagación de eventos
06:09

DOM: Detener la propagación de eventos

  • Podemos detener la propagación de eventos con: e.stopPropagation();
  • No es compatible con IE8-
  • Alternativamente para IE podemos usar: e.cancelBubble = true;
Detener la propagación de un evento con stopPropagation()
02:13

DOM: Cancelar el comportamiento por omisión

  • Por medio del siguiente método podemos cancelar el comportamiento por omisión de un evento: evento.preventDefault()
  • No se puede cancelar todos los eventos.
  • Use la propiedad “cancelable” para saber si el evento es cancelable.
  • El método preventDefault() no detiene la propagación del evento, para ello utilice stopPropagation().
Detener el comportamiento por omisión de un evento
03:03

DOM: Eliminar un evento

  • Por medio del siguiente evento podemos eliminar un evento creado con addEventListener():
  • removeEventListener(evento,función,faseCaptura);
  • No es compatible con IE8-
Eliminar un evento con removeEventListener()
02:52

Apuntes e la sección 7: El manejo de eventos en DOM

Apuntes e la sección 7: El manejo de eventos en DOM
00:02
+
Los eventos del DOM
11 Lectures 25:47
  • Eventos de carga de página

    • onload

    • onunload (desactualizado)

  • Eventos del ratón DOM1:

    • onclick

    • onmousemove

    • onmouseover

    • onmouseout

    • onmousedown

    • onm
Preview 01:43

DOM: Eventos de la página

Eventos de carga de página

  • onload

  • onunload (desactualizado)

El evento de fin de la carga de la página: onload
03:01

DOM: Los eventos del ratón

Eventos del ratón DOM1:

  • onclick

  • onmousemove

  • onmouseover

  • onmouseout

  • onmousedown

  • onmouseup
El evento onclick
02:25

DOM: Los eventos del ratón

Eventos del ratón DOM1:

  • onclick

  • onmousemove

  • onmouseover

  • onmouseout

  • onmousedown

  • onmouseup
Los eventos onmouseover y onmouseout
01:49

DOM: Los eventos del ratón

Eventos del ratón DOM1:

  • onclick

  • onmousemove

  • onmouseover

  • onmouseout

  • onmousedown

  • onmouseup
Los eventos onmousedown y onmouseup
01:52

DOM: Los eventos del ratón

Eventos del ratón DOM1:

  • onclick

  • onmousemove

  • onmouseover

  • onmouseout

  • onmousedown

  • onmouseup
El evento onmousemove
02:10

DOM: Los eventos del teclado

Eventos del teclado

  • onkeydown

  • onkeyup

  • onkeypress

Los eventos del teclado
02:09

DOM: Los eventos de las cajas de entrada

Eventos de las cajas de entrada

  • onblur
  • onfocus
Los eventos de las cajas de entrada, onfocus y onblur
02:14

DOM: Los eventos de las formas

  • onreset
  • onsubmit
Los eventos de la forma, onsubmit y onreset
02:47

DOM: Los eventos de la ventana

onscroll

Las propiedades pageXOffset y pageYOffset regresan los pixeles que el elemento fue “scrolleado” en forma horizontal y vertical, respectivamente.

Las propiedades pageXOffset y pageYOffset son equivalente a scrollX y scrollY.

Los eventos de la ventana para hacer un parallax: onscroll
05:35

Apuntes de la sección 8: Los eventos del DOM

Apuntes de la sección 8: Los eventos del DOM
00:02
+
Manejo de los eventos y los elementos de un formulario
9 Lectures 39:53

DOM: El objeto form

Los objetos “form” los encuentras en el arreglo forms[] del objeto document.

Los formularios o formas aparecen en el orden en el que aparecen en el documento.

El objeto form tiene un arreglo elements[] con cada uno de los elementos de la forma.

El orden en que aparecen es cómo aparecen en el código.

Otras propiedades del objeto son: action, encoding, method y target que corresponden a los atributos de la etiqueta.

Los eventos relacionados a un formularios son:

  • onsubmit

  • onreset

En ambos, si regresamos un valor falso, no se ejecutan.

Preview 04:33

DOM: Los elementos del formulario

Los elementos tradicionales de una forma son:

Botones <input type=”button”> o <button>

Cajas de verificación o checkboxes <input type=”checkbox”>

Archivos o files <input type=”file”>

Campos ocultos o hidden <input type=”hidden”>

Claves de acceso o password <input type=”password”>

Botones de radio <input type=”radio”>

El botón reset <input type=”reset”> o <button type=”reset”>

Los elementos tradicionales de una forma son:

El botón submit <input type=”submit”> o <button type=”submit”>

Lista sencilla o <select>

Lista múltiple o <select multiple>

Opciones de una lista u <option

Los eventos de los elementos de un formulario
05:29

DOM: Propiedades de los elementos de un formulario

Los elementos de un formulario tienen cuatro parámetros:

  • type
  • form
  • name
  • value

Dentro del código de un controlador de evento, la palabra clave “this” hace referencia al elemento de documento que ha activado el evento.

Podemos hacer referencia a otro elemento con this.form.x

Las propiedades de los elementos de una forma
03:00

DOM: Botones de conmutación

Los botones checkbox y radio tienen una propiedad “checked” booleano y “defaultChecked”, que determina si el objeto está seleccionado al iniciarse la página del formulario.

Al seleccionar uno de los botones, se activa el evento onclick()

Los navegadores modernos también activan el evento onchange()

Los botones conmutados: checkbox y radio button
06:25

DOM: Campos de texto

La propiedad “value” representa la cadena introducida por el usuario.

El controlador de evento onchange() se activa cuando el usuario introduce un nuevo texto o edita un texto existente.

El elemento “file” tiene un controlador de eventos onchange() pero la propiedad value es de sólo lectura.

Los campos de texto también reciben los eventos onkeyup(), onkeydown() y onkeypress().

Si regresamos un valor falso de estos eventos, la tecla pulsada no se regresa.

Otros eventos que son aceptados en las cajas de entrada son onfocus(), onblur y onselect()

Los eventos de las cajas de entrada
05:15

Otros elementos como fielset, label o elementos ocultos
03:31

DOM: Elementos select y option

Una lista <select> puede tener el atributo “multiple” para recibir más de una entrada, de lo contrario sólo recibe una.

Las opciones de ambas listas se crean con la etiqueta <option> y se representan en el objeto Option guardados en el arreglo options[] dentro del objeto Select.

El valor de la selección de la lista  (propiedad value) no reside en el objeto Select, sino en cada uno de los objetos Option.

Al seleccionar o anula una selección, se lanza el evento onchange().

Cuando la lista es de un solo elemento, la propiedad seletedIndex indica el número o índice de la opción seleccionada.

Para listas múltiples hay que recorrer el arreglo options[] y verificar la propiedad value para cada una.

Cada elemento dentro de options[] contiene una propiedad “selected” y “text”.

La propiedad “value” es la que se envía al servidor, la propiedad “text” es la que el usuario ve en la pantalla (label).

Las listas con select y option
06:11

En este video utilizaremos lo visto en toda la sección para validar un formulario sencillo.

Validar un formulario con DOM
05:26

Manejo de los eventos y los elementos de un formulario

Apuntes de la sección 9: Manejo de los eventos y los elementos de un formulario
00:03
1 More Section
About the Instructor
Francisco Javier Arce Anguiano
4.4 Average rating
986 Reviews
12,871 Students
34 Courses
Lic. Matemáticas Aplicadas y Computación

Soy licenciado en matemáticas aplicadas y computación por parte de la Universidad Nacional Autónoma de México e instructor certificado de Adobe desde 2002. He trabajado para diferentes centros autorizados de Adobe en México y da clases en universidades de la Ciudad de México. Asimismo, he publicados cuatro libros sobre ActionScipt 2 y 3, con la editorial AlfaOmega de Méxicoasi como un libro de desarrollo de juegos con ActionScript con la misma editorial. He desarrollado aplicaciones para Android, iPhone, Windows Phone y BlackBerry. Actualmente preparo un libro para el desarrollo de juegos con HTML5 y para el desarrollo de aplicaciones a dispositivos móviles con esta tecnología. También he desarrollado múltiples aplicaciones con PHP, CSS, MySQL y JavaScript en mi vida profesional. Me he especializado en el desarrollo de aplicaciones educativas con Adobe Air y su desarrollo para dispositivos móviles. He estado pendiente de la evolución de HTML5 y CSS3 casi desde los inicios de estas tecnologías.