Web-grafika II (SVG) 7. gyakorlat Kereszty Gábor.

Slides:



Advertisements
Hasonló előadás
Osztály leszármaztatás
Advertisements

A weboldalunkon regisztrált felhasználó neveddel és jelszavaddal tudsz belépni. Amennyiben még nem regisztráltál oldalunkon, abban az esetben kérjük,
A Powerpoint használata (gyorstalpaló)
JQuery 8. előadás.
Képek beillesztése, formázása dokumentumokban
Mellár János 3. óra Szeptember 16. v
Számítógépes ismeretek 5. óra
Bevezető a tartalomjegyzékek használatába j majd a tanfolyam elindításához nyomja le az F5 billentyűt, vagy kattintson a Diavetítés > Az elejétől gombra.
JQuery Kocsis Roland
1 Hernyák Zoltán Programozási Nyelvek II. Eszterházy Károly Főiskola Számítástudományi tsz.
Mire jók a tabulátorok? Lehetőséget nyújtanak
Windows alapok Fájlkezelés.
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
1. Akciógombok elhelyezése
Web-grafika (VRML) 6. gyakorlat Nyitrai Erika Varga Balázs alapján Kereszty Gábor.
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!’
Web-grafika (VRML) 4. gyakorlat Nyitrai Erika Varga Balázs alapján Kereszty Gábor.
Kliensoldali Programozás
Web-grafika II (SVG) 2. gyakorlat Kereszty Gábor.
Web-grafika (VRML) 7. gyakorlat Nyitrai Erika Varga Balázs alapján Kereszty Gábor.
A táblázatok formázása Készítette: Gombkötő Alexandra Felkészítő tanár: Györe Mihály József Attila Gimnázium, 6900 Makó Csanád vezér tér 6.
Zsombori Balázs Neumann János Számítástechnikai SZKI
,,Én így tanítanám az informatikát”
Webszerkesztés Stíluslapok (CSS).
Másolás és áthelyezés. Másolás 1. Kijelölni a mappát amit másolni akarunk (ráklikk) 2. A bal egérgombot folyamatosan lenyomva a „fogd és vidd” módszerrel.
Multimédiás programok készítése Macromedia Director rendszerben 2. előadás Készítette: Kosztyán Zsolt
Számítógépes Grafika 2. gyakorlat Programtervező informatikus (esti) 2011/2012 őszi félév.
4. Feladat (1) Foci VB 2006 Különböző országok taktikái.
Pozicionálás 1. Kurzor elhelyezése a képernyőn 2. Színkezelés.
A fény hullámjelenségei
Alapsokaság (populáció)
Hyper Text Markup Language
Hyper Text Markup Language
Honlap készítés 4. óra.
Web-grafika II (SVG) 3. gyakorlat Kereszty Gábor.
Web-grafika II (SVG) 4. gyakorlat
Web-grafika II (SVG) 1. gyakorlat
Web-grafika II (SVG) 8. gyakorlat Kereszty Gábor.
Web-grafika II (SVG) 6. gyakorlat Kereszty Gábor.
Web-grafika II (SVG) 9. gyakorlat Kereszty Gábor.
Web-grafika II (SVG) 5. gyakorlat Kereszty Gábor.
Csempe Programozás érettségi mintafeladat
UNIVERSITY OF SZEGED D epartment of Software Engineering UNIVERSITAS SCIENTIARUM SZEGEDIENSIS Programozás II. 4. Gyakorlat Függvény paraméterek, dinamikus.
2. Feladat. És akkor kezdjük is el!
Többoldalas dokumentum készítése
HTML ÉS PHP (Nagyon) rövid áttekintés. ADATBÁZISRENDSZEREK MŰKÖDÉSI SÉMÁJA Felh. interakció DB Connector MySQL ? A gyakorlaton:
Számítógépes grafika I. AUTOCAD alapok 2. előadás.
Illés Zoltán ELTE Informatikai Kar
Rövid ismertető mikrofonnal történő
Violet nails Készítette: Csőke Vivien. Bevezetés Téma: Violet nails - műkörömkészítő weblapjának elkészítése A weboldal elérhető az alábbi címen: violetnails.atw.hu.
Számítógépes grafika I. AUTOCAD alapok 3. előadás.
1. feladat  Készíts olyan függvényt, mely paraméterül kapja két egész típusú változó címét, s hívása után a két változó értéke helyet cserél.
8. osztály Beszúrás. Töréspont  Kurzor elhelyezése.  Beszúrás menü, töréspont parancs.  Vagy CTRL + ENTER.  Oldaltörés.
Gazdasági informatikus - Szövegszerkesztés 1 Bekezdések formázása 2.
A 2. géptermi beszámoló VBA anyagának összefoglalása
Web-grafika (VRML) 1. gyakorlat Nyitrai Erika Varga Balázs alapján Kereszty Gábor.
Web-grafika (VRML) 5. gyakorlat Nyitrai Erika Varga Balázs alapján Kereszty Gábor.
Web-grafika (VRML) 2. gyakorlat Nyitrai Erika Varga Balázs.
Rugós inga mozgása Hömöstrei Mihály.
TÁMOP /1-2F Informatikai gyakorlatok 11. évfolyam Windows Forms alkalmazás készítése Czigléczky Gábor 2009.
Neumann János Informatikai Kar
Programozás III. Felhasználóifelület-elemek fontosabb tulajdonságai, eseményei, metódusai Preview események.
ListBox CheckedListBox TextBox
Neumann János Informatikai Kar
ComboBox A listák nagy helyet foglalnak a formokon, és az általuk felkínált elemek nem bővíthetőek a felhasználó által. Ezen problémák megoldására használhatjuk.
Neumann János Informatikai Kar
Neumann János Informatikai Kar
Hivatkozások beillesztése, animációk szerkesztése
Neumann János Informatikai Kar
Előadás másolata:

Web-grafika II (SVG) 7. gyakorlat Kereszty Gábor

Animációk egyebek I Ahol a elemet használjuk a nem szám értékű attr. megváltoztatására. visibility: láthatóság (hidden, visible) A prev kulcsszóval is tudunk hivatkozni a megelőző animációra, ebben az esetben nem kell elneveznünk a transzformáló animációt.

Animációk egyebek II Ahol az első animáció 4-szer fut le, a második pedig 7mp-ig ismétlődik. A második akkor indul, amikor az első a 3. lefutásának közepén tart.

Scriptek Script elhelyezése az svg törzsön belül: <![CDATA[ function fvnev(paramlista){ … kód … }; … további függvények … //]]>

Fő események click – kattintás mousedown – egérgomb lenyomása mouseup – egérgomb felengedése mouseover – egérrel felette állunk mouseout – egérrel lejövünk róla mousemove – egér mozgatása load – dokumentum betöltve keydown – billentyűlenyomás keyup - billentyűfelengedés

Fő / általános paraméter Ez a paraméter az ‘evt’, ami a bekövetkezett eseményhez tartozó tulajdonságokat tartalmazza. Metódusai: getTarget() – az objektum getClientX, getClientY – az egér x és y koordinátája

Saját paraméter elérés Ahol a getAttribute-tal lekérdezhetjük egy adott attr. értékét, a setAttribute-tal pedig új értéket adhatunk egynek… <![CDATA[ function fvnev(evt){ var obj = evt.getTarget(); var attr = obj.getAttribute(“attribútumnév”); obj.setAttribute(“attribútumnév”, érték); }; … további függvények … //]]>

Feladatok Készíts egy 50*50-es zöld téglalapot, aminek a szélessége a 100-ra nő, ha ráállunk az egérrel, és visszaáll az eredetire, ha lejövünk róla. Egészítsd ki az előző feladatot úgy, hogy a téglalap magassága a másfélszeresére növekedjen, amikor rákattintunk.

Elem keresés id alapján Amikor a sokszögre kattintunk, a kör egy adott tulajdonságát tudjuk változtatni. <![CDATA[ function fvnev(){ var obj = svgDocument.getElementById(“kor”); var attr = obj.getAttribute(“attribútumnév”); obj.setAttribute(“attribútumnév”, érték); }; … további függvények … //]]>

Feladatok Készíts egy sárga kört, aminek a sugara 10 egység. Készíts két “vezérlőgombot”. Az egyikre kattintva a kör sugara változzon a kétszeresére, a másik állítsa vissza az eredeti sugarat.

Szöveg módosítása Szöveget úgy tudunk módosítani, hogy lecseréljük annak „gyerekét”. <![CDATA[ function fvnev(){ var obj = svgDocument.getElementById(“szoveg”); var ujsz = svgDocument.createTextNode(“újszöveg”); obj.replaceChild(ujsz, obj.getFirstChild() ); }; //]]> …eredeti szöveg…

Feladatok Készíts egy lila és egy fekete négyzetet. Készíts egy olyan scriptet, ami kiírja annak a téglalapnak a színét, amelyik felett állsz.

Animáció & script Animáció elejéhez és végéhez is lehet scriptet kapcsolni, valamint az indítás és leállítás megoldható egy-egy esemény kiváltásával, pl:

Feladatok Készíts egy 40 egység sugarú piros kört, aminek a mérete megduplázódik, majd visszacsökken eredeti mértére, ha rákattintunk. Készíts egy olyan függvényt, ami a „Vege” üzenetet jeleníti meg, és hívd meg ezt a fv-t az animáció végén. / text-visibility vagy alert(‘Vege’) /

Egyéb – setInterval() var timer; function kezd(){ timer = setInterval(‘mozgat()’,5); }; function veg(){ clearInterval(timer); }; function mozgat(){ …kód… }; …