JavaScript

 

Mi a JavaScript?

A JavaScript egy leginkább webes céllal létrehozott interpretált nyelv, amelyet általában arra használnak, hogy interaktív effektusokat hozhassunk létre a böngészőnkben. Szintaxisa a C nyelven alapul. Egy ideje támogatja az objektumorientáltságot. 

Az interpretált nyelv az azt jelenti, hogy futás közben értelmezett, nincs szükség fordítóra. Az objektumorientáltság úgy jelenik meg benne, ahogy számos, egyéb programnyelv esetén: lehet osztályokat létrehozni, azokat származtatni egymásból.

A JavaScript nyelven nem adhatjuk meg deklaráláskor a változók típusait, illetve azoknak nincs is típusa. Az adatoknak van típusa, de a változóknak nincs, és egy változóban tárolt adat típusa változhat. Ebből kifolyólag gyengén típusos nyelv.

Használata során érdemes figyelembe venni, hogy ahogy a CSS leíró nyelv esetén, úgy ennek is vannak korlátai böngészőkompatibilitás terén. Az a kód, amit létrehozunk, az egyik böngészőben lehet, hogy kiválóan működni fog, a másikban pedig egyáltalán nem biztos.

A programnyelvhez hoztak létre különféle könyvtárakat (pl. jQuery), vagy keretrendszereket, is ilyen például az Angular, React, és Vue. Ezek abban segítenek minket, hogy könnyebben, és gyorsabban tudjuk a megfelelő eredményt elérni, valamint, hogy a létrehozott kód böngésző-kompatibilis legyen.

Mit tehetünk a JavaScript segítségével?

Mikor a weboldalunkat megnyitjuk a böngészőben, akkor létrejön az úgynevezett DOM (Document Object Model), ami a weboldalunk megjelenő tartalmát reprezentálja: például a képeket, a HTML elemeket, és a CSS kódot.

A JavaScript segítségével lehetőség nyílik arra, hogy ezeket az elemeket manipuláljuk, akár még akkor is, mikor az oldalunk már teljesen betöltött. Lehetőség van a szerverrel való kommunikációra is.  A teljesség igénye nélkül néhány a leggyakoribb alkalmazási módokra:

• Animációkat hozzunk létre
• Elemeket tüntessünk el, jelenítsünk meg
• Új tartalmakat töltsünk be az oldalunkra annak újratöltése nélkül
• Különféle űrlapok kitöltési helyességét ellenőrizzük
• Lenyíló menüket kezeljünk
• Különféle szövegmezők automatikus kiegészítését segítsük

Ezek közül sok megoldható valamilyen szinten CSS-el, de a teljes igény kielégítése miatt fontos a JavaScript.

Mik a JavaScript nyelv alapjai?

A JavaScript nyelv-ahogy a fenti példák mutatják-nagyon sokrétűen használható. Ahhoz, hogy a fenti feladatokat meg tudjuk valósítani, szükséges ismernünk az alapokat is a megfelelő módon. Ennek kapcsán szerettünk volna ezek közül párat összeszedni.

Hogyan, hová írhatunk JavaScript kódot?

Ahhoz, hogy JavaScript kódot tudjunk írni, szükségünk lesz egy olyan fájlra, ami támogatja ezt a scriptnyelvet. Ilyenek lehetnek például a HTML fájlok (pelda.html), JavaScript fájlok (pelda.js), PHP fájlok (valami.php).

Amennyiben kifejezetten JavaScript fájlba írjuk a tartalmat, akkor nincs szükség a tagekre, ellenkező esetben igen. A legtöbb alkalommal külső, szeparált fájlból szoktuk behivatkozni annak érdekében, hogy ne keveredjen a JavaScript, és a többi tartalom, az áttekinthetőség miatt.

Az egyszerűség kedvéért most használjunk HTML kiterjesztést. Hozzunk létre egy proba.html nevű fájlt, és ebbe írjuk bele a következő tartalmat:

Majd nyissuk meg a böngészőben, és nézzük meg, mi fog történni. 

Szintaxis

Ahogy minden nyelvnek, úgy a JavaScript nyelvnek is van egy megfelelő, és általánosságban véve használt szintaxisa, amelyet egy „szabálygyűjteményt” tartalmaz arra vonatkozólag, hogy hogyan kell a kódunkat szintaktikailag helyesen létrehozni. Mivel rengeteg ilyen szabály van, a teljesség igénye nélkül szerettünk volna párat felsorolni.

Kiíratás

Minden egyes nyelvben különféle lehetőségek vannak arra, hogy a megfelelő adatokat megmutassunk a felhasználóink részére.  Erre az alábbi lehetőségek adottak:

1. <div id="test">
2. </div>
3. //.innerHTML: a kiválasztott elem HTML tartalmát módosítja.
4. document.getElementById("test").innerHTML = 'Kiíratva';
6. //document.write: a teljes HTML dokumentumba való kiíratás
7. document.write('A dokumentumba kiíratva');
9. //alert: egy felugró ablakban jelenik meg az üzenet
10. alert('Ez az alert. Ezt már ismerjük korábbról');
12. //console.log: a konzolra való kiíratás, ezt a fejlesztők használják hibakeresésre
13. console.log('Itt van a konzolon');

Az utóbbi esetben nyomnjunk F12-t a Chrome böngészőnkben, és nézzük meg a console füglre kattintva fogjuk látni az üzenetet.

Kommentelés

JavaScript nyelven belül-ahogy ez általában programozási nyelvek esetén szokott lenni-a kommentelés arra való, hogy a kódunkban hagyhassunk bizonyos részeket úgy, hogy azok nem lesznek figyelembe véve a futás közben. Van lehetőség egysoros, és többsoros kommentelés létrehozására. 

Mindez abban segíthet minket, hogy a kódunkat átláthatóbbá, és mások számára könnyedén értelmezhetővé tegyük. Az egysoros kommentelést tehetjük a működő kód után is, de általában elé szoktuk a konvenciók miatt.

1. // Így sokás az egysoros kommentet használni
2. alert('egysoros komment');
4. alert('egysoros komment'); // Így nem szokás az egysoros kommentet használni
6. /*
7. Ha szeretnénk, akkor
8. több sorban is megtehetjük.
9. */
10. alert('többsoros komment');

Változók

A változók arra valók, hogy adatokat/értékeket tároljunk bennük. Ezen a nyelven belül is vannak jellemző adattípusok, ilyenek például a number, string, object, array, boolean, undefined. Az adatok típusát a typeof() kulcsszóval tudjuk ellenőrizni.

1. // number típus. Nincs külön integer, double, vagy float. Viszont definiálhatjuk decimálisan, ha szeretnénk.
2. var a = 5;
3. var b = 4.54;
5. // number, exponenciális alakban 200000
6. var c = 2e5;
8. // string típus
9. var c = 'barack';
10. var d = "körte";
12. // Tömb típus
13. var people = [1,2,'Jancsi'];
15. // objektum típus (JSON objektum)
16. var customer = {fName:"Kiss", lName:"Tamás"}; // Object
18. // undefined típus: nem adtunk értéket. Illetve, undefined keletkezik, ha egy olyan változót szeretnénk meghívni, ami nem létezik.
19. var not_defined;
21. // más változók segítségével is hozhatunk létre változókat 9.54
22. var e = a+b;
24. // boolean típus: csak true, és false lehet. Ez esetben false.
25. var j = a == b;
27. // az adatok típusát a typeof() függvénnyel érhetjük el. Egy változót argumentumnak adva megadja annak típusát. Például, győződjünk meg róla, hogy az "a", és "b" véltozók numberek:
28. console.log(typeof(a));
29. console.log(typeof(b);
30. // a null alapból object típustnak számít
31. console.log(typeof(null));

Operátorok

Ahogy ez rengeteg programozási nyelv esetén igaz: itt is vannak különféle operátorok, például aritmetikai, logikai, és hozzárendelő (assignment) operátorok. Ezek közül néhány: 

1. // assign (hozzárendelő) operátor: az x-nek az 5 értéket adjuk.
2. var a = 5;
3. var b = 8;
4. var x = false;
6. /*
7. * Aritmetikai operátorok
8. */
9. // + operátor: 13
10. var c = a + b;
12. // - operátor: -3
13. var d = a - b;
15. // * operátor: 40
16. var e = a + b;
18. // / operátor: 0.625
19. var f = a + b;
21. // ++ operátor: inkrementáció 6
22. var g = ++a;
24. // + operátor: 4
25. var h = --a;
27. /*
28. * Logaikai operátorok
29. */
30. // true
31. var i = a || x;
33. // false
34. var j = a && x;

Iterációk

Természetesen a JavaScript nyelven belül is megtalálhatók a legjellemzőbb iterációk. Tekintve, hogy sok példát lehetne hozni ilyen téren, a for ciklust szerettük volna picit jobban bemutatni.

1. // szimpla for ciklus
2. for(i = 0; i < 5; i++){
3. console.log('This number is '+i);
4. }
6. // tömbök esetén egy for iteráció
7. var fruits = ["Mango", "Banana", "Apple", "Strawberry"];
8. for (x of fruits) {
9. document.write(x + "
10. ");
11. }
13. // object propertyken egy for iteráció
14. var animal = {name:"Horse", color:"green", age:4};
15. var text = "";
16. var x;
17. for (x in animal) {
18. text += animal[x];
19. }
20. console.log(text);

Függvények

A JavaScript nyelven a függvényeket a function szóval definiáljuk, ezt követi annak a neve, az argumentumokat () jelek közé rakhatjuk, a függvény érdemi, lefutó része {} jelek közé kerül. Természetesen visszatérési érték megadására is van lehetőség. Abban az esetben, ha egy függvény futása közben egy return-hoz érkezik, az nem fut tovább, és annak értékét adja vissza.

1. // argumentum nélküli függvény
2. function baseFunction() {
3. alert('Ez egy alap függvény');
4. }
6. // a függvény meghívása
7. baseFunction()
9. // argumentumos függvény
10. function withArgs(a,b){
11. console.log(a+b);
12. }
14. // argumentumos függvény meghívása
15. withArgs(2,3);
17. // függvény returnnel
18. function withReturn(a, b) {
19. return a * b;
21. // ez már nem fog lefutni, a return-nál megáll a függvény futása.
22. alert("Üzenet")
23. }
25. var x = withReturn(4, 3); // Az x értéke 12 lesz, ugyanis a függvény egy számot ad vissza.

Objektumok

Sok nyelvvel ellentétben nem csupán akkor hozhatók létre objektumok, ha egy osztályt példányosítani szeretnénk. A JS objektumok név-érték (name-value) párokból állnak, ezeket nevezzük tulajdonságnak (property).

1. var person = {fName:"Kiss", lName:"Béla", salary:200.000};
3. // kicsit szebben formázva
4. var person = {
5. // tulajdonság-tulajdonságérték
6. fName:"Nagy",
7. lName:"Tamás",
8. salary:250.000,
9. fullName : function() {
10. return this.fName + " " + this.lName;
11. }
12. };

Események

A HTML események akkor történnek, ha valami történik egy HTML elemmel, erre tudunk reagálni JavaScripttel: például, ha valamit ki szeretnénk íratni, amikor egy HTML elemmel történik valami, vagy az oldal teljesen betöltött.

A leggyakoribb JS események:

• onchange: amikor egy HTML elem megváltozik
• onclick: mikor egy HTML elemre kattintunk
• onmouseover: mikor egy HTML elemre húzzuk az egeret.
• onmouseout: mikor egy HTML elemről elhúzzuk az egeret.
• onkeydown: mikor egy billentyűt lenyomunk
• onload: mikor a böngésző betöltötte az oldalunkat.  

1. <button onclick="alert('klikkeltél!')">Ez egy gomb</button>
2. <button onmouseover="alert('Ráhúztad!')">Ez egy gomb</button>
3. <button onmouseout="alert('Lehúztad!')">Ez egy gomb</button>

Tömbök

A JS tömbök arra valók, hogy egy adott változóban tároljunk el különböző értékeket. Nagyjából egy listaként fogható fel. A tömb mindegyik eleme lehet bármilyen típusú: number, string, array, object, undefined egyaránt.

1. var a = [1,2,3,4];
3. var b = [1,'piros',['alma',4]];
5. var c = [1,'piros',{
6. fName:"Kiss",
7. lName:"Béla",
8. salary:200.000
9. }];
11. var people = new Array("Tamás", "Zsuzsi", "Peti");
13. //Tömbök érteékeinek megkapása
14. console.log(a[0]);
15. console.log(b[2][0]);
16. console.log(c[2].fName);

Osztályok

A JavaScript nyelven az osztályok, és objektumok hasonló elven működnek, mint ahogy más nyelvek esetén.

Definiálhatunk konstruktort egy osztályon belül, ami mindig meg fog hívódni a példányosítás során. Az osztályon belül definiálhatunk tulajdonságokat, függvényeket, és van lehetőség a öröklődésre is.

1. class Animal {
2. //tulajdonság definiálása
3. sf_name="Állat";
5. // konstruktor
6. constructor(color) {
7. this.color = color;
8. }
10. // függvények
11. sayColor() {
12. return 'My color is ' + this.color;
13. }
14. sayName() {
15. return 'Ennek az osztálynak a neve: '+this.name;
16. }
17. }
19. // osztályok származtatása
20. class Horse extends Animal {
21. sf_name="ló";
22. }
24. var animal = new Animal("fekete");
25. console.log(animal.sayColor());
27. var horse = new Horse("fekete");
28. console.log(horse.sayName());