Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék 5. 6. Előadás JavaScript Tananyag: W eb - programozás.

Az előadások a következő témára: "Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék 5. 6. Előadás JavaScript Tananyag: W eb - programozás."— Előadás másolata:

1 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék 5. 6. Előadás JavaScript Tananyag: W eb - programozás

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

3 JavaScript beágyazása Html-be 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.

4 JavaScript beágyazása Html-be Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II. A 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.

5 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

6 JavaScript utasítások 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

7 JavaScript utasítások 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

8 JavaScript utasítások 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)

9 JavaScript utasítások 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

10 JavaScript utasítások 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 }

11 JavaScript fájl a html és a css fájl mellett Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II. Példa javascript kezelésre Megnyitom Folyt.> pelda.html fájlMenükezelés JavaScripttel

12 JavaScript fájl a html és a css fájl mellett Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II. Folyt: Első doboz tartalma Második doboz tartalma Harmadik doboz tartalma. Vigye az egeret a kép fölé! pelda.html fájl Menükezelés JavaScripttel

13 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II. JavaScript fájl a html és a css fájl mellett pelda.html fájlMenükezelés JavaScripttel

14 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II. JavaScript fájl a html és a css fájl mellett pelda.html fájlMenükezelés JavaScripttel

15 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II..elso_box { width:400px; height:100px; background:#CCCCCC; }.masodik_box1 { width:400px; height:300px; background:#66FF99; }.masodik_box2 { width:400px; height:300px; background:#CC6600; }.masodik_box3 { width:400px; height:300px; background:#FF0000; } JavaScript fájl a html és a css fájl mellett pelda.css fájl

16 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II. function dobozmutat(subject) { /*Létrehozunk egy függvényt ami egy értéket kap*/ switch(subject) { /*Vizsgáljuk az értéket és az alapján kezeljük a diveket, id-ket*/ case 1: /*A feltétel azt vizsgálja, hogy a div display(láthatóság) milyen állapotban van és ez alapján módosítja, hogy megjelenjen-e, vagy nem. A többi divet is kezelni kell, hogy egyszerre csak 1 legyen "nyitva" az innerhtml segítségével a linkek szövegét is módosítjuk*/ if((document.getElementById('doboz1').style.display=='') || (document.getElementById('doboz1').style.display=='block')) { document.getElementById('doboz1').style.display='none'; document.getElementById('doboz2').style.display='none'; document.getElementById('doboz3').style.display='none'; document.getElementById('gomb1').innerHTML = 'Megnyitom'; document.getElementById('gomb2').innerHTML = 'Megnyitom'; document.getElementById('gomb3').innerHTML = 'Megnyitom'; } Folyt.> JavaScript fájl a html és a css fájl mellett pelda.js fájl

17 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II. Folyt: else { document.getElementById('doboz1').style.display='block'; document.getElementById('doboz2').style.display='none'; document.getElementById('doboz3').style.display='none'; document.getElementById('gomb1').innerHTML = 'Bezárom'; document.getElementById('gomb2').innerHTML = 'Megnyitom'; document.getElementById('gomb3').innerHTML = 'Megnyitom'; } break; Folyt.> JavaScript fájl a html és a css fájl mellett pelda.js fájl

18 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II. Folyt.: case 2: if((document.getElementById('doboz2').style.display=='') || (document.getElementById('doboz2').style.display=='block')) { document.getElementById('doboz1').style.display='none'; document.getElementById('doboz2').style.display='none'; document.getElementById('doboz3').style.display='none'; document.getElementById('gomb1').innerHTML = 'Megnyitom'; document.getElementById('gomb2').innerHTML = 'Megnyitom'; document.getElementById('gomb3').innerHTML = 'Megnyitom'; } else { document.getElementById('doboz1').style.display='none'; document.getElementById('doboz2').style.display='block'; document.getElementById('doboz3').style.display='none'; document.getElementById('gomb1').innerHTML = 'Megnyitom'; document.getElementById('gomb2').innerHTML = 'Bezárom'; document.getElementById('gomb3').innerHTML = 'Megnyitom'; } break; Folyt.> JavaScript fájl a html és a css fájl mellett pelda.js fájl

19 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II. Folyt.: case 3: if((document.getElementById('doboz3').style.display=='') || (document.getElementById('doboz3').style.display=='block')) { document.getElementById('doboz1').style.display='none'; document.getElementById('doboz2').style.display='none'; document.getElementById('doboz3').style.display='none'; document.getElementById('gomb1').innerHTML = 'Megnyitom'; document.getElementById('gomb2').innerHTML = 'Megnyitom'; document.getElementById('gomb3').innerHTML = 'Megnyitom'; } else { document.getElementById('doboz1').style.display='none'; document.getElementById('doboz2').style.display='none'; document.getElementById('doboz3').style.display='block'; document.getElementById('gomb1').innerHTML = 'Megnyitom'; document.getElementById('gomb2').innerHTML = 'Megnyitom'; document.getElementById('gomb3').innerHTML = 'Bezárom'; } break; } Folyt.> JavaScript fájl a html és a css fájl mellett pelda.js fájl

20 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II. Folyt: function mutat(kep) { document.getElementById('kepes').innerHTML = ' '; } function eltuntet() { document.getElementById('kepes').innerHTML = ''; } JavaScript fájl a html és a css fájl mellett pelda.js fájl

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