Javascript i formularze HTML-a w przykładach

We wszystkich przykładach porównaj efekt wyświetlany w przeglądarce ze źródłem strony wyświetlanym przez opcję "Pokaż źródło" lub podobną! Spróbuj także obejrzeć te przykłady z wyłączoną obsługą Javascriptu w przeglądarce, aby zrozumieć dlaczego funkcje ważne dla prawidłowego działania strony nie mogą się opierać na Javascripcie.

Javascript w połączeniu z formularzami

• Najprostsza obsługa formularza - strona z najprostszym formularzem (zawierającym tylko jedno pole) i funkcją Javascriptu obliczającą kwadrat liczby wpisanej w to pole.
• Rozszerzona wersja poprzedniego przykładu, w którym do formularza wprowadza się dwie liczby (funkcja oblicza wynik mnożenia tych liczb).
• Sprawdzanie poprawności formularza - wykorzystanie Javascriptu do badania poprawności danych wpisanych w formularzu przed ich wysłaniem do serwera (zdarzenie onsubmit). Dane z formularza są przetwarzane przez skrypt PHP na serwerze, natomiast przed ich wysłaniem funkcja w Javascripcie sprawdza, czy pierwsze pole zostało wypełnione. Spróbuj kliknąć przycisk "Wysyłaj formularz" w pustym formularzu, a następnie po jego wypełnieniu!
  W tym przykładzie zarazem pokazany jest rozbudowany formularz HTML-owy, wykorzystujący wszystkie istniejące rodzaje pól danych.

Javascript w innych zastosowaniach (bez formularzy)

• Obsługa dat w Javascripcie - skrypt wyświetla aktualną datę i czas (pobieraną z komputera użytkownika, nie z serwera - Javascript działa zasadniczo po stronie klienta) oraz datę ostatniej modyfikacji strony (o ile serwer przesyła tę informację do przeglądarki w nagłówku HTTP). Zwróć uwagę na błąd w wyświetlaniu roku: w niektórych przeglądarkach rok jest wyświetlany poprawnie (np. 2007), w innych przeglądarkach natomiast błędnie (jako 107).
• Obsługa dat w Javascripcie, wersja poprawiona - wyświetla datę prawidłowo niezależnie od przeglądarki.
• Rozpoznawanie przeglądarki - demonstruje zmienne Javascriptu, które mozna wykorzystać do rozpoznawania przeglądarki.
• Rozdzielczość ekranu - demonstruje sposób odczytywania rozdzielczości ekranu użytkownika z poziomu Javascriptu. Wymaga Javascriptu 1.2 (wszystkie współczesne przeglądarki obsługują tę wersję języka).
• Przekierowanie w zależności od przeglądarki - przykład wykorzystuje rozpoznanie przeglądarki do przekierowania użytkownika na jedną z dwóch stron. Osoby używające Internet Explorera zostaną przekierowane na na tę stronę, a osoby uzywające innych przeglądarek - tutaj. Z uwagi na natychmiastowe działanie przekierowania trudno jest zobaczyć źródło strony (chyba że wyłączy się Javascript w przeglądarce). Można je zobaczyć tutaj.
• Otwieranie i zamykanie okienek - uwaga: przykład do działania wymaga wyłączenia blokady "wyskakujących" okienek (pop-up), obecnej w najnowszych przeglądarkach. Pokazuje sposób manipulacji okienkami przeglądarki z wykorzystaniem funkcji Javascriptu.
• Nieco zmodyfikowana wersja poprzedniego przykładu, różniąca sie wielkością otwieranego okienka oraz brakiem w nim menu, paska narzedzi itp...
• Uwaga! Strona ze złośliwym kodem! Po wejściu na tę stronę przeglądarka zostaje zablokowana w nieskończonej pętli wyświetlających sie w kółko komunikatów. Jedynym wyjściem jest "zabicie" procesu przeglądarki, np. z poziomu menedżera zadań w Windows. Nie mów że nie ostrzegałem! ;-) Ponieważ przy włączonym Javascripcie w oczywisty sposób niemożliwe jest podejrzenie źródła strony, jest ono dostępne tutaj.