Janelas de Diálogo e Pesquisa em Páginas com JavaScript

Para interagir com o usuário no objeto window, são definidos vários métodos que permitem criar janelas de diálogo ou interagir com o conteúdo da janela:

alert(): exibe uma janela com uma mensagem.
confirm(): mostra uma janela onde o usuário deve confirmar uma ação com os botões OK e Cancelar.
prompt(): permite solicitar ao usuário dados por meio de uma janela de diálogo.
print(): mostra uma janela de diálogo para imprimir a página.
find(): possibilita encontrar um texto específico na página.

alert

Por exemplo, ao clicar em um botão, uma mensagem é exibida usando o método alert():

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <button id="btn">Click</button>
    <script>
      const btn = document.getElementById("btn");
      btn.addEventListener("click", () => {
        alert("Hello Programicio!"); // exibe a janela de alerta ao clicar no botão
      });
    </script>
  </body>
</html>

A função alert em JavaScript

confirm

O método confirm() exibe uma janela de mensagem onde o usuário deve confirmar uma ação. Dependendo da escolha do usuário, o método retorna true (se o usuário clicou em OK) ou false (se o usuário clicou em Cancelar):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <button id="btn">Click</button>
    <script>
      const btn = document.getElementById("btn");
      btn.addEventListener("click", () => {
        const result = confirm("Deseja encerrar o programa?");
        if (result === true) console.log("Programa encerrado");
        else console.log("Programa continua em execução");
      });
    </script>
  </body>
</html>

A função confirm em JavaScript

prompt

O método prompt() permite solicitar ao usuário dados através de uma janela de diálogo. Este método retorna o valor inserido pelo usuário. Por exemplo, solicitamos o nome do usuário na página:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <button id="btn">Click</button>
    <script>
      const btn = document.getElementById("btn");
      btn.addEventListener("click", () => {
        const name = prompt("Digite seu nome:");
        console.log("Seu nome: ", name);
      });
    </script>
  </body>
</html>

A função prompt em JavaScript

Se o usuário se recusar a inserir um valor e clicar no botão cancelar, o método retornará null.

find

O método find() permite encontrar um texto na página, que é passado para o método como parâmetro. O método retorna true se o texto for encontrado e false se não for encontrado. Por exemplo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <input id="key" name="key" />
    <button id="btn">Find</button>
    <div>
      <p>JavaScript é uma linguagem de programação que permite a você implementar itens complexos em páginas da web.</p>
    </div>
    <script>
      const btn = document.getElementById("btn");
      const keyField = document.getElementById("key");
      btn.addEventListener("click", () => {
        const result = find(keyField.value); // procuramos a palavra inserida no campo
        console.log(result);
      });
    </script>
  </body>
</html>

Neste caso, ao pressionar o botão, buscamos na página o texto inserido no campo de texto. Se o texto for encontrado, ele será destacado.

A função find em JavaScript

print

O método print mostra uma mensagem de diálogo para imprimir a página:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <button id="btn">Print</button>
    <p>Hello World</p>
    <script>
      const btn = document.getElementById("btn");
      const keyField = document.getElementById("key");
      btn.addEventListener("click", () => {
        print(); // imprime a página atual
      });
    </script>
  </body>
</html>

A aparência da janela de impressão pode variar dependendo do navegador. Por exemplo, a vista no Google Chrome:

A função print em JavaScript