Resumo da Live TikTok 31082024 – Desvendando o Código

Olá Pessoal!

Na Live do dia 31/08/2024 foram abordados os seguintes temas:

Eventos;
DOM;
HTML;
LAÇO FOR;
FOREACH;
FOR IN.

EVENTOS
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eventos</title>
</head>
<body>
    
    <p id="meuParagrafo"> Texto Original</p>
    <button onclick="alterar()">
         Alterar Texto</button>

    <script>
        const p =
         document.getElementById('meuParagrafo');        

        function alterar(){
            p.innerText = "Texto Alterado!!!!!";
            p.style.color = 'red';
            p.style.fontSize = '30pt';
        }


    </script>


</body>
</html>

EVENTOS2
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adicionar e Remover Item</title>
</head>
<body>
    <ul id="minhaLista">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <button id="botaoAdicionar">
         Adicionar Item</button>
    <button id="botaoRemover">
         Remover Último Item</button>

        <script>
            const add =
             document.getElementById('botaoAdicionar');

            const del =
             document.getElementById('botaoRemover');

             add.addEventListener('click', function(){
                const novoItem = 
                    document.createElement("li");
                novoItem.textContent = "Item Novo";

            document.getElementById('minhaLista').
            appendChild(novoItem);
             });

             del.addEventListener('click', function(){

                const lista = 
                document.getElementById('minhaLista');

                lista.removeChild(lista.lastElementChild);
             });
             
        </script>
</body>
</html>

LAÇO FOR
EXEMPLO 1

const nomes = ["Marcos", "João", "Carla",
     "Maria", "Rodrigo"];


for(var item = 0; item < nomes.length; item ++ ){
    console.log( item + 1 + " - " + nomes[item]);
}
console.log("*****************");

nomes.forEach((item, index)=>{
   console.log((index + 1) + " - " + item);
});

EXEMPLO 2
const frutas = [ "uva", "laranja", "morango" ];

frutas.forEach(minhaFuncao);

function minhaFuncao(item, index){
    return console.log( index   + ": " + item);
}

EXEMPLO 3
const numeros = [ 1,2,3,4 ];

function mult(valor){
    return console.log(valor * 5)
}
numeros.forEach(mult);

EXEMPLO 4
const numeros = [10,20,30,40,50];
let resultado = '';

for(let numero in numeros){

    resultado += numero + ' ';
}
console.log("Resultado do FOR IN: "
     + resultado.trim());