Ferestre de dialog și căutare pe pagină

Pentru interacțiunea cu utilizatorul, obiectul window definește o serie de metode care permit crearea de ferestre de dialog sau interacționează cu conținutul ferestrei:

alert(): afișează o fereastră cu un mesa
confirm(): afișează o fereastră cu un mesaj în care utilizatorul trebuie să confirme acțiunea cu două butoane OK și Anulare
prompt(): permite, prin intermediul unei ferestre de dialog, să solicite utilizatorului anumite date
print(): afișează o fereastră de dialog pentru tipărirea paginii
find(): permite să găsească pe pagină un anumit text

Metoda alert()

De exemplu, cu ajutorul metodei alert(), la apăsarea unui buton, afișăm o fereastră cu un mesaj:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
<button id="btn">Click</button>
<script>
const btn = document.getElementById("btn");
btn.addEventListener("click", ()=>{
   alert("Hello FDC.COM");   // afișăm fereastra pop-up la apăsarea butonului
});
</script>
</body>
</html>

Metoda confirm()

Metoda confirm() afișează o fereastră cu un mesaj în care utilizatorul trebuie să confirme acțiunea cu două butoane OK și Anulare. În funcție de alegerea utilizatorului, metoda returnează true (dacă utilizatorul a apăsat OK) sau false (dacă utilizatorul a apăsat butonul Anulare):

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
<button id="btn">Click</button>
<script>
const btn = document.getElementById("btn");
btn.addEventListener("click", ()=>{
   const result = confirm("Încheiați execuția programului?");
   if(result===true)
       console.log("Execuția programului a fost încheiată");
   else
       console.log("Programul continuă să ruleze");
});
</script>
</body>
</html>

Metoda prompt()

Metoda prompt() permite, prin intermediul unei ferestre de dialog, să solicite utilizatorului anumite date. Această metodă returnează valoarea introdusă de utilizator. De exemplu, solicităm pe pagină numele utilizatorului:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
<button id="btn">Click</button>
<script>
const btn = document.getElementById("btn");
btn.addEventListener("click", ()=>{
   const name = prompt("Introduceți numele dvs:");
   console.log("Numele dvs: ", name)
});
</script>
</body>
</html>

Dacă utilizatorul refuză să introducă valoarea și apasă pe butonul anulare, metoda va returna valoarea null.

Metoda find()

Metoda find() permite să găsească pe pagină textul care este transmis metodei prin parametru. Metoda returnează true, dacă textul este găsit, și false, dacă textul nu este găsit. De exemplu:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
<input id="key" name="key" />
<button id="btn">Find</button>
<div>
   <!-- Conținutul paginii -->
</div>
<script>
const btn = document.getElementById("btn");
const keyField = document.getElementById("key");
btn.addEventListener("click", ()=>{
   const result = find(keyField.value);    // căutăm cuvântul introdus în câmp
   console.log(result);
});
</script>
</body>
</html>

În acest caz, la apăsarea butonului, căutăm pe pagină textul introdus în câmpul text. Dacă textul este găsit, este evidențiat.

Metoda print()

Metoda print() afișează o fereastră de dialog pentru tipărirea paginii:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</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();    // tipărim pagina curentă
});
</script>
</body>
</html>

În funcție de browser, fereastra de tipărire poate arăta diferit. De exemplu, aspectul în Google Chrome.