Ćwiczenie — dodawanie interakcyjności za pomocą języka JavaScript

10 min

JavaScript (lub ECMAScript) to język programowania, który ułatwia dodawanie interakcyjności do stron internetowych.

Na przykład możesz użyć języka JavaScript, aby zdefiniować zachowanie, które ma miejsce, gdy użytkownik wybierze przycisk, na przykład otwierając okno podręczne. Za pomocą języka JavaScript możesz dodawać lub usuwać zawartość ze strony internetowej bez ponownego ładowania.

W tej lekcji skonfigurujesz przykładowy plik JavaScript dla strony internetowej. W nim utworzysz przycisk umożliwiający przełączanie się między motywami jasnymi i ciemnymi. Następnie należy dołączyć przycisk do kodu JavaScript, który wykonuje rzeczywiste przełączanie motywu. Na koniec sprawdzisz gotowy projekt przy użyciu narzędzi deweloperskich przeglądarki.

Łącze do języka JavaScript

Podobnie jak arkusz CSS, można dodać kod JavaScript bezpośrednio do pliku HTML, ale zalecanym najlepszym rozwiązaniem jest zapisanie kodu JavaScript w osobnym pliku. Dodanie kodu JavaScript do oddzielnego pliku ułatwia ponowne użycie go na kilku stronach internetowych. Na przykład możesz utworzyć okienko z powiadomieniem, dodając następujący kod w dowolnym miejscu w ciele stron internetowych:

<script>alert('Hello World')</script>

Lepiej jednak dodać kod JavaScript do oddzielnego pliku, który można połączyć z każdym plikiem, który wymaga niestandardowych funkcji.

Tag <script> skryptu HTML umożliwia łączenie się z zewnętrznym plikiem JavaScript, który jest sposobem konfigurowania aplikacji internetowej w tym ćwiczeniu.

W programie Visual Studio Code otwórz plik index.html.
Znajdź element zamykający </body> i umieść kursor nad nim w nowym wierszu. Wprowadź script:src i naciśnij Enter. Tagi otwierania i zamykania elementu <script> są dodawane do kodu.

Zmodyfikuj element <script>, aby załadować plik app.js, jak pokazano w poniższym przykładzie. Upewnij się, że znajduje się on po elemencie zamykającym listy </ul>.

...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<script src="app.js"></script>
...

Możesz umieścić element <script> w <head> miejscu lub gdzie indziej w <body>. Jednak umieszczenie <script> elementu na końcu <body> sekcji umożliwia najpierw wyświetlenie całej zawartości strony na ekranie przed załadowaniem skryptu.

Dodaj odporność na uszkodzenia

W pliku HTML dodaj <noscript> element po tagu zamykającym </script> , który może służyć do wyświetlania komunikatu, jeśli język JavaScript jest dezaktywowany.
```
<script src="app.js"></script>
<noscript>You need to enable JavaScript to view the full site.</noscript>
```
<noscript> Dodanie elementu jest przykładem odporności na awarie lub łagodnej degradacji. Gdy używasz <noscript> elementu, kod może wykrywać i planować, gdy funkcja nie jest obsługiwana lub dostępna.

Ustawianie trybu ścisłego

Język JavaScript został zaprojektowany tak, aby był łatwy do nauki i umożliwia deweloperowi popełnianie pewnych błędów. Na przykład język JavaScript nie zgłasza błędu podczas używania błędnie napisanej zmiennej, a zamiast tego tworzy nowy globalny. Po rozpoczęciu nauki języka JavaScript wygodne jest posiadanie mniejszej liczby błędów. Jednak może to prowadzić do pisania kodu trudniejszego do optymalizacji i trudniejszego do debugowania.

Przełącz się na tryb ścisły, aby uzyskać bardziej przydatne błędy, gdy popełnisz błędy.

W programie Visual Studio Code otwórz plik app.js i wprowadź następujące treści:
```
'use strict';
```

Dodaj przycisk

Potrzebujesz sposobu, aby umożliwić użytkownikom przełączanie się między jasnymi i ciemnymi motywami na stronie internetowej. W tym ćwiczeniu zaimplementujesz tę funkcję za pomocą elementu HTML <button> .

W pliku HTML (index.html) dodaj <button> element. Umieść przycisk wewnątrz <div> elementu i dodaj go tuż po końcu listy (</ul>).
```
...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<div>
  <button class="btn">Dark</button>
</div>
<script src="app.js"></script>
...
```
Zwróć uwagę, że <button> element w tym przykładzie ma atrybut klasy , którego można użyć do stosowania stylów CSS.
Zapisz zmiany w pliku HTML za pomocą skrótu klawiaturowego Control+S w systemie Windows lub Command+S w systemie macOS.
W pliku CSS (main.css) dodaj nową regułę z selektorem .btn klas dla przycisku HTML. Aby kolory przycisku różniły się od ogólnego motywu jasnego lub ciemnego, ustaw właściwości color i background-color w tej regule. Gdy Twoja strona się wyświetla, te .btn właściwości zastępują domyślne właściwości ustawione w regule body pliku CSS.
```
.btn {
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}
```
Następnie zmodyfikuj regułę .btn , aby dodać niektóre style rozmiaru, kształtu, wyglądu i położenia przycisku. Poniższy arkusz CSS tworzy przycisk okrągły po prawej stronie nagłówka strony.
```
.btn {
  position: absolute;
  top: 20px;
  left: 250px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: none;
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}
```

Następnie zaktualizuj arkusz CSS dla motywu jasnego i ciemnego. Zdefiniuj niektóre nowe zmienne --btnBg i --btnFontColor, aby określić kolor tła i kolor czcionki specyficzny dla przycisku.

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
  --btnBg: var(--black);
  --btnFontColor: var(--white);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
  --btnBg: var(--white);
  --btnFontColor: var(--black);
}

Zapisz zmiany w pliku CSS za pomocą skrótu klawiaturowego Control+S w systemie Windows lub Command+S w systemie macOS.

Dodaj procedurę obsługi zdarzeń

Aby przycisk zrobił coś po jego wybraniu, potrzebujesz procedury obsługi zdarzeń w pliku JavaScript. Procedura obsługi zdarzeń to sposób uruchamiania funkcji Języka JavaScript, gdy na stronie wystąpi zdarzenie. W przypadku przycisku dodajmy procedurę obsługi zdarzeń dla click zdarzenia. Funkcja obsługi zdarzeń jest uruchamiana po wystąpieniu click zdarzenia.

Aby można było dodać handler zdarzeń, potrzebujesz odwołania do elementu przycisku.

W pliku JavaScript (app.js) użyj polecenia document.querySelector , aby uzyskać odwołanie do przycisku.
```
const switcher = document.querySelector('.btn');
```
Funkcja document.querySelector używa selektorów CSS, podobnie jak tych używanych w pliku CSS. switcher jest teraz odwołaniem do przycisku na stronie.
Następnie dodaj procedurę obsługi zdarzeń dla click zdarzenia. W poniższym kodzie dodasz odbiornik zdarzenia click i zdefiniuj funkcję obsługi zdarzeń wykonywaną przez przeglądarkę po wystąpieniu click zdarzenia.
```
switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');
});
```

W poprzednim kodzie użyto toggle metody do zmodyfikowania atrybutu <body> klasy elementu. Ta metoda automatycznie dodaje lub usuwa light-theme klasy i dark-theme . Ten kod stosuje ciemne style zamiast stylów jasnych po kliknięciu, a następnie jasne style zamiast ciemne, jeśli klikniesz ponownie.

Należy jednak zaktualizować etykietę przycisku w celu wyświetlenia poprawnego motywu, dlatego należy dodać instrukcję if w celu określenia bieżącego motywu i zaktualizować etykietę przycisku.

Oto jak powinien wyglądać kod JavaScript z dodanym programem obsługi zdarzeń:

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }
});

Jest to konwencja w JavaScript, by używać notacji camel case dla nazw zmiennych z więcej niż jednym słowem; na przykład zmiennej className.

Komunikat konsoli

Jako deweloper sieci Web możesz tworzyć ukryte komunikaty, które nie są widoczne na stronie internetowej, ale można je odczytać na karcie Narzędzia deweloperskie na karcie Konsola . Użycie komunikatów konsoli jest przydatne do wyświetlania wyniku kodu.

W pliku JavaScript dodaj wywołanie instrukcji console.log po instrukcji if , ale wewnątrz odbiornika zdarzeń.

Po wprowadzeniu tej zmiany pełny kod JavaScript powinien wyglądać następująco.

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }

    console.log('current class name: ' + className);
});

Gdy jesteś w pliku JavaScript w programie Visual Studio Code, możesz użyć autouzupełniania, wprowadzając console.loglog i naciskając Enter.

Można zdefiniować ciąg tekstowy z pojedynczymi lub podwójnymi cudzysłowymi wokół tekstu.

Otwórz w przeglądarce

Aby wyświetlić podgląd, kliknij prawym przyciskiem myszy index.html i wybierz polecenie Otwórz w domyślnej przeglądarce lub załaduj ponownie tę samą kartę przeglądarki, naciskając F5.
Wybierz nowy przycisk Ciemny , aby przełączyć się do motywu ciemnego.
Upewnij się, że wszystko wygląda poprawnie i zachowuje się zgodnie z oczekiwaniami. Jeśli nie, zapoznaj się z poprzednimi krokami, aby sprawdzić, czy coś pominięto.

Sprawdź stronę w narzędziach deweloperskich

Otwórz narzędzia deweloperskie, klikając prawym przyciskiem myszy i wybierając polecenie Inspekcja lub przy użyciu skrótu klawiaturowego F12. Alternatywnie użyj skrótu Ctrl+Shift+I w systemie Windows lub Linux i opcji+Command+I w systemie macOS.
Wybierz kartę Elementy i wybierz kartę Style .
<body> Wybierz element. Na karcie Style przyjrzyj się zastosowanego motywu. Jeśli bieżący motyw jest ciemny, style dark-theme zostają zastosowane.

Upewnij się, że zaznaczono motyw ciemny.
Wybierz kartę Konsola, aby wyświetlić console.log komunikat current class name: dark-theme.

Za pomocą konsoli możesz uzyskać interesujące szczegółowe informacje z kodu JavaScript. Dodaj więcej komunikatów konsoli, aby zrozumieć, które części kodu są wykonywane i znać bieżące wartości innych zmiennych.

Aby dowiedzieć się więcej na temat konsoli, zapoznaj się z artykułem Omówienie konsoli.

Opinia

Czy ta strona była pomocna?