avoid

A JS / Canvas workshop rövid összefoglalója

Mi az a JavaScript?

• Egy magas szintű, gyengén típusos, értelmezett nyelv.
• A "böngészőben fut".
• Változatos módon tudja befolyásolni az oldal állapotát.
  • A háttérben aszinkron módon képes szerverekkel kommunikálni (AJAX)
  • A weboldal elemeit módosítani (DOM manipulation)
  • Egy csomó HTML5-ös API-val kommunikálni:
    • File
    • HTMLMediaElement
    • Canvas
    • etc.
• És természetesen minden olyan dologra képes, ami egy magas szintű nyelvtől elvárható.

Kristóf nagyon jó JavaScript összefoglalója

Egy nem annyira jó, viszont annál tömörebb összefoglaló

• A konzolra kiírni (böngészőben F12-vel megnyitható) a console.log("szöveg"); hívással lehet.
• Alapvető szintaxisában olyan, mint a C.
• Leszámítva a típusokat, helyette van let, illetve const.
  • Előbbi változó deklarálásra jó, utóbbi konstans inicializáláshoz.
  • Még sok helyen lehet látni a var kulcsszót, ezt ne használjuk.
• Vannak class-ok.
  • Lehetnek publikus példánymezőik és statikus mezőik, például nev = "";, illetve static darab = 0; az osztály törzsében.
  • A # előtagú privát mezők és metódusok csak az őket deklaráló osztályon belül érhetők el, például #ertek = 0;.
  • A C#/Java nyelvektől eltérően nincsenek public, protected, private láthatósági módosítók; a # nélküli mezők és metódusok publikusak.
• Van garbage collector.
• A this bonyolult, de majd mindenki ráérez. Bővebb infó róla.
• Ezenfelül google, és előbb-utóbb mindent meg lehet tanulni.

Van egy csomó modern nyelvi elem benne, amikkel jobb és olvashatóbb kódot lehet írni. Ezeket célszerű használni, viszont nem kell egyből az összeset megtanulni. Először írjunk működő kódot, utána lehet refaktorálni, meg fancyzni.

Ha ennél mélyebben is érdekel, akkor a fenti összefoglalót nézd meg, vagy olvass bele ebbe: MDN JS.

Canvas API

Kifejezetten jó dokumentáció

Hogyan lehet használni?

• A HTML bodyjához add hozzá: <canvas id="myCanvas"></canvas>
• JS-ben pedig:

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

• Adjunk meg egy rajzoló színt: context.fillStyle = "rgba(255, 255, 0, 0.5)";
• Rajzoljunk egy téglalapot: context.fillRect(x, y, width, height);
  • Az x és y a kezdőpont koordinátái, a width a szélesség, a height a magasság. Bővebb infó: fillRect().

További hasznos és szükséges információk: MDN Canvas tutorial

Animáció

A következő kódrészletet célszerű alkalmazni.

A requestAnimationFrame callbackjének timestamp paramétere az ablak időorigójához viszonyított időbélyeg, ezredmásodpercben. A játék futásidejét az első képkocka időbélyegének levonásával kapjuk meg.

    let startTimestamp;

    function nextFrame(timestamp) {
        if (startTimestamp === undefined) {
            startTimestamp = timestamp;
        }
        const elapsed = timestamp - startTimestamp;
        console.log(`Ennyi ideje fut a játék: ${elapsed} ms`);
        
        //animáció logikája
        
        requestAnimationFrame(nextFrame);
    }
    requestAnimationFrame(nextFrame);

A ` (backticktől) ne ijedjünk meg, több infó róla: template literals.

Természetesen a fenti function kulcsszó helyett egy arrow functiont is használhattunk volna.

A végére

Ezekről a témákról rengeteg kifejezetten jó forrás található az interneten. A JavaScriptről is írtak már egy pár könyvet. Ha valakit érdekel a téma, akkor minden lehetősége megvan, hogy elmélyedjen benne. Ez a fél oldal talán egy elfogadható kiindulási pontot ad, vagy ha azt nem, legalább egy kis plusz motivációt, hogy még többen ismerkedjenek meg a webnek ezen részével is.