Spis treści

  1. Gdzie umieścić kod JAVASCRIPT?
  2. Jak znaleźć błąd w kodzie JAVASCRIPT?
  3. Zmienne
  4. Zmienne – zadania
  5. Operacje na liczbach
  6. Operacje na liczbach - zadania
  7. Operacje na ciągach znaków
  8. Instrukcje warunkowe
  9. Instrukcje warunkowe – zadania
  10. Pętle
  11. Pętle - zadania
  12. Zdarzenia
  13. Zdarzenia – zadania
  14. Obiekty

Pomiędzy znacznikami: Jako lokalny plik o rozszerzeniu .js, dołączony za pomocą znacznika: Jako zewnętrzny plik dołączony za pomocą znacznika:W poprzednich wersjach HTML wymagany był atrybut type. Od HTML w wersji 5 już nie jest.

W przeglądarce CHROME naciśnij przycisk F12, bądź otwórz narzędzia dla programistów. Uruchamiamy naszą stronę internetową zawierającą przykładowy skrypt js: Polecenie console.log(“ ”) spowodue wypisanie w konsoli przeglądarki, zawartego pomiędzy nawiasami komunikatu. W przypadku, kiedy nasz kod zawiera błędy, ich lista zostanie wypisana i oznaczona kolorem czerwonym.

Zmienne języka JavaScript, podobnie, jak w innych językach programowania, są pojemnikami zdolnymi do przechowywania jakiś danych. Mogą być to zarówno liczby, ciągi znaków, jak i inne, bardziej skomplikowane struktury danych.
Aby móc wykorzystać zmienną, należy ją stworzyć – zadeklarować. Do wersji 5 języka JavaScript dokonywaliśmy tego za pomocą słówka var. Później wprowadzono jeszcze drugą możliwość – let, która różni się od var pewnymi subtelnościami, o których w temacie o zasięgu zmiennych. Istnieje również możliwość zadeklarowania stałej. Jest to pojemnik, którego wartość nie będzie zmieniana w całym skrypcie. Do jego utworzenia służy słowo const. Gdy podczas deklaracji zmiennej, od razu podajemy jej wartość, mówimy o definicji zmiennej. Przykłady deklaracji/definicji zmiennych: Można dokonać deklaracji więcej niż jednej zmiennej naraz. Aby tego dokonać, kolejne nazwy zmiennych oddzielamy od siebie przecinkiem. Nazwy zmiennych są case sensitive – charakteryzyją się rozróżnianiem wielkości liter. Zmienna o nazwie liczba oraz Liczba czy liCzba, to zupełnie różne zmienne. Nazwa zmiennej nie może się natomiast rozpoczynać od cyfry.
Zadeklarujmy sobie kilka zmiennych, przypiszmy niektórym wartości i sprawdźmy je w konsoli przeglądarki. Jak widzimy liczba1 jest niezdefiniowana. Istnieje, ale nie została jej przypisana żadna konkretna wartość.

Podstawowe typy zmiennych języka JavaScript:

  • number: liczba, np.: 2, 7, 234
  • string: ciąg znaków, np.: ‘a’, “kot”, ‘Kurs JAVASCRIPT’
  • boolean: prawda / fałsz
  • undefined: nieustawiona / nieznana wartość
  • null: brak wartości / pusta

Napisz następujące skrypty :

  1. Oblicza sumę trzech liczb wprowadzonych przez użytkownika, a następnie wyświetli ją na ekranie.
  2. Oblicza Średnią trzech liczb wprowadzonych przez użytkownika, a następnie wyświetli ją na ekranie.
  3. Wczytuje wartość dwóch liczb. Wypisuje wynik sumy, różnicy oraz iloczynu w trzech kolejnych liniach na ekranie.
  4. Oblicza pierwiastek z wprowadzonej liczby. Wynik wyświetli na ekranie.
  5. Oblicza pole kwadratu o długości boku wprowadzonej przez użytkownika. Wynik wyświetli na ekranie.
  6. Oblicza pole prostopadłościanu, którego długości boków podane będą w czasie działania programu. Wynik wyświetli na ekranie
  7. Oblicza pole i obwód koła. Wynik wyświetli na ekranie.
  8. Wczytuje obecną cenę benzyny. Oblicza koszt przejazdu z Gdańska do Szczecina 360 km, przy założeniu, że samochód spala 8 litrów benzyny na 100 km.
  9. Wczytuje cenę benzyny, długość trasy oraz wartość spalania samochodu. Oblicza koszt przejazdu i wypisuje go na ekran.
  10. Oblicza zysk z lokaty dla dowolnej kwoty wprowadzonej przez użytkownika i wypisuje ją na ekran. Aktualna oferta lokaty wynosi 8% rocznie. Uwzględnij „podatek Belki”.

Przedstawię kilka przykładów wykorzystania zmiennych w sktypcie i operacji na nich W pierwszej linijce wypisujemy liczbę 10. Kolejna to wypisanie htmlowego znacznika przejścia do nowej linii. Linijka trzecia to deklaracja zmiennej o nazwie a i przypisanie jej wartości 10. 6 linia wydaje się podobna, jednak znaczniki ” sprawiają, że nie mamy w tym momencie do czynienia z liczbową wartością zmiennej b, ale z wartością tekstową. Próbując dodać do siebie wartości a oraz b w kolejnej linii nie dostaniemy oczekiwanego wyniku 20, ale 1010, gdyż + połączył nam liczbę 10 z ciągiem znaków o tej samej wartości (uwaga trudne słogo: konkatenacja – łączenie ze sobą wyrażeń). W linii 10 wykorzystujemy funkcję parseInt języka javascript, która zamienia nam ciąg znaków w liczbę całkowitą (int – integer – liczba całkowita).
Rezultat działania skryptu: Deklaracja trzech zmiennych z przypisaniem im wartości tekstowych. Funkcję parseInt już znamy. parseFloat zamienia nam wartość tekstową w liczbę zmiennoprzecinkową (float). Również pomnożenie (*) wartości przez 1 sprawiło, że mamy do czynienia z liczbą. Suma trzech wartości początkowo tekstowych daje nam zmiennoprzecinkowy wynik: Kolejne operacje sumy, różnicy, iloczynu i ilorazu na zmiennych całkowitoliczbowych a i b. Ostatnie z przeprowadzonych działań to reszta z dzielenia (%, modulo). Reszta z dzielenia całkowitego 4/3 wynosi 1. Kolejny przykład jest zastosowaniem inkrementacji (++) – zwiększania wartości o 1. Pierwszy zapis (a++) powoduje wypisanie pierwotnej wartości a, a następnie zwiększenie jej o 1 (wypisane 4, zwiększenie do 5). Następnie ++a wykonuje te czynności w kolejności odwrotnej (najpierw zwiększenie wartości a do 6, następnie wypisanie jej na ekran). Pierwsza linijka to stadardowe dzielenie wartości a przez b. W trzeciej mamy podłogę (floor) z dzielenia, czyli zaokrąglenie wyniku do najbliższej całkowitej wartości w dół. Kolejne zaokrąglenie jest do bliższej wartości całkowitej – w dół lub w górę. Ceil zaokrągla nam do najbliższej całkowitej wartości w górę. W ramach ciekawostki macie również dwukrotne użycie tyldy w celu zaokrąglenia liczby. ~ jest operatorem bitowym i zwraca nam dla liczby n wartość -(n+1). Podniesienie a do potęgi b (pow(a,b), 43) oraz pierwiastek kwadratowy z a. Funkcja random() daje nam pseudolosową liczbę z przedziału od 0 do 1. Dwie ostatnie linie mnożą otrzymaną wartość losową razy 100 i zaokrąglają wynik, dając nam tym samym losową liczbę całkowitą z przedziału od 0 do 100. Funkcja typeof zwraca nam typ przekazywanej jej jako parametr wejściowy zmiennej. Kolejno: liczba, ciąg znaków, liczba, zmienna logiczna (true/false, prawda/fałsz). Operacje na wartościach logicznych. && to i / and, || to lub / or. Rezultatem działania && jeśli będzie true tylko jeżeli obie strony będą prawdziwe. Lub da wartość prawdziwą jeśli którakoliwiek strona będzie prawdziwa… Przykład wykorzystania operatorów logicznych. Ostatnia linia zawiera negację (!) – wynik przeciwny. Kolejne dwa przykłady. Pierwszy przedstawia funkcję obliczającą wartość absolutną z liczby, drugi sprawdza warunek, następnie zwraca wartość pierwszą jeśli warunek był prawdziwy lub w przeciwnym przypadku drugą (warunek?wartość1:wartość2).

Za pomocą metody prompt() wczytaj od użytkownika wartość liczby, zadbaj, aby liczba ta była całkowita, a następnie wypisz na ekran:

  1. wprowadzoną liczbę
  2. liczbę o znaku przeciwnym
  3. wprowadzoną liczbę powiększoną o 15
  4. wprowadzoną liczbę powiększoną o 0,5
  5. kwadrat wprowadzonej liczby
  6. wartość jej dzielenia przez 2
  7. resztę z jej dzielenia przez 2
  8. lczbę o jeden większą od wprowadzonej
  9. liczbę o jeden mniejszą od wprowadzonej
  10. liczbę zaokrągloną w dół powstałą z podziału wprowadzonej liczby przez 3
  11. liczbę zaokrągloną w górę powstałą z podziału wprowadzonej liczby przez 3
  12. liczbę zaokrągloną do najbliższej całkowitej powstałą z podziału wprowadzonej liczby przez 3
  13. pierwiastek z wprowadzonej liczby
  14. wynik iloczynu wprowadzonej liczby z liczbą losową z przedziału 0-50
  15. wartość absolutną z wprowadzonej liczby

String jest typem danych służącym do przechowywania ciągu znaków. Ciąg znaków zapisujemy w cudzysłowia i przypisujemy do zmiennej za pomocą znaku przypisania (=).
Ciąg znaków działa jak tablica przechowująca poszczególne znaki w kolejnych swoich komórkach. Zatem jak w przypadku zwykłych tablic, możemy użyć na ciągu znaków własności length, aby sprawdzić długość ciągu znaków.
Przykład definicji ciągu znaków oraz wypisania jego długości na ekran: Ciągi znaków można łączyć ze sobą, w jeden łańcuch. Jest to tzw. konkatenacja. Dokonujemy tego za pomocą symbolu +.
Przykład konkatenacji. Łączymy ze sobą ciąg znaków zawarty w zmiennej tekst oraz dodatkowy łańcuch zawarty w apostrofach. Wynik naszego działania wypisujemy w konsoli przeglądarki. Aby wielokrotnie dopisać jakieś powtarzalne elementy do naszego łańcucha znaków możemy użyć mechanizmu pętli. W poniższym przykładzie trzykrotnie dopiszemy do początkowo pustej zmiennej zdanie zawartość zmiennej slowo. Pisałem wcześniej, że łańcuch znaków, to tak naprawdę tablica zawierająca osobno poszczególne znaki. Możemy się do nich odwołać wykorzystując metodę charAt(indeks), gdzie indeks jest numerem danego znaku w ciągu znaków, bądź w sposób typowo tablicowy – podając wartość indeksu wewnątrz nawiasów kwadratowych. Pamiętajmy, że numeracja rozpoczyna się od 0. Zatem poniższym przykładzie literka W rozpoczynająca zdanie ze zmiennej tekst będzie miała indeks 0, kolejna litera (s) indeks 1, i tak dalej.
Odwołując się do konkretnego indeksu, możemy używać działań matematycznych, np. odwołać się do indeksu o numerze 1+2 (3), bądź do indeksu tekst.length – x, gdzie x będzie numerem znaku licząc od końca ciągu. Każdy znak posiada swój unikatowy numer, kod w siedmiobitowym systemie ASCII. Aby odczytać kod ASCII danego znaku, wykorzystamy metodę charCodeAt(). Dowiemy się, że litera W ma kod87, natomiast i 105. Odwrotną pracę, czyli zamianę kodu na znak dokona metoda lasy String, String.fromCharCode(x), gdzie x to kod znaku. Wykorzystując dwie kolejne metody, możemy zamienić litery w ciągu znaków na wielkie lub małe. I tak odpowiednio: toUpperCase zamieni nam wszystkie litery w ciągu na wielkie, natomiast toLowerCase, na małe. Możemy wykorzystać znajomość powyższych metod i zamienić w zdaniu jedynie pierwszą literę na wielką. W tym celu wybieramy pierwszą literę (charAt(0)), zamieniamy ją na wielką (toUpperCase), a następnie dopisujemy resztę zawartości zmiennej, pozbawioną pierwszej litery. Wykorzystujemy do tego metodę .slice z parametrem 1, pozostawieniem ciągu znaków od znaku z indeksem 1 (bez 0, pierwszej litery). Sprawdzimy teraz, na jakiej pozycji w tekście znajduje się poszukiwany przez nas ciąg znaków. Wykorzystamy do tego metodę indexOf(“”) zwracającą indeks pierwszej litery poszukiwanego ciągu, jeśli takowy został odnaleziony, bądź -1 jeśli go nie ma.
Metoda lastIndexOf(“”) zwraca natomiast indeks pierwszej litery ostatniego znalezionego szukanego ciągu (jeśli występuje wielokrotnie). Czas wyciąć określony fragment tekstu. Wykorzystamy do tego metodę substr(start, długość), gdzie start jest indeksem litery, od której rozpoczniemy wycinany fragment, natomiast długość mówi nam ile znaków wycinamy. Inną opcją na wycięcie fragmentu ciągu znaków jest metoda substring(początek, koniec), gdzie podajemy indeksy znaku początkowego i końcowego wycinanego tekstu. Jeśli wartości początku i końca wpiszemy odwrotnie, to zostaną one automatycznie zamienione miejscami. Natomiast jeśli nie podamy wartości końcowej, zostanie pobrany tekst od podanego indeksu znaku, aż do końca. Kolejną możliwością wycinania tekstu jest metoda slice(początek, koniec), której działanie jest prawie identyczne, jak substring(). Jednak w tym przypadku, jeśli wartości start i stop podamy odwrotnie, nie zostaną one automatycznie zamienione i uzyskamy pusty ciąg znaków. Natomiast jeśli podamy wartość ujemną parametru start lub koniec, będziemy go liczyć od końca ciągu znaków. Tekst możemy również podzielić na elementy. Będą one rozdzielone na fragmenty oddzielone przez określony znak lub ciąg znaków. I tak na przykład możemy podzielić akapit na zdania, czy jak w poniższym przykładzie, zdanie złożone na poszczególne fragmenty, za pomocą symbolu przecinka. Wykorzystamy również mechanizm pętli, o którym wkrótce opowiemy sobie więcej. Wykorzystamy metodę split(“element_dzielący”). Metoda replace(“co”, “na co”) zamienia nam zadany fragment tekstu na inny. Przykładowo zamieńmy sobie adres hosta lokalnego na słówko “domu” Ostatnimi z omawianych przeze mnie dziś metod będą encodeURI oraz decodeURI, służące do zamiany tekstu na adres URI i odwrotnie. Zamienione zostają specyficzne litery językowe, jak np. polskie znaki, spacje oraz znaki specjalne. Przykład poniżej:

Instrukcja warunkowa służy do ograniczenia wykonania jakiś czynności do momentu, kiedy spełnione zostaną podane warunki.
Podstawowa budowa instrukcji warunkowej: Pełna budowa instrukcji warunkowej języka JavaScript: Co oznacza stwierdzenie, że warunek jest spełniony? Nic innego, jak to, iż jego wartość logiczna jest prawdą. Wynikiem oczywiście będzie zawartość bloku if, czyli wypisanie na ekran potwierdzenia pełnoletności.
Przeanalizujmy kolejny przykład: Wypisujemy na ekran wartości zmiennych b oraz c. Początkowo obie te zmienne miały wartość 1, przy końcowym wypisaniu jedna z nich zmieniła wartość na 2. Dlaczego tylko jedna?
Ano dlatego, że bloku instrukcji if nie zamknęliśmy w klamry. Bez oznaczenia bloku instrukcji zasięgiem działania instrukcji warunkowej zostanie objęta tylko pierwsza instrukcja. Wynika stąd, że zależna od wielkości a była tylko zmiana wartości zmiennej b. Jako, że a nie jest >5, instrukcja zwiększająca b o 1 nie wykonała się. Zwiększenie C jest już poza blokiem instrukcji warunkowej i wykona się zawsze.
Zmodyfikujmy powyższy przykład dodając klamry. Tym razem blok instrukcji obejmował zarówno zwiększenie zmiennej b oraz c. Warunek nie został spełniony. Wartości zmiennych pozostały bez zmian.
Prosty przykład pobrania od wartości wartości zmiennej całkowitoliczbowej i sprawdzenie czy jest ona parzysta czy nieparzysta. prompt() – wyskakujące okienko z prośbą o wpisanie wartości przez użytkownika parseInt() – zamiana wprowadzonej wartości na liczbę całkowitą a%2 == 0 – sprawdzenie, czy reszta z dzielenia wartości zmiennej a przez 2 jest równe 0, jeśli tak, to mamy do czynienia z liczbą parzystą
Zawarte w powyższym przykładzie dwa bloki instrukcji warunkowych możemy zastąpić blokiem else (w przeciwnym razie). Kolejny przykład pokaże możliwość zagnieżdżania instrukcji warunkowych wewnątrz siebie: Aby w konsoli wypisało się słowo nareszcie, muszą zostać spełnione jednocześnie dwa warunki: zmienna dzień musi mieć wartość wtorek oraz zmienna pora wartość rano.
Moglibyśmy to samo zawrzeć w jednej instrukcji warunkowej: Łączenia warunków możemy dokonać za pomocą dwóch symboli:

  • warunek1 && warunek2 (i, logiczne mnożenie, and) oba warunki muszą zostać spełnione
  • warunek1 || warunek2 (lub, suma logiczna, or) przynajmniej jeden warunek musi zostać spełniony

Instrukcja switch jest kolejnym sposobem testowania warunków: Wartość zmiennej a, będącej sprawdzaną przez instrukcję switch musi być liczba całkowitą. Na powyższym przykładzie każdy z przypadków (case) sprawdza czy zmienna a przyjmuje kolejno wartości 1, 2,3. Jeśli nie, zostanie wykonany blok domyślny (default). Instrukcje zamknięte w danym bloku case muszą zostać zakończone słówkiem break (przerwij).
Poniżej przykład wykorzystania instrukcji switch do samodzielnej analizy: Na koniec słów kilka o operatorze warunkowym. Ma on następującą postać Jest to skrótowy zapis instrukcji warunkowej if. Gdy wyrażenie jest spełnione wykona się pierwsza instrukcja, jeżeli nie, druga.
Przykładowe zastosowanie operatora warunkowego:

Utwórz następujące skrypty:

  1. Obliczający wynik równania x = a/b. Wynik wypisuje na ekran. W przypadku, kiedy nie można obliczyć wyniku, wyświetli stosowny komunikat.
  2. Obliczający wynik równania x = a/b + c/d . Wynik wypisuje na ekran. W przypadku, kiedy nie można obliczyć wyniku, wyświetli stosowny komunikat.
  3. Obliczający wynik równania x = (a+6) / (b – 4). Wynik wypisuje na ekran. W przypadku, kiedy nie można obliczyć wyniku, wyświetli stosowny komunikat.
  4. Sprawdzający czy wprowadzona liczba jest parzysta. Na ekran wypisuje stosowny komunikat.
  5. Wczytujący dwie liczby. Sprawdza czy pierwsza jest podzielna przez drugą. Na ekran wypisuje stosowny komunikat.
  6. Sprawdzający czy wprowadzona liczba jest dodatnia, ujemna czy równa 0. Na ekran wypisuje stosowny komunikat.
  7. Wypisujący na ekran największą spośród trzech wprowadzonych liczb.
  8. Wypisujący trzy wprowadzone liczby w kolejności rosnącej.

Tym razem będziemy wielokrotnie wykonywali te same czynności. A w zasadzie wykona je za nas struktura zwana pętlą. Omówimy sobie budowę pętli FOR, WHILE oraz DO WHILE
PĘTLA FOR
Budowa pętli for: Składa się z 3 elementów zamkniętych pomiędzy nawiasami okrągłymi, oddzielonymi od siebie średnikami:

  • Pierwszy z elementów to wartości początkowe zmiennych – blok ten wykonuje się raz, na początku działania pętli.
  • Drugi to warunek lub warunki zakończenia pętli – sprawdzane na początku każdego obiegu pętli.
  • Trzeci to blok instrukcji wykonywanych na koniec każdego obiegu pętli, najczęściej inkrementacja zmiennej i
Klamry standardowo zawierają blok instrukcji do wykonania w każdym obiegu pętli.
Przeanalizujmy najbardziej podstawowy przykład zastosowania pętli FOR języka JavaScript: W pierwszym bloku deklarujemy nową zmienną o nazwie i przypisując jej wartość początkową 1. Drugi blok mówi nam o tym, że pętla ma się wykonywać tak długo, dopóki zmienna i jest mniejsza lub równa 10. Trzeci blok oznacza, że na koniec każdego obiegu pętli wartość zmiennej i zwiększy się o 1.
Natomiast w bloku instrukcji mamy wypisanie na ekran aktualnej wartości zmiennej i oraz wypisanie po niej spacji.
W efekcie wypisywanie rozpoczynamy od wartości początkowej zmiennej i, czyli 1, następnie zwiększamy wartość zmiennej i o 1 i ponownie wypisujemy. Dzieje się to tak długo, dopóki zmienna i nie osiągnie wartości 10. Wówczas pętla kończy swoje działanie.
Przeanalizuj proszę dwa kolejne przykłady wraz z efektami ich wykonania. Jak działają? Dlaczego?
Przykład 1: Przykład 2: Przykład wykorzystania nieskończonej pętli for. Wykorzystaliśmy dodatkowe instrukcje sterujące:
  • continue – przerywa obecny i przechodzi do kolejnego obiegu pętli
  • break – kończy działanie pętli
PĘTLA WHILE
Budowa pętli while: Podstawowy przykład działania pętli while. Składa się ona z identycznych elementów jak pętla for, z tym, że inaczej ułożonych.
Wartości początkowe i deklaracje zmiennych odbywają się jeszcze przed uruchomieniem pętli, warunek zakończenia znajduje się pomiędzy nawiasami okrągłymi, natomiast instrukcje dokonywane na koniec obiegu pętli znajdują się… na końcu instrukcji zawartych w pętli. Przykład nieskończonej pętli while. Zasada true / false identyczna jak w instrukcji warunkowej if. Przykład uzależnienia momentu zakończenia pętli od danych wprowadzonych przez użytkownika. PĘTLA DO WHILE Pętla do while jest odwróconą wersją pętli while. Tu rozpoczynamy od wykonania instrukcji, następnie sprawdzamy warunek zakończenia pętli i jeśli nie jest spełniony wykonujemy je ponownie. Różnica pomiędzy pętlą while, a do while polega na tym, że w pętli do while instrukcje zawsze zostaną wykonane przynajmniej jeden raz.

Napisz skrypty:

  1. Wyświetli na ekranie 10 kolejnych liczb całkowitych począwszy od 1.
  2. Wyświetli na ekranie 10 kolejnych liczb całkowitych począwszy od 10 w kolejności malejącej.
  3. Obliczy i wyświetli na ekranie sumę kolejnych 10 liczb całkowitych począwszy od 1.
  4. Wyświetli na ekranie 10 kolejnych parzystych liczb całkowitych począwszy od 2.
  5. Pracownik przez X miesięcy odkłada co miesiąc Y zł. W każdym miesiącu z całej odłożonej na tą chwilę kwoty uzyskuje 8% odsetek.
  6. Jaką kwotę zgromadzi pracownik ?
  7. Obliczy sumę elementów ciągu arytmetycznego, składającego się ze 100 elementów, z których każdy kolejny jest większy od poprzedniego o 10. Pierwszy element wynosi 5.
  8. Obliczy ilość cegieł w piramidzie o podstawie 10 x 10 cegieł.
  9. Obliczy ilość cegieł w ścianie o podstawie X cegieł, wysokości Y rzędów cegieł, gdzie każdy kolejny stawiany rząd cegieł jest o Z cegieł krótszy od poprzedniego (niższego).
  10. Oblicza wagę ściany z 8. podpunktu, przy założeniu, że jedna cegła waży K kilogramów.
  11. Symulujący działanie prostego kalkulatora.
  12. Wyświetli na ekranie ciąg arytmetyczny składający się z N elementów, gdzie pierwszy element ma wartość X, a różnica pomiędzy kolejnymi elementami ciągu wynosi Y.
  13. Oblicza sumę dwóch liczb podanych przez użytkownika. Algorytm ma działać tak długo, aż suma podanych liczb będzie wynosiła 0.
  14. Algorytm oblicza silnię wprowadzonej przez użytkownika liczby.
  15. Wypisuje na ekran ciąg n liczb, z których każda kolejna jest kwadratem poprzedniej liczby z ciągu. Wartość pierwszej liczby podaje użytkownik.
  16. Oblicza sumę oraz średnią z 10 losowych liczb z przedziału <50,100>.

Zdarzenia to rzeczy, które wykonują się na elementach HTML. Przykładowo kliknięcie przez użytkownika przycisku wywołuje zdarzenie click, najechanie myszą na obrazek – mouseover, wybranie elementu – focus, wysłanie formularza – submit, naciśnięcie przycisku na klawiaturze – keydown.
Poniżej tabela z listą dostępnych rodzajów zdarzeń:

Rodzaj zdarzeniOpis
clickelement kliknięty
changeopuszczamy element, który zmienił zawartość
mouseoverkursor na elemencie
mouseoutkursor opuścił element
mouseenterkursor wjechał na element
mouseleavekursor zjechał z elementu
dblclickpodwójne kliknięcie elementu
submitwysłanie formularza
resizezmiana wielkości okna
focuselement został wybrany
blurelement przestał być aktywny
keydownnaciśnięto klawisz na klawiaturze
keyuppuszczono klawisz
inputwciśnięty jest klawisz
loadobiekt został załadowany
contextmenuwciśnięto prawy przycisk myszy i pojawiło się menu kontekstowe
wheelkręcone jest koło myszy
selectzaznaczono zawartość obiektu
unloadstrona jest opuszczana
animationstartrozpoczyna się animacja
animationendkończy się animacja
transitionstartrozpoczyna się efekt przejścia
transitionendkoniec efektu przejścia
transitionruntrwa efekt przejścia

Mix HTML i JS
Najprostszą formą wykorzystania zdarzeń języka JavaScript jest dodanie atrybutu zdarzenia wywołującego daną metodę. Na poniższym przykładzie atrybut onclick, który po kliknięciu przez użytkownika odnośnika wywoła funkcję alert ze stosownym komunikatem. Mieszamy w ten sposób ze sobą treści skryptowe i znaczniki html. Chcemy tego jednak uniknąć, zastosujemy zatem inne metody wywołania zdarzeń, o których poniżej. Wywołanie zdarzenia, a załadowanie strony
Zdarzenie wywołujemy na elementach HTML. Warto zatroszczyć się o to, aby te elementy zostały wcześniej wczytane przez przeglądarkę.
Aby o to zadbać możemy umieścić nasz skrypt na końcu kodu strony, przed samym zamknięciem znacznika , możemy również skorzystać ze zdarzenia DOMContentLoaded. document.querySelector();
Zwraca pierwszy napotkany w kodzie strony element spełniający kryteria zawarte w nawiasach okrągłych.
Przykładowo może to być poszukiwanie paragrafu: Paragraf o nazwie klasy “example”: Bądź na przykład element o id test: Poniżej pełniejszy przykład zastosowania. Skrypt po kliknięciu przycisku o id #but wypisze stosowny komunikat w konsoli przeglądarki. Poniżej w pełni działający przykład. Skopiuj go do pliku html, uruchom w przeglądarce i przeanalizuj działanie. Jak widzisz na przycisku przechwytujemy dwa różne zdarzenia. Pierwszym z nich jest kliknięcie, które wywołuje metodę klikme, która wypisuje informację o kliknięciu do konsoli. Dodatkowo przy każdorazowym najechaniu kursorem na przycisk również informacja o tym wypisywana jest w konsoli, a to dzięki zastosowaniu mouseover.

Zastosowanie document.querySelector działało dla pierwszego napotkanego elementu. Co jednak jeśli chcemy wywołać zdarzenie na większej ilości takich samych elementów? Z pomocą przyjdzie nam: Spowoduje wybranie wszystkich elementów spełniających zadane kryteria (rodzaj elementu, nazwa klasy, itp.).
Przykładowo dodajmy nazwę klasy “done” do każdego paragrafu w dokumencie: Klasa dodana, klasa usunięta
Wiemy już jak dodać nową nazwę klasy do elementu. Czas móc ją również usunąć. Wykorzystujemy do tego classList.remove(‘nazwa_klasy’);
Poniżej przykład skryptu, który na zmianę, po kolejnych kliknięciach dodaje i usuwa nazwę klasy .done dla klikniętego paragrafu. addEventListener()
Kolejnym sposobem rejestracji zdarzeń jest wykorzystanie addEventListener(). Metoda ta przyjmuje trzy argumenty: typ zdarzenia, funkcja do wywołania oraz trzeci, opcjonalny argument – wskazujący jak dane zdarzenia mają się zachować.
Przykładowo dla naszego elementu o klasie “par” po przechwyceniu zdarzenia kliknięcia wykonamy funkcję klikme() oraz drugą funkcję, zmieniającą kolor tekstu. Przykład do analizy: Przechwycenie klawisza
Właściwość key zdarzenia przechowuje nam wartość naciśniętego klawisza. Dzięki wykorzystaniu poniższych właściwości możemy wyciągnąć wartość naciśniętego przycisku, jego kod ASCII oraz sprawdzić, czy naciśnięty został któryś z trójki przycisków: alt, ctrl, shift.
WłaściwośćOpis
e.keynaciśnięty klawisz
e.altKeyczy klawisz alt został naciśnięty
e.ctrlKeyczy klawisz ctrl został naciśnięty
e.shiftKeyczy klawisz shift został naciśnięty
e.keyCodekod ascii naciśniętego klawisza

Poniżej przykład zastosowania powyższej wiedzy. Skopiuj poniższy kod do pliku html, przetestuj go w przeglądarce i przeanalizuj.

  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
  2. Utwórz paragraf klasy wyroznione, 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

Obiekt jest takim tworem, który ma swoje metody (funkcje) i właściwości (zmienne i ich wartości). Znasz już pewne obiekty i zdarzyło Ci się nie raz z nich korzystać. Obiektami są na przykład Math czy window. Obiekty służą do tego, żeby pewne elementy świata poukładać w zamknięte pudełka.
Stwórzmy obiekt kot. Kot niech posiada imię oraz szybkość (właściwości), a także niech potrafi zamiauczeć (metoda). Widzimy tu strukturę budowy obiektu. Jego ciało zamknięte jest w klamrach rozpoczynających się po podaniu typu i nazwy obiektu. Następnie wymieniliśmy jego właściwości, a po znaku dwukropka ich wartości. Na koniec metoda miaucz, która jest zdefiniowaną funkcją wypisującą w konsoli podany komunikat.
Kolejna część programu obrazuje dostęp do danych obiektu. Poprzez wykonanie polecenia kot.imie, otrzymujemy dostęp do właściwości imie metody kot i wypisujemy tę wartość w konsoli. Podobnie robimy z szybkością.
Aby na naszym kocie uruchomić metodę odwołujemy się do niej podobnie jak do właściwości, z tym, że pamiętamy, że nazwa metody (funkcji) kończy się dwoma nawiasami okrągłymi: kod.miaucz().
Kolejny przykład przedstawia możliwość dodania nowych metod i właściwości do obiektu już poza jego ciałem. Wystarczy odwołać się do nazwy obiektu, po kropce podać nazwę nowej właściwości bądź metody i zdefiniować jej wartość.
Wewnątrz metody danego obiektu możemy odwołać się do wartości jego właściwości. Możemy tego dokonać za pomocą podania jego nazwy, np. kot.szybkość, bądź użyć słówka kluczowego this (mówiącego nam, że chodzi nam o ten obiekt, w którym się znajdujemy), tj. this.szybkosc.