avoid

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

Mi az a JavaScript?

• Egy magasszintű, 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 magasszintű 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.

  Nincsenek attribútumok, láthatóság.

• 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(x0, y0, x1, y1);

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

Animáció

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

    function nextFrame(timestamp) {
        console.log(`Ennyi ideje fut a játék: ${timestamp}`)
        
        //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.