Criando Funções em JavaScript

Aprender o essencial de como criar funções em JavaScript é fundamental para toda pessoa desenvolvedora web. Funções são blocos de código reutilizáveis que executam tarefas específicas nos seus programas. Neste guia, você vai aprender a criar funções em JavaScript do zero, trabalhar com variáveis e construir recursos interativos. Vamos explorar um exemplo prático de como criar uma função de login simples.

Entendendo a anatomia das funções em JavaScript

Vamos ver um exemplo completo de uma função de entrada do usuário:

function enter(){
  var area = document.getElementById('area');
  var text = prompt('informe o seu nome:');
  
  if(text == '' || text = null){
    alert('Por favor, informe o seu nome novamente.')
    area.innerHTml = 'Bem-vindo ...';
  }else{
    area.innerHTML = 'Bem-vindo ' + text;
  }
}

Entendendo os componentes

Variáveis (var)

As variáveis armazenam informações que serão usadas pela função. No exemplo acima, temos duas variáveis importantes:

• area: essa variável captura um elemento HTML por meio do getElementById('area'). O ID é definido dentro de uma tag <div> no HTML e funciona como uma “localização” no código onde podemos inserir ou modificar conteúdo dinamicamente.

• text: armazena o valor que a pessoa usuária digita no prompt(), que é uma caixa de diálogo que pede uma entrada de texto.

A estrutura condicional (if/else)

O bloco condicional verifica se a pessoa usuária realmente digitou algo:

  if(text == '' || text = null){

Essa linha verifica duas condições usando o operador lógico OU (||):

• Se o texto está vazio ('')
• Ou se o texto é null (null)

Quando qualquer uma dessas condições é verdadeira, o sistema exibe um alerta pedindo para tentar de novo e mantém a mensagem padrão “Bem-vindo…” na área.

A propriedade innerHTML

innerHTML é usado para modificar o conteúdo HTML de um elemento. No exemplo:

• Caso de erro: area.innerHTML = 'Bem-vindo...' mantém a mensagem genérica
• Caso de sucesso: area.innerHTML = 'Bem-vindo ' + text personaliza a mensagem com o nome da pessoa usuária

Note que, sem definir o innerHTML depois do alerta, o texto da área ficaria sem os três pontinhos e sem a personalização adequada.

Estrutura básica de HTML

Para a função funcionar, você precisa de um elemento HTML com o ID correspondente:

<div id="area">Bem-vindo...</div>
<button onclick="enter()">Entrar</button>

Boas práticas para criar funções em JavaScript

Ao criar funções em JavaScript, lembre-se de:

1. Dar nomes descritivos às suas funções e variáveis
2. Validar as entradas do usuário para evitar erros
3. Dar feedback claro por meio de alertas ou mensagens
4. Manter o código organizado dentro das tags <script>

Como as funções funcionam nos scripts

As funções ficam dentro das tags <script> no seu arquivo HTML ou em arquivos JavaScript separados. Dentro dessas funções, você cria variáveis (var) e estruturas condicionais (if). A tag script serve como o contêiner onde toda a sua lógica JavaScript vive, conectando a funcionalidade do backend à interface do frontend.

Conclusão

Funções são ferramentas poderosas que permitem criar experiências interativas e dinâmicas nas suas páginas web. Pratique criando suas próprias funções de acordo com as necessidades específicas do seu projeto. À medida que ganhar experiência, você vai descobrir possibilidades infinitas para deixar seus sites mais envolventes e fáceis de usar!

Até a próxima! ; )