Resumo da Live TikTok 17082024 – Desvendando o Código

Olá Pessoal!

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

Condicionais Simples, Composta e Aninhada;
Vetores;
Laço for;
Escopo;
Eventos;
Criação e Exclusão de Itens com JS e HTML.

ANOTACOES
// for(var a = 1; a < 10 ; a ++ ){

//     //bloco de comandos

// }


// if(condicao){  //falso
// // bloco de comandos 
// }else if(condicao){
// // bloco de comandos 
// }else{
// }

 
// conjuncao       disjuncao
// &&              ||

ESCOPO
function exemploEscopo(){

    b = 3;
    if(b == 3){
        var escopoVar = "Eu seu o VAR";
        let escopoLet = "Eu seu o LET";
        const escopoConst = "Eu sou a CONST";
        console.log(escopoVar);
        console.log(escopoLet);
        console.log(escopoConst);
    }
    console.log(escopoVar);
    // console.log(escopoLet);
    // console.log(escopoConst);
}
exemploEscopo();

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

a = 20;
if(a == 20){
    const numeros = []
    numeros.push(99);
    console.log(numeros);

}
console.log(numeros);

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

    <button onclick="alterar()">Alterar</button>

    <script>

        const p =
         document.getElementById('meuParagrafo');

         function alterar(){
            p.innerText = 'Marcos';
            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>

</body>

    <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>
</html>