JavaScript a gyakorlatban

Slides:



Advertisements
Hasonló előadás
JQuery 8. előadás.
Advertisements

Grafikus tervezőrendszerek programozása 10. előadás.
1 Internet. 2 WWW  World Wide Web  Hivatkozásokkal összekötött hipermédia dokumentumok rendszere  Dokumentumok -> Weboldalak  A weboldalak hipertext.
Operációs rendszerek Beállítások.
Számítógépes ismeretek 5. óra
JQuery Kocsis Roland
FRAME-k (keretek). FRAME-k A frame-ek (keretek) segítségével a képernyőt felosztva egyszerre jeleníthetünk meg több webes dokumentumot a képernyőn. Fejlec.html.
JavaScript.
Mire jók a tabulátorok? Lehetőséget nyújtanak
Böngészők Internet Explorer Mozilla Firefox
Tömbök ismétlés Osztályok Java-ban Garbage collection
1 WEB TECHNOLÓGIÁK A JavaScript. 2 Bevezetés HTML dokumentumba beágyazott végrehajtható programok készítésére Kliens oldali, (JavaScript kompatibilis)
Internetes böngészőprogram használata, beállításai
Leírónyelvek: HTML és XHTML
Bekezdésformázás.
Tartalomjegyzék és tárgymutató
Dr. Pance Miklós – Kolcza Gábor Miskolci Egyetem
WEB Technológiák Dr. Pance Miklós – Kolcza Gábor Miskolci Egyetem.
Kliensoldali Programozás
Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Előadás JavaScript Tananyag: W eb - programozás.
HTML oldal felépítése Készítette: Pataki Arnold
Bekezdésformázás Fűrész Attila Salamon Róza (felkészítő tanár) 8.A
Zsombori Balázs Neumann János Számítástechnikai SZKI
,,Én így tanítanám az informatikát”
Webszerkesztés Stíluslapok (CSS).
Webszerkesztés Űrlapok a HTML-ben. Űrlap létrehozása Űrlapunk tartalma a … elemek között fog helyetfoglalni Egy lapon több űrlap is elhelyezhető Több.
JavaScript a gyakorlatban. 7. Gyakorlat DHTML  Fa-struktúrájú menük létrehozása  Legördülő menük létrehozása.
PHP VII Sütik, munkamenetek. Sütik Mi az a süti? A süti (cookie) állapotot tárol a felhasználó böngészőjében. Pl. ha egy oldalon beállítható, hogy milyen.
FTP File Transfer Protocol. Mi az FTP? Az FTP egy olyan protokoll, amely fájlok interneten keresztül végzett átvitelére szolgál. A felhasználók többsége.
Összetett adattípusok
Orovecz János Tartalomjegyzék  Az Ajax története  HTTP-kérések és válaszok  XMLHttp-kérések  Egyéb Ajax technika  XML.
Alapszint 2.  Készíts makrót, ami a kijelölt cellákat egybenyitja, a tartalmat vízszintesen és függőlegesen középre igazítja és 12 pontos betűméretűre.
Többtáblás adatbázisok
Formanyomtatványok létrehozása Dreamweaverrel E-business 6. előadás.
JavaScript a gyakorlatban. 1.Gyakorlat Mi a JavaScript?  A JavaScript nem Java! JavaScript futtatása JavaScript beillesztése XHTML-be Változók kezelése.
XHTML – a tanultak összefoglalása
JavaScript a gyakorlatban Gyakorlat DHTML  Rétegek szabályozása  HTML-elemek dinamikus változtatása.
Űrlapok és keretek.
1.3. Pascal program felépítése Az els ő program. Program ; … Begin … End. Program fej Deklarációs rész Végrehajtó rész.
Űrlapok.
1 Hernyák Zoltán Web: Magasszintű Programozási Nyelvek I. Eszterházy.
Script nyelvek alkalmazása a webkartográfiában 1/14 Script nyelvek alkalmazása a webkartográfiában Gede Mátyás MFTTT, március 22.
Delphi Készítette: Rummel Szabolcs Elérhetőség:
Support.ebsco.com Keresési figyelő létrehozása Oktatóprogram.
Honlap készítés 4. óra.
Web-grafika II (SVG) 7. gyakorlat Kereszty Gábor.
HTML 2. Űrlapok
További lehetőségek Weblapok programozása. Nyelvek csoportosítása Leíró nyelv (HTML, XML, …) Programozási nyelv  Szerver oldali (PHP, ASP, …)  Kliens.
Hálózat menedzsment Óravázlat Készítette: Toldi Miklós.
Webprogramozó tanfolyam
Power Lutár Patrícia Pellek Krisztián.  -ltLess than  -leLess than or equal to  -gtGreater than  -geGreater than or equal to  -eqEqual to  -neNot.
Webprogramozó tanfolyam Űrlapok (form-ok). Űrlapok a HTML-ben Biztosan mindenki találkozott már vele – Űrlap példapélda Felhasználási lehetőségei – Regisztráció,
Gazdasági informatikus - Szövegszerkesztés 1 Hosszú dokumentumok kezelése.
Első lépések a szövegszerkesztő használatában
Illés Zoltán ELTE Informatikai Kar
Web fejlesztés II. Illés Zoltán ELTE Informatikai Kar
Az m70.hu regisztrációs folyamatát követheti végig illusztrálva – klikkeivel. Minden kattintásra változik a kép, beúszik a magyarázó szöveg. Két dia között.
14. Szóbeli középszintű informatika tétel:
A Visual Basic és a programozás oktatása
A böngészőprogram használata. A böngészők értelmezik a html nyelvet, a javascript kódokat és a php kódokat is. Majd ezeket lefuttatja, és azok alapján.
SZÖVEGSZERKESZTÉS II. SZÖVEGSZERKESZTÉS LÉPÉSEI
Weboldalba ágyazott interaktív feladatok GeoGebra módra Papp-Varga Zsuzsanna ELTE IK Média- és Oktatásinformatika Tanszék
A Mozilla magyar nyelvű szerkesztőjének használata
Információ és kommunikáció
ListBox CheckedListBox TextBox
ComboBox A listák nagy helyet foglalnak a formokon, és az általuk felkínált elemek nem bővíthetőek a felhasználó által. Ezen problémák megoldására használhatjuk.
A CLIPS keretrendszer
Hernyák Zoltán Magasszintű Programozási Nyelvek I.
JavaScript a böngészőben
JavaScript a böngészőben
Előadás másolata:

JavaScript a gyakorlatban

3. Gyakorlat DOM (Document Object Model)

Document Object Model A Document Object Model (DOM) egy olyan modell, amely leírja, hogy a HTML dokumentum egyes elemei (bekezdések, beviteli mezők, képek) hogyan viszonyulnak a legfelső szintű struktúrához: a document objektumhoz. A DOM-on keresztül módosíthatjuk, törölhetjük az elemeket, ill. új elemeket hozhatunk létre.

DOM szintek: A Level 0 DOM (Nulladszintű DOM) a Netscape 2 böngészőben jelent meg. A Netscape 4 és Explorer 4 két eltérő ún. Intermediate DOM-ot támogatott. A Level 1 DOM (Elsőszintű DOM) más néven W3C DOM a Mozillában és az Explorer 5-ben lett bevezetve.

DOM

Dokumentum objektum modell egymással gyerek-szülő kapcsolatban álló objektumok rendszere a webdokumentum teljes tartalmát és minden összetevőjét magukban foglalják ezek is rendelkeznek tulajdonságokkal hivatkozás: szülőobjektum.gyermekobjektum.tulajdonság a különböző böngészők nem ugyanúgy kezelik ezeket a beépített objektumokat lehetnek plusz tulajdonságok az egyes böngészők esetében

Objektumok használata I Window objektum: (ez képviseli a böngeszőablakot) window.status: böngésző állapotsorának megváltoztatása window.alert,window.confirm, window.prompt: üzenetablakok jeleníthetőek meg Document objektum: a document a window gyermeke(ha csak egy ablakkal dolgozunk nem kell kiírni) document.URL: egyszerű szöveges mező, melynek értéket nem lehet módosítani document.title: a jelenlegi oldal címét határozza meg document.referrer: az előzőleg látogatott oldal címe document.lastModified: az utolsó módosítás dátuma, ami a kiszolgáló gépről érkezik document.bgColor, document fgColor: háttér és szövegszín document.linkColor, document.alinkColor, document.vlinkColor document.cookie: sütikre hivatkozhatunk(erről majd később) document.write: szöveget ír a weboldal ablakába, a HTML oldal részeként document.writeln: sorzáró szöveg kiírására alkalmas

Objektumok használata II Hivatkozások és horgonyok: <a name=”masodik”>; <a href=”#masodik”>; a link objektumokat a links tömbbel érhetjük el document.links.length: az oldalon lévő hivatkozások számát jelzi pl. link1 = links[0].href: az első hivatkozás URL-jét egy változóhoz rendeli anchor ill. anchors tömb, használata megegyezik a link-el History objektum: (a már látogatott oldalak adatait tartalmazza, metódusai segítségével előre vagy hatra lapozhatunk a listában) history.length: az objektum egyetlen tulajdonsága history.go(): a zárójelek közé egy poz. vagy neg. számot kell írni history.back(): az előző oldalt tölti vissza history.forward(): az előző oldalt tölti be

Objektumok használata III Location objektum: window.location.href=”http://www.uni-pannon.hu” location.protocol(http) location.hostname(www.jsworkshop.com) location.port(80) location.pathname(test.cgi) location.hash(a horgony neve, ha van ilyen, #anchor) location.reload() újratölti az oldalt, location.replace() egy másik oldalra ugrik, de a history törlődik Navigator objektum: a böngésző változatszámának adatait tartalmazza

DOM <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>3.1 feladat</title> </head> <body> <h1>3.1 feladat</h1> <p>Légy üdvözölve!</p> <p> <a href="javascript:history.back();"> <img src="left.gif" alt="left.gif" /></a> <a href="javascript:history.forward();"> <img src="right.gif" alt="right.gif" /></a> </p> </body> </html> JS0301.html

4. gyakorlat Események kezelése Ablakok, keretek Navigálás Űrlapok adatai Egyedi objektumok kezelése

Események kezelése Interaktívvá teszik a weboldalakat, eseményeket észlelhetnek, billentyű lenyomásra, egérmozgatásra és válaszolhatnak is azokra. minden esemény egy objektumhoz tartozik!!! minden eseménynek van neve, pl. onMouseOver (ehhez nem kell a <script> </script> elempárt használni) pl. <a href=”http://jsworkshop.com/” onMouseOver=”window.alert(‘A hivatkozás fölé vitted az egérmutatót’);”>Kattints ide!</a> ha több utasításra van szükségünk, megadhatunk függvényt is az eseménykezelőnek, amit a fejlécben deklarálunk így is megadhatunk egy eseménykezelőt: document.onMouseDown = mousealert();

Event objektum ez tartalmazza a megtörtént esetre vonatkozó adatokat (megint csak nincs egységes szabvány) Explorer: event.button: a lenyomott egérgomb, bal = 1; jobb = 2; event.clientX: x koordináta ahol az esemény bekövetkezett event.clientY: …. event.altkey: event.ctrlkey: event.shiftkey: event.keyCode: a lenyomott billentyű Unicode-ja event.scrElement: az objektum, ahol az esemény bekövetkezett Netscape: event.modifiers: ctrl,shift vagy alt event.pageX: …. event.pageY: …. event.which: egér vagy billentyű kód event.target: az objektum, ahol az esemény bekövetkezett

Események Az egér eseményei: A billentyűzet eseményei: onMouseOver – onMouseOut onMouseMove: az esemény az egér mozgásakor jön létre, (ezt a böngészők alapértelmezés szerint nem támogatják) az egérgombok figyelése: onClick függvény: pl.: <a href=”http://index.hu/” onClick=”alert(‘Most elhagyod ezt az oldalt.’);”>Kattints ide</a> onDblClick onMouseDown, onMouseUp: A billentyűzet eseményei: onKeyPress: onKeyDown,onKeyUp: event.which (Netscape), event.keyCode (Explorer)

Események kezelése <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>4.1 feladat</title> <script type="text/javascript" src="JS0401.js"></script> </head> <body onKeyPress="DisplayKey(event);"> <h1>4.1 feladat</h1> <p>Légy üdvözölve!</p> </body> </html> JS0401.html // JavaScript function DisplayKey(e){ if (e.keyCode) keyCode=e.keyCode; else keyCode=e.which; ch=String.fromCharCode(keyCode); window.status += ch; } JS0401.js

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>4.2 feladat</title> </head> <body> <h1>4.2 feladat</h1> <p>Légy üdvözölve!</p> <script type="text/javascript" src="JS0402.js"></script> <ul> <li><a href="JS01.ppt" onMouseOver="describe('1. óra összefoglalója'); return true;" onMouseOut="clearstatus();">1. óra összefoglalója</a></li> <li><a href="JS02.ppt" onMouseOver="describe('2. óra összefoglalója'); return true;" onMouseOut="clearstatus();">2. óra összefoglalója</a></li> <li><a href="mailto:kzst@vision.vein.hu" onMouseOver="describe('e-mail küldése'); return true;" onMouseOut="clearstatus();">e-mail</a></li> </ul> </body> </html> JS0402.html

Események kezelése JS0402.js // JavaScript function describe(text){ window.status=text; return true; } function clearstatus(){ window.status=" ";

Ablakok és keretek használata egyszerre több ablak is lehet a képernyőn, a window objektum mindig az aktuális ablakra vonatkozik új ablakot a window.open() metódussal hozhatunk létre pl. winobj = window.open(“URL”, “ablaknev”, “Beallitasok”); az első a cím, ha üresen marad akkor üres ablak töltődik be, a második a window objektum name tulajdonságát tartalmazza, a későbbiekben ezzel a névvel tudunk hivatkozni rá, a harmadik paraméter el is hagyható paraméterek: width, height(pixelben), location, directories, status, menubar, scroolbars, resizable(1 vagy 0) pl. KisAblak = window.open(””,”kicsi”,”width=100, height=100, toolbar=0, status=0); window.close(): ablakot ezzel tudunk bezárni, pl. KisAblak.close();

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>4.3 feladat</title> </head> <body> <h1>4.3 feladat</h1> <p>Légy üdvözölve!</p> <form name="winform" action="http://vision.vein.hu"> <input type="button" value="Új ablak megnyitása" onClick="NewWin=window.open('','NewWin', 'toolbar=no,status=no,width=200,height=100'); "> <p><input type="button" value="Új ablak bezárása" onClick="NewWin.close();" ></p> <p><input type="button" value="Fő ablak bezárása" onClick="window.close();"></p> </form> </body> </html> JS0403.html

Ablakok Ablakok mozgatása és átméretezése: Időzített tevékenység: a Netscape némi korlátozással de a Explorer 5-östől ezeket szabadon végezhetjük window.moveTo(): az ablakot új helyre mozgatja,X,Y koordináta megadása szükséges window.moveBy(): az ablakot a jelenlegi pozíciójához képest mozgatja el window.resizeTo(): ez állítja a méretet window.resizeBy(): a megadott értékekkel növeli vagy csökkenti Időzített tevékenység: window.setTimeout(): a megadott időtartam után, a megadott utasítás végrehajtódik, nem a programot állítja le, hanem csak annak végrehajtási idejét állítja be pl. varakozas = window.setTimeout(“alert(‘Letelt az idő!’)”,10000); meg is állíthatjuk a visszaszámlálást: window.clearTimeout(varakozas); parbeszedablakok: alert: egy általunk megadott szöveg és egy OK gomb található benne confirm: igen,nem kérdés, OK és Mégse gomb, true értekkel tér vissza ha OK, false ha Megse prompt: általunk megadott szöveg és egy beviteli mező, aminek érteke a visszatérési értek

Keretek pl.: <frameset rows=”*,*” cols=”*,*”> <frame name=”topleft” src=”topleft.htm”> <frame name=”topright” src=”topright.htm”> <frame name=”bottomleft” src=” bottomleft.htm”> <frame name=”bottomright” src=” bottomright.htm”> </frameset> minden egyes keretet a frame objektum képvisel a JavaScriptben ilyenkor a window objektum mindig az aktuális keretre vonatkozik a többi keretre a parent kulcsszó segítségével hivatkozhatunk, pl. parent.keret1 frames tömb: 0-val kezdődik a számozás itt is, a legkisebb értéket a dokumentum első frame-je kapja, pl.: parent.frames[0]

Űrlapok kezelése A HTML oldal minden egyes űrlapját egy form objektum képviseli a JavaScriptben a name mezőben beállított nevet veszi fel. Szintén van forms tömb, pl. document.forms[0] az egyes tulajdonságokat JavaScriptbol is beállíthatjuk, action: CGI program length: az űrlapon található elemek száma method: Post vagy Get target: az eredmények megjelenítésére szolgáló ablak,default: foablak onSubmit es onReset: ha visszatérési értékük true a benne foglaltatott utasításoknak akkor küldődik el illetve törlődnek az adatok elements tömb tartalmazza az űrlap elemeit, amikre a nevükkel is hivatkozhatunk, pl. document.megrendeles.elements[0] document.megrendeles.nev1 elements.length:

Űrlapok kezelése Szövegmező: - pl.: <input type=”text” name=”szoveg1” value=”hello” size=”30”> - text objektum: name, defaultValue(nem módosítható), value paraméterek document.szoveg1.value = “Nagy Jenő”; Többsoros szövegmező: <textarea> HTML elem Metódusok: focus(): aktívvá tesz egy mezőt, eben villog a kurzor blur(): a focus ellentéte select(): kijelöli egy mező tartalmat, szövegrészlet kijelölésére nincs lehetőség Eseménykezelők: onfocus: ha a szövegmező megkapja a fókuszt, akkor következik be onblur: ….. onchange: ha a felhasználó módosítja a szövegmezőt és arrébb viszi a fókuszt onselect: ha a felhasználó jelöli ki a szöveget vagy egy részét akkor következik be pl. <input type=”text” name=”szoveg1” onchange=”window.alert(‘Módosítva!’);”>

Űrlapok kezelése Gombok: type=submit, reset, button típusú gombok léteznek Jelölőnégyzet: <input type = “checkbox” name=”negyzet1” value=”yes” checked> (defaultChecked paraméter is létezik ezen kívül a JavaScriptben) click() metódus, onclick eseménykezelő Választógomb: <input type = “radio” name=”kapcs1” value=”első” checked> egyik lehetőség tulajdonsagai: name, length a radio objektumot tömbként kezelhetjük, minden gomb az alábbi tulajdonságokkal rendelkezik: value defaultChecked checked pl.: document.form1.kapcs1[0].checked = true; metódusa: click() eseménykezelője: onclick

Űrlapok kezelése Listák: (a listák objektuma a select, mely négy tulajdonsággal rendelkezik) name length(lehetőségek száma) options(a lehetőségeket tartalmazó tömb) selectedIndex(a kiválasztott lehetőség sorszamat adja vissza options tömb: length tulajdonsággal rendelkezik csak az options tömb minden eleme az alábbi tulajdonságokkal rendelkezik: index: a lehetőség sorszáma defaultSelected selected: a lehetőség aktuális állapota, true-false értéket vehet fel name: a NAME jellemző értéke, azaz a lehetőség neve text: a lehetőség szövege, értekét módosíthatjuk a select objektum metódusai: focus() blur() eseménykezelői: onfocus onblur onchange pl. index = document.urlap.lista.selectedIndex; value = document.urlap.lista.options[index].value;

JS0404.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>4.4 feladat</title> <script type="text/javascript" src="JS0404.js"></script> </head> <body> <h1>4.4 feladat</h1> <p>Légy üdvözölve!</p> <p>Töltsd ki az alábbi űrlapot! Ha kész vagy, nyomd meg az Ellenőriz gombot. Ha az adataidat rendesen kitöltötted, akkor elküldöm őket Neked e-mailben.</p> <form name="form1" action="mailto:kzst@vision.vein.hu" enctype="text/plain" onSubmit="return validate();"> <p><b>Név:</b> <input type="text" size="30" name="yourname"></p> <p><b>Cím:</b> <input type="text" size="40" name="address"></p> <p><b>Tel.: </b> <input type="text" size="15" name="phone"></p> <p><input type="submit" value="Ellenőriz"></p> </form> </body> </html>

Űrlapok kezelése JS0404.js // JavaScript function validate(){ if (document.form1.yourname.value.length < 1){ alert("Please enter your full name."); return false; } if (document.form1.address.value.length < 3){ alert("Please enter your address."); if (document.form1.phone.value.length < 3){ alert("Please enter your phone number."); return true;

Egyedi objektumok létrehozása első lépésben meg kell határoznunk az objektum nevét és tulajdonságait function Card(name,address,work,home) { this.name = name; this.address = address; this.workphone = work; this.homephone = home; } a this mindig az aktuális objektumra vonatkozik a függvény neve egyben az objektum neve is lesz

Metódusok létrehozása, beillesztése az objektumba function PrintCard(){ line1 = "<b>Name: </b>" + this.name + "<br />\n"; line2 = "<b>Address: </b>" + this.address + "<br />\n"; line3 = "<b>Work Phone: </b>" + this.workphone + "<br />\n"; line4 = "<b>Home Phone: </b>" + this.homephone + "<br />\n"; document.write(line1, line2, line3, line4); } be kell illeszteni a Card objektum létrehozó függvényébe: this.PrintCard = PrintCard; function Card(name,address,work,home){ this.name = name; this.address = address; this.workphone = work; this.homephone = home; this.PrintCard = PrintCard;

Objektumpéldányok létrehozása jeno = new Card(”Nagy Jenő”,”Egyetem u. 12”,”422-022”,”425-023”); nem szükséges az adatokat rögtön megadni, azokat kesébb is feltölthetjük: jeno = new Card(); megjelenítés: jeno.PrintCard();

Objektumpéldányok létrehozása JS0405.js //JavaScript function addhead (level) { html = "h" + level; text = this.toString(); start = "<" + html + ">"; stop = "</" + html + ">"; return start + text + stop; } String.prototype.heading = addhead; document.write ("Ez egy teszt".heading(2));