Curso de Javascript: Objetos window, document y forms

Introducción

En Javascript existen una serie de objetos predefinidos que permiten acceder al DOM, dichos objetos sustentan la representación de la ventana, el documento y los formularios presentes en el mismo.  window, document y forms son los tres objetos principales de Javascript, ya que siempre podemos interactuar con ellos.

El objeto window

El objeto window, representa a la actual «ventana» lo que a día de hoy representa a una pestaña dentro del navegador. A través de window podemos saber sus dimensiones y podremos interactuar con ella. 

Propiedades principales

  • document: el objeto principal de window, representa el documento que se está presentando en pantalla. 
  • innerHeigth, innerWidth: representan el tamaño en alto y ancho, respectivamente de la ventana que dibuja la página. 
  • history: histórico de páginas visitadas.
  • location: dirección URL actual.
  • name: nombre de la ventana.

Métodos principales

  • alert(): presenta un popup con un mensaje
  • back(): vuelve atrás en el histórico 
  • close(): cierra la ventana
  • home(): vuelve a la página inicial del navegador
  • forward(): a la siguiente url del histórico
  • open(): abre una nueva ventana
  • resizeTo(): redimensiona la pantalla
  • setInterval(): define un script que se ejecute cada cierto tiempo
  • setTimeout(): define un script para que se ejecute una vez pasado cierto tiempo

El objeto document

Representa el documento (HTML) actual en memoria, permite buscar, modificar y eliminar elementos del documento. 

Propiedades principales

  • body: representa el elemento body, etiqueta html.
  • cookie: pares clave-valor de las cookies relacionadas con el documento
  • forms: array de formularios del documento
  • images: array de imágenes del documento
  • links: enlaces del documento
  • referer: url de la página de la que venimos
  • title: título del documento
  • URL: url completa del documento

Métodos principales

  • addEventListener(): permite cambiar el comportamiento de ante un evento
  • createAttribute(): crea un atributo de Elemento
  • createElement(): crea un nuevo elemento-etiqueta
  • createTextNode(): crea un nuevo nodo de texto
  • getElementById(): busca un elemento por su id
  • getElementsByTagName(): busca elementos por etiqueta
  • write(): escribe dentro de body
  • writeln(): escribe dentro de body una nueva línea

Eventos principales

  • onload: cuando se termina de leer la página
  • onunload: cuando salimos de una página

El Objeto forms

Forms representa a los formularios presentes dentro de la página. document.forms
Representa un array con todos los formularios. Para acceder a cada una de las propiedades del objeto representarán cada uno de los campos del formulario, según hayamos rellenado el atributo «name».

Propiedades principales

  • length: número del elementos del formulario
  • action: url donde enviaremos el formulario
  • method: get o post según vayamos a enviar el formulario
  • name: nombre del formulario
  • encoding: codificación de envío del formulario
Métodos principales
  • submit(): envía el formulario
  • reset(): reinicia los valores de los campos del formulario
Eventos principales
  • onsubmit(): función que realizará al enviar el formulario
  • onreset(): función que limpiará los campos del formulario

Referencias

Comments

Leave a Reply

*

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Categorías de Cursos

Suscríbete al Boletín

Si quieres estar al tanto de las novedades del blog, ya sabes :)
* = campo obligatorio

powered by MailChimp!

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies