JavaScript

DOM (Document Object Model) to interfejs programowania (API) dla dokumentów HTML i XML. Reprezentuje on całą strukturę strony internetowej jako drzewo obiektów, do których można się odwoływać i nimi manipulować za pomocą języków skryptowych, takich jak JavaScript.

1. Co to jest DOM?

DOM to drzewiasta struktura danych, która mapuje każdy element, atrybut i tekst w dokumencie HTML na osobny obiekt (zwany węzłem).
Przeglądarka internetowa, po wczytaniu strony, tworzy ten model w pamięci.
Dzięki DOM JavaScript może dynamicznie modyfikować zawartość, strukturę oraz styl strony internetowej, co sprawia, że strony są interaktywne.

2. Typy węzłów (Nodes) w DOM

Wszystko w DOM jest węzłem. Wyróżniamy kilka podstawowych typów:

Document – główny węzeł, reprezentujący cały dokument HTML.
Element – węzły odpowiadające tagom HTML, np. <body>, <h1>, <p>, <div>.
Text – węzły zawierające tekst wewnątrz elementów HTML.
Attribute – węzły atrybutów, np. href w <a href="...">.

3. Dostęp do elementów DOM (selektory)

Aby manipulować elementem, musimy najpierw uzyskać do niego dostęp. JavaScript oferuje różne metody:

document.getElementById('id-elementu') – wyszukuje jeden element po unikalnym atrybucie id.
document.getElementsByClassName('klasa-elementu') – zwraca kolekcję elementów o danej klasie.
document.getElementsByTagName('nazwa-tagu') – zwraca kolekcję wszystkich elementów o danym tagu.
document.querySelector('selektor-css') – zwraca pierwszy element pasujący do selektora CSS (np. '#myId', '.myClass', 'p.intro'). To najczęściej używana i najbardziej elastyczna metoda.
document.querySelectorAll('selektor-css') – zwraca kolekcję wszystkich elementów pasujących do selektora.

4. Manipulacja DOM (tworzenie, modyfikacja, usuwanie)

Po uzyskaniu dostępu do węzła, możemy nim manipulować:

Zmiana zawartości:
- element.innerHTML = 'nowa treść' – zmienia całą zawartość elementu, włącznie z tagami HTML.
- element.textContent = 'nowy tekst' – zmienia tylko tekst, ignorując tagi.
Zmiana atrybutów:
- element.setAttribute('src', 'obrazek.jpg') – ustawia nową wartość atrybutu.
- element.getAttribute('href') – pobiera wartość atrybutu.
Zmiana stylów:
- element.style.color = 'red' – zmienia styl CSS danego elementu.
Tworzenie i dodawanie nowych elementów:
- document.createElement('div') – tworzy nowy element <div>.
- rodzic.appendChild(dziecko) – dodaje nowy element jako ostatnie dziecko.
- rodzic.insertBefore(dziecko, referencja) – dodaje nowy element przed wskazanym elementem.
Usuwanie elementów:
- element.remove() – usuwa element z drzewa DOM.

5. Zdarzenia (Events) i nasłuchiwanie

DOM pozwala reagować na akcje użytkownika (np. kliknięcie, najechanie myszką, wciśnięcie klawisza).

Nasłuchiwanie na zdarzenia:
- element.addEventListener('click', funkcja) – dołącza nasłuchiwanie na zdarzenie click do elementu.
Często używane zdarzenia:
- click – kliknięcie myszką.
- mouseover – najechanie kursorem myszy.
- keydown – wciśnięcie klawisza.
- submit – wysłanie formularza.
Przykładowy kod:

JavaScript

const przycisk = document.querySelector('#moj-przycisk');

przycisk.addEventListener('click', () => {

alert('Przycisk kliknięty!');

});

6. Podsumowanie i Analogie

Wyobraź sobie DOM jako mapę lub spis treści Twojej strony internetowej. Dzięki tej mapie JavaScript wie, gdzie znajdują się poszczególne "punkty orientacyjne" (elementy HTML) i potrafi je zmieniać, dodawać nowe lub usuwać. Bez DOM, JavaScript nie miałby jak wejść w interakcję z zawartością strony.

Zadania

Zadanie 1: Prosta manipulacja tekstem

Cel: Zrozumienie, jak odwołać się do elementu i zmienić jego zawartość tekstową.
Instrukcje:
1. Stwórz prosty plik HTML z nagłówkiem <h1> o id tytul i akapitem <p> o id opis.
2. Napisz krótki kod JavaScript, który po załadowaniu strony:
  - Znajdzie element <h1> i zmieni jego tekst na "Nowy, dynamiczny nagłówek!".
  - Znajdzie element <p> i zmieni jego tekst na "To jest opis zmieniony przez JavaScript.".

Zadanie 2: Reakcja na kliknięcie

Cel: Zrozumienie, jak dodać nasłuchiwanie na zdarzenia i wywołać funkcję po akcji użytkownika.
Instrukcje:
1. W pliku HTML utwórz przycisk <button> z id zmien-kolor.
2. Napisz skrypt JavaScript, który:
  - Znajdzie przycisk i doda do niego nasłuchiwanie na zdarzenie click.
  - W funkcji, która zostanie wywołana po kliknięciu, zmień kolor tła strony (elementu body) na losowy (np. na lightblue lub coral).
Wskazówka: Użyj document.body.style.backgroundColor.

Zadanie 3: Dodawanie i usuwanie elementów

Cel: Poznanie, jak dynamicznie zmieniać strukturę strony.
Instrukcje:
1. W pliku HTML utwórz pustą listę <ul> o id lista-zakupow.
2. Napisz kod JavaScript, który po załadowaniu strony:
  - Utworzy trzy nowe elementy listy <li>.
  - Każdemu <li> przypisze inny tekst, np. "Mleko", "Chleb", "Jajka".
  - Doda te elementy do listy <ul>.
3. Dodatkowo, spraw, aby po kliknięciu na każdy z dodanych elementów <li>, ten element znikał z listy.
Wskazówka: Użyj metod createElement, appendChild i remove.

Zadanie 4: Użycie querySelector i querySelectorAll

Cel: Utrwalenie najbardziej uniwersalnych metod dostępu do elementów.
Instrukcje:
1. W pliku HTML stwórz kilka akapitów <p>. Dwóm z nich dodaj klasę paragraf-wazny.
2. Napisz skrypt JavaScript, który:
  - Znajdzie pierwszy akapit na stronie i zmieni jego tekst na "To jest pierwszy paragraf.".
  - Znajdzie wszystkie akapity z klasą paragraf-wazny i zmieni ich kolor tekstu na green.

Zadanie 5: Prosty licznik kliknięć 🖱️

Cel: Połączenie manipulacji tekstem ze zdarzeniami, tworząc prostą interaktywną aplikację.
Instrukcje:
1. Stwórz plik HTML z nagłówkiem <h2> z tekstem "Liczba kliknięć: 0" (nadaj mu id licznik) oraz przycisk <button> z tekstem "Kliknij mnie!".
2. Napisz skrypt JavaScript, który:
  - Zadeklaruje zmienną liczbaKlikniec i zainicjuje ją wartością 0.
  - Znajdzie element przycisku i doda do niego nasłuchiwanie na zdarzenie click.
  - W funkcji zdarzenia, zwiększy wartość zmiennej liczbaKlikniec o 1.
  - Znajdzie nagłówek <h2> i zaktualizuje jego tekst, pokazując nową wartość licznika.

Osadzanie JS w HTML

osadzanie JS

Zadania:

Zadanie 1: Wewnętrzny skrypt i tryb ścisły

Cel: Utworzenie prostego dokumentu HTML z wewnętrznym skryptem, który wykorzystuje tryb ścisły.

Otwórz edytor kodu (np. VS Code).

Stwórz nowy plik index.html.

W pliku index.html utwórz podstawową strukturę HTML. Dodaj nagłówek <h1> z dowolnym tekstem i paragraf <p> z id="powitanie".

Tuż przed zamykającym tagiem </body> dodaj znacznik <script>.

Wewnątrz znacznika <script> umieść dyrektywę 'use strict';.

Poniżej dodaj kod JavaScript, który pobierze element <p> o id="powitanie" i zmieni jego zawartość na tekst: "Cześć, programisto! Strona została zmodyfikowana przez skrypt."

Przetestuj działanie. Otwórz plik w przeglądarce i upewnij się, że tekst paragrafu został zmieniony.

Zadanie 2: Zewnętrzny skrypt i błąd trybu ścisłego

Cel: Dołączenie zewnętrznego skryptu i celowe wywołanie błędu w trybie ścisłym, aby zrozumieć, jak działa.

Stwórz nowy plik skrypt.js w tym samym katalogu co index.html.

W pliku index.html, w sekcji <body> (przed </body>), dołącz plik skrypt.js za pomocą znacznika <script src="skrypt.js"></script>.

W pliku skrypt.js, na samej górze, umieść dyrektywę 'use strict';.

W nowej linii dodaj kod, który celowo wywoła błąd, np. próbując użyć niezadeklarowanej zmiennej: nazwa = "Jan Kowalski";.

Otwórz plik index.html w przeglądarce. Otwórz narzędzia deweloperskie (F12 lub Ctrl + Shift + I) i przejdź do zakładki Konsola (Console).

Zaobserwuj błąd ReferenceError i przeczytaj jego treść. Zrozum, że tryb ścisły zapobiegł przypadkowemu utworzeniu globalnej zmiennej.

Popraw błąd, dodając deklarację zmiennej: let nazwa = "Jan Kowalski";. Sprawdź, czy błąd w konsoli zniknął.

Zadanie 3: Asynchroniczne ładowanie

Cel: Załadowanie zewnętrznego skryptu w sposób asynchroniczny.

Użyj plików index.html i skrypt.js z poprzedniego zadania.

Zmodyfikuj znacznik <script> w index.html, dodając atrybut async. Powinien wyglądać tak: <script src="skrypt.js" async></script>.

W pliku skrypt.js dodaj do konsoli dwie wiadomości, aby sprawdzić kolejność wykonania:

console.log("Ten skrypt jest ładowany asynchronicznie.");

Dodatkowo, symuluj długie ładowanie, dodając kod z pętlą, która działa kilka sekund (to tylko do celów demonstracyjnych, nie jest to dobra praktyka w rzeczywistym kodzie).

Otwórz plik index.html w przeglądarce i obserwuj, jak strona ładuje się, zanim skrypt zostanie wykonany. Porównaj to z sytuacją, gdy usuniesz atrybut async.

Wprowadzenie

Historia i rola języka

JavaScript (JS) to dynamiczny, lekki, interpretowany język programowania. Został stworzony w 1995 roku przez Brendana Eicha w firmie Netscape. Początkowo jego rola była bardzo prosta – miał służyć do walidacji formularzy i manipulacji elementami strony bez konieczności przeładowywania jej w całości. Miało to na celu uproszczenie interakcji, co w tamtych czasach było rewolucyjne. Początkowo nazywał się Mocha, potem LiveScript, a ostatecznie, ze względów marketingowych, zmieniono nazwę na JavaScript, aby nawiązywała do popularnej wówczas Javy. Pomimo podobieństwa nazwy, są to zupełnie inne języki. JS jest obecnie standardem i oficjalnie funkcjonuje pod nazwą ECMAScript.

Główne zastosowania i przewaga nad innymi językami

Główna rola JavaScriptu to tworzenie interaktywnych stron internetowych i aplikacji webowych po stronie klienta (frontend). W przeciwieństwie do PHP, który działa na serwerze, JavaScript jest wykonywany bezpośrednio w przeglądarce użytkownika. Dzięki temu możliwe jest dynamiczne reagowanie na działania użytkownika, na przykład pokazywanie i ukrywanie elementów, animowanie obiektów czy obsługa formularzy w czasie rzeczywistym.

Kluczowe zastosowania:

Tworzenie interaktywnych interfejsów: Animacje, efekty wizualne, dynamiczne menu i galerie zdjęć.
Walidacja formularzy: Sprawdzanie poprawności danych wprowadzonych przez użytkownika przed ich wysłaniem na serwer.
Komunikacja z serwerem (AJAX): Pobieranie i wysyłanie danych bez przeładowywania strony, co pozwala na tworzenie aplikacji jednokartkowych (Single Page Applications - SPA), takich jak Facebook czy Gmail.
Tworzenie backendu: Dzięki środowisku Node.js, JavaScript można używać również po stronie serwera. To pozwala na pisanie całych aplikacji webowych w jednym języku, co ułatwia pracę deweloperom.
Tworzenie aplikacji mobilnych i desktopowych: Dzięki frameworkom takim jak React Native, Ionic czy Electron, deweloperzy mogą tworzyć aplikacje na telefony i komputery stacjonarne, używając tego samego języka.

Różnice między JS a innymi językami

Język "po stronie klienta" (frontend): JavaScript jest wykonywany w przeglądarce, co sprawia, że jest idealny do tworzenia interaktywnych interfejsów. Działa na komputerze użytkownika, a nie na serwerze.
Dynamiczność: W przeciwieństwie do języków statycznie typowanych, takich jak Java czy C++, JavaScript nie wymaga deklarowania typu zmiennej. Pozwala to na dużą elastyczność i szybsze prototypowanie.
Ekosystem: JS ma ogromną i stale rosnącą społeczność oraz potężny ekosystem narzędzi, frameworków i bibliotek (React, Angular, Vue.js), które znacząco przyspieszają i ułatwiają pracę.

Przyszłość JavaScriptu

JavaScript jest niezbędnym elementem nowoczesnego web developmentu. Jego uniwersalność, wydajność i ciągły rozwój sprawiają, że pozostanie kluczowym językiem w branży przez długie lata. Zdolność do działania zarówno na frontendzie, jak i backendzie sprawia, że jest to jeden z najbardziej wszechstronnych i poszukiwanych języków programowania na rynku. Jego przyszłość jest mocno związana z rozwojem technologii webowych, a nowe standardy i narzędzia nieustannie poszerzają jego możliwości.

Zadania:

1. Co to jest JavaScript?

Pytanie: Wyobraź sobie, że przeglądasz stronę internetową. Co może dziać się na tej stronie dzięki JavaScript? Podaj przynajmniej dwa konkretne przykłady.

Pytanie: Jaka jest główna rola JavaScriptu w budowaniu stron internetowych? Czym różni się od HTML i CSS? Użyj analogii: "Jeśli HTML to szkielet domu, a CSS to jego wygląd, to JavaScript to..."

Pytanie: W jakim programie, którego używasz na co dzień, jest wykonywany kod JavaScript?

2. Podstawowe pojęcia

Pytanie: Jak myślisz, czym jest zmienna w programowaniu? Wytłumacz to pojęcie swoimi słowami, używając przykładu z życia codziennego, np. "Zmienna to jak szuflada, do której wkładamy...".

Pytanie: Co to jest funkcja? Wytłumacz, dlaczego jest użyteczna w programowaniu i podaj przykład działania, które mogłaby wykonać, np. "Funkcja może obliczyć sumę dwóch liczb".

Pytanie: Pomyśl o kliknięciu przycisku na stronie internetowej. Co musi "zareagować" na to kliknięcie, aby coś się stało? Wytłumacz, jak JavaScript może obsługiwać takie zdarzenia.

Google Sites

Report abuse