OLI76.HU - Orosz Olivér weboldala

Programozás

menü: Programozásról általában Java kezdet Java leckék Java letöltések Pascal kezdet Pascal leckék Pascal letöltések FLASH kezdet FLASH leckék FLASH letöltések HTML5 kezdet HTML5 leckék HTML5 letöltések kapcsolódó fórum linkek

HTML5 leckék Példaprogramok: 2.-A "Hello World" , 4.-Téglalap mozgatása , 5.-Pattogó téglalap , 6.-Mozgatás billentyűzettel 2. példa -A "Hello World" Futás közben: A peldak1.rar fájl letöltése, mely tartalmazza ezt a kódot is. A kód: Ezt a kódot írjuk be egy szövegszerkesztőbe, majd mentsük el pelda1.html néven. Ha ezután megnyitjuk, akkor szürke alapon meg kell hogy jelenjen a "Hello World!" szöveg. ui: a zöld színű szövegrész begépelése nem kötelező, ez nem része a kódnak, csak magyarázó szöveget tartalmaz. Ugyanígy nem kell begépelni a sorok elején lévő sorszámot, ez sem része a kódnak, csak az EditPlus szövegszerkesztő sorszámozza a sorokat. Kód magyarázata: 1-7 sor: HTML fájl fejléc, információk a böngésző részére. 9. sor: kiírjuk a "HTML5 pelda 2.." szöveget, ez még HTML-ben történik, nem JavaScript (gyakorlatilag elhagyható). 10. sor: új sorba jöjjön ami jön (canvas). 12. sor: CANVAS létrehozása. "GAME" néven létrehoznk egy rajzterületet, egy képet, ami 400 pixel széles és 200 pixel magas. 13. sorban közöljük a böngészővel, hogy ezek után JavaScript kód következik, amíg azt nem mondjuk hogy vége -ez a 25. sorban lesz majd. 15-16. sor: létrehozzuk a "context" objektumot, amin keresztül már szabadon rajzolhatunk a CANVAS-ra. 19. sor: meghatározzuk azt a színt, amivel a következő rajzolás /írás végre lesz hajtva. 20. sor: téglalapot festünk az előbb megadott színnel, a téglalap pont akkora méretű, mint a CANVAS, így teljesen átfesti, letörli azt. 23. sor: megintcsak meghatározunk egy színt (ezzel akarunk írni). 24. sor: meghatározzuk a betü stílusát (félkövér), betü méretét (16 pixel) és típusát. 25. sor: kiírjuk a "Hello World!" szöveget a CANVAS megadott koordinátájára (X=60, Y=100). 27. sor: véget ért a JavaScript kód, újra HTML rész jön. 29-30. sor: HTML dokumentum vége. Színek beállításakor azokat RGB azaz vörös, zöld és kék színösszetevők alapján határozzuk meg. Mindhárom összetevő 0 és 255 közötti értéket vehet fel. Kérdezhetné valaki, hogy miért a 2. példakód a "Hello World" és miért nem az első. Azért, mert az első egy üres HTML dokumentum, amelybe majd a JavaScript kódunkat írhatjuk.