HTML 5 DOM + JavaScript

HTML leíró nyelv

A HTML leíró nyelv segítségével szöveges formában tudjuk megadni egy weboldal felépítését.

Példa

<!DOCTYPE html>

<html lang="hu">
  <head>
    <meta charset=utf-8>
    <title>Three.js Canvas app</title>
  </head>
  <body>

    <h1>Fejléc</h1>

    <p>Szöveg elhelyezése paragrafusban.
    Kép is beilleszthető: <img src="pelda.png"></p>

    <div>
      <canvas id="myCanvas" width="400" height="200" border="1px"></canvas>
    </div>

  </body>
</html>

Legfontosabb jellemzők

Az egyes részeket egymásba ágyazott tag-ek segítségével definiáljuk. A <html> ... </html> a legkülső. Ezen belül a fejléc (<head></head>) és a törzs (<body>...</body>) definíciója adható meg. A törzsön belül számos további elem érhető el: bekezdéses szöveg, kép, fejléc, stb.

A böngésző az oldal elemzése során objektumokat hoz létre, amelyek az egyes elemeket reprezentálják, aktuális állapotukkal, értékükkel. Az egymásba ágyazottságuk fa struktúrában ábrázolható. Ez a dokumentum objektum modell, röviden DOM.

A weboldal dinamikussá, időben változtathatóvá tehető, amennyiben hozzáférünk a DOM elemeihez, amin keresztül módosíthatjuk az objektumokat. Ezt a weboldalba ágyazott, JavaScript nyelven írt kóddal tehetjük meg legegyszerűbben a kliens oldalon.

JavaScript nyelv

A JavaScript egy interpretált nyelv, amely szintaxisát tekintve hasonlóságot mutat más magasszintű nyelvekkel (Java, C), de lehetőségei azokénál jóval korlátozottabbak.

JavaScript kódot a <script> ... </script> tag-ek között helyezhetünk el az oldalba beágyazva.
Külső forrásfájl tartalmát <script src="..."></script> módon illeszthetjük be. A külső kódok fájlkiterjesztése .js.

A <script> részben utasításokat helyezhetünk el és függvényeket definiálhatunk. Az ilyen kódok indítása a <body> tag-hez megadott onload eseménykezelővel történhet. A függvényeken kívül elhelyezett utasításokat a feldolgozás sorrendjében azonnal végrehajtja a JavaScript motor. A függvényeket meghívhatjuk saját kódból, valamint csatlakozhatunk az oldal DOM eseményeihez (oldal teljesen betöltődött, egeret egy elem fölé mozgattak, stb.).

A let kulcsszóval változókat hozhatunk létre. Típusuk értékadáskor derül ki, előre nem kell deklarálni. Hozzáférést kapunk a böngésző megjelenítéshez kapcsolódó, már létrejött objektumaihoz is (pl. a window az oldal megjelenítéséhez rendelt ablak).

<body onload="init()">
  <script src="js/three.min.js"></script>
  <script>
    // Globális változók
    let WIDTH, HEIGHT, aspectRatio;
    let scene, camera;

    function init() {
      // Böngésző ablakméret lekérése és méretarány számítása
      HEIGHT = window.innerHeight;
      WIDTH = window.innerWidth;
      aspectRatio = WIDTH / HEIGHT;
      // ...
    }
    // ...
  </script>
</body>

...

JavaScript modulok használata

Nagyobb méretű, több forrásfájlra bontott JavaScript kódok esetén célszerű a JavaScript modulok használata. Az egyes fájlokban, a modulokban definiált globális változók így modulra lokálisak lesznek, más modulok nem látják őket. A modulokban a külső kódok számára fontos definíciókat exportálnunk kell. A külső modulok ezek közül importálhatják azokat, amelyekre szükségük van. Így a futás során a memóriába kerülő kódméret kisebb lehet, mint a teljes beillesztés esetén.

A Three.js használható a "régi" és a moduláris felépítés szerint is. A forráskód egy részében a régi megközelítés elavultra lett állítva, így érdemesebb a moduláris Three.js változatot használni, a jegyzetben ezt követjük.

A külső JavaScript modul forrásfájlok kiterjesztése js vagy jsm lehet.

JavaScript modul kód esetén explicit jeleznünk kell ezt a script tag-nek:

<script type="module"> ... </srcipt>

A HTML fájlban definiált JavaScript modul végrehajtása a teljes oldal betöltése (a DOM hierarchia felépülése után) automatikusan megtörténik, nincs szükség eseménykezelő aktiválására (pl. body onload)! Az értelmezés a szkript elejétől indul a globális definíciókkal. Innen hívhatjuk a saját függvényeinket is, nincs belépési függvény, mint több más nyelv esetén!

Egyes rendszerek (pl. node.js) lehetőséget biztosítanak modulok névvel azonosított csomagként való telepítésére. A programok ezután a csomagok/modulok neveivel hivatkozhatnak egymára a fájlrendszer elérési útvonalak helyett. Jelenleg a Three.js kiegészítő modulok is így kerülnek megvalósításra. Mivel mi nem telepített csomagként elérhető modulokat fogunk használni, ezért létre kell hoznuk a programunk elején egy úgynevezett importmap szekciót, amely felsorolja a használt modulok neveit, és megadja azok JavaScript forrásának elérési útvonalát. Egyes böngészők (jelenleg a Firefox) még nem támogatják megfelelően az importmap szekciókat, ezért szükséges egy es-module-shims.js nevű modul előzetes importálása. A példaprogram csomagban ez a forrásfájl a dist mappában található. Egy importmap szekció az alábbi módon nézhet ki például:

<script async src="./dist/es-module-shims.js"></script>
<script type="importmap">
{
    "imports": {
        "three": "./js/build/three.module.js",
        "TrackballControls": "./js/examples/jsm/controls/TrackballControls.js",
        "stats": "./js/examples/jsm/libs/stats.module.js"
    }
}
</script>

A fenti kódrészlet három modult definiál, three, TrackballControls és stats néven, megadva a forrásfájlok elérési útvonalát. Fontos, hogy a Three.js modul neve three legyen, mert a kiegészítő modulok, mint pl. a TrackballControls ezen a néven hivatkozik rá!

Ezután külső modul kódot beilleszteni az import utasítással tudunk, ahol meg kell adni, hogy milyen definíciókat kívánunk beilleszteni, milyen modulokból.

import * as THREE from 'three';

A fenti példában a three nevű csomagból minden exportált definíciót beillesztünk a THREE névtér alá.

Ha nem akarunk minden definíciót használni a Three.js függvénykönyvtárból, írhatjuk a következőt a részleges importáláshoz:

import { WebGLRenderer, Scene, PerspectiveCamera, SphereGeometry, BoxGeometry, MeshBasicMaterial, Mesh } from 'three';

Így csak a felsorolt osztályok kerülnek át. Vigyázzunk, hogy ekkor ezek az osztályok nem a THREE névtérbe kerülnek, hanem globálisak lesznek! A példaprogramjainkban a teljes importálást fogjuk használni.

A JavaScript modulokban alapértelmezetten bekapcsolásra kerül a szigorú szintaktika ellenőrzés.

Az első példaprogramunkban részletesen megismerkedünk majd egy moduláris, Three.js-t használó JavaScript program felépítésével.