Skip navigation

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éldául:

<!DOCTYPE html>

<html>
  <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>

  • 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.

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ő fá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. 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 eseményeihez (oldal teljesen betöltődött, egeret egy elem fölé mozgattak, stb.).

A var 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ó 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
    var WIDTH, HEIGHT, aspectRatio;
    var 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>

...

Hivatkozások