⛩️ WarsawJS Workshop #1 — JavaScript (Basic Level)
Projekt nr. 1 [ demo ]
Treść zadania nr. 1
- ...
Projekt nr. 2 [ demo ]
Treść zadania nr. 2
- ...
Projekt nr. 3 [ demo ]
Treść zadania nr. 3
-
DevTools. Przeanalizować stworzone przez siebie strony internetowe.
-
DevTools. Przeanalizować już istniejące strony internetowe.
-
Stworzyć plik HTML z polskimi znakami i uruchomić bez zmiany domyślnego kodowania.
Rozwiązanie: polskie znaki nie będą dobrze się prezentować
-
Zdefiniować kodowanie UTF-8
Rozwiązanie:
<meta charset="utf-8"/>
-
Zweryfikować plik HTML z wykorzystaniem walidatora: https://validator.w3.org/
Rozwiązanie: dobrą praktyką jest aby pliki były zgodne z walidatorem
-
Osadzić plik CSS i dodać jedną prostą regułę.
-
Osadzić plik JavaScript i wpisać do niego użycie funkcji
alert("text")
. -
Stworzyć zmienną.
-
Wyświetlić zmienną za pomocą
console.log
. -
Stworzyć kilka zmiennych i wstawić między ich definicję
debugger statement
do zatrzymania interpretera JavaScript. -
Podejrzeć i przeanalizować obecny stan aplikacji.
-
Stwórz zmienną globalną.
Rozwiązanie:
window.foo = 2;
-
Porównać zmienną lokalną stworzoną w kontekście globalnym oraz zmienną globalną zdefiniowaną jako właściwość obiektu
window
. -
Stworzyć listę obrazków wykorzystując
h1, ul, li, img
. Wykorzystać serwis https://unsplash.it/ do pobierania obrazków. -
Zresetować domyślne style dla
body, ul
. -
Zdefiniować wszystkim elementom listy pełną przezroczystość (wartość równa 0).
-
Stworzyć klasę
.active
, która będzie ustawiała elementowi przezroczystość na wartość domyślną (równą 1). -
Dodać pierwszemu elementowi klasę
active
w HTMLu. -
Stworzyć funkcję, która będzie uruchamia całą mechanikę, np.
setup
. -
Nasłuchiwać na załadowanie DOMa (event: DOMContentLoaded).
-
Uruchomić funkcję
setup
, kiedy DOM już będzie załadowany. -
Pobrać referencję to wszystkich elementów list i zapisać ją do zmiennej, którą później wyświetlić. Wszystko to zrealizować w funkcji
setup
.Rozwiązanie:
function setup() { let $list = document.querySelector('ul'); console.log($list); }
-
Przetestować, co się będzie działo, kiedy nie poczekamy na załadowanie DOMa, a będziemy chcieli wyświetlić elementy listy.
-
Dodać klasę CSS do drugiego elementu listy.
Rozwiązanie:
let $items = document.querySelector('.element'); $items[1].classList.add('active');
-
Wyeliminować błąd pokazania dwóch obrazków jednocześnie poprzez ustawienie elementów listy jeden na drugim za pomocą CSS
position
. -
Stworzyć funkcję np.
displayNextPicture
, która będzie zawierała obecną zawartość funkcjisetup
. Funkcjasetup
powinna mieć tylko jedną linijkę którą będzie uruchomienie funkcjidisplayNextPicture
. -
Pobrać aktualny element z listy wykorzystując zmienną
$list
. -
Pobrać kolejny element aktywnego za pomocą właściwości
nextElementSibling
. -
Dodać warunek, że jeśli nie będzie następnego elementu to należy wykorzystać pierwszy element listy. Do tego celu należy wykorzystać właściwość
firstElementChild
na obiekcie listy. -
Usunąć klasę
active
z aktywnego elementu listy za pomocą APIclassList
-
Dodać klasę
active
na kolejnym elemencie. -
Uruchomić kilka razy funkcję
displayNextPicture
testując poprawność działania. -
Dopisać w funkcji
setup
interval, który będzie co 3 sekundy uruchamiał funkcjędisplayNextPicture
. -
Zdefiniować stałą będącą liczbą milisekund.
-
Stworzyć w HTMLu dwa elementy będące przyciskami. Nadać im odpowiednie identyfikatory.
-
Pobrać referencję do tych obiektów w DOMie. Zrealizować to w funkcji
setup
ze względu na to, że jest ona uruchomiona gdy DOM jest już załadowany. -
Stworzyć dwie funkcje, które będą uruchamiane po kliknięciu w wcześniej stworzone przyciski. Propozycję nazw:
onClickLeftHandler
orazonClickRightHandler
. -
Zapisać się na event kliknięcia w oba przyciski.
-
Przetestować działanie dodając w funkcjach uruchomienie funkcji
console.log
z odpowiednimi argumentami. -
Zdefiniować zmienną, która będzie zawierała referencję do zegara interval. Zmienna musi być współdzielona między funkcjami
setup
,onClickLeftHandler
orazonClickRightHandler
. -
W funkcjach, które uruchamiają się po kliknięciu w przyciski strzałek należy wyczyścić interval za pomocą funkcji
clearInterval
. -
Dodać uruchomienie funkcji
displayNextPicture
w funkcjionClickRightHandler
, tak aby można było pokazywać następne zdjęcie klikając w przycisk strzałki w prawo. -
Skopiować funkcję
displayNextPicture
i nazwać nową funkcjędisplayPrevPicture
. Celem tej funkcji jest pokazanie poprzedniego zdjęcia. Tak, aby zasadne było klikanie w przycisk strzałki w lewo. -
Zmienić w funkcji
displayPrevPicture
użycie właściwościnextElementSibling
na rzeczpreviousElementSibling
orazfirstElementChild
na rzeczlastElementChild
. -
Uruchomić funkcję
displayPrevPicture
w handlerzeonClickLeftHandler
.
-
Stworzyć funkcję, która będzie się uruchamiała, gdy użytkownik naciśnie dowolny znak na klawiaturze. Proponowana nazwa funkcji to
onKeydownHandler
. -
Nasłuchiwać w funkcji
setup
na naciśnięcie (keydown
) na klawiaturze dowolnego przycisku. Wykorzystać funkcjęonKeydownHandler
. -
Funkcja
onKeydownHandler
będzie korzystała z parametrów, które otrzymuje. Zarejestrować parametr funkcji jakoevt
. -
Zapisać w zmiennej lokalnej kod naciśniętego klawisza. Wykorzystać właściwość
evt.keyCode
. -
Wykorzystać instrukcję
switch
, aby rozpatrzeć kilka przypadków wartości zmiennejkeyCode
. -
Stworzyć przypadek (
case
) dla lewej strzałki (kod klawisza 37). Zdefiniować stałą, która będzie przechowywać tą "magiczną cyfrę". Proponowana nazwa stałej toLEFT_ARROW
. -
Uruchomić funkcję
onClickLeftHandler
, kiedy wystąpi przypadek naciśnięcie strzałki w lewo. -
Stworzyć przypadek (
case
) dla prawej strzałki (kod klawisza 39). Zdefiniować stałą, która będzie przechowywać tą "magiczną cyfrę". Proponowana nazwa stałej toRIGHT_ARROW
. -
Uruchomić funkcję
onClickRightHandler
, kiedy wystąpi przypadek naciśnięcie strzałki w prawo.
-
Stworzyć kontener pod zdjęciami, w którym będą wyświetlone kropki do przełączania na konkretne zdjęcie.
-
Rozwiązać ewentualny problem, że zdjęcia zakrywają nowo stworzony kontener. Przykładowym rozwiązaniem, może być określenie szerokości i wysokości dla listy (kontener
ul
). -
Stworzyć funkcję, która będzie budowała listę kropek. Liczba kropek będzie równa liczbie obrazków. Proponowana nazwa to
displayDots
. -
Funkcja
displayDots
jest uruchomiona w funkcjisetup
. -
Pobrać referencję do kontenera na kropki w funkcji
displayDots
. -
Stworzyć zmienną przechowującą
DocumentFragment
, do którego będą dodawana kolejne kropki. GdyDocumentFragment
będzie zawierał wszystkie kropki zostanie wyrenderowany w kontenerze w DOMie. -
Pobrać referencję do listy elementów z obrazkami.
-
Pobrać listę elementów-dzieci za pomocą właściwości
children
. -
Iterować pętlą
for..of
po liście uruchamiając funkcję anonimową. -
Funkcja anonimowa będzie tworzy element "input" typu radio.
-
Aby wyeliminować problem brakiem kasowania poprzedniego wyboru kropki należy zdefiniować inputom atrybut name z tą samą wartością. Może to być dowolny string, lub aktualny czas (zapisany w zmiennej).
-
Tak stworzony element typu input dodać do
DocumentFragment
. -
Poza pętlą dodać
DocumentFragment
do kontenera stworzonego na potrzeby wyświetlenia kropek.
-
Stworzyć funkcję, która będzie nasłuchiwać na kliknięcie w kropkę. Proponowana nazwa to
setupDotsClick
. Funkcję należy uruchomić w funkcjisetup
, zaraz po uruchomieniu funkcjidisplayDots
. -
Pobrać referencję do kontenera z kropkami.
-
Nasłuchiwać na kliknięcie w ten kontener.
-
Zarejestrować parametr
evt
w handlerze eventu kliknięcia w kontener. -
Stworzyć lokalną zmienną
$item
, która będzie przechowywać właściwośćevt.target
. -
Stworzyć lokalną zmienną
itemName
, która będzie przechowywać nazwę klikniętego tagu (wykorzystać właściwość$item.nodeName
). Ważne jest, aby zmniejszyć wielkość liter za pomocą funkcji na stringutoLowerCase
. -
Sprawdzić, czy nazwa klikniętego elementu nie równa się
input
. Gdy warunek zostanie spełniony to przerwać działanie funkcji za pmocą operatorareturn
. -
W funkcji
displayDots
przed pętląfor..of
zdefiniować zmiennąindex
, która będzie kolejną cyfrą od0
oznaczającą indeks kolejnego elementu kropki. -
W pętli
for..of
do obiektu$input.dataset
dopisać właściwośćindex
przypisując jej wartość zmiennejindex
.Obiekt
dataset
jest agregatem wszystkich atrybutów z prefiksemdata-
. -
Na samym końcu pętli zwiększyć zmienną
index
za pomocą "inkrementacji postfiksowej", czyliindex++
; -
W funkcji
setupDotsClick
w handlerze kliknięcia, po warunku weryfikującym, że użytkownik kliknął w element typuinput
, pobrać właściwośćindex
z obiektu$item.dataset
i zapisać do zmiennejindex
. -
Ze względu na to, że wartości atrybutów elementów HTML zawsze są łańcuchami znaków, to trzeba skonwertować wartość na liczbę za pomocą konstruktora
Number
. -
Przerwać działający interval za pomocą funkcji
clearInterval
. -
Stworzyć funkcję, która będzie pokazywała obrazek ze zdefiniowanym w parametrze indeksie. Proponowana nazwa to
displayPictureByIndex
. -
Funkcja
displayPictureByIndex
będzie oczekiwać parametru będącego indeksem, więc zarejestrować taki parametr. Proponowana nazwa topictureIndex
. -
W funkcji
displayPictureByIndex
stworzyć referencję do listy elementów z obrazkami. -
Wyszukać aktywnego elementu w liście i zapisać w zmiennej. Proponowana nazwa to
$active
. -
Pobrać docelowy element wykorzystując właściwość
children
i nawiasy kwadratowe i zapisać w zmiennej. Proponowana nazwa to$next
. -
Usunąć klasę
active
z aktywnego elementu za pomocą APIclassList
. -
Dodać klasę
active
do wybranego elementu.
-
Stworzyć funkcję
markDot
, która będzie przechowywała referencje do:- listy kropek
- listy elementów listy obrazków
-
Za pomocą pętli
forEach
iterować po liście elementów listy obrazków. -
Zarejestrować dwa parametry w handlerze pętli. Pierwszy z nich będzie przechowywał referencję do elementu w DOMie. Drugi będzie przechowywał indeks.
-
W ciele handlera sprawdzić za pomocą API
classList
czy iterowany element posiada klasęactive
. -
Jeśli posiada to pobrać kropkę za pomocą składni nawiasów kwadratowych i ustawienie właściwość
checked
natrue
. -
Funkcję
markDot
uruchomić w ostatnich linijkach następujących funkcji:setup
displayNextPicture
displayPrevPicture
-
Wygenerować całą strukturę HTML za pomocą JavaScript, przekazując listę zdjęć w formacie tablicy.
-
Stworzenie multi-platformowej biblioteki JavaScript
-
Wykorzystania komponentu kilka razy na jednej stronie
Projekt nr. 4 [ demo ]
Treść zadania nr. 4
- ...
<div class="test-carousel carousel-component">
<img src="https://unsplash.it/400/200/?image=21" alt=""/>
<img src="https://unsplash.it/400/200/?image=22" alt=""/>
<img src="https://unsplash.it/400/200/?image=23" alt=""/>
<img src="https://unsplash.it/400/200/?image=24" alt=""/>
<img src="https://unsplash.it/400/200/?image=25" alt=""/>
</div>
<script src="./carousel.js"></script>
<script>
new TestCarousel({
$el: document.querySelector('.test-carousel'),
name: 'example-test-slide',
interval: 333 // milliseconds
});
</script>
The MIT License @ 2018