Entrar Ainda não tem acesso?
1
resposta

[Projeto] HTML com JavaScript

Referente ao curso Lógica de programação: explore funções e listas, no capítulo Interagindo com HTML e atividade Desafio: hora da prática

por Izabel Santos
| 54.2k xp | 34 posts

Boa tarde, segue o meu projetinho de interação HTML com JavaScript. E gostaria de uma melhor explicação sobre o último exercício que me veio algumas dúvida ao juntar as linguagens, achei um tanto complexo. Gostaria de outros exemplos e/ou exercícios para uma comparação e compreender do conteúdo.

//1___ h1 COM A MENSAGEM 'HORA DO DESAFIO'

let titulo = document.querySelector ('h1');
titulo.innerHTML = 'Hora do desafio';
function verificarBotão () {
    console.log ('O botão foi clicado');
}

//Mensagem no HTML

<button onclick="verificarBotão()" class="button">Console</button>



function botãoAlerta () {
    alert ('Eu amo JS');
}

//Mensagem no HTML

<button onclick="botãoAlerta()" class="button">Alert</button>

//3___Função para ativar mensagem

prompt ''Nome da cidade'', com alerta - Estive em {cidade} e lembrei de você.
function exibirPrompt() {
    let nomeDaCidade = prompt('Digite o nome de uma cidade do Brasil que você já viajou e te trouxe boas memórias:')
    alert(`Estive em ${nomeDaCidade} e lembrei de você`);
}

//4___

function somandoDoisNumeros() {
    let primeiroNumero = parseInt(prompt('Digite o primeiro número'));
    let segundoNumero = parseInt(prompt('Digite o segundo número'));
    let resultado = primeiroNumero + segundoNumero;
    alert(`${primeiroNumero} + ${segundoNumero} = ${resultado}`)
}

// No HTML

<button onclick="somandoDoisNumeros()" class="button">Soma</button>
1 resposta
por Luis Dias
| 3345.2k xp | 3676 posts

Oi Izabel,

Parabéns pelo seu projeto de interação HTML com JavaScript! 👏

É normal sentir um pouco de dificuldade ao juntar HTML e JavaScript no início. 😟 Mas com a prática, tudo se torna mais claro.

Para te ajudar a entender melhor, preparei algumas dicas e exemplos adicionais.

Exemplo 1: Alterando o texto de um parágrafo

HTML:

<p id="meuParagrafo">Texto inicial.</p>
<button onclick="mudarTexto()">Mudar Texto</button>

JavaScript:

function mudarTexto() {
  let paragrafo = document.querySelector('#meuParagrafo');
  paragrafo.innerHTML = 'Novo texto!';
}

Neste exemplo, ao clicar no botão, a função mudarTexto é chamada. Essa função seleciona o parágrafo com o id "meuParagrafo" e altera o texto dentro dele para "Novo texto!".

Exemplo 2: Mudando a cor de fundo de um elemento

HTML:

<div id="minhaDiv">Este é um exemplo de div.</div>
<button onclick="mudarCor()">Mudar Cor</button>

JavaScript:

function mudarCor() {
  let div = document.querySelector('#minhaDiv');
  div.style.backgroundColor = 'lightblue';
}

Aqui, ao clicar no botão, a função mudarCor é executada. Essa função seleciona a div com o id "minhaDiv" e muda a cor de fundo dela para azul claro.

Exemplo 3: Criando um novo elemento HTML

HTML:

<div id="container"></div>
<button onclick="criarParagrafo()">Criar Parágrafo</button>

JavaScript:

function criarParagrafo() {
  let container = document.querySelector('#container');
  let novoParagrafo = document.createElement('p');
  novoParagrafo.innerHTML = 'Este é um novo parágrafo criado com JavaScript.';
  container.appendChild(novoParagrafo);
}

Neste caso, a função criarParagrafo é chamada ao clicar no botão. Essa função cria um novo elemento <p>, define o texto dele e o adiciona como filho da div com o id "container".

🎓 Para saber mais: Manipulando documentos HTML com JavaScript.

Continue praticando e explorando as possibilidades! 🤗