Tartalomjegyzék

A JavaScript nyelv

A JavaScript nyelv

Szerző: Sallai András
Copyright © 2011, Sallai András
Licenc: 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 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

index.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
alert("Helló Világ");
</script>
 
</head>
<body>
 
</body>
</html>

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.

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SWBin</title>
</head>
<body>
  <button onclick="alert('Helló Világ');">Indul</button>
</body>
</html>

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.

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SWBin</title>
</head>
<body>
  <button onclick="csinald()">Indul</button>
  <script>
    function csinald() {
       alert('Helló Világ');
    }
  </script>
</body>
</html>

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.

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SWBin</title>
<script src="script.js"></script>
</head>
<body>
  <button onclick="csinald()">Indul</button>
</body>
</html>

script.js

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.

<script src="myscripts.js" charset="UTF-8"></script>

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.

<!DOCTPYE html>
<html>
<head>
<meta charset="utf-8">
<title>SWBin</title>
<script src="script.js" defer></script>
</head>
<body>
  <button onclick="csinald()">Indul</button>
</body>
</html>

Gyakorlat 002

A JavaScript nyelv case-sensitive vagy nem?
A JavaScript típusos nyelv, vagy nem?
Melyik igaz állítás?
1. A JavaScript beilleszthető a HTML forráskódjába is.
2. A JavaScript kód nem tehető külön állományba.
3. Egy tagen belül írt JavaScript kódot, inline JavaScriptnek hívunk.
4. A link elemek közzé kell illeszteni az internal módon megvalósított JavaScriptet.
5. 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:

<button onclick="alert('Helló Világ');">Indul</button>

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.

app.js

/*********************************
 
  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:
1. Egy utasítással kiíratja a konzolra a teljes nevét.
2. Egy másik utasítással kiírtja az aktuális dátumot.
3. A forráskód elejére írja többsoros megjegyzésbe a teljes nevét és az aktuális dátumot.
4. 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.

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SWBin</title>
</head>
<body>
  <button onclick="csinald()">Indul</button>
 
  <script>
    function csinald(){
     	console.log("Helló"); 
    }
  </script>
 
</body>
</html>

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

A Math objektum mezői:

Tulajdonság	Leírás
E	Visszatér az Euler féle számállandóval (kb. 2.718)
LN2	Visszatér 2 természetes logaritmusával (kb. 0.693)
LN10	Visszatér 10 természetes logaritmusával (kb. 2.302
LOG2E	Visszatér E kettes alapú logaritmusával (kb. 1.442
LOG10E	Visszatér E tízes alapú logratimusával (kb. 0.434
PI	Visszatér PI érétkével (kb. 3.14)
SQRT1_2	Vissztér 1/2 négyzetgyökével (kb. 0.707
SQRT2	Visszatér kettő négyzetgyökével (kb. 1.414)

A Math objektum metódusai:

Metódus	Leírás
abs(x)	Visszatér x abszolútértékével
acos(x)	Visszatér x arkusz koszinuszával (x-et radiánban várja)
asin(x)	Visszatér x arkusz szinuszával (x-et radiánban várja)
atan(x)	Visszatér x arksuz tangensével; a szám -PI/2 – és PI/2 közötti szám radiánban
atan2(y,x)	Visszatér az argumentum hányadosának arkusz tangensével
ceil(x)	Visszatér x felkerekített értékével
cos(x)	Visszatér x koszinuszával (x-et radiánban várja)
exp(x)	Vissztér x exponenciális alakjával
floor(x)	Visszatér x lefelekerekített egész alakjával
log(x)	Visszatér x E alapú természetese logaritmussal
max(a,b,c,…,n)	Visszatér a legnagyobb értékkel
min(a,b,c,…,n)	Visszatér a legkisebb értékkel
pow(x,y)	Visszatér x y hatványával
random()	Visszatér egy 0 és 1 közötti számmal
round(x)	Visszatér x legközelebbi egészre kerekített értékével
sin(x)	Visszatér x szinuszával (x-et radiánban várja)
sqrt(x)	Visszatér x négyzetgyökével
tan(x)	Visszatér x szög tangensével

1 és 5 közötti véletlen szám:

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

<div id="megerosites"></div>
<button onclick="megerosit()">Megerősítés</button>
 
<script>
function megerosit() {
    var res = confirm('Megerősíted?');
    if(res == true)
        document.getElementById("megerosites").innerHTML = "Megerősítve";
    else 
        document.getElementById("megerosites").innerHTML = "Elvetve";    
}
</script>

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

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

<div id="e"></div>
 
<script>
let t = [3, 5, 6, 4, 8];
 
let e = document.getElementById("e");
for(i in t){    
    e.innerHTML = e.innerHTML + " " + t[i];
}
</script>

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 objektumok tulajdonságai:

Tulajdonság	Leírás
constructor	Hivatkozás egy konstruktorra.
length	Egy string hosszát tartalmazza.
prototype	Lehetővé teszi tulajdonság vagy metódus hozzáadását egy objektumhoz.

String objektumok metódusai

Metódus	Leírás
charAt()	Egy karakter az adott pozícióról
charCodeAt()	A karakter unicode-ja adott pozícióról
concat()	Kettő vagy több string összefűzése
indexOf()	Az adott paraméter első előfordulását adja vissza
lastIndexOf()	Az adott paraméter utolsó előfordulását adja vissza
match()	Szöveg illeszkedésének vizsgálata
replace()	Szöveg helyettesítése. Amit helyettesítünk regexel adjuk meg
search()	A szabályos kifejezés által jelölt szöveg első előfordulását adja vissza.
slice()	Veszi egy karaktersorozat részét, majd visszatér egy karaktersorozattal.
split()	Stringet alrészekre bont, és tömbben helyezi el.
substr()	Elavult. Visszaadja egy karaktersorozat részét, adott pozíciótól, adott számú karaktert.
substring()	Visszaadja egy karaktersorozat részét, adott két pozíció között.
toLowerCase()	Minden betűt kisbetűssé alakít
toUpperCase()	Minden betűt nagybetűssé alakít
valueOf()	A String objektum primitív értékével tér vissza

Mi a különbség a slice(), substring és a substr() között?

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

A slice() esetén a kezdet nem lehet nagyobb mint a vég.
A substring() lehet a második paraméter kisebb.
A substr() esetén pedig a második paraméter a hossz.

String HTML burkoló metódusok

A HTML burkoló metódusok visszatérnek a HTML elemmel

Metódus	Leírás
anchor()	Egy horgony létrehozása
big()	A szöveget big típusú fontként jeleníti meg
blink()	Vilogtatja a stringet
bold()	Félkövér szöveg
fixed()	Fix méretű fontok megjelenítése
fontcolor()	A megadott színnel jeleníti meg a szöveget
fontsize()	A font mérete
italics()	Dőlt típus
link()	Hiperlinket csinál a szövegből
small()	A szöveg small típusú
strike()	Áthúzott szöveg
sub()	Alsóindexben a szöveg
sup()	Felsőindexben a szöveg

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:

<a name="bekezdes1">bekezdes</a>

bold()

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

Félkövér:

<b>alma</b>

link()

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

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

<a href="https://szit.hu">SzitWiki</a>

includes() függvény

Tartalmazás az includes() függvénnyel:

Böngésző támogatottság
Böngésző	Chrome	Firefox	Safari	Opera	Edge
Verzió:	41	40	9	28	12.0

Az am szót tartalmazza az adott karaktersorozat?

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.

<input id="egy">

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

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';<Shift+Enter>

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;