Vídeo: 1.1: Code! Programming for Beginners with p5.js 2024
Por John Paul Mueller
O JavaScript usa objetos extensivamente. Sabendo quais objetos usar e quando são partes importantes do trabalho com JavaScript. Ao conhecer os objetos do navegador, do modelo de objeto de documento principal (DOM) e do HTML DOM, você pode construir uma parte considerável de qualquer aplicativo padrão (e muitas aplicações simples). Estes são os objetos de JavaScript mais usados, então mantenha-os ao seu alcance.
Como usar objetos do navegador JavaScript para gerenciar o ambiente do aplicativo
Os objetos do navegador JavaScript permitem descobrir e alterar o ambiente do aplicativo. Ao saber onde o usuário foi, onde o usuário está agora e onde você pode levar o usuário, você pode efetivamente controlar o fluxo do aplicativo. Claro, é importante saber o tamanho da tela que o usuário possui para que você possa apresentar os dados de forma a refletir a fisicalidade do dispositivo do usuário.
A tabela a seguir detalha algumas das opções de navegador JavaScript mais interessantes.
| Objeto | Descrição |
|---|---|
| histórico | Fornece os meios para examinar e mover entre URLs armazenados
no histórico do navegador. Você pode ver uma lista completa dos métodos e propriedades associados a este objeto em www. escolas de ensino médio. com / jsref / obj_history. asp. |
| localização | Contém informações sobre o URL atual. Este objeto também
fornece os meios para executar tarefas, como carregar uma nova página ou recarregando a página atual. Você pode ver uma lista completa dos métodos e propriedades associados a este objeto em www. escolas de ensino médio. com / jsref / obj_location. asp. |
| navigator | Contém informações sobre o navegador atual. Por exemplo,
você pode determinar o tipo de navegador e se o navegador tem cookies habilitados. Você pode ver uma lista completa dos métodos e propriedades associadas a este objeto em www. escolas de ensino médio. com / jsref / obj_navigator. asp. |
| tela | Especifica as características físicas do dispositivo usado para
exibir a página, incluindo a altura da página, a largura e a profundidade da cor. Você pode ver uma lista completa dos métodos e propriedades associados a este objeto em www. escolas de ensino médio. com / jsref / obj_screen. asp. |
| janela | Fornece acesso à janela do navegador para que você possa
executar tarefas, como exibir caixas de mensagem. Ao trabalhar com páginas que contêm quadros, o navegador cria uma janela para o documento HTML inteiro e outra janela para cada quadro.Você pode ver uma lista completa dos métodos e propriedades associados a este objeto em www. escolas de ensino médio. com / jsref / obj_window. asp. |
Como usar objetos DOM principais para gerenciar conteúdo da aplicação
O objetivo de qualquer aplicação JavaScript é gerenciar o conteúdo. Isso significa adicionar, excluir e editar o documento HTML que contém os vários elementos que estruturam e suportam o conteúdo. Esses objetos fornecem acesso a todos os detalhes do documento em relação ao conteúdo.
| Objeto | Descrição |
|---|---|
| Attr | Fornece acesso a atributos individuais no documento.
Você pode ver uma lista completa dos métodos e propriedades associados a este objeto em www. escolas de ensino médio. com / jsref / dom_obj_attr. asp. |
| documento | Fornece acesso a todo o documento. Você pode usar este objeto
para acessar qualquer parte do documento. Além disso, esse objeto permite exibir informações diretamente na página e executar outras tarefas relacionadas à interface do usuário. Você pode ver uma lista completa de os métodos e propriedades associados a este objeto em www. escolas de ensino médio. com / jsref / dom_obj_core_document. asp. |
| Elemento | Contém um elemento de documento individual de qualquer tipo suportado
como XML. Este objeto fornece acesso a atributos através do objeto Attr e propriedades através do objeto Node. Você pode ver uma lista completa dos métodos e propriedades associados a este objeto em www. escolas de ensino médio. com / jsref / dom_obj_element. asp. |
| Eventos | Suporta acesso a eventos existentes e criação de novos.
Você pode ver uma lista completa dos métodos e propriedades associados a este objeto em www. escolas de ensino médio. com / jsref / dom_obj_event. asp. |
| HTMLElement | Contém um elemento de documento HTML individual, como um parágrafo
ou um controle. Use os objetos Element e Node para obter acesso a atributos e propriedades do elemento . Você pode ver uma lista completa de os métodos e propriedades associados a este objeto em www. escolas de ensino médio. com / jsref / dom_obj_all. asp. |
| Nó | Define os detalhes de qualquer nó dado, que pode incluir
o documento como um todo, um elemento dentro do documento e um atributo fornecido como parte de um elemento, texto e comentários. Você pode ver uma lista completa dos métodos e propriedades associados com este objeto em www. escolas de ensino médio. com / jsref / dom_obj_node. asp. |
| NodeFilter | Especifica quais nós aparecem como parte de um NodeIterator usado para percorrer a lista de nós
dentro de um documento. Você pode ver uma lista completa dos métodos e propriedades associadas a este objeto em // desenvolvedor. mozilla. org / en-US / docs / DOM / NodeFilter. |
| NodeIterator | Fornece um método para obter uma lista de nós dentro de um documento
. A busca da lista de nós pode ajudá-lo a localizar nós específicos e interagir com eles. Por exemplo, você pode encontrar todos os os nós da tag e adicionar um atributo específico para eles. Você pode ver uma lista completa dos métodos e propriedades associados a este objeto em // developer.mozilla. org / en-US / docs / DOM / NodeIterator. |
| NodeList | Contém uma lista ordenada de todos os nós no documento
ou em uma área específica do documento. Você pode ver uma lista completa dos métodos e propriedades associados a este objeto em www. escolas de ensino médio. com / jsref / dom_obj_nodelist. asp. |
| NamedNodeMap | Contém uma lista não ordenada de todos os nós no documento
ou em uma área específica do documento. Você pode ver uma lista completa dos métodos e propriedades associados a este objeto em www. escolas de ensino médio. com / jsref / dom_obj_namednodemap. asp. |
Como usar objetos DOM HTML para gerenciar a estrutura
Organizar as informações que o usuário vê na tela em uma apresentação coesa usando o JavaScript é importante. O usuário deve ver a estrutura do documento HTML, mas a estrutura deve suportar o conteúdo - não deve chamar atenção para si. Ao trabalhar com uma página, a estrutura inclui tudo, desde tabelas até controles usados para interagir e gerenciar o conteúdo que o usuário está mais interessado em ver. Os seguintes objetos HTML DOM ajudam você a executar esta tarefa ao trabalhar com JavaScript.
| Objeto | Descrição |
|---|---|
| Documento | Fornece acesso a todos os elementos de uma página inteira. Toda página
carregada em um navegador torna-se um objeto de documento que você acessa usando a palavra-chave do documento. Você pode ver uma lista completa dos métodos e propriedades associados a este objeto em www. escolas de ensino médio. com / jsref / dom_obj_document. asp. |
| Evento | Permite a interação com os manipuladores de eventos e eventos
associados a uma página. Cada tipo de elemento tem eventos específicos associados a ele, como o evento de clique associado ao objeto do botão . Você pode ver uma lista completa dos métodos e propriedades associados a este objeto em www. escolas de ensino médio. com / jsref / dom_obj_event. asp. |
| HTMLElement | Fornece uma classe base a partir da qual todos os elementos HTML são derivados.
Esta classe base define as propriedades e os métodos que todos os elementos HTML fornecem. Você pode ver uma lista completa dos métodos e propriedades associadas a este objeto em www. escolas de ensino médio. com / jsref / dom_obj_all. asp. |
| Anchor | Representa um hiperlink HTML. Você pode ver uma lista completa de
os métodos e propriedades associados a este objeto em www. escolas de ensino médio. com / jsref / dom_obj_anchor. asp. |
| Área | Define a área dentro de um mapa de imagem HTML que é usado para criar
regiões clicáveis para um elemento gráfico. Você pode ver uma lista completa dos métodos e propriedades associados a este objeto em www. escolas de ensino médio. com / jsref / dom_obj_area. asp. |
| Base | Especifica o endereço padrão ou um alvo padrão para todos os links
em uma página. Você pode ver uma lista completa dos métodos e propriedades associadas a este objeto em www. escolas de ensino médio. com / jsref / dom_obj_base. asp. |
| Corpo | Representa a porção
de uma página, incluindo todos os elementos contidos nessa marca . Você pode ver uma lista completa dos métodos e propriedades associados a este objeto em www.escolas de ensino médio. com / jsref / dom_obj_body. asp. |
| Botão | Representa um botão em uma página. Este objeto é especificamente
associado à tag, em vez da marca de . Você pode ver uma lista completa dos métodos e propriedades associados a este objeto em www. escolas de ensino médio. com / jsref / dom_obj_pushbutton. asp. |
| Form | Representa um formulário e inclui todos os elementos dentro desse formulário
. Você pode ver uma lista completa dos métodos e propriedades associados a este objeto em www. escolas de ensino médio. com / jsref / dom_obj_form. asp. |
| Quadro e IFrame | Representa uma moldura (a marca) ou uma moldura inline (a marca |