JavaScript e HTML

Articles

JavaScript e HTML

Este artigo explica JavaScript e HTML.

YouTube Video

javascript-html-dom.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8      box-sizing: border-box;
  9    }
 10
 11    body {
 12      margin: 0;
 13      padding: 2em;
 14      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 15      background-color: #f7f9fc;
 16      color: #333;
 17      line-height: 1.6;
 18    }
 19
 20    .container {
 21      max-width: 800px;
 22      margin: 0 auto;
 23      padding: 1em;
 24      background-color: #ffffff;
 25      border: 1px solid #ccc;
 26      border-radius: 10px;
 27      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 28    }
 29
 30    h1, h2 {
 31      font-size: 1.5rem;
 32      color: #007bff;
 33      margin-top: 0.5em;
 34      margin-bottom: 0.5em;
 35      border-left: 5px solid #007bff;
 36      padding-left: 0.6em;
 37      background-color: #e9f2ff;
 38    }
 39
 40    button {
 41      display: block;
 42      margin: 1em auto;
 43      padding: 0.75em 1.5em;
 44      font-size: 1rem;
 45      background-color: #007bff;
 46      color: white;
 47      border: none;
 48      border-radius: 6px;
 49      cursor: pointer;
 50      transition: background-color 0.3s ease;
 51    }
 52
 53    button:hover {
 54      background-color: #0056b3;
 55    }
 56
 57    #output {
 58      margin-top: 1em;
 59      background-color: #1e1e1e;
 60      color: #0f0;
 61      padding: 1em;
 62      border-radius: 8px;
 63      min-height: 200px;
 64      font-family: Consolas, monospace;
 65      font-size: 0.95rem;
 66      overflow-y: auto;
 67      white-space: pre-wrap;
 68    }
 69
 70    .highlight {
 71      outline: 3px solid #ffc107; /* yellow border */
 72      background-color: #fff8e1;  /* soft yellow background */
 73      transition: background-color 0.3s ease, outline 0.3s ease;
 74    }
 75
 76    .active {
 77      background-color: #28a745; /* green background */
 78      color: #fff;
 79      box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 80      transition: background-color 0.3s ease, box-shadow 0.3s ease;
 81    }
 82  </style>
 83</head>
 84<body>
 85  <div class="container">
 86    <h1>JavaScript Console</h1>
 87    <button id="executeBtn">Execute</button>
 88    <div id="output"></div>
 89  </div>
 90
 91  <div class="container">
 92    <h2>HTML Sample</h2>
 93    <div id="content">Hello, World!</div>
 94    <button id="changeText">Change Text</button>
 95  </div>
 96
 97  <script>
 98    // Override console.log to display messages in the #output element
 99    (function () {
100      const originalLog = console.log;
101      console.log = function (...args) {
102        originalLog.apply(console, args);
103        const output = document.getElementById('output');
104        output.textContent += args.map(String).join(' ') + '\n';
105      };
106    })();
107
108    document.getElementById('executeBtn').addEventListener('click', () => {
109      // Prevent multiple loads
110      if (document.getElementById('externalScript')) return;
111
112      const script = document.createElement('script');
113      script.src = 'javascript-html-dom.js';
114      script.id = 'externalScript';
115      //script.onload = () => console.log('javascript-html-dom.js loaded and executed.');
116      //script.onerror = () => console.log('Failed to load javascript-html-dom.js.');
117      document.body.appendChild(script);
118    });
119  </script>
120</body>
121</html>

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(`Title: ${window.document.title}`);
 3
 4// Get and display the current URL
 5console.log(`URL: ${window.location.href}`);
 6
 7// Go back to the previous page
 8// Note: this will navigate back in history, so be careful when running it
 9console.log("Navigating back to the previous page...");
10window.history.back();
11
12// Display the browser's user agent
13console.log(`User Agent: ${window.navigator.userAgent}`);
14
15// Display the width and height of the viewport
16console.log(`Viewport Width: ${window.innerWidth}`);
17console.log(`Viewport 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: Este evento é acionado quando a página foi completamente carregada.
window.onresize: Este evento é acionado quando a janela é redimensionada.
window.onscroll: Este evento é disparado 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.

Recuperando Elementos do DOM

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

document.getElementById(): Recupera um elemento pelo atributo id.
document.getElementsByClassName(): Recupera elementos pelo nome da classe. Retorna um HTMLCollection. HTMLCollection é uma coleção dinâmica que reflete as alterações no DOM em tempo real.
document.getElementsByTagName(): Recupera elementos pelo nome da tag. Retorna um HTMLCollection.
document.querySelector(): Utiliza um seletor CSS para recuperar o primeiro elemento correspondente.
document.querySelectorAll(): Utiliza um seletor CSS para recuperar todos os elementos correspondentes. Retorna um NodeList. NodeList é uma coleção estática que mantém o estado no momento da obtenção e não reflete alterações posteriores no DOM.

Exemplo: `getElementById` e `querySelector`

1<div id="content">Hello, World!</div>
2<button id="changeText">Change Text</button>

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"
3console.log(id);

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(): Adiciona uma classe.
remove(): Remove uma classe.
toggle(): Adiciona ou remove uma classe dependendo se já existe.
contains(): Verifica 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: Acessa o nó pai.
childNodes: Acessa os nós filhos. Você pode acessar todos os tipos de nós, não apenas nós de elementos como tags HTML, mas também nós de texto e comentários.
firstChild / lastChild: Acessa o primeiro e o último elementos filho.
nextSibling / previousSibling: Acessa o próximo e o anterior elementos irmãos.

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// Get the container element where the HTML will be inserted
 2const content = document.getElementById('content');
 3
 4// Create the <ul> element with id="list"
 5const list = document.createElement('ul');
 6list.id = 'list';
 7
 8// Add initial list items
 9const item1 = document.createElement('li');
10item1.textContent = 'Item 1';
11list.appendChild(item1);
12
13const item2 = document.createElement('li');
14item2.textContent = 'Item 2';
15list.appendChild(item2);
16
17// Create the <button> element with id="addItem"
18const addItemButton = document.createElement('button');
19addItemButton.id = 'addItem';
20addItemButton.textContent = 'Add Item';
21
22// Append the list and button to the content container
23content.appendChild(list);
24content.appendChild(addItemButton);
25
26// Add event listener to the button
27addItemButton.addEventListener('click', () => {
28    const newItem = document.createElement('li');
29    newItem.textContent = 'New Item';
30    list.appendChild(newItem);
31});

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

Funções Geradoras em JavaScript Shadow DOM em JavaScript

JavaScript e HTML

YouTube Video

O Objeto window no JavaScript

Principais Funcionalidades do Objeto window

Propriedades

Métodos

Manipulação de Eventos

Papel como uma Variável Global

Manipulação DOM em JavaScript

Fundamentos do DOM

Recuperando Elementos do DOM

Exemplo: getElementById e querySelector

Manipulação de DOM

Alterando Texto

Alterando atributos

Alterando CSS

Manipulando classes

Criando e deletando elementos DOM

Criando novos elementos

Excluindo Elementos

Adicionando eventos

Navegando pela árvore DOM

Exemplo: Adicionando um novo item a uma lista

Resumo

YouTube Video

O Objeto `window` no JavaScript

Principais Funcionalidades do Objeto `window`

Exemplo: `getElementById` e `querySelector`