Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II. Tananyag: 2. konzultáció CSSJavaScript.

Az előadások a következő témára: "Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II. Tananyag: 2. konzultáció CSSJavaScript."— Előadás másolata:

1 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II. Tananyag: 2. konzultáció CSSJavaScript

2 Cascading Style Sheets (CSS) HTML oldalak stíluslapjai A HTML oldalak szerzői oldalaikhoz egyedi stílust rendelhetnek A fejlesztők a stílust egyszer rögzítik, és hozzákapcsolhatják minden általuk készített HTML laphoz Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II.

3 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék <META …. cím … Külső.css fájl meghívása a.htm fájlba

4 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Külső.css fájlban deklarált stílusosztály behívása a.htm fájlba Példa: … A külső.css fájlban lévő B_stilusa stílusosztály elemeit örökölte. …

5 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék A.css fájl Egy css utasítás két részből áll: 1.a szelektor tartalmazza a formázandó HTML tag megnevezését (B); 2.a deklaráció végzi el a szelektorban meghatározott tag formázását.

6 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék 1. Példa: B { color: #FF0000 } A deklaráció is két részre bontható: egy tulajdonságra (color) és a hozzá tartozó értékre (red). A.css fájl

7 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék A.css fájl 2. Példa:.B_stilusa { font-size:24px; color: #FF0000; } A.B_stilusa egy globális stílusosztály. Deklarációjában 2 tulajdonság és 2 érték szerepel.

8 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Alapértelmezett stílustulajdonság beállítása Példa: BODY { color: black; background: url(hatter.gif) white; } A BODY szövegszínét feketére állítja be, háttérként képet rendel hozzá. Ha a kép nem érhető el, a háttérszín fehér lesz. A.css fájl

9 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék CSS referencia: http://www.freeweb.hu/htmlinfo/css_ref/cssmain.htm Cascading Style Sheets (CSS)

10 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Mintafájlok pelda1.css: tag stílusformázása. pelda1.html: A különböző html tag-ekhez hozzárendelhetőek stílusok, melyek öröklődnek.

11 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Mintafájlok pelda2.css: Globális stílusosztály definiálása. pelda2.html: A globális stílusosztály meghívása CLASS opcióval. STYLE opcióval való formázás.

12 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Mintafájlok pelda3.css: Globális stílusosztályok definiálása. pelda3.html: A globális stílusosztályok meghívása CLASS opcióval.

13 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék CSS: DIV-ek CSS: DIV-ek A DIV-ek úgynevezett befoglaló dobozok, melyek segítségével a weboldalt részekre bonthatjuk és elemenként kezelhetjük. A DIV-ek egymásba ágyazhatóak és stílusok rendelhetőek hozzájuk. A stílusokat öröklik a DIV-ben lévő html elemek is. Alkalmazása: tag-ek Alap tulajdonságai: width, height, border, margin, padding, és ezek altulajdonságai pl.: margin-left.

14 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Mintafájlok pelda4.css:.elso_div { width:300px; height:100px; border:1px red solid; } pelda4.html : Ez egy div kerettel a pelda4.css fájlból

15 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Mintafájlok pelda5.css: DIV-ek használata. A DIV-ek alapesetben egymás alatt jelennek meg. Tulajdonságok: http://www.freeweb.hu/htmlinfo/css_ref/cssmain.htm pelda5.html : DIV-ek meghívása.

16 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Mintafájlok pelda6.css: A float tulajdonsággal pozícionálni tudjuk a div-eket. A clear tulajdonság visszaállítja az alapállapotot. pelda6.html : DIV-ek meghívása.

17 Fontos! Az egymás mellett lévő div-ek sorában az első div-nek is meg kell adni a float:left-et. A másik dolog, hogy le kell zárni a clear:both- tal azt a szakaszt, ahol egymás mellett vannak a dobozok.

18 Folytatás a mintafájlok alapján! Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék

19 JavaScript JavaScript programrészletek tetszés szerint beépíthetők egy HTML fájlba, vagy különálló állományba (*.js) is. Kliensoldali JavaScript: Böngésző kezelése, felhasználókkal való kommunikáció Szerveroldali JavaScript: Webszerveren futó programok Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II.

20 JavaScript beágyazása Html-be 1 JavaScript kiíratás Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II.

21 JavaScript beágyazása Html-be 2 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II. ájlA utasítással egy területet jelölünk ki a HTML fájlon belül a JavaScript parancsaink számára Nincs szigorúan meghatározva, hogy egy HTML fájlon belül hol kell a JavaScript területet kijelölni. A JavaScript programozók között megszokássá vált, hogy ezt a HTML fájl fejrészében, a -ben adják meg. Így a kód rögtön a fájl megnyitása után értelmezésre kerül, és amint meghívják, rendelkezésre áll.

22 JavaScript deklarálások Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II. Kis- és nagybetűk különbözőek Saját változók használata, típusok: var kor = 20;// egész var kamatláb = 10.5// lebegőpontos (valós) var lakhely = „Pécs"; vagy ‘Pécs‘ //string var ffi = false;// logikai,false/true

23 JavaScript utasítások 1 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II. For ciklus for(inicializáló kifejezés;feltétel;léptető kifejezés) utasítás

24 JavaScript utasítások 2 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II. While while (feltétel) utasítás

25 JavaScript utasítások 3 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II. Do While do{ utasítások }while(feltétel)

26 JavaScript utasítások 4 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II. If … else … if (feltétel) utasítás1 else utasítás2

27 JavaScript utasítások 5 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II. Switch switch (kifejezés) { case érték1: utasítások break case érték2: utasítások break... default: utasítások }