JavaScript z HTML

Łączenie JavaScript z HTML jest fundamentalną umiejętnością dla każdego web developera. Pozwala to na tworzenie interaktywnych stron internetowych, które mogą reagować na działania użytkownika, komunikować się z serwerami i manipulować zawartością strony w czasie rzeczywistym. JavaScript może być dodawany do dokumentów HTML na różne sposoby, w zależności od potrzeb i specyfiki projektu.

Przykład: Prosta interakcja użytkownika

Ten przykład pokazuje, jak dodać skrypt JavaScript bezpośrednio do pliku HTML, aby reagować na kliknięcie przycisku przez użytkownika, zmieniając tekst wyświetlany na stronie

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interakcja użytkownika</title>
</head>
<body>
    <h3 id="message">Kliknij przycisk, aby zmienić ten tekst</h3>
    <button onclick="changeText()">Kliknij mnie</button>

    <script>
        // Funkcja zmieniająca tekst w elemencie <h3>
        function changeText() {
            const messageElement = document.getElementById('message');
            messageElement.innerText = 'Tekst został zmieniony!';
        }
    </script>
</body>
</html>

W powyższym przykładzie, przycisk <button> ma atrybut onclick, który jest ustawiony na wywołanie funkcji changeText() zdefiniowanej w tagu <script> na dole strony. Gdy użytkownik kliknie przycisk, funkcja changeText() jest wywoływana. Funkcja ta lokalizuje element <h3> za pomocą document.getElementById('message') i zmienia jego tekst na “Tekst został zmieniony!”.

Podsumowanie

Przykład: Zewnętrzny plik JavaScript

W tym przykładzie pokażę, jak odseparować kod JavaScript od HTML poprzez umieszczenie skryptu w zewnętrznym pliku. Oddzielenie logiki JavaScript od struktury HTML jest dobrą praktyką, ponieważ sprawia, że kod jest bardziej czytelny i łatwiejszy w utrzymaniu.

Struktura projektu

  • index.html – plik HTML z linkiem do zewnętrznego pliku JavaScript.
  • script.js – zewnętrzny plik JavaScript z logiką interakcji.

Zawartość pliku index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład z zewnętrznym plikiem JavaScript</title>
</head>
<body>
    <h3 id="message">Kliknij przycisk, aby zmienić ten tekst</h3>
    <button id="changeTextButton">Kliknij mnie</button>

    <!-- Link do zewnętrznego pliku JavaScript -->
    <script src="script.js"></script>
</body>
</html>

W pliku index.html, zamiast umieszczać kod JavaScript bezpośrednio w dokumencie, używamy tagu <script> z atrybutem src, aby wskazać ścieżkę do zewnętrznego pliku JavaScript (script.js).

Zawartość pliku script.js

// Dodanie nasłuchiwania na kliknięcie przycisku
document.getElementById('changeTextButton').addEventListener('click', changeText);

// Funkcja zmieniająca tekst w elemencie <h3>
function changeText() {
    const messageElement = document.getElementById('message');
    messageElement.innerText = 'Tekst został zmieniony dzięki zewnętrznemu skryptowi!';
}

W pliku script.js, definiujemy funkcję changeText, która zmienia tekst elementu <h3> po kliknięciu przycisku. Zamiast używać atrybutu onclick w HTML, dodajemy nasłuchiwacz zdarzeń w JavaScript, co jest bardziej zalecaną praktyką, ponieważ utrzymuje logikę JavaScript oddzieloną od struktury HTML.

Podsumowanie

Użycie zewnętrznych plików JavaScript jest zalecaną praktyką w projektowaniu stron internetowych, ponieważ ułatwia organizację kodu i jego ponowne użycie. Oddzielając logikę JavaScript od znaczników HTML, możemy łatwiej zarządzać projektem, zwłaszcza gdy rośnie on w skali. Dodatkowo, przeglądarki mogą cachować zewnętrzne skrypty, co może przyspieszyć ładowanie stron dla powracających użytkowników.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs JavaScript od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top