Kihagyás

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 pontosvessző kérdése

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ójelpá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
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 C-ben 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ípuskonverzió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 ellenő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 igazat, 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é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 indexelhető kollekciót ad vissza)
  • document.getElementsByClassName(): megkeresi az adott class értékkel rendelkező elemeket (egy indexelhető kollekció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 és módosítani tudunk elemeket, hanem akár objektumok beszúrására és törlésére, valamint eseménykezelésre 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: 2021-11-18 14:51:01