[[oktatas:web:javascript|< JavaScript]]

====== JavaScript haladó ======

  * **Szerző:** Sallai András
  * Copyright (c) 2021, Sallai András
  * Szerkesztve: 2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Írás a konzolra =====

A böngésző-konzolra több módon is írhatunk a JavaScript nyelvben.

A következő függvények használhatók:

<code javascript>
console.log('log');
console.info('info');
console.debug('debug');
console.warn('warn');
console.error('error');
</code>

A különféle típusok, ugyanúgy kiírják az adott üzenetet, de az üzenet elé tehetnek egy ikont,
vagy színezhetik a kimenetet. 

A következő ábrán, erre láthatunk példát:

{{:oktatas:web:javascript:javascrijpt_console.png|}}


==== CSS konzolon ====

A %c segítségével stílus határozható meg a konzol számára.

<code javascript>
console.log('egy%ckettő', 'color: blue; font-size: x-large');
</code>

A stílusbeállítás mindig a %c utáni részre vonatkozik.


==== Behelyettesítés ====

<code javascript>
console.log('A %s dolgozó fizetése %f\n', "Nagy János", 25.123);
</code>

  * %s - szöveg
  * %d - egész
  * %f - valós

==== Törlés ====

Konzol törlése:
<code javascript>
console.clear()
</code>

==== dir() ====

Objektum JSON formátumban:

<code javascript>
const janos = {
    "name":"Nagy János",
    "fizetes":8450000
    };
console.dir(janos);
</code>

{{:oktatas:web:javascript:object_json_reprezentacio.png|}}

==== Táblázat ====

<code javascript>
const dolgozok = [{
        "name":"Nagy János",
        "fizetes":8450000
        },{
        "name":"Pere Mária",
        "fizetes":6450000
        },{
        "name":"Csontos Ferenc",
        "fizetes":7455000
        }    
    ];
console.table(dolgozok);
</code>

{{:oktatas:web:javascript:tablazat.png|}}
===== Nyílfüggvények =====


  * Nincs kapcsolata this-hez vagy a super-hez és nem használható metódusként. 
  * Nincsenek argumentumai, de new.target kulcsszavak sem.
  * Nem alkalmas call, apply és bind metódusoknak, amelyek egy hatókörön (scope) alapszanak.
  * Nem használható konstruktorként.
  * Nem használhat yield-t, a body-in belül.

==== Példa ====

<code javascript>
let szamok = [
    45,
    67,
    25,
    11,
    85
];

console.log(szamok.map(szam => szam<5));
</code>

Eredmény:
  * [false, false, false, false, false]


<code javascript>
let gyumolcsok = [
    'alma',
    'körte',
    'barack',
    'szilva',
    'málna'
];

console.log(gyumolcsok.map(gyumolcs => gyumolcs.length));
</code>

Eredmény:
  * [4, 5, 6, 6, 5]

==== A normál függvény és a nyílfüggvény ====

<code javascript>
let dupla1 = function (szam) {
    return szam * 2;
}

let dupla2 = (szam) => {
    return  szam * 2;
}

console.log(dupla1(3));
console.log(dupla2(4));
</code>

===== Template string tag-gel =====

ES6-tól.

<code javascript>
let szoveg = sajat_tag`ąlma`;

function sajat_tag(s) {
    return 'szilva';
}

console.log(szoveg);
</code>


===== reduce() =====

<code javascript>
const numbers = [3, 4, 2];
const reducer = (prev, curr) => prev + curr; 
console.log(numbers.reduce(reducer));
</code>

Kimenet:
  9


Összeadja a tömb elemeit.

  * Több információ:
    * [[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce|developer.mozilla.org]]


===== map() =====

Minden elemmel teszünk valamit és az eredményt egy újabb tömbben kapjuk.

<code javascript>
const szamok = [3, 8, 4]
const dupla_szamok = szamok.map(item => item * 2);
console.log(dupla_szamok);
</code>

A kimenet:
<code>
[ 6, 16, 8 ]
</code>

Hivatkozás:
  * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map (2021)
===== filter() =====

Csak bizonyos elemeket szeretnénk, egy feltétel alapján:

<code javascript>
const szamok = [3, 8, 4, 9]
const otnelnagyobb_szamok = szamok.filter(item => item > 5 );
console.log(otnelnagyobb_szamok);
</code>

Kimenet:
  [ 8, 9 ]

===== A Map típus =====

A Map() olyan mint az Object, kivéve, hogy a kulcsok bármilyen típusúak lehetnek.

<code javascript>
var map1 = new Map();
map1.set('gyumolcs', 'alma');
map1.set('zoldseg', 'paprika');
</code>

<code javascript>
var map2 = new Map();
map2.set('3', 'egy');
map2.set(4, 'kettő');
map2.set(true', 'három');
</code>

Függvények:

  * map.set(kulcs, érték) - érték tárolása kulcs alapján
  * map.get(kulcs) - visszatér kulcshoz tartozó értékkel, ha nem létezik undefined
  * map.has(kulcs) - true ha van ilyen kulcs, ellenben false
  * map.delete(kulcs) - törlés kulcs alapján
  * map.clear() - minden elem törlése
  * map.size - az elemek száma

===== Kollekciók bejárása =====

<code javascript>
tomb.forEach(elem => {
    console.log(elem);
});
</code>

Az első elem nélkül:
<code javascript>
tomb.forEach((elem, index) => {
    if(index>0) {
        console.log(elem);    
    }
});
</code>

Az első elem nélkül újra:
<code javascript>
tomb.slice(1).forEach((elem) => {
    console.log(elem);    
});
</code>

<note important>
A tömbben csak az első elem marad. Az 1 indextől minden törlődik.
</note>

===== Generátor függvények =====

<code javascript>
function* square(start, end) {
  for (let i = start; i <= end; i++) {
    yield i * 2;
  }
}

const generator = square(1, 5);

console.log(generator.next().value); // 2
console.log(generator.next().value); // 4
console.log(generator.next().value); // 6
console.log(generator.next().value); // 8
console.log(generator.next().value); // 10
console.log(generator.next().done); // true
</code>

===== isNaN() függvény =====

Az isNaN() függvény megvizsgálja, hogy a bemenet szám vagy nem szám:

<code javascript>
if(!isNaN(szam)) {
   //tevékenység
}
</code>

===== Forrás =====
  * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions (2021)
  * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield (2021)
  * https://medium.com/javascript-in-plain-english/mastering-js-console-log-like-a-pro-1c634e6393f9 (2021)
  * https://javascript.info/map-set (2022)