Tydzień 43

„So you think you know Java Script” to tytuł jednej z biblii JS dostępnej w internecie i chyba wiem skąd taki pomysł na tytuł książki. W tym tygodniu pracowałem nad pierwszą większą aplikacją napisaną w JS i zrozumiałem jedno: JS to potężne narzędzie, a ja wiem o nim tyle co nic.

Problem ma swoje źródło w niewiedzy. Początkowe kursy dla Frontend developerów skupiają się na HTML i CSS. Wiedza na nich zdobyta pozwala świetnie sobie poradzić przy budowie statycznych stron. Dzięki CSS można nawet zaimplementować na takich stronach ciekawe animacje i efekty, co sprawia że wyglądają świetnie. Jeżeli na takim kursie dodatkowo prowadzący pokaże, jak w JavaScript stworzyć rozwijane menu i dodawać/odejmować elementy na stronie to wydaje się, że świat stron internetowych nie ma przed nami tajemnic: „OOOOO mogę wszystko….”

Prawda wychodzi na jaw nieco później. Pierwsze sygnały o tym, że coś jest nie tak z moją wiedzą na temat JS pojawiły się przy kursie React.JS. Myślałem jednak, że to specyfika Reacta i po prostu trzeba się tego nauczyć. Dopiero teraz, kiedy przedzieram się przez kurs JavaScript widzę, że to nie prawda. Wszystko to co robiliśmy w React.JS wynika bezpośrednio z właściwości Java Script. Przekazywanie funkcji jako parametrów do innej funkcji, czy ustawianie kontrolera na stronie, który zawiaduje działaniem aplikacji możliwe jest również w czystym Java Script.

Na koniec dnia okazało się nawet, że manipulacje kodem HTML można wykonywać inaczej, niż to robiłem do tej pory. W szczególności ciekawe wydają się funkcje: replace, insertAdjacentHTML i removeChild.

Replace pozwala na przygotowanie pewnego szablonu kodu HTML ze zmiennymi, które będą uzupełniane treścią zależną od wyniku działania kodu naszej aplikacji. Na przykład chcemy wstawić jakiś opis w zależności od tego co użytkownik wybierze, więc przygotowujemy zmienną description:

var description = <div>%text%</div>;

mamy również obiekt zawierający opisy

var obj = {val1: ‘tekst pierwszy’, val2: ‘tekst drugi’, val3:…… itd.}

Możemy teraz stworzyć nową zmienną, która będzie zawierała odpowiedni tekst w miejscu %text%:

var newDescription = description.replace(%text%, obj.val1);

zmienna newDescription będzie teraz wyglądała następująco:
<div>tekst pierwszy</div>

To rozwiązanie pozwala na swobodne manipulowanie treścią na stronie w zależności od stanu aplikacji.

Skoro mamy już gotowy kod HTML do wstawienia na stronę, dobrze było by go wstawić we wskazanym miejscu. W tym celu można wykorzystać funkcję insertAdjacentHTML. Ta funkcja pozwala „wstrzyknąć” kod HTML do elementu w strukturze DOM.

Na naszym przykładzie kod wyglądał by następująco:

document.querySelector(element).insertAdjacentHTML(‘beforeend’, newDescription);

element to po prostu wybrany selektor miejsca w którym chcemy dodać nasz kod. Funkcja insertAdjacentHTML ma kilka parametrów, które pozwalają wskazać w jakim miejscu kod ma być dodany. ‘beforeend’ doda kod na końcu elementu. Możliwe jest jeszcze dodanie elementu, przed wskazanym elementem ‘beforebegin’, na początku wskazanego elementu ‘afterbegin’ i za wskazanym elementem ‘afterend’.

Ostatnią ciekawą funkcją z tego tygodnia jest removeChild. Okazuje się, że za pomocą  Java Script nie może wprost usunąć jakiegoś elementu na stronie poprzez wskazanie go. Należy skorzystać z tak zwanego „Event Bubbling” czyli przejść po elementach DOM wyżej w strukturze i wtedy można usunąć wybrany element. Jak to zrobić w praktyce? Powiedzmy, że mamy do usunięcia ze strony element mający id=box1. Tworzymy zmienną przechowującą wskazanie na ten element:

var element = document.getElementById(box1);

Następnie korzystamy z przejścia do wyższego elementu w strukturze DOM za pomocą parentNode i dopiero wtedy korzystamy z funkcji removeChild:

element.parentNode.removeChild(element);

W tym tygodniu dowiedziałem się wiele ciekawych rzeczy na temat działania Java Script, teraz pora na ich usystematyzowanie. Na pewno będę chciał poprawić działanie FrontEnd Quiz, bo zebrałem informację zwrotną co działa nie tak i do tego dysponuję nowa wiedzą, jak zrobić aplikację, żeby strona nie musiała się przeładowywać, a co za tym idzie wszystkie dane były przetrzymywane w zmiennych. Poza tym w ramach kursu wykonałem aplikację do liczenia budżetu i widzę kilka możliwości, jak ją rozwinąć, żeby można z niej było korzystać sprawnie przez cały miesiąc. To oznacza mnóstwo pracy przede mną.

W tym tygodniu na programowaniu spędziłem trzynaście i pół godziny.

No comments
Krzysztof NyrekTydzień 43

Related Posts

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *