Lekcje
Rozpocznij
Rozpocznij naukę
CodeGym /Kurs Javy /Frontend SELF PL /Wprowadzenie do JavaScript

Wprowadzenie do JavaScript

Frontend SELF PL
Poziom 2 , Lekcja 5
Dostępny

1. Tag <script>

Zanim zagłębimy się w szczegółowe badanie HTML, chcielibyśmy zapoznać Cię z jeszcze jedną fajną rzeczą — językiem JavaScript.

JavaScript — to potężny język programowania, który jest używany do tworzenia dynamicznych i interaktywnych stron internetowych. Pozwala reagować na akcje użytkownika, zmieniać zawartość stron, komunikować się z serwerami i na wiele innych sposobów zwiększać przyjemność użytkownika podczas korzystania z witryny.

Teraz nie będziemy uczyć się JavaScript, ale czasem w przykładach będę go dodawać, dlatego opowiem, jak JavaScript jest osadzany w dokumencie HTML.

Java university

Tag <script> jest używany do osadzania kodu JavaScript w dokumencie HTML.

CSS+HTML+JavaScript
      
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wprowadzenie do JavaScript</title>
</head>
<body>
    <h1>Witaj na mojej stronie!</h1>
    <script>
        // Twój kod JavaScript tutaj
        alert('Cześć, świecie!');
    </script>
</body>
</html>

W tym przykładzie używany jest tag <script>, aby osadzić prosty kod JavaScript, który wyświetla wyskakujące okno z wiadomością "Cześć, świecie!".

2. Łączenie skryptów

Czasem lepiej przechowywać kod JavaScript w osobnym pliku. Poprawia to organizację kodu i jego ponowne użycie. Do podłączenia pliku JavaScript także używa się tagu <script>, a za pomocą atrybutu src można ustawić nazwę pliku JavaScript.

Łączenie zewnętrznego pliku JavaScript:

HTML
      
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wprowadzenie do JavaScript</title>
    <script src="script.js" defer></script>
</head>
<body>
    <h1>Witaj na mojej stronie!</h1>
</body>
</html>

Ten plik html prosi przeglądarkę o podłączenie do niego pliku JavaScript, który nazywa się script.js i może zawierać ten sam kod, co w przykładzie powyżej:

JavaScript
      
//script.js:
// Twój kod JavaScript tutaj
alert('Cześć, świecie!');

Atrybut defer jest używany do informowania przeglądarki o wykonaniu skryptu dopiero po pełnym załadowaniu i wyświetleniu całego dokumentu HTML.

3. Kod w linii

Pamiętasz, jak pisaliśmy style CSS bezpośrednio w atrybucie style elementu?

HTML
      
<p style="color:red"> Czerwony</p>

W ten sam sposób można pisać kod JavaScript.

Załóżmy, że chcemy, aby element zmienił kolor na niebieski po kliknięciu na niego. Wtedy musimy napisać taki kod:

HTML
      
<p style="color:red" onclick="this.style.color = 'blue';">Czerwony</p>

Zielonym kolorem oznaczono kod JavaScript, który zostanie wykonany, jeśli użytkownik kliknie na element <p>. Proste, prawda?

  • onclick: Atrybut HTML, który wskazuje funkcję wykonywaną po kliknięciu na element.
  • this: Odniesienie do elementu, na którym kliknięto.
  • style.color: Właściwość CSS zmieniająca kolor tekstu elementu.
Komentarze
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION