El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

JavaScript esencial

Entender el DOM y el BOM

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Entiende cada uno de estos objetos que serán cruciales en tu proceso de desarrollo con JavaScript. Conoce sus bases y objetivos para que puedas entender su importancia y la necesidad de usarlo en cada uno de tus desarrollos.
05:28

Transcripción

Para que JavaScript pueda liberar todo su poder es necesario de un mecanismo que me permita interactuar con HTML e incluso con CSS. Este mecanismo se llama "Document Object Model" o lo podemos conocer también como DOM, las letras D, O, M. Esto en español significa: modelo del objeto documento. La principal característica del DOM es que nos permite usar los elementos o etiquetas que componen una página web como objetos y así poder manipularlos con JavaScript. Es decir, en este caso yo tengo varias etiquetas'p' o tengo incluso también una etiqueta'div' o una etiqueta de botón o una etiqueta de'header'. Todo esto yo puedo trabajarlo también con JavaScript, es decir, yo puedo tender un puente para poder manipularlos desde mi código. De una manera resumida, el DOM es el puente entre HTML y JavaScript, pues al poder usar o referirnos a los elementos que componen nuestro sitio o aplicación, podremos manipular a nuestro gusto y necesidad todo lo que hayamos creado. Hasta ahora ya hemos hecho uso del DOM y tal vez no te hayas percatado de esto, pero te aseguro que el siguiente código lo sentirás muy familiar. ¿Este código, qué es lo que tiene? Tiene principalmente un objeto llamado'document'. Este objeto llamado'document' hace referencia a todo el contenido que nosotros tenemos en nuestro navegador. Aquí estamos utilizando un método propio del DOM que dicta 'getElementById', en español: obtener un elemento según su ID. Y el ID que va a buscar es un ID llamado'botón'. Si nosotros hacemos un poco de "scroll" hacia arriba encontraremos que aquí tenemos un botón con un ID 'botón'. Aquí nosotros estamos haciendo dicha referencia y la estamos almacenando en una variable. Aquí es donde comienza la magia, porque a partir de esto nosotros podremos agregarle más eventos y manipular todo el contenido que se va a estar mostrando en pantalla. En este caso, nosotros estamos agregando un'addEventListener', es decir, una escucha, algo que esté pendiente de este elemento'botón' y que pueda reaccionar en consecuencia. En este caso estamos escuchando el evento'click' y para esto va a ejecutar alguna función. Con esto ya nos hemos topado antes. Así, ya contamos con un mecanismo para lograr que JavaScript se comunique con HTML. Pero ahora tenemos otro jugador en medio y esto es el navegador. Sí, hasta ahora hemos visto el contenido, pero este contenido es el documento. ¿Quién contiene al documento? El navegador. Y para esto nosotros contamos con otro objeto llamado BOM. El BOM significa "Browser Object Model", y también, al igual que el DOM, están definidos por la W3C, que es la organización que se encarga de dictar los estándares web a nivel mundial. Para evitar confusiones, existen algunos objetos independientes que hacen referencia tanto al BOM como al DOM. Y si lo vemos en perspectiva, el BOM es el contenedor o padre principal, y dentro vive el DOM. Para el DOM ya tenemos el objeto'document'que habíamos visto, pero para el caso del BOM tenemos otro objeto. Este objeto se llama'window' y también tiene sus propios métodos y sus propiedades, así que pueden actuar de manera independiente pero podemos coordinar su operación. En este caso, yo lo que voy a necesitar es utilizar uno de estos métodos. Por ejemplo, podemos trabajar rápidamente con'location' y su propiedad'href'. Si yo envío esto a consola y escribimos'console. log' y me aseguro de captar todo esto aquí, actualizo mi navegador y después pulso el botón que dice ¡Púlsame! Al hacerlo estoy obteniendo una dirección, en este caso lo que obtiene es la ubicación de este archivo en donde se está ejecutando. Si este ejercicio lo estuviéramos ejecutando en algún servidor, entonces nos traería la dirección web donde se encuentra. Esto es un ejemplo de lo que podemos trabajar con el BOM, pero también podemos asignarle algunas propiedades. Por ejemplo, aquí nosotros solamente estamos leyendo en donde nos encontramos, pero también yo podría asignarle algo. Por ejemplo, en este caso, en lugar de mostrar'href' estoy utilizando el operador igual para asignarle una nueva ubicación. ¿Por qué? Porque este objeto me permite hacer un redireccionamiento de la página, dado que es un objeto que pertenece al navegador. Así, yo actualizo mi página y vamos a pulsar el botón. ¿Qué va a suceder antes de que lo pulsemos? Uno: va a mostrar en consola en dónde se encuentra. Esto tal vez lo haga de una manera muy rápida. Y dos: va a cambiar de página y vamos a ir a GitHub. Ahora sí, pulso el botón ¡Púlsame! y vemos como está trabajando y efectivamente esto ya nos movió directamente hacia GitHub. De esta manera, ya conocemos los dos elementos base y muy importantes de toda página web, que sin la cual JavaScript no podría funcionar adecuadamente. Entonces, es necesario que conozcas al menos qué es el DOM y el BOM para que puedas sacar el mayor provecho de todo lo que estás programando.

JavaScript esencial

Aprende y conoce JavaScript empezando por entender sus conceptos más básicos y esenciales, pero considerando en todo momento la nueva especificación del lenguaje ES6.

5:26 horas (90 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:12/09/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.