Janelas de Diálogo e Pesquisa em Páginas - 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>

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>

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>

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.

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: