Tutorial de JavaScript - Navegação por Capítulos

Capítulo 0: Introdução

Bem-vindo ao tutorial de JavaScript! Este capítulo apresenta a estrutura do tutorial e o que você encontrará em cada capítulo. Você aprenderá desde os conceitos básicos até os avançados, com exemplos interativos, explicações detalhadas e uma lista dos comandos utilizados.

Capítulo 0: Organização e apresentação do tutorial.
Capítulo 1: Fundamentos e exemplos interativos de JavaScript.
Capítulo 2: Manipulação do HTML e CSS com JavaScript.
Capítulo 3: Onde e como inserir scripts em suas páginas.
Capítulo 4: Conceitos avançados como Promises e arrow functions.
Capítulo 5: Várias saídas de dados com JavaScript.
Capítulo 6: Sintaxe e instruções fundamentais da linguagem.

Exemplo Interativo: Saudação

Clique no botão para receber uma saudação personalizada:

Sua saudação aparecerá aqui.

<button id="greetBtn0">Saudar</button> <p id="greetDisplay0">Sua saudação aparecerá aqui.</p> <script> document.getElementById('greetBtn0').addEventListener('click', () => { document.getElementById('greetDisplay0').textContent = "Bem-vindo ao tutorial de JavaScript!"; }); </script>

Explicação Detalhada:
Neste exemplo, adicionamos um ouvinte de evento ao botão greetBtn0. Quando o usuário clica no botão, a função é executada e altera o conteúdo do parágrafo greetDisplay0 para exibir uma mensagem de boas-vindas. Isso demonstra a manipulação do DOM e o tratamento de eventos com JavaScript.

Comandos Utilizados:

document.getElementById('greetBtn0'): Seleciona o elemento com o ID "greetBtn0".
.addEventListener('click', function): Registra uma função para executar quando o botão for clicado.
textContent: Define ou retorna o conteúdo textual de um elemento.

Comando	Descrição
`document.getElementById('greetBtn0')`	Seleciona o elemento com o ID "greetBtn0".
`.addEventListener('click', function)`	Registra uma função para executar quando o botão for clicado.
`textContent`	Define ou retorna o conteúdo textual de um elemento.

Capítulo 1: Tutorial de JavaScript

Neste capítulo, você aprenderá os fundamentos do JavaScript por meio de exemplos interativos. Cada exemplo mostra a lógica completa, as funções utilizadas e os comandos empregados, facilitando seu entendimento.

Exemplo Interativo: Data e Hora Atual

Clique no botão para exibir a data e hora atual:

<button id="dateTimeBtn1">Clique aqui</button> <p id="dateTimeDisplay1"></p> <script> document.getElementById('dateTimeBtn1').addEventListener('click', () => { const now = new Date(); document.getElementById('dateTimeDisplay1').textContent = now.toLocaleString(); }); </script>

Explicação Detalhada:
Ao clicar no botão dateTimeBtn1, o código cria um objeto Date que captura o momento exato da interação. Em seguida, toLocaleString() formata essa data/hora de acordo com a localidade do usuário e atualiza o conteúdo do parágrafo dateTimeDisplay1. Isso demonstra a manipulação de datas e atualização dinâmica do DOM.

Comandos Utilizados:

new Date(): Cria um novo objeto de data com a data e hora atuais.
toLocaleString(): Formata a data/hora conforme a localidade.
document.getElementById() e .addEventListener(): Selecionam elementos e registram eventos.

Comando	Descrição
`new Date()`	Cria um novo objeto de data com a data e hora atuais.
`toLocaleString()`	Formata a data/hora conforme a localidade.
`document.getElementById()`	Seleciona um elemento pelo seu ID.
`.addEventListener()`	Registra um evento para o elemento selecionado.

Exemplo Interativo: Contador

Clique no botão para incrementar o contador:

Contador: 0

<button id="counterBtn1">Incrementar</button> <p>Contador: <span id="counterDisplay1">0</span></p> <script> let counter1 = 0; document.getElementById('counterBtn1').addEventListener('click', () => { counter1++; document.getElementById('counterDisplay1').textContent = counter1; }); </script>

Explicação Detalhada:
Este exemplo utiliza uma variável counter1 para armazenar a contagem. Cada clique no botão incrementa o valor e atualiza o elemento counterDisplay1 para refletir a nova contagem. Isso ilustra o uso de variáveis, o operador de incremento (++) e a atualização dinâmica do DOM.

Comandos Utilizados:

let counter1 = 0;: Declara a variável counter1 e a inicializa com zero.
counter1++;: Incrementa o valor da variável.
document.getElementById() e .addEventListener(): Manipulam o DOM e registram eventos.

Comando	Descrição
`let counter1 = 0;`	Declara a variável e a inicializa com zero.
`counter1++;`	Incrementa o valor da variável em 1.
`document.getElementById()`	Seleciona um elemento pelo seu ID.
`.addEventListener()`	Registra um evento de clique.

Capítulo 2: Introdução ao JavaScript

Neste capítulo, você verá como o JavaScript pode modificar dinamicamente elementos HTML, atributos e estilos. Os exemplos a seguir demonstram a interação com a página de forma prática.

Exemplo Interativo: Lâmpada On/Off

Clique nos botões para ligar ou desligar a lâmpada:

Lâmpada desligada

<img id="lampImg2" src="lampada_off.gif" alt="Lâmpada desligada" width="100"> <button id="turnOn2">Ligar</button> <button id="turnOff2">Desligar</button> <script> const lampImg2 = document.getElementById('lampImg2'); document.getElementById('turnOn2').addEventListener('click', () => { lampImg2.src = 'lampada_on.gif'; lampImg2.alt = 'Lâmpada ligada'; }); document.getElementById('turnOff2').addEventListener('click', () => { lampImg2.src = 'lampada_off.gif'; lampImg2.alt = 'Lâmpada desligada'; }); </script>

Explicação Detalhada:
Neste exemplo, dois botões controlam uma imagem representando uma lâmpada. Ao clicar em "Ligar", os atributos src e alt da imagem são alterados para mostrar a lâmpada acesa; o botão "Desligar" reverte a imagem para o estado original. Isso demonstra a manipulação de atributos HTML via JavaScript.

Comandos Utilizados:

document.getElementById('lampImg2'): Seleciona o elemento de imagem.
.src: Define o caminho da imagem.
.alt: Define o texto alternativo da imagem.
.addEventListener(): Registra funções para eventos de clique.

Comando	Descrição
`document.getElementById('lampImg2')`	Seleciona o elemento de imagem.
`.src`	Define o caminho da imagem.
`.alt`	Define o texto alternativo da imagem.
`.addEventListener()`	Registra funções para eventos de clique.

Exemplo Interativo: Mensagem Personalizada

Digite seu nome e clique para receber uma mensagem personalizada:

<input type="text" id="nameInput2" placeholder="Seu nome"> <button id="nameBtn2">Enviar</button> <p id="nameDisplay2"></p> <script> document.getElementById('nameBtn2').addEventListener('click', () => { const name = document.getElementById('nameInput2').value; if(name.trim() !== "") { document.getElementById('nameDisplay2').textContent = "Olá, " + name + "! Bem-vindo ao tutorial de JavaScript."; } else { document.getElementById('nameDisplay2').textContent = "Por favor, digite seu nome."; } }); </script>

Explicação Detalhada:
Este exemplo lê o valor inserido no campo de texto nameInput2 quando o botão nameBtn2 é clicado. Se o usuário digitar um nome, o script exibe uma mensagem personalizada; caso contrário, solicita a entrada. Assim, demonstra a manipulação de inputs, validação de dados e atualização do DOM.

Comandos Utilizados:

document.getElementById('nameInput2').value: Obtém o valor digitado pelo usuário.
String.trim(): Remove espaços em branco do início e fim da string.
if/else: Estrutura condicional para validar o input.

Comando	Descrição
`document.getElementById('nameInput2').value`	Obtém o valor digitado pelo usuário.
`trim()`	Remove espaços em branco do início e fim da string.
`if/else`	Estrutura condicional para validação do input.

Capítulo 3: JavaScript Onde

O JavaScript pode ser inserido tanto na seção <head> quanto no <body> do HTML. Este capítulo mostra como os scripts podem interagir diretamente com os elementos da página.

Exemplo Interativo: Mudar Cor do Texto

Clique no botão para mudar a cor do texto abaixo:

Este texto mudará de cor.

<p id="colorDisplay3">Este texto mudará de cor.</p> <button id="colorBtn3">Mudar Cor</button> <script> document.getElementById('colorBtn3').addEventListener('click', () => { const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16); document.getElementById('colorDisplay3').style.color = randomColor; }); </script>

Explicação Detalhada:
Ao clicar no botão colorBtn3, o script gera uma cor hexadecimal aleatória e a aplica à propriedade color do elemento colorDisplay3, alterando dinamicamente a cor do texto. Esse exemplo demonstra a manipulação de estilos e a utilização de funções matemáticas para gerar valores aleatórios.

Comandos Utilizados:

Math.random(): Gera um número aleatório entre 0 e 1.
Math.floor(): Arredonda um número para o inteiro inferior.
toString(16): Converte um número para sua representação hexadecimal.
style.color: Define a cor do texto de um elemento.

Comando	Descrição
`Math.random()`	Gera um número aleatório entre 0 e 1.
`Math.floor()`	Arredonda para o inteiro inferior.
`toString(16)`	Converte um número para hexadecimal.
`style.color`	Define a cor do texto de um elemento.

Capítulo 4: Conceitos Avançados de JavaScript

Explore recursos avançados como Promises, arrow functions e closures para escrever código mais conciso e assíncrono. Cada exemplo detalha a lógica por trás desses conceitos e os comandos utilizados.

Exemplo Interativo: Demonstração de Promise

Clique no botão para iniciar uma Promise que se resolve após 2 segundos:

Resultado da Promise aparecerá aqui.

<button id="promiseBtn4">Iniciar Promise</button> <p id="promiseDisplay4">Resultado da Promise aparecerá aqui.</p> <script> document.getElementById('promiseBtn4').addEventListener('click', () => { const promise = new Promise((resolve) => { setTimeout(() => resolve("Promise resolvida!"), 2000); }); promise.then(message => { document.getElementById('promiseDisplay4').textContent = message; }); }); </script>

Explicação Detalhada:
Neste exemplo, criamos uma Promise que simula uma operação assíncrona usando setTimeout. Após 2 segundos, a Promise é resolvida e retorna a mensagem "Promise resolvida!", que é então exibida no elemento promiseDisplay4 através do método then(). Esse fluxo é essencial para entender operações assíncronas no JavaScript.

Comandos Utilizados:

new Promise(): Cria uma nova Promise para operações assíncronas.
setTimeout(): Executa uma função após um intervalo de tempo definido.
.then(): Registra uma função a ser executada quando a Promise é resolvida.
Arrow Function: Forma concisa de definir funções anônimas.

Comando	Descrição
`new Promise()`	Cria uma nova Promise para operações assíncronas.
`setTimeout()`	Executa uma função após um intervalo definido.
`.then()`	Registra uma função a ser executada quando a Promise é resolvida.
`Arrow Function`	Define funções de forma concisa.

Exemplo Interativo: Soma com Arrow Function

Digite dois números e clique para calcular a soma:

Resultado:

<input type="number" id="num1_4" placeholder="Número 1"> <input type="number" id="num2_4" placeholder="Número 2"> <button id="sumBtn4">Calcular Soma</button> <p id="sumDisplay4">Resultado: </p> <script> document.getElementById('sumBtn4').addEventListener('click', () => { const num1 = parseFloat(document.getElementById('num1_4').value) || 0; const num2 = parseFloat(document.getElementById('num2_4').value) || 0; const soma = (a, b) => a + b; document.getElementById('sumDisplay4').textContent = "Resultado: " + soma(num1, num2); }); </script>

Explicação Detalhada:
Aqui, os valores inseridos são convertidos para números com parseFloat() e somados usando uma arrow function. O resultado é exibido no elemento sumDisplay4. Este exemplo reforça conceitos como conversão de tipos, funções anônimas e atualização do DOM.

Comandos Utilizados:

parseFloat(): Converte uma string para número decimal.
Arrow Function: Sintaxe concisa para definir funções.
|| 0: Garante que, se o valor não for numérico, seja utilizado 0.

Comando	Descrição
`parseFloat()`	Converte uma string para número decimal.
`Arrow Function`	Define funções de forma concisa.
`\|\| 0`	Utiliza 0 como valor padrão se a conversão falhar.

Capítulo 5: Saída JavaScript

Exemplo Interativo: Atualizar Conteúdo com innerHTML

Clique no botão para atualizar o conteúdo do parágrafo:

Conteúdo original

<p id="innerHtmlDemo5">Conteúdo original</p> <button id="innerHtmlBtn5">Atualizar Conteúdo</button> <script> document.getElementById('innerHtmlBtn5').addEventListener('click', () => { document.getElementById('innerHtmlDemo5').innerHTML = 5 + 6; }); </script>

Explicação Detalhada:
Ao clicar no botão, o método innerHTML atualiza o conteúdo do parágrafo innerHtmlDemo5 com o resultado da expressão 5 + 6. Esse exemplo é útil para aprender como modificar o conteúdo HTML dinamicamente.

Comandos Utilizados:

innerHTML: Define ou retorna o conteúdo HTML de um elemento.
document.getElementById(): Seleciona um elemento pelo seu ID.

Comando	Descrição
`innerHTML`	Atualiza ou retorna o conteúdo HTML de um elemento.
`document.getElementById()`	Seleciona um elemento pelo seu ID.

Exemplo Interativo: Exibir Alerta

Clique para exibir um alerta com a soma de 5 e 6:

<button id="alertBtn5">Exibir Alerta</button> <script> document.getElementById('alertBtn5').addEventListener('click', () => { alert(5 + 6); }); </script>

Explicação Detalhada:
Este exemplo utiliza a função alert() para exibir uma caixa de diálogo com o resultado de 5 + 6. É uma forma simples de notificar o usuário ou testar pequenos trechos de código.

Comandos Utilizados:

alert(): Exibe uma caixa de alerta com uma mensagem.

Comando	Descrição
`alert()`	Exibe uma caixa de alerta com a mensagem especificada.

Exemplo Interativo: Logar no Console

Clique para registrar a soma de 5 e 6 no console:

<button id="consoleLogBtn5">Logar no Console</button> <script> document.getElementById('consoleLogBtn5').addEventListener('click', () => { console.log(5 + 6); }); </script>

Explicação Detalhada:
Ao clicar no botão, o método console.log() registra o resultado da soma no console do navegador, auxiliando na depuração do código.

Comandos Utilizados:

console.log(): Imprime informações no console do navegador.

Comando	Descrição
`console.log()`	Imprime informações no console do navegador.

Exemplo Interativo: Exibir Saída em Pre

Clique para exibir múltiplas linhas de texto formatado:

Saída aparecerá aqui.

<button id="preBtn5">Exibir Texto</button> <pre id="preOutput5">Saída aparecerá aqui.</pre> <script> document.getElementById('preBtn5').addEventListener('click', () => { const text = "Linha 1: Exemplo de saída.\nLinha 2: Evite usar document.write() após o carregamento.\nLinha 3: Utilize innerHTML ou textContent para atualizar a saída."; document.getElementById('preOutput5').textContent = text; }); </script>

Explicação Detalhada:
Neste exemplo, ao clicar no botão, o script define uma string com quebras de linha e a insere em um elemento <pre>, que preserva a formatação do texto. Isso é útil para exibir saídas com formatação semelhante a código.

Comandos Utilizados:

textContent: Define o texto interno do elemento, preservando quebras de linha em <pre>.
\n: Representa uma nova linha em uma string.

Comando	Descrição
`textContent`	Define o texto interno do elemento, preservando formatação.
`\n`	Representa uma nova linha em uma string.

Capítulo 6: Instruções JavaScript

Exemplo Interativo: Declaração de Variáveis

Clique para calcular a soma de 5 e 6 utilizando declarações de variáveis:

Resultado: ?

<button id="declBtn6">Executar Declaração</button> <p id="declDemo6">Resultado: ?</p> <script> document.getElementById('declBtn6').addEventListener('click', () => { let x, y, z; x = 5; y = 6; z = x + y; document.getElementById('declDemo6').textContent = "Resultado: " + z; }); </script>

Explicação Detalhada:
Ao clicar no botão, o código declara três variáveis (x, y e z), atribui valores a x e y, soma esses valores e exibe o resultado no elemento declDemo6. Esse exemplo reforça os conceitos básicos de declaração de variáveis, atribuição e operações aritméticas.

Comandos Utilizados:

let: Declara variáveis com escopo de bloco.
=: Operador de atribuição.
+: Operador de adição.
document.getElementById() e textContent: Manipulam o DOM.

Comando	Descrição
`let`	Declara variáveis com escopo de bloco.
`=`	Operador de atribuição.
`+`	Operador de adição.
`document.getElementById()`	Seleciona um elemento pelo seu ID.
`textContent`	Atualiza o conteúdo textual de um elemento.

Exemplo Interativo: Demonstração de Escopo

Clique para ver uma demonstração simples da diferença entre var e let:

Resultado da demonstração aparecerá aqui.

<button id="scopeBtn6">Testar Escopo</button> <p id="scopeDemo6">Resultado da demonstração aparecerá aqui.</p> <script> document.getElementById('scopeBtn6').addEventListener('click', () => { function testScope() { var a = "var é de função"; let b = "let é de bloco"; { var a = "var pode ser redefinido"; // sobrescreve o valor de a let b = "let permanece restrito ao bloco"; } return a + " | " + b; } document.getElementById('scopeDemo6').textContent = testScope(); }); </script>

Explicação Detalhada:
Este exemplo demonstra a diferença de escopo entre var e let. A variável declarada com var pode ser redeclarada e modificada fora do bloco, enquanto a variável declarada com let permanece restrita ao bloco onde foi definida. Essa distinção é fundamental para evitar erros e comportamentos inesperados no código.

Comandos Utilizados:

var: Declara variáveis com escopo de função.
let: Declara variáveis com escopo de bloco.
{ }: Define um bloco de código.

Comando	Descrição
`var`	Declara variáveis com escopo de função.
`let`	Declara variáveis com escopo de bloco.
`{ }`	Define um bloco de código.