Andras Schmelczer
597860f28e
All checks were successful
Check & deploy / deploy (push) Successful in 7s
78 lines
5.1 KiB
Markdown
78 lines
5.1 KiB
Markdown
# 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](https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX))
|
|
+ A weboldal elemeit módosítani ([DOM manipulation](https://developer.mozilla.org/en-US/docs/Glossary/DOM))
|
|
+ Egy csomó HTML5-ös API-val kommunikálni:
|
|
+ [File](https://developer.mozilla.org/hu/docs/Web/API/File)
|
|
+ [HTMLMediaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement)
|
|
+ **[Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)**
|
|
+ etc.
|
|
+ És természetesen minden olyan dologra képes, ami egy magas szintű nyelvtől elvárható.
|
|
### [Kristóf nagyon jó JavaScript összefoglalója](https://github.com/kripod/schdesign-web-workshop/blob/master/notes/js.md)
|
|
### 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields), például `nev = "";`, illetve `static darab = 0;` az osztály törzsében.
|
|
+ A [`#` előtagú privát mezők és metódusok](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_elements) 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](https://zellwk.com/blog/this).
|
|
+ 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](https://developer.mozilla.org/hu/docs/Web/JavaScript).**
|
|
|
|
## Canvas API
|
|
> [Kifejezetten jó dokumentáció](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
|
|
|
|
### Hogyan lehet használni?
|
|
|
|
+ A HTML bodyjához add hozzá: ```<canvas id="myCanvas"></canvas>```
|
|
+ JS-ben pedig:
|
|
```javascript
|
|
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()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillRect).
|
|
|
|
**További hasznos és szükséges információk: [MDN Canvas tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial)**
|
|
|
|
## Animáció
|
|
A következő kódrészletet célszerű alkalmazni.
|
|
|
|
A [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/Window/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.
|
|
|
|
```javascript
|
|
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals).
|
|
|
|
> Természetesen a fenti ```function``` kulcsszó helyett egy [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)t 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.
|