Wprowadzenie
Witaj w darmowym kursie Integrujemy HTML i JavaScript. Podstawy DOM. Pierwsza interaktywna aplikacja webowa!
W niniejszym kursie poznamy podstawy integracji HTML i JavaScript za pomocą DOM, wystarczające do przeniesienia naszej aplikacji do zarządzania zadaniami z konsoli bezpośrednio do przeglądarki, dzięki czemu będzie funkcjonowała jak aplikacja z prawdziwego zdarzenia, z którymi miałeś/aś do czynienia mnóstwo razy.
Na tym etapie powinniśmy już mieć działającą dynamiczną aplikację konsolową, w której możemy zarządzać zadaniami i znać podstawy JavaScipt, co znaczy, że przerobiłeś/aś kurs JavaScript oraz kurs Local Storage.
Powinniśmy mieć też prosty interface - podstawowy statyczny kod HTML, który zrobiliśmy w kursie HTML.
W związku z tym rób ten kurs tylko jeśli znasz podstawy HTML i JavaScript - niezależnie od tego, czy poznałeś/aś je samodzielnie, czy też przerobiłeś/aś moje 3 poprzedzające kursy na tej stronie.
Musimy teraz połączyć/ zintegrować te dwie warstwy - tzw. logikę (kod JavaScript) oraz UI (user interface, kod HTML) - w jedną spójną aplikację.
Ta integracja będzie możliwa dzięki wykorzystaniu właściwości i metod DOM, które dają nam dostęp i możliwość manipulacji HTML za pomocą JavaScript! Zrobimy to stopniowo, poznając krok po kroku podstawy pracy z DOM.
DOM (Document Object Model) jest kluczowym elementem, który łączy HTML z JavaScriptem. DOM jest reprezentacją struktury HTML i jest manipulowany za pomocą JavaScriptu, ponieważ DOM sam w sobie jest JavaScriptowym obiektem (nie omawialiśmy tego jeszcze w kursie JavaScript), a to znaczy, że udostępnia różne właściwości oraz metody, za pomocą których możemy wprowadzać wszelakie zmiany w kodzie HTML z poziomu kodu JavaScript.
HTML jest fundamentalnym elementem, na którym opiera się struktura strony internetowej, a znajomość jego podstaw jest niezbędna do zrozumienia DOM-u. Z kolei JavaScript jest niezbędny do manipulacji DOMem.
Co zrobimy w niniejszym kursie?
W tym kursie połączymy zarówno naszą wiedzę z zakresu HTML i JavaScript, jak również zintegrujemy zbudowany przez nas HTMLowy UI oraz konsolową aplikację JavaScript w jedną interaktywną i niepodzielną aplikację webową do zarządzania zadaniami działającą bezpośrednio w przeglądarce.
Najpierw poznamy wybrane metody i właściwości DOM, tj.:
document.getElementById(),document.createElement(),appendChild(),textContent,innerHTML,
dzięki którym będziemy manipulować HTMLem z poziomu konsoli.
Ponadto poznamy i wykorzystamy także JavaScriptową pętlę forEach.
Później przeniesiemy zarządzanie zadaniami z konsoli do pliku JavaScript, który połączymy z plikiem HTML.
Wykorzystamy także wbudowane okno dialogowe przeglądarki prompt do wygodnego wprowadzania naszych zadań, co pozwoli nam na razie uniknąć konieczności poznawania podstaw obsługi formularzy.
I jak na razie będzie to ostatni kurs na kodujemywbiurze.pl oraz ostatni etap budowy naszej aplikacji. Potem będę czekał na feedback pierwszych użytkowników i ewentualnie dalej rozbudowywał zarówno stronę i kursy, jak i samą aplikację, którą stworzyliśmy!
Happy Coding!