WEBFEJLESZTÉS 2. ŰRLAPOK, KÉPEK, TÁBLÁZATOK, BÖNGÉSZŐ
|
|
|
- Henrik Gáspár
- 8 évvel ezelőtt
- Látták:
Átírás
1 WEBFEJLESZTÉS 2. ŰRLAPOK, KÉPEK, TÁBLÁZATOK, BÖNGÉSZŐ Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány Péter sétány 1/C, Tel: (1) /1816
2 2 Ismétlés
3 JavaScript programozás 3 JavaScript C++ Vezérlési szerkezetek Operátorok Függvények Adatszerkezetek Elemi típusok Összetett típusok: tömb, objektum JSON
4 HTML és JavaScript webprogramozás 4 Elemek elérése document.getelementbyid $() Elemek tulajdonságai Eseménykezelés addeventlistener HTML és JavaScript szétválasztása HTML Megjelenített dokumentum DOM JavaScript interfész JavaScript
5 Események, nyelvi elemek 5 Eseménykezelés részletei Eseményt jelző objektum this Eseményobjektum megszerzése tulajdonságai Alapértelmezett művelet megakadályozása Események buborékolása Eseményt eredetileg jelző objektum Buborékolás megállítása Globális függvények és értékek NaN, isnan(), Infinity, isfinite() parseint(), parsefloat() encodeuri(), decodeuri() Beépített objektumok Math Date String Array
6 6 DOM műveletek
7 DOM-ok 7 DOM Core csomópontok fája ábrázolás művelet HTML DOM HTML elemek fája speciális elemek többletfunkcionalitás Speciális elemek Űrlapok Képek Táblázatok
8 DOM-ok 8 Document HTMLDocument HTMLHtmlElement HTMLHeadElement Node Element HTMLElement HTMLBodyElement HTMLParagrapghElement CharacterData Text HTMLDivElement Comment...
9 DOM 9 Document Object Model HTML és XML dokumentumok programozási felülete Objektumstruktúra, faszerkezet DOM csomópontok dokumentum elem attribútum szöveges csomópont
10 Példa 10 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> </head> <body> <p id="par1">bekezdés.</p> <p class="aktiv">még egy bekezdés.</p> <ul> <li>első</li> <li class="aktiv">második</li> </ul> <form name="form1"> <input type="radio" name="r1" value="elso"> <input type="radio" name="r1" value="masodik"> </form> </body> </html>
11 11 Példa DOM fája
12 Műveletcsoportok 12 Elemek kiválasztása Szerkezet bejárása Szerkezet módosítása attribútumok új elem/attribútum létrehozása módosítás törlés
13 Elemek kiválasztása 13 document getelementbyid(id) getelementsbyname(név) document/elem getelementsbytagname(elemnév) getelementsbyclassname(stílusosztályok) queryselector(css_szelektor) queryselectorall(css_szelektor)
14 14 console.log(document.getelementbyid('par1')); console.log(document.getelementsbyname('r1')); console.log(document.getelementsbytagname('p')); console.log(document.getelementsbyclassname('aktiv')); console.log(document.queryselector('ul > li')); console.log(document.queryselectorall('ul > li')); var body = document.body; console.log(body.getelementsbytagname('p')); console.log(body.getelementsbyclassname('aktiv')); console.log(body.queryselector('ul > li')); console.log(body.queryselectorall('ul > li')); <body> <p id="par1">bekezdés.</p> <p class="aktiv">még egy bekezdés.</p> <ul> <li>első</li> <li class="aktiv">második</li> </ul> <form name="form1"> <input type="radio" name="r1" value="elso"> <input type="radio" name="r1" value="masodik"> </form> </body>
15 Szerkezet bejárása 15 Bejárás (elem.tulajdonság) gyerekek childnodes, firstchild, lastchild szülő parentnode testvérek nextsibling, previoussibling Szöveges csomópontok is megjelennek nodetype === 3
16 Szerkezet módosítása 16 Attribútumok (elem) getattribute(név), setattribute(név, érték), hasattribute(név), removeattribute(név) Törlés, beszúrás (elem) removechild(elem), appendchild(elem), replacechild(elem, elem) Létrehozás document.createelement(elem) (elem.innerhtml) var p = document.createelement('p'); p.innerhtml = 'Új bekezdés'; p.setattribute('class', 'aktiv'); document.body.appendchild(p);
17 17 Űrlap és űrlapelemek
18 Tipikus űrlapműveletek 18 Interakció egyik legfontosabb eszköze az űrlap Adatok beolvasása, megadása Adatok ellenőrzése Referencia US/docs/Gecko_DOM_Reference
19 Űrlap tulajdonságai, metódusai, 19 eseményei <form> elem Tulajdonságai (analóg módszer) action method enctype name target Események submit (megállítható) reset Metódusok submit() reset()
20 Input elem 20 <input> type attribútuma jellege Közös tulajdonságai name form value defaultvalue disabled tabindex Közös metódusok focus() blur() select() click() Események click change focus blur
21 Szöveges beviteli mező(k) 21 type text password Tulajdonságok value readonly size maxlength
22 Checkbox 22 <input type="checkbox"> Jelölőmező Legfontosabb tulajdonság: checked írható, olvasható logikai érték defaultchecked
23 Radio gombok 23 <input type="radio"> name attribútum fogja össze őket Legfontosabb tulajdonsága: checked írható, olvasható logikai érték defaultchecked Melyik van kiválasztva? id alapján nehézkes name alapján kell
24 Radio gombok 24 <form id="form1"> <input type="radio" name="alma" value="piros"> <input type="radio" name="alma" value="sárga"> <input type="radio" name="alma" value="zöld" checked> <input type="radio" name="alma" value="barna"> </form>
25 Radio gombok 25 Name alapján document.getelementsbyname(nev) function radioerteke(nev) { var radiok = document.getelementsbyname(nev); var ertek; var i = 0; while (i < radiok.length &&!radiok[i].checked) { i = i + 1; } if (i < radiok.length) { ertek = radiok[i].value; } return ertek; }
26 Radio gombok 26 Name alapján document.getelementsbyname(nev) function radioerteke(nev) { var radiok = document.getelementsbyname(nev); for (var i = 0; i < radiok.length; i++) { if (radiok[i].checked) { return radiok[i].value; } } return undefined; } //Használata radioerteke('alma'); //"zöld"
27 Radio gombok 27 Name alapján document.getelementsbytagname(nev) elem.getelementsbytagname(nev) function radioerteke(nev, urlapazon) { var tarto = urlapazon?document.getelementbyid(urlapazon):document; var inputok = tarto.getelementsbytagname('input'); var ertek; var van = false; var i = 0; while (!van && i < inputok.length) { van = inputok[i].name == nev && inputok[i].checked; ertek = inputok[i].value; i = i + 1; } return ertek; }
28 Legördülő mező 28 <select> elem Tulajdonságai multiple size value selectedindex options tömb options.length options[i] options[i].value options[i].text options[i].selected Metódusok add(elem[, elemelé]) remove(index)
29 Legördülő mező 29 <select id="select1"> <option value="ertek1">szöveg1</option> <option value="ertek2">szöveg2</option> <option value="ertek3" selected>szöveg3</option> <option value="ertek4">szöveg4</option> </select>
30 Legördülő mező 30 Kiválasztott opció indexe, értéke, szövege var select = document.getelementbyid('select1'); select.value; //"ertek3" select.selectedindex; //2 select.options[select.selectedindex].value; //"ertek3" select.options[select.selectedindex].text; //"szöveg3"
31 Legördülő mező 31 Kiválasztott opció adatai function kivalasztottopcio(select) { if (select && select.selectedindex > -1) { return { value: select.value, text: select.options[select.selectedindex].text, index: select.selectedindex }; } return {}; } //Használata var select = document.getelementbyid('select1'); kivalasztottopcio(select); //Object {value: "ertek3", text: "szöveg3", index: 2}
32 Legördülő mező 32 Új opció hozzáadása //Új elem hozzáadása DOM műveletekkel function ujopcio(select, szoveg, ertek) { var ujop = document.createelement('option'); ujop.value = ertek; ujop.text = szoveg; select.add(ujop, null); } //vagy //Új elem hozzáadása innerhtml segítségével function ujopcio(select, szoveg, ertek) { var ujop = '<option value="' + ertek + '">' + szoveg + '</option>'; select.innerhtml += ujop; } //Használata var select = document.getelementbyid('select1'); ujopcio(select, 'új szöveg', 'ujertek');
33 Legördülő mező 33 Opció törlése function torolopcio(select, i) { select.remove(i); } //Használata var select = document.getelementbyid('select1'); torolopcio(select, 3);
34 Legördülő mező 34 Többszörös választás esetén <select id="select1" multiple size="4"> <option value="ertek1" selected>szöveg1</option> <option value="ertek2">szöveg2</option> <option value="ertek3" selected>szöveg3</option> <option value="ertek4">szöveg4</option> function kivalasztottopciok(select) { </select> } var ertekek = []; for (var i = 0; i < select.options.length; i++) { if (select.options[i].selected) { ertekek.push(select.options[i].value); } } return ertekek; //Használata var select = document.getelementbyid('select1'); kivalasztottopciok(select); //["ertek1", "ertek3"]
35 Többsoros szöveges beviteli mező 35 <textarea></textarea> Tulajdonságok value defaultvalue
36 36 Képek
37 Képek 37 <img src="kep.png" alt="szöveg" > Legfontosabb tulajdonsága: src Dinamikusan lecserélni a képet Minden egyéb általában stílusmanipuláció Tipikus képműveletek Kép lecserélése Kép előtöltése
38 Kép lecserélése 38 src attribútumának megváltoztatása <img src="alma.png" alt="alma" id="kep1"> var kep = document.getelementbyid('kep1'); kep.src = 'korte.png'; Hátránya: a kép letöltése a szerverről ekkor kezdődik el lassú lehet felhasználói élmény csökken Kép előtöltése
39 Kép előtöltése 39 Egy memóriabeli kép objektumba előre betöltjük a képet, így cserekor az azonnal rendelkezésre áll. Sok képet nem érdemes előre betölteni. Inkább folyamatosan töltsük be őket. var mem_kep = document.createelement('img'); mem_kep.src = 'korte.png'; //... //ha szukseges a csere: var kep = document.getelementbyid('kep1'); kep.src = mem_kep.src;
40 40 Táblázatok
41 Sorok és cellák kezelése 41 Táblázat rows insertrow(index) deleterow(index) Sor rowindex sectionrowindex cells insertcell(index) deletecell(index) Cella cellindex x-y koordináta: function xykoord(td) { var x = td.cellindex; var tr = td.parentnode; var y = tr.sectionrowindex; return { x: x, y: y }; }
42 42 BOM Browser Object Model A böngészővel kapcsolatos objektumok, metódusok
43 A böngészőablak 43 BOM DOM
44 Browser Object Model BOM 44 BOM: a böngészőablaknak megfelelő objektumhierarchia US/docs/DOM/window window location history screen frames document = DOM
45 Méretek és pozíció 45 window innerheight, innerwidth a tartalmi rész magassága és szélessége outerheight, outerwidth a böngészőablak magassága és szélessége screenx, screeny az ablaknak a főképernyőtől bal felső sarkától való távolsága scrollx, scrolly hány pixelnyire van gördítve a dokumentum scrollmaxx, scrollmaxy legfeljebb hány pixelnyit lehet gördíteni a dokumentumot
46 Méretek és pozíció 46 window.screen (az ablakhoz kapcsolódó képernyő) width, height a képernyő szélessége és magassága availwidth, availheight a képernyő rendelkezésre álló szélessége és magassága top, left, availtop, availleft, colordepth, pixeldepth ld. dokumentáció
47 Méretek és pozíció 47 window metódusok resizeto(szél, mag), resizeby(dszél, dmag) ablak átméretezése (megkötésekkel) moveto(x, y), moveby(dx, dy) ablak áthelyezése (megkötésekkel) scrollto(x, y), scrollby(dx, dy), scrollbylines(l), scrollbypages(p) a dokumentum görgetése adott pozícióra vagy valamennyivel
48 Új ablak 48 window.open var w = window.open(url, név, tulajdonságok); Paraméterek url: a betöltendő oldal URL-je ha üres üres ablak név: az új ablak neve ha létezik ebbe töltődik bele az url "_blank" új ablak nyílik tulajdonságok: ablaknyitási paraméterek
49 Új ablak 49 Ablaknyitási paraméterek US/docs/DOM/window.open "width=800,height=600,scrollbars=yes" ha üres új fül vagy alapértelmezett értékek ha nem üres akkor a nem megadott tulajdonságok automatikusan kikapcsoltak lesznek var w = window.open( ' 'ELTEablak', 'width=800,height=600,scrollbars=yes' );
50 Új ablak 50 Ablaknyitási paraméterek top, left width, height menubar, toolbar, location, status scrollbars
51 51 Új ablak
52 Új ablak 52 A window.open() által visszaadott objektum az új ablak window objektuma var w = window.open(url, név, tulajdonságok); w mindent tud, amit a window w.document, w.document.writeln() w.resizeto(szél, mag) stb, stb, stb.
53 Új ablak 53 Szülő ablak elérése a gyerekablakból w.opener Gyerekablak elérése a szülőablakból megnyitáskor visszaadott változó tárolása (w) hivatkozás újbóli megszerzése var w = window.open('', létező_név);
54 Oldal URL-je 54 window.location A betöltött oldal URL-jével kapcsolatos információk hash, host, hostname, href, origin, pathname, port, protocol, search var l = window.location; l.hash; //"#valami l.host; //"webprogramozas.inf.elte.hu:8080 l.hostname; //"webprogramozas.inf.elte.hu l.href; //az egész URL l.origin; //" l.pathname; //"/webfejl2.html l.port; //"8080 l.protocol; //"http: l.search; //"?alma=piros"
55 Oldal URL-je 55 window.location szöveget kapva értékül megpróbálja a szövegként megadott oldalt betölteni assign(url), replace(url), reload() window.location = " window.location.href = " window.location.assign(" window.location.replace(" window.location.reload();
56 Előzmények 56 window.history back() forward() go(n) window.history.back(); window.history.forward(); window.history.go(-3);
57 Keretek 57 Keretek: több HTML oldal több window objektum window.frames Adott ablak alá közvetlen tartozó ablakok window.frames[0] window.frames['nev'] window.parent A közvetlen felette lévő ablak window.top A legfelső ablak frame.html bal.html jobb.html felso.html also.html
![Keretek 58 window.frames.length; window.frames[0]; window.frames['bal']; window.frames['bal'].frames['felso'] window.](/docs-images/27/11687440/images/58-0.png "frames['bal'].frames['felso'].top frame.html bal.html jobb.html felso.html also.html")
58 Keretek 58 window.frames.length; window.frames[0]; window.frames['bal']; window.frames['bal'].frames['felso'] window.frames['bal'].frames['felso'].top frame.html bal.html jobb.html felso.html also.html
59 További window tulajdonságok 59 Tulajdonság name navigator status Események onload, onunload onabort, onclose oncontextmenu onresize, onscroll, onselect Metódusok alert, confirm, prompt settimeout, setinterval cleartimeout, clearinterval close print
60 Összefoglalás 60 DOM faszerkezet elérés, bejárás, módosítás HTML DOM űrlapok képek táblázatok BOM
"Egységes erdélyi felnőttképzés Kárpát-medencei hálózatban" JAVA ALAPÚ WEBPROGRAMOZÁS. M6 Modul: A DOM Modell
"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
HTML, Javascript és az objektumok
Javascript referencia Bevezetés A Javascript egy HTML fájlokba tervezett objektum-orientált nyelv. Alapjai a C és C++ nyelvek, így ezekre sokban hasonlít. Ez a dokumentum egy gyors összefoglaló a nyelvrõl,
Szabadkai Műszaki Szakfőiskola. Web programozás. dr Zlatko Čović chole@vts.su.ac.rs
Szabadkai Műszaki Szakfőiskola Web programozás dr Zlatko Čović chole@vts.su.ac.rs 1 DOM események (events) JavaScriptben interaktív programok készítésére az események által vezérelt programozási modellt
Internet technológiák
Szabadkai Műszaki Szakfőiskola Internet technológiák dr Zlatko Čović chole@vts.su.ac.rs 1 XHTML űrlapok 2 XHTML űrlapok Minden űrlap jelölőelem a: form{action, enctype, method} Űrlaptartalom /form jelölőelem
HTML. Ismerkedés a JavaScripttel. A JavaScript lehet ségei. A JavaScript kód helye. Önálló JavaScript fájlok
HTML Ismerkedés a JavaScripttel webprogramozó A weblapokat HTML nyelven készíthetjük el. A HTML egyszer leírónyelv, nem alkalmas válaszolni a felhasználóknak, nem tud döntéseket hozni, nem tud végrehajtani
Multimédia 2017/2018 II.
Multimédia 2017/2018 II. 1. gyakorlat HTML5, CSS3 alapok Alapvető HTML5 elemek Egyszerű HTML dokumentum Oldal cime
Készítette: Gál Tamás. A tananyag programozott változata itt érhető el: Webfejlesztés
HLTML 5 formok gyorstalpaló Készítette: Gál Tamás A tananyag programozott változata itt érhető el: Webfejlesztés (http://webfejlesztes.gtportal.eu/) Creative Commons Nevezd meg!-ne add el!-így add tovább!
Bevezetés DOM Script beszúrás Szintaxis Események Beépített objektumok. Kliens oldali script nyelvek - JavaScript
Kliens oldali script nyelvek - JavaScript Áttekintés Bevezetés HTML DOM JavaScript beszúrása JavaScript szintaxis JavaScript események Egyéb JavaScript beépített objektumok Áttekintés Bevezetés HTML DOM
12.óra jquery Framework #1. Gyimesi Ákos
12.óra jquery Framework #1 Gyimesi Ákos gyimesi.akos@gmail.com http://webprog.gy-i-m.com 12.óra jquery Framework #1 Miről lesz szó? JavaScript nyelv alapjai plusz: a JavaScript objektummodellje JavaScript
Kliens oldali script nyelvek - JavaScript
Kliens oldali script nyelvek - JavaScript Áttekintés Bevezetés HTML DOM JavaScript beszúrása JavaScript szintaxis JavaScript események Egyéb JavaScript beépített objektumok JavaScript a JavaScript a Web-en
Kliens oldali script nyelvek - JavaScript. JavaScript. JavaScript. amit nyújt:
Áttekintés Kliens oldali script nyelvek - JavaScript Bevezetés HTML DOM JavaScript beszúrása JavaScript szintaxis JavaScript események Egyéb JavaScript beépített objektumok 1 / 26 2 / 26 JavaScript JavaScript
WEBFEJLESZTÉS 2. ADATBÁZIS-KEZELÉS, OSZTÁLYOK
WEBFEJLESZTÉS 2. ADATBÁZIS-KEZELÉS, OSZTÁLYOK Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány Péter sétány 1/C, 2.420 Tel: (1) 372-2500/1816 2 Ismétlés Ismétlés 3 Fájl/Adatbázis 3 4 Szerver 2 CGI
PHP alapjai, bevezetés. Vincze Dávid Miskolci Egyetem, IIT
alapjai, bevezetés Vincze Dávid Miskolci Egyetem, IIT vincze.david@iit.uni-miskolc.hu PHP Personal Home Page (Tools) Script nyelv -> interpretált Elsősorban weboldal (dinamikus) tartalmak előállítására
Web programozás. 3. előadás
Web programozás 3. előadás Űrlapok form label for input type select, option value szöveges mező: text textarea jelszó: password rádiógomb: radio jelölőnégyzet: checkbox küldés gomb: submit Web programozás
NONPROFIT ÉRDEKVÉDELMI SZERVEZETEK FEJLESZTÉSE (PL.3346) Java-script nyelv. programozás alapjai. Haramia László
NONPROFIT ÉRDEKVÉDELMI SZERVEZETEK FEJLESZTÉSE (PL.3346) Java-script nyelv programozás alapjai Haramia László JavaScript szerepe Netscape fejlesztette ki LiveScript Interaktív weboldalak dinamikus kezelhetősége
Bevezetés Működési elv AJAX keretrendszerek AJAX
AJAX Áttekintés Bevezetés Működési elv AJAX-ot támogató keretrendszerek Áttekintés Bevezetés Működési elv AJAX-ot támogató keretrendszerek Áttekintés Bevezetés Működési elv AJAX-ot támogató keretrendszerek
Webprogramozás HTML alapok 2. 3. előadás
Webprogramozás HTML alapok 2. 3. előadás Hivatkozások - linkek Link: más webes tartalomra történő irányítás Hivatkozások - linkek abszolút hivatkozás fizika kar weboldala
A JavaScript főbb tulajdonságai
JavaScript alapok A JavaScript főbb tulajdonságai Script nyelv azaz futás közben értelmezett, interpretált nyelv Legfőbb alkalmazási területe: a HTML dokumentumok dinamikussá, interaktívvá tétele Gyengén
Lássuk, mik azok a szempontok, amelyeket be kell tartanunk egy HTML kód írásánál:
HTML 5 alapismeretek Bevezetés a HTML 5-be Mi is az a HTML? A HTML (HyperText Markup Language = hiperszöveges jelölőnyelv) egy leíró nyelv, amelyet direkt a weblapok létrehozására fejlesztettek ki, valamint
WEB TECHNOLÓGIÁK 4.ELŐADÁS
Dr. Pál László, Sapientia EMTE, Csíkszereda WEB TECHNOLÓGIÁK 4.ELŐADÁS 2014-2015 tavasz Layouts, Javascript Weboldalak elrendezése (layout) Két-oszlopos elrendezés Két-oszlopos elrendezés Három-oszlopos
Programozás s 2 javascript
Programozás s 2 javascript Az Internet programozása II. utolsó változtatás s 2008.04.27 27. Javascript Egy böngb ngészőhöz z készk szült script nyelv. Közvetlenül l a HTML kódba k kell beírni. Interaktivitást
HTML alapok 1. Minimális HTML file: <HTML> <HEAD> <TITLE> cím </TITLE> </HEAD> <BODY>... </BODY> </HTML> Formátum parancsok:
HTML alapok 1 Minimális HTML file: cím ... Formátum parancsok: dőlt szöveg félkövér aláhúzott új sor vízszintes vonal
WEB PROGRAMOZÁS 3.ELŐADÁS. Űrlapok
WEB PROGRAMOZÁS 3.ELŐADÁS Űrlapok 2 Globális és környezeti változók Globális és környezeti változók 3 A globális változók azok a változók, amelyeket a program legfelső szintjén, azaz a függvényeken kívül
TEXTAREA++ a JavaScript ereje
TEXTAREA++ a JavaScript ereje Bártházi András email: andras@barthazi.hu web: http://barthazi.hu tevékenységek: Weblabor szerkesztő NJSZT-WFSZ titkár stb. :) Fejlődő web A JavaScript a reneszánszát éli
Természetesen készíts egy csempe nevű könyvtárat és ide mentsd az index.html állományt.
Csempe kalkula tor A küldetésünk az, hogy segítsünk kiszámítani egy fürdőszoba csempeszükségletét (felületét). Sőt, ha a kalkulátort használó ügyfél elégedett egyből elküldheti az e-mail címét, hogy a
Objektumorientált programozás Pál László. Sapientia EMTE, Csíkszereda, 2014/2015
Objektumorientált programozás Pál László Sapientia EMTE, Csíkszereda, 2014/2015 7. ELŐADÁS Több információ az alkalmazásban - Fülek az űrlapon - Több űrlapos alkalmazások 2 Több információ az alkalmazásban
MicroSigner Közvetítő Szerver fejlesztői dokumentáció
MICROSEC ZRT. MicroSigner Közvetítő Szerver fejlesztői dokumentáció verzió: 1.0 Ivicsics Sándor, Máté Norbert, Vanczák Gergely 2016.06.09. Tartalom Általános információk... 2 ESign munkamenet létrehozása...
5-ös lottó játék. Felhasználói dokumentáció
5-ös lottó játék Felhasználói dokumentáció Feladat: JavaScript és CSS segítségével 5-ös lottó játék készítése. Futtatási környezet: A http://10.0.0.101/~szabby/ linkre kattintva megjelenik az oldal. Az
MicroSigner Közvetítő Szerver fejlesztői dokumentáció
MICROSEC ZRT. MicroSigner Közvetítő Szerver fejlesztői dokumentáció verzió: 1.0 Ivicsics Sándor, Máté Norbert, Vanczák Gergely 2016.06.09. Tartalom Általános információk... 2 ESign munkamenet létrehozása...
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)
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) Általános Informatikai Tanszék Iroda: Inf.Int. 108. Tel: 2108 Mai
JavaServer Pages (JSP) (folytatás)
JavaServer Pages (JSP) (folytatás) MVC architektúra a Java kiszolgálón Ügyfél (Böngésző) 5 View elküldi az oldal az ügyfélez View (JSP) Ügyfél üzenet küldése a vezérlőnek 1 3 4 Kérelem továbbítása a megjelenítőnek
Smalltalk 2. Készítette: Szabó Éva
Smalltalk 2. Készítette: Szabó Éva Blokkok Paraméter nélküli blokk [műveletek] [ x := 5. 'Hello' print. 2+3] Kiértékelés: [művelet] value az értéke az utolsó művelet értéke lesz, de mindet kiírja. x :=
Változók. Mennyiség, érték (v. objektum) szimbolikus jelölése, jelentése Tulajdonságai (attribútumai):
Javascript Változók Mennyiség, érték (v. objektum) szimbolikus jelölése, jelentése Tulajdonságai (attribútumai): Név Érték Típus Memóriacím A változó értéke (esetleg más attribútuma is) a program futása
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
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 Első félév A modul időtartama: A modul célja: A modul tartalma: 8 foglalkozás, alkalmanként
Az image objektum. Az image eseménykezel i. Képek el zetes betöltése. Feladat. Váltóképek készítése
Az image objektum Multimédiás alkalmazások készítése JavaScript segítségével webprogramozó a document leszármazottja az images tömbön keresztül érhet el complete : teljesen letölt dött-e? height, width
Az iskolai rendszerű képzésben az összefüggő szakmai gyakorlat időtartama. 10. évfolyam Adatbázis- és szoftverfejlesztés gyakorlat 50 óra
Az iskolai rendszerű képzésben az összefüggő szakmai gyakorlat időtartama 10. évfolyam: 105 óra 11. évfolyam: 140 óra 10. évfolyam Adatbázis- és szoftverfejlesztés gyakorlat 50 óra 36 óra OOP 14 óra Programozási
Szabadkai Műszaki Szakfőiskola. Web programozás. dr Zlatko Čović chole@vts.su.ac.rs
Szabadkai Műszaki Szakfőiskola Web programozás dr Zlatko Čović chole@vts.su.ac.rs 1 CLIENT-SERVER 2 Internet technológiák Kliens oldali: -(x)html -CSS -JavaScript -XML JavaScript XML PHP Szerver oldali:
Sakk játék. Feladat: JavaScript segítségével olyan programot kell írni, ami egy sakktáblát szimulál. Kiválasztásra változtatják a helyüket.
Sakk játék Felhasználói dokumentáció Feladat: JavaScript segítségével olyan programot kell írni, ami egy sakktáblát szimulál. Kiválasztásra változtatják a helyüket. Futtatási környezet: A http://10.0.0.101/~hgy/sakk/
Grafikus keretrendszer komponensalapú webalkalmazások fejlesztéséhez
Grafikus keretrendszer komponensalapú webalkalmazások fejlesztéséhez Székely István Debreceni Egyetem, Informatikai Intézet A rendszer felépítése szerver a komponenseket szolgáltatja Java nyelvű implementáció
SQL*Plus. Felhasználók: SYS: rendszergazda SCOTT: demonstrációs adatbázis, táblái: EMP (dolgozó), DEPT (osztály) "közönséges" felhasználók
SQL*Plus Felhasználók: SYS: rendszergazda SCOTT: demonstrációs adatbázis, táblái: EMP dolgozó), DEPT osztály) "közönséges" felhasználók Adatszótár: metaadatokat tartalmazó, csak olvasható táblák táblanév-prefixek:
Számológép. Bármilyen számítógépen működik, amin található böngésző és Java alkalmazás. Indító képernyő
Felhasználói dokumentáció Számológép Feladat: JavaScript és CSS segítségével számológép készítése. Futtatási környezet: A http://10.0.0.101/~szabby/szgep.html linkre kattintva megjelenik az oldal. Az oldal
AJAX Framework építés. Nagy Attila Gábor Wildom Kft. nagya@wildom.com
AJAX Framework építés Wildom Kft. nagya@wildom.com Mi az AJAX? Asynchronous JavaScript and XML Ennél azért kicsit több: Koncepció váltás a felhasználói interface tervezésben Standard kompatibilis HTML!
A Http és a PHP kapcsolata. Web-Sky Consulting Kft Tóth Imre 2009
A Http és a PHP kapcsolata Web-Sky Consulting Kft Tóth Imre 2009 Előadások címei 1. PHP nyelv alapjai 2. Objektumorientáltság a PHP-ben 3. A Http és a PHP kapcsolata 4. Adatbázis kezelés a PHP-ben 5. MVC
WEB TECHNOLÓGIÁK 2.ELŐADÁS
Dr. Pál László, Sapientia EMTE, Csíkszereda WEB TECHNOLÓGIÁK 2.ELŐADÁS 2014-2015 tavasz A HTML nyelv alapjai Mi a HTML? A HTML (angolul: HyperText Markup Language=hiperszöveges jelölőnyelv) Leíró nyelv,
HTML, XML szerkesztés
HTML, XML szerkesztés Vezető: Majzik Zsuzsa Előadó: Rigó Ernő http://gdf.tricon.hu/html Előzmények 1960-as évek: GML IBM SGML Standard Generalized Markup Language 1986-os
Az alábbi kód egy JSON objektumot definiál, amiből az adtokat JavaScript segítségével a weboldal tartalmába ágyazzuk.
JSON tutorial Készítette: Cyber Zero Web: www.cyberzero.tk E-mail: cyberzero@freemail.hu Msn: cyberzero@mailpont.hu Skype: cyberzero_cz Fb: https://www.facebook.com/cyberzero.cz BEVEZETÉS: A JSON (JavaScript
10.óra CodeIgniter Framework #3. Gyimesi Ákos
10.óra CodeIgniter Framework #3 Gyimesi Ákos gyimesi.akos@gmail.com http://webprog.gy-i-m.com Ismétlés Model View Controller Ismétlés Model application/models/books_model.php: class Books_model extends
7. Előadás. Makrók alkalmazása. Salamon Júlia. Előadás I. éves mérnök hallgatók számára
7. Előadás Makrók alkalmazása. Salamon Júlia Előadás I. éves mérnök hallgatók számára Feltételes ciklusok Ha a ciklusváltozó intervallumát, előre nem tudjuk mert például a program futása során megszerzett
HTML kódok. A www jelentése World Wide Web.
HTML kódok A www jelentése World Wide Web. A HTML (angolul: HyperText Markup Language=hiperszöveges jelölőnyelv) egy leíró nyelv, melyet weboldalak készítéséhez fejlesztettek ki. A honlap felépítése (csak
Webkezdő. A modul célja
Webkezdő A modul célja Az ECDL Webkezdő modulvizsga követelménye (Syllabus 1.5), hogy a jelölt tisztában legyen a Webszerkesztés fogalmával, és képes legyen egy weboldalt létrehozni. A jelöltnek értenie
DINAMIKUS MULTIMÉDIÁS TARTALOM...
PHP XML Tartalomjegyzék PHP DINAMIKUS MULTIMÉDIÁS TARTALOM...1 TARTALOMJEGYZÉK...1 EDDIG VOLT...1 MAI ANYAG...1 XML feldolgozása általában...2 A PHP és XML története...2 SAX (Simple API for XML)...2 1.
Objektumorientált programozás
JavaScript Objektumorientált programozás böngésző jó néhány objektumot bocsájt a rendelkezésünkre tulajdonságok var txt="hello World!" document.write(txt.length) Web programozás I. - Kecskeméti Fõiskola
WEBFEJLESZTÉS 2. ADATTÁROLÁS, FÁJLOK
WEBFEJLESZTÉS 2. ADATTÁROLÁS, FÁJLOK Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány Péter sétány 1/C, 2.420 Tel: (1) 372-2500/1816 2 Ismétlés Ismétlés 3 Dinamikus szerveroldali webprogramozás:
A JavaScript. Kovács Botond. Matematika-Informatika 641. Kolozsvár 2004 - 1 -
A JavaScript Kovács Botond Matematika-Informatika 641 Kolozsvár 2004-1 - 1. fejezet: Bevezetés: Mi a JavaScript? A JavaScriptet a Netscape fejlesztette ki. Ez egy olyan parancsnyelv, amely segítségével
Jquery. Konstantinusz Kft.
Konstantinusz Kft. 2011 1 Tartalomjegyzék 1 Tartalomjegyzék... 2 2 Bevezetés... 3 3 Használata... 4 3.1 A $ függvény... 4 3.2 Elemek kiválasztása... 5 3.3 Fontosabb függvények... 6 3.3.1 Animációk... 7
Webes űrlapok és az XForms ajánlás
Debreceni Egyetem Informatikai Kar Webes űrlapok és az XForms ajánlás Témavezető: Dr. Adamkó Attila egyetemi adjunktus Készítette: Hetei György programtervező Informatikus Debrecen 2010 Bevezetés 3 A HTML
Webes alkalmazások fejlesztése 4. előadás. Megjelenítés és tartalomkezelés (ASP.NET) Cserép Máté.
Eötvös Loránd Tudományegyetem Informatikai Kar Webes alkalmazások fejlesztése 4. előadás (ASP.NET) Cserép Máté mcserep@inf.elte.hu http://mcserep.web.elte.hu Készült Giachetta Roberto jegyzete alapján
Mobil Telefonon Keresztüli Felügyelet Felhasználói Kézikönyv
Mobil Telefonon Keresztüli Felügyelet Felhasználói Kézikönyv Tartalomjegyzék 1. Symbian rendszer...2 1.1 Funkciók és követelmények...2 1.2 Telepítés és használat...2 2. Windows Mobile rendszer...6 2.1
JavaScript változók Number Stringek:
Jellemzők: gyengén típusos: bármilyen típusú értéket értékül adhatunk egy változónak, és később másik típusú értéket is adhatunk ennek a változónak. objektum alapú: nem objektum orientált script nyelv
Sakk-játék. Bármilyen számítógépen működik, amin található böngésző és Java alkalmazás. Indító képernyő
Felhasználói dokumentáció Sakk-játék Feladat: JavaScript és CSS segítségével sakk-játék készítése. Futtatási környezet: A http://10.0.0.101/~szabby/ linkre kattintva megjelenik az oldal. Az oldal megtekintéséhez
Weblap készítése. Fapados módszer
Weblap készítése Fapados módszer A számítógép beállítása Ha a kiterjesztések nem látszanak, akkor a következőt kell tennünk: A számítógép beállítása Ha a kiterjesztések nem látszanak, akkor a következőt
Kompozit alkalmazások fejlesztése. IBM WebSphere Portal Server
Kompozit alkalmazások fejlesztése IBM WebSphere Portal Server Portletek -összefoglaló Portlet: portálba integrálható kisalkalmazás Szabványok JSR 168 Portlet 1.0 (IBM API) JSR 286 Portlet 2.0 Dióhéjban
MicroSigner Közvetítő Szerver fejlesztői dokumentáció
MICROSEC ZRT. MicroSigner Közvetítő Szerver fejlesztői dokumentáció verzió: 1.0 Ivicsics Sándor, Máté Norbert, Vanczák Gergely 2016.06.09. Tartalom Általános információk... 2 ESign munkamenet létrehozása...
Interaktív weboldalak készítése
Java programozási nyelv 2007-2008/ősz 7. óra Interaktív weboldalak készítése XHTML form Adatok feldolgozása szervletekkel legradi.gabor@nik.bmf.hu szenasi.sandor@nik.bmf.hu Interaktív weboldalak készítése
Villamosmérnöki szak Alkalmazott informatika mellék szakirány Laboratórium II. (VIAU5102) World Wide Web lapok készítése (Silabusz)
Villamosmérnöki szak Alkalmazott informatika mellék szakirány Laboratórium II. (VIAU5102) World Wide Web lapok készítése (Silabusz) HTML (Hyper Text Markup Language)...2 A HTML dokumentumokról...2 Néhány
WEBFEJLESZTÉS 2. MUNKAMENET-KEZELÉS, HITELESÍTÉS
WEBFEJLESZTÉS 2. MUNKAMENET-KEZELÉS, HITELESÍTÉS Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány Péter sétány 1/C, 2.420 Tel: (1) 372-2500/1816 PHP beadandó 2 Honlapról elérhető Labirintus-játék
SZERVER OLDALI JAVASCRIPT. 3. hét Javascript nyelvi elemek
SZERVER OLDALI JAVASCRIPT 3. hét Javascript nyelvi elemek NYELVI ALAPOK: Ez sajnos igen száraz anyag, Viszont a megértékhez és a nyelv elsajátításához kell. Próbáljuk meg random gifekkel feldobni. MIRŐL
Algoritmusok Tervezése. 5. Előadás Visual Basic 2. Dr. Bécsi Tamás
Algoritmusok Tervezése 5. Előadás Visual Basic 2. Dr. Bécsi Tamás Tömbök A deklarálás (egyszerűsített) szintaktikája: Dim varname[([subscripts])] [As type] [,...] Az indexek (subscripts) megadásának szintaktikája:
HTML é s wéblapféjlészté s
HTML é s wéblapféjlészté s 1. Melyik országból ered a hipertext-es felület kialakítása? USA Japán Svájc 2. Webfejlesztéskor ha a site-on belül hivatkozunk egy file-ra, akkor az elérési útnak... relatívnak
Országos Területrendezési Terv térképi mel ékleteinek WMS szolgáltatással történő elérése, Quantum GIS program alkalmazásával Útmutató 2010.
Országos Területrendezési Terv térképi mellékleteinek WMS szolgáltatással történő elérése, Quantum GIS program alkalmazásával Útmutató 2010. május 1. BEVEZETÉS Az útmutató célja az Országos Területrendezési
3. modul - Szövegszerkesztés
3. modul - Szövegszerkesztés Érvényes: 2009. február 1-jétől Az alábbiakban ismertetjük a 3. modul (Szövegszerkesztés) syllabusát, amely a gyakorlati vizsga alapját képezi. A modul célja Ezen a vizsgán
WEBES ALKALMAZÁSFEJLESZTÉS 1.
WEBES ALKALMAZÁSFEJLESZTÉS 1. Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány Péter sétány 1/C, 2.420 Tel: (1) 372-2500/1816 Tartalom 2 A böngésző és a JavaScript Browser Object Model Document
Webes alkalmazások fejlesztése 4. előadás. Megjelenítés és tartalomkezelés (ASP.NET)
Eötvös Loránd Tudományegyetem Informatikai Kar Webes alkalmazások fejlesztése 4. előadás (ASP.NET) 2016 Giachetta Roberto groberto@inf.elte.hu http://people.inf.elte.hu/groberto Nézetek kezelése Sok esetben
Az Educatio weboldalain elhelyezhető hirdetések technikai paraméterei
Az Educatio weboldalain elhelyezhető hirdetések technikai paraméterei Az Educatio Társadalmi Szolgáltató Nonprofit Kft. a következő feltételek szerint készült bannerek elhelyezését vállalja weboldalain:
Programozási nyelvek Java
Programozási nyelvek Java Kozsik Tamás előadása alapján Készítette: Nagy Krisztián 9. előadás Interface - típust vezet be, de osztálypéldány nem készíthető belőle (statikus típust ad) - több osztály is
ÁLTALÁNOS WEBLAPSZERKESZTÉSI TUDNIVALÓK ÁLTALÁNOS HTML KÓDOLÁSI TUDNIVALÓK
ÁLTALÁNOS WEBLAPSZERKESZTÉSI TUDNIVALÓK HTML dokumentum = weblap = weboldal = webpage Egy HTML dokumentum kiterjesztései: HTM vagy HTML STÍLUSLAP = Egy vagy több HTML utasítás, értékekkel ellátott paramétereinek
SZÁMÍTÓGÉPES PROBLÉMAMEGOLDÁS
SZÁMÍTÓGÉPES PROBLÉMAMEGOLDÁS 2.ELŐADÁS A VB programozási nyelv Az Excel programozása 2 A VB programozási nyelv Adattípusok Adatok kezelése Vezérlőszerkezetek Adattípusok és műveletek Egész adattípusok
Java grafikai lehetőségek
Szerver oldali Java programozás 2007-08/II. 3. óra Java grafikai lehetőségek Java grafikai lehetőségek Képek generálása servletekkel szenasi.sandor@nik.bmf.hu Adatbázisok elérése Témakörök Java grafikai
Összefüggő szakmai gyakorlat témakörei. 9-11. évfolyam. 9. évfolyam
3700 Kazincbarcika, Lini István -. E-mail: titkar@irinyi-ref.hu Tel: (06-8) 3-; Fax: (06-8) 3-763 Összefüggő szakmai gyakorlat témakörei 9-. évfolyam XIII. Informatika ágazat 9. évfolyam Információtechnológiai
Memória játék. Felhasználói dokumentáció
Memória játék Felhasználói dokumentáció Feladat: JavaScript segítségével, olyan programot írni, mely összekeveri a lapokat, majd a felhasználónak kell párosítani. HTML oldalba ágyazva és CSS-el formázva.
Összefüggő szakmai gyakorlat témakörei. 13 évfolyam. Információtechnológiai gyakorlat 50 óra
700 Kazincbarcika, Lini István. Email: titkar@irinyiref.hu Tel: (0648) 4; Fax: (0648) 76 Összefüggő szakmai gyakorlat témakörei évfolyam Informatikai rendszergazda 54 48 04 Információtechnológiai gyakorlat
A szerzõrõl... xi Bevezetés... xiii
TARTALOMJEGYZÉK A szerzõrõl...................................................... xi Bevezetés...................................................... xiii I. rész A Visual Basic 2005 környezet 1. óra Irány
bb témakörök Programozás JavaScript nyelven A JavaScript szerepe Kliensoldali szkript alkalmazása JavaScript a weboldalon
bb témakörök Programozás JavaScript nyelven A JavaScript nyelv szerepe A JavaScript nyújtotta lehet ségek A JavaScript beillesztése a weboldalakra A JavaScript szerepe weblapok dinamikus kezelhet sége
Programozás BMEKOKAA146. Dr. Bécsi Tamás 8. előadás
Programozás BMEKOKAA146 Dr. Bécsi Tamás 8. előadás Visszatekintés A Windows Console alkalmazások egy karakteres képernyőt biztosítottak, ahol a kimenet a kiírt szöveg, míg a bemenet a billentyűzet volt.
WEBSZERKESZTÉS ELMÉLETI VIZSGAKÉRDÉSEK
ECDL Webszerkesztés, syllabus 2.0 WEBSZERKESZTÉS ELMÉLETI VIZSGAKÉRDÉSEK 1. Mi az FTP? a) Az FTP a multimédiás dokumentumok leíró nyelve. b) Az FTP a weboldalon lévő kattintható elem, amellyel egy másik
BASH script programozás II. Vezérlési szerkezetek
06 BASH script programozás II. Vezérlési szerkezetek Emlékeztető Jelölésbeli különbség van parancs végrehajtása és a parancs kimenetére való hivatkozás között PARANCS $(PARANCS) Jelölésbeli különbség van
Pick Pack Pont kereső és boltválasztó alkalmazás
Pick Pack Pont kereső és boltválasztó alkalmazás www.pickpackpont.hu online.sprinter.hu/terkep Dokumentáció V5 2018. október Sprinter Futárszolgálat Kft. 2018. Minden jog fenntartva! Tartalomjegyzék Funkciók
10. évfolyam 105 óra 10817-12 azonosító számú Hálózatok, programozás és adatbázis-kezelés 105 óra Adatbázis- és szoftverfejlesztés gyakorlat tantárgy
9. évfolyam 70 óra 10815-12 azonosító számú Információtechnológiai alapok gyakorlat 70 óra Információtechnológiai gyakorlat tantárgy 70 óra Számítógép összeszerelése Számítógép szétszerelése. Pontos konfiguráció
Akadálymentes weboldalkészítés dióhéjban
Akadálymentes weboldalkészítés dióhéjban Készítette: Mezei Ádám Info-kommunikációs Akadálymentességi Műhelykonferencia 2008. november 20 Mi az oka, hogy NEM akadálymentes honlapokat készítünk? 1) Nem gondolunk
Rajz 06 gyakorló feladat
Rajz 06 gyakorló feladat Attribútumos szövegmező A feladat megoldásához szükséges fájlok: Rjz06k_Szelepház.ipt Feladat: Készítsen attribútumos szövegmezőt, ahol is a szövegmező rovatai a modell iproperties
Tájékoztató. Használható segédeszköz: -
A 12/2013. (III. 29.) NFM rendelet szakmai és vizsgakövetelménye alapján. Szakképesítés, azonosítószáma és megnevezése 54 481 06 Informatikai rendszerüzemeltető Tájékoztató A vizsgázó az első lapra írja
HTML ALAPOK. Abonyi-Tóth Andor, ELTE IK
HTML ALAPOK Abonyi-Tóth Andor, ELTE IK Fontos szabványok HTTP protokoll Protokoll = szabályrendszer HTTP HyperText Transfer Protocol (Hiperszöveg Átviteli Protokoll) a webböngésző (kliens) adatokat kérhet
1. Gyakorlat: Telepítés: Windows Server 2008 R2 Enterprise, Core, Windows 7
1. Gyakorlat: Telepítés: Windows Server 2008 R2 Enterprise, Core, Windows 7 1.1. Új virtuális gép és Windows Server 2008 R2 Enterprise alap lemez létrehozása 1.2. A differenciális lemezek és a két új virtuális
A HTML5 hirdetések előkészítéséhez szükséges műszaki előírások
A HTML5 hirdetések előkészítéséhez szükséges műszaki előírások Általános információk A hirdetések egy tag-be ágyazzuk be. A paramétereket az tag forráshivatkozásán keresztül adjuk át
HTML parancsok (html tanfolyam témakörei)
HTML parancsok (html tanfolyam témakörei) 1. Bevezető HTML, HEAD, TITLE parancs 2. Karakter formázás: félkövér, dölt, aláhúzott, fejléc: H1, H2, h6 csökkenő betűméret új bekezdés, új
PHP gyorstalpaló, avagy a Hello World-től az űrlapellenőrzésig
PHP gyorstalpaló, avagy a Hello World-től az űrlapellenőrzésig
API tervezése mobil környezetbe. gyakorlat
API tervezése mobil környezetbe gyakorlat Feladat Szenzoradatokat gyűjtő rendszer Mobil klienssel Webes adminisztrációs felület API felhasználói Szenzor node Egyirányú adatküldés Kis számítási kapacitás
WEBES ALKALMAZÁSFEJLESZTÉS 1.
WEBES ALKALMAZÁSFEJLESZTÉS 1. Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány Péter sétány 1/C, 2.420 Tel: (1) 372-2500/1816 Objektumok 2 Szinte minden objektum Alapkoncepció objektum-orientáltság
Választó lekérdezés létrehozása
Választó lekérdezés létrehozása A választó lekérdezés egy vagy több rekordforrásból származó adatokat jelenít meg. A választó lekérdezések a táblák, illetve az adatbázis tartalmát nem változtatják meg,
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
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 segédlet számítógép hálózatok tárgy gyakorlatához A jegyzet teljes