TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak utworzyć alert, monit, potwierdzenie okien dialogowych za pomocą JavaScript?

3

Utwórz okno dialogowe alertu za pomocą JavaScript

Okno dialogowe alertu to wyskakujące okienko pojawiające się w przeglądarce tylko z przyciskiem „OK", informującym użytkowników o bardzo małej wiadomości. Okno alertu służy do wyświetlania komunikatu ostrzegawczego lub informacyjnego. Na przykład:

  • Wiadomość powitalna dla użytkownika po załadowaniu strony
  • Wynik weryfikacji nieprawidłowego wyniku
  • Informacje dotyczące czasu przestoju witryny lub czasu konserwacji.

Tutaj omawiamy, jak utworzyć wyskakujące okienko alertu za pomocą JavaScript z przykładowym kodem. Dowiedz się więcej o tworzeniu alertów w Bootstrap 4.

Jak to działa?

Funkcja JavaScript alert() jest wywoływana, gdy skrypt zostanie wywołany na stronie, która wyświetli argument ciągu w wyskakującym okienku alertu. Dopóki okno alertu nie zostanie wyświetlone, przeglądarka nie będzie kontynuować ładowania strony internetowej.

Składnia

alert("Your Message Here");

Przykład

Poniżej znajduje się przykładowy kod okna alertu w JavaScript. To okno pojawi się, gdy strona zostanie załadowana jako okno powitalne i będzie mieć możliwość kliknięcia przycisku „OK” lub zamknięcia okna dialogowego w przeglądarkach takich jak Google Chrome. Gdy tylko użytkownik kliknie „OK” (lub zamknij), obraz zostanie załadowany. Przeglądarka przestanie przetwarzać stronę do czasu odpowiedzi w oknie alertu.

<HTML> <HEAD> <TITLE>ALERT BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> alert("Welcome to Our Website!!!"); document.write('<IMG SRC=""/>'); </SCRIPT> </BODY> </HTML>

Poniżej znajduje się obraz okna alertu w przeglądarce Chrome po wykonaniu powyższego kodu.

Jak utworzyć alert, monit, potwierdzenie okien dialogowych za pomocą JavaScript?

Okno alertów JavaScript w Google Chrome

Utwórz okno dialogowe monitu za pomocą JavaScript

Okno dialogowe monitu służy do wyświetlania dostosowanych danych wyjściowych na stronie internetowej na podstawie danych wprowadzonych przez użytkownika. W przeciwieństwie do okna alertu, które służy do wyświetlania krótkiej wiadomości za pomocą jednego przycisku „OK”, okno podpowiedzi ma następujące cechy:

  • Wyświetl wcześniej ustaloną wiadomość na pudełku
  • Użytkownik może wprowadzić dane wejściowe w polu tekstowym
  • Dane wejściowe użytkownika są przekazywane z powrotem do skryptu
  • Pole podpowiedzi ma dwa przyciski „OK” i „Anuluj”

Jak to działa?

Pole monitu zatrzymuje również ładowanie strony do czasu otrzymania odpowiedzi od użytkownika. Potrzebuje następujących dwóch zestawów informacji:

  • Wiadomość, która zostanie wyświetlona w okienku zachęty
  • Domyślny tekst do wyświetlenia w polu tekstowym – jest to opcjonalne; możesz pozostawić domyślny tekst pusty
  • Po kliknięciu przycisku „OK” tekst wprowadzony w polu jest przekazywany do skryptu
  • Po kliknięciu przycisku „Anuluj” do skryptu jest przekazywana wartość NULL

Składnia

prompt ("Message", "Default Value");

Przykład

prompt ("What is the color you like?", "Green");

Praktyczny przykład tworzenia okna dialogowego monitu za pomocą JavaScript

Pole podpowiedzi można wykorzystać w wielu praktycznych scenariuszach, a jednym z takich przykładów jest powitanie użytkownika wraz z imieniem. Poniższy kod zapyta o nazwę użytkownika, gdy strona zostanie załadowana, a następnie doda nazwę wraz z powitaniem, aby wyświetlić ją w przeglądarce.

<HTML> <HEAD> <TITLE>PROMPT BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> document.write("<h1>Greetings</h1>"); document.write(prompt("Enter Your Name: ", "Name")); document.write(" Welcome to Our Site!</h1>"); </SCRIPT> </BODY> </HTML>

Jak to wygląda?

Poniżej znajduje się obraz okna zachęty w przeglądarce Chrome po wykonaniu powyższego kodu.

Jak utworzyć alert, monit, potwierdzenie okien dialogowych za pomocą JavaScript?

Pole podpowiedzi JavaScript w Google Chrome

Po wpisaniu przez użytkownika nazwy i naciśnięciu przycisku „OK” nazwa jest przekazywana do skryptu i wyświetlane są wszystkie komunikaty zgodnie z funkcją document.write. Puste miejsce w polu wprowadzania jest również uważane za prawidłową nazwę w polu zachęty JavaScript.

Wyświetlanie okna monitu z nazwą użytkownika

Gdy użytkownik kliknie przycisk „Anuluj”, przekazywana jest wartość null i wyświetlana w przeglądarce zamiast nazwy.

Wyświetlanie pola monitu z wartością zerową

Utwórz okno dialogowe potwierdzenia za pomocą JavaScript

Jest to trzeci typ okien dialogowych dostarczanych w JavaScript, oprócz okienek podpowiedzi i alertów. W tej sekcji wyjaśniono, jak utworzyć okno dialogowe potwierdzenia za pomocą JavaScript, które służy do potwierdzania akcji podjętej przez użytkownika.

Okno dialogowe Potwierdź ma następujące funkcje:

  • Z góry określona wiadomość do wyświetlenia na pudełku
  • Dwa przyciski – OK i Anuluj

Jak to działa?

Pole potwierdzenia, podobnie jak inne okna dialogowe, również zatrzymuje wykonywanie do momentu otrzymania odpowiedzi użytkownika. Akcja użytkownika może być OK lub Anuluj.

  • Wartość true jest przekazywana do programu wywołującego po naciśnięciu przycisku OK
  • Wartość false jest przekazywana do programu wywołującego po naciśnięciu przycisku Anuluj

Składnia

confirm ("Message");

Przykład

confirm ("Do you want to close this window?");

Praktyczny przykład

Poniższy kod JavaScript wykorzystuje metodę zachęty, aby zadać pytanie użytkownikowi. Wyświetlone zostanie pole potwierdzenia, aby pokazać, że odpowiedź jest poprawna lub błędna.

<HTML> <HEAD> <TITLE>CONFIRM BOX EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language="JavaScript"> var q = "What is 5+5?"; var a = 10; var c = "<h2>You are a Genius</h2>"; var ic = "<h2>Reload to Try Again</h2>"; var response = prompt(q,"0"); if (response != a) { alert("Wrong, Better Luck Next Time!!!"); } else { alert("Correct! Well done!!!"); } var o = (response == a)? c: ic; document.write("<BR/>"); document.write(o); </SCRIPT> </BODY> </HTML>

Jak to wygląda?

Poniżej znajduje się obrazek okienka zachęty w przeglądarce Chrome po wykonaniu powyższego kodu i wyświetleniu okienka potwierdzenia w oparciu o poprawność odpowiedzi udzielonej w polu tekstowym podpowiedzi.

Jak utworzyć alert, monit, potwierdzenie okien dialogowych za pomocą JavaScript?

JavaScript potwierdzający poprawną odpowiedź

Jak utworzyć alert, monit, potwierdzenie okien dialogowych za pomocą JavaScript?

JavaScript potwierdzający błędną odpowiedź

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów