1.Utwórz element div o id kontener, wielkości 50x50px, wprowadź do niego swoje imię i nazwisko, a następnie utwórz dla niego następujące zdarzenia:
- po kliknięciu na niego zmień jego tło na losowy kolor
- po najechaniu na niego kursorem zmień wielkość czcionki na 2 razy większą, po zabraniu kursora z obrębu diva wielkość czcionki ma wracać do pierwotnego rozmiaru
Rozwiązanie: zadanie1
2. Utwórz paragraf klasy wyróżnione, następnie wprowadź do niego nazwę Twojej miejscowości. Utwórz dla niego następujące zdarzenia:
- po podwójnym kliknięciu na niego nazwa miejscowości niech zostanie zamieniona na nazwę powiatu
- po najechaniu kursorem na paragraf, niech w konsoli zostanie wyświetlony komunikat z zawartością paragrafu
3. Utwórz pole tekstowe o id_artykul. Utwórz dla niego następujące zdarzenia:
- po każdorazowym wciśnięciu jakiegoś klawisza na klawiaturze niech długość pola tekstowego zwiększa się o 1
- po wciśnięciu cyfry niech się ona dopisze do zawartości div o id liczba umieszczonego poniżej Twojego pola tekstowego
4. Napisz kod, który po naciśnięciu przycisku z podpisem Powitaj!
. wyświetli tekst – nagłówek 1 stopnia – "Witaj świecie!"
a sam przycisk zniknie.
5. Napisz kod, wstawi suwak o zakresie 0
do 100
z id="suwak"
wartość domyślna 0
. Pod suwakiem w div id="liczba"
ma się wyświetlać aktualnie ustawiona wartość.
6. Należy obliczyć zwrot poniesionych kosztów transportu (wg wzoru: liczba kilometrów razy stawka).
Stawka jest uzależniona od:
Rodzaj pojazdu | Stawka za 1 km |
Samochód osobowy o pojemności do 900cm3 | 0,4894 zł |
Samochód osobowy o pojemności silnika powyżej 900cm3 | 0,7846 zł |
Motocykle | 0,2161 zł |
Wykorzystaj liste rozwijana. Wybrana pozycja to
nazwa_formularza.nazwa_listy.selectedIndex (0 – pierwsza pozycja z listy,1 – druga itd).
Reakcja na zmianę wybranej pozycji na liście: onChange()
Rozwiązanie: Zadanie6
7. Napisz skrypt który zapisze w ciasteczku podana przez użytkownika w formularzu informację.
Cookies – z angielskiego ciasteczka to mechanizm wymyślony przez Netscape’a. Miał za zadanie ułatwienie komunikacji klient-serwer. Jego działanie jest dość proste – serwer wysyła do komputera użytkownika polecenie umieszczenia informacji do przechowania wraz z datą, po jakiej stracą one ważność (a więc zostaną usunięte z komputera). Potem w każdej chwili mogą być one pobrane od przeglądarki.
Ich obsługa została także zainicjowana w JavaScript’cie w najnowszych przeglądarkach , a więc aby je użyć niepotrzebne już są programy uruchamiane po stronie serwera.
W JavaScript’cie cookies obsługiwane są przez jeden obiekt document.cookie. Na dodatek wykorzystanie jest naprawdę proste. – np. aby ustawić wartość pola odwiedziny na tak ważną do 31 grudnia 1999 roku wystarczy umieścić linię:
document.cookie = "odwiedziny=tak; expires=fri, 31-Dec-99 00:00:00 GMT";
Nastepnie odczytujemy wartość i zapisujemy do zmiennej NaszeCiasteczko:
var index = document.cookie.indexOf ("odwiedziy" + "="); var start = document.cookie.indexOf ("=", index) + 1; var meta = document.cookie.indexOf ("; ", start); if (meta < start) { meta = document.cookie.length; } var NaszeCiasteczko = document.cookie.substring (start, meta);