exercícios com javascript
Blog

A Importância de Fazer Exercícios para Aperfeiçoar suas Habilidades de Programação em JavaScript

JavaScript é uma das linguagens de programação mais populares e amplamente usadas no desenvolvimento web. Com sua versatilidade e presença quase onipresente em aplicativos da web modernos, é essencial para desenvolvedores terem um domínio sólido dessa linguagem. Uma das melhores maneiras de aprimorar suas habilidades em JavaScript é por meio da prática consistente e da resolução de exercícios.

Neste artigo, exploraremos a importância de fazer exercícios em JavaScript e como isso pode beneficiar seu crescimento como desenvolvedor.

Fortalecimento dos Fundamentos

Resolver exercícios em JavaScript ajuda a consolidar os fundamentos da linguagem. Quando você pratica, reforça conceitos como variáveis, tipos de dados, estruturas de controle, funções e manipulação de arrays e objetos. Isso fortalece sua compreensão desses conceitos, tornando-os mais intuitivos e fáceis de aplicar em projetos reais.

Aprendizado Ativo

Ao resolver exercícios, você está envolvido em um processo de aprendizado ativo. Em vez de apenas absorver informações teóricas, você está realmente aplicando esses conceitos para resolver problemas práticos. Esse tipo de envolvimento ativo é fundamental para a retenção e a compreensão profunda do material.

Desenvolvimento da Lógica de Programação

A resolução de exercícios em JavaScript ajuda a desenvolver sua habilidade de pensamento lógico e resolução de problemas. Muitos exercícios exigem que você quebre um problema complexo em etapas menores e implemente soluções passo a passo. Esse processo ajuda a treinar sua mente para abordar problemas de forma sistemática e eficiente.

Experimentação e Exploração

Ao resolver exercícios, você tem a liberdade de experimentar diferentes abordagens e soluções. Isso permite que você explore a linguagem JavaScript de maneira mais profunda, descobrindo recursos e técnicas que podem não ser óbvios à primeira vista. A experimentação é uma parte crucial do processo de aprendizado e ajuda a ampliar seu conhecimento além do básico.

Constância

O mais importante de tudo isso é manter a constância, pois é melhor estudar um pouco por dia nem que seja alguns minutos que passar o dia todo estudando e repetir esse processo depois de dias.

Diversifique os Estudos

Existem diversas formas de aprendizado e materiais de apoio, diversifique, leia livros sobre o assunto que deseja aprimorar, assista vídeos, converse com que entende do assunto, faça anotações, anote tudo que puder e achar importante, não fique limitado apenas uma fonte de conhecimento, assim você não desanimará, pois cada forma de aprendizado estimulará você a querer aprender cada vez mais.

Simplicidade

O mais simples é o mais importante quando estamos começando na área do desenvolvimento ou até mesmo aprendendo uma habilidade nova. No vídeo de hoje separei um material bem simples mas com grande valor agregado que irá enriquecer seu conhecimento.

Exercício 01 
HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercício 01</title>
</head>
<body>

    <h1>Programa Par ou Ímpar</h1>

    <form>

        <p>
            Número:
            <input type="number" id="inNumero" required autofocus>
        </p>

        <p>
            <input type="submit" value="Verificar se é Par ou Ímpar">
        </p>
    </form>

        <button id="limpar">Limpar</button>

        <h3> </h3>

        <script src="script.js"></script>
    
</body>
</html>

JavaScript

const frm = document.querySelector('form');
const resp = document.querySelector('h3');
const limpar = document.querySelector('#limpar');


frm.addEventListener('submit', (e)=>{
    e.preventDefault();


    const numero = Number(frm.inNumero.value);

    // if(numero % 2 === 0 ){

    //     resp.innerText= `${numero} é Par` 
    // }else{

    //     resp.innerText= `${numero} é Ímpar`
    // }

    const resposta = numero % 2 === 0 ? "é Par" : "é Ímpar"
    resp.innerText = `${numero} ${resposta}`


})

limpar.addEventListener('click', ()=>{
    frm.inNumero.value = "";
    resp.innerText = "";
})

Exercício 02
HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercício 02</title>
</head>
<body>
    
    <h1>Programa Situação do Aluno</h1>

    <form>
        <p>
            Nome do Aluno:
            <input type="text" id="inNome" required autofocus>
        </p>
        <p>
            1ª Nota:
            <input type="number" min="0" max="10" id="inNota1" required>
        </p>

        <p>
            2ª Nota:
            <input type="number" min="0" max="10" id="inNota2" required>
        </p>

            <input type="submit" value="Exibir Média e Situação">

    </form>
    <br>

    <button id="limpar">Limpar</button>

    <h3></h3>
    <h4></h4>

    <script src="script.js"></script>
</body>
</html>

JavaScript

const frm = document.querySelector('form');
const resp1 = document.querySelector('h3');
const resp2 = document.querySelector('h4');
const limpar = document.querySelector('#limpar');


frm.addEventListener('submit', (e)=>{
    e.preventDefault();

    const nome = frm.inNome.value;

    const nota1 = Number(frm.inNota1.value);
    const nota2 = Number(frm.inNota2.value);

    const media = (nota1 + nota2) / 2;

    resp1.innerText = `Média das Notas ${media.toFixed(2)}`


    if(media >=7){
        resp2.innerText = `Parabéns ${nome}! Você foi aprovado(a)`
        resp2.style.color = 'blue'
    }else if(media >=4){
        resp2.innerText = `Atenção ${nome}! Você está em exame`
        resp2.style.color = 'green'
    }else{

        resp2.innerText = `Ops ${nome}... Você está reprovado(a)`
        resp2.style.color = 'red'
    }

});

limpar.addEventListener('click', ()=>{

    frm.inNome.value = "";
    frm.inNota1.value = "";
    frm.inNota2.value = "";
    resp1.innerText ="";
    resp2.innerText ="";

})

Exercício 03
HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercício 03</title>
</head>
<body>
    
    <h1>Barbearia JS</h1>
    <form>
        <p>
            Qual o seu nome:
            <input type="text" id="inNome">
        </p>
        <p>
            Qual o seu procedimento:
            <input type="text" id="inProcedimento">
        </p>
        <p>
            Para qual dia deseja marcar:
            <input type="text" id="inDia">
        </p>
        <p>
            A que horas deseja marcar
            <input type="text" id="inHoras">
        </p>  

        <input type="submit" value="CONFIRMAR">
    </form>
    <p id="resposta"></p>

    <script src="script.js"></script>
</body>
</html>

JavaScript

const frm = document.querySelector('form');

frm.addEventListener('submit', (e)=>{
    e.preventDefault();

var nome = document.getElementById('inNome').value;
var procedimento = document.getElementById('inProcedimento').value;
var dia = document.getElementById('inDia').value;
var hora = document.getElementById('inHoras').value;


document.getElementById("resposta").innerHTML = "Olá "
+ nome + " aguardamos você para realizar o procedimento "
+ procedimento + " no dia " 
+ dia + " às "
+ hora + " horas. "; 

});

Conclusão

Fazer exercícios em JavaScript é uma estratégia eficaz para aprimorar suas habilidades de programação e se tornar um desenvolvedor mais competente. Além de fortalecer os fundamentos da linguagem, a prática regular melhora sua lógica de programação, capacidade de resolução de problemas e preparação para desafios futuros. Portanto, dedique tempo regularmente para resolver exercícios e veja sua proficiência em JavaScript crescer significativamente.

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *