Javascript¶

A javascript programjainkat egy alap HTML5 oldalba illesztjük, a példáink mindegyike a <script></script> között helyezkedik el.

Hello World!¶

<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Javascript gyakorlatok</title>
</head>
<body>
  <p>Javascript</p>
  <script>
    alert('Hello World!');
  </script>
</body>
</html>

A program egy „alert” ablakban egy üzenetet jelenít meg. A további példákban csak a javascript kódot adom meg, ezt kell a HTML forrás megfelelő helyén elhlyezni.

Változók¶

A javascript változói nem erősen típusosak, és kezelésük több ponton szokatlan. Egy változó deklarálását a var kulcszóval, egy, csak az aktuális hatókörben érvényes változót a let kulcsszóval vezetünk be. Konstansok deklarálása a const kulcsszóval történik. (Egysoros megjegyzéseket a // vezet be, többsorosat a /* és a */ határol.) A legfontosabb adattípusok: number, bigint, string, boolean, null, undefined. A use strict beállítás esetén minden változót deklarálni kell az első használat előtt. A let, var és a const.

// Változók
let intNum = 17;
let binNum = 0b1011;
let hexNum = 0xFF;
let mol = 6E+23;

var igaz = true;
var hamis = false;
var  nev = 'Kiss Lajos';
var n = null;
var m = undefined;

// Konstansok
const pi = 3.14;

Értékadások¶

A javascript értékadási szabályai nagyon hasonlóak a szokásos C-stílusú nyelvekéhez, az általánosan megszokott operátorok alkalmazhatók. Az aritmetikai operátorok: + (összeadás), - (kivonás), * (szorzás), / (osztás), ** (hatványozás), % (maradékképzés).

let a = 3;
let b = a + 2;
a++; // 4
a += 2; // 6
a--; // 5
a -= 2; // 3
a = a ** 2; // 9
a = a % 5; // 4 (modulo)
b = a--; // b:4, a:4
b = --a; // b:4, a:3

Típuskonverziók¶

"alma" + "körte"; // "almakörte"
"alma" + 4; // "alma4"
"6" + 6; // "66"
32 - "8"; // 24 (számmá alakítja)

Feltételes operátor¶

Feltételes operátor is elérhető a nyelvben:

a = 3;
b = ( a%2 == 0 ) ? "Páros" : "Páratlan"; // Páratlan

Típusok ellenőrzése¶

let a = 3;
b = ( isNaN(a) ) ? "Szám" : "Nem szám";
console.log(b);

Használható a typeof() függvény is:

var booleanValue = true;
var numericalValue = 354;
var stringValue = "Ez egy szöveg";
console.log(typeof booleanValue);    // "boolean"
console.log(typeof numericalValue);  // "number"
console.log(typeof stringValue);     // "string"
console.log(typeof stringObject);    // "object"

Tömbök¶

A tömbök kezelése szintén szokványos, talán a delete szokatlan, ezzel ugyanis egy „lyuk” keletkezik a tömbben.

let cars = ['Ford', 'Fiat', 'Opel'];
console.log(cars.length); // 3
console.log(cars[1]); // Fiat
cars[3]='Tesla';
cars.push('Peugeot');
cars.pop();
cars.delete(1);

Aszociatív tömbök¶

var muszerek = { "ph":100, "rozsdasodas":300, "polimer":400 };
alert (muszerek["polimer"]); // 400

Adatok megjelenítése¶

A későbbiekben, a DOM modell megismerése után számos lehetőségünk lesz arra, hogy a program adatait megjelenítsük. Kezdetben a már látott üzenetablakban, az alert utasítással tudod ezt megtenni. Egy másik lehetőség a console.log() használata, ehhez azonban a böngésző inspector felületét kell megjeleníteni.

Az alábbi program bekéri az életkor értékét, majd kiírja azt:

kor = prompt('Életkor:');
alert('Életkor = ' + kor);

Ez pedig egy megerősítő kérdésre adott választ jelenít meg:

yesno = confirm('Biztos benne?');
alert('Válasz = ' + yesno);

Vezérlési szerkezetek¶

Elágazások¶

Az egyszerű elágazás szintén C szintaxisú.

console.log("Elágazás: i<10?");
i=10;
if ( i < 10 ) {
    console.log(i + "<10")
}
else {
    console.log(i + ">=10")
}

Az értékadás egy speciális módja szintén használható Javascriptben:

let oddOrEven = null;
let dBy3 = null;
console.log("ternary Operator");
for ( i=1; i<10; i++) {
    oddOrEven = i%2 == 0 ? "Páros" : "Páratlan";
    dBy3 = i%3 == 0 ? "osztható 3-mal" : "nem osztható 3-mal";
    console.log(i + ": " + oddOrEven + " és " + dBy3);
}

A többirányú elágazást lehetővé tevő switch szerkezet is elérhető.

console.log("Switch");
let nap = 1;
for (; nap<=8; nap++ )
    switch (nap) {
        case 1:
            console.log(nap + ": Hétfő: Az első nap.");
        case 2:
        case 3:
        case 4:
            console.log(nap + ": Munkanap.");
            break;
        case 5:
            console.log(nap + ": Hurrá, péntek!");
            break;
        case 6:
        case 7:
            console.log(nap + ": Hétvége!");
            break;
        default:
            console.log(nap + ": Nincs ilyen nap.");
    }
}

Ciklusok¶

Többféle cikluskonstrukció közül választhatsz. Egy alap for ciklus:

for (i=0; i<10; i++) {
    console.log(i);
}
console.log("Végül: i=" + i);

Sorraveheted egy tömb elemeit:

let cars = ["Ford", "Fiat", "Opel"];
for (i=0; i<cars.length; i++) {
    console.log(i + ":" + cars[i]);
}

De ezt a feladatot így is meg lehet oldani:

let cars = ["Ford", "Fiat", "Opel"];
  for (i of cars) {
      console.log(i);
  }

Van hagyományos while-os ciklus:

while ( i<3 ) {
    console.log(i);
    i++;
}
console.log("Végül: i=" + i);

És az aránylag ritkán használt do-while konstrució is elérhető.

i=3;
do {
    console.log(i);
    i--;
}
while ( i > 0);
console.log("Végül: i=" + i);

A break és a continue is a szokásos módon működik, írjuk ki az első nulláig a páros számokat egy tömbből:

let data = [1,4,3,-7,2,11,86,123,0,44];
for (i=0; i<data.length; i++)  {
    if ( data[i]%2 == 0 ) continue;
    if ( data[i] == 0 ) break;
    console.log(data[i]);
}

Függvények¶

Egy egyszerű függvény a javascriptben:

function printLine() {
    console.log("----------");
}
printLine();

Cicomázzuk fel:

function printText(title) {
    let line='';
    for (i=0; i<title.length; i++) line += '-';
    console.log(l);
    console.log(title);
    console.log(l);
}
printText( 3+2 );

Egy függvény adhat vissza értéket. Változók hatóköre, a data a blokkjában globális változó, ezért a függvényen belül is látszik.

let data = [1,4,3,-7,2,11,86,123,0,44];
function f1() {
    let result='';
    for ( i=0; i<data.length; i++ ) result += data[i] + ',';
    return result;

}
// A Data tömb értékeinek kiírása. f1 tehát látja a data értékét.
console.log(f1());

A függvényen belül lokális változók is felvehetők, ezek a függvény elhagyásakor elvesznek, a globális változók pedig a lokálisakkal eltakarhatók:

function f2() {
    let data = ['a','b','c','d'];
    let result='';
    for ( i=0; i<data.length; i++ ) result += data[i] + ',';
    return result;
}
printText('Data újradefiniálása a tömbben. f2 nem látja a data értékét.');
console.log(f1());

Paraméter átadása. Névazonosság esetén itt is a lokális változó látható. A paramétereknek lehet alapértelmezett értékük is.

function f3( data = ['k','a','C'] ) {
    let result='';
    for ( i=0; i<data.length; i++ ) result += data[i] + ',';
    return result;
}
console.log(f3(['a','b','c','d']));
console.log(f3());

A függvények egymásba ágyazhatók:

function f4() {
    function f5() {
        console.log('Most f5 fut.')
    }
    console.log('f4 elindul.')
    f5();
    console.log('f4 vége.')
}
f4();
// F5 meghívása hibát okoz.
// f5();

Függvényargumentumok alkalmazásával változó számú paramétert feldolgozó függvények készíthetők:

function f7() {
    for (i=0; i<arguments.length; i++)
        console.log(arguments[i]);
}

f7();
f7(1, 'Hello', false, '2022.10.12');

A függvények paraméterei függvények is lehetnek:

function calcIt(muvelet, a, b) {
    return muvelet(a,b);
}
function add(a,b) {
    return a + "+" + b + "=" + (a + b);
}
function mult(a,b) {
    return a + "*" + b + "=" + (a * b);
}
console.log(calcIt(add,3,2));
console.log(calcIt(mult,3,2));

Maguk a függvényparaméterek a függvényhívásban is kifejthetők. Az alábbi példában egy új tömböt generálunk, melynek elemein a függvény paramétereként megadott függvény fut le:

function eggyelNovel(array, func) {
    let retArr = [];
    for ( i=0; i<array.length; i++) retArr[i]= func(array[i]);
    return retArr;
}
console.log(eggyelNovel( [1,2,3], function(x) { return x + 1; }));

Ebben pedig a rendezést végző függvény számára adunk át egy függvényparamétert, amely a rendezés mikéntjét határozza meg:

a = [111,6,88,-2,99];
console.log(a.sort( function(a,b) {
   // if ( a == 88 ) return 1;
   if ( a > b ) return 1
   else
       if ( a < b ) return -1
       else return 0;
   })
);

Függvény kifejezések

let printA = function(numOfChars = 1) {
    let retval = '';
    for (i=0; i<numOfChars; i++) retval+='a';
    retval+=" (" + numOfChars + ")";
    return retval;
}
console.log(printA(10));
console.log(printA());

Objektumok¶

Objektumok létrehozásának egyszerű esete az alábbi:

var macska = {
   nev: "Mici",
   szin: "Tarka",
   kor: 3,

   printAge: function() {
       return this.nev + ' kora: ' + this.kor + ' év.';
   }
}

console.log(macska.nev);
console.log(macska.printAge());

Programozási alaptételek¶

let data = [1,4,3,-7,2,11,86,123,0,44];

printText("Minimum- és maximum érték kiválasztása")
let min = max = data[0];
for ( i=0; i<data.length; i++) {
    if ( data[i] < min ) min = data[i];
    if ( data[i] > max ) max = data[i];
}
console.log("minimum érték: " + min);
console.log("maximum érték: " + max);

Egy elem megjelenítése / elrejtése.

<p id="theBox">
    Hello, ez az eredmény bekezdése.
</p>
<input type="button" onClick="hideTheBox()" value="Hide Me!">
<input type="button" onClick="showTheBox()" value="ShowMe!">
<input type="button" onClick="invertTheBox()" value="Invert Me!">

<script>
    box = document.getElementById('theBox');

    function hideTheBox() {
        box.hidden = true;
    }
    function showTheBox() {
        box.hidden = false;
    }
    function invertTheBox() {
        box.hidden = !box.hidden;
    }

</script>

A DOM modell¶

<!DOCTYPE html>
<html lang="hu">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta Access-Control-Allow-Origin="*">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript</title>
    <style>
        p { border: 1px solid lightgray; padding: 5px; width: 250px; background: #EEEEEE; }
        input[type=button] { padding: 5px; background: yellow; }
    </style>
  </head>
  <body>
    <p onclick="alert('Rámkattintottál')">Kattints rám!</p>
    <p onmousemove="alert('Rámmutattál')">Mutass rám!</p>
    <p><input type="text" onkeyup="alert('Elengedted a gombot!')" value="Engedd el a gombot"></p>
    <p><input type="text" oninput="alert('Beírtál valamit!')" value="Írj valamit!"></p>
  </body>
</html>

Példa onClick eseményre meghívott függvényre:

<p onclick="saySomething('Hello!')">Köszönj!</p>
<script>
    function saySomething(what = 'Hello') {
        alert(what);
    }
</script>

Az alábbi példában a DOM modellre alapozva módosítjuk az oldal címét. Érdemes megnézni a böngészőben az oldal forrását!

<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Javascript gyakorlatok</title>
</head>
<body>
  <h1 id="headerLine">Javascript</h1>
  <script>
    document.getElementById('headerLine');
    headerLine.innerHTML = 'A címet a Javascript módosította!';
    headerLine.style.color = "blue";
  </script>
</body>
</html>

DOM esemény kezelése, egy textboxban megadott érték alapján számítás végzése és az eredmény megjeleneítése.

<!DOCTYPE html>
<html lang="hu">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Javascript gyakorlatok</title>
</head>
<body>
  <h1>Javascript</h1>
  <form>
    Adj meg egy számot:
    <input type="text" name="szam">
    <input type="button" onClick="calculateIt()" value="Számold ki!">
  </form>
  <p>Az eredmény: <span id="eredmeny"></span>.</p>
  <script>

    function calculateIt() {
        szam = document.getElementsByName('szam')[0].value;
        resBox = document.getElementById('eredmeny');
        if ( ! isNaN(szam) ) {
            resBox.style.color = "green";
            resBox.innerHTML = szam * 2;
        }
        else {
            resBox.innerHTML = "érvénytelen szám";
            resBox.style.color = "red";
        }
    }
  </script>
</body>
</html>

function myDisplayer(data) {
   document.getElementById("demo").innerHTML = data;
}
myDisplayer(macska.printAge());

Callback függvények¶

function addAndShow(a, b, shFunc) {
   shFunc( "Az összeg: " + (a + b));
}
addAndShow(3,5, myDisplayer);

Form ellenőrzés¶

Írjunk javascriptet, amely egy form név és kor mezőinek értékét ellenőrzi. A név nem lehet üres, a kornak pedig [10-99] intervallumba kell esnie.

form ellenőrzése javascripttel¶

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript</title>
</head>
<body>

  <form onsubmit='return checkform()'>
    Név: <input type="text" id="nev" name="nev">  <span id="nev_error"></span><br>
  Kor: <input type="text" id="kor" name="kor">  <span id="kor_error"></span><br>
    <input type="submit" value="Küldés">
  </form>

  <script>
    function checkform() {

    vanHiba = false

    // Név mező vizsgálata: nem lehet üres
        nev = document.getElementById('nev')
        nevError = document.getElementById('nev_error')
        if ( nev.value == "" ) {
            nevError.innerHTML = 'A név nem lehet üres!'
            nevError.style.color = 'red'
            vanHiba = true
        }
        else {
            nevError.innerHTML = null
        }

    // Kor mező vizsgálata: 16-99 év közé kell, hogy essen
        kor = document.getElementById('kor')
        korError = document.getElementById('kor_error')
        if ( ! isNaN(kor) || kor.value < 10 || kor.value > 99 ) {
            korError.innerHTML = 'A kornak 10 és 99 év közé kell esnie!'
            korError.style.color = 'red'
            vanHiba = true
        }
        else {
            korError.innerHTML = null
        }

        // További mezők vizsgálata

    return ( vanHiba ) ? false : true
    }
  </script>
</body>
</html>

Példák:

form ellenőrzése javascripttel
Készíts számológépet, mely megvalósítja a négy alapműveletet, képes előjel váltásra, van alaphelyzet gombja, és a hibás adat javítására szolgáló gombja is. Egy lehetséges megoldás.
Készíts lottósorsoló alkalmazást! Ez tegye lehetővé a felhasználó számára, hogy tippeljen, majd sorsoljon öt véletlenszámot, és jelenítse meg a találatok számát! A 90-es értékhatár legyen változtatható a tesztelés leegyszerűsíthetősége érdekében! Egy lehetséges megoldás.

TODO¶

console.log("bevezető");
const value1 = 42;
const value2 = 23;
console.log(value1 || value2);
// Hiba: console.log(value3 || value2);


console.log("Nullish operator: ha az első érték null vagy undefined");
console.log(null ?? value2);
console.log(undefined ?? value2);
console.log("" ?? value2);
console.log(4 > 5 ?? "Hello");