Co dzieje się, gdy wczytujesz stronę internetową w przeglądarce? Kiedy wpisujesz adres strony internetowej i akceptujesz swój wybór przyciskiem Enter, zaczyna się ładowanie strony internetowej w przeglądarce. Uruchamiany jest kod (HTML, CSS i JavaScript) w środowisku wykonawczym (czyli karcie przeglądarki). Wszystkie elementy składowe można porównać do dobrze zorganizowanego zakładu pracy, gdzie kazdy zna procedury i wie jakie czynnosci ma wykonać: pobierane są surowce – czyli kod źródłowy strony i przetwarzany na produkt – czyli stronę internetową, którą w efekcie końcowym, wyświetla przeglądarka.
Kod JavaScript potrzebny jest do jest dynamicznej modyfikacji kodu HTML oraz CSS w celu aktualizacji interfejsu użytkownika. Dzieje się tak przy pomocy interfejsu API Document Object Model ( jak już wspominaliśmy w artykule o API ). Powinieneś wiedzić, że kod z plików internetowych jest zazwyczaj ładowany i wykonywany w kolejności, w jakiej pojawia się na stronie. Jeśli JavaScript ładuje się i próbuje uruchomić swój kod przed załadowaniem kodu HTML i CSS, na który ma wpływ, najprawdopodniej wystąpi błąd. W dalszej części artykułu, podpowiemy co masz robić aby to obejść.
Środowisko wykonawcze
Każda karta przeglądarki ma swoje środowisko wykonawcze, w którym uruchamiany jest kod. Oznacza to, że jeżeli masz otwartych kilka kart przegladarki na każdej karcie kod jest uruchamiany całkowicie oddzielnie i nie może bezpośrednio wpłynąć na kod w innej zakładce. Jest to dobry środek bezpieczeństwa.
Kolejność uruchamiania JavaScript
Dobrze, więc jak wygląda interpretowanie kodu przez środowisko przegladarki? Przeglądarka uruchamia stronę internetową i napotka blok JavaScript. Jedna z przyjętych reguł jest taka, że kod zwykle uruchamiany jest w kolejności, od góry do dołu. Oznacza to, że musisz uważać na kolejność, w jakiej umieszczasz kod. Częstym błędem, który się wtedy pojawia jest TypeError: „nazwa zmiennej” is undefined. Jest to bardzo częsty błąd — musisz uważać, aby obiekty, do których odwołuje się twój kod, istniały, zanim spróbujesz coś z nimi zrobić.
Kod interpretowany vs kod skompilowany
Jeżeli interesujesz się programowaniem i czytasz artykuły dotyczące zagadnień z tym zwiazanych, często możesz trafić na termin: kod interpretowany lub kod kompilowany. Jaka jest zatem różnica?
Języki kompilowane zanim zostaną uruchomione przez komputer muszą zostać przekształcone (czyli skompilowane) w inną formę. Dla przykładu język C/C++ musi zostać skompilowany do formatu kodu binarnego, który jest następnie uruchamiany przez komputer.
W językach interpretowanych kod wykonywany jest od góry do dołu, a wynik działania kodu jest zwracany natychmiast. Nie musisz przekształcać kodu do postaci czytelnej dla przeglądarki, przeglądarka odczyta go i uruchomi w takiej postaci jak został napisany. Przeglądarka internetowa otrzymuje kod JavaScript w swojej oryginalnej formie tekstowej i uruchamia z niego skrypt. Brzmi znajomo? Tak, przyjmuje się, że to do tej grupy języków programowania należy JavaScript. Chociaż kod JavaScript może być również być poddawany kompilacji just-in-time w celu poprawy wydajności. Kompilacja jest jednak obsługiwana w czasie wykonywania, a nie z wyprzedzeniem.
Kod po stronie serwera / kod po stronie klienta
Mogłeś również spotkać się z takimi wyrażeniami jak: kod po stronie serwera i kod po stronie klienta. Można się spotkać z takim podziałem szczególnie podczas opisywania procesu i uruchamiania stron internetowych.
Kod po stronie klienta – jest to kod, który jest uruchamiany na komputerze użytkownika — podczas przeglądania strony internetowej. Kod żródłowy strony jest pobierany, a następnie uruchamiany i wyświetlany przez przeglądarkę. Czyli jest to również kod JavaScript uruchamiany po stronie klienta.
Kod po stronie serwera natomiast jest uruchamiany na serwerze, a następnie jego wyniki są pobierane i wyświetlane w przeglądarce. Przykładowe, popularne języki interpretowane po stronie serwera to PHP, Python, Ruby, ASP.NET. Co zaskakujące JavaScript może być również używany jako język po stronie serwera, na przykład w popularnym środowisku Node.js
Kod dynamiczny a kod statyczny
Określenie kod dynamiczny jest używane do opisania zarówno języka JavaScript po stronie klienta, jak i języków po stronie serwera. Słowo dynamika odnosi się do możliwości bieżącego aktualizowania wyświetlanej strony internetowej/aplikacji w celu podania różnych informacji w różnych okolicznościach. Kod po stronie serwera dynamicznie generuje nową zawartość na serwerze, m.in. ściągając dane z bazy danych, a JavaScript po stronie klienta dynamicznie generuje nowe treści dla przeglądarki, np. utworzenie nowej tabeli HTML, wypełnienie jej nowymi danymi z bazy danych, a następnie wyświetlenie tabeli na stronie internetowej wyświetlanej użytkownikowi. Jak widać niezwykle ważna jest dobra współpraca pomiędzy kodem po stronie serwera i po stronie klienta, musze dobrze dzialac razem.
Strona internetowa bez dynamicznie aktualizowanej zawartości jest określana jako statyczna — po prostu wyświetla przez cały czas tę samą zawartość.
Po więcej informacji zapraszamy na szkolenia:
Front-end Developer – kurs zbalansowany