Skip to content

Latest commit

 

History

History
310 lines (242 loc) · 11 KB

cap1-07.md

File metadata and controls

310 lines (242 loc) · 11 KB
Raw

Lógica de Programação e Algoritmos com JavaScript

Entrada de Dados com prompt()

1.7 Entrada de Dados com prompt()

Vamos avançar um pouco? Já aprendemos a apresentar uma mensagem na tela em nosso primeiro exemplo. Agora, vamos receber uma informação do usuário e apresentar uma mensagem utilizando essa informação. Para isso, utilizaremos variáveis e aprenderemos um novo comando JavaScript.

Utilizando o prompt()

Uma forma de receber dados do usuário em JavaScript é utilizando o comando (método) prompt(), que exibe uma caixa com um texto e um espaço para digitação.

Exemplo 1.2 — Entrada de dados e uso de variáveis (ex1-07_0 1.html)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Exemplo 1.2</title>
  </head>
  <body>
    <script>
      const nome = prompt("Qual é o seu nome?");
      alert("Olá " + nome);
      console.log("Olá " + nome);

      // Utilizando Template Strings
      alert(`Olá ${nome}. Para essa mensagem eu usei Template Strings`);
    </script>
  </body>
</html>

Detalhes do Programa

  1. Meta Tag: Antes do código JavaScript, adicionamos uma metatag HTML para ajustar os caracteres de acentuação a serem exibidos pela página.

  2. Declaração de Variável e prompt():

    const nome = prompt("Qual é o seu nome?");
    • Esse comando declara a variável nome e executa o método prompt().
    • O nome digitado pelo usuário na caixa de diálogo do prompt é atribuído à variável nome.

  3. Exibição de Mensagem com alert():

    alert("Olá " + nome);
    • O método alert() exibe uma mensagem na tela.
    • A mensagem é uma combinação de um texto fixo ("Olá ") e o conteúdo da variável nome.
    • O resultado será a exibição da palavra "Olá", seguida do nome digitado pelo usuário.

Template Strings

Outra forma de exibir mensagens que contenham um texto fixo e o conteúdo de uma variável em JavaScript é com o uso de Template Strings. Para isso, delimite a mensagem com crases (`) e insira o nome das variáveis usando a sintaxe: ${nomeVar}.

Exemplo com Template Strings

alert(`Olá ${nome}`);

Pontuação Opcional

O uso do ponto e vírgula (;) no final dos comandos em programas JavaScript é opcional, mas é uma boa prática usá-lo para evitar possíveis erros.

Concatenação

Definição

Concatenar significa unir ou ligar coisas em uma sequência.

Concatenar em Programação

No contexto de programação, concatenar geralmente se refere à operação de unir duas ou mais strings (sequências de caracteres) em uma única string.

A concatenação é uma operação comum quando precisamos juntar várias partes de texto em uma só. Isso pode ser útil para criar mensagens dinâmicas, formatar saídas de texto, ou construir URLs e consultas de banco de dados, entre outras aplicações.

Concatenar em JavaScript

Em JavaScript, há várias maneiras de concatenar strings. Vamos explorar as principais:

  1. Operador de Concatenação (+): O operador + é a maneira mais simples e direta de concatenar strings em JavaScript.

    let saudacao = "Olá, ";
let nome = "Maria";
let mensagem = saudacao + nome;
console.log(mensagem); // Saída: "Olá, Maria"

  2. Método concat(): O método concat() pode ser usado para concatenar duas ou mais strings. Embora menos comum que o operador +, ainda é uma opção válida.

    let saudacao = "Olá, ";
let nome = "João";
let mensagem = saudacao.concat(nome);
console.log(mensagem); // Saída: "Olá, João"

  3. Template Strings (Template Literals): Template strings, delimitadas por crases (` `) permitem a inclusão de expressões dentro de placeholders (${}), oferecendo uma maneira mais legível e conveniente de concatenar strings e incluir variáveis.

    let saudacao = "Olá";
let nome = "Ana";
let mensagem = `${saudacao}, ${nome}!`;
console.log(mensagem); // Saída: "Olá, Ana!"

  4. Saudação Personalizada: Neste exemplo, pedimos ao usuário seu nome e concatenamos com uma mensagem de saudação. (ex1-07_02.html)

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Saudação Personalizada</title>
  </head>
  <body>
    <script>
      // Solicita o nome do usuário
      const nome = prompt("Qual é o seu nome?");
      // Cria uma mensagem de saudação concatenando strings
      const saudacao = "Olá, " + nome + "! Seja bem-vindo!";
      // Exibe a mensagem concatenada
      alert(saudacao);
    </script>
  </body>
</html>

  5. Informações de Contato: Neste exemplo, pedimos ao usuário seu nome e seu e-mail e concatenamos essas informações em uma mensagem. (ex1-07_03.html)

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Informações de Contato</title>
  </head>
  <body>
    <script>
      // Solicita o nome do usuário
      const nome = prompt("Qual é o seu nome?");
      // Solicita o e-mail do usuário
      const email = prompt("Qual é o seu e-mail?");
      // Cria uma mensagem concatenando o nome e o e-mail
      const contato = "Nome: " + nome + "\nE-mail: " + email;
      // Exibe a mensagem concatenada
      alert(contato);
    </script>
  </body>
</html>

  6. Criação de URL Dinâmica: Neste exemplo, pedimos ao usuário um ID e concatenamos para formar uma URL dinâmica. (ex1-07_04.html)

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>URL Dinâmica</title>
  </head>
  <body>
    <script>
      // Solicita o ID do usuário
      const userID = prompt("Digite seu ID:");
      // Cria uma URL dinâmica concatenando strings
      const url = "https://meusite.com/usuario/" + userID;
      // Exibe a URL concatenada
      alert("Sua URL é: " + url);
    </script>
  </body>
</html>

  7. Template Literals com prompt(): Aqui está um exemplo de uso de template literals para a concatenação: (ex1-07_05.html)

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Template Literals com Prompt</title>
  </head>
  <body>
    <script>
      // Solicita o primeiro nome do usuário
      const primeiroNome = prompt("Qual é o seu primeiro nome?");
      // Solicita o sobrenome do usuário
      const sobrenome = prompt("Qual é o seu sobrenome?");
      // Cria uma mensagem usando template literals
      const mensagem = `Olá, ${primeiroNome} ${sobrenome}! Seja bem-vindo!`;
      // Exibe a mensagem concatenada
      alert(mensagem);
    </script>
  </body>
</html>

  8. Calculando Idade: Neste exemplo, pedimos ao usuário seu ano de nascimento e calculamos sua idade atual, concatenando o resultado em uma mensagem. (ex1-07_06.html)

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Calculando a Idade</title>
  </head>
  <body>
    <script>
      // Solicita o ano de nascimento do usuário
      const anoNascimento = prompt("Em que ano você nasceu?");
      // Calcula a idade
      const anoAtual = new Date().getFullYear();
      const idade = anoAtual - anoNascimento;
      // Cria uma mensagem informando a idade
      const mensagem = "Você tem " + idade + " anos.";
      // Exibe a mensagem concatenada
      alert(mensagem);
    </script>
  </body>
</html>

    Explicação do Código

    Estrutura HTML Básica

    • <html>: Define o início do documento HTML.
    • <head>: Contém metadados e informações sobre o documento, como o título e o conjunto de caracteres.
    • <meta charset="UTF-8">: Especifica a codificação de caracteres para o documento, garantindo que todos os caracteres sejam exibidos corretamente.
    • <title>: Define o título do documento, que aparece na aba do navegador.
    • <body>: Contém o conteúdo visível do documento HTML.

    Bloco de Script

    • <script>: Utilizado para incluir código JavaScript no documento HTML.

    Código JavaScript

    • a. Solicitação do Ano de Nascimento

      const anoNascimento = prompt("Em que ano você nasceu?");
      • prompt(): Exibe uma caixa de diálogo que solicita ao usuário uma entrada de texto. O texto inserido pelo usuário é retornado como uma string.
      • const: Declara uma variável constante que não pode ser reatribuída.
      • anoNascimento: Variável que armazena o valor retornado pelo prompt().

    • b. Cálculo da Idade

      const anoAtual = new Date().getFullYear();
const idade = anoAtual - anoNascimento;
      • new Date(): Cria um novo objeto Date representando a data e hora atuais.
      • getFullYear(): Método do objeto Date que retorna o ano completo (com 4 dígitos) da data especificada.
      • anoAtual: Variável que armazena o ano atual.
      • idade: Variável que armazena a idade calculada subtraindo o ano de nascimento do ano atual.

    • c. Criação da Mensagem

      const mensagem = "Você tem " + idade + " anos.";
      • const: Declara uma variável constante.
      • mensagem: Variável que armazena a mensagem concatenada, incluindo a idade calculada.

    • d. Exibição da Mensagem

      alert(mensagem);
      • alert(): Exibe uma caixa de alerta com a mensagem especificada.

    Descrição dos Métodos e Funções JavaScript Utilizados

    • prompt():
      • Uso: Solicita uma entrada de texto ao usuário.
      • Sintaxe: prompt(mensagem)
      • Exemplo: const nome = prompt("Qual é o seu nome?");
    • new Date():
      • Uso: Cria um novo objeto Date representando a data e hora atuais.
      • Sintaxe: new Date()
      • Exemplo: const agora = new Date();
    • getFullYear():
      • Uso: Retorna o ano completo (com 4 dígitos) da data especificada.
      • Sintaxe: dateObject.getFullYear()
      • Exemplo: const ano = new Date().getFullYear();
    • alert():
      • Uso: Exibe uma caixa de alerta com uma mensagem.
      • Sintaxe: alert(mensagem)
      • Exemplo: alert("Bem-vindo!");

    Este código solicita ao usuário o ano de nascimento, calcula a idade com base no ano atual, cria uma mensagem informando a idade e exibe essa mensagem em uma caixa de alerta.

    Conclusão

    Concatenar strings é uma operação fundamental em programação, e JavaScript oferece várias maneiras de fazer isso de forma eficiente. Seja usando o operador +, o método concat(), ou template strings, a concatenação permite criar textos dinâmicos e manipulá-los de maneira flexível.

⬅ Voltar | Avançar ➡️