[[oktatas:web:javascript|< JavaScript]] ====== A JavaScript nyelv ====== * **Szerző:** Sallai András * Copyright (c) 2011, Sallai András * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]] * Web: https://szit.hu ===== A JavaScript története ===== A JavaScriptet eredetileg **Mocha** néven hozták létre 1995-ben, de emlegették Netscape Scripting Language néven is. A JavaScript nyelvre hatással volt a Java és C nyelv, de azoktól független nyelv. A HTML 2.0 és 3.0 ajánlások idején a weblapok interaktivitása kimerült a linkekben és elküldhető táblázatokban. Nem volt JavaScript és Java. A Mocha-t később átnevezték **LiveScript**-re, amelyből lett a **JavaScript**. A JavaScript név felvétele után lett leginkább hasonló a Java szintaktikájához. Manapság szokás az **ECMA script egy dialektusaként** beszélni róla. Az ECMAScript a JavaScript(Netscape) és a JScript(Microsoft) által létrehozott nyelvekből alkotott szabvány. A szabványosítást a Netscape kezdeményezte 1996-ban, az első ECMAScript szabvány 1997-ben jelent meg. Ezt követően újabb szabvány jelent meg 1998, majd 1999-ben. A negyedik szabványt sokáig készítették de a mai napig nem készült el. 2009-ben megalkották az ötödik szabványt. Az ötödiket 5.1 verzió számmal 2011-ben újra kiadták. A hatodik 2016-ban jelent meg és azóta évente jelenik meg új szabvány. Megjelent [[https://www.ecma-international.org/publications-and-standards/standards/ecma-262/|szabványok]]: * 1 - 1997 * 2 - 1998 * 3 - 1999 * 4 - nem készült el * 5 - 2009 * 5.1 - 2011 * 6 - 2015 * 7 - 2016 * 8 - 2017 * 9 - 2018 * 10 - 2019 * 11 - 2020 * 12 - 2021 * 13 - 2022 Az egyes szabványokra rövidítéssel szoktunk hivatkozni. A **2016**-os verzióra például **ES7** néven hivatkozunk. ==== Gyakorlat 001 ==== - Hogyan hívták eredetileg a JavaScriptet? - Mikor hozták létre a JavaScript azon verzióját, amelynek a neve még nem is JavaScript volt? - A JavaScript eredeti verziójának emlegették egy másik néven is. Mi volt az? - A JavaScript nyelvre több más nyel is hatással volt, kettő van itt kiemelve. Melyik kettő az? - A JavaScript eredeti neve és a JavaScript név között volt egy köztes név is. Mi volt az? - Mi a JavaScript szabványok neve? ===== Elvárások ===== Az anyagrész feldolgozásához a következők ismerete szükséges: * HTML * CSS ===== Helló Világ =====

==== A JavaScript jellemzői ==== * Case-sensitive nyelv. Vagyis a kis és nagybetűk különböznek. * Nem típusos nyelv, azaz a változókat nem kell deklarálni használat előtt. ==== JavaScript beillesztése ==== A JavaScript beilleszthető a weboldal forrásába, de külön állományban is tarthatjuk, ugyanakkor megvalósítható egy tagen belül is. Ha egy weboldalon az adott tagen belül valósítjuk meg, akkor inline javascriptről beszélünk. A weblapon belül "script" elemek közé helyezett kód esetén internal javascriptről beszélünk. Ha külön állományba tesszük a kódot, akkor external javascriptről beszélünk. A következőkben ezekre látunk egy-egy példát. === Inline === A JavaScript soron belül az adott objektumnál van megvalósítva.






SWBin

=== Internal === Internal megvalósítás esetén a JavaScript kódot állományon belül hozzuk létre. Ez lehet a HTML fej vagy törzs része egyaránt.






SWBin

=== External === A JavaScriptet külön állományban is megvalósíthatjuk. Ezt nevezzük External megvalósításnak. A HTML oldalon csak egy hivatkozást teszünk az adott JavaScript állományra.






SWBin

  
function csinald() {
   alert('Helló Világ');
}

=== Kódolás megadása === Ha JavaScript kódunk olyan karaktereket is tartalmaz, amely majd a weboldalon megjelenhet, akkor szükség lehet a kódolás megadására. Ezt a script elem charset tulajdonságával adhatjuk meg.

=== defer attribútum === A JavaScript elemet sokszor ezért teszik törzs rész végére, hogy a weboldal betöltődjön, mire lefut a JavaScript kód. A böngészők ma már támogatják a defer attribútumot, aminek hatására a JavaScript kód csak akkor hajtódik végre, amikor a weblap már betöltődött.






SWBin

==== Gyakorlat 002 ==== - A JavaScript nyelv case-sensitive vagy nem? - A JavaScript típusos nyelv, vagy nem? - Melyik igaz állítás? - A JavaScript beilleszthető a HTML forráskódjába is. - A JavaScript kód nem tehető külön állományba. - Egy tagen belül írt JavaScript kódot, inline JavaScriptnek hívunk. - A link elemek közzé kell illeszteni az internal módon megvalósított JavaScriptet. - External JavaScriptről beszélünk, ha a egy HTML tagen belül írjuk a JavaScriptet. - Mire jó a script elem defer attribútuma? - Milyen attribútummal adjuk meg a JavaScript fájl karakterkódolását? Adott a következő kód:

Milyen megvalósításról beszélünk? Válasszon a következők közül: * internal * inline * external * read ===== Megjegyzés ===== A megjegyzést a Javascript értelmező nem veszi figyelembe.


// egy soros megjegyzés


/* több
soros
megjegyzés
*/

A többsoros megjegyzésbe nem ágyazható másik többsoros megjegyzés.


/*********************************
  
  Nagy János, 2022
  Megjegyzés példák
  
*********************************/

console.log('Nagy János'); # a nevünk kiíratása
console.log('JavaScript'); # a programozási nyelv kiíratása

==== Gyakorlat 003 ==== - Készítsen JavaScript fájlt a következők szerint: - Egy utasítással kiíratja a konzolra a teljes nevét. - Egy másik utasítással kiírtja az aktuális dátumot. - A forráskód elejére írja többsoros megjegyzésbe a teljes nevét és az aktuális dátumot. - Mindkét utasítással egy sorba írja egysoros megjegyzésbe, hogy hova ír az utasítás. ===== Kivitel ===== A JavaScript kiviteli felülete a böngésző. Négy lehetőségünk van. ==== Írás a konzolra ==== A konzol nem az a felület, ami alapértelmezésként megjelenik egy böngészőben. A console a fejlesztők felülete, amely általában F12 billentyűvel jeleníthető meg.


console.log("Szöveg a konzolra");

==== Írás a párbeszédablakba ==== A párbeszédablak sem az alapértelmezett megjelenési felület. A párbeszéd ablak viszont ehhez a felülethez tartozik, tulajdonképpen egy felugró ablak.


alert("Szöveg párbeszédablakban");

==== Írás weboldalra ==== A JavaScript segítségével írhatunk az adott weboldalra, amely azonban törli a többi tartalmat.


document.write("Szöveg weblapra");

==== Írás megadott helyre ==== A weboldalra persze több módon is írhatunk. Írhatunk adott elemek közzé, csak valahogy azonosítani kell azt az elemet, amelynek tartalmát szeretnénk megváltoztatni. Egy HTML elem tartalmának írása azonosító alapján:


document.getElementById("azonosito").innerHTML = "Szöveg HTML elembe";

Az első elem, amelynek osztályjelölője 'egy':


document.getElementsByClassName('egy')[0].innerHTML='Az első egy osztály';

Az első p elem tartalmának írása:


document.getElementsByTagName("p")[0].innerHTML="Az első p elem tartalma";

Jó kérdés, hogy a konzolt hol látjuk? Chrome böngészőben, Shift+Ctrl+i vagy csak F12. Firefox böngészőben Shift+Ctrl+k, de ha telepítve van a Firebug plugin akkor ott is használható az F12.






SWBin

===== Escape szekvenciák ===== Ha egy karaktersorozatot küldök a böngészőbe, akkor azt mindig idézőjelek közzé írom, amelyek megjelennek a weboldalon, vagy egy párbeszédablakban vagy a konzolon. Egyes karaktereknek lehet speciális jelentése is. A speciális jelentést a (\) karakter jelzi. Ha például az (n) betűnek szeretnék speciális jelentést adni, akkor elé írok egy vissza-perjelet: \n Az n betű helyett egy sortörés íródik a HTML oldal forrásába. | \n | sortörés | | \t | tabulátor | | \' | aposztróf | | \" | idézőjel | | \\ | vissza-perjel | | \b | Backspace | | \xXX | Latin-1 karakter hexadecimális értékkel megadva. | | \uXXXX | Unicode karakter hexadecimális értékkel megadva. | * A A latin-1 kódolással: \x41 * A π unicode karakterrel: \u03c0 ===== Változók ===== A változók elnevezett memóriaterületek, ahol különböző típusú értékeket tárolhatunk. JavaScriptben a következő típusok vannak: * karaktersorozatok - String * számok - Numeric * logikai értékek - Boolean A típusokat a változók használata előtt nem kell megadni. A változónevek kezdődhetnek betűvel (a-z vagy A-Z) vagy '_' (alulvonás) karakterrel. Ez után számok, betűk , alulvonás és '$' karakter is előfordulhatnak a változónévben. Nem latin betűk is előfordulhatnak, de használatuk nem ajánlott. Változó létrehozás: let változónév = érték; vagy: var változónév = érték; A let kulcsszó helyett használhatjuk a var-t, de el is hagyható, nem használunk modern módot.


let szam; //deklaráció
szam = 35; //definíció

vagy:


var szam; //deklaráció
szam = 35; //definíció

A deklaráció és a definíció lehet egyetlen sorban is:


let szam = 35; //deklaráció és definíció

A definiált érték többször megváltoztatható:


let szam = 35;
szam = szam + 2;
console.log(szam);

Ma már lehet let kulcsszóval is:


let szam = 35;
szam = szam + 2;
console.log(szam);

==== Karaktersorozatok ====


"alma"
'körte'
`szilva`

Mind a három helyes Ha számokat karaktersorozatként tárolunk, műveleteket akkor is végezhetünk velük.


let gyumolcs1 = "alma";
let gyumolcs2 = 'körte';
let gyumolcs3 = `szilva`;

==== Több változó deklarálása ==== Több változót is létrehozhatunk egyetlen sorban, vesszővel tagolva, használatuk azonban rontja az átláthatóságot.


let szam1 = 30, szam2 = 35;

De lehet több sorba is írni:


let szam1=30, 
	szam2=35,
	szam3=40;

===== Állandók ===== Az állandókat a const kulcsszóval vezetjük be és szokás szerint nagybetűvel írjuk őket.


const MAX = 500;


const USER_ID = 10;


const EGYIK_ALLANDO = 0, MASIK_ALLANDO=1;

===== Foglalt szavak ===== Miért foglaltak? Mert nem használhatjuk őket azonosítóként, mivel a JavaScript már használja ezeket. abstract boolean break byte case catch char class const continue debugger default delete do double else enum export extends false final finally float for function goto if implements import in instanceof int interface long native new null package private protected public return short static super switch synchronized this throw throws transient true try typeof var volatile void while with ===== Operátorok ===== ==== Aritmetikai operátorok ==== Kétféle operator van: * unary - egy operandusú * binary - két operandusú ^ Operátor ^ Leírás ^ Példa ^ | + | Összeadás | a + b | | - | Kivonás | a - b | | * | Szorzás | a * b | | / | Osztás | a / b | | % | Maradékképzés | a % b | | ** | Hatványozás | a**b | | - | negatív érték | -a | | + | megpróbálja számmá alakítani az értéket | +a | ==== Növelés, csökkentés ==== | ++ | Emelés | a++ vagy ++a | | -- | Csökkentés | a-- vagy --a | ==== Összerendelő operátorok ==== ^ Operátor ^ Példa ^ Egyezik ezzel ^ | = | x = y | | | += | x += y | x = x + y | | -= | x -= y | x = x - y | | *= | x *= y | x = x * y | | /= | x /= y | x = x / y | | %= | x /= y | x = x % y | ==== Összeadás ====


let osszeg = 3 + 2;

Vagy


let a = 3;
let b = 2;
let osszeg = a + b;

Az eredmény: 5 De nézzük, azt az esetet amikor bekérjük a számokat.


let a = window.prompt("Szám1: ");
let b = window.prompt("Szám2: ");
let osszeg = (a + b);
alert(osszeg);

Ha bemenőparaméternek megadunk 3 és 2-őt, a fenti esetben az "osszeg" változó értéke 32 és nem 5, mivel karaktersorozatként értelmezi a JavaScript. Ezért konvertálnunk kell számmá. Erre a parseInt és parseFloat függvények használhatók:


let a = window.prompt("Szám1: ");
let b = window.prompt("Szám2: ");
let osszeg = (parseInt(a) + parseInt(b));
alert(osszeg);

==== Logikai operátorok ====


let egy = 1;
let zero = 0;

console.info(egy || zero);
console.info(egy && zero);

Az első info() 1-gyel tér vissza, a második 0-val.


console.info(egy && ot);

Visszatér 5-tel. ===== Típusok ===== * number - számok * string - karaktersorozatok * boolean - logikai * object - objektumok Egy típusos nyelv esetén hibát ad a következő:


let a = 14 + "alma";

A JavaScript nyelvben a 14 karaktersorozatként hozzáadódik az alma szóhoz. És mi történik ebben az esetben:


let a = 14 + 5 + "alma";

A JavaScript balról jobbra értékeli ki a kifejezést. Először két számmal találkozik, ezért számként összeadja azokat; megkapjuk a 19-t. A 19 már karaktersorozatként adódik az "alma" szóhoz. Az eredmény: 19alma A következő példában a számok a karaktersorozat után találhatók:


let a = "alma" + 14 + 5;

Mivel elsőként egy karaktersorozattal találkozik az értelmező, ezért a 14 és az 5-s értéket is karaktersorozatként értelmezi. Az eredmény: alma145 ==== Dinamikus típusok ==== Ha létrehozunk egy változót, később többféle típust elhelyezhetünk benne.


let a;
a = 145;
a = "alma";

A példánkban, létrehoztunk egy a változót, majd egy számot helyezünk el benne, a 145-t. Az utolsó sorban karaktersorozatot helyezünk el benne. ==== Karaktersorozat ==== A karaktersorozat állandót két módon is megadhatom.


let gyumolcs = "alma";
let gyumolcs = 'alma';
let gyumolcs = `alma`; //Template string ES6-tól

Beágyazás:


let mondat1 = "alma a 'teremtésben'";
let mondat2 = 'alma a "teremtésben"';

A ferde aposztrófok lehetővé teszik a változó- vagy kifejezésbehelyettesítést. Behelyettesítés:


let nev = 'Nagy János';
console.log(`Üdv ${nev} a téren`);


let szam = 35;
console.log(`Összeadás: ${szam+5}`);

==== Számok ====


let szam = 38.00; //tizedesjegyek (decimals)
let szam = 38; //tizedesjegyek nélkül

Nagy számok:


let szam1 = 25e4;      // 250000
let szam2 = 25e-4;     // 0.0025

==== Speciális számértékek ==== * Infinity * -Infinity * NaN === Infinity === A matematikai végtelent reprezentálja. Az érték nagyobb mint bármely szám. Ezt kapjuk 0-val való osztás esetén is.


eredmeny = 1/0;
alert(eredmeny);
alert(Infinity);

=== NaN === Számítási hibák eredményeként kapjuk. Például, szöveggel osztás:


alert("valami" / 8);

==== Nagy számok ==== Tagolás:


let nagy_szam = 1_000_000_000;
alert(nagy_szam);


let nagy_szam = 1e9;
console.log(nagy_szam);

A legnagyobb egész szám: 2^{53}-1 azaz 9007199254740991. Ennél nagyobb számok esetén írjunk egy "n" betűt a szám végére. Ezt nevezzük BigInt típusnak.


let nagy_szam = 12345678901234567890123456789012345678901234567890n;
console.log(nagy_szam);
console.log(nagy_szam * 2n);

A 2 után is kötelező az (n) betű, mivel nem keverhető a BigInt más típussal. ==== Logikai típus ====


let a = 5;
let b = 5;
let c = 8;

(a == b)  // az eredmény true
(a == c)  // az eredmény false
(a > b) 
(a >= b)
(a < b)
(a <= b)
(a != b)


let nagy = true;

==== Tömb ====


let gyumolcsok = ['alma', 'körte', 'barack'];

==== Objektum ====


let dolgozo = { nev:'Nagy János', telepules:'Szolnok', fizetes:8_500_000 };

==== A typeof operátor ==== Nézzük meg mit ad vissza a typeof operátor az egyes esetekben.


typeof "";         //string
typeof "alma"      //string


typeof 0          //szám -- number
typeof 95         //szám -- number
typeof 9.5        //szám -- number
typeof (3)        //szám -- number
typeof (5 + 6)    //szám -- number

==== Undefined ====


let szam;         //értéke undefined

Bármely változó értéke kiüríthető az undefined értékkel:


szam = undefined;

==== Üres érték ==== Az üres érték egy karaktersorozat karakter nélkül, de nincs köze az undefined értékhez.


let str = "";

==== null ==== A JavaScriptben a null érték a következőt jelenti: semmi. Nem szerencsés, de a JavaScriptben a null típusa objektum.


let dolgozo = {nev:"Nagy János", telepules:"Szolnok", fizetes:8500000};
dolgozo = null;

A dolgozó értéke végül null, de még mindig objektum. ==== Az undefined és a null ==== Ha megvizsgáljuk az typeof operátorral:


typeof undefined             // undefined
typeof null                  // object

Hasonlítsuk össze egymással:


null === undefined           // false
null == undefined            // true

==== Adatértékek ==== Primitív adatértékek: * number * string * boolean * undefined Komplex adatértékek: * object * function


typeof [1,2,3,4]                  // visszatér: "object"-el; nincs array visszatérési típus
typeof {nev:'János', fiz:340000}  // visszatér: "object"
typeof null                       // visszatér: "object"
typeof function csinald(){}       // visszatér: "function"

===== Formázott kimenet ===== A számok **fixpontos jelöléssel** írása, kérhető a **toFixed()** függvénnyel. Tizedesjegyek számának meghatározása, közben a legközelibb egészre kerekítés:


let a=2489.8237;
console.log(a.toFixed(3)); // 2489.824 (kerekítés felfelé)
console.log(a.toFixed(2)); // 2489.82
console.log(a.toFixed(7)); // 2489.8237000 (helykitöltés)

A maradékhely kitöltődik 0-val. A **pontosság** beállítható a **toPrecision()** függvénnyel. Számjegyek száma (egészek és törtrészek):


let a = 123.45;
console.log(a.toPrecision(6)); // 123.450 (helykitöltés)
console.log(a.toPrecision(4)); // 123.5 (kerekítés felfelé)
console.log(a.toPrecision(2)); // 1.2e+2 (a formátum túlcsordult)

Tudományos alakban kiír:


let num = 45.56749;
let n = num.toExponential();
console.log(n); //4.556749e+1 (tudományos alak)

==== Ezredeselválasztás ==== Ezredeselválasztás:


var num = 11222333;
console.log(new Intl.NumberFormat().format(num));
//Eredmény: 11 222 333


var num = 11222333;
console.log(new Intl.NumberFormat('en-US').format(num));
//Eredmény: 11,222,333


var num = 123.1234567;
console.log(new Intl.NumberFormat('hu-HU', { style: 'currency', currency: 'HUF' }).format(num));
//Eredmény: 123,12 Ft


var num = 123.1234567;
console.log(new Intl.NumberFormat(
    'hu-HU', { 
        style: 'currency', 
        currency: 'HUF',
        minimumFractionDigits: 3
    }).format(num));
//Eredmény: 123,123 Ft

==== Fixpontosan ====


var num = 123.1234567;
console.log(num.toLocaleString());

===== Matematikai függvények ===== A JavaScriptben elérhető egy Math nevű objektum, több állandóval és függvénnyel.


document.write(Math.PI)


document.write(Math.sin(1))


let szam = Math.floor((Math.random() * 5)+1);
alert(szam);

Tízes alapú logaritmus:


function log10(val) {
  return Math.log(val) / Math.LN10;
}

Ügyeljünk arra, hogy amikor valaki azt mondja logaritmus, általában a tízes alapú logaritmusra gondol. ===== Véletlen szám ===== A Math.random() függvény 0 és 1 között ad egy véletlen számot. 1-3 közötti véletlen szám:


let vel = parseInt(Math.random()*3)+1;

===== Konverzió =====


document.write(parseFloat('1.45kg')); //Eredmény: 1.45
document.write(parseFloat('0.1e6')); //Eredmény: 100000
document.write(parseFloat('123.45')); //Eredmény: 123.45
document.write(parseFloat('0123.45')); //Eredmény: 123.45
document.write(parseFloat('0x123.45')); //Eredmény: 0
document.write(parseFloat('.45')); //Eredmény: 0.45

document.write(parseInt('1.45kg')); //Eredmény: 1
document.write(parseInt('123.45')); //Eredmény: 123
document.write(parseInt('123')); //Eredmény: 123
document.write(parseInt('0123', 10)); //Eredmény: 123
document.write(parseInt('123.45')); //Eredmény: 123
document.write(parseInt('12', 8)); //Eredmény: 10 (= 2 + 1*8)
document.write(parseInt('012')); //Eredmény: 10 (= 2 + 1*8)
document.write(parseInt('0xff')); //Eredmény: 255 (= 15 + 15*16)
document.write(parseInt('ff', 16));//Eredmény: 255 (= 15 + 15*16)
document.write(parseInt('ff', 10)); //Eredmény: NaN
document.write(parseInt('0.1e6')); //Eredmény: 0
document.write(parseInt('ZZ', 36)); //Eredmény: 1295 (= 35 + 35*36)

==== String() ====


let szam = 4;
console.log(typeof szam);
let szamStr = String(szam);
console.log(typeof szamStr);

==== Number() ====


let szamStr = '35';
console.log(typeof szamStr);
let szam = Number(szamStr);
console.log(typeof szam);

==== Boolean() ====


let szamStr = '1';
console.log(typeof szamStr);
let logikai = Boolean(szamStr);
console.log(typeof logikai);
console.log(logikai);

==== Számok logikai típussá ====


var a = 3.5;
var logikai = Boolean(a);

^ Számértékek ^^^^^^^^^^^^ | -1.7 | -0 | +0 | 1 | 1.6 | 8 | 16 | 16.8 | 123e-2 | Infinity | +Infinity | NaN | | true | false | false | true | true | true | true | true | true | true | true | false | ^ Karaktersorozat ^^^^^^^^^^^^^^^^ | "" \\ üres string | "-1.6" | "0" | "1" | "1.6" | "8" | "16" | "16.8" | "123e-2" | "010" \\ Oktális | "0x10" \\ (Hex)| "0xFF" \\ (Hex) | "-010" | "-0x10" | "xx" | | false | true | true | true | true | true | true | true | true | true | true | true | true | true | true | ^ Más érték ^^^^^^ | undefined | null | true | false | new Object() | function(){ \\ return; \\ } | | false | false | true | false | true | true | ==== A plusz unary operátor ==== A nem számot számmá konvertálja.


let szamStr = '35';
let szam = +szamStr;
console.log(typeof szam);

Az eredmény **number**.


let almak = '3';
let narancsok = '5';
console.log(+almak + +narancsok);

Eredmény: **8** ==== eval() ==== JavaScript kód végrehajtása karakterláncból biztonsági kockázat. Az eval() függvénnyel pontosan ezt lehet megtenni. Soha ne használja az eval() függvényt. Az eval() nemcsak átkonvertálja a számokat, de kiértékeli a kifejezéseket is.


console.log(eval('30+35'));


console.log(eval('30+35') === eval('65') );

Eredménye: true


console.log(eval('30+35') === eval(new String('65')));

Eredménye: false ===== Bevitel ===== ==== Beviteli mező párbeszédablakban ==== Egy név bekérése:


let nev = prompt('Neved: ');

Megadható alapértelmezett érték is:


let nev = prompt('Neved: ', 'Névtelen');

==== Megerősítés ====

===== Szelekció ===== ==== if ====


if (feltétel) {
  //törzs
}


let szam = 35;
if (szam > 9) {
    console.log('többjegyű');
}


if (feltétel) {
  //törzs
} else {
  //törzs
}


let szam = 35;
if (szam > 9) {
    console.log('többjegyű');
}else {
    csonsole.log('negatív vagy egyjegyű');
}


if (feltétel1) {
  //utasítások
} else if (feltétel2) {
  //utasítások
} else {
  //utasítások
}


let szam = 35;
if (szam > 0) {
    console.log('pozitív');
}else if(szam<0) {
    console.log('negatív');
}else {
    console.log('nulla');
}

Ha a szelekció törzsében csak 1 utasítás van a kapcsos zárójelek elhagyhatók. Szelekció {} nélkül:


let a = 35
let b = 20
if(a>b)
    document.write("Az a nagyobb")
else
    document.write("A b nagyobb")


if(1)
  console.info("Ez a szöveg megjelenik");


let a = "";
if(!a)
  console.info("Ez a szöveg is megjelenik");


let a = "szilva";
if(a)
  console.info("Ez a szöveg is megjelenik");

==== switch ==== A switch-case szerkezet, több ágú szelekció létrehozására használható. A switch zárójelében egy változót adunk meg, amit a case után vizsgálunk.


switch(n) {
    case 1 :
      utasítás1;
      break;
    case 2 :
      utasítás2;
      break;
    case 3 :
      utasítás3;
      break;
    default:
      alapértelmezett_utasítás;
}

Ha n értéke 1, akkor utasítás1 hajtódik létre. A break utasítás megszakítja további utasítások végrehajtása. Ha n értéke 2, akkor utasítás2 hajtódik létre. A break utasítás megszakítja további utasítások végrehajtása. Példa:


let szam = parseInt(prompt('Írj be egy számot 0 és 3 között'))
switch(szam) {
	case 0:
		alert('nulla');
		break;
	case 1:
		alert('egy');
		break;
	case 2:
		alert('kettő');
		break;
	case 3:
		alert('három')
		break;
	default:
		alert('Nem 0 és 3 közötti szám');
}

===== Iteráció ===== ==== for ==== A for ciklus főleg akkor használjuk ha tudjuk hányszor kell forduljon a ciklus. A ciklusban egy ciklusváltozót használunk, amelyben tároljuk, hányadik ciklusnál járunk. A ciklus fejrésze három részből áll. Az első a ciklusváltozó kezdőértéke, utána egy feltétel. A feltétel ha igaz a ciklus tovább fut. A harmadik paraméter, ahol növeljük a ciklusváltozó értékét.


for (kezdőérték; feltétel; növekmény) {
  //ciklustörzs
}


for(i=0; i<10;i++) {
    document.write("Ez az
");
}

==== while ====


while (állítás) {
  //ciklus törzse
}


let i = 0;
while (i < 5) {
  console.log('valami');
  i++;
}

==== do-while ====


do {
  //ciklustörzs
} while (állítás);


let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

==== for..in ====

===== String kezelés ===== ==== String Objektum ==== A String objektumban egy szövegdarabot tudunk tárolni és manipulálni. String objektumot a new String() segítségével készíthetek. Szintaxis:


let txt = new String("szöveg");

Vagy egyszerűen csak így:


let txt = "szöveg";


String.slice( kezdet [, vég ] )
String.substring( innen [, eddig ] )
String.substr( kezdet [, hossz ] )


let a = document.getElementById("egy");
a.innerHTML = "tinta".bold();

Egy új metódust adunk a String objektumhoz:


String.prototype.replaceAt=function(index, char) {
    return this.substring(0, index) + char + 
    this.substring(index+1);    
}

A replaceAt() metódus adott helyen kicseréli egy karaktert. Másik változat:


String.prototype.replaceAt=function(index, swap) {
  return 
    this.substr(0, index) + 
    swap + 
    this.substr(index + swap.length);
}

Harmadik megvalósítás:


String.prototype.replaceAt=function(index, char) {
    str = this.split('');
    str[index]=char;
    str = str.join('');
    return str;
}

==== charAt() ====


let szo = 'alma';
let karakter = szo.charAt(0);
console.log(karakter);

==== split() ====


let janos = 'Nagy János:Szolnok:8445000';
let szavak = janos.split(':');
console.log(szavak[0]);

==== anchor() ====


let szo = 'bekezdes';
let ujszo = szo.anchor('bekezdes1');
console.log(ujszo);

Visszatér a következővel:


bekezdes

==== bold() ====


let szo = 'alma';
let ujszo = szo.bold();
console.log(ujszo);

Félkövér:


alma

==== link() ====


let szo = 'SzitWiki';
let ujszo = szo.link('https://szit.hu');
console.log(ujszo);

A következő szöveggel tér vissza:


SzitWiki


let s = "valami";
alert(s.includes("am"));

A 4 indextől kezdve az "am" szöveget tartalmazz az adott karaktersorozat:


let s = "valami";
alert(s.includes("am", 4));

==== ECMAScript újabb verziók ==== ^ ECMAScript 6 ^^ ^ Metódus ^ Leírás ^ | endsWith() | Adott szöveg megtalálható-e egy szöveg végén. | | startsWith() | Adott szöveg megtalálható-e egy szöveg elején. | === endsWith() függvény === ECMAScript 6 * endsWith(keresettSzöveg) * endsWith(keresettSzöveg, hossz) A hossz megmondja, milyen hosszú szövegben kell keresni.


const szoveg = 'Valami ami más';
console.log(szoveg.endsWith('más'))

A példa eredménye true, mivel a szoveg változót 'más' szóra végződik.


const szoveg = 'Valami ami más';
console.log(szoveg.endsWith('ami', 10))

A példa eredménye true, mivel a szoveg változót első 10 karaktere 'ami' szóra végződik. === startsWith() függvény === ECMAScript 2015 * startsWith(keresettSzöveg)


const szoveg = 'Valami ami más';
console.log(szoveg.startsWith('Valami'))

A példa eredménye true, mivel a szoveg változó a 'Valami' szóval kezdődik. ==== String interpoláció ==== A string interpoláció, más néven változó behelyettesítés. A JavaScript nyelven a backtick karakterekkel megadott stringek teszik lehetővé az interpolációt. Lgyen például egy name nevű változó valamilyen tartalommal.


firstName="Lajos";
console.log(`Üdv: ${firstName}`);

===== Tömbök ===== ==== Létrehozás ==== Ha JavaScript nyelven tömbbe szeretnék tenni számokat, karakterláncokat, akkor szögletes zárójelbe teszem őket:


var szamok = [32, 47, 28];
var nevek = ['Béla', 'Mari', 'Dani'];

Üres tömb létrehozása, és feltöltés:


var szamok = [];
szamok.push(32);
szamok.push(47);
szamok.push(28);

A tömbök általában azonos típusú adatok tárolására használatosak. A JavaScript nyelv megengedi különböző típusok tárolását is. A számokat tartalmazó tömbben elhelyezhetek egy karakterláncot is:


var szamok = [];
szamok.push(32);
szamok.push(47);
szamok.push(28);
szamok.push('Béla');

Üres tömböt létrehozhatunk az Array() példányosításával.


let tomb = new Array();
tomb[0] = 3;
tomb[1] = 5;
tomb[2] = 8;

A tömbök indexelése 0-val kezdődik. Kezdőérték több módon is adható:


let tomb = new Array(3, 5, 8);


let tomb = [3, 5, 8];


let tomb = ["barack", "körte"];
tomb.push("szilva");
tomb.push("alma");
alert(tomb);

==== Tömbök mérete ==== A tömbök mérete a length mezővel kérdezhetők le:


let tomb = new Array(3, 8, 5);
alert(tomb.length);

Tömbelem kezelése veremként: * tomb.pop() - törli az utolsó elemet, majd visszaadja annak értékét * tomb.push(új_elem) - a tömb vége beszúr egy elemet * tomb.shift() - visszaadja az első elemet és törli is (minden elem eggyel előrébb kerül) * tomb.unshift(új_elem) - a tömb elejére beszúr egy elemet (minden elem hátrébb kerül)


let gyumolcs = new Array();
tomb.push("körte");
tomb.push("szilva");

==== Törlés ==== delete tomb[2]; Töröltük a második elemet. Az elemek indexe nem változik. tomb.splice(2, 1); A második indextől töröltünk egy elemet, az indexek, újragenerálódtak. Az első törlése: tomb.shift() Az utolsó törlése: tomb.pop() Az első elem törlése:


var szamok = [3, 8, 2, 5, 7];
szamok.splice(0, 1)
console.log(szamok); // Kimenet: [ 8, 2, 5, 7 ]

Példa a delete használatára:


var szamok = [3, 8, 2, 5, 7];
delete szamok[2]
console.log(szamok); //[ 3, 8, <1 empty item>, 5, 7 ]

==== Tartalmazás ==== === indexOf() === Az indexOf() függvény visszaadja az elem indexét. Az eredmény -1, ha nincs találat.


let szamok = [35, 29, 41, 8, 12];
console.log(szamok.indexOf(29))

=== includes() ===


let szamok = [35, 29, 41, 8, 12];
console.log(szamok.includes(29))

Második paraméterrel: Megadható a "fromIndex" paraméter, ahol megmondjuk, melyik indextől keresünk:


let szamok = [35, 29, 41, 8, 12];
console.log(szamok.includes(29, 2))

=== some() ===


let szamok = [35, 29, 41, 8, 12];
let van = szamok.some( szam => szam === 29 )
console.log(van)

Az eredmény, true vagy false. === filter() === Az eredmény egy tömb:


let szamok = [35, 29, 41, 8, 12];
let tomb = szamok.filter(szam => szam === 29);
console.log(tomb[0]);

=== find() === Az eredmény az elem vagy undefined:


let szamok = [35, 29, 41, 8, 12];
let ertek = szamok.find(szam => szam === 29);
console.log(ertek);

=== Array.prototype.contains === Saját függvény írása:


Array.prototype.contains = function(ker) {
    return this.indexOf(ker) > -1;
}
let szamok = [35, 29, 41, 8, 12];
console.log(szamok.contains(29))

==== Bejárás ==== Az index kinyerés, majd index alapján a tömb eleme:


for (index in tomb) {
	console.log(tomb[index]);
}

Tömb elemét kapjuk:


for (elem of tomb) {
	console.log(elem);
}


lista.forEach((element) => {
	console.log(element);
});


lista.forEach((element, index) => {
	console.log(element, index);
});


let lista = ['aaa', 'bbb', 'cccc'];

lista.forEach(csinal);

function csinal(content, index) {
	console.log(content, index);
}

===== Objektum =====


const janos = {
    name: "Nagy János",
    city: "Szolnok",
    salary: 2850000
};

console.log(janos.name);
console.log(janos.city);


const jarmu = {
    rendszam: "ABC-123",
    marka: "Opel",
    ar: 2400000,
    eladva: false
};
console.log(jarmu.rendszam);
console.log(jarmu.ar);



const erzsi = { name: "Tangó Erzsébet", kor: 37 };
const jozsi = { name: "Endrei József", kor: 42 };

var dolgozok = [];
dolgozok.push(erzsi);
dolgozok.push(jozsi);

for(let dolgozo of dolgozok) {
    console.log(dolgozo.name);
    console.log(dolgozo.kor);
}

===== Függvény használata ===== ==== Egyszerű, paraméterek nélküli függvény ====


function kiir() {
    alert("A függvény");
}

kiir()

A függvény nem csinál semmit, csak egy mellékhatása van, minthogy feldob egy ablakot, amiben megjelenik a "A függvény" szöveg. A függvény meghívható annak deklarálása előtt is:


kiir()
function kiir() {
    alert("A függvény");
}

==== Függvény visszatérési értékkel ==== A függvényektől kaphatunk egy értéket a hívás helyén, ha a függvény törzsében szerepel egy "return" utasítás. A következő példában egy karakterlánccal térünk vissza.


function getName() {
    return "A te neved"
}

document.write(getName())

Visszatérés számal:


function getNum() {
    return 45
}

alert(getNum())

==== Bemenő paraméterek ==== A függvényeknek a hívás helyén átadhatunk értékeket, a függvény törzsében ezeket átvehetjük változókban. A következő példában a függvény számára átadunk egy 3 és egy 5 értéket.


function osszead(szam1, szam2) {
    return szam1 + szam2
}
document.write(osszead(3,5))

A függvény törzsében a 3-t a szam1 változóban kapjuk, az 5-t a szam2 változóban. A return utasítástól jobbra egy kifejezés található: szam1 + szam2. Az utasítás hatására a kifejezés kiértékelődik, a return a számított értékkel tér vissza. ==== Variációk függvényhívásra ==== A függvény nevét külön zárójelbe tesszük.


function kiir() {
    console.log("Működik")
}
(kiir)()

A hívás nem sokban különbözik a normál kiir() hívástól. De ha ezt megtehetjük, akkor a zárójelbe akár az egész függvényt is behelyettesíthetjük.


(function kiir() {
    console.log("Működik")
})();

Az eredmény ugyanaz, csak a függvény definiálása helyén meg is hívtuk. Ebben az esetben viszont felesleges a függvény neve.


(function() {
    console.log("Működik")
})();

A zárójelben belül, kaptunk egy névtelen függvényt. ==== Függvény lambda kifejezéssel ====


var kiir = () => {
    console.log("működik"); 
}

kiir();

Névtelen függvény, azonnal meghívva.


(() => {
    console.log("működik"); 
})();

==== Névtelen függvény ==== Függvényeket létrehozhatunk névtelenül is:


// ez így nem működik
function(){
  console.log("működik"); 
}

Ezt magában viszont nem szokták használni. Vagy beépítjük egy másik függvény paraméterébe, vagy meghívjuk így:


(function() {
  console.log("működik"); 
})();

Ha van paramétere:


(function(uzenet){
  console.log(uzenet); 
})("Működik");

Függvény paraméterként:


function kiir(nev, uzenet) {
  console.log(uzenet + " " + (nev)());
}

kiir(function() {
  let nev = "Nagy Béla";
  return nev;
}, "Üdv");

A fenti példában a kiir függvény első paraméterként egy függvényt vár. Esetleg átadhatjuk egy mutatónak:


let f = function() {
  console.log("Működik"); 
}

f();

==== A this kulcsszó ==== A nyílfüggvényekben a this kulcsszó nincs kötve. A function kulcsszóval létrehozott függvényekben a this arra az elemre mutat, amin hívjuk a függvényt.


const egyElem = document.querySelector('#egy');
egyElem.addEventListener('click', function(){
    console.log(this.value);
});

Lambda használata esetén nem működik a this kulcsszó. ===== Hatókör ===== ==== Blokkok ==== Nem használható a szam:


{
    let szam = 35;    
}

console.log(szam);

Használható a szam:


{
    var szam = 35;    
}

console.log(szam);

==== Globális objektum ==== A let nem deklarál globális változót.


var vmi = 'vmi';
let mas = 'más';

console.log(window.vmi);  //vmi  
console.log(window.mas);  //undefined

==== Újradeklarálás ==== Újradeklarálható:


var vmi = 'vmi';
var vmi = 'mas';

Az újradeklarálás hibát eredményez.


let mas = 'vmi';
let mas = 'más';

==== Lásd még ==== * https://www.geeksforgeeks.org/difference-between-var-and-let-in-javascript/ (2021) * https://www.w3schools.com/js/js_let.asp (2021) ===== Függvények gyűjteménye ===== ==== console.log() ==== A konzolra ír naplóbejegyzést. ==== document.write() ====


document.write("Működik");

==== setTimeout() ==== Végrehajtás egyszer. Öt másodperc múlva:


setTimeout(function() {
  console.log("Működik"); 
}, 5000);

==== setInterval() ==== Végrehajtás periodikusan. Öt másodpercenként:


setInterval(function() {
  console.log("Működik"); 
}, 5000);

Általánosan így írhatjuk le a szintaxist: setInterval(callback, kesleltetes_millisecben) ==== noscript ==== Lehetőség van a HTML oldalba egy noscript nevű elemet ágyazni, amelynek tartalma, akkor jelenik meg, ha nem támogatja a böngésző a JavaScripteket, vagy ki van kapcsolva. ===== Modern mód ===== A böngészők megengedik számunka az elavult régi programkódok írását. A modern módot bekapcsolhatjuk a következő módon:


'use strict';

Ha szeretnénk, hogy a böngésző fejlesztőeszköze hibát jelezzen, ha nem modern módban programozunk, tegyük a fenti karaktersorozatot a Javascript kódunk elejére. Mindig az első utasítás legyen. Ha böngésző konzolon szeretnénk ezt érvényesíteni, akkor használjunk Shift+Enter billentyűkombinációt az egyszerű Enter helyett.


'use strict';

Ha függvényünk elejére írjuk, akkor csak a függvényen belül lesz érvényes. Ha szeretnénk az állományunk egy részében érvényesíteni, akkor tegyük burokba:


(function() {
  'use strict';

  // sajátkód
})()

==== A use strict helye ==== A use strict jelölésnek mindig az első utasításnak kell lennie. Az alábbi utasítások hiba nélkül futnak:


console.log('valami')

'use strict';

let a = 35;
console.log(a);

==== Példák ==== Az első JavaScript kódban nem volt kötelező deklarálni a változót használat előtt. Érvényes a következő kód:


a = 35;
console.log(a);

Most futtassuk a 'use strict' jelölővel:


'use strict';
 
a = 35;
console.log(a);

Hogyan lehetne javítani?


'use strict';
var a = 35;
console.log(a);

==== JavaScript modulok ==== 2015-ben bevezették a JavaScript modulokat. A modul alapértelmezetten strict módban fut.


function valami() {
    // ez a modul alapértelmezetten strict módban fut
}
export default valami;