Primeiro gostaria de saber qual é a unidade de medida que é gravada na variavel 'posicao', e também qual é o tamanho da página? Na aula o console registra números entre 25-30, porém no meu varia até 1000.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Primeiro gostaria de saber qual é a unidade de medida que é gravada na variavel 'posicao', e também qual é o tamanho da página? Na aula o console registra números entre 25-30, porém no meu varia até 1000.
Oi Gabriel, tudo bem?
Desculpe a demora em retornar.
Respondendo à sua pergunta, a variável "posicao" não possui uma unidade de medida específica gravada nela, pois ela representa a posição em pixels de um elemento na página. Pixels são uma unidade de medida utilizada para definir o tamanho e a posição de elementos em uma tela, seja em um computador ou em um dispositivo móvel.
Em relação ao tamanho da página, ele pode variar dependendo do dispositivo em que a página está sendo exibida, do navegador utilizado e até mesmo das configurações do próprio usuário. No entanto, é possível obter o tamanho da página usando o objeto "window" do JavaScript, que representa a janela do navegador em que a página está sendo exibida.
Para obter a largura e a altura da página, podemos utilizar as propriedades "innerWidth" e "innerHeight" do objeto "window", respectivamente. Veja um exemplo de como obter esses valores:
const larguraPagina = window.innerWidth;
const alturaPagina = window.innerHeight;
console.log(`A largura da página é ${larguraPagina}px e a altura é ${alturaPagina}px.`);
Note que estamos concatenando a unidade de medida "px" à mensagem de console.log, pois as propriedades "innerWidth" e "innerHeight" retornam valores em pixels.
Vale lembrar que esses valores podem mudar caso a janela do navegador seja redimensionada pelo usuário. Por isso, é uma boa prática atualizar esses valores sempre que houver uma mudança no tamanho da janela. Podemos fazer isso adicionando um listener de evento "resize" ao objeto "window", como mostrado abaixo:
window.addEventListener('resize', () => {
const larguraPagina = window.innerWidth;
const alturaPagina = window.innerHeight;
console.log(`A largura da página é ${larguraPagina}px e a altura é ${alturaPagina}px.`);
});
Dessa forma, sempre que a janela do navegador for redimensionada, o código dentro da função callback será executado e as novas dimensões da página serão exibidas no console.
Espero que tenha te ajudado.
Um abraço e bons estudos.