Scribd
Carregar
2 visualizações2 páginas

Guia Pratico JavaScript Exemplos Com Codigo

O documento apresenta um guia prático de JavaScript com cinco exemplos de código. Os exemplos incluem a alternância de visibilidade de elementos, um contador simples, exibição dinâmica de texto, mudança de cor de fundo e validação de formulário. Cada exemplo é acompanhado por uma descrição e código correspondente para facilitar a compreensão.

Enviado por

Timóteo Elias Armando
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
2 visualizações2 páginas

Guia Pratico JavaScript Exemplos Com Codigo

O documento apresenta um guia prático de JavaScript com cinco exemplos de código. Os exemplos incluem a alternância de visibilidade de elementos, um contador simples, exibição dinâmica de texto, mudança de cor de fundo e validação de formulário. Cada exemplo é acompanhado por uma descrição e código correspondente para facilitar a compreensão.

Enviado por

Timóteo Elias Armando
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd

Guia Prático de JavaScript - Exemplos com Código

1) Mostrar e Esconder Elemento

Descrição: Alterna a visibilidade de um texto ao clicar no botão.

<h2 id="texto">Olá, programador!</h2>


<button id="btn">Mostrar / Esconder</button>

<script>
const btn = [Link]("btn");
const texto = [Link]("texto");

[Link]("click", function() {
if ([Link] === "none") {
[Link] = "block";
} else {
[Link] = "none";
}
});
</script>

2) Contador Simples

Descrição: Incrementa um número sempre que o botão for clicado.

<h1 id="contador">0</h1>
<button id="somar">Somar</button>

<script>
let numero = 0;

const contador = [Link]("contador");


const somar = [Link]("somar");

[Link]("click", function() {
numero++;
[Link] = numero;
});
</script>

3) Texto Dinâmico com Input

Descrição: Mostra em tempo real o texto digitado pelo usuário.

<input type="text" id="inputNome" placeholder="Digite seu nome">


<h2 id="resultado"></h2>
<script>
const input = [Link]("inputNome");
const resultado = [Link]("resultado");

[Link]("input", function() {
[Link] = "Olá, " + [Link];
});
</script>

4) Múltiplas Cores com Código Único

Descrição: Usa data attributes para mudar a cor do fundo dinamicamente.

<button data-cor="red">Vermelho</button>
<button data-cor="green">Verde</button>
<button data-cor="blue">Azul</button>

<script>
const botoes = [Link]("button");

[Link](function(botao) {
[Link]("click", function() {
const cor = [Link]("data-cor");
[Link] = cor;
});
});
</script>

5) Validação de Formulário

Descrição: Impede o envio do formulário se o campo estiver vazio.

<form id="form">
<input type="text" id="nome" placeholder="Digite seu nome">
<button type="submit">Enviar</button>
</form>

<script>
const form = [Link]("form");

[Link]("submit", function(event) {
const nome = [Link]("nome").value;

if (nome === "") {


[Link]();
alert("Preencha o nome!");
}
});
</script>

Você também pode gostar