Prática JavaExemplos de scripts com código-fonte Code

Por: James Hartmann James Hartmann
Hours Atualização do

⚡ Resumo Inteligente

Prática Code Exemplos usando JavaEste script demonstra como loops, validação de formulários e eventos resolvem tarefas comuns em navegadores. O artigo apresenta um gerador de tabuada, um validador completo de formulários de cadastro, um pop-up acionado ao passar o mouse, um relógio digital em tempo real e as práticas que garantem a confiabilidade desses scripts.

  • ✖️ Laços aninhados: A tabela de multiplicação constrói uma string HTML com um loop de linha externo e um loop de coluna interno.
  • 📝 Validação de formulário: Os arrays paralelos vinculam cada entrada ao seu próprio contêiner de erros, de modo que as mensagens aparecem ao lado do campo que apresentou falha.
  • 📧 Regra de e-mail: A verificação da posição do símbolo "@" e do ponto final rejeita endereços malformados antes do envio.
  • 🖱️ Manipulação de eventos: O addEventListener associa um comportamento a um elemento sem inserir script no código HTML.
  • ⏰ Atualizações programadas: A função setInterval repete uma função em um intervalo fixo, que é o que aciona o exemplo do relógio em tempo real.
  • 🔐 Regra do servidor: As verificações do lado do cliente melhoram apenas a experiência, e cada valor precisa ser validado novamente no servidor.
  • 🧹 Prática Moderna: Substitua document.write e variáveis ​​globais implícitas por textContent, let e const no novo código.
Saiba Mais

JavaExemplos de scripts com código-fonte Code

O que você vai construir nestes JavaExemplos de roteiro

Cada exemplo abaixo é uma página HTML completa que funciona em qualquer navegador sem a necessidade de compilação ou biblioteca externa. Juntos, eles abrangem as três habilidades presentes em quase todos os scripts de navegador: gerar marcação a partir de dados, validar a entrada do usuário e reagir a eventos.

Exemplo Conceito Praticado Principais métodos utilizados
Tabela de multiplicação Laços aninhados e construção de strings prompt, for, while, document.write
Validação de formulário Matrizes, condições e atualizações do DOM getElementById, indexOf, lastIndexOf, innerHTML
Mensagem pop-up Manipulação de eventos adicionar ouvinte de eventos, alerta
Digirelógio tal Temporizadores e formatação de datas setInterval, Data, padStart, textContent

Familiaridade básica com JavaScript A sintaxe é assumida. Se você ainda não está familiarizado com loops, leia como usar loops em JavaScript Antes de começar.

Exemplo 1: JavaTabela de multiplicação de scripts

Crie uma tabela de multiplicação simples, solicitando ao usuário o número de linhas e colunas.

Solução:

<html>
<head>
  <title>Multiplication Table</title>
  <script type="text/javascript">
    var rows = prompt("How many rows for your multiplication table?");
    var cols = prompt("How many columns for your multiplication table?");
    if(rows == "" || rows == null)
   		 rows = 10;
    if(cols== "" || cols== null)
   		 cols = 10;
    createTable(rows, cols);
    function createTable(rows, cols)
    {
      var j=1;
      var output = "<table border='1' width='500' cellspacing='0' cellpadding='5'>";
      for(i=1;i<=rows;i++)
      {
    	output = output + "<tr>";
        while(j<=cols)
        {
  		  output = output + "<td>" + i*j + "</td>";
   		  j = j+1;
   		}
   		 output = output + "</tr>";
   		 j = 1;
    }
    output = output + "</table>";
    document.write(output);
    }
  </script>
</head>
<body>
</body>
</html>

Saída (3 linhas e 4 colunas):

1   2   3   4
2   4   6   8
3   6   9  12

Code explicação: O laço externo `for` cria uma linha da tabela por iteração, enquanto o laço interno `while` preenche essa linha com uma célula por coluna. O contador j O valor é redefinido para 1 após cada linha, etapa que a maioria dos iniciantes esquece. Sem essa redefinição, apenas a primeira linha conteria células.

💡 Dica: A função prompt sempre retorna uma string. A expressão i*j funciona porque JavaO script converte ambos os operandos em números para multiplicação, mas uma comparação como rows > 5 compararia o texto. Envolva a entrada em Number() quando o valor é usado tanto para aritmética quanto para comparação.

Exemplo nº 2: Exemplo de formulários JS

Crie um formulário de exemplo que colete do usuário o nome, sobrenome, e-mail, ID do usuário, senha e confirmação de senha. Todos os campos são obrigatórios e o endereço de e-mail deve estar no formato correto. Além disso, os valores inseridos nos campos de senha e confirmação de senha devem ser idênticos. Após a validação, utilize JavaScriptExiba mensagens de erro apropriadas em vermelho, logo ao lado da caixa de texto onde ocorreu o erro.

Solução com Fonte Code:

<html>
<head>
  <title>Form Validation</title>
  <script type="text/javascript">
    var divs = new Array();
    divs[0] = "errFirst";
    divs[1] = "errLast";
    divs[2] = "errEmail";
    divs[3] = "errUid";
    divs[4] = "errPassword";
    divs[5] = "errConfirm";
    function validate()
	{
      var inputs = new Array();
      inputs[0] = document.getElementById('first').value;
      inputs[1] = document.getElementById('last').value;
      inputs[2] = document.getElementById('email').value;
      inputs[3] = document.getElementById('uid').value;
      inputs[4] = document.getElementById('password').value;
      inputs[5] = document.getElementById('confirm').value;
      var errors = new Array();
      errors[0] = "<span style='color:red'>Please enter your first name!</span>";
      errors[1] = "<span style='color:red'>Please enter your last name!</span>";
      errors[2] = "<span style='color:red'>Please enter your email!</span>";
      errors[3] = "<span style='color:red'>Please enter your user id!</span>";
      errors[4] = "<span style='color:red'>Please enter your password!</span>";
      errors[5] = "<span style='color:red'>Please confirm your password!</span>";
      for (i in inputs)
      {
        var errMessage = errors[i];
        var div = divs[i];
        if (inputs[i] == "")
        	document.getElementById(div).innerHTML = errMessage;
        else if (i==2)
        {
          var atpos=inputs[i].indexOf("@");
          var dotpos=inputs[i].lastIndexOf(".");
          if (atpos<1 || dotpos<atpos+2 || dotpos+2>=inputs[i].length)
        	document.getElementById('errEmail').innerHTML = "<span style='color: red'>Enter a valid email address!</span>";
          else
        	document.getElementById(div).innerHTML = "OK!";
        }
        else if (i==5)
        {
          var first = document.getElementById('password').value;
          var second = document.getElementById('confirm').value;
          if (second != first)
        	document.getElementById('errConfirm').innerHTML = "<span style='color: red'>Your passwords don't match!</span>";
          else
       		document.getElementById(div).innerHTML = "OK!";
        }
        else
        	document.getElementById(div).innerHTML = "OK!";
       }
     }
        function finalValidate()
        {
          var count = 0;
          for(i=0;i<6;i++)
          {
            var div = divs[i];
            if(document.getElementById(div).innerHTML == "OK!")
            count = count + 1;
          }
          if(count == 6)
          	document.getElementById("errFinal").innerHTML = "All the data you entered is correct!!!";
        }
   </script>
</head>
<body>
	<table id="table1">
      <tr>
        <td>First Name:</td>
        <td><input type="text" id="first" onkeyup="validate();" /></td>
        <td><div id="errFirst"></div></td>
      </tr>
      <tr>
        <td>Last Name:</td>
        <td><input type="text" id="last" onkeyup="validate();"/></td>
        <td><div id="errLast"></div></td>
      </tr>
      <tr>
        <td>Email:</td>
        <td><input type="text" id="email" onkeyup="validate();"/></td>
        <td><div id="errEmail"></div></td>
      </tr>
      <tr>
        <td>User Id:</td>
        <td><input type="text" id="uid" onkeyup="validate();"/></td>
        <td><div id="errUid"></div></td>
      </tr>
      <tr>
        <td>Password:</td>
        <td><input type="password" id="password" onkeyup="validate();"/></td>
        <td><div id="errPassword"></div></td>
      </tr>
      <tr>
        <td>Confirm Password:</td>
        <td><input type="password" id="confirm" onkeyup="validate();"/></td>
        <td><div id="errConfirm"></div></td>
      </tr>
      <tr>
        <td><input type="button" id="create" value="Create" onclick="validate();finalValidate();"/></td>
        <td><div id="errFinal"></div></td>
      </tr>
	</table>
</body>
</html>

Comportamento esperado:

Empty first name        -> Please enter your first name!
Email "ann@site"        -> Enter a valid email address!
Email "ann@site.com"    -> OK!
Passwords differ        -> Your passwords don't match!
All six fields valid    -> All the data you entered is correct!!!

Code explicação: Três arrays funcionam em paralelo. inputs Contém os valores atuais, erros contém as mensagens correspondentes, e divs Contém o ID do contêiner que exibe cada mensagem. O índice, portanto, vincula um campo, seu texto de erro e seu local de saída. O ramo de e-mail aceita um endereço somente quando o símbolo @ não é o primeiro caractere e quando pelo menos dois caracteres separam o símbolo @ do ponto final.

⚠️ Aviso: A validação no lado do cliente melhora a experiência do usuário, mas não oferece segurança. Qualquer pessoa pode desativá-la. JavaCrie um script ou envie uma requisição POST diretamente para o endpoint, portanto, cada regra mostrada aqui deve ser repetida no servidor.

ARTIGOS RELACIONADOS

Exemplo nº 3: Mensagem POP-UP usando Evento

Exiba uma mensagem simples como "Bem-vindo(a)!!!" na sua página de demonstração e, quando o usuário passar o cursor sobre a mensagem, uma janela pop-up deverá ser exibida com a mensagem "Bem-vindo(a) à minha página web!!!".

Solução:

<html>
    <head>
        <title>Event!!!</title>
        <script type="text/javascript">
            function trigger() {
                document.getElementById("hover").addEventListener("mouseover", popup);
                function popup() {
                    alert("Welcome to my WebPage!!!");
                }
            }
        </script>
        <style>
            p{
                font-size: 50px;
                position: fixed;
                left: 550px;
                top: 300px;
            }
        </style>
    </head>
    <body onload="trigger();">
        <p id="hover">Welcome!!!</p>
    </body>
</html>

Comportamento esperado:

Page loads      -> the text "Welcome!!!" appears in large type
Mouse hovers    -> an alert box shows "Welcome to my WebPage!!!"

Code explicação: O ouvinte está anexado dentro da função de gatilho, que é executada no evento onload do corpo. Aguardar o carregamento é importante, pois o parágrafo com o id “hover” não existe enquanto o cabeçalho ainda está sendo analisado. O mesmo resultado é obtido de forma mais elegante colocando o script logo antes da tag de fechamento do corpo ou adicionando o atributo defer.

Exemplo nº 4: Ao vivo DigiRelógio tal usando setInterval

Exiba a hora atual na página e atualize-a a cada segundo. Este exemplo introduz temporizadores e mostra a alternativa moderna ao document.write.

<html>
<head>
    <title>Digital Clock</title>
</head>
<body>
    <h2 id="clock">--:--:--</h2>

    <script>
        function showTime() {
            const now = new Date();
            const hh = String(now.getHours()).padStart(2, "0");
            const mm = String(now.getMinutes()).padStart(2, "0");
            const ss = String(now.getSeconds()).padStart(2, "0");

            // textContent is safer than innerHTML for plain text
            document.getElementById("clock").textContent = hh + ":" + mm + ":" + ss;
        }

        showTime();                 // draw immediately
        setInterval(showTime, 1000); // then refresh every second
    </script>
</body>
</html>

Comportamento esperado:

09:05:07
09:05:08
09:05:09   (the heading updates in place once per second)

Chamar `showTime` uma vez antes de `setInterval` evita um atraso visível de um segundo quando a página é aberta. Use `clearInterval` com o valor retornado por `setInterval` quando o relógio precisar parar.

Melhores práticas para escrever estes JavaExemplos de roteiro

Os três exemplos originais datam de um estilo anterior de JavaRoteiro. A lista abaixo mostra o que deve ser alterado ao adaptá-los para o trabalho de produção.

  1. Substitua document.write: Ao ser chamado após o carregamento da página, ele apaga todo o documento. Em vez disso, crie um elemento e defina o conteúdo do texto ou adicione um nó.
  2. Declare todas as variáveis: Use `let` e `const` em vez de depender de variáveis ​​globais implícitas, como o contador. i nos loops acima.
  3. Prefira textContent a innerHTML: Inserir texto fornecido pelo usuário com innerHTML abre uma brecha de segurança para ataques de cross-site scripting.
  4. Remova os manipuladores da marcação: Substitua os atributos onkeyup e onclick por addEventListener, o que mantém o comportamento separado da estrutura.
  5. Converter entrada de prompt: Envolva os valores em Number() antes de usá-los em comparações, já que prompt sempre retorna uma string.
  6. Valide novamente no servidor: Considere as verificações do navegador apenas como uma camada de conveniência.

Para aprofundar esses exemplos, revise JavaMétodos de matriz de script para os arrays paralelos usados ​​no validador de formulários, JavaCadeias de script para as verificações de posição de e-mail, e cookies em JavaScript Para lembrar os valores inseridos por um visitante. Decida onde o script finalizado deve ser inserido, lendo interno e externo JavaScript.

Perguntas Frequentes

Salve o código em um arquivo com a extensão .html e abra-o em qualquer navegador. Nenhum servidor, compilador ou biblioteca é necessário para qualquer um dos quatro exemplos desta página.

O loop while para quando j ultrapassa a contagem de colunas. Sem redefinir j para 1, todas as linhas após a primeira não produziriam nenhuma célula.

Não. Isso apenas melhora a experiência ao fornecer feedback instantâneo. Uma solicitação pode ignorar o navegador completamente, então o servidor precisa aplicar as mesmas regras antes de armazenar qualquer coisa.

O evento `mouseover` é disparado novamente quando o ponteiro se move para um elemento filho, enquanto o evento `mouseenter` é disparado apenas uma vez para o próprio elemento. Escolha `mouseenter` quando disparos repetidos não forem desejados.

A IA é útil para um primeiro rascunho, mas o código gerado frequentemente usa innerHTML com entradas não escapadas. Leia cada linha e substitua as escritas inseguras no DOM antes de publicar.

Sim, quando você cola o erro exato do console junto com o código. Falhas de sincronização, como um script sendo executado antes que o elemento exista, estão entre as mais fáceis de serem identificadas por um assistente.

Resuma esta postagem com: