JavaScript e HTML

Este artigo explica JavaScript e HTML.

YouTube Video

O Objeto window no JavaScript

O objeto window no JavaScript é o objeto global em um ambiente de navegador, fornecendo funções e informações relacionadas à página web e à janela do navegador. Como window é o escopo global do navegador, todo o código JavaScript executado no navegador se torna parte do objeto window. O objeto window desempenha um papel importante na execução do JavaScript no ambiente do navegador, fornecendo muitas APIs e propriedades.

Principais Funcionalidades do Objeto window

Propriedades

 1// Get and display the document's title
 2console.log(window.document.title);
 3
 4// Get and display the current URL
 5console.log(window.location.href);
 6
 7// Go back to the previous page
 8window.history.back();
 9
10// Display the browser's user agent
11console.log(window.navigator.userAgent);
12
13// Display the width and height of the viewport
14console.log(`Width: ${window.innerWidth}, Height: ${window.innerHeight}`);

• window.document: Acessa o documento HTML atual.
• window.location: Gerencia a URL atual e a navegação do navegador.
• window.history: Acessa as informações de histórico do navegador e permite a navegação para frente e para trás.
• window.navigator: Fornece informações sobre o navegador e o dispositivo.
• window.innerWidth / window.innerHeight: Obtém a largura e a altura da área de visualização (viewport).

Métodos

 1// Show an alert
 2window.alert('Hello, this is an alert!');
 3
 4// Show a confirmation dialog
 5if (window.confirm('Are you sure you want to proceed?')) {
 6    console.log('User clicked OK');
 7} else {
 8    console.log('User clicked Cancel');
 9}
10
11// Show a prompt dialog
12const userInput = window.prompt('Please enter your name:');
13console.log(`Hello, ${userInput}!`);
14
15// Open a new tab
16window.open('https://www.example.com', '_blank');
17
18// Display a message after 3 seconds
19window.setTimeout(() => {
20    console.log('This message appears after 3 seconds!');
21}, 3000);
22
23// Display a message every second
24const intervalId = window.setInterval(() => {
25    console.log('This message appears every second!');
26}, 1000);
27
28// Clear the interval after 5 seconds
29setTimeout(() => {
30    clearInterval(intervalId);
31    console.log('Interval cleared.');
32}, 5000);

• window.alert(): Exibe uma caixa de diálogo de alerta.
• window.confirm(): Exibe uma caixa de diálogo pedindo a confirmação do usuário e retorna um resultado de OK ou Cancelar.
• window.prompt(): Exibe uma caixa de diálogo solicitando entrada do usuário e obtém o valor inserido.
• window.open(): Abre uma nova janela ou aba.
• window.setTimeout() / window.setInterval(): Define um temporizador para executar uma função após um determinado tempo ou em intervalos regulares.

Manipulação de Eventos

 1// Display a message when the page is fully loaded
 2window.onload = () => {
 3    console.log('Page is fully loaded!');
 4};
 5
 6// Display a message when the window is resized
 7window.onresize = () => {
 8    console.log('Window resized! New size:', window.innerWidth, 'x', window.innerHeight);
 9};
10
11// Display a message when the page is being scrolled
12window.onscroll = () => {
13    console.log('Page is being scrolled!');
14};

• window.onload: Um evento que é executado quando a página está completamente carregada.
• window.onresize: Um evento que é executado quando o tamanho da janela é alterado.
• window.onscroll: Um evento que é acionado quando o usuário rola a página.

Papel como uma Variável Global

1var myVar = 10;
2console.log(window.myVar); // 10

• O objeto window contém variáveis e funções globais. Em outras palavras, variáveis e funções declaradas automaticamente se tornam propriedades do window.

Manipulação DOM em JavaScript

A manipulação do DOM (Document Object Model) em JavaScript é usada para interagir dinamicamente com elementos em uma página da web. O DOM representa a estrutura de um documento HTML como uma árvore, que pode ser alterada usando JavaScript para modificar a estrutura e controlar a exibição da página.

Fundamentos do DOM

O DOM trata o HTML de uma página da web como objetos, permitindo o acesso e a modificação de elementos e atributos. Use o objeto document para acessar o documento HTML.

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <title>Example of DOM Manipulation</title>
 5  </head>
 6  <body>
 7    <div id="content">Hello, World!</div>
 8    <button id="changeText">Change Text</button>
 9  </body>
10</html>

Recuperando Elementos do DOM

O JavaScript possui vários métodos para acessar elementos no DOM.

• document.getElementById(): Obtém um elemento pelo atributo id
• document.getElementsByClassName(): Obtém elementos pelo nome da classe (HTMLCollection)
• document.getElementsByTagName(): Obtém elementos pelo nome da tag (HTMLCollection)
• document.querySelector(): Obtém o primeiro elemento correspondente usando um seletor CSS
• document.querySelectorAll(): Obtém todos os elementos correspondentes usando um seletor CSS (NodeList)

Exemplo: getElementById e querySelector

1const content = document.getElementById('content');
2console.log(content.textContent); // "Hello, World!"
3
4const button = document.querySelector('#changeText');

Manipulação de DOM

Várias operações podem ser realizadas nos elementos obtidos.

Alterando Texto

Para alterar o texto de um elemento, use textContent ou innerHTML.

• textContent: Obtém ou altera o conteúdo de texto de um elemento. As tags HTML não são interpretadas.
• innerHTML: Obtém ou altera o conteúdo HTML de um elemento. Strings que contêm tags HTML também são processadas.

1content.textContent = 'Hello, world!';  // Change the text
2button.innerHTML = '<strong>Click to change</strong>';  // Change including HTML

Alterando atributos

Use setAttribute() e getAttribute() para alterar os atributos do elemento.

1button.setAttribute('disabled', 'true');  // Disable the button
2const id = content.getAttribute('id');  // Get the "content"

Alterando CSS

Use a propriedade style para alterar os estilos CSS.

1content.style.color = 'red';  // Change the text color to red
2content.style.fontSize = '20px';  // Change the font size

Manipulando classes

Use classList para adicionar ou remover classes de um elemento.

• add(): Adicionar uma classe
• remove(): Remover uma classe
• toggle(): Adicionar ou remover uma classe com base na sua presença
• contains(): Verificar se uma classe existe

1content.classList.add('highlight');  // Add a class
2button.classList.toggle('active');   // Toggle a class

Criando e deletando elementos DOM

Criando novos elementos

Use document.createElement() para criar um novo elemento e adicioná-lo ao DOM.

1const newDiv = document.createElement('div');  // Create a new div element
2newDiv.textContent = 'This is a new element';
3document.body.appendChild(newDiv);  // Append to the body element

Excluindo Elementos

Use o método remove() para deletar um elemento.

1newDiv.remove();  // Remove the created element

Adicionando eventos

Como parte da manipulação do DOM, você pode adicionar manipuladores de eventos que respondem às interações do usuário. Use addEventListener() para lidar com eventos como cliques e interações de teclado.

1button.addEventListener('click', () => {
2    content.textContent = 'The text has been changed';
3});

Neste exemplo, clicar em um botão altera o texto do elemento #content.

Navegando pela árvore DOM

Você pode navegar pelo DOM para acessar elementos pais e irmãos.

• parentNode: Acessar o nó pai
• childNodes: Acessar os nós filhos (de todos os tipos)
• firstChild / lastChild: Primeiro/último elemento filho
• nextSibling / previousSibling: Próximo elemento irmão/anterior elemento irmão

1const parent = content.parentNode;  // Get the parent element
2const firstChild = parent.firstChild;  // Get the first child element
3console.log(firstChild);

Exemplo: Adicionando um novo item a uma lista

Aqui está um exemplo de como adicionar um novo item a uma lista.

 1<ul id="list">
 2  <li>Item 1</li>
 3  <li>Item 2</li>
 4</ul>
 5<button id="addItem">Add Item</button>
 6
 7<script>
 8    const list = document.getElementById('list');
 9    const addItemButton = document.getElementById('addItem');
10
11    addItemButton.addEventListener('click', () => {
12        const newItem = document.createElement('li');
13        newItem.textContent = 'New Item';
14        list.appendChild(newItem);
15    });
16</script>

Neste código, clicar no botão "Adicionar Item" adiciona um novo elemento <li> à lista.

Resumo

• A manipulação do DOM com JavaScript permite obter, alterar, criar e excluir elementos dentro de um documento HTML.
• Você pode obter elementos usando métodos como getElementById() e querySelector().
• Use textContent ou innerHTML para alterar texto e HTML, e setAttribute() para manipular atributos.
• Use createElement() para criar novos elementos e remove() para excluí-los.
• Você pode criar páginas da web interativas que respondem às ações do usuário através do gerenciamento de eventos.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video