Carregando...

O objeto window

A loja tem um sino. É o parágrafo #bell e começa como blank. Nesta página não há formulário.
window é o objeto desta aba. O documento, a largura da viewport e qualquer var de um script simples ficam nele. Um let não fica. A página lê quatro coisas e junta. A linha fica same / 4 / undefined / number.

Não é a ficha do chá

A página anterior recusou um convidado vazio e um número de xícaras fora de 1 a 3. A linha dela era need guest / ok. Esta página não olha #guest nem o campo #cups. O nome cups aqui é um var, não um campo.
A pergunta é outra: o que se alcança através de window?

Um só documento

document não é uma segunda cópia. É window.document. O sino achado por window.document é o sino achado por document.

O mesmo documento

javascript 
let bell = window.document.getElementById("bell");
let also = document.getElementById("bell");
bell.textContent = window.document === document ? "same" : "no";
console.log(bell.textContent);
console.log(bell === also);

O registo é same e depois true. Um documento, um sino.

Um var fica na janela

var cups = 4 neste script cria window.cups. Lido, é o número 4. String só o torna texto para o sino.

Ler um var por window

javascript 
var cups = 4;
let bell = document.getElementById("bell");
bell.textContent = String(window.cups);
console.log(bell.textContent);

O registo é 4. O 4 é a variável, não um campo de formulário.

Um let fica de fora

let kettle = 1 existe. Não é uma propriedade de window. window.kettle é undefined, e String disso é a palavra undefined.

let não fica em window

javascript 
let kettle = 1;
let bell = document.getElementById("bell");
bell.textContent = String(window.kettle);
console.log(bell.textContent);
console.log(kettle);

O registo é undefined e depois 1. A chaleira existe. Só não fica em window.

A largura é um número

window.innerWidth é quantos pixels CSS a viewport tem de largura. typeof desse valor é "number". Não é texto, como é value de um input.

A largura é um número

javascript 
let bell = document.getElementById("bell");
bell.textContent = typeof window.innerWidth;
console.log(bell.textContent);

O registo é number. A quantidade de pixels muda com a janela. O tipo não muda.

Não escreva o endereço

window.location.href é o endereço desta aba e é um texto. Ler é seguro. Escrever um endereço novo sai da página. Nenhum trecho escreve em href.

Quatro leituras, não um formulário

Aqui não se corta um nome nem se testa um intervalo. As quatro leituras: se o documento é o mesmo objeto, o var, o let ausente e o tipo da largura. String(undefined) é a palavra undefined, não um sino em branco.

A linha sob o sino

O script fica no fim de body. Declara var cups = 4 e let kettle = 1, depois empurra quatro leituras: se o documento coincide, window.cups, window.kettle e typeof window.innerWidth.

Demo da página — o sino

html 
<!DOCTYPE html>
<html>
<head>
<title>shop-bell — page</title>
</head>
<body>
<p id="bell">blank</p>
<p id="line">…</p>
<script>
var cups = 4;
let kettle = 1;
let seen = [];
seen.push(window.document === document ? "same" : "no");
seen.push(String(window.cups));
seen.push(String(window.kettle));
seen.push(typeof window.innerWidth);
document.getElementById("line").textContent = seen.join(" / ");
</script>
</body>
</html>

A linha é same / 4 / undefined / number. O documento coincidiu. O var aparecia em window. O let não. O tipo da largura é number. A palavra blank sumiu. need guest / ok é a página anterior.

No balcão

  1. Compare window.document com document. O sino mostra same.
  2. Declare var cups = 4 e leia window.cups. O sino mostra 4.
  3. Declare let kettle = 1 e leia window.kettle. O sino mostra undefined. kettle continua 1.
  4. Leia typeof window.innerWidth. O sino mostra number.
  5. Leia a linha da página: same / 4 / undefined / number.

Erros no balcão

O sino mostra uma dessas palavras, não um nome de convidado.

  • Esperar que window.kettle seja 1
  • Esperar que window.cups seja undefined
  • Tratar innerWidth como texto
  • Escrever em location.href e sair da página
  • Ler a linha como need guest / ok

Fique com isto

  • window.document e document são o mesmo objeto
  • var cups = 4 lê-se como window.cups
  • let kettle = 1 não cria window.kettle
  • typeof window.innerWidth é number
  • A linha da página é same / 4 / undefined / number

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
5
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 55 de 55
Javascript Tutorial