JavaScript a böngészőben

Slides:



Advertisements
Hasonló előadás
HTML enhanced for web apps! Fodor Krisztián
Advertisements

Osztály leszármaztatás
JQuery 8. előadás.
Grafikus tervezőrendszerek programozása 10. előadás.
C++ programozási nyelv Gyakorlat hét
JQuery Kocsis Roland
Lua script Szécsi László
JavaScript.
© Kozsik Tamás Beágyazott osztályok A blokkstrukturáltság támogatása –Eddig: egymásba ágyazható blokk utasítások Osztálydefiníciók is egymásba.
Stílus, mesteroldal, témák
Programozás II. 3. Gyakorlat C++ alapok.
UNIVERSITY OF SZEGED D epartment of Software Engineering UNIVERSITAS SCIENTIARUM SZEGEDIENSIS Programozás II. 6. Gyakorlat const, static, dinamikus 2D.
Tömbök ismétlés Osztályok Java-ban Garbage collection
STÍLUSOK Tulajdonságok és értékek. Színek megadási módjai H1 {color: #CCF150} H1 {color: rgb(204,241,80)} H1 {color: rgb(80%,95%,30%)} H1 {color: red}
Grafika a programban Készítette: Pető László. Bevezetés Valójában nem a célobjektumra rajzolunk, hanem annak festővászon területére (canvas). Csak olyan.
Leírónyelvek: HTML és XHTML
© BZ, 2006Stíluslapok használata1 Váltsunk stílust! Stíluslapok a webszerkesztésben.
Hernyák Zoltán XML és HTML.
A Java programozási nyelvSoós Sándor 1/17 Java programozási nyelv 4. rész – Osztályok II. Nyugat-Magyarországi Egyetem Faipari Mérnöki Kar Informatikai.
Java programozási nyelv 3. rész – Osztályok I.
Dr. Pance Miklós – Kolcza Gábor Miskolci Egyetem
C# tagfüggvények.
C# tagfüggvények.
PHP Webprogramozás alapjai
Web-grafika (VRML) 10. gyakorlat Kereszty Gábor. Script típusok Elemi típusok: szám: egész vagy lebegőpontos – int / float – 1 / 1.1 string: ‘Hello World!’
Kliensoldali Programozás
Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Előadás JavaScript Tananyag: W eb - programozás.
JavaScript a gyakorlatban. 7. Gyakorlat DHTML  Fa-struktúrájú menük létrehozása  Legördülő menük létrehozása.
JavaScript a gyakorlatban
JavaScript a gyakorlatban
PHP I. Alapok. Mi a PHP? PHP Hypertext Preprocessor Szkriptnyelv –Egyszerű, gyors fejlesztés –Nincs fordítás (csak értelmező) Alkalmazási lehetőségek:
Multimédiás programok készítése Macromedia Director rendszerben 2. előadás Készítette: Kosztyán Zsolt
CSS.
Orovecz János Tartalomjegyzék  Az Ajax története  HTTP-kérések és válaszok  XMLHttp-kérések  Egyéb Ajax technika  XML.
Számítógépes Grafika 1-2. gyakorlat Programtervező informatikus (esti)‏ 2011/2012 őszi félév.
Alapszint 2.  Készíts makrót, ami a kijelölt cellákat egybenyitja, a tartalmat vízszintesen és függőlegesen középre igazítja és 12 pontos betűméretűre.
Szoftvertechnológia alapjai Java előadások Förhécz András, doktorandusz tárgy honlap:
XHTML – a tanultak összefoglalása
A <DIV> tag és formázás CSS-sel
A PHP 5 újdonságai Az OOP terén. Miről lesz szó? Osztályok kezelése – Új direktívák – Konstruktor – Destruktor Interfészek Kivételkezelés.
Objektum orientált programozás a gyakorlatban
CSS A CSS bemutatása.
Javascript Microsoft által készített kiegészítése Statikus típusosság Nagy projektek Windows 8 fejlesztésénél WinRT egy részét ebben írták Nyílt forráskódú,
Script nyelvek alkalmazása a webkartográfiában 1/14 Script nyelvek alkalmazása a webkartográfiában Gede Mátyás MFTTT, március 22.
Delphi Készítette: Rummel Szabolcs Elérhetőség:
HTML 2. Űrlapok
További lehetőségek Weblapok programozása. Nyelvek csoportosítása Leíró nyelv (HTML, XML, …) Programozási nyelv  Szerver oldali (PHP, ASP, …)  Kliens.
XML Mi az XML?  Extensible Markup Language  Kiterjeszthető jelölő nyelv  Adatok, adatstruktúrák leírására szolgál  A HTML és az SGML tapasztalataira.
Illés Zoltán ELTE Informatikai Kar
Spanyolország gyöngyszeme: GRANADA Egy hobby portál kivitelezése.
Vizualizáció és képszintézis Sugárkövetés (Dart + GLSL) Szécsi László.
Számítógépes Grafika 3. gyakorlat Programtervező informatikus (esti)‏ 2009/2010 őszi félév.
Weboldalba ágyazott interaktív feladatok GeoGebra módra Papp-Varga Zsuzsanna ELTE IK Média- és Oktatásinformatika Tanszék
Opencms modul fejlesztés Krizsán Zoltán. Modulok fajtái Nincs előírás, csak tipikus tennivalók: –Content type: új típus(oka)t vezet be. –Template: új.
TÁMOP /1-2F Informatikai gyakorlatok 11. évfolyam Windows Forms alkalmazás készítése Czigléczky Gábor 2009.
TÁMOP /1-2F JAVA programozási nyelv NetBeans fejlesztőkörnyezetben I/13. évfolyam Osztályok, objektumok definiálása és alkalmazása. Saját.
Informatikai rendszerek
Alkalmazott Informatikai Tanszék
Szécsi László 3D Grafikus Rendszerek 17. előadás
Asynchronous Javascript And XML
Neumann János Informatikai Kar
„Designer-barát” játéklogika
CSS Cascading Style Sheet HTML.
YUI február YUI szeptember YUI3
Vizualizáció és képszintézis
Adatkonverziók Erőforrások
Cascading Style Sheet.
Sw2 PhysX.
JavaScript a böngészőben
Függvénysablonok használata
Előadás másolata:

JavaScript a böngészőben Szécsi László Vizualizáció és képszintézis

HTML head az oldal kitölti az ablakot <!DOCTYPE html> <html> <head> <title>UFO</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> elemek stílusai itt lesznek folyt köv.

HTML body <body> <div id="container"> ez a cimke (tag) egy szakaszt definiál az oldalon ez egy HTML elem <body> <div id="container"> <canvas id="canvas"></canvas> <div id="overlay"></div> </div> <script src="js/keycodes.js"></script>   <script src="js/Shader.js"></script> <script src="js/shaders/idle_vs.essl"></script> <script src="js/shaders/solid_fs.essl"></script> <script src="js/Program.js"></script> <script src="js/QuadGeometry.js"></script> <script src="js/Scene.js"></script> <script src="js/App.js"></script> </body> </html>   vászon, erre rajzol a WebGL ezt a HTML szakaszt szeretnénk a vászon főlé rajzolni tartalmát a kódból módosítva könnyen jeleníthetünk meg szöveget JavaScript forráskód forrásfileok

CSS #container * { margin: 0; padding: 0; } #container { position: absolute; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; } töltse ki az oldalt nem kérünk scrollbart

CSS #canvas, #overlay #overlay { position: absolute; left: 10px; top: 10px; z-index: 20; } #canvas { width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; z-index: 10; overflow: hidden; legyenek ugyanott felül a szöveg nem kérünk scrollbart

DOM Document Object Model HTML címkék hierarchiája mint szülő-gyerek kapcsolatban álló objektumok rendszere győkér: document firstChild nextSibling getElementById

Window window globális objektum ennek tulajdonsága minden globális a dokumentumot megjelenítő ablak absztrakciója > document.defaultView.document === document; < true

JavaScript belépési pont? valójában simán végrehajtódik az összes beágyazott script soronként, az elejétől kezdve változó- és függvénydefiníciók lefutnak de az oldal teljes betöltése után kezdődhet az érdemi kód futása

Oldal betöltése eseményfigyelő window.addEventListener('load', function() { const canvas = document.getElementById("canvas"); const overlay = document.getElementById("overlay"); overlay.innerHTML = "WebGL"; const app = new App(canvas, overlay); app.registerEventHandlers(); }); innentől ez az objektum intéz mindent

App konstruktor – gl context new App(c, o) üres objektumot hoz létre és ráhívja a konstruktort, ami tulajdonságokkal léthatja el. Így definálunk osztályt JS-ben. Az objektum később módosítható. App konstruktor – gl context const App = function(canvas, overlay) { this.canvas = canvas; this.overlay = overlay; this.gl = canvas.getContext("webgl2"); if (this.gl === null) { throw new Error( "Browser does not support WebGL2"); }

App konstruktor színtér létrehozás this.gl.pendingResources = {}; this.scene = new Scene(this.gl); this.resize(); }; ez az OpenGL kontextusba beszúrt tulajdonság hasznos lesz a betöltött erőforrások monitorozására object literal üres objektumhoz ez az objektum felel az erőforrások kezeléséért és kirajzolásáért rajzolási felbontás beállítása külön metódusban, mert ablakátméretezéskor is kell majd ugyanez

App.prototype az az objektum, ami az App konstruktorral létrehozott objektumok prototípusa lesz. Amikor egy objektumnak olyan metódusát hívjuk, ami nincs neki, a prototípus metódusa hívódik. Így az App példányok öröklik a prototípus metódusait. Így definiálunk metódusokat JS-ben. App resize App.prototype.resize = function() { this.canvas.width = this.canvas.clientWidth; this.canvas.height = this.canvas.clientHeight; this.gl.viewport(0, 0, this.canvas.width, this.canvas.height); }; rendering resolution canvas size az ablak melyik részébe rajzolunk

App registerEventHandlers App.prototype.registerEventHandlers = function() { window.addEventListener('resize', () => this.resize() ); window.requestAnimationFrame( () => this.update() ); }; Zárvány: nagyon gyakran használjuk A lokálisan definiált függvény hozzáfér a definiáló scope lokális változóihoz. Az arrow function szintakszissal a this ugyanaz, mint a befoglaló scope-ban. egyutasításos törzs, nem kell kapcsos zárójel üres paraméterlista frissíti a rajzolási felbontást és a viewportot váltsunk ki egy rajzolást ez a metódus fogja rajzolni a frame-et

App registerEventHandlers document.onkeydown = (event) => { //jshint unused:false }; document.onkeyup = (event) => { this.canvas.onmousedown = (event) => { this.canvas.onmousemove = (event) => { event.stopPropagation(); this.canvas.onmouseout = (event) => { this.canvas.onmouseup = (event) => { //jshint unused:false }; egy darab függvény- paraméter függvénytörzs (ezen a dián üres)

App update – update loop dolgok betöltés alatt App.prototype.update = function() { const pendingResourceNames = Object.keys(this.gl.pendingResources); if (pendingResourceNames.length === 0) { // animate and draw scene this.scene.update(this.gl); this.overlay.innerHTML = "Ready."; } else { this.overlay.innerHTML = "Loading: " + pendingResourceNames; } window.requestAnimationFrame( () => this.update() ); }; ha minden be van töltve, mehet a rajzolás ütemezzük be a következő frame-et ugyanezzel a kezelővel

Billentyűesemények feldolgozása nem a lenyomásra (typematic rate!) vagy felengedésre akarunk reagálni hanem minden frameben tudni, mi van épp lenyomva keysPressed objektum tualjdonságértékek true/false: le van-e nyomva tulajdonságnév a gomb neve az S billentyű neve "S" legyen, ha lehet... de az onkeydown eventjében keyCode van (S: 83???) keyCodes.js : globális keyboardMap tömb elemek a string nevek, pl. "S", "DELETE", "SPACE", "F1"

Billentyűesemények feldolgozása const App = function(canvas, overlay) { ... this.keysPressed = {}; ... document.onkeydown = (event) => { this.keysPressed[keyboardMap[event.keyCode]] = true; }; document.onkeyup = (event) => { this.keysPressed[keyboardMap[event.keyCode]] = false; }; ... } App.prototype.update = function() { ... this.scene.update(this.gl, this.keysPressed);