Gyorstalpaló programozás egy laikustól laikusoknak!: 2. rész JavaScirpt

JavaScript programozás alapjai:

A JavaScript egy szélesebb körű kifejtése található itt. Nem kell a teljes oldalt elsajátítani ahhoz, hogy továbblépjél a következő részre! Addig olvasd, illetve menj el benne, amíg úgy érzed elsajátítottad az alapjait.

Nyiss egy új lapot a böngésződbe, és írd be a címsávba, ahol a www. kezdetű weboldal címek szoktak lenni, hogy:
about:blank
Evvel egy teljesen üres lapot fogsz megnyitni, és egy nagy fehérséget fogsz látni. Most kattints rá a közepe táján jobb egérgombbal, majd a vizsgálatra katt! A feljövő menüben a Console gombra kattints. Itt fogunk programozni az első percekben. Az a jó a Javascriptben, hogy nem kell hozzá semmit letölteni, minden böngészőbe bele van építve egy olyan konzol, amire szükségünk van. Ezen tudjuk futtatni, és tesztelni a programrészeket, és ha elütünk egy kódot, és evvel hibát csinálunk, akkor meg tudja mutatni, hogy hol követtük el a baklövést.
A chrome böngésző console része, már kódokkal:
https://i.stack.imgur.com/vEoEq.png

Na kezdjük!

Adat fajták:
a Javascriptben négy fajta adat van:
1. Számok például: 5;
2. string (szöveg), pl: "szöveg"
3. Booleans, azaz logikai értékek: igaz angolul True, illetve hamis, angolul False;
4. Ritkán az adat lehet a határozatlan, vagy nulla is.

Változó:
Képzeld el, hogy költözködsz, van egy csomó mindenféle holmid (ruhák, könyvek, stb.), és dobozolsz!

A változó egy doboz (egy memória hely) címkéje, amibe az adatot rakjuk. Másképpen az adatot tartalmazó memória azonosítója, ami tulajdonképpen maga az adat azonosítója.
Gondolhatunk rá elvontan úgy is, hogy "dobozok" nevei, címkéi, amikbe az adatokat (holmijainkat) rakjuk.
A változónak egyenlőségjellel adunk értéket, vagyis adatot.
Gondolhatunk rá elvontan úgy is, hogy a dobozokba egyenlőség jellel rakjuk bele az adatokat.

Például:
var doboz = 12;
doboz;
12

Mi ez? Mit csináltam?

Szabályok:
A var előtag jelöli, hogy változót gépelünk be. Ugyanakkor ezt el is lehet hagyni. Ha használod, akkor a változó csak az adott kódrészlet fogja ismerni, ha nem, akkor az egész program.
Tehát a példában csináltam egy címet (var doboz) amihez hozzáadtam egy számadatot vagy másképpen egy értéket, az egyenlőségjellel ( = 12 ), majd lezártam a sort evvel (;)
Ez ; minden sor végén kell a javascriptben. Egyébként ez az eredmény lehívását is jelenti.
Most gépeld be:

var doboz = 12;

Majd nyomd meg az Enter gombot (a legkövérebb gomb a klaviatúrán)! Ezt fogja kiírni:
undefined

Mert evvel ; és az enterrel lehívtuk az eredményt, de még nincs eredmény, csak bevittünk egy adatot, és annak a címét a gépbe, ezért azt írta ki, hogy határozatlan, vagyis undefined
Most gépeld be alá, és nyomd meg az entert!

doboz;

Most ki fogja írni, hogy 12. Azért, mert előzőleg bevittük az adatot, és a címet, most meg lekérdeztük evvel ; és az enterel, hogy milyen adat van a doboz című dobozban. Hát, a 12 van.

A változók nevében nem lehet szóköz, általában ezt úgy oldják meg ha hosszú változó nevet akarnak adni,,
hogy az új szó első betűjét nagybetűvel írják. Vesszős betűket se
használjunk (bár lehet, hogy lehet, úgy tűnik, hogy működik...)!
Írd be:

var nagyDoboz = 20;

Most adjuk össze a két dobozt:

doboz + nagyDoboz;

Ki fogja írni, hogy 32, mert összeadta a két doboz tartalmát! Hú ez már valami műveletet csinált itt!

"A nemzetáruló arról ismerszik meg, hogy azt magyarázza, jobb, ha az erősebbel nem húzunk ujjat, inkább működjünk együtt vele, és szolgáltassuk ki magunkat neki. Mindig azon van, hogy lebeszéljen a ellenállásról, és hamis baromságokat ígér cserébe (Nyithatsz majd cukrászdát Bécsben, bérunió, stb.).
A hazafi ellenben mindenféle elnyomó erőnek ellenáll, mert rájött, hogy csak így lehet esélye az életben maradásra! "

Nem túl fontos szerintem, de hátha egyszer majd kell. A változó számadatát lehet egyel növelni, és csökkenteni, így is:

doboz = 0;
++doboz;

1 lesz az eredmény

++doboz;

2 lesz az eredmény

--doboz;

1 lesz az eredmény

És még valami! Ha egyszerre több sort akarsz írni, mégpedig úgy, hogy nem akarod minden sor után az eredményt az enterrel lehívni, akkor az enterrel együtt, nyomd meg az alatta lévő gombot is, amin a nyíl felfele néz. Ekkor új sorba írhatod a kódot, de így az enter nem fogja az eredményt lehívni! Például írd be ezt úgy, hogy csak a harmadik sorba hívd le az eredményt:

var doboz = 5;
++doboz;
doboz;

6 lesz az eredmény

egynél többet is hozzáadhatunk, és kivonhatunk a += és -= vel.
pél:

var doboz = 10;
doboz += 5;
doboz;

eredmény 15 lesz

doboz -= 5;
doboz;

eredmény 10 lesz

var doboz = 100;
doboz *= 2;
doboz;

200 lesz. A szorzás, és az osztás is működik így! De ne legyen unalmas, most cseréljük le a dobozt táskára
pl:

var táska = 100;
táska *= 2;
táska;

200 lesz az eredmény, ráadásul tényleg úgy néz ki, hogy ékezetes betűvel is működik. Szerintem azért kerüljük, ki tudja...

Számok:
Akkor most folytassuk a számadatokkal. Mint ahogy látod, a böngésződbe benne van a Javascript, a javascriptbe meg pl. a számológép, és egyéb hasznos modulok. Próbáljuk ki.
Írd be, majd enter:

5 + 5;

Az eredmény tíz lesz, és tudja ezt mind a négy alapműveletre pl:

15 - 5;
10

15 / 5;
3

15 * 5;
75

A javasript kód beillesztése a html-be!

Most csináljunk egy kis összeadó gépet! Ezt a jegyzettömbbel fogjuk megcsinálni, ahogy az első részbe tanultuk. Nyisd meg a Jegyzettömböt, majd másold bele az alábbi kódot:

<html>
<head>
<title>Összeadó</title>
</head>
<body>

<form name="forma">
<input name="egy"><br>
<input name="ketto"><br>
<input type="button" value=" + " onClick="plusz()">
Eredmény:
<input name="eredmeny">
</form>

<script>
function plusz() {
document.forma.eredmeny.value = document.forma.egy.value *1 + document.forma.ketto.value * 1;
}
</script>

</body>
</html>

Most mentsd el az első részben tanultak szerint, de azért itt is leírom!
Most a Jegyzettömbbe kattints a File menüre, majd a Mentés másképpen, és mentsd el ezekkel a beállításokkal:
File névnek ezt írd: osszeado.html
File típusa: minden file
File kódolás: Unicode
A letöltés helye oldalt legyen a dokumentumok, vagy az asztal, mindegy csak találd majd meg. Majd mentés gomb. Itt jegyzem meg, a programozás általában nem szereti az ékezetes betűket. Fájlnévbe se használd (osszeado)...

Most keresd meg, ezt a fájlt, és kattints rá! A böngésződ fogja megnyitni, mint egy honlapot, mert az is, és egy összeadó gépet fogsz látni. Beírod a számokat a két beviteli mezőbe, majd az eredmény gombra kattintva kiírja az eredményt.

Mit csináltunk?
Írtunk egy html vázat, az első részben tanultak alapján. Tettünk bele három beviteli mező html kódot, amelyekből az egyik nem bevitelre fog szolgálni, hanem az eredmény kiírására.

és egy nyomógomb html kódot is raktunk bele:

Ha megnézed a fenti kódokat, akkor láthatod, hogy e "" között egy-egy azonosító szó van. Ez bármilyen szó lehet.
Aztán azt is láthatod, hogy a
<script>
és a
</script>
kódok közé kell írni JavaScript kódot. A JavaScript kódot tehát így ezek között kell beilleszteni a html fájlba.
És azt is láthatod, hogy a beviteli mezőket meg a
<form name="azonosito">
és a
</form>
kód közé kell tenni, és hogy ebben is van egy azonosító.
A JavaScript kódról pedig majd később tanulunk bővebben, bevallom kicsit előre szaladtunk, hogy ne legyen unalmas. Ez a funkció talán a legnehezebb dolog a JavaScriptben, tehát nem baj, ha most nem lesz elsőre tiszta. Az a lényeg, hogy ezeknek a gomboknak funkciót adtunk, hogy csináljanak valamit, működjenek. Most nem írtam át az azonosító szavakat, hanem pirossal jelöltem meg. Így néz ki a Javascript kód:

function plusz() {
document.forma.eredmeny.value = document.forma.egy.value *1 +document.forma.ketto.value * 1;
}

Az első szóval megadjuk, hogy most funkciót adunk (a beviteli mezőknek): function
majd a funkció neve következik. Bármire átkeresztelheted, de ugyanez kerül a gomb kódjába, tehát hogy a gombra funkciót adjon, a gomb kódjában a funkció neve kell hogy legyen. Amikor a gombot lenyomod, akkor ezt a funkciót, azaz programod indítod el hozzá. A funkció névhez, még hozzá tartozik ez (), most evvel nem foglalkozunk bővebben, hogy miért. Aztán kapcsos zárójelbe kezdődik a tényleges feladat, amit végrehajt a program, ha lenyomod a gombot. A value az angolul értéket jelent. Ez a kód tulajdonképpen az eredmény beviteli mezőt jelenti:
document.forma.eredmeny.value
A document magát a fájlt jelenti, a forma azonosító szó, ás az eredmény azonosító szó, azonossá teszi a form kód közötti eredmeny nevű beviteli mezővel. Pontosabban ebben a mezőben az eredmény fog megjelenni. Ez pedig egyenlő, a másik két beviteli mező értékének az összegével.

Ennyiből áll a számológépünk.
Itt megtalálod a fontosabb beviteli mezők kódjait:
http://www2.akg.hu/info/11-12/javascript.html

Nem csak beviteli mezőbe írhatjuk ki az eredményt, hanem a html-re közvetlen szövegként is. Annak ez a kódja:
innerHTML
és így kell használni:
<html>
<head>
<title>Összeadó</title>
</head>
<body>

<form name="forma">
<input name="egy"><br>
<input name="ketto"><br>
<input type="button" value=" + " onClick="plusz()">
</form>

<script>
function plusz() {
eredmeny = document.forma.egy.value *1 + document.forma.ketto.value * 1;
{document.forma.innerHTML = eredmeny;
}
}
</script>

</body>
</html>

Vagyis most nem azt adtuk utasításnak, hogy a formba az eredmény beviteli mezőbe írja be az eredményt, hanem a formba, a HTML-be.
Ha pedig nem akarod hogy eltűnjön az eredménnyel a form többi része, akkor egy html-be egy másik form-ot csinálsz, és jelölsz meg kiírandó területnek. Pl:

<html>
<head>
<title>Összeadó</title>
</head>
<body>

<form name="forma">
<input name="egy"><br>
<input name="ketto"><br>
<input type="button" value=" + " onClick="plusz()">
</form>

<script>
function plusz() {
eredmeny = document.forma.egy.value *1 + document.forma.ketto.value * 1;
{document.eredmeny.innerHTML = eredmeny;
}
}
</script>
<form name="eredmeny"></form>
</body>
</html>

Ezen a weboldalon egyébként az összes JavaScript kódot megtalálod:
https://www.w3schools.com/js/
Illetve itt is működik a javaScript konzol. A baloldalon át tudod írni a kódot, a run gombra kattintva pedig megnézheted, hogy a jobb oldalon egy html fájlban hogy működik:
https://www.w3schools.com/js/tryit.asp?filename=tryjs_myfirst

Most folytassuk a számokkal, illetve a
Számtani műveletek végrehajtásának a sorrendjével
Térjünk vissza a böngészőnk konzoljára (console)!
Mi lesz az eredménye ennek?
2*4+5*3-1;
A matek szabályok szerint elsőnek a szorzást, osztást kell elvégezni, majd balról jobbra kell elvégezni sorrendben a műveleteket. A matek szerint tehát 22 az eredmény, és a konzol is ezt fogja kiírni.
Használhatsz zárójeleket is, akkor először a zárójelben lévő dolgokat fogja elvégezni. Sőt csupa zárójelet is használhatsz, akkor a belső zárójelet fogja előbb elvégezni, majd úgy halad a külsők felé. Pl.
2+(((3+5)*4)*2);
Ennek az eredménye 66 lesz.

Csináljunk egy új számtógép programot? Ha fenti kódból kitörlöd a ketto nevű beviteli mezőt, és kicseréled a javascript kódot erre:
function plusz() {
document.forma.eredmeny.value = (document.forma.egy.value *1 )*
(document.forma.egy.value * 1) * 3.14;
}

akkor most, ha egy olyan programot kapunk, amely kiszámolja egy kör területét cm2-ben, ha a beviteli mezőbe beírjuk cm.ben a sugarát, hiszen a kör területének a képlete így néz ki: T = (r*r)* 3.14
Hűű. Ez má számítóógép!

Ok. Most már tudsz olyan programokat írni, amik kiszámítanak valamit. Egy volt az első cél!

Most továbblépünk a felé, hogyan lehet a számítógéppel különféle dolgokat vezérelni.
Ha ez érdekel, akkor lépjél a harmadik oldalra.
Ha pedig szélesíteni szeretnéd a Javascript tudásodat, akkor folytasd ezeken az linkeken.
Ahogy időm engedi leadom az egész tananyagot, legalábbis az alapokat.
Ha még nem értem a végére, és te már meg akarnál előzni, akkor javaslom, hogy töltsd le a
JavaScript for kids! Című könyvet. Így beírva, esetleg melléírva, hogy pdf. meg fogod találni a neten.

A JavaSript alapjainak a folytatása:

Szöveg (string)

A második adat típusunk a szám után, a szöveg. Címkézzük meg a változóval!

var címke = "alma";

Mint ahogy látjátok, a szöveg adat abban különbözik a számtól, hogy ilyen "" közé rakjuk.
Ezeket össze lehet adni?

var címke2 = "piros";
címke2 + címke;

Az eredmény a konzolon. "pirosalma" lesz.
Ha szóközt akarsz, akkor az adatba írd bele, tehát:

var címke = "alma ";
címke2 + címke;

Az eredmény a konzolon most "piros alma" lesz.
Azonban a szorzást, osztást, kivonásra azt fogja kiírni, hogy NaN, vagyis meghatározhatatlan, mert egy számból lehet kivonni egy másikat, de az meghatározhatatlan, ha az almából akarod kivonni a pirosat.

Ha pedig szám adatot írunk be szövegként, vagyis "" között, akkor avval a számmal sem lehet már szorozni, mert az szöveggé válik!

"5"+"5";
A konzol eredménye 55 lesz, mert szövegként adja össze őket.

Szöveggel egyéb szövegműveletek:
.length megtudhatod egy szöveg hány karakterből áll:

"Milyen hosszú vagyok?".length;

Az eredmény 21 lesz.

var java = "java"
var script = "script"
var javascript = java + script;
javascript.length;

Itt az eredmény pedig 10 lesz.

Megszerezni egy betűt a szövegből, evvel []

var szöveg = "javascript";
szöveg[1];

Az eredmény az lesz, hogy a , mert az van az első helyen a Javascript szövegben. A j a nulladik helyen van!

szöveg[0];

eredmény: j

Titkos kód készítése:
var kódszó1 = "szőlő";
var kódszó2 = "piros"
var kódszó3 = "alma"
kódszó1[0] + kódszó1[1] + kódszó2[1]+ kódszó3[3];

A konzol ezt fogja kiírni "szia"

Kivágás egy szövegből evvel .slice():
var hosszúSzöveg = "Ez egy hosszú szöveg!";
hosszúSzöveg.slice(3, 13);

A .slice(3, 13) azt jelenti, hogy a harmadik karakterből a tizenharmadik karakterig tartó részt vágja ki a szövegből, így a elhívás eredménye "egy hosszú" lesz.
Ha csak egy szám van a zárójelbe, akkor azt jelenti, hogy onnan vágja ki a szöveget.
hosszúSzöveg.slice(3);
Eredménye "egy hosszú szöveg!"

Csináljunk a kisbetűs szövegből nagyot, és fordítva, evvel .toUpperCase() és evvel .toLowerCase()!

"Ez egy kisbetűs szöveg".toUpperCase();

Hozzáírva a szöveghez a kódot, amikor lehívjuk, már nagybetűs szöveg lett belőle.
Ennek a fordítottja:

"EZ EGY NAGYBETŰS SZÖVEG".toLowerCase();
Ez most minden betűből kisbetűt csinált.

Hogyan tudod normalizálni az összevissza szöveget?

var összevissza = "Ez EgY ÖsszeViSszA sZÖveg!";
var kisbetűs = összevissza.toLowerCase();
var elsőBetű = összevissza[0];
var szövegrész = kisbetűs.slice(1);
var normális Szöveg = elsőBetű + szövegrész;
normálisSzöveg;

Az eredmény az lesz, hogy a konzol hibát ír ki pirossal!
Amikor valamit elgépelünk, és hibát ír ki a konzol!
Valamiféle syntaxError-t.
Valamit elgépeltem! Most nyomjunk rá (Chrome böngészőben nézem) a hibaüzenettel egy sorban lévő, a sor végén, a jobb sarokban lévő MV és valamilyen számokat tartalmazó linkre!
Most kiírja a kódomat, és az ablak alján azt, hogy hányadik sorban, és hányadik oszlopban van a hiba!
Igen, valóban, mert az érték nem lehet két szó:
A var normális Szöveg helyett erre kell javítani: var normálisSzöveg
Így van a jó kód:

var összevissza = "Ez EgY ÖsszeViSszA sZÖveg!";
var kisbetűs = összevissza.toLowerCase();
var elsőBetű = összevissza[0];
var szövegrész = kisbetűs.slice(1);
var normálisSzöveg = elsőBetű + szövegrész;
normálisSzöveg;

Az eredmény pedig az lesz, hogy az összevissza szövegből normális lesz!

BOOLEANS avagy a logikai értékek.

True (igaz) vagy false (hamis)lehet.
Ezekhez logikai operátorokat is használunk. A matek operátorok a ezek
+
-
/
*
voltak
most pedig a
&& (és)
|| vagy)
fogunk foglalkozni.

Az és (&&) használata:

csigaház = true;
csigaláb = false;
csigaház && csigaláb;

Az eredmény fales lesz!

A vagy (||) használata:

férfivagyok = true;
nővagyok = false;
férfivagyok || nővagyok;

Az eredmény true lesz

Tehát ha mindkettő hamis, akkor lesz az eredmény hamis.
Ha kutya lennék, akkor lenne hamis...

!Not használata
Ezt ! nemnek használjuk.Vagyis tagadásnak Pl:

hétvégeVan = true;
maZuhanyozniKell = !hétvégeVan;
maZuhanyozniKell;

Az eredmény false, mivel azt adtuk meg, hogy hétvégén kell zuhanyozni, de azt is, hogy nincs hétvége, ezért nem kell zuhanyozni!

vagy.

!mazuhanyoznikell;

Az eredmény true (igaz) mivel ma nem kel zuhanyozni.

megvariálva a példa:

hétvégevan = false;
zuhanyzásvan = true;
vanegyalma = false;
vanegynarancs = true;
iskolábakellenemenni = hétvégevan && zuhanyzásvan && (vanegyalma || vanegynarancs);
iskolábakellenemenni;
false

Összehasonlítások:
Nagyobb mint >
Kisebb, mint <
azonos, vagy nagyobb >=
azonos, vagy kisebb <=
egyenlő === (ez két érték, szám, vagy szöveg (tehát adat)
összehasonlításnál van, nem akkor amikor egy változónak értéket adsz!)
dupla egyenlő == (ezt akkor használjuk, amikor különböző
adatokat hasonlítunk össze, pl. egy szöveget és egy számot, de inkább használd a ===
mert a dupla logikai furcsaságokat okozhat, mivel azonos típusú adattá próbálja fésülni a két dolgot.)

például moziban:
gyerekkora = 15;
korlátozás = 14;
gyerekkora > korlátozás;

Az eredmény true , azaz bemehet a filmre...

titkosszámom = 5;
tipped = 3;
titkosszámom === tipped;

Az eredmény false , ezt írja ki a konzol, mivel rosszat tippeltél...

szövegbenAszám = "5";
számbanAszám = 5;
szövegbenAszám === számbanAszám;

Az eredmény false, mivel a szöveg nem egyenlő a számmal. A tripla egyenlőségjel értelmezi, hogy az egyik 5-ös számként, a másik ötös szövegként lett megadva.

szövegbenAszám == számbanAszám;

Itt most igazat fog kiírni, true , mert a dupla egyenlőségjellel szöveget, és számot is össze tudunk hasonlítani, és a gép azonos típusú adattá próbálja összefésülni a két dolgot.
Logikai furcsaság, amire utaltam. Ezért ne használd a dupla egyenlőségjelet, hanem inkább a triplát.

0 == false;
true
"false" == false;
false

(mert ha false 0, akkor true lesz 1 )

Ritkán használjuk, de az adat érték
lehet határozatlan (undefied), vagy nulla is.

var aváltozóm;
aváltozóm;
undefied

ha üresnek határozod meg,
akkor használod a nullát:

var azüresértékem = null;
azüresértékem;
null

Lista (Array)
Végre kilőttük az adatok témakörét, már kezdett uncsi lenni...

Lista készítéséhez, illetve definíciójához ezt a jelet használjuk : []

Listát így is csinálhatunk, de így nehezen kezelhető:

kedvecgyülömcsöm1 = "alma";
kedvecgyülömcsöm2 = "körte";
kedvecgyülömcsöm3 = "szilva";

Ezért inkább így hozunk létre egy listát, vagyis az adatokat vesszővel választjuk el, és kapcsos zárójelbe tesszük őket:

kedvencGyümölcseimListája =["alma", "körte", "szilva"];

Már írtam, de még egyszer! Mikor új sort akarsz írni, illetve nem akarsz hosszú sort, akkor a Shift (nyíl felfele) gombbal nyomd együtt az enter gombot, és akkor új sorban kezdheted a kódolást úgy, hogy a console nem fog hibát kiírni.

var dinoszauruszok = ["T-Rex", "Velociraptor", "Stegosaurus",
"Triceratops", "Brachiosaurus", "Pteranodon", "Apatosaurus",
"Diplodocus", "Compsognathus"];

Listával egyéb műveletek:

Így tudod indexelni a fenti listából az egyik adatot:

dinoszauruszok[3];
"Triceratops"

A listában az elemeket meg tudod változtatni, kicserélni, vagy hozzáadni:

dinoszauruszok[0] = "Tyrannosaurus Rex";
dinoszauruszok;
["Tyrannosaurus Rex", "Velociraptor", "Stegosaurus", "Triceratops",
"Brachiosaurus", "Pteranodon", "Apatosaurus", "Diplodocus",
"Compsognathus"]

A lista minden eleméhez adhatunk külön indexet, de nem csak sorrend szerint.
8-33-ig így határozatlan lesz az adat, vagyis 24 határozatlan adat lesz.

var dinoszauruszok = [];
dinoszauruszok[0] = "T-Rex";
dinoszauruszok[1] = "Velociraptor";
dinoszauruszok[2] = "Stegosaurus";
dinoszauruszok[3] = "Triceratops";
dinoszauruszok[4] = "Brachiosaurus";
dinoszauruszok[5] = "Pteranodon";
dinoszauruszok[6] = "Apatosaurus";
dinoszauruszok[7] = "Diplodocus";
dinoszauruszok[8] = "Compsognathus";
dinoszauruszok[33] = "Philosoraptor";
dinoszauruszok;
["T-Rex", "Velociraptor", "Stegosaurus", "Triceratops",
"Brachiosaurus", "Pteranodon", "Apatosaurus", "Diplodocus",
"Compsognathus", undefined × 24 "Philosoraptor"]

A listában(array)lehet szám, vagy akár szöveg adat is keverten.

var dinosaursAndNumbers = [3, "dinosaurs", ["triceratops",
"stegosaurus", 3627.5], 10];

A lista második elemének meghívása
majd a lista listájának a második elemének a lehívása:

dinosaursAndNumbers[2];
["triceratops", "stegosaurus", 3627.5]
dinosaursAndNumbers[2][0];
"triceratops"

Lista egy tetszőleges elemeinek lehívása (indexelése):

var gyümölcsök = ["alma", "körte", "szilva"];
gyümölcsök[0];
"alma"
gyümölcsök[1];
"körte"
gyümölcsök[2];
"szilva"

Így tudod megkérdezni, hogy hány adatot tartalmaz a lista:

gyömölcsök.length;
3

Lehet mínusszal, de akkor visszafelé számolva nem nullával, hanem egyel kezdjük:

var gyümölcsök = ["alma", "körte", "szilva"];
gyümölcsök[gyümölcsök.length - 1];
"szilva"

Evvel a paranccsal tudod bővíteni a listát: .push("evvel az elemmel")
és lekérdezésre közben kiírja, hányadik lesz a listában.

var állatok = [];
állatok.push("Cica");
1

állatok.push("Kutya");
2
állatok.push("Csiga");
3

Lekérdezve a lista így néz ki:

állatok;
["Cica", "Kutya", "Csiga"]

és három adatot, avagy elemet tartalmaz:

állatok.length;

A .shift(); és unshift(); hozzá lehet adni, vagy el lehet venni tételeket egy lista elején,
A .push(); és a .pop(); pedig a lista végén lehet hozzáadni, és elvenni tételt.
Listát is lehet listához adni, és evvel egy új listát készíteni, evvel . concat()
Figyelem, nem contact, hanem concat!

állatokegy = ["kecske", "ló", "szamár"];
állatokkettő = ["csiga", "kígyó", "hal"];
állatokúj = állatokegy.concat(állatokkettő);
állatokúj;

Több listát is össze lehet csatlakoztatni a .concat-tal

állatokhárok = ["veréb", "bagoly", "sólyom"]
állatokegybeahárom = állatokegy.concat(állatokkettő , állatokhárom);
állatokegybehárom;
"kecske", "ló", "szamár","csiga", "kígyó", "hal","veréb", "bagoly", "sólyom"

Megtalálni egy tétel indexszámát a listában, evvel lehet: indexOf()
példáúl:

színek = ["piros", "kék","zöld"];
színek.indexOf("kék");
1
vagy így is lehet, ha a tétel a listán kívűl van:

színek.indexOf("lila");
-1

Ha a tétel több, mint egyszer van a listában, akkor a listában az első indexét dobja ki. pl:

színek = ["piros", "kék", "zöld", "piros" , "lila"]
színek.indexOf("piros");

Egy listát át lehet fordítani szöveggé, evvel: .join(separator)
A (" ") csinál szöveget, ahogy látjuk...
Háromféle szeparátor lehet:

var állatok = ["majom", "cica", "hal", "csiga"];
állatok.join(" - ");
"majom - cica - hal - csiga"

állatok.join("*")
"majom*cica*hal*csiga"
állatok.join(" meg")
"majom meg cica meg hal meg csiga"

állatok.join(" ")
"majom cica hal csiga"

Így is lehet, de így sokat kell gépelni...

nevem[0] + "Kiss " + nevem[1] + "Géza " + nevem[2] + "Béla " + nevem[3];
"Kiss Géza Béla"

Evvel pedig a lista összes tételét lehívhatod összeadva, ha az adatok számok, akkor átalakítja string-gé.

kor = [14, 15, 25];
kor.join("");
"141525"

Példa arra, amikor ezekkel megfordítod egy lista sorrendjét:
push-sal felépíted a listát, majd pop-pal kitörlöd, és újra beviszed...

Mondjuk egy útvonalat akarsz a barátodnak a házadhoz megadni, majd a listát alakítod, mert elrontottad...
Evvel megcsináljuk a listát:

var útvonal = [];
útvonal.push("házam");
útvonal.push("ösvény");
útvonal.push("utcailámpa");
útvonal.push("tűzcsap");
útvonal.push("Tűzoltó állomás");
útvonal.push("Állatorvos");
útvonal.push("régi iskolám");
útvonal.push("barátomHáza");

Majd átalakítjuk:

útvonal.pop();
"házam"
útvonal.pop();
"My old school"
útvonal.pop();
"Állatorvos"
landmarks.pop();
"Tűzoltó állomás"
útvonal.pop();
"tűzcsap"
útvonal.pop();
"utcailámpa"
útvonal.pop();
"ösvény"
útvonal.pop();
"házam"

Random generátor:

Véletlennel számokat evvel a paranccsal tudsz létrehozni:
Random (véletlen) generátor 0 és 1 között: Math.random();
Ha kipróbálod, akkor láthatod, hogy 0 és 1 között hozza létre a véletlen számokat4

Math.random();
0.4352214576543456643

Ha nulla, és nagyobb szám között akarsz, akkor meg kell szorozni amennyivel nagyobbat akarsz.
Tehát az egy szorzóik, vagyis nulla és 10 között lesz a példában:

Math.random() * 10 ;
6.444435669687377119

Ha egész véletlen számra van szükségünk ((például egy lista indexelésnél), evvel el tudjuk hagyni a maradékot!: Math.floor()

Math.floor(3.7463463);
3

Így lehet kombinálni a floor-t, és a random-ot:

Math.floor(Math.random() * 4);
2
A lehetséges változatok ezek voltak: 0,1,2,3, Mivel nullától húzza ki számokat...

Szavakból is, evvel véletlen szerűen ki lehet választani adatot:

randomszók = ["hülye", "gyökér", "állat", "barom"];
randomindex = Math.floor(Math.random() * 4);
randomszók [randomindex];
"állat"

Így rövidebb:

randomszók[Math.floor(Math.random() * 4)];
"barom"

Így tudsz csinálni egy tanácsadó programot:

var tanácsok = [
"Ez jó hangzik",
"Igen, határozottan ezt kéne csinálnod",
"Ez nem biztos, hogy jó ötlet...",
"Talán ne ma!",
"A számítógép azt mondja, ne!"
]
tanácsok[Math.floor(Math.random() * 5)];

neked milyen tanácsot ad?

Object avagy objektum (kulcs-értékpár lista):

Objektumot evvel {} hozunk létre.
A kulcs-értékpár közé kettős pontot teszünk.
A kulcs mindig csak szöveg lehet.
Idézőjelbe a stringet itt akkor kell tenni, ha szóközt akarsz használni.
A tárgyat egy vonalba is írhatod, ha nem túl hosszú, ahogy akarod, de úgy talán nehezebben átlátható...
példa:

var cirmiCica = {
lábak: 3,
"teljes név": "Báró Cirmi",
szín: "fehér"
};

Lekérdezni a kulcs egyik értékét kétféleképpen lehet.
A kulcs után vagy ebbe [] vagy . használva írjuk a tárgy kulcsát,
majd ez ; és megkapjuk az értékpárját.
A . akkor használjuk, ha nincs az értékben különleges karakter, pl. szóköz

cirmiCica["teljes név"];
"Báró Cirmi"

vagy

cirmiCica.szín;
"fehér"

Az Object.keys() használatával pedig lehívhatod az objektum összes kulcsát:

Object.keys(cirmiCica);
["lábak", "teljes név", "szín"]

var cirmi = {};
cirmi["lábak"] = 4;
cirmi["név"] = "Báró Cirmi";
cirmi["szín"] = "fehér";
cirmi;

Lehívva az eredmény:

{ szín: "fehér", lábak: 4, név: "Báró Cirmi" }

A pontos módszerrel is fel lehet így építeni az objektumot:

var cirmi = {};
cat.lábak = 4;
stb.

Ha olyat akarsz lehívni, amit nem vittél be, akkor határozatlan értéket ad a program:

cirmi.füle;

undefined

Listák és objektumok kombinálása:

Objektumok listája:

var dinoszauruszok = [
{ név: "Tyrannosaurus Rex", period: "Late Cretaceous" },
{ név: "Stegosaurus", periódus: "Late Jurassic" },
{ név: "Plateosaurus", periódus: "Triassic" }
];

Kinyerni az objektumok listájából a nulladik objektumot így lehet:

dinoszaurusz[0];
{ név: "Tyrannosaurus Rex", periódus: "Late Cretaceous" }

kinyerni az objektumok listájából nulladik objektumból a név kulcshoz tartozó értéket így lehet:

dinoszaurusz[0]["név"];
"Tyrannosaurus Rex"

vagy a pontos módszerrel (csak objektumra lehet használni, listára nem):

dinoszaurusz[1].periódus;
"Late Jurassic"

Így is lehet:
Csináljunk egy objektumok listája lesorolásszerűen:

var anna = { name: "Anna", kora: 11, szerencseszáma: [2, 4, 8, 16] };
var david = { name: "Dávid", kora: 5, szerencseszáma: [3, 9, 40] };
var kati = { name: "Kati", kora: 9, szerencseszáma: [1, 2, 3] };

Majd egy listát a barátainkból:
var barátok = [anna, david, kati];

És amikor lehívjuk barátlistánkból az egyes helyen szereplőt (amely a második, hiszem mindig nullától számozzuk), akkor megkapjuk a teljes objektumot a barátunkról:

barátok[1];
Object {név: "Dávid", kora: 5, szerencseszáma: Array[3]}

A konzol a szerencseszámainak a listáját egy lista linkként jeleníti meg, amit ki lehet bontani, tehát ha elsőre nem is, de rákattintva az Array[3]-ra, vagy inkább az Object előtt látható kis fekete nyíl linkre (Chrome böngésző), megjeleníti a teljes objektumot.

Az értékpárok kinyerése:

barátok[2].név;
"Kati"

A nulladik barát egyes számozású (második) szerencseszáma:

barátok[0].szerencseszáma[1];
4

Most írd be a Chrome böngésző konzoljába, és nyomj entert:

barátok;

Láthatod, hogy a barátodnak lehozza az objektumainak a listáját, de tömörítve, alcímekbe, és a kis fekete nyilakkal lehet őket kibontani.

Próbáljuk ki miért jó objektumokat csinálni egy példán!
Az objektumműveletek segítségedre lehetnek ilyen egyszerű adatbázisok létrehozásához, amiből könnyen kikeresheted az adatot, pl. ha van egy videotékád!

var filmek = {
"Finding Nemo": {
készült : 2003,
perc: 100,
színészek: ["Albert Brooks", "Ellen DeGeneres", "Alexander Gould"],
formátum: "DVD"
},
"Star Wars: Episode VI - Return of the Jedi": {
készült : 1983,
perc: 134,
színészek: ["Mark Hamill", "Harrison Ford", "Carrie Fisher"],
formátum: "DVD"
},
"Harry Potter and the Goblet of Fire": {
készült: 2005,
perc: 157,
színészek: ["Daniel Radcliffe", "Emma Watson", "Rupert Grint"],
formátum: "Blu-ray"
}
};

Így rá tudzs keresni a filmre:

var keresésNemo = filmek["Finding Nemo"];
findingNemo.perc;
100
findingNemo.formátum;
"DVD"

Így pedig újabb filmet tudsz bevinni:

var autók = {
készült: 2006,
perc: 117,
színészek: ["Owen Wilson", "Bonnie Hunt", "Paul Newman"],
formátum: "Blu-ray"
};
fimek["Cars"] = autók;

Így pedig lehívhatod az összes bevitt film listáját:

Object.keys(filmek);
["Finding Nemo", "Star Wars: Episode VI - Return of the Jedi", "Harry
Potter and the Goblet of Fire", "Cars"]

Láthattad, hogy a lista elemeket tartalmaz, az objektum meg elemeket tartalmazó listákat.

Feltétel (Condotions) Az angol If magyarul ha.

A console.log parancs használva abban segít nekünk, hogy a HTML fájlba a
document.write("Wow, valóban hosszú a neved!");
parancsot használnák, de most evvel a konzolba is dolgozhatunk a így az eredményt abba is kiírja a program, és nem kell HTML fájlba ágyazni ahhoz, hogy kipróbáljuk a következő kódokat.

Üsd be ezt a konzolba, majd enter:

var név = "Hermann";
console.log("Hello " + név);
if (név.length > 6) {
console.log("Wow, valóban hosszú a neved!");
}

Akkor nézzük a kódrészletet:

if (név.length > 6) {
console.log("Wow, valóban hosszú a neved!");
}

Mellesleg így nézne ki HTML-be ágyazva, de így több helyet foglal el, konzolba egyszerűbb most dolgoznunk. A conlsole.log() helyett a document.write() parancsot használjuk a HTML-be.

<!DOCTYPE html>
<html>
<head>
<title>Próba</title>
</head>
<body>
<script>
var név = "Hermann";
console.log("Hello " + név);
if (név.length > 6) {
document.write("Wow, valóban hosszú a neved!");
}
</script>
</body>
</html>

Ezen a weboldalon szinte az összes JavaScript kódot megtalálhatjátok:
https://www.w3schools.com/jsref/met_doc_write.asp

De az egyszerűség kedvéért dolgozzunk továbbra is a böngésző konzoljába!

Az If-fel azt mondjuk, hogy ha, majd a zárójelbe megmondjuk mi a helyzet, itt konkrétan az, hogy ha 6 betűnél hosszabb a név, majd a kapcsos zárójelbe azt írjuk, ha hogy mi történjen, ha a feltétel teljesül, vagyis hogy írja ki, hogy ("Wow, valóban hosszú a neved!")
Ha kicseréled a nevét betűnél rövidebbre, akkor nem írja ki ezt a mondatot!

Else (máskülönben)
Ha nem teljesül a feltétel akkor nem csinál semmit a program, de ha azt akarjuk, hogy valamit csináljon, akkor az else parancsot hozzáírjuk, a következőképpen:
Vagyis azt mondjuk, hogy ha a név hosszabb, mit 6 betű, akkor írja ki hogy valóban hosszú a neved, ha rövidebb, akkor viszont azt, hogy nem hosszú a neved:

var név = "Hermann";
console.log("Hello " + név);
if (név.length > 6) {
console.log("Wow, valóban hosszú a neved!");
} else {
console.log("Nem hosszú a neved.");
}

Ezekből a feltételekből egy csomót írhatsz. Pl:

var csirke = false;
var bab = true;
var lencse = true;

if (csirke) {
console.log("Szeretem a csirkét!");
} else if (bab) {
console.log("Háát, randira nem túl jó...");
} else if (lencse) {
console.log("OK, megesszük");
} else {
console.log("Fogadjuk tészte lesz!");
}

Azt a parancsot fogja végrehajtani a program, amelyik feltétele igaz (true). Ha több feltétel is igaz, akkor az a parancsot hajtja végre, amelyik a sorrendben az első igaz feltételhez van kötve.

Loop vagyis hurok (vagy ciklus):

While
Ez a parancs akkor jó, ha egy dolgot ismételgetni akarunk, egészen addig, amíg a feltétel igaz nem lesz.
Például 0-hoz adj hozzá egyet, és írd ki, egészen addig, amíg el nem érjük a 10-et, majd írd ki, hogy elértük. Ehez a while (ameddig) parancsot használjuk:

var szám = 0;
while (szám < 10) {
console.log(szám);
szám++;
}
console.log("Elértük");

Remélem emlékszel, hogy a szöveget e közé kell tenne " " , a számot viszont nem kell... A kapcsos zárójelben itt is a végrehajtandó utasítás van, a sima zárójelben meg a feltétel.

For
A for angolul a -nak, -nek. Evvel most ugyanaz lesz az eredmény. Ilyenkor valami olyasmit mondunk, ha ez van, akkor csináld a megadott utasítást.

for (var szám = 0; szám < 10; szám++) {
console.log(szám);
}
console.log("Elértük");

De akkor mi a különbség a while és az for között?
Az If használatánál a feltételbe írtuk azt, amit a While-nál utasításnak írtunk.
Megmondom őszintén, hogy nem látok különbséget. Úgy tűnik, hogy inkább az for módszer használják gyakrabban. Ha ti rájöttök mi a különbség, létszíves írjátok meg alul!

Még egy variáció az for-re:

var kiírniHello = 3;
for (var i = 0; i < kiírniHello; i++) {
console.log("Hello!");
}

Láthatod, hogy a konzol (Chrom böngésző) nem írja ki háromszor a Hello-t, de egy 3-as számmal jelöli, hogy vedd úgy, hogy háromszor kiírta. HTML-be azonban kiírja háromszor:

<!DOCTYPE html>
<html>
<head>
<title>Próba</title>
</head>
<body>
<script>
var kiírniHello = 3;
for (var i = 0; i < kiírniHello; i++) {
document.write("Hello");
}
</script>
</body>
</html>

A for hurokkal (loop-pal) egy lista elemeit fel tudod sorolni, hozzájuk téve valamilyen szöveget:

var állatok = ["oroszlánok", "flamingók", "jegesmedvék", "csörgőkígyók"];
for (var i = 0; i < állatok.length; i++) {
console.log("Ebben az állatkertben " + állatok[i] + " is vannak.");
}

Eredmény:

Ebben az állatkertben oroszlánok is vannak.
Ebben az állatkertben flamingók is vannak.
Ebben az állatkertben jegesmedvék is vannak.
Ebben az állatkertben csörgőkígyók is vannak.

Az i betű a kiinduló számot jelenti, általában ezt az i-t használják, de bármilyen betűt használhatsz, persze akkor mindenhol ahol az i van, azt a betűt kell. Ha a programban kettő Hurok (ciklus) van, akkor viszont muszáj a második ciklusban valamilyen más betűt használni az i helyett. Ha a var i = 1, akkor az oroszlánt kihagyja a felsorolásból, mert az első tételtől fogja számolni a feltételt a program. ha var i = 2, akkor a flamingót is kihagyja a felsorolásból.
Az állatok.length azt jelenti hogy az állatok listájában lévő elemek száma, még ha a length hosszúságot is jelent... Az i++, meg hogy egyet adjon hozzá, azaz ismételje az alatta lévő utasítást, míg az előtte lévő feltétel fennáll.

Ugyanez, de itt szövegre (stringre) használjuk a for ciklust. Annyiszor írja ki, ahány karaktert tartalmaz a szöveg.

var szöveg = "Egy szöveg";
for (var i = 0; i < szöveg.length; i++) {
console.log("Ez a szöveg ezeket a karaktereket tartalmazta: " + szöveg[i] );
}

Eredmény:
Ez a szöveg ezeket a karaktereket tartalmazta: E
Ez a szöveg ezeket a karaktereket tartalmazta: g
Ez a szöveg ezeket a karaktereket tartalmazta: y
Ez a szöveg ezeket a karaktereket tartalmazta:
Ez a szöveg ezeket a karaktereket tartalmazta: s
Ez a szöveg ezeket a karaktereket tartalmazta: z
Ez a szöveg ezeket a karaktereket tartalmazta: ö
Ez a szöveg ezeket a karaktereket tartalmazta: v
Ez a szöveg ezeket a karaktereket tartalmazta: e
Ez a szöveg ezeket a karaktereket tartalmazta: g

Ez egy másik mód számokkal:

for (var x = 2; x < 10000; x = x * 2) {
console.log(x);
}

Eredmény.
2
4
8
16
32
64
128
256
512
1024
2048
4096
8192

Csináljunk egy egyszerű akasztós játékot!
Ami most újdonság, hogy ebben a programban dialógus ablakot használunk a az adatbevitelhez, de a kimenethez is.
Ez az alert(); parancs
A másik, hogy ez egy igen összetett program az eddigiekhez képes. Próbáld ki, és meg értelmezni is, hogyan van összeállítva!

<!DOCTYPE html>
<html>
<head>
<title>Akasztós!</title>
</head>

<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1>Akasztós! Találd ki a szót, de mindig csak egy betűt tippelhetsz!</h1>
<script>
// Create an array of words
var words = [
"megosztott",
"szeret",
"tetszik",
"papolni"
];
// Pick a random word
var word = words[Math.floor(Math.random() * words.length)];
// Set up the answer array
var answerArray = [];
for (var i = 0; i < word.length; i++) {
answerArray[i] = "_";
}
var remainingLetters = word.length;
// The game loop
while (remainingLetters > 0) {
// Show the player their progress
alert(answerArray.join(" "));
// Get a guess from the player
var guess = prompt ("Tippelj egy betűt, vagy a mégsem gombbal vesd el a játékot." );
if (guess === null) {
// Exit the game loop
break;
} else if (guess.length !== 1) {
alert("Csak egy betűt írjál be!");
} else {
// Update the game state with the guess
for (var j = 0; j < word.length; j++) {
if (word[j] === guess) {
answerArray[j] = guess;
remainingLetters--;
}
}
}
// The end of the game loop
}
// Show the answer and congratulate the player
alert(answerArray.join(" "));
alert("Sikerült, gratulálok! A szó ez volt: " + word);
</script>
</body>
</html>

A funkciók (Functions) avagy függvény.

A feltételek mellett ez a másik fontos, és bonyolultabb dolog ebben a nyelvben.

A funkció egy kódcsomag ,amely arra is jó, hogy többszőr használj a programban.
Vannak beépített funkciók, mint a Math.random, Math.floor,amiket már használtunk, és most megtanulunk sajátot írni.

Csináljunk egy funkciót:

var eslőFunkcióm = function () {
console.log("Hello világ!");
};

A var egy változót hoztunk létre, amelynek az értéke a funkció.
A kapcsos zárójelbe az van, hogy mit hajtson végre. Ha meghívjuk, akkor a konzol kiírja, hogy Heló világ.

ourFirstFunction();
Hello world!

A funkció zárójelébe függvényargumentumokat (témákat) tudunk írni. Nézzünk rá egy példát!

var mondNekiHello = function (név) {
console.log("Hello " + név + "!");
};

A név pedig az lesz, amit lehívsz:

mondNekiHello("Nóra");

Eredmény:
Hello Nóra!

mondNekiHello("Laci");

Eredmény:
Hello Laci!

var rajzoljCicát = function (ennyiszer) {
for (var i = 0; i < ennyiszer; i++) {
console.log(i + " =^.^=");
}
};

rajzoljCicát(7);

És hétszer lerajzolja a cicaarcot...

Egy funkcióban több argument (téma) is lehet!

var írjKiValamit = function (ennyiszer, ezt) {
for (var i = 0; i < ennyiszer; i++) {
console.log(i + " " + ezt);
}
};

írjKiValamit(5, "Nagy Árpi");

Funkció műveletek:

var duplázd = function (szám) {
return szám* 2;
};

Lehívás:
duplázd(5);

Eredmény
10

duplázd(5) + duplázd(6);

Eredmény
22

duplázd(duplázd(5));

Eredmény
20

Mi a return!

var írdKi = function (név) {
if (név.length < 5) {
return;
}
return "Kiírtam, mert hosszabb a neved, mint 5 betű.";
};

írdKi("Arnold");

Eredmény:
"Kiírtam, mert hosszabb a neved, mint 5 betű."

írdKi("Arni");

Eredmény:
undefined

A return (visszatérés) kilépést jelent, a funkcióból. Ha nincs hozzárendelés, akkor rögtön, ha van, akkor azután, hogy az az adott parancs teljesítve lett.

Funkciót rövidebb módon csináljuk általában, így:

function dupla(szám) {
return szám * 2;
}

dupla(6);
12

Tehát igazából felesleges úgy létrehozni, mint egy változót, egyszerűen csak megadjuk, és kész!

Jquery

DOM, (document object model) vagyis a HTML dokumentumba illesztett script.
Ebben van egy olyan elem, amelyet jQuery-nek hívunk. Ez nem más, mint egy funkció gyűjtemény, amely a netre fel van töltve. A benne lévő funkciókat úgy tudjuk használni, hogy a HTML dokumentumban, avagy a DOM-ban, linkeljük a gyűjteményt, a scriptben pedig meghívjuk. Hogy néz ki ez a gyakorlatban?

<!DOCTYPE html>
<html>
<head>
<title>DOM</title>
</head>
<body>
<h1 id="main-heading">Hello world!</h1>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
$("h1").fadeOut(1000);
$("h1").fadeIn(1000);
$("h1").fadeOut(1000);
$("h1").fadeIn(1000);
$("h1").fadeOut(1000);
$("h1").fadeIn(1000);
</script>
</body>
</html>

Láthatod, hogy megadtuk így a link címét. Amikor a jQuery-it használod, akkor ezt mindig bele kell írni a kódva:
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
A másik fontos dolog, hogy a kódod természetesen csak akkor fog működni, ha van internet kapcsolat...
Azt is láthatod a példából, hogy $ jellel hívjuk be a kódot a linkből, és megjelöltük, hogy a parancs melyik HTML elemre működjön (h1) valamint, hogy mi a parancs, a .fadeOut a szöveg elhalványítása, a .fadeIn pedig a mejelenítése, az 1000 pedig azt jelöli, mindezt milyen gyorsan csináljuk, azaz ezer miliszekundum, vagyis 1 másodperc alatt.

Tehát a Hello World! szövegünk villogni fog!

Interaktív programozás

DOM, (document object model) vagyis a HTML dokumentumba illesztett script.
Ebben van egy olyan elem, amelyet jQuery-nek hívunk. Ez nem más, mint egy funkció gyűjtemény, amely a netre fel van töltve. A benne lévő funkciókat úgy tudjuk használni, hogy a HTML dokumentumban, avagy a DOM-ban, linkejük a gyűjteményt, a scriptben pedig meghívjuk. Hogy néz ki ez a gyakorlatban?

<!DOCTYPE html>
<html>
<head>
<title>DOM</title>
</head>
<body>
<h1 id="main-heading">Hello world!</h1>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
$("h1").fadeOut(1000);
$("h1").fadeIn(1000);
$("h1").fadeOut(1000);
$("h1").fadeIn(1000);
$("h1").fadeOut(1000);
$("h1").fadeIn(1000);
</script>
</body>
</html>

Láthatod, hogy megadtuk így a link címét. Amikor a jQuery-it használod, akkor ezt mindig bele kell írni a kódova:
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
A másik fontos dolog, hogy a kódod természetesen csak akkor fog működni, ha van internet kapcsolat...
Azt is láthatod a példából, hogy $ jellel hívjuk be a kódot a linkből, és megjelöltük, hogy a parancs melyik HTML elemre működjön (h1) valamint, hogy mi a parancs, a .fadeOut a szöveg elhalványítása, a .fadeIn pedig a megjelenítése, az 1000 pedig azt jelöli, mindezt milyen gyorsan csináljuk, azaz ezer milliszekundum, vagyis 1 másodperc alatt.

Tehát a Hello World! szövegünk villogni fog!

Időzítés:
https://www.w3schools.com/js/js_timing.asp

setTimeout: Valaminek az időzítését, pontosabban a késleltetését tudod evvel a funkcióval tudod megvalósítani, így:

var kiírás = function () {
alert("Ébresztő!");
};
setTimeout(kiírás, 3000);

Ez DOM-ba illesztve, amikor betölt az oldal, akkor 3 másodperc múlva megjelenik egy párbeszéd ablak avval a szöveggel, hogy Ébresztő...:

<!DOCTYPE html>
<html>
<head>
<title>DOM</title>
</head>
<body>
<script>
var kiírás = function () {
alert("Ébresztő!");
};
setTimeout(kiírás, 3000);
</script>
</body>
</html>

Így amikor ok-zod, 2 másodperc múlva még egyszer kijön...:

var kiírás = function () {
alert("Ébresztő!");
};
setTimeout(kiírás, 3000);
setTimeout(kiírás, 5000);

Így pedig törölheted az időzítést, ha arra lenne szükség:

var kiírás = function () {
alert("Ébresztő!");
};
var riasztás = setTimeout(kiírás, 3000);
clearTimeout(riasztás);

setInterval: Ez a függvény a benne lévő kódot időzítve ismételgeti:

setInterval(function () {

//Ide jön a kód...

}, 3000);

Gyakorlati példában:

setInterval(function () {
document.write("Egy, ");

}, 4000);

2.Gyakorlati példában: Ez másodpercenként számolni egyel többet ír ki, tízig.

var i = 1;
setInterval(function () {
if (i < 10) {
i++;
document.write(i+ ",");
}
}, 1000);

Még egy érdekesség! Ha a konzolba, nem
console.log hanem document.write parancsot használtunk, akkor is megjeleníti az eredményt, de nem a kód alatti következő sorban, hanem a konzol felső részében! Azt is láthatod, ha elemzed a kódot, hogy valójában a for ciklust szedtem szét az if felhasználásával.

Ha azt szeretnéd, hogy a számok ne egymást mellett íródjanak ki, hanem egymást cseréljék, arra ez a megoldás:
Ha valaminek nincs itt a megoldása, akkor az interneten, ha rákeresel, az esetek 99%-ban megleled valahol. Ezt pl. itt találtam. Itt szinte az egész JavaScript megtalálható, a példakódok átalakíthatóak, és kipróbálhatóak, így konzolként is működik!
https://www.w3schools.com/js/js_htmldom_html.asp

<!DOCTYPE html>
<html>
<head>
<title>Próba</title>
<style type="text/css"></style>
</head>
<body>
<h1 id="h1" > 10 </h1>

<script>

var i = 10;
setInterval(function () {
if (i > 0) {
i--;
document.getElementById("h1").innerHTML = i + "." ;
}
}, 1000);

</script>
</body>
</html>

Jquery elem időzítése:

var i = 10;
setInterval(function () {
if (i > 0) {
i--;
document.write(i+ ",");
}
}, 1000);

var leftOffset = 0;
var moveHeading = function () {
$("#heading").offset({ left: leftOffset });
leftOffset++;
if (leftOffset > 200) {
leftOffset = 0;
}
};
setInterval(moveHeading, 30);

Jquery tutorial:
https://www.w3schools.com/jquery/

Objektumorientált programozás:

Nézzünk egy objektumot! Egy kis ismétlés...
Így adunk meg egy objektumot, amelyben kulcs-érték párokat adunk meg:

var cica = {
név: "cirmos",
láb: 4,
vemhes: true
};

Érték lehívása:

cica.láb;

Kulcs-érték pár hozzáadása:

cica.szem = 2;

Az egész objektum lehívása:

cica;

Objektumorientált funkció módszer (Method):
Pl. egy irodában nem akarjuk fárasztani a titkárnőket avval, hogy mindenkinek köszönjenek, és automatizáljuk a bejelentkezésüket:

var telefonbaÜdvözlés = function () {
console.log("Hello, "+ this.név + "vagyok, " + this.kor + " éves!");
};

var kriszti = {
név: "Kriszti",
kor: 25,
telefonbaÜdvözlés : telefonbaÜdvözlés,
};

var réka = {
név: "Réka",
kor: 22,
telefonbaÜdvözlés : telefonbaÜdvözlés,
};

A funkcióban a this.kulcs kódot használjuk az objektumokban lévő kulcs-értékpár meghívásához.
Az objektumokat pedig a kulcs-értékpároknál, rendeljük hozzá a funkcióhoz, így: telefonbaÜdvözlés : telefonbaÜdvözlés,

Kriszti "telefonja" ugyanazt a funkciót fogja használni, csak a saját kulcs-értékpárját hívja meg benne:
kriszti.telefonbaÜdvözlés();

Eredmény:
Hello, Kriszti vagyok, 25éves!

mint Réka "telefonja":
réka.telefonbaÜdvözlés();

Eredmény:
Hello, Réka vagyok, 25 éves!

Vászon (Canvas):

Így tudunk egy vásznat csinálni:
<canvas id="canvas" width="400" height="400"></canvas>

Csináljunk egy 400x400-as pixelnyi vásznat, és arra rajzoljunk egy 60x60-as fekete kockát.
A fekete szín alapértelmezett. A kocka pedig legyen 170 pixelre jobbra a vászon bal sarkától, 170 pixelre a tetejétől!
Ezt tartalmazza a kód: ctx.fillRect(170, 170, 60, 60);
Ez pedig azt, hogy két dimenzióba fogunk rajzolni:
A "canvas id" a vászon helyét, és méreteit jelenti a html kódban, a
"var canvas" a scriptben hozza létre a vásznat. A sorrend, illetve a felépítés az alábbi kódban látható.
var ctx = canvas.getContext("2d")
A pixel a monitor egy "lámpácskáját" jelenti. A monitor kb. 1 millió pixelből áll, de valójában egy pixel nem egy lámpa, hanem három.
Egy piros, egy kék és egy zöld. Ennek a három szín keveréséből, az összes színt, a fehérrel együtt elő lehet állítani.
Ha nagyítóval megnézed a monitort, láthatod a pixeleket...

<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(170, 170, 60, 60);
</script>
</body>
</html>

Cserél le a scriptet, és nézd meg, hogy evvel a for ciklussal hogyan rajzolunk sok kis kockát:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
for (var i = 0; i < 8; i++) {
ctx.fillRect(i * 10, i * 10, 10, 10);

Ha beleteszük a kódba ezt a sort s for ciklus elé, ás a var ctx után, akkor avval pirosra színezzük
a kis kockákat:
ctx.fillStyle = "Red";

Persze olyan színt írhatsz bele angolul, amilyet akarsz... pl: green

Evvel négyzetet tudsz rajzolni:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.strokeRect(20, 30, 150, 40);
}

Evvel a vonalat kiszínezheted, és vastagíthatod:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "Red";
ctx.lineWidth = 6;
ctx.strokeRect(20, 30, 150, 40);

Így tudsz rajzolni különböző ábrákat, vonalakat rajzolgatni.
a ctx.beginPath(); szerintem felesleges, a ctx.moveTo(20, 40); hogy melyik ponttól,
ez pedig: ctx.lineTo(60, 40); hogy meddig rajzoljon egy vonalat.

<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
</head>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "Red";
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(20, 40);
ctx.lineTo(60, 40);
ctx.moveTo(40, 20);
ctx.lineTo(40, 60);
ctx.moveTo(40, 54);
ctx.lineTo(20, 60);
ctx.stroke();
</script>
</body>
</html>

Ha így rajzol pl. egy kockát, akkor a fill-lel ki tudod tölteni:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "SkyBlue";
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(160, 100);
ctx.lineTo(160, 160);
ctx.lineTo(100, 160);
ctx.lineTo(100, 100);
ctx.fill();

Körök, vagy körívek rajzolása:
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
</head>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
<script>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.lineWidth = 2;
ctx.strokeStyle = "Green";

ctx.beginPath();
ctx.arc(50, 50, 20, 0, Math.PI / 2, false);
ctx.stroke();

ctx.beginPath();
ctx.arc(100, 100, 20, 0, Math.PI, false);
ctx.stroke();

ctx.beginPath();
ctx.arc(150, 50, 40, 0, Math.PI * 2, false);
ctx.stroke();

</script>
</body>

Az ctx.arc(150, 50, 40, 0, Math.PI * 2, false); kód azt jelenti, hogy
-ctx rajzolás,
-arc körívet,
-(150, a távolság a vászon bal szélétől,
-50, a távolság a vászon tetejétől,
-40, a kör sugara,
-0) a kört a kezdőponttól kezdjük rajzolni,
(ha ez az érték 1, akkor 60 fokkal arrébb, ha 2, akkor 120 fokkal arrébb, és így tovább.)
-Math.PI * 2, azt jelenti, hogy egész kört rajzolunk, azaz 360 fokba. ha csak Math.PI, van, az csak félkör, a Math.PI / 2, pedig negyed kör.
-false azt jelenti,hogy az óramutató irányába, vagy ellenkező irányba rajzolja a körívet, ha true, akkor ellentétes irányba,

A köröket természetesen egymásba, vagy egymáson keresztül is rajzolhatod.

vicces progi időzítéssel, és animációval:

<!DOCTYPE html>
<html>
<head>
<style type="text/css"></style>
</head>
<body>

<p id="demo">
<button onclick="timedText()">Nyomd meg!</button><br>
<canvas id="canvas" width="441" height="40"></canvas>
</p>

<script>

function timedText() {
setTimeout(myTimeout1, 1000)
setTimeout(myTimeout2, 4000)
setTimeout(myTimeout3, 6000)
setTimeout(myTimeout4, 17000)

function myTimeout1() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.strokeRect(40, 20, 400, 20);
var i = 1;
ctx.fillStyle = "Green";
setInterval(function () {
if (i > 0) {
i++;
ctx.fillRect(i * 20, 20, 20, 20);
}
}, 100);
}
}

function myTimeout2() {
document.getElementById("demo").innerHTML = "A vírus települt! Visszaszámlálás a robbanásig!";
}

function myTimeout3() {
var k = 11;
var visszaszámol = setInterval(function () {
if (k > 1) {
k--;
document.getElementById("demo").innerHTML = k + "." ;
}
}, 1000);
}

function myTimeout4() {
document.getElementById("demo").innerHTML = "Nyugi, csak vicc volt :) !";
}

</script>

</body>
</html>

Mozgó animáció vezérlése a billentyűzettel:

Ehhez jquery-t fogunk használni!
Másold be ezt a kódot a jegyzettömbbe, és mentsd el html dokumentumként:

<!DOCTYPE html>
<html>
<head>
<title>Keyboard input</title>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>

$("body").keydown(function (event) {
console.log(event.keyCode);
});

</script>
</body>
</html>

Ezután nyisd meg a böngésződdel, és egy üres lapot fogsz látni. Kattints rá jobb egérgombbal, majd vizsgálat, majd konzol gomb.
Most az egérrel kattints bele a fehér részbe, ami a honlap, és kezd el nyomkodni a klaviatúra betűit. Azt fogod látni, hogy amikor lenyomsz
egy billentyűt, kiírja a számot. Most cseréld ki a script kódot evvel:

var keyNames = {
32: "space",
37: "left",
38: "up",
39: "right",
40: "down"
};
$("body").keydown(function (event) {
console.log(keyNames[event.keyCode]);
});

Láthatjuk, hogy objektumba vonva, kulcsként használva néhány billentyű számúhoz éréket adtunk (fel-le, stb.).
Most próbáld ki ezt is, és használd a space billentyűt is, és a fel-le-jobbra-balra nyilakat. Azoknál a billentyűknél
ahol a kulcshoz megadtuk az értéket, azoknál ki is írja azt, egyébként undefined vagyis határozatlan a kiírás.
Most cseréld le az egész kódot evvel, és próbáld ki! Használd a fel, le, jobbra, balra, és space gombokat.:

<!DOCTYPE html>
<html>
<head>
<title>Keyboard input</title>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var circle = function (x, y, radius, fillCircle) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
if (fillCircle) {
ctx.fill();
} else {
ctx.stroke();
}
};
// The Ball constructor
var Ball = function () {
this.x = width / 2;
this.y = height / 2;
this.xSpeed = 5;
this.ySpeed = 0;
};
// Update the ball's position based on its speed
Ball.prototype.move = function () {
this.x += this.xSpeed;
this.y += this.ySpeed;
if (this.x < 0) {
this.x = width;
} else if (this.x > width) {
this.x = 0;
} else if (this.y < 0) {
this.y = height;
} else if (this.y > height) {
this.y = 0;
}
};
// Draw the ball at its current position
Ball.prototype.draw = function () {
circle(this.x, this.y, 10, true);
};

// Set the ball's direction based on a string
Ball.prototype.setDirection = function (direction) {
if (direction === "up") {
this.xSpeed = 0;
this.ySpeed = -5;
} else if (direction === "down") {
this.xSpeed = 0;
this.ySpeed = 5;
} else if (direction === "left") {
this.xSpeed = -5;
this.ySpeed = 0;
} else if (direction === "right") {
this.xSpeed = 5;
this.ySpeed = 0;
} else if (direction === "stop") {
this.xSpeed = 0;
this.ySpeed = 0;
}
};
// Create the ball object
var ball = new Ball();
// An object to convert keycodes into action names
var keyActions = {
32: "stop",
37: "left",
38: "up",
39: "right",
40: "down"
};
// The keydown handler that will be called for every keypress
$("body").keydown(function (event) {
var direction = keyActions[event.keyCode];
ball.setDirection(direction);
});
// The animation function, called every 30 ms
setInterval(function () {
ctx.clearRect(0, 0, width, height);
ball.draw();
ball.move();
ctx.strokeRect(0, 0, width, height);
}, 30);

</script>
</body>
</html>
--------------------------------------------------------------
Egy ajándék Lotto programom is a végére:

<html>
<form name="szamol">
<input name="mennyibol" />
<input name="mennyi" />
<input onclick="plusz();" type="button" value="A számokért klikkelj rám" />
</form>
<script>
function plusz() {mennyibol = document.szamol.mennyibol.value*1;
mennyi = document.szamol.mennyi.value*1;
var szamok = [];
for (i = 1; i < mennyibol+1; i++) {
szamok.push(i);
szamok.sort(function() {
return .5 - Math.random();
});
szamok;
}
{eredmeny = szamok.splice(0, mennyi);
{eredmeny=eredmeny.sort((a,b)=>a-b);
{document.szamol.innerHTML = eredmeny;
}
}
}
}
</script>
<html/>

A következő részben a robotika felé vesszük az irányt, és a
JavaScript-et használhatjuk a robotok vezérléséhez is, bár ezt csak érinteni fogjuk, mert a Visual Basic egyszerűbb, jobb rá!

Így érdemes:

2. rész JavaScirpt