"Egységes erdélyi felnőttképzés Kárpát-medencei hálózatban" JAVA ALAPÚ WEBPROGRAMOZÁS. M6 Modul: A DOM Modell

Hasonló dokumentumok
Szabadkai Műszaki Szakfőiskola. Web programozás. dr Zlatko Čović

Programozás s 2 javascript

NONPROFIT ÉRDEKVÉDELMI SZERVEZETEK FEJLESZTÉSE (PL.3346) Java-script nyelv. programozás alapjai. Haramia László

Természetesen készíts egy csempe nevű könyvtárat és ide mentsd az index.html állományt.

12.óra jquery Framework #1. Gyimesi Ákos

Web Technológiák. Répási Tibor egyetemi tanársegéd. Miskolc Egyetem,Gépészmérnöki kar, Infomatikai és Villamosmérnöki Tanszékcsoport (IVM)

WEBFEJLESZTÉS 2. ŰRLAPOK, KÉPEK, TÁBLÁZATOK, BÖNGÉSZŐ

WEB TECHNOLÓGIÁK 4.ELŐADÁS

Széchenyi István Egyetem. Műszaki Tudományi Kar. Informatikai és Villamosmérnöki Intézet Távközlési Tanszék. Villamosmérnöki szak HTML

HTML. Ismerkedés a JavaScripttel. A JavaScript lehet ségei. A JavaScript kód helye. Önálló JavaScript fájlok

Objektumorientált programozás

Az image objektum. Az image eseménykezel i. Képek el zetes betöltése. Feladat. Váltóképek készítése

Bevezetés DOM Script beszúrás Szintaxis Események Beépített objektumok. Kliens oldali script nyelvek - JavaScript

Objektumorientált programozás Pál László. Sapientia EMTE, Csíkszereda, 2014/2015

Az alábbi kód egy JSON objektumot definiál, amiből az adtokat JavaScript segítségével a weboldal tartalmába ágyazzuk.

Kliens oldali script nyelvek - JavaScript

MicroSigner Közvetítő Szerver fejlesztői dokumentáció

Kliens oldali script nyelvek - JavaScript. JavaScript. JavaScript. amit nyújt:

Bevezetés Működési elv AJAX keretrendszerek AJAX

Objektumorientált programozás Pál László. Sapientia EMTE, Csíkszereda, 2014/2015

bb témakörök Programozás JavaScript nyelven A JavaScript szerepe Kliensoldali szkript alkalmazása JavaScript a weboldalon

AJAX Framework építés. Nagy Attila Gábor Wildom Kft.

Adabáziselérés ODBC-n keresztül utasításokkal C#-ban

Programozási technikák Pál László. Sapientia EMTE, Csíkszereda, 2009/2010

1 Rendszerkövetelmények

MicroSigner Közvetítő Szerver fejlesztői dokumentáció

TEXTAREA++ a JavaScript ereje

HTML, Javascript és az objektumok

Web programozás. 3. előadás

ECDL Információ és kommunikáció

Webkezdő. A modul célja

Az alábbiakban a portál felépítéséről, illetve az egyes lekérdező funkciókról kaphat részletes információkat.

Felhasználói Kézikönyv

Programozás BMEKOKAA146. Dr. Bécsi Tamás 10. Előadás

Vizuális, eseményvezérelt programozás I.

components : IContainer dx : int dy : int tmidőzítő : Timer toolstripseparator1 : ToolStripSeparator tsmikilépés : ToolStripMenuItem

A WiFi4EU megfelelőség-ellenőrző összetevő. Végrehajtási útmutató v1.0

Tartalom. A JavaScript haladó lehet ségei. Megjelenés. Viselkedés. Progresszív fejlesztés. A progresszív fejlesztés alapelvei

A gyakorlat során az alábbi ábrán látható négy entitáshoz kapcsolódó adatbevitelt fogjuk megoldani.

ABAP dictionary objektumok SAP adatmodell Táblák kezelése. Az SAP programozása 1. Tarcsi Ádám

Grafikus keretrendszer komponensalapú webalkalmazások fejlesztéséhez

Országos Területrendezési Terv térképi mel ékleteinek WMS szolgáltatással történő elérése, MapInfo program alkalmazásával Útmutató 2010.

Az alábbiakban szeretnénk segítséget nyújtani Önnek a CIB Internet Bankból történő nyomtatáshoz szükséges böngésző beállítások végrehajtásában.

Ozeki Weboffice. 1. ábra

CAD-ART Kft Budapest, Fehérvári út 35.

Számítógépes alapismeretek 2.

Felhasználói kézikönyv a WEB EDInet rendszer használatához

Cikktípusok készítése a Xarayában

Programozási technikák Pál László. Sapientia EMTE, Csíkszereda, 2009/2010

A TERC VIP költségvetés-készítő program telepítése, Interneten keresztül, manuálisan

Programozási technikák Pál László. Sapientia EMTE, Csíkszereda, 2009/2010

A JavaScript. Kovács Botond. Matematika-Informatika 641. Kolozsvár

TERC V.I.P. hardverkulcs regisztráció

Országos Területrendezési Terv térképi mellékleteinek WMS szolgáltatással történő elérése, MapInfo program alkalmazásával

(ArcCatalog, ArcMap)

Beszámoló átadása az OBR * -nek a Hessyn Éves beszámoló nyomtatványkitöltő programból

Multimédia 2017/2018 II.

Beszámoló átadása az OBR * -nek a Hessyn Éves beszámoló nyomtatványkitöltő programból

epos - Felhasználói leírás (MOBIL egyenleg feltöltés, Web áruházban történő vásárlás)

DKÜ ZRT. A Portál rendszer felületének általános bemutatása. Felhasználói útmutató. Támogatott böngészők. Felületek felépítése. Információs kártyák

MicroSigner Közvetítő Szerver fejlesztői dokumentáció

ÁNTSZ portál regisztráció, felhasználói adatok módosítása, jogosultságok felhasználói leírás [Alcím]

Dr. Pál László, Sapientia EMTE, Csíkszereda WEB PROGRAMOZÁS 6.ELŐADÁS. Fájlkezelés PHP-ben

QGIS szerkesztések ( verzió) Összeállította: dr. Siki Zoltán verzióra aktualizálta: Jáky András

JavaScript bűvésztrükkök, avagy PDF olvasó és böngésző hackelés

Neumann János Számítógép-tudományi Társaság Programozás, robotprogramozás szakkör Három félév 3 * 8 foglalkozás

C#---Access adatbáziskezelési gyakorlat

Jáva szigetétől a modern programozásig...

Endrıdi Tamás: Internet alapú alkalmazásfejlesztés c.

DOKUMENTUMOK TÖMEGES LETÖLTÉSE ÉTDR-BŐL

Opera. Az Opera a világ egyik legnépszerűbb, legnagyobb tudású és leggyorsabban fejlődő böngészője.

A MOKKA hitelesítő szoftver telepítése és használata

9. óra operációs rendszerek. Grafikus operációs rendszer

Thermo1 Graph. Felhasználói segédlet

Új Nemzedék Központ. EFOP pályázatok online beszámoló felülete. Felhasználói útmutató

Kitöltési segédlet az ASP űrlapok online beküldéséhez

Invitel levelezés címek esetén

Felhasználói kézikönyv

Az iskolai rendszerű képzésben az összefüggő szakmai gyakorlat időtartama. 10. évfolyam Adatbázis- és szoftverfejlesztés gyakorlat 50 óra

A Java nyelv. Dialógus ablakok. Elek Tibor

GLPI V Felhasználói leírás. Informatikai Technológiai és Üzemeltetési Igazgatóság

Hallgatói segédlet a tananyag megjelenítéséhez

A JavaScript főbb tulajdonságai

ÖNKORMÁNYZATOK ÉS KISTÉRSÉGI TÁRSULÁSOK RÉSZÉRE

Számítástechnika II. BMEKOKAA Előadás. Dr. Bécsi Tamás

Bejelentkezés. Gépelje be felhasználó nevét és jelszavát. Ha nem emlékszik az azonosítókra lépjen kapcsolatba ügyfélszolgálatunkkal.

A CAPICOM ActiveX komponens telepítésének és használatának leírása Windows7 operációs rendszer és Internet Explorer 8-es verziójú böngésző esetén

Felhasználói útmutató a portal.nakvi.hu oldalhoz

Mobil Telefonon Keresztüli Felügyelet Felhasználói Kézikönyv

Web programoz as

Ismerkedés az új felülettel

Jquery. Konstantinusz Kft.

3. Ezután a jobb oldali képernyő részen megjelenik az adatbázistábla, melynek először a rövid nevét adjuk meg, pl.: demo_tabla

Programozási technológia

Magyar Nemzeti Bank - Elektronikus Rendszer Hitelesített Adatok Fogadásához ERA. Elektronikus aláírás - felhasználói dokumentáció

MAGYAR ÁLLAMKINCSTÁR RÉSZÉRE

WEBFEJLESZTÉS 2. ADATBÁZIS-KEZELÉS, OSZTÁLYOK

Windows Application. Miklós Árpád Dr. Kotsis Domokos

15.4.2b Laborgyakorlat: Mappa és nyomtató megosztása, a megosztási jogok beállítása

CareLink Personal telepítési útmutató. Első lépések a CareLink Personal adatfeltöltéshez

Átírás:

"Egységes erdélyi felnőttképzés Kárpát-medencei hálózatban" JAVA ALAPÚ WEBPROGRAMOZÁS M6 Modul: A DOM Modell

Bevezető - platform- és nyelvfüggetlen programozási interfész - tartalom-, szerkezet- és stílus-elérés/módosítás - a dokumentumok szerkezetét és az elemekkel végezhető műveleteket definiálja - DOM szintek: - Level 0: 1996, nincs standard - Level 1: 1998, HTML és XML modellezése - Level 2: 2000, események, CSS - Level 3: 2004, billentyűzet események

DOM események - események előidézése - eseményekezelők - JavaScript és Java csatolás Abort - érvényesség: képekre - kiváltja: a kép feltöltésének megszakítása - használat: figyelmeztetés - eseménykezelő: onabort

Blur - érvényesség: ablakra és űrlapelemek - kiváltja: a beviteli fókusz elveszítése - használat: mező ellenőrzés, alapértelmezett szöveg, video leállítás, stb. - eseménykezelő: onblur Change - érvényes: beviteli mezők, szövegmező, választólista - kiváltja: adatmódosítás - használat: mező ellenőrzés, más elemre való kihatás, stb. - eseménykezelő: onchange

Click - érvényes: bármilyen megjelenített elemre - kiváltja: azegérrel való kattintás - használat: űrlap ellenőrzés, más elemre való kihatás, stb. - eseménykezelő: onclick Error - érvényes: képek, ablak - kiváltja: hiba az ablak vagy kép betöltésekor - használat: dokumentum szerkezetének korrigálása, kép lecserélése - eseménykezelő: onerror

Focus - érvényes: ablakra és űrlapelemek - kiváltja: a fókusz megszerzése - használat: a Blur-el összehangolt műveletek - eseménykezelő: onfocus KeyDown - érvényes: dokumentumok, képek, linkek, szövegmezők - kiváltja: a bilenytű lenyomása - használat: játékok készítése eseménykezelő: onkeydown

KeyUp - érvényes: dokumentumok, képek, linkek, szövegmezők - kiváltja: a lenyomott bilenytű felengedése - használat: a KeyDown-al összehangolt műveletek - eseménykezelő: onkeyup KeyPress - érvényes: dokumentumok, képek, linkek, szövegmezők - kiváltja: bilenytű megnyomása - használat: bevitli mezőknél ENTER vizsgálata - eseménykezelő: onkeypress

Load - érvényes: a dokumentum törzse (body) - kiváltja: a teljes oldal betöltése - használat: képek váltogatása képgalériák esetén - eseménykezelő: onload Unload - érvényes: a dokumentum törzse (body) - kiváltja: az oldal elhagyása - használat: figyelmeztetés módosítás elvesztéséről - eseménykezelő: onunload

MouseDown - érvényes: bármilyen megjelenített elemre - kiváltja: az egérgomb lenyomása - használat: saját görgetősáv - eseménykezelő: onmousedown MouseUp - érvényes: bármilyen megjelenített elemre - kiváltja: az egérgomb lenyomása - használat: a MouseDown-al összehangolt esemény - eseménykezelő: onmouseup

MouseOver - érvényes: bármilyen megjelenített elemre - kiváltja: az egeret az elem fölé visszük - használat: saját görgetősáv - eseménykezelő: onmousedown MouseOut - érvényes: bármilyen megjelenített elemre - kiváltja: az egeret az elem fölül elvisszük - használat: a MouseOver-al összehangolt esemény, menüpont - eseménykezelő: onmouseout

Move - érvényes: ablak - kiváltja: az ablak mozgatása - használat: kevésbé implementált esemény - eseménykezelő: onmove Reset - érvényes: reset típusú beviteli mező - kiváltja: az űrlap alapértékeinek visszaállítása - használat: extra beállítások, figyelmeztetés adatok elvesztéséről - eseménykezelő: onreset

Resize - érvényes: ablak - kiváltja: az ablak átméretezése - használat: oldal szerkezetének átalakítása, méret visszaállítása - eseménykezelő: onresize Submit - érvényes: űrlap - kiváltja: az űrlap elküldésének kezdeményezése - használat: űrlapellenőrzés, figyelmeztetés, szabályzat elfogadása - eseménykezelő: onsubmit

A HTML DOM szerkezet

A Window objektum - a böngésző ablakát írja le - az egész dokumentumra kiható metódusokat és tulajdonságokat tartalmaz - menüponthoz, beállításokhoz NEM férünk hozzá

document -a megjelenített dokumentumot lehet elérni -ezen keresztűl lehet ezt módosítani location - nem a DOM része, hanem JavaScript objektum -aktuális documentum URL-je -nem a document-hez tartozik! -JavaScript átirányítás: <script type="text/javascript"> window.location = "http://www.ms.sapientia.ro"; //document.location = "http://www.ms.sapientia.ro"; </script>

status - a böngésző üzenetsora -Firefox-ban kikapocsolva, ebgedélyezés: about:config; a dom.disable_window_status_change false-ra állítani -nem a document-hez tartozik! -JavaScript átirányítás: <script type="text/javascript"> window.status="az oldal betöltve!"; </script>

screen - nem a DOM része, hanem JavaScript objektum -képernyővel kapcsolatos információk -csak olvasható -képernyő felbontásának kiírása: <script type="text/javascript"> document.write( "felbontás: " + window.screen.width + "x"+window.screen.height ); </script>

history - nem a DOM része, hanem JavaScript objektum - eddig látogatott oldalak URL-jét tárolja - navigálás ezek között - csak olvasható - Navigálás a History objektummal: <body> <a href="javascript:history.back()">eloző oldal</a><br> <a href="javascript:history.forward()">következő oldal</a><br> <a href="javascript:history.go(-1)">előző oldal go-val</a><br> </body>

alert() - üzenetablak megjelenítése - példa: <script type="text/javascript"> alert("ma Mercédesz napja van,\n" + "köszöntse fel ilyen nevu hölgyismeroseit vagy az autóját :)!" ); </script>

confirm() - párbeszédablak megjelenítése - Ok és Cancel opciók - eredménye true vagy false - szabályzat elfogadása és átirányítás: <body> <script type="text/javascript"> if ( confirm("elfogadom a szabályzatot!") ) window.location="elfogadva.html"; </script> Ön nem fogadta el a szabályzatot! </body>

propmpt() - egysoros beviteli mező megjelenítése - kartakterláncot térít vissza - bekért oldal megnyitása: <body> <script type="text/javascript"> var url = prompt("url ahova lépjünk:"); if ( url!= null ) window.location = url; </script> </body>

setinterval(), clearinterval() - setinterval(): periodikusan végrehajt egy kód megadása - clearinterval(): a végrehajtott kód inaktiválása settimeout(), cleartimeout() - settimeout(): időzitett kód beállítása cleartimeout(): a kód inaktiválása, lejárta elött konkrét példák a későbbi modulokban

open() - új ablakban nyit meg egy megadott URL-t - URL megnyitása új ablakban: <body> <img src="kepek/kicsi.jpg" onclick= window.open("dom_close.html","","width=400,height=400"); > </body> close() - open-al megnyitott ablakban bezárása - ablak bezárása: <body> <img src="kepek/nagy.jpg"> <br><a href="javascript:window.close();">[bezár]</a> </body>