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

Propiedades y métodos del BOM

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Aprende a interactuar con el navegador usando el BOM. Conoce los métodos y propiedades que tiene disponible para que puedas usarlos y puedas interactuar entre tu código y el contenedor principal que es el navegador web.
05:04

Transcripción

Ya trabajamos con el DOM, es decir, con el objeto del documento. Ahora vamos a trabajar con el navegador, y para esto ahora utilizaremos el objeto'window'. En este caso, el objeto'window'tiene muchas propiedades. Por ejemplo, podemos utilizar aquí'window. innerHeight' y'window. innerWidht' para poder saber el alto y el ancho. Pero observa esto: también nosotros podemos utilizarlo sin necesidad de trabajar con'window'. Hay muchos de estos métodos que te vas a encontrar que no va a ser necesario que ocupes, en este caso, 'window. 'y la propiedad o método que quieras, a veces simplemente con que pongas la propiedad o método que quieres usar puede funcionar. La recomendación es: no dejes de usar el objeto'window' para que tengas la certeza de que todo va a funcionar adecuadamente. En este caso estamos mostrando el ancho y el alto de nuestra ventana, así que actualizamos el navegador y vemos que tiene ahorita un tamaño de 283 x 559. Si yo hago algún movimiento en mi ventana, en este caso vamos a hacer más grande la ventana, actualizo el navegador y cuando lo actualizo vemos como el ancho ya cambia por 800, es decir, esto puede irse ajustando sin problemas. Y también si yo cambio y hago la actualización de la altura. Regresemos ahora la ventana a su estado original para tener más espacio en el código. También, a partir de'window'podemos hacer muchas cosas. Por ejemplo, si yo quiero puedo almacenar datos directamente en el navegador. En serio, es posible, lo único que tenemos que hacer aquí primero es acceder a la sección de Application. En la sección de Application tú podrás encontrar mucha información, en este caso tenemos un objeto que dice aquí Storage. En este objeto Storage, podemos almacenar información de manera local o por sesión. Por aquí teníamos almacenado algo previamente, entonces simplemente lo voy a eliminar para este ejemplo. Nosotros podemos utilizar este tipo de objetos para guardar algunos datos como, por ejemplo, algun "token", algún nombre usuario..., algún texto que no necesitemos que vaya al servidor, y eso obviamente pertenece al objeto'window'. Como te había explicado previamente, podemos utilizarlo si necesidad de'window'. En este caso estamos trabajando directamente con'localStorage' y tiene este un método llamado'setItem'. Este tipo de elemento funciona porque recibe un par de datos, el primero es el campo y el segundo es el contenido, y ya. Si yo necesito recuperarlo en algún momento, lo podré recuperar de esta manera, donde lo único que tendré que hacer es hacer uso igual de'localStorage' pero con un método llamado'getItem'. Y lo que voy a hacer es obtener como tal este ítem pero almacenado directamente en esta variable'contenido' Vamos a actualizar el navegador y vemos como precisamente cuando yo tengo este dato, aquí tengo contenido y tengo su valor, el valor que dice: "Código y café es una gran combinación". Pero ahora vamos a ver lo siguiente. ¿Qué te parece si ese contenido lo mandamos directamente a este párrafo que tenemos arriba? Sí, en serio, es posible que podamos cambiar ese contenido. Para poder hacerlo, voy a mover la variable donde estoy obteniendo los datos y voy a utilizar un método correspondiente al DOM. Como puedes ver, estamos utilizando ahorita un método del BOM o del'windows' para poder almacenar información en el navegador. Y ahora, ya que recupero información del navegador, lo voy a mandar al documento utilizando el DOM. A este tipo de situaciones te vas a enfrentar diariamente, así que no te preocupes, poco a poco te irás sintiendo más cómodo con el lenguaje. En este caso, si te das cuenta, ya teníamos ligado este párrafo a esta variable y entonces lo único que usaré es un método llamado'innerHTML'. Esto va a reemplazar todo el contenido que tenemos aquí y va a reemplazar el contenido de esta variable por lo que estamos trayendo en'contenido'. Actualizamos el navegador y una vez que actualizamos, ahora sí, vamos a pulsar el botón ¡Púlsame!, pulsamos y vemos como obviamente recupera la información del'localStorage', que es esta información que tenemos aquí, y la almacena en'contenido'. Y después la estamos mandando directamente al HTML. Esta característica es bastante buena, y también existen muchas más propiedades y muchos más métodos. Por ejemplo, aquí te voy a dejar algunos que te pueden servir mucho si es que tú quieres manipular la navegación de tu página. Por ejemplo, 'window. history', con su menú'forward', lo que va a hacer es avanzar, con el menú'back'te va a regresar en el histórico, y con el menú'go'te podrá mover a través del histórico que tengas de navegación en tu navegador. Así, entonces, ahora ya conoces el DOM, ya conoces el BOM, y lo mejor de todo: ya sabes cómo integrar ambas características. Si quieres saber más propiedades y más métodos puedes acudir a la documentación que existe tanto de parte de Mozilla como en un sitio llamado'w3schools'; esta te sacará de muchos apuros.

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.