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

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.

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

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

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.

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

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.

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

Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék CSS referencia: Cascading Style Sheets (CSS)

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.

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.

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.

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.

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

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: pelda5.html : DIV-ek meghívása.

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.

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.

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

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.

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.

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.

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

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

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

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)

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

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 }