Tutaj możesz na przykład napisać do mnie na „mydle” wszystko, co myślisz o moich lekcjach. Jeśli nagle podekscytowałeś się i nacisnąłeś przycisk, a potem jakoś stało się to niezręczne, pojawi się okno dialogowe i otrzeźwi cię.

Jeśli robisz wyskakujące okienka, dobrą praktyką jest ostrzec użytkownika i dać mu wybór, czy otworzyć okno, czy nie. Aby to zrobić, przed załadowaniem okna musisz zwolnić "parlamentarz" - okno dialogowe potwierdzać(). Tutaj funkcja jest wywoływana z . Porozmawiamy o tym już niedługo, gdy przejdziemy do tworzenia okien za pomocą metody otwarty().

metoda zachęty ()

Ta metoda już monituje użytkownika o określone dane. Pojawi się okno dialogowe z polem wprowadzania. Metoda zwraca dane, które użytkownik wprowadził w tym polu i pozwala programowi na pracę z tymi danymi.

W metodzie podpowiedź() dwa argumenty: pytanie (które pojawia się nad polem wejściowym) i odpowiedź (tekst w polu wejściowym):

Jeśli chcesz, aby pole wejściowe było czyste, umieść puste cudzysłowy jako drugi argument:

Zobaczmy to w akcji. Naciśnij przycisk, nie bój się.

Czyli wprowadziłeś (lub nie wprowadziłeś) dane i otrzymałeś odpowiedź z komputera na podstawie tych danych (lub ich braku).

Oto prosta wersja tej funkcji:

Nieruchomość wewnętrznyHTML, który pozwala kontrolować zawartość tagu, spotkaliśmy się na lekcji 10, kiedy programowaliśmy nazwy pod obrazkami.

A oto kod przycisku i pusty akapit powitania.

Ale jeśli okazałeś się moim imiennikiem, widziałeś, że funkcja również na to zareagowała.

Jak to zrobić w „szorstkiej” wersji, możesz już sam zgadnąć. Musisz sprawdzić zmienną Nazwa Użytkownika nie tylko w pustych cytatach, ale także w „ Andrzej” i dodaj jeszcze jeden jeśli z odpowiednim tekstem (możesz sam ćwiczyć).

Ale jeśli wpiszesz „ Andrzej", "Andryusza", "Andriuszka", "Andriuchań", "Andreyka", "Andriej Iwanowicz" itd., to wynik będzie podobny, chociaż nie przeszedłem wprost przez wszystkie te wartości, ale udało mi się tylko pięć wierszy: " Andre", "Andrzej", "Andrzej", "Andreiche" oraz " Andreichu”(ostatnie trzy - w celu wykluczenia Andreichika, Andreichenko i Andreichuka z imienników, przy jednoczesnym zachowaniu Andreichika w imiennikach).

Oznacza to, że możesz się domyślić, że funkcja sprawdza zmienną Nazwa Użytkownika dla pierwszych 5, 6 lub 8 znaków.

Ale o tym porozmawiamy nieco później, kiedy przejdziemy do obiektów łańcuchowych i ich metod. Chcę tylko, abyście z góry wyobrazili sobie zadania, które musimy rozwiązać (w szczególności wszelkiego rodzaju dzielenie ciągów na podciągi). Wtedy same decyzje będą wydawały się jaśniejsze. Ale jeśli nie możesz czekać, możesz "skopiować" funkcję z kodu i "wyciąć jak orzech". Dla ciekawskich napisałem tam komentarz.

metoda podpowiedź() może być również użyty do wprowadzenia hasła.

To nie koniec lekcji!

Pobawmy się trochę w szpiega, aby zakończyć czytanie tego rozdziału. Najpierw spróbuj nacisnąć przycisk i coś wpisać.

Ach, to jest to! Ale spójrz, jest jeszcze jeden przycisk! Daj spokój...

Hasło:

Ponownie naciśnij pierwszy przycisk i wprowadź poprawne hasło.

Cała ta zabawa może mieć jakiś efekt, ale w rzeczywistości hasło można znaleźć, naciskając prawy przycisk i patrząc na to w kodzie. Niektórzy mogą naiwnie pomyśleć, że wystarczy umieścić kod w osobnym pliku .js. Ale w kodzie strony będzie link do tego pliku z adresem. A jeśli to zadzwonisz pasek adresu, otworzy się plik z kodem JavaScript :)

Czy można zaszyfrować hasło kodem? Możesz, ale to znowu wymaga manipulacji ciągami wraz z użyciem pewnych metod matematycznych. Kiedy do tego dojdziemy, przestudiujemy również „prawdziwy” skrypt hasła. Ale technika interakcji z użytkownikiem nadal będzie taka sama: metoda podpowiedź(). (Czy można „złamać” zaszyfrowane hasło? Niestety, doskonałość hakerów nie ma granic…)

W ten sam sposób, w jaki „złapaliśmy” nazwę lub jej brak, złapiemy hasło funkcją.

Jeśli wprowadzisz nieprawidłowe hasło lub nic nie wprowadzisz, linia

document.getElementById("no").style.display = "blok"

otwiera blok drugim przyciskiem

A jeśli zostanie wprowadzone prawidłowe hasło, akcja zostanie przeniesiona do ciągu

document.getElementById("tak").style.display = "blok",

który otwiera następny blok

Przestań, co to za kryakozubry? To prosty szyfr, wkrótce wyjaśnię.

W międzyczasie podaję kod tych bloków (dla jasności pomijam tabelkę z ramkami, którą zamknąłem w ostatnim bloku):

A więc o szyfrowaniu. Jest bardzo nieszczęśliwa. Każdy, poznanie funkcji ucieczka() oraz ucieczka (), natychmiast go zhakuje.

Funkcjonować escape("tu wpisz ciąg") konwertuje znaki na ich wartości szesnastkowe.

Funkcjonować unescape("tu wstaw kwakaubów") robi coś przeciwnego.

Aby zaszyfrować hasło w ten sposób, musisz je przejechać w domu ucieczka(), skopiuj wynik i wklej go do ucieczka (). Ale to, powtarzam, nie jest poważne.

Cóż, bo kompletny zestaw- funkcja dla drugiego przycisku:

Do wyjścia standardowego okna dialogowe JavaScript ma tylko trzy metody, których nauczyliśmy się dzisiaj. Chociaż metody te nie zdarzają się zbyt często, umiejętność korzystania z nich pewnie jest niezwykle przydatna. Są proste, ale jednocześnie są, że tak powiem, „czystym” programowaniem. Są bardzo dobre, aby wypełnić Twoją rękę w opanowaniu języka programowania. I radzę eksperymentować z nimi w każdy możliwy sposób, nawet jeśli bezcelowo z pragmatycznego punktu widzenia. dobre programowanie- to ekscytująca gra, jak każda kreatywność.

W tej lekcji poznamy metody obiektu window: alert() , prompt() i confirm() .

alert() metoda

Metoda alert() ma na celu wyświetlenie okna dialogowego ostrzeżenia z określonym komunikatem i przyciskiem OK na ekranie użytkownika. Może służyć do przekazywania użytkownikowi ważnych informacji.

okno.alert(Parametr_1);

Metoda alert() ma jeden wymagany parametr, którym jest tekst komunikatu, który jest wyświetlany w oknie dialogowym. Ta metoda nie zwraca niczego w wyniku jej wykonania.

Na przykład, wyświetlmy okno dialogowe ostrzeżenia dla odwiedzającego witrynę po kliknięciu łącza: Wejdź na stronę internetową

Można zorganizować dialog z odwiedzającym zasób sieciowy różne sposoby, z których użyj Funkcje JavaScript alert() to najprostsza i najszybsza opcja. Ta opcja jest szczególnie dobra do celów testowych, ale w wielu zasobach jest używana jako naturalna funkcjonalność.

Funkcja JavaScript alert() pozwala uzyskać odpowiedź twierdzącą. W rzeczywistości to nie odpowiedź jest ważna, ale sam fakt wydawania informacji. Ponadto zasób sieciowy przestaje działać, dopóki użytkownik nie odpowie. Odpowiedź na alert jest zawsze taka sama - oto odpowiedź!

Do celów debugowania JavaScript alert() jest idealnym narzędziem do szybkiego uzyskiwania aktualnych informacji, podejmowania decyzji i kontynuowania pracy. Ale w celu normalnego funkcjonowania strony ma również sporo zalet.

Przyciąganie uwagi odwiedzającego

„Alert” – jak w życiu, tworzy wydarzenie, obok którego nie można przejść. Ale to zdarzenie może, ale nie musi wystąpić..

Rzadki programista zdaje sobie sprawę z tej okoliczności i boleśnie długo debuguje swoją witrynę po stronie klienta. Jednocześnie niewielu programistów nie wie: często tak trudno jest znaleźć błąd w kliencie, czyli w przeglądarce, że:

• marnują się godziny cennego czasu;
• wydawane są niesamowite przekształcenia kodu;
• wiele skryptów jest odrzuconych, słowem, zarówno przeglądarka, jak i serwer to rozumieją.

I nie ma rezultatu. Ani debugery nie pomagają, ani słowa, ani narzędzia do debugowania wbudowane w każdą przeglądarkę. Tymczasem skrzynia zawsze po prostu się otwiera - ważny jest odpowiedni klucz.

Prosta zasada poprawnego kodu

Przede wszystkim pliki cookie stały się najbardziej pożądanym elementem nowoczesnej strony internetowej. Nigdy nie powinieneś zapominać:

• Alert JavaScript i plik cookie dotyczący dokumentów
• „tu i teraz” i „w ogóle lub kiedyś”.

Pliki cookie to fajna funkcja do zapamiętania w trzewiach przeglądarki o każdym kliencie, ale nie należy przywiązywać do tego wagi w bieżącej sesji. Główną troską plików cookie jest pozostawanie w „pamięci” przeglądarki w treści, którą miała w momencie odejścia odwiedzającego.

Pod wszystkimi innymi względami kod skryptu w trzewiach przeglądarki zależy tylko od siebie i zdarzeń, które przetwarza.

W tym kontekście, a ten kontekst jest tutaj idealny, kod nie może zawieść, jeśli jest napisany poprawnie. Jest to idealna zasada poprawnego kodu. Jeśli przeglądarka wyświetla pusty ekran lub robi coś nie tak, istnieje powód, aby przypuszczać, że wystąpił błąd.

Łatwiejsze zastosowanie:

• JavaScript alert("Jak dotąd wszystko było w porządku!").

Najlepszy debugger lub debugger to zdarzenie, które musi się wydarzyć ale tak się nie dzieje.

Przesuwając tę ​​konstrukcję od zera do irytującego przestępstwa w kodzie, możesz znaleźć miejsce, po którym nie działa. Błąd zostanie znaleziony. JavaScript alert() to okno modalne. Nie można go w żaden sposób ominąć i nic się nie stanie, dopóki programista / gość nie zamknie tego okna.

Jeśli okno się nie pojawi, oznacza to, że albo jest ono niepoprawnie wskazane w kodzie, albo wszystko, co znajduje się przed nim, zawiera błąd.

Trudna sytuacja, w której alert JavaScript wydaje się nie działać

Dotyczy to głównie algorytmów AJAX służących do wymiany informacji z serwerem. Nie zawsze jest dopuszczalne używanie tutaj klasycznych narzędzi do debugowania, a także po stronie klienta system warstwowy obiekty, wtedy debugowanie jest zazwyczaj przekształcane w umysł programisty i żaden debugger nie może pomóc.

Najlepszą opcją dla alertu w procedurze komunikacji z serwerem jest div (div), w którym umieszczony jest protokół komunikacji z serwerem metodą innerHTML - zawsze będzie jasne, na jakim etapie występuje problem.

Statyczny element div, który jest zawsze widoczny na stronie, nie jest modalem alertu JavaScript. Okno może się nie pojawiać, a przyczyn tego może być wiele i są one poprawne składniowo. Język przeglądarki ma wyjątkowo spokojne usposobienie i nigdy nie podejmie żadnych działań, jeśli czegoś nie przeanalizował i nie zrozumiał.

Statyczna natura każdego tagu HTML to dobra rzecz. Usuń cały kod i dodawaj go porcjami, aż błąd wystąpi ponownie - nie najlepszy szybka technologia do debugowania. Poprawne pisanie jest popularną radą, pożądaną, ale niepraktyczną.

Język przeglądarki jest sterowany zdarzeniami, jego głównym zadaniem nie jest sekwencyjny kod, ale wykonanie funkcjonalności przypisanej do tagów strony i obsługa zdarzeń.

Dodatkowa zasada do prostej zasady

Jeżeli w przeglądarce nie pojawiło się okienko z alertu JavaScript("Do tej pory wszystko jest napisane poprawnie") oznacza to, że składnia aż do miejsca, w którym ta konstrukcja jest napisana, nie budzi wątpliwości w przeglądarce i jest wykonywana poprawnie.

Logika nowoczesny styl litery mają poważną wadę. Wszystkie pliki stronicowania są scalane (wraz z ich istotą i typami) w jedną całość, a następnie budowany jest DOM. Często znaczenie ma kolejność łączenia plików.

Najlepiej, gdy programista nie przywiązuje wagi do eventowej zasady organizowania wykonania funkcji przypisanych do zdarzeń, ale układa wszystkie funkcje w kolejności ich zastosowania i przypisania do tagów strony i zdarzeń.

Porządek jest zawsze najważniejszy. JavaScript sam ustali resztę: co i kiedy wywołać. Współczesne programowanie ogólnie iw kontekście dowolnej metody, w szczególności wysoce zorganizowanego podejścia obiektowego, jest zawsze spójne. są zawsze łączone sekwencyjnie zgodnie z opisem.

Jeśli coś się nie dzieje, to znaczy: nie gdzieś coś jest nie tak, ale tylko przed tym miejscem.

W JavaScript istnieją trzy podstawowe operacje, które pozwalają na otrzymanie danych od użytkownika do dalszego przetwarzania w skryptach. Są to ostrzeżenia, podpowiedzi i potwierdzenia. Do czego służą, jak ich używać i inne niuanse zostaną omówione w dalszej części tego artykułu.

alarm

Służy do wyświetlania okna modalnego na ekranie przeglądarki (oznacza to, że użytkownik nie może kliknąć niczego na stronie, dopóki nie zamknie tego okna. W tym przykładzie, dopóki nie kliknie "OK" w oknie).

Po wyświetleniu komunikatu zawartego w alercie wykonywanie skryptu jest zawieszane i wznawiane po zamknięciu okna modalnego.

W przypadku napełniania i klikając OK, skrypt zwróci informacje wprowadzone przez użytkownika.

Składnia tego polecenia nieco bardziej skomplikowany niż poprzedni, ponieważ pozwala ustawić tekst odwołania użytkownika i zawartość pola do wprowadzania informacji, które będą wyświetlane domyślnie: wynik = monit(tytuł, domyślny) ;, gdzie

• tytuł- wiadomość, która zostanie wyświetlona użytkownikowi w oknie modalnym. Argument jest wymagany.
• domyślna- co będzie domyślnie wyświetlane w polu wprowadzania tekstu. Wymagane jest również wypełnienie, ponieważ nieustawienie może prowadzić do błędów w niektórych przeglądarkach. Jeśli chcesz pozostawić pole wprowadzania puste, po prostu ustaw monit w następujący sposób:

  var mójTest = prompt("Dowolne informacje" , """);

Mały przykład szybkiego użycia:

var rok = monit ( "W którym roku ukończyłeś szkołę średnią?", 2008); alert("Jesteś absolwentem " + rok + " roku!" );

Zazwyczaj to polecenie służy do zbierania danych od użytkowników, których skrypt potrzebuje do dalszej pracy.

potwierdzać

Jest to również okno modalne. Jak nietrudno się domyślić z nazwy, zwykle używa się jej do uzgodnienia czegoś z użytkownikiem.

Zaostrzony do tego - do interakcji udostępnia użytkownikowi przyciski OK i CANCEL, które zwracają do skryptu odpowiednio wartości logiczne true i false.

W tym artykule przyjrzymy się trzem interesującym metodom, a mianowicie: alert(), Confirm() i prompt() metody. Oni wszyscy przeznaczone do interakcji z użytkownikiem.

Wszystkie trzy z tych metod należą do obiektu window. Można je nazwać tak: okno.nazwa_metody(); Ale JavaScript pozwala nam nie określać tego obiektu okna, ale po prostu napisać nazwę metody.

Zaczniemy od metody alert(). Ta metoda wyświetla określony komunikat w oknie przeglądarki użytkownika. To pole będzie wyświetlane na górze całej strony i dopóki użytkownik nie kliknie przycisku OK, nie zostanie zamknięte.

Aby to zademonstrować, wyświetlmy komunikat za pomocą metody alert().

var dzisiaj_is = "Poniedziałek"; alert("Dzisiaj jest" + dzisiaj_jest);

Wewnątrz metody możemy określić dowolny ciąg, tylko bez tag html ow. Nie są tutaj przetwarzane, ale wyświetlane w stanie, w jakim są.

Jeśli ciąg, który chcemy określić jest bardzo długi i chcemy skoczyć do Nowa linia, to tutaj jest tag html
nie zadziała. Tutaj musisz użyć znaku "\n".

Alert("Loooooooong \nStringgggggg");

Ta metoda jest często stosowana znaleźć błąd w kodzie.

Proces przetwarzania kodu przebiega od góry do dołu, więc aby wyłapać błąd, po prostu piszemy metodę alert() w zamierzonym obszarze, w którym znajduje się błąd. A jeśli alert() zadziałał, to nie ma błędów do linii, w której jest napisane.

Następnie musisz przenieść go o jedną lub więcej linii poniżej. Zapisujemy zmiany, ponownie odświeżamy stronę w przeglądarce i sprawdzamy, czy alert() zadziałał, co oznacza, że ​​przed linią, w której się znajduje, nie ma żadnych błędów, w przeciwnym razie jeśli to nie zadziałało, błąd jest w wierszu powyżej, w którym obecnie jest. W ten sposób możesz znaleźć błąd w kodzie.

Metoda Confirm()

Ta metoda służy do potwierdzenia odpowiedzi na jakieś pytanie. Istnieją tylko dwie opcje odpowiedzi, tak (OK) lub nie (Anuluj / Anuluj). Jeśli użytkownik odpowie tak, metoda zwróci true, w przeciwnym razie zwróci false.

Na przykład wyświetlimy okno za pomocą metody Confirm(), w którym zapytamy użytkownika "Czy na pewno chcesz opuścić stronę?". Jeżeli użytkownik odpowie tak, to poprzez metodę alert() wyświetlimy taki komunikat "Użytkownik chce opuścić stronę", w przeciwnym razie wyświetlimy kolejny komunikat "Użytkownik NIE chce opuszczać strony".

Var user_answer = Confirm("Czy na pewno chcesz opuścić stronę?"); if(user_answer) alert("Użytkownik chce opuścić stronę"); else alert("Użytkownik NIE chce \nopuszczać strony");

Tak działa metoda Confirm(). Może być używany przy różnych okazjach. Na przykład przed usunięciem czegoś ze strony zwyczajowo pyta się użytkownika, czy jest pewien swoich działań. Lub przed przesłaniem formularza możesz również zapytać użytkownika „Czy wypełniłeś wszystko poprawnie?” Jeśli odpowie tak, formularz zostanie wysłany, w przeciwnym razie nie zostanie wysłany.

metoda zachęty ()

A ostatnią metodą, której się nauczymy, jest metoda prompt(). Ta metoda jest używana rzadziej niż dwie pozostałe metody. Pozwala uzyskać od użytkownika pewne informacje, które wprowadzi w pole tekstowe.

W rezultacie metoda prompt() zwraca ciąg wejściowy, jeśli użytkownik kliknął przycisk OK, lub null, jeśli użytkownik kliknął przycisk anulowania.

Jako parametr, czyli wewnątrz nawiasów Ta metoda możemy napisać monit lub pytanie, aby poinformować użytkownika, jakie informacje należy wprowadzić.

Na przykład poprośmy użytkownika o odpowiedź na pytanie „Jak się nazywasz?”. Wprowadzona przez użytkownika nazwa zostanie wyświetlona na ekranie za pomocą metody alert().

Varname = prompt("Jak masz na imię?"); alert("Twoje imię to " + imię);

Zapisz i otwórz stronę w przeglądarce.

Oczywiście wszelkie informacje można wprowadzić do pola tekstowego za pomocą metody prompt(). Ta informacja zostanie zwrócona jako ciąg, nawet w przypadku cyfr lub innych znaków specjalnych.

Na przykład poprośmy użytkownika o wprowadzenie dwóch liczb, aby później je pomnożyć. Będzie kalkulator do mnożenia liczb.

Var x = monit("Wprowadź pierwszą liczbę:"); var y = monit("Wprowadź drugą liczbę:"); //Konwertuj wprowadzone liczby z typu string na typ liczbowy x = Number(x); y = liczba(y); document.write(x + " * " + y + " = " + (x * y));

Wprowadzone liczby są ciągami, więc aby uzyskać poprawny wynik mnożenia, liczby te muszą zostać przekazane przez funkcję Number(), która konwertuje je z typu string na normalne liczby.

Cóż, to wszystko. Teraz znasz jeszcze trzy metody: alert(), potwierdzić() i monit(). Które możesz bezpiecznie wykorzystać w praktyce.