JS1

Wprowadzenie do JavaScript

INF.03.6 (1) — Język skryptowy stron internetowych

Definicja Czym jest JavaScript (JS)?

JavaScript to język programowania, który pozwala na implementację złożonych funkcji na stronach internetowych. Jest to język **klienta (Front-end)** – działa w przeglądarce użytkownika. Odpowiada za:

Dynamiczne zmiany treści.
Obsługę zdarzeń (kliknięcia, ruch myszy).
Walidację formularzy.
Komunikację z serwerem bez przeładowania strony (AJAX).

Podstawowe Dodawanie Skryptów do Strony

Skrypty dodajemy za pomocą znacznika <script>. Istnieją dwa główne sposoby:

1. Kod wewnątrz znacznika (Inline)

                    <script>

                        alert("Witaj w świecie JS!");

                    </script>

2. Plik zewnętrzny (Najlepsza Praktyka)

Tworzymy plik script.js i dołączamy go na końcu tagu <body>, aby nie blokować ładowania HTML i CSS.

                    <body>

                        <!-- Treść HTML -->

                        <script src="js/script.js" defer></script>

                    </body>

Atrybut defer: Mówi przeglądarce, aby pobierała skrypt w tle i wykonała go dopiero po załadowaniu całego HTML.

Ponadpodstawowe Obsługa Zdarzeń i DOM

Aby JS mógł manipulować stroną, musi mieć dostęp do modelu dokumentu (DOM – Document Object Model).

1. Dostęp do Elementu

Najczęściej używana funkcja do pobierania elementu HTML po jego atrybucie id:

const mojElement = document.getElementById('glowny-tytul');

2. Obsługa Zdarzeń (Event Listener)

Mechanizm, który reaguje na interakcje użytkownika (kliknięcia, naciśnięcia klawiszy, najechania myszą).

                    <!-- HTML -->

                    <button id="przycisk">Zmień tekst</button>

                    <!-- JavaScript -->

                    const btn = document.getElementById('przycisk');

                    btn.addEventListener('click', function() {

                        btn.textContent = 'Kliknięto!';

                    });

Ćwiczenie Zadania Praktyczne

Zadanie 1: Konsola i Alert (Podstawowe)

W pliku zewnętrznym app.js napisz kod, który:

Wyświetli komunikat "Skrypt załadowany!" w konsoli przeglądarki (console.log()). Wyświetli standardowe okienko alertu z Twoim imieniem. Poprawnie dołączy plik app.js do dokumentu HTML za pomocą <script src="..." defer>.

Zadanie 2: Dynamiczny Efekt (Ponadpodstawowe)

Stwórz przycisk o ID zmien-kolor-btn oraz paragraf o ID tekst-paragrafu.

Pobierz oba elementy za pomocą document.getElementById(). Dodaj słuchacza zdarzeń (addEventListener) na kliknięcie przycisku. W funkcji zwrotnej (callback) zmień styl CSS paragrafu, ustawiając tekst-paragrafu.style.color = 'red';.

Materiały Narzędzia i Linki

MDN Web Docs: Wprowadzenie do JavaScript (Oficjalna dokumentacja).
Online Editor: CodePen - Szybkie środowisko do testowania małych skryptów JS.
Ćwiczenia: Wyszukaj "JavaScript DOM manipulation for beginners" (Wprowadzenie do interakcji z elementami).

Materiały: Wprowadzenie do JavaScript · Opracowanie na podstawie wymagań INF.03