1 / 21

Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék

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

durin
Download Presentation

Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Vizuális és web programozás II. 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

  3. Vizuális és web programozás II. JavaScript beágyazása Html-be <html> <head> <title>JavaScript kiíratás</title> <script language="JavaScript">   <!--  alert(„Egy üzenetablakba megjeleníti ezt a szöveget"); -->   </script> </head> <body>   </body> </html> Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék

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

  5. Vizuális és web programozás II. JavaScript deklarálások • 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 Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék

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

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

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

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

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

  11. Vizuális és web programozás II. JavaScript fájl a html és a css fájl mellett <html> <meta …> <title>Példa javascript kezelésre</title> <link rel="stylesheet" href="pelda_css.css" type="text/css"/> <script src="pelda_js.js" type="text/javascript"></script> <body> <div class="elso_box"> <!-- onclick eseményt használunk a js függvény meghívására, href -re nincs szükségünk, nem akarunk frissíteni --> <a class="" onClick="dobozmutat(1)" style="cursor: pointer;" id="gomb1">Megnyitom</a><br> <a class="" onClick="dobozmutat(2)" style="cursor: pointer;" id="gomb2">Megnyitom</a><br> <a class="" onClick="dobozmutat(3)" style="cursor: pointer;" id="gomb3">Megnyitom</a><br> </div> Folyt.> • pelda.html fájl Menükezelés JavaScripttel Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék

  12. Vizuális és web programozás II. JavaScript fájl a html és a css fájl mellett Folyt: <div class="masodik_box1" style="display:none;" id="doboz1"> Első doboz tartalma </div> <div class="masodik_box2" style="display:none;" id="doboz2"> Második doboz tartalma </div> <div class="masodik_box3" style="display:none;" id="doboz3"> Harmadik doboz tartalma. <br> Vigye az egeret a kép fölé!<br><br> <!-- attól függően, hogy az egér a kép felett van-e meghívjuk a függvényeket --> <img src="kicsi.jpg" border="0" onmouseover="mutat('nagy.jpg');" onmouseout="eltuntet();"> </div> <!-- pozicionálunk egy divet minden fölé (úgy kell elképzelni, mint a layereket a photoshop-ban) --> <div id="kepes" style="z-index:10; position:absolute; top:20px; left:80px;"></div> </body> </html> • pelda.html fájl Menükezelés JavaScripttel Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék

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

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

  15. Vizuális és web programozás II. JavaScript fájl a html és a css fájl mellett .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; } • pelda.css fájl Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék

  16. Vizuális és web programozás II. JavaScript fájl a html és a css fájl mellett 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.> • pelda.js fájl Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék

  17. Vizuális és web programozás II. JavaScript fájl a html és a css fájl mellett 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.> • pelda.js fájl Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék

  18. Vizuális és web programozás II. JavaScript fájl a html és a css fájl mellett 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.> • pelda.js fájl Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék

  19. Vizuális és web programozás II. JavaScript fájl a html és a css fájl mellett • pelda.js fájl 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.> Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék

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

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

More Related