Gyakorlat – Interaktivitás hozzáadása JavaScript használatával

10 perc

A JavaScript (vagy ECMAScript) egy olyan programozási nyelv, amellyel interaktivitást adhat a weblapjaihoz.

A JavaScript használatával például meghatározhatja azt a viselkedést, amely akkor fordul elő, amikor egy felhasználó kiválaszt egy gombot, például megnyit egy előugró ablakot. A JavaScript használatával anélkül adhat hozzá vagy távolíthat el tartalmat egy weblapról, hogy újra betölti azt.

Ebben az egységben beállít egy JavaScript-példafájlt a weblapjához. Ebben egy gombot hoz létre a világos és a sötét témák közötti váltáshoz. Ezután csatolja a gombot a téma tényleges váltását végrehajtó JavaScript-kódhoz. Végül ellenőrizze a befejezett projektet a böngésző fejlesztői eszközeivel.

Hivatkozás JavaScriptre

A CSS-hez hasonlóan a JavaScriptet közvetlenül a HTML-fájlhoz is hozzáadhatja, de ajánlott a JavaScriptet külön fájlba menteni. Ha javaScript-kódot ad hozzá egy külön fájlhoz, azzal könnyebben újra felhasználhatja több weblapon. Létrehozhat például egy előugró riasztást úgy, hogy a következő kódot a weblapok törzsén belül bárhol hozzáadja:

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

Azonban jobb, ha a JavaScript-kódot egy külön fájlhoz adhatja hozzá, amely minden olyan fájlhoz csatolható, amelyre szüksége van az egyéni funkciókra.

A HTML-szkriptcímkével <script> külső JavaScript-fájlra hivatkozhatunk, így konfigurálhatja a webalkalmazást ebben a gyakorlatban.

A Visual Studio Code-ban nyissa meg a index.html fájlt.
Keresse meg a záró </body> elemet, és helyezze a kurzort egy új sor fölé. Írja be script:src és nyomja le az Enter billentyűt. Az <script> elem nyitó és záró címkéit hozzáadják a kódhoz.

Módosítsa az <script> elemet úgy, hogy betöltse a app.js fájlt az alábbi példában látható módon. Győződjön meg arról, hogy a lista záró </ul> eleme után található.

...
<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>
...

Az <script> elemet elhelyezheti a <head>, vagy máshol a <body>. Ha azonban az <script> elemet a <body> szakasz végére helyezi, a szkript betöltése előtt az összes oldaltartalom megjelenik a képernyőn.

Hibatűrés hozzáadása

A HTML-fájlban adjon hozzá egy <noscript> elemet a záró </script> címke után, amely egy üzenet megjelenítésére használható, ha a JavaScript inaktiválva van.
```
<script src="app.js"></script>
<noscript>You need to enable JavaScript to view the full site.</noscript>
```
Az <noscript> elem hozzáadása példa a hibatűrésre vagy a kecses romlásra. Az elem használatakor a <noscript> kód képes észlelni és megtervezni, hogy egy szolgáltatás mikor nem támogatott vagy nem érhető el.

Szigorú mód beállítása

A JavaScriptet úgy tervezték, hogy könnyen megtanulható legyen, és lehetővé teszi a fejlesztő számára, hogy bizonyos hibákat kövessen el. A JavaScript például nem ad hibát, ha hibásan írt változót használ, hanem létrehoz egy új globálist. A JavaScript használatának megkezdésekor a kevesebb hiba kényelmes. Ez azonban a böngészők számára nehezebben optimalizálható és a hibakereséshez nehezebben használható kód írásához vezethet.

Váltson szigorú üzemmódra, hogy hasznosabb hibainformációkat kap, amikor hibákat követ el.

Nyissa meg a fájlt a app.js Visual Studio Code-ban, és írja be a következőket:
```
'use strict';
```

Gomb hozzáadása

Lehetővé kell tenni, hogy a felhasználók a weblap világos és sötét témái között váltsanak. Ebben a gyakorlatban az a HTML <button> elemet használva valósítja meg ezt a funkciót.

A HTML-fájlban (index.html) adjon hozzá egy <button> elemet. Helyezze a gombot egy <div> elembe, és adja hozzá a lista (</ul>) vége után.
```
...
<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>
...
```
Figyelje meg, hogy a <button> példában szereplő elem rendelkezik egy osztályattribútummal , amellyel CSS-stílusokat alkalmazhat.
Mentse a HTML-fájl módosításait a Control+S billentyűparanccsal Windowson vagy Command+S macOS rendszeren.
A CSS-fájlban (main.css) adjon hozzá egy új szabályt a .btn HTML-gomb osztályválasztójával. Ha azt szeretné, hogy a gombszínek eltérjenek az általános világos vagy sötét színtől, állítsa be a color szabályban szereplő tulajdonságokat és background-color tulajdonságokat. A lap megjelenítésekor ezek a .btn tulajdonságok felülbírálják a body CSS-fájl szabályában beállított alapértelmezett tulajdonságokat.
```
.btn {
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}
```
Ezután módosítsa a szabályt .btn úgy, hogy stílusokat adjon hozzá a gomb méretéhez, alakjához, megjelenéséhez és elhelyezéséhez. Az alábbi CSS egy kerek gombot hoz létre az oldalfejléc jobb oldalán.
```
.btn {
  position: absolute;
  top: 20px;
  left: 250px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: none;
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}
```

Ezután frissítse a CSS-t a világos és sötét témához. Adjon meg néhány új változót, --btnBg és --btnFontColoradja meg a gombspecifikus háttérszínt és betűszínt.

.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);
}

Mentse a CSS-fájl módosításait a Control+S billentyűparanccsal Windows rendszeren vagy Command+S macOS rendszeren.

Eseménykezelő hozzáadása

Ha azt szeretné, hogy a gomb a kijelöléskor tegyen valamit, szüksége van egy eseménykezelőre a JavaScript-fájlban. Az eseménykezelő egy JavaScript-függvény futtatásának módja, ha esemény történik az oldalon. A gombhoz adjunk hozzá egy eseménykezelőt az click eseményhez; az eseménykezelő függvény az click esemény bekövetkezésekor fut.

Az eseménykezelő hozzáadása előtt szüksége lesz egy hivatkozásra a gombelemre.

A JavaScript-fájlban (app.js) használja document.querySelector a gombhivatkozás lekéréséhez.
```
const switcher = document.querySelector('.btn');
```
A document.querySelector függvény CSS-választókat használ, csakúgy, mint a CSS-fájlban használtakat. switcher mostantól a lap gombjára mutató hivatkozás.
Ezután adja hozzá a click esemény eseménykezelőjét. A következő kódban hozzáad egy figyelőt az click eseményhez, és meghatároz egy eseménykezelő függvényt, amelyet a böngésző végrehajt az click esemény bekövetkezésekor.
```
switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');
});
```

Az előző kódban a toggle metódust használtad az <body> elem osztályattribútumának módosítására. Ez a metódus automatikusan hozzáadja vagy eltávolítja a light-theme és dark-theme osztályokat. Ez a kód a sötét stílusokat alkalmazza a világos stílusok helyett, ha rákattint, majd sötét helyett világos stílusokat, ha újra kattint.

Azonban a gomb címkéjét is frissíteni kell a megfelelő téma megjelenítéséhez, ezért hozzá kell adnia egy utasítást if az aktuális téma meghatározásához, és frissítenie kell a gombcímkét.

A JavaScript-kódnak így kell kinéznie az eseménykezelő hozzáadásával:

'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";
    }
});

JavaScript konvenció, hogy több szóból álló változónevekhez camel case-t használjunk, például a változót .

Konzol üzenet

Webfejlesztőként olyan rejtett üzeneteket hozhat létre, amelyek nem láthatók a weblapon, de a Konzol lapon a Fejlesztői eszközök lapon olvashatók. A konzolüzenetek használata hasznos a kód eredményének megtekintéséhez.

A JavaScript-fájlban adjon hozzá egy hívást console.log az if utasítás után, de az eseményfigyelőben.

A módosítás után a teljes JavaScript-kódnak így kell kinéznie.

'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);
});

Ha JavaScript-fájlban van a Visual Studio Code-ban, az Enterconsole.loghasználhatja az log automatikus kiegészítést.

Definiálhat egy szöveges sztringet , amely egy vagy két idézőjelet tartalmaz a szöveg körül.

Megnyitás a böngészőben

Az előnézet megtekintéséhez kattintson index.html a jobb gombbal, és válassza a Megnyitás alapértelmezett böngészőben parancsot, vagy töltse be újra ugyanazt a böngészőlapot az F5 billentyű lenyomásával.
Az új Sötét gombra kattintva válthat a sötét témára.
Győződjön meg arról, hogy minden helyesen néz ki, és a várt módon viselkedik. Ha nem, tekintse át az előző lépéseket, és ellenőrizze, hogy kihagyott-e valamit.

A lap ellenőrzése a fejlesztői eszközökben

A Fejlesztői eszközök megnyitásához kattintson a jobb gombbal a Vizsgálat gombra, és válassza az Ellenőrzés lehetőséget, vagy használja az F12 billentyűparancsot. Másik lehetőségként használhatja a Ctrl+Shift+I billentyűparancsot Windows vagy Linux rendszeren, az Option+Command+I parancsikont pedig macOS rendszeren.
Jelölje ki az Elemek lapot, és válassza a Stílusok lapot.
Jelölje ki az <body> elemet. A Stílusok lapon tekintse meg az alkalmazott témát. Ha az aktuális téma sötét, a program a dark-theme stílusokat alkalmazza.

Győződjön meg arról, hogy a sötét téma ki van jelölve.
Válassza a Konzol fület az console.log üzenet megtekintéséhez. current class name: dark-theme

A konzol használatával érdekes megállapításokat kaphat a JavaScript-kódból. További konzolüzenetek hozzáadásával megtudhatja, hogy a kód mely részei lesznek végrehajtva, és megismerheti a többi változó aktuális értékeit.

A konzollal kapcsolatos további információkért tekintse meg a Konzol áttekintése című cikket.

Visszajelzés

Hasznosnak találta ezt az oldalt?