Kihagyás

8. gyakorlat

A gyakorlat anyaga

Ezen a gyakorlaton átismételjük a HTML és CSS nyelvek kapcsán tanult fontosabb ismereteket, majd megismerkedünk a JavaScript nyelv alapjaival.

HTML és CSS ismétlés

Ezen a gyakorlaton a JavaScript hagyományos, böngészőbeli alkalmazásáról fogunk tanulni. Ehhez viszont először érdemes átismételni a HTML-ről és a CSS-ről tanultakat.

Emlékeztetőül a HTML weboldalak és webes alkalmazások készítésére szolgál. Ezeknek a weboldalaknak a tartalmát CSS segítségével formázhatjuk.

A HTML és CSS értelmezéséhez és megjelenítéséhez egy webböngészőt használunk. Érdemes megjegyezni, hogy előfordulhat, hogy különböző böngészők (illetve böngészőverziók) ugyanazt a kódot másképp jelenítik meg.

HTML ismétlés

Tagek, attribútumok

A HTML dokumentumot < és > közé írt, speciális jelentésű objektumok, tagek alkotják.

Ezeknek a tageknek a többsége páros tag, tehát egy nyitótagből és egy zárótagből áll.

1
<p>Ide jön valami szöveg...</p>

Vannak viszont páratlan tagek (vagy másnéven üres tagek) is. Ezek csak nyitótagből állnak, amihez nem tartozik lezáró tagpár. A páratlan tagek végére perjelet is tehetünk, viszont ez a HTML5-ös szabványban elhagyható (tehát pl. <br/> és <br> egyaránt helyes).

1
Első sor <br/>Második sor <br/>Harmadik sor

A HTML dokumentum lényegében tagek egymásba ágyazásából áll. Több tag egymásba ágyazása esetén az a szabály, hogy a megnyitott tageket belülről kifelé haladva zárjuk le.

Az alábbi példában először lezárjuk a legbelső <span> taget, majd az eggyel korábban megnyitott <p> taget, végül pedig a legkülső helyen szereplő <div> tag kerül lezárásra.

1
<div><p><span>Ide jön valami szöveg...</span></p></div>

A tagekhez tartozhatnak speciális, előre definiált tulajdonságok, attribútumok. Ezeket, értékükkel együtt a nyitótag neve után soroljuk fel, szóközzel elválasztva.

Az alábbi példában az <a> tag két attribútummal rendelkezik: a href és a class attribútumokkal.

1
<a href="https://www.google.com" class="my-link">Google</a>
A HTML dokumentum felépítése

A HTML dokumentumunk megírását jellemzően az alábbi néhány sorral kezdjük:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html>
    <head>
        <title>Az én klassz weboldalam</title>
        <meta charset="UTF-8"/>
    </head>
    <body>

    </body>
</html>

Amint láthatjuk, a HTML dokumentumunk két fő részből áll.

A <head>-ben úgynevezett metainformációkat szoktunk megadni (ilyenek például a weboldal szerzője, a karakterkódolás, a weboldal leírása, kulcsszavak stb.).

A <body>-ba a weboldalon közvetlenül megjelenő tartalmi elemek (pl. szövegek, képek, táblázatok, multimédia, űrlapok) kerülnek. Ezt a tartalmat lehetőségünk van strukturálni is különböző oldalszerkezeti elemek, szakaszok kialakításával.

Fontosabb HTML elemek

Az alábbiakban áttekintjük a leggyakrabban használt HTML elemeket. Aki részletesebben szeretne a HTML elemekről olvasni, az a webtervezés gyakorlati jegyzetből megteheti ezt.

Kommentek

A HTML kódba kommentet az alábbi szintaxissal írhatunk:

1
<!-- Ez egy komment a HTML kódban -->
A head fontosabb elemei
  • <title>...</title>: böngészőfülön megjelenő cím
  • <meta charset="UTF-8"/>: UTF-8-as karakterkódolás beállítása (páratlan tag)
  • <style>...</style>: CSS megadása
  • <script>...</script>: szkript (jellemzően JavaScript) megadása
  • <link rel="stylesheet" href="my_file.css"/>: külső CSS fájl beágyazása (páratlan tag)
A body fontosabb elemei
  • <h1>...</h1>, <h2>...</h2>, ..., <h6>...</h6>: címsorok
    • csökkenő fontosság (h1: legfontosabb, h6: legkevésbé fontos)
  • <p>...</p>: bekezdés
  • <br/>: sortörés (páratlan tag)
  • <img/>: kép (páratlan tag)
    • src attribútum: a kép elérési útvonala
    • alt attribútum: helyettesítő szöveg (ha a kép nem jelenik meg)
  • <a>...</a>: hivatkozás, link
    • href attribútum: a cél, ahova a hivatkozásra kattintva jutunk
1
2
3
4
5
6
7
8
<h1>A macskák</h1>

<!-- A height attribútummal a kép magasságát adjuk meg pixelben -->
<img src="https://upload.wikimedia.org/wikipedia/commons/9/9b/Domestic_cat_cropped.jpg" alt="Macska" height="300">

<h2>Általános leírás</h2>
<p>A macska, más néven házi macska (Felis silvestris catus) kisebb termetű húsevő emlős, amely a ragadozók rendjén belül a macskafélék (Felidae) családjának Felis neméhez és Felis silvestris fajához tartozik.</p>
<p>Forrás: <a href="https://hu.wikipedia.org/wiki/Macska">Wikipédia</a></p>
  • <div>...</div>: blokkszintű (block) szakasz - új sorban kezdődik, szélessége kitölti a rendelkezésre álló helyet
  • <span>...</span>: sorszintű (inline) szakasz - új sorban kezdődik, szélességét a tartalom szélessége határozza meg
1
A <span>span tag</span> és a <div>div tag</div> szakaszok kialakítására alkalmas.

  • <ul>...</ul>: rendezetlen (sorszámozatlan) lista
  • <ol>...</ol>: rendezett (sorszámozott lista)
  • <li>...</li>: listaelem
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!-- Rendezetlen lista -->
<ul>
    <li>Kenyér</li>
    <li>Tej</li>
    <li>Felvágott</li>
</ul>

<!-- Rendezett lista -->
<ol>
    <li>Nyisd ki a szemed!</li>
    <li>Nyomd ki az ébresztőt!</li>
    <li>Aludj vissza!</li>
</ol>
  • <table>...</table>: táblázat
  • <tr>...</tr>: egy sor a táblázaton belül
  • <td>...</td>: egy oszlopcella a soron belül
  • <th>...</th>: egy fejléccella a soron belül
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<table>
    <tr>
        <th>Hallgató neve</th>
        <th>Pontszám</th>
    </tr>
    <tr>
        <td>Techno Kolos</td>
        <td>70</td>
    </tr>
    <tr>
        <td>Pumpáló L. Emma</td>
        <td>100</td>
    </tr>
</table>
  • <button>...</button>: egyszerű nyomógomb
1
<button type="button">Kattints rám!</button>

Minden HTML objektumnak adható id, illetve class attribútum.

Az id (egyedi azonosító) egy objektum azonosítására szolgál. Értékének szabályosan egyedinek kell lenni a dokumentumon belül.

A class (osztály) ezzel szemben több objektum csoportosítására használatos (például ha több objektumot szeretnénk CSS-ben ugyanúgy formázni). A class értékének nem kell egyedinek lennie (sőt általában nem is az).

1
2
3
4
5
6
<!-- A "foo" egyedi azonosítóval rendelkező bekezdés -->
<p id="foo">Ide jön valami szöveg...</p>

<!-- Egy bekezdés és egy kép, amelyek a "bar" osztályhoz tartoznak -->
<p class="bar">Ide is jön valami szöveg...</p>
<img class="bar" src="cats.gif" alt="Cicák"/>

CSS ismétlés

A HTML-t a tartalom megjelenítésére és strukturálására használtuk. Ha a weboldalon megjelenő tartalmat formázni szeretnénk, akkor ezt CSS segítségével tehetjük meg.

Beszúrás HTML-be

HTML kódba többféleképpen is szúrhatunk be CSS formázásokat.

Az inline CSS esetén a tagek style attribútumaként adjuk meg az adott objektum formázását.

1
<p style="color: blue">I'm blue da ba dee da ba die...</p>

Figyelem

Az inline CSS használata se nem szép, se nem hatékony, ezért ha csak lehet, kerüljük a használatát!

Az internal (belső) CSS-t a <head>-ben adjuk meg a <style> tag segítségével. Ekkor a formázások az aktuális dokumentumra lesznek érvényesek.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html>
    <head>
        <title>CSS alapok</title>
        <meta charset="UTF-8"/>
        <style>
            p { color: blue; }
        </style>
    </head>
    <body>
        <p>I'm blue da ba dee da ba die...</p>
        <p>Da ba dee da ba die...</p>
    </body>
</html>

Az external (külső) CSS-t szintén a <head>-ben adjuk meg. Az external CSS lényege, hogy egy külső CSS fájlt ágyazunk be, amelynek a formázásai érvényesek lesznek a csatoló dokumentumban. Ezt a beágyazást a <link/> páratlan taggel tehetjük meg.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!DOCTYPE html>
<html>
    <head>
        <title>CSS alapok</title>
        <meta charset="UTF-8"/>

        <!-- a "main.css" nevű CSS fájl beágyazása -->
        <link rel="stylesheet" href="main.css"/>
    </head>
    <body>
        <!-- a weboldal tartalma... -->
    </body>
</html>
A CSS szintaxisa
Kommentek

CSS-ben kommenteket a következő szintaxissal adhatunk meg:

1
/* ez egy komment a CSS kódban */
Utasítások szintaxisa

A CSS utasítások általános szintaxisa a következőképpen néz ki:

1
2
3
4
5
szelektor {
    tulajdonság1: érték1;
    tulajdonság2: érték2;
    ...
}

A szelektor (más néven kijelölő) segítségével megadjuk, hogy mely objektumot (vagy objektumokat) szeretnénk formázni. Kapcsos zárójelek pedig pontosvesszővel elválasztva megadjuk az elvégzendő formázásokat tulajdonság: érték formában. A tulajdonság az adott objektum formázni kívánt tulajdonsága (pl. betűszín, margó), az érték pedig a kérdéses tulajdonsághoz tartozó, beállítani kívánt érték.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
/* egy egyszerűbb szelektor */

body {
    margin: 0;                          /* margó */
    padding: 0;                         /* térköz */
    background-color: #f0f0f0;          /* háttérszín */
    font-family: Arial, sans-serif;     /* betűtípus */
}

/* egy összetettebb szelektor */

#main-content .centered {
    text-align: center;                 /* középre igazítás */
}

Ezen a kurzuson nem vesszük át a CSS-ben formázható tulajdonságokat. Akit ez viszont érdekel, az a webtervezés gyakorlati jegyzetben megtalálhatja ezeket.

Fontosabb szelektorok

Az alábbiakban áttekintjük a leggyakrabban használatos CSS szelektortípusokat. Az összes lehetséges szelektortípust megtalálhatjuk ezen a linken.

  • div: kijelöli az összes <div> elemet (element selector)
  • .foo: kijelöli az összes class="foo" attribútummal rendelkező elemet (class selector)
  • #foo: kijelöli az id="foo" attribútummal rendelkező elemet (id selector)
  • div, p: kijelöli az összes <div> és <p> elemet (group selector)
  • div p: kijelöli az összes olyan <p> elemet, amely egy <div>-en belül van
  • div>p: kijelöli az összes olyan <p> elemet, amelynek közvetlen szülője egy <div>

JavaScript alapok

A félév hátralévő részében a JavaScript nyelvvel fogunk megismerkedni.

A JavaScript egy platformfüggetlen szkriptnyelv, amely eredetileg azzal a céllal lett létrehozva, hogy a weboldalainkat interaktívabbá tegyük kliensoldali logikával.

Természetesen ma már nem csak kliensoldalon, hanem szerveroldalon is használhatjuk a JavaScriptet. Kliensoldalon a böngészőben lévő JavaScript Engine felel a kód futtatásáért, míg szerveroldali JavaScript esetén nincs szükségünk böngészőre (pl. Node.js futtatókörnyezet).

A nyelv egyik fontos előnye, hogy teljes integrációban áll a HTML-lel és CSS-sel, így egy HTML dokumentumba tetszőlegesen ágyazhatunk be JavaScript kódokat.

Beszúrás HTML-be

JavaScript kódot a <script> tag segítségével szúrhatunk be HTML kódba.

Egy HTML dokumentum tetszőleges mennyiségű <script> taget tartalmazhat. Ezeket a tageket általában a <head>-ben, illetve a <body> végén adjuk meg.

A JavaScript kódunkat kiszervezhetjük egy külön .js kiterjesztésű fájlba is. Ezeknek a fájloknak a tartalmát be tudjuk emelni HTML-be, ha használjuk a <script> tag src attribútumát.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript alapok</title>
        <meta charset="UTF-8"/>
        <!-- JavaScript beágyazása külső fájlból -->
        <script src="main.js"></script>
        <!-- JavaScript kód megadása a HTML dokumentumban -->
        <script>
            // ide jön a JavaScript kód...
        </script>
    </head>
    <body>
        <h1>Hello JavaScript!</h1>
        <script>
            // a body végére is kerülhet JavaScript kód
        </script>
    </body>
</html>
Kommentek

JavaScriptben is lehetőségünk van kommentek (megjegyzések) írására.

A C-ből ismerős szintaxist használjuk: az egysoros kommenteket // után adjuk meg, míg a több soros kommenteket /* és */ közé írjuk.

1
2
3
4
5
6
// ez egy egysoros komment

/*
    ez egy több
    soros komment
*/
Kiíratások

JavaScriptben számos különböző módszerrel jeleníthetünk meg adatot a képernyőn.

Böngészős környezetben az alert() beépített függvénnyel felugró ablakot készíthetünk.

1
alert("Hello! Én egy felugró ablak vagyok.");

Ha böngészőben vagyunk, akkor a document.write() segítségével írathatunk ki tartalmat a weboldalra. Fontos megjegyezni, hogy ha a document.write()-ot azután használjuk, miután a weboldal betöltődött, akkor minden meglévő HTML tartalmat töröl.

1
document.write("Hello! Én a weboldalon fogok megjelenni.");

Mi a gyakorlaton szinte mindig a console.log()-ot fogjuk használni kiíratásra. Ennek segítségével egyszerűen írhatunk adatokat a konzolra. A böngészőknél általában az  F12  billentyűvel tudjuk megnyitni a konzol ablakot.

1
console.log("Hello! Én a konzolon jelenek meg.");

Megjegyzés

A fenti kódpéldákban szereplő utasítások végére pontosvesszőt tettünk, azonban ez JavaScriptben elhagyható. Bizonyos esetekben viszont a pontosvessző elhagyása nem várt működést eredményezhet a kódban, így célszerű azt az utasítások végére mindig kitenni!

Fontosabb adattípusok

A JavaScript legalapvetőbb adattípusai: boolean, number, string és undefined.

A boolean (amint arra a nevéből rájöhetünk) logikai adattípus. Kétféle értéke lehet: true (logikai igaz érték) vagy false (logikai hamis érték).

A number adattípus a számok adattípusa lesz. JavaScriptben nincs külön egész és lebegőpontos típus, a szám adatok minden esetben number típusúak lesznek. Ez minden számot lebegőpontosként ábrázol, ami sajnos sok esetben pazarló.

A string természetesen a szöveges adattípust jelenti. JavaScriptben stringeket általában aposztrófok ('...') vagy idézőjelek ("...") között szoktunk megadni. A stringek összefűzése a + (plusz) operátorral történik.

1
console.log("almás" + "pite");

Kimenet

almáspite

A JavaScript egyik érdekes adattípusa az undefined, ami a definiálatlan értéket jelenti. Például amikor egy változót deklarálunk, de nem adunk neki értéket, akkor a változó értéke automatikusan undefined lesz.

Típusellenőrzés

JavaScriptben a typeof operátor segítségével megkaphatjuk egy adott érték típusát. A visszaadott típus minden esetben egy szöveges érték lesz.

1
2
console.log(typeof 42);                         // "number"
console.log(typeof 42 === "number");            // true
Változók

Természetesen JavaScriptben is hozhatunk létre változókat, amelyeknek értéket a szokásos = operátorral adhatunk. JavaScriptben többféleképpen is létrehozhatunk változókat. Tekintsük az alábbi két szintaxist:

  • var valtozonev = ertek;
  • let valtozonev = ertek;.

Amint láthatjuk, változókat létrehozhatunk a régebb óta létező var, illetve az újabb (ECMAScript 6 szabványban bevezetett) let kulcsszavakkal. Ahhoz, hogy megértsük a két kulcsszó közötti működésbeli különbséget, nézzük az alábbi kódpéldát!

1
2
3
4
5
6
7
{
    var a = 1;
    let b = 2;
}

console.log(a);
console.log(b);

Kimenet

1 C:\Users\Bence\Desktop\test.js: 7 console.log(b);

ReferenceError: b is not defined ...

Mi történt itt? Egy utasításblokkon (kapcsos zárójel páron) belül létrehoztunk két változót: az a változót a var kulcsszóval, míg a b változót a let kulcsszóval.

Amikor a blokkon kívül kiírattuk a var kulcsszóval létrehozott változó értékét, akkor semmi gond nem volt, a blokkon belül létrehozott változó a blokkján kívül is látszott. Ez igen problémás lehet, hiszen ellentmond a többi programozási nyelv logikájának.

Ezzel szemben a let kulcsszóval létrehozott b változó a már jól megszokott módon viselkedik: az őt létrehozó blokkon belül lokális lesz, ha pedig ezen a blokkon kívül hivatkozunk rá, akkor hibaüzenetet kapunk.

Tipp

Összefoglalva: változók létrehozásakor használjuk inkább a let kulcsszót!

Az ECMAScript 6 szabvány a let mellett egy újabb módosítószót is hozott magával változók létrehozására, mégpedig a const kulcsszót.

A const kulcsszóval létrehozott változók a let kulcsszóval létrehozott változókhoz hasonló módon viselkednek, azzal a kikötéssel, hogy az ő kezdőértéküket nem lehet módosítani ("konstans változók").

1
2
3
4
5
6
7
var a = 10;             // ezt ne használjuk!
let b = 20;             // használjuk helyette inkább ezt!
console.log("a értéke: " + a + ", b értéke: " + b);

const kedvencTargy = "Szkriptnyelvek";  // "konstans változó"
// kedvencTargy = "Programozás II";     // HIBA!!
console.log("A kedvenc tárgyam: " + kedvencTargy);

Kimenet

a értéke: 10, b értéke: 20 A kedvenc tárgyam: Szkriptnyelvek

A változók létrehozása során a változónévre vonatkozóan van néhány tudnivaló, amivel érdemes tisztában lennünk:

  • A változónév nem kezdődhet számmal
  • A változónév betűt, számot és speciális jelet (_, $) tartalmazhat
  • Foglalt nevek nem használhatók változónévként (pl. function, return, let, class).

A JavaScript a Pythonhoz hasonló módon dinamikusan típusos nyelv, tehát itt is lehetőségünk van arra, hogy ugyanabban a változóban eltérő típusú értékeket tároljunk.

1
2
3
4
5
6
7
8
let val;            // val típusa: undefined
console.log(val);

val = 42;           // val típusa: number
console.log(val);

val = "Béla";       // val típusa: string
console.log(val);

Kimenet

undefined 42 Béla

Típuskonverzió

JavaScriptben az adattípusok közötti konverzió automatikus. Két egyszerű példa automatikus típuskonverzióra:

  • Ha a + (plusz) operátor bármely operandusa string, akkor az operátor stringösszefűzést fog végezni. Ekkor a nem string típusú operátorok automatikusan szöveges típusra lesznek konvertálva.
1
2
"2" + 5;        // "2" + "5" = "25"
2.0 + "5";      // "2" + "5" = "25"
  • A * operátor a szorzást jelenti. Ha valamelyik operandusa nem szám típusú, akkor megpróbálja azt number típusúra konvertálni. Ha a konverzió sikeres, akkor elvégezzük a szorzást, ellenkező esetben pedig NaN-t kapunk vissza (Not a Number).
1
2
"2" * 5         // 2 * 5 = 10
"sajt" * 5      // NaN

Természetesen az automatikus típuskonverzió mellett lehetőségünk van manuálisan is egy adatot egy másikra típusra konvertálnunk bizonyos beépített függvények segítségével. Ezt nevezzük typecasting-nak.

  • Boolean(expr): az expr kifejezést boolean típusúvá alakítja
  • Number(expr): az expr kifejezést number típusúvá alakítja
  • String(expr): az expr kifejezést string típusúvá alakítja
  • Számok közötti konverzióra használhatjuk a parseInt() és parseFloat() függvényeket
1
2
3
4
5
6
7
8
let a = Number("3.14");         // 3.14
let b = Number("101 kiskutya"); // NaN (Not a Number)
let c = parseInt(3.14);         // 3
let d = String(42);             // "42"


// number -> boolean konverzió esetén: 0 -> false, minden más -> true
let e = Boolean(0);             // false
Fontosabb operátorok

A JavaScript fontosabb operátorai:

Kategória Operátorok
Aritmetikai operátorok +, -, *, /, %, **
Hozzárendelő operátorok =, +=, -=, *=, /=
Inkrementáló, dekrementáló operátorok ++, --
Összehasonlító operátorok ==, ===, !=, !==, <, <=, >, >=
Logikai operátorok &&, ||, !

A legtöbb operátor a korábban tanultakkal megegyező módon viselkedik. Néhány operátor viszont a megszokottaktól eltérő módon működik:

  • A / operátor mindig (egész operandusok esetén is) lebegőpontos osztást végez
  • Hatványozásra a ** (dupla csillag) operátor alkalmas
  • Pythonnal ellentétben JavaScriptben használhatjuk a ++ és -- operátorokat egy változó értékének 1-gyel való növeléséhez vagy csökkentéséhez.

Érdekesek még az == (dupla egyenlő) és az === (tripla egyenlő) operátorok. Mindkettőt összehasonlítására használjunk, viszont van egy lényegi különbség a két operátor működésében:

  • Az == pontosan akkor ad vissza igazat, ha a két operandusának értéke megegyezik
  • Az === pontosan akkor ad vissza igazat, ha a két operandusának értéke és típusa egyaránt megegyezik.

Példa: Az == és === operátorok működésbeli különbsége

1
2
console.log(42 == "42");
console.log(42 === "42");

Kimenet

True False

Mi is történik itt? Mivel egy számot akarunk egy stringgel összehasonlítani, ezért a JavaScript automatikus típoskonverziót végez. A konverzió után a két változó értéke megegyezik (42), így az == operátor igazat ad vissza. Viszont mivel a 42 egy number, míg a "42" egy string típusú adat, ezért az === operátor visszatérési értéke hamis lesz.

Tipp

Az összehasonlításoknál általában érdemes típusra is ellnőriznünk, tehát használjuk az === operátort!

Az == operátor tagadása a != (ez pontosan akkor ad vissza igazat, ha a két operandus eltérő értékű), míg az === operátort a !== segítségével tagadhatjuk (ez pontosan akkor ad vissza igaza, ha a két operandus eltérő értékű vagy eltérő típusú).

DOM műveletek

Amikor egy weboldal betöltődik, akkor a böngésző elkészíti az úgynevezett dokumentum-objektum modellt. Ezt a továbbiakban DOM-nak fogjuk nevezni.

Mivel a HTML dokumentumunk lényegében HTML objektumok (tagek) egymásba ágyazásából áll, így a DOM tulajdonképpen egy fa hierarchiája az objektumoknak. A DOM fa (DOM Tree) segítségségével a HTML objektumok hierarchikus viszonyait könnyen áttekinthetjük.

Példa: Egy egyszerű HTML kód és a hozzá tartozó DOM fa

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!DOCTYPE html>
<html>
   <head>
      <title>DOM Példa</title>
   </head>
   <body>
      <h1>Az oldal címe</h1>
      <a href="https://u-szeged.hu/">SZTE</a>
   </body>
</html>

A webes világban gyakran előfordul, hogy a DOM-ot módosítani szeretnénk. Ezt JavaScriptben különböző DOM műveletek segítségével egyszerűen megtehetjük. A JavaScript ugyanis lehetőséget biztosít arra, hogy dinamikusan módosítsuk a HTML dokumentum szerkezetét, stílusát és tartalmát.

A gyakorlaton egy egyszerű DOM műveletre nézünk példát: megkeresünk a dokumentumon belül egy adott objektumot, és módosítjuk annak a tartalmát.

A dokumentumon belüli keresésre az alábbi metódusokat használhatjuk:

  • document.getElementById(): megkeresi az adott id értékkel rendelkező elemet
  • document.getElementsByTagName(): megkeresi az adott tagnévvel rendelkező elemeket (egy tömböt ad vissza)
  • document.getElementsByClassName(): megkeresi az adott class értékkel rendelkező elemeket (egy tömböt ad vissza).

Ahhoz, hogy egy DOM-beli objektum tartalmát módosítsuk JavaScriptben, az alábbi két property valamelyikét használhatjuk:

  • innerText: egy objektum szöveges tartalma
  • innerHTML: egy objektum HTML tartalma.

A különbség a kettő között, hogy az innerHTML értékeként megadott szöveg HTML-ként lesz értelmezve (ezért itt használható a szokásos HTML markup), míg az innerText minden esetben egyszerű szövegként jelenik meg.

Példa: Módosítsuk az id="text" attribútummal rendelkező objektum tartalmát JavaScriptben!

1
2
3
4
5
6
7
8
9
<p id="text">A DOM műveletekkel jókat lehet szórakozni.</p>

<script>
    // megkeressük a kérdéses objektumot id alapján
    const bekezdes = document.getElementById('text');

    // módosítjuk az objektum tartalmát
    bekezdes.innerHTML = '<b>Itt nem ez volt eredetileg.</b>';
</script>

Példa: Egy gomb megnyomása után változtassuk meg az id="text" attribútummal rendelkező objektum tartalmát!

1
2
3
4
5
6
7
<p id="text">A DOM műveletekkel jókat lehet szórakozni.</p>

<!-- Az onclick értékeként megadott JavaScript utasítás a gomb lenyomásakor fog lefutni -->

<button type="button" onclick="document.getElementById('text').innerText = 'Új szöveg'">
    Kattints ide!
</button>

Természetesen a DOM-ban nem csak keresni tudunk elemeket, hanem akár objektumok beszúrására és törlésére is van lehetőségünk. Erről az előadáson fogunk tanulni.

Feladatok

Az anyagrészhez tartozó gyakorló feladatsor elérhető itt.


Utolsó frissítés: 2020-11-03 20:48:36