O objeto documento e janela são dois dos objetos pai que podemos acessar com JavaScript. O objeto documento em si é subordinado ao objeto janela. Acho que todos os conhecem, porque são omnipresentes especialmente quando se desenvolvem aplicações web com vanilla javascript.

Este artigo pretende mostrar-lhe algumas das características práticas de ambos. Não há necessidade de uma introdução mais detalhada do que são exatamente esses dois, agora vou dar alguns exemplos práticos que você pode usar sem muito conhecimento prévio.

O menu de contexto é um evento DOM, que é acionado quando um usuário clica com o botão direito em um elemento DOM que o menu de contexto quer chamar. O menu de contexto é simplesmente o menu que é exibido por padrão quando um usuário clica com o botão direito em uma página web, a menos que a página web processe o evento de forma diferente, como nós faremos em um momento. Assim, mesmo que o nome possa não ser conhecido, o pequeno menu tem uma aparência diferente dependendo do sistema operacional e oferece coisas como “salvar imagem como”, “examinar”, “recarregar” & “voltar”.
Basicamente, podemos usar o evento contextmenu no DOM para executar nossa própria ação quando o usuário clica com o botão direito do mouse.

Clicar com o botão direito do mouse e exibir o bloco do menu de contexto padrão

<div id="nocontext">No context menu available for this</div><script>
noContext = document.getElementById('nocontext')noContext.addEventListener('contextmenu', (event) => {
event.preventDefault()
})
</script>

Então configuramos um EventListener para o nosso <div>, que deve ser executado quando o menu de contexto é chamado, ou seja, com um clique com o botão direito do mouse. Ele retorna um evento, que podemos bloquear com a função padrão preventDefault.

O caso padrão seria como clicar com o botão direito do mouse no menu de contexto. Mas com a função preventDefault nós bloqueamos isso. Então nada acontece.

Obviamente, não só podemos bloquear o evento padrão, mas também podemos executar todos os tipos de código quando o usuário clica com o botão direito do mouse. Podemos então combinar isto com o preventDefault para oferecer o nosso próprio menu de contexto, por exemplo:

contextAvailable.addEventListener('contextmenu', (e) => {
console.log('you rightclicked this')
e.preventDefault()
})

O modo de design do seu documento

Até a pesquisa para este artigo isto era completamente desconhecido para mim, mas na verdade esta funcionalidade pode ser muito prática. Você pode usá-la, por exemplo, para um sistema de gerenciamento de conteúdo, ou para editar rapidamente sem código, para visualizar possíveis alterações de conteúdo em um site.
Porque o que o designMode torna possível é que você possa editar todo o conteúdo de um website que olhamos no navegador sem ter que alterar o código HTML dos devtools.

Você pode experimentá-lo agora mesmo. Basta ir a qualquer website, abrir o console, e digitar o seguinte:

document.designMode = "on"

Agora você pode simplesmente editar o website exibido como se fosse um documento Word. Muito legal, não é?
O designMode só conhece dois estados: Ligado e desligado. Então se você quiser desativá-lo basta fazer o seguinte:

document.designMode = "off"

Se você quiser proteger elementos individuais de alterar o conteúdo, você pode dar-lhes o seguinte atributo: (Então você só pode removê-los completamente, mas não manipulá-los)

<i contenteditable = "false">This is not editable.</i>

Copiar algo para a área de transferência dos usuários com o código

Originalmente, o conhecido document.execCommand() era destinado a este propósito, mas agora é considerado depreciado.
Em vez disso, a API da Área de Transferência está agora disponível para a cópia automática do conteúdo usando JavaScript.
Pode ser usado através do objeto navigator, que é subordinado ao objeto window.

>

Vejamos um exemplo onde, após pressionar o botão, copiamos o texto inserido no campo de entrada para a área de transferência:

Veja o status do documento

Especialmente para o desenvolvimento de webapps mais complexos e com desempenho otimizado, investigações do tempo de carregamento &comportamento geral do documento deve ser realizado para encontrar potenciais pontos fracos ou para melhorar o desempenho e o UX.

Por isso, com document.readyState podemos acessar o estado atual do documento e tomar outras decisões baseadas no resultado.

Aqui estão os resultados possíveis, documento.readyState pode retornar:

• uninicializado – Ainda não começou a carregar
• carregar – Está carregando
• carregado – Foi carregado
• interativo – Carregou o suficiente e o usuário pode interagir com ele
• completo – Totalmente carregado
  Fonte: https://www.w3schools.com/jsref/prop_doc_readystate.asp

Se você brincar um pouco com ele na prática, há alguns resultados interessantes. Para isto criei uma pequena placa de caldeira em HTML, com a qual saímos o status em lugares diferentes. Cada um dos scripts externos contém simplesmente console.log(document.readyState)

Aqui está, em ordem cronológica, o que o nosso site então registra:

• normal: carregando
• script-tag: carregando
• adiar: interativo
• async: interativo
• onload body: completo

As diferentes formas de incluir os scripts externos funcionam aqui como esperado. Mas é interessante que se incluirmos apenas uma imagem grande na página, o tempo de carregamento da imagem também atrasará o evento de carregamento do body tag.

Então em qualquer caso o status é “completo”, se sairmos o status com o evento de carregamento.

Trabalhar com o foco / elemento ativo

Quando se trata de elementos com os quais o usuário do site pode realmente interagir, tais como botões, inputs e áreas de texto, estes podem ter o chamado foco. Se um input tem o foco, e nós digitamos algo no teclado, ele é escrito no campo de input. Se o campo não tem o foco, ele não é escrito no campo de entrada. Eu acho que todos sabem o que é o foco.

Determinar qual elemento tem o foco

Talvez você já saiba o atributo onfocus, que é o evento quando um elemento recebe o foco. Então poderíamos usá-lo para criar animações CSS legais ou, se quisermos analisar o comportamento do usuário, salvar este evento.

Da mesma forma, podemos determinar qual elemento tem o foco sem ter que dar a todos os elementos o atributo onfocus.
Podemos fazer isto da seguinte forma:

var x = document.activeElement.idconsole.log(x)

Para podermos obter o id do elemento que tem o foco / está ativo.

Mudando o foco manualmente

Especialmente em relação ao UX, às vezes pode ser útil para aliviar o usuário da seleção de elementos. Por exemplo, se ele fez uma entrada incorreta em um formulário, e queremos que ele altere sua entrada em cada campo de entrada:

document.getElementById('input1').focus()

Lendo o estilo atual de um elemento

Em aplicações web grandes e dinâmicas mudamos constantemente o estilo ativo de qualquer elemento no DOM.
Também podemos emitir isso para dois a qualquer momento, portanto verifique quais atributos e valores CSS nossos elementos têm.

1. element.style também pode ser usado para ler estilos, mas destina-se a editá-los
2. Window.getComputedStyle() é feito para obter o estilo atual

Assim, com a última função podemos obter um objeto inteiro com todos os estilos do elemento:

let box = document.getElementById('box')console.log(window.getComputedStyle(box)) // CSSStyleDeclaration{}

Mas também podemos produzir atributos individuais e os valores correspondentes com maior precisão:

let box = document.getElementById('box')console.log(
window.getComputedStyle(box)
.getPropertyValue('background-color') // E.g. rgb(0, 128, 0)
)

Trabalhar com o tamanho do browser & o website mostrado

Obtendo-se claro que não há como contornar tamanhos no desenvolvimento web moderno. Aqui está o que você precisa:

• window.outerWidth
• window.outerHeight

Os dois retornam as dimensões da própria janela do navegador, portanto não importa se a página web é reduzida em tamanho, por exemplo, pelas ferramentas do desenvolvedor.

Então quando se trata de determinar realmente em que dimensões a página web é exibida atualmente, as seguintes funções estão disponíveis:

• window.innerWidth
• window.innerHeight

Por exemplo, é assim que você poderia fazer um elemento em tela cheia:

elem.style.width = window.innerWidth + 'px'

Uma nota de JavaScript em inglês simples

Lançamos três novas publicações! Mostre algum amor pelas nossas novas publicações, seguindo-as: AI em inglês simples, UX em inglês simples, Python em inglês simples – obrigado e continue aprendendo!

Também estamos sempre interessados em ajudar a promover um conteúdo de qualidade. Se você tem um artigo que gostaria de enviar para qualquer uma de nossas publicações, envie-nos um e-mail para [email protected] com seu nome de usuário Medium e nós o receberemos adicionado como escritor. Diga-nos também qual a(s) publicação(ões) que você deseja adicionar a.