Információs technológiák 7. Ea: Nagyvilági teletext. Hon-laposítás

Információs technológiák 7. Ea: Nagyvilági teletext Hon-laposítás 165/1 B ITv: MAN 2015.09.08

Témakörök HTML CSS JavaScript AJAX jquery Webhely létrehozása 165/2

HTML alapok 1. A HTML dokumentum egy olyan szövegfájl, amely a szövegen kívül tartalmaz ún. "HTML-tag"-eket formázóutasításokat, valamint más megjelenítendő objektumokra történő hivatkozásokat is. Megjelenítése böngésző programmal lehetséges Kötött szerkezetű Fejléc Head Dokumentumtörzs Body A HTML utasítások a szövegben < és > jelek között szerepelnek Formázási lehetőségek: mint egy szövegszerkesztőben Betűtípus, méret, szín, háttérszín, bekezdés, táblázat 165/3

HTML alapok 2. <HTML> <HEAD> <TITLE> Az oldal címe </TITLE> </HEAD> <BODY> Helló Világ! </BODY> </HTML> 1. Jegyzettömb, beírás 2. Mentés: pl. prb.htm 3. 2x Megnézés böngészőben 165/4

Az igazi kód 165/5 B ITI T MAN

HTML alapok 3. Almalap elkészítése 1. Félkövér szöveg Oldal címe Normál szöveg több sorban Kép Link 165/6 B ITI T MAN

HTML alapok 4. Almalap elkészítése 2. <HTML> Félkövér <HEAD><TITLE> Almalap </TITLE></HEAD> <BODY> Sortörés <p> <b> Az alma: </b> <br> - Finom,<br> Bekezdés - Mókás,<br> - Szeletelt</p> <p> <img src="alma.jpg" width="170" height="176"> <br><br> AlmaInfo: <a href="http://www.almalap.hu/">az alma honlapja</a> </p> </BODY> </HTML> 165/7 Kép beszúrás: fájl neve, szélesség, magasság Link beszúrás: hivatkozás, megjelenő szöveg

Fejlécelemek (Head) <TITLE> Cím </TITLE> <BASEFONT SIZE=12> <META NAME="mező" CONTENT="érték"> <META NAME="Author" CONTENT="BitMan"> <META NAME="robot" CONTENT="deny"> Index/noindex, follow/nofollow, deny, all <META NAME="generator" CONTENT="jegyzettömb"> <META NAME="Keywords" CONTENT="oktatás, humor, bringa, zene"> <META NAME="Description" CONTENT="A legklasszabb lap a világon!"> 165/8

Dokumentumtörzs elemek (Body) <BODY BACKGROUND="fájlnév.kit" BGCOLOR="színkód" TEXT="színkód" LINK="színkód" VLINK="színkód" > Háttérkép Háttérszín Szövegszín Linkszín Bejárt link színe 165/9

165/10 FFF FFF CCC CCC 999 999 666 666 333 333 000 000 FFC C00 FF9 900 FF6 600 FF3 300 99C C00 CC9 900 FFC C33 FFC C66 FF9 966 FF6 633 CC3 300 CC0 033 CCF F00 CCF F33 333 300 666 600 999 900 CCC C00 FFF F00 CC9 933 CC6 633 330 000 660 000 990 000 CC0 000 FF0 000 FF3 366 FF0 033 99F F00 CCF F66 99C C33 666 633 999 933 CCC C33 FFF F33 996 600 993 300 663 333 993 333 CC3 333 FF3 333 CC3 366 FF6 699 FF0 066 66F F00 99F F66 66C C33 669 900 999 966 CCC C66 FFF F66 996 633 663 300 996 666 CC6 666 FF6 666 990 033 CC3 399 FF6 6CC FF0 099 33F F00 66F F33 339 900 66C C00 99F F33 CCC C99 FFF F99 CC9 966 CC6 600 CC9 999 FF9 999 FF3 399 CC0 066 990 066 FF3 3CC FF0 0CC 00C C00 33C C00 336 600 669 933 99C C66 CCF F99 FFF FCC FFC C99 FF9 933 FFC CCC FF9 9CC CC6 699 993 366 660 033 CC0 099 330 033 33C C33 66C C66 00F F00 33F F33 66F F66 99F F99 CCF FCC CC9 9CC 996 699 993 399 990 099 663 366 660 066 006 600 336 633 009 900 339 933 669 966 99C C99 FFC CFF FF9 9FF FF6 6FF FF3 3FF FF0 0FF CC6 6CC CC3 3CC 003 300 00C C33 006 633 339 966 66C C99 99F FCC CCF FFF 339 9FF 99C CFF CCC CFF CC9 9FF 996 6CC 663 399 330 066 990 0CC CC0 0CC 00F F33 33F F66 009 933 00C C66 33F F99 99F FFF 99C CCC 006 6CC 669 9CC 999 9FF 999 9CC 993 3FF 660 0CC 660 099 CC3 3FF CC0 0FF 00F F66 66F F99 33C C66 009 966 66F FFF 66C CCC 669 999 003 366 336 699 666 6FF 666 6CC 666 699 330 099 993 3CC CC6 6FF 990 0FF 00F F99 66F FCC 33C C99 33F FFF 33C CCC 339 999 336 666 006 699 003 399 333 3FF 333 3CC 333 399 333 366 663 3CC 996 6FF 660 0FF 00F FCC 33F FCC 00F FFF 00C CCC 009 999 006 666 003 333 339 9CC 336 6CC 000 0FF 000 0CC 000 099 000 066 000 033 663 3FF 330 0FF 00C C99 009 9CC 33C CFF 66C CFF 669 9FF 336 6FF 003 3CC 330 0CC 00C CFF 009 9FF 006 6FF 003 3FF Biztonságos színek és Hexa kódjuk. B I T MAN

Címszintek Címek, alcímek 6 szint mélységben <H1 ALIGN="irány"> Szöveg </H1> <H2 ALIGN="irány"> Szöveg </H2> NOWRAP Sortörés kikapcsolása <hr /> Vízszintes vonal <HTML><HEAD><TITLE> HTML próbalap </TITLE> </HEAD> <BODY> <H1 ALIGN="left"> Szöveg </H1> <H2 ALIGN="center"> Szöveg </H2> <H3 ALIGN="right"> Szöveg </H3> </BODY> </HTML> 165/11 B ITI T MAN

A dokumentum tagolása <DIV CLASS="osztály" ALIGN="irány"> </DIV> NOWRAP Sortörés kikapcsolása <P ALIGN="irány"> </P> Bekezdés <BR> Sortörés Nem tördelhető szóköz 165/12

Karakterformátumok <b>szöveg</b><br> félkövér <i>szöveg</i><br> dőlt <u>szöveg</u><br> aláhúzott <s>szöveg</s><br> áthúzott <tt>szöveg</tt><br> fixpontos <big>szöveg</big><br> nagyméretű <small>szöveg</smallbig><br> kisméretű H<sub>2</sub>SO<sub>4</sub><br> alsó index 16<sup>30</sup><br> felső index <FONT FACE="név" COLOR="szín" SIZE=szám> </FONT> 165/13

Karakterformátumok <HTML> <HEAD><TITLE> HTML próbalap </TITLE></HEAD> <BODY> <p> <font size="5" face="arial" color="red"> Arial, 5-ös méretű, piros szöveg. </font></p> <p> <font size="3" face="times" color="blue"> Times, 3-as méretű, kék szöveg. </font></p> </BODY> </HTML> 165/14

Felsorolás számozás <ul> <li>retek</li> <li>paprika</li> <li>hagyma</li> </ul> <ol> <li>retek</li> <li>paprika</li> <li>hagyma</li> </ol> 165/15

Képek <IMG SRC="elérési_út/fájlnév.kit"> <IMG ALIGN="irány" SRC="elérési_út/fájlnév.kit" HSPACE="vszám" VSPACE="fszám" WIDTH="szméret" HEIGHT="mméret" UNITS="egység" USEMAP="#jelző" ISMAP ALT="szöveg">. (H)(V)SPACE térköz (margó) Width, height kép mérete Units méretegység (pixel) Usemap, Ismap terület-érzékeny link Alt: Szöveges leírás 165/16

Usemap <MAP NAME="jelző"> <AREA SHAPE="alak" COORDS="koordináták" HREF="hivatkozás">... </MAP> <AREA SHAPE="circle" COORDS="kpx,kpy,sugár" <AREA SHAPE="rect" COORDS="bfx,bfy,jax,jay" <AREA SHAPE="polygon" COORDS="c1x,c1y,c2,c2y " 165/17

Usemap (2) <img src="logo1.jpg" usemap="#m1" width=960 height=240> <map name="m1"> <area shape="circle" coords="233,52,20" href=" "> <area shape="rect" coords="800,6,900,50" href=" "> </map> 165/18

Táblázatok Táblázat kezdete Sor 165/19 <TABLE> <TBODY> <TR> <TD> ID </TD> <TD>NÉV</TD> <TD>SZÜLÉV</TD> <TD>CÍM</TD> </TR> <TR><TD>1</TD> <TD>Béla</TD> <TD>1990</TD> <TD>Budapest</TD></TR> <TR><TD>2</TD> <TD>Géza</TD> <TD>1992</TD> <TD>Győr</TD></TR> <TR><TD>3</TD> <TD>Jenő</TD> <TD>1993</TD> <TD>Miskolc</TD></TR> </TBODY> </TABLE> Oszlop

Táblázatok (2) <TABLE cellspacing=1 cellpadding=6 width=282 border=1 BgColor="FFFF99"> <TBODY> <TR BgColor="FFFF33"> <TD width="15%"><p>id</p></td> <TD width="24%"><p>nev</p></td> <TD width="29%"><p>szulev</p></td> <TD width="32%"><p>cim</p></td></tr> <TR> Háttérszín <TD><P align=right>1</p></td> <TD><P>Béla</P></TD> <TD><P>1975</P></TD> Cellák közti távolság Cella szélesség <TD><P>Budapest</P></TD></TR> Teljes szélesség Cellamagasság Külső szegély, és mérete 165/20

Hiperhivatkozások a webhelyen index.html 165/21 www.uw.hu

Weblapon belüli linkek <HTML> <HEAD><TITLE> HTML próbalap </TITLE></HEAD> <BODY> Szöveg<br> <a name="hsz">hasznos szöveg</a> <br> Szöveg<br> Szöveg<br> Szöveg<br> Szöveg<br> Szöveg<br> Szöveg<br> Szöveg<br> Szöveg<br> Szöveg<br> Szöveg<br> Szöveg<br> <a href="#hsz">ugrás a Hasznos szöveghez</a> <br> Szöveg<br> </BODY> </HTML> 165/22

Webhelyen belüli és külső linkek <a href="mam.htm">mai menü</a> <a href="fotok/foto.htm">fotók</a> <a href="http://www.w3schools.com/">link a W3Schools weblapra</a> <a href="http://www.w3schools.com/" target="_blank" >Link a W3Schools weblapra</a> 165/23

Frame-ek (keretek) Ne használd! Terület felbontása kisebb egységekre <HTML> <HEAD><TITLE>Brekk</TITLE></HEAD> <frameset cols="60%,40%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> </frameset> </HTML> 165/24

Frame-ek (keretek) <HTML> <HEAD><TITLE>Kakukk</TITLE></HEAD> <frameset rows="60%,40%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> </frameset> </HTML> 165/25

IFrame Ezt használhatod! Weblap a weblapban <HTML> <HEAD><TITLE>Retek</TITLE></HEAD> <BODY> <iframe src="frame_a.htm" width="150" height="150"> </iframe> </BODY> </HTML> 165/26 B ITI T MAN

HTML űrlap <html> <head> <title> Bejelentkezés </title> </head> <body> <form> <p>kérem a nevemet: <br> <input type = text name="tm" size=17> </form> </body> </html> 165/27

HTML űrlap Beviteli elemek <input type= xxx > text password checkbox radio select submit reset 165/28 B ITI T MAN

HTML űrlap Beviteli elemek (2) <form> <p>kérem a nevemet: <br> <input type=text name="tm" size=17> </p> <p>kérem a jelszavamat: <br> <input type=password name="tm2" size=17> </p> <p>naplózás: <input type=checkbox name="tm3"> Titkosítás: <input type=checkbox name="tm4" checked="checked"> </p> 165/29

HTML űrlap Beviteli elemek <p>betűméret: S<input type=radio name="tmr" value="s"> M<input type=radio name="tmr" value="m"> L<input type=radio name="tmr" value="l" checked="checked"> XL<input type=radio name="tmr" value="xl"></p> Módszer: <SELECT NAME="menu"> <OPTION> Lassan, ráérek. <OPTION> Tempósan, sietek! <OPTION> Még nem vagy kész? </SELECT><br><br><br> <p><input type=submit name="kuldes" value="belépek"> <input type="reset" value="töröl"></p> </form> 165/30 B ITI T MAN

CSS Cascading Style Sheets CSS egy stílusleíró nyelv, mely a HTML vagy XHTML típusú strukturált dokumentumok megjelenését írja le. Vízesés stílusú lap Egymásba ágyazható stíluslapok Szövegek formázására, rétegek kezelésére HTML kódelemek módosítására 165/32 Forrás: Weblabor

A tartalom és a megjelenés szétválása 1990 1997-től HTML Struktúra Adat Dizájn HTML Struktúra Adat CSS Dizájn 165/33

CSS példa Formázás HTML parancsokkal <html><head><title>css példa</title></head> <body> <h1><font size="4" color="#a00000">bevezetés</font></h1> <p><font size="2" color="#00a000">a vers...</font></p> <h1><font size="4" color="#a00000">tárgyalás</font></h1> <p><font size="2" color="#00a000">a költő...</font></p> <h1><font size="4" color="#a00000">összefoglalás</font></h1> <p><font size="2" color="#00a000">végezetül...</font></p> </body> </html> 165/34

CSS példa Formázás css-el <html> <head> <title>css példa</title> <style type="text/css"> h1 { font-size: 20px; color: #a00000; } p { font-size: 12px; color: #00a000; } </style> </head> <body> <h1>bevezetés</h1> <p>a vers...</p> <h1>tárgyalás</h1> <p>a költő...</p> <h1>összefoglalás</h1> <p>végezetül</p> </body></html> 165/35

CSS példa Formázás css-el <html> <head> <title>css példa</title> <link rel="stylesheet" href="kulso.css" type="text/css"> </head> <body> <h1>bevezetés</h1> <p>a vers...</p> <h1>tárgyalás</h1> <p>a költő...</p> <h1>összefoglalás</h1> <p>végezetül</p> </body></html> 165/36

A CSS és a HTML viszonya Beágyazott stíluslap 165/37 HTML fejlécben, a style elemben (előző oldal példája) Külső stíluslap Külön fájlban (több weblaphoz egy stíluslap) HTML fejlécben, link hivatkozással: <head> <link rel="stylesheet" href="kulso.css" type="text/css"> </head> Elemhez rendelve <h1 style="font-size: 20px; color: #a00000;">bevezetés</h1> Importálva <style type="text/css">  </style>

Stílusok formátuma kiválasztó { tulajdonság } kiválasztó: mely HTML elemekre vonatkozzon a definíció, tulajdonság: a megjelenés paraméterei. Szinte tetszőleges sorrendiség: kiválasztó { tulajdonság } kiválasztó { tulajdonság } kiválasztó, kiválasztó { tulajdonság; tulajdonság; } 165/38

Kiválasztók Elem h1, h2, h3 { color: #a00000; } Osztály <style type="text/css">.fontos { color: #ff0000; } </style> <body> <p class="fontos" >A retekmag olyan...</p> 165/39

Kiválasztók (2) Azonosító Csak egyszer, egy elemre használható! <style type="text/css"> #st1 { color: #ff0000; } </style> <body> <p id="st1" >A retekmag olyan...</p> 165/40

Kiválasztók (3) Helyzet-érzékeny mód Pl. táblázatban, a félkövér betűk legyenek sötétkékek <style type="text/css"> table b { color: #0000a0; } </style> Tulajdonság alapján Pl. Beviteli mezőben a jelszó legyen kék <style type="text/css"> input[type="password"] { color: #0000a0; } </style> 165/41

Bekezdések megjelenése Betűkészletek 165/42 body { font-family: Arial, Helvetica, sans-serif; } Általános: serif, sans-serif, cursive, fantasy, monospace Dőlt betűforma body { font-style: italic; } Választék: normal, italic, oblique Félkövér betűk body { font-weight: bold; } Választék: lighter, normal, bold Betűméret body { font-size: 14px; } { font-size: 1.5em; } xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger body { font: italic bold 14px Arial, Helvetica, sans-serif; }

Bekezdések megjelenése (2) Szín h1 { color: black; } vagy { color: #FFFFFF; } Betűk közötti távolság h1 { letter-spacing: 10px; } (lehet negatív is) Igazítás h1 { text-align: center; } Választék: left, center, right, justify Link dekorációja a { text-decoration: none; } Választék: none, underline, overline, line-through, blink Szöveg első sorának behúzása p { text-indent: 40px; } 165/43

Bekezdések megjelenése (3) Betű transzformáció h1 { text-transform: uppercase; } Választék: none, capitalize, uppercase, lowercase Árnyékolás h1 { text-shadow: 5px 5px 3px #000000; } távolság lefelé, távolság jobbra, elmosóttság sugara, szín Szavak közti távolság p { word-spacing: 10px; } (lehet negatív is) Sormagasság p { line-height: 20px; } 165/44

Doboz modell 2 3 1 4 5 165/45 1 margó: a befoglaló doboz és a keret közti távolság 2 keret 3 kitöltés: a keret és a tartalom közti távolság 4 az elem magassága (IE: a doboz magassága!) 5 az elem szélessége (IE: a doboz szélessége!)

Doboz modell soron belül Jelenség: a piros keretű doboz középen (az elválasztásnál) kettétörik, és a keret mindkét sorban hat, viszont a törésnél, azaz a sorok megfelelő szélénél nem. Ha több sorba kerül az elem, akkor több helyen is kettétörik a doboz! 165/46

Háttér Háttérszín 165/47 body { background-color: white; } Háttérkép body { background-image: url(hattér.gif); background-position: top left; background-attachment: scroll; background-repeat: repeat; } background-position: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right background-attachement: fixed, scroll background-repeat: repeat, repeat-x, repeat-y, no-repeat body { background: white url(hattér.gif) no-repeat fixed center center; }

Keret IE Körben egyforma p { border: 2px solid blue; } szélesség, stílus, szín Oldalanként más-más p { border-left: 1px solid red; border-top: 3px double blue; border-right: 2px dotted green; border-bottom: 2px dashed black; } Stílus választék: none, hidden, dotted, dashed, solid, double, groove, ridge, inset outset 165/48

Keret Firefox Körben egyforma P { border-style:solid; border-color:#ffcc00; border-width: 5px;} Fontos a sorrend is! 165/49 B ITI T MAN

Keret Firefox Oldalanként más-más p { border-top-style:dotted; border-top-color:#ffcc00; border-top-width: 2px; border-right-style:solid; border-right-color:#cc00ff; border-right-width: 5px; border-bottom-style:dashed; border-bottom-color:#009900; border-bottomwidth: 4px; border-left-style:double; border-left-color:#ffcccc; border-left-width:10px; } 165/50

Körvonalak Kereten belül, az elem előtt (felett) Minden vonal mindig egyforma p { outline-width: 2px; outline-style: solid; outline-color: #000000; } szélesség, stílus, szín p { outline: 2px solid #000000; } 165/51

Margók Egyforma 165/52 body { margin: 0px; } Különböző p { margin: 0px 1px 2px 3px; } Felül, jobbra, alul, bal oldalon Csak kétféle body { margin: 10px 0px; } Függőleges, vízszintes Profi p { margin-left: 3px; margin-top: 0px; margin-right: 1px; margin-bottom: 2px; }

Kitöltés Egyforma body { padding: 5px; } Különböző p { padding: 0px 1px 2px 3px; } Felül, jobbra, alul, bal oldalon Csak kétféle body { padding: 10px 0px; } Függőleges, vízszintes Profi p { padding-left: 3px; padding-top: 0px; padding-right: 1px; 165/53 padding-bottom: 2px; }

Listaelemek (felsorolás, számozás) ul, ol (dd) ul { list-style-type: disc } ul { list-style-position: inside } ul { list-style-image: url(pont.gif) } ul { list-style: square inside url(pont.gif) } Stílus választék: none, disc, circle, square, decimal, decimalleading-zero, lower-roman, upper-roman, lower-alpha, upperalpha, lower-greek, lower-latin, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha Pozíció: inside, outside 165/54

Listaelemek (példa) <html><head><title>css példa</title> <style type="text/css"> ul { list-style-type: circle; list-style-position: inside; } ol { list-style-type: upper-roman; list-style-position: outside; } </style> </head> <body> <ul><li>retek</li><li>paprika</li> <li>hagyma</li><li>karfiol</li></ul> <ol><li>retek</li><li>paprika</li> <li>hagyma</li><li>karfiol</li></ol> </body> </html> 165/55

Pozícionálás Elemek helyzetének megadása h1 { position: static; } Választék: static ahol tartunk, relative ahol tartunk eltolással, absolute a dokumentumban rögzítve, fixed a képernyőhöz rögzítve #fejlec { position: relative; top: -15px; left: 10px; } #lablec { position: absolute; bottom: 10px; right: 10px; } #cimke { position: fixed; bottom: 10px; right: 10px; } 165/56

left right Elhelyezkedés méret A pozíció és a méret összefügg top top, bottom, height left, right, width height bottom width Ha kettőt megadunk, a harmadik kiadódik! 165/57 #szoveg { position: absolute; top: 10px; left: 10px; bottom: 10px; right: 10px; background: #eeeeee; } #szoveg { position: absolute; top: 10px; left: 10px; height: 380px; width: 780px; background: #eeeeee; }

Méretkorlátok Helyfoglaláshoz, vagy kilógás megakadályozására #content { min-height: 500px; } Választék: min-height, max-height, min-width, maxwidth Túlcsordulás.box { width: 200px; height: 200px; overflow: auto; } Választék: visible a túllógás is látszódjon, hidden a kilógás elrejtése, scroll görgetősáv használata, auto görgetősáv, de csak ha kell 165/58

Rétegek A sík harmadik dimenziója Z tengely Alapérték: 0 Z Y X #message { z-index: 1; } 1. réteg: háttérkép 2. réteg: B betű 3. réteg: BitMan 165/59

Rétegek (példa) <html><head><title>css példa</title></head> <body> <p><img src = "hatter.jpg" style = "position: absolute; top: 0px; left: 0px; z-index: 1" alt = "Első réteg" /></p> <p style = "position: absolute; top: 50px; left: 50px; z-index: 3; font-size: 20pt">BitMan</p> <p><img src = "BM.png" style = "position: absolute; top: 70px; left: 60px; z-index: 2" alt = "Második réteg" /></p> </body> </html> 165/60

CSS példák (1) <HTML><HEAD> <STYLE type="text/css"> H1 { font-family: Arial; font-size: 18pt; Color:red } P { font-size: 12pt; line-height:20pt } </STYLE> </HEAD><BODY> <H1>Csodás napunk van.</h1> <P>Süt a nap, a hőmérséklet 23 fok, Celsiusban. Néhány bárányfelhő béget a csodás égszínkék égbolton, a madarak szerelmesen csicseregnek a zöld levelű fák ágain. </P> </BODY> </HTML> 165/61

CSS példák (2) <HTML><HEAD> <STYLE type="text/css"> * {font-size:12pt} I {color:blue} I, B {font-size:18pt} H1 I {color:red} H1 > B {color:green} I + B {color:yellow} </STYLE> </HEAD><BODY> <H1><B>Ma</B> csodás <I>napunk <B>van</B></I>.</H1> <I>Holnap</I> <B>is</B> <B>csodás</B> nap lesz. </BODY> </HTML> 165/62

CSS példák (3) <HTML><HEAD> <STYLE type="text/css"> H3.red { font-family: Arial; font-size: 10pt; color:red} H3.green { font-family: Times New Roman; font-size: 14pt; color:green} </STYLE> </HEAD> <BODY> <H3 class="red">csodás napunk van.</h3> <H3 class="green">csodás napunk van.</h3> </BODY> </HTML> 165/63

JavaScript Objektum-orientált script nyelv, Közvetlenül a HTML kódba helyezhető Programozási lehetőségekkel bővíti a statikus HTML-t Lehetőségek: Interaktivitás Űrlapok adatellenőrzése, feldolgozása Sok olyan Csili-vili megoldás, ami valamire jó Sok olyan látványos Csili-vili megoldás, ami semmire sem jó!! Nem Java, de kicsit azért hasonlít! 165/65

JavaScript a weboldalon <html> <body> Ez egy hagyományos HTML dokumentum. <br> <script language="javascript"> document.write("ez itt JavaScript!") </script> <br>ismét HTML. </body> </html> 165/66

JavaScript a weboldalon (2) <html><head><title>teszt</title> <script language="javascript">  </script> </head><body> </body></html> HTML megjegyzés Bárhol lehet a dokumentumban, akár több helyen is. 165/67

JavaScript a weboldalon (3) <html><head><title>teszt</title> <SCRIPT SRC=jsc1.js></SCRIPT> </head><body> var a = "12"; jsc1.js <SCRIPT> var b = 5; function Teszt() { Teszt(); document.writeln(a + b+"<br>"); </SCRIPT> document.writeln(b + a+"<br>"); </body></html> document.writeln(a-b+"<br>"); document.writeln(a*b+"<br>"); document.writeln(a/b+"<br>"); } 165/68

Adatok, változók Négyféle típus Objektum Számérték (egész, valós) Szöveg (karaktersorozat) Logikai érték (true, false) Változó Var kulcsszó (de elmaradhat!) Globális vagy lokális hatókör Var a = "szöveg"; Var b = 23; 165/69 jel = true; (Var nélkül bárhol deklaráljuk, globális!)

Változók <html><head><title>teszt</title> <script type="text/javascript"> var v1 = "Globális változó"; function Teszt() { var v1 = "Lokális változó"; document.writeln(v1); // lokális v1 document.writeln(this.v1); // globális v1 } </script> </head><body> <SCRIPT language="javascript"> Teszt(); </SCRIPT> </body></html> 165/70 Függvény Utalás a globális változóra Függvény hívás

Operátorok Aritmetikai operátorok: + összeadás - kivonás * szorzás / osztás % modulo (egész osztás maradéka) Relációs operátorok: < kisebb <= kisebb v. egyenlő > nagyobb >= nagyobb v. egyenlő!= nem egyenlő == egyenlő === egyforma típus és érték 165/71 a=5, b="5" a == b igaz, a === b hamis

Operátorok (2) Logikai operátorok && AND OR! NOT Specialitások a++; b--; a növelése 1-el, b csökkentése 1-el b - = 4; b = b 4; a = b = a+b; 165/72 a = 12, b = 5; c = (a<b?a:b); (Ha a<b igaz, akkor c=a, egyébként c=b) document.writeln(c);

Automatikus típuskonvertálás <html><head><title>teszt</title> <script type="text/javascript"> var a = "12"; var b = 5; function Teszt() { document.writeln(a + b+"<br>"); document.writeln(b + a+"<br>"); document.writeln(a-b+"<br>"); document.writeln(a*b+"<br>"); document.writeln(a/b+"<br>"); } </script> </head><body> <SCRIPT language="javascript"> Teszt(); </SCRIPT> </body></html> 165/73

Utasítások Feltételes utasítás if (feltétel) utasítás; [else if (feltétel) utasítás;] [else utasítás;] if (a < b) x = a; else x = b; if (a == 2) For ciklus for ([kezdő kifejezés]; [ciklusfeltétel]; [léptető kifejezés]) utasítás; for (i=1; i<11; i++) document.writeln(i); Do ciklus do utasítás; while (feltétel); do {document.writeln(a); a++;} while (a<20); While ciklus while (feltétel) utasítás; while (a<25) {document.writeln(a); a++;} 165/74

Függvények function fgvnév(paraméter1, paraméter2,...) { utasítások 165/75 [return érték;] } function Kiir() { } document.writeln("eredmény: "+a+"<br>"); function napszak(ora) { } if (ora<12) return "délelőtt" else if (ora > 12) return "délután" else return "dél" B ITI T MAN

Dialógus ablakok Üzenet <head> <script type="text/javascript"> function figy() { alert("én szóltam!")} </script> </head> <body> <form> <input type="button" onclick="figy()" value="ne kattints ide!"> </form> </body> 165/76 B ITI T MAN

Dialógus ablakok Kérdés <head> <script type="text/javascript"> function kerd() { if (confirm("menjünk?")) { document.write("megyünk.") } else { document.write("nem megyünk.")} } </script></head> <body> <form> <input type="button" onclick="kerd()" value="menjünk?"> </form></body> 165/77

Dialógus ablakok Adatbevitel <head> <script type="text/javascript"> function bedat() { var name=prompt( "Hogy hívnak?","bogyó") if (name!=null && name!=""){ document.write( "Hello " + name + "! Én Bigyó vagyok!")} } </script></head> <body><form> <input type="button" onclick="bedat()" value="ismerkedjünk!"> </form></body> 165/78

Események Tipikus események egy weblapon egérkattintás egér mozgatása valamely pont fölött űrlapbeviteli mező kiválasztása vagy elhagyása űrlap elküldése vagy alaphelyzetbe állítása weblap vagy kép betöltődése Eseménykezelők segítségével dinamikus weboldalak hozhatók létre 165/79

Gyakran használt eseménykezelők Weboldal betöltésekor, elhagyásakor onload, - böngésző típusának lekérdezése onunload, - kilépés kezelése Űrlap kezelés onfocus belépés egy űrlap elembe onblur űrlap elem elhagyása onchange űrlap elem tartalma megváltozik onsubmit űrlap elküldése 165/80

Gyakran használt eseménykezelők (2) Egérmozgás onmouseover az egér egy elem fölé kerül onmouseout egér elhagyja az elemet Időzítő események gethours(), getminutes(), getseconds() settimeout 165/81

Fontosabb JavaScript objektumok String length(), touppercase(), match(), indexof(), replace() Date gettime() getfullyear(), getmonth(), getdate(), getday() Array concat(), sort(), push(), pop(), Math random(), max(), min(), round() 165/82

Böngésző objektumok window a hierarchia csúcsán áll böngészőablakot képvisel document weblap navigator a böngészőről tárol információt screen a kliens gép képernyőjéről rendelkezik információkkal history korábban meglátogatott web oldalak címét tárolja location az éppen aktuális oldal címét tartalmazza reload() vagy replace() függvényei segítségével új oldal tölthető be 165/83

Window objektum Metódusok open, showmodeldialog, showmodelessdialog, close, navigate Tulajdonságok document, event, history, location, navigator Események onload, onbeforeunload, onunload, onfocus, onblur Kollekció frames 165/84

Document objektum Metódusok open, write, close, createelement, insertadjacentelement, insertbefore Tulajdonságok body, cookie, title Események onclick, onpropertychange, onmousexxx, onkeyxxx, ondragxxx Kollekciók all, frames, forms 165/85

Sztring műveletek Megadás: var s1 ="retek", s2 = 'málna'; Számból sztring: d=szám.tostring(); Sztringből szám: e=s1*1; Sztring hossza: h=s1.length; Részsztring: d=s1.substr(3,7); Nagybetűssé alakítás: d=s1.touppercase(); Kisbetűssé alakítás: d=s1.tolowercase(); Adott sorszámú karakter: d=s1.charat(5); 165/86

Példa <html><head><title>teszt</title> </head><body> Négyzet kerülete és területe:<br><br> <form name="fel"> Oldal: <input size=10 name="ert"> <input type=button value="duplakatt: terület" ondblclick="document.fel.ert.value=document.fel.ert.value* document.fel.ert.value"> <input type=button value="katt: kerület" onclick="document.fel.ert.value=document.fel.ert.value*4"> </form> </body></html> 165/87

Példa 165/88

Előzmény A hagyományos weboldalak működési módja: A kliens HTTP kérést küld a szervernek egy weberőforrás lekérésére (tipikusan GET vagy POST) A szerver feldolgozza a kérést, és előkészíti a választ A szerver visszaküldi a választ (tipikusan (X)HTML) A kliens oldalon a TELJES oldal frissül (akkor is, ha annak egy részén egyáltalán nem történt változás) Nagy (részben felesleges) adatforgalom, hosszabb várakozási idő Ezt nevezik szinkron működési módnak 165/90

Előzmény A hagyományos weboldalak működési módja: 165/91

Igény Az adatforgalom csökkentésével gyorsítható az oldal működése Ha nem a teljes oldalt, csak annak a szükséges részét töltjük át a szerverről, és a kliensben dolgozzuk fel a visszakapott eredményt, gyorsul a működés, csökken az adatforgalom. Ez az aszinkron működési mód. Ennek megoldására alkalmas a JavaScript, így sok JavaScript alapú rendszer jött létre. 165/92

Megoldás Aszinkron működési mód: Egy JavaScript esemény hatására HTTP kérés küldődik (aszinkron módon) a szerverre A szerver feldolgozza a kérést, és előkészíti a választ A visszaküldött (szöveges vagy XML formátumú) választ a JavaScript alapú kezelő függvény értelmezi, és ennek alapján aktualizálja az oldal megfelelő részeit A legelterjedtebb megoldás: AJAX - Asynchronous JavaScript and XML 165/93

Megoldás Aszinkron működési mód: 165/94

AJAX Az Ajax interaktív web-alkalmazások létrehozására szolgáló webfejlesztési technika. 2005-ben publikálták, de ekkor már kb. 10 éve léteztek ilyen célú megoldások. Előzmények: IFRAME (HTML) 1996 JavaScript - 1997 XMLHttpRequest objektum (IE5) 1999 165/95

AJAX Az Ajax az alábbi szabványos, elterjedt technológiák együttese: HTML, XHTML megjelenítés, CSS megjelenítés DOM dinamikus felhasználói felület és interakció XMLHttpRequest aszinkron átvitel a kliens és a szerver között XML/XSLT adatcsere és adatmanipuláció JSON adatcsere JavaScript keretrendszer, mely összefogja a fenti technológiákat 165/96

DOM A Dokumentum Objektum Modell (Document Object Model / DOM) egy platform- és nyelvfüggetlen standard objektummodell amely a HTMLL, XHTML, XMLL valamint rokon formátumaiknak a szerkezetét és az objektumaikkal történő interakciókat modellezi. A DOM egymással gyerek-szülő kapcsolatban álló objektumok rendszere. A dokumentum tartalmát, illetve a dokumentum valamennyi összetevőjét magában foglalja. A beépített objektumok kezelése böngészőnként eltérő lehet, továbbá plusz tulajdonságok is lehetnek különböző böngészők esetén. 165/97

DOM 165/98

XML Az XML (extended Markup Language) a webes világban elterjedt HTML rokona. Úgynevezett "markup", azaz jelölőnyelv, vagyis olyan adatformátum, ahol az adat és az adatra vonatkozó metainformáció (ideértve az adatszerkezetet vagy a megjelenítési, formázási utasításokat) egy közös állományban található. 165/99

XML - példa <konyvek> <konyv> <szerzo>brian W. Aldiss</szerzo> <cim>amíg világ a világ</cim> </konyv> <konyv> <szerzo>brian W. Aldiss</szerzo> <cim>az arénában</cim> </konyv> <konyv> <szerzo>isaac Asimov</szerzo> <cim>alapítvány</cim> </konyv>... </konyvek> 165/100

XSLT Az XSLT, mint extensible Stylesheet Language Transformation, az az eszköz mely segítségével leírhatjuk az XML formátumú dokumentumokon elvégezendő transzformációkat. Ez a transzformáció leíró alkalmas XML-ből XML-be, de XML-ből bármilyen más szöveges formátumba történő transzformáció megadására is. A transzformációk megadása a dokumentum adott részeihez rendelt template-ekbe rendezett feldolgozási utasítások megadásával történik. 165/101

XSLT - példa <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform"> <xsl:template match="/"> <html> <head> <title>kedvenc könyveim</title> </head> <body> <h2>néhány ajánlott olvasnivaló</h2> <xsl:apply-templates /> </body> </html> </xsl:template> <xsl:template match="konyvek"> <ul id="lista"> <xsl:apply-templates /> </ul> </xsl:template> <xsl:template match="konyv"> <li><em><xsl:value-of select="cim" /></em> by <xsl:value-of select="szerzo" /></li> </xsl:template> </xsl:stylesheet> 165/102

A tartalom és a megjelenés szétválása 1997 Jelen Jövő HTML/JavaScript Struktúra Dizájn Adat Tulajdonság HTML/XHTML Struktúra Adat CSS Dizájn XML Adat XSLT Struktúra CSS Dizájn JavaScript Tulajdonság JavaScript Tulajdonság Forrás: Ken Westin 165/103

AJAX keretrendszerek jquery MooTools Prototype, Script.aculo.us YUI Library ASP.NET AJAX Spry framework (Adobe) Dojo Toolkit Ext JS 165/104

Az XMLHttpRequest API, illetve objektum Nem standard, de a legtöbb böngésző támogatja (böngészőfüggő eltérések) Használható JavaScript, Jscript, VBScript-ből Segítségével aszinkron kapcsolat hozható létre a kliens és szerver között A kérés feldolgozását követően a szerver válasza lehet: egyszerű szöveg XML objektum (JSON jelöléssel megadva) 165/105

XMLHttpRequest (folyt. 1) Az XMLHttpRequest objektum metódusai: open( method, URL ) open( method, URL, async ) open( method, URL, async, username ) open( method, URL, async, username, password ) send( content ) getresponseheader( headername ) setrequestheader( label, value ) getallresponseheaders() abort() 165/106

XMLHttpRequest (folyt. 2) Az XMLHttpRequest objektum mezői: readystate: 0 a kérés még nincs inicializálva 1 a kérés inicializálva van 2 a kérés el lett küldve 3 a kérés feldolgozás alatt áll 4 megérkezett a válasz onreadystatechange ennek ertékeként kell megadni a választ kezelő függvény nevet, mely meg fog hívódni a readystate minden egyes változásakor status a válasz HTTP kódja (200 = "OK") statustext a HTTP válasz kódjának szöveges változata responsetext a válasz karaktersorozatként responsexml a válasz XML formájában 165/107

XMLHttpRequest működése JavaScript a HTTP kérések küldéséért/válasz fogadásáért felelős speciális objektum lekérése (XMLHttpRequest) a kérés inicializálása (a keres objektum segítségével): a választ fogadó függvény kijelölése a kérés objektum onreadystatechange attribútumának beállítása GET (vagy POST) keres inicializálása (open függvény) adat elküldése (send függvény) a válasz kezelése: várakozás readystate==4-re (illetve HTTP 200 válaszra) válasz kinyerése responsetext (vagy responsexml) segítségével válasz feldolgozása HTML JavaScript kód betöltése 165/108 a kérést generáló HTML elem/esemény kijelölése B ITI TMAN N

Kérés objektum lekérése function getrequestobject(){ if (window.xmlhttprequest){ // IE7+, Firefox, Chrome, Opera, Safari return (new XMLHttpRequest()); } else if (window.activexobject){ // IE6, IE5 return(new ActiveXObject("Microsoft.XMLHTTP")); } else { // a böngésző nem támogatja egyik típusú kérésobjektumot sem return(null); } } 165/109

Kérés inicializálása function sendrequest(url){ } xmlhttp=getrequestobject(); // a valaszt kezel}o handler bealltasa: xmlhttp.onreadystatechange=handleresponse; xmlhttp.open("get",url,true); xmlhttp.send(null); Az open és send függvények paraméterei: open paraméterei: metódus (GET, POST, PUT), szerver-oldali erőforrás URL-je, true=aszinkron kérésküldés send paraméterei: POST adat (GET esetében null) 165/110

A válasz kezelése function handleresponse() { } if(xmlhttp.readystate==4) { // A szerverről érkező válasz kinyerése (responsetext adattag értéke) alert(xmlhttp.responsetext); } 165/111

Egyszerű példa szerver oldal nélkül <html> ajaxexample.htm <body><head> <meta content="text/html; charset=utf-8" http-equiv="content-type" /> <title>egyszerű AJAX példa</title> </head> <script src="ajaxexample.js" type="text/javascript"></script> <form> <input type="button" name="button" value="üzenet" onclick="sendrequest('message-data.htm');"/> </form> </body> </html> Válasz: (Normális esetben a szerver küldi!) 165/112 message-data.htm

ajaxexample.js var xmlhttp; function getrequestobject(){ if (window.xmlhttprequest){ // IE7+, Firefox, Chrome, Opera, Safari return (new XMLHttpRequest()); } else if (window.activexobject){ // IE6, IE5 return(new ActiveXObject("Microsoft.XMLHTTP")); } else { // a böngésző nem támogatja egyik típusú kérésobjektumot sem return(null); } } 165/113 B ITI T MAN

ajaxexample.js (folytatás) function sendrequest(url){ xmlhttp=getrequestobject(); // a választ kezelő handler (függvény) beállítása: xmlhttp.onreadystatechange=handleresponse; xmlhttp.open("get",url,true); xmlhttp.send(null); } function handleresponse(){ // ha szervertől várjuk a választ, a HTTP hibakódot is ellenőrizhetjük (status adattag) //if((xmlhttp.readystate==4) && (xmlhttp.status==200)) if(xmlhttp.readystate==4) { // A szerverről érkező válasz kinyerése (responsetext adattag segítségével) alert(xmlhttp.responsetext); } } B ITI T MAN 165/114

ajaxexample.js futtatás 165/115

JSON JavaScript Object Notation Kis méretű, szöveg alapú szabvány ember által olvasható adatcserére. A JavaScript nyelvből alakult ki egyszerű adatstruktúrák és asszociatív tömbök reprezentálására (a JSON-ban objektum a nevük). A JavaScripttel való kapcsolata ellenére nyelv független, több nyelvhez is van értelmezője. A JSON-t legtöbbször egy szerver és egy kliens számítógép közti adatátvitelre használják (legtöbbször AJAX technológiával), az XML egyik alternatívájaként. Általánosságban strukturált adatok tárolására, továbbítására szolgál. 165/116

XML JSON <xml> <csalad> <csaladnev>kiss</csaladnev> <gyereknev>ádám</gyereknev> <gyereknev>éva</gyereknev> <gyereknev>laci</gyereknev> <csalad> <csalad> <csaladnev>nagy</csaladnev> <gyereknev>istván</gyereknev> <gyereknev>mátyás</gyereknev> <gyereknev>izabella</gyereknev> <csalad> </xml> { "csalad": [ // lista jele { // asszociatív tömb jele "csaladnev": "Kiss", // normál kulcs:érték "gyereknev": ["Ádám", "Éva", "Laci"] // kulcs: [lista] }, { "csaladnev": "Nagy", "gyereknev": ["István", "Mátyás", "Izabella"] } ] } 165/117

Egyszerű JSON példa szerver oldal nélkül <html> ajaxexample_json.htm <body><head> <meta content="text/html; charset=utf-8" http-equiv="content-type" /> <title>egyszerű JSON pl.</title> </head> <script src="ajaxexample_json.js" type="text/javascript"></script> <form> <input type="button" name="button" value="infó" onclick="sendrequest('resp_json');"/> </form> <h2><span id="title"></span></h2><br> <span id="firstname"></span> <span id="lastname"></span><br> <span id="address"></span><br> <span id="phonenr"></span> </body> </html> 165/118

Egyszerű JSON példa szerver oldal nélkül { } "firstname": "Mici", "lastname": "Mackó", "address": { "streetaddress": "Odvas Tölgyfa utca 21.", "city": "Százholdas Pagony", "state": "Kerekerdő", "postalcode": "210021" }, "phonenumbers": [ "212 555-1234", "646 555-4567" ] resp_json 165/119

ajaxexample_json.js var xmlhttp; function getrequestobject(){ if (window.xmlhttprequest){ // IE7+, Firefox, Chrome, Opera, Safari return (new XMLHttpRequest()); } else if (window.activexobject){ // IE6, IE5 return(new ActiveXObject("Microsoft.XMLHTTP")); } else { // a böngésző nem támogatja egyik típusú kérésobjektumot sem return(null); } } 165/120 B ITI T MAN

ajaxexample_json.js (folytatás_1) function sendrequest(url){ xmlhttp=getrequestobject(); // a választ kezelő handler (függvény) beállítása: xmlhttp.onreadystatechange=handleresponse; xmlhttp.open("get",url,true); xmlhttp.send(null); } 165/121 B ITI T MAN

ajaxexample_json.js (folytatás_2) function handleresponse(){ if(xmlhttp.readystate==4) { var info = eval('(' + xmlhttp.responsetext + ')'); } 165/122 A "szerverről" érkező válasz esetünkben egy JSON kifejezés, ezt kiértékelve egy JavaScript objektumot kapunk document.getelementbyid("title").innerhtml="adatlap"; document.getelementbyid("firstname").innerhtml="<b>név: </b>"+info.firstname; document.getelementbyid("lastname").innerhtml=info.lastname; document.getelementbyid("address").innerhtml="<b>cím: </b>"+info.address.postalcode+" "+info.address.state+", "+info.address.city+", "+info.address.streetaddress; var tmp= "<b>telefonszám(ok):</b><ul>"; for(i=0;i<info.phonenumbers.length;i++){ tmp=tmp+"<li>"+info.phonenumbers[i]+"</li>" } tmp+="</ul>" document.getelementbyid("phonenr").innerhtml=tmp; } B ITI T MAN

ajaxexample_json.js futtatás 165/123

jquery JavaScript függvénykönyvtár Ingyenes, nyílt forráskódú Jellemzői: Eseménykezelés CSS manipuláció Effektek és animációk kezelése AJAX támogatás JavaScript Pluginek A jquery célja az, hogy amennyire csak lehetséges, leválassza a JavaScript kódot a HTML-ből, és különböző eseményvezérlőkön, és azonosítókon keresztül kommunikáljon a weblap HTML elemeivel. Jelmondata: "write less, do more" 165/125

jquery Használata Letöltés: http://jquery.com/ Verzió: 2.1.3 (15.02.12) Beillesztés egy html oldalba: <HEAD> <script type="text/javascript" src="jquery-2.1.3.js"></script> </HEAD> Kipróbálása: <BODY> <SCRIPT> $(document).ready(function(){ alert('a JQuery használható!'); }); </SCRIPT> 165/126

JQuery Használata: A jquery használatához alapszintű HTML és CSS ismeret szükséges hiszen ezen elemek manipulálására szolgál. A jquery úgy épül fel, hogy kiválasztunk elemeket és azokra hívunk meg függvényeket. Az eseményhez kötés is úgy történik, hogy megívunk egy függvényt, aminek átadjuk, hogy egy esemény (pl. kattintás) hatására mit csináljon az adott elem. 165/127

jquery példa <!DOCTYPE HTML PUBLIC "HTML 4.0 Transitional"> <HTML> <HEAD> <TITLE> New Document </TITLE> <script type="text/javascript" src="jquery-2.1.3.js"></script> </HEAD> <BODY> <div id="katt" > <font color="red"> Kattints ide </font> </div> <img id="kep" src="light.jpg" alt="" width="400" height="225" style="position: relative; left: 10px;" /> 165/128 JQuery betöltése katt azonosítójú terület kep azonosítójú terület

jquery példa (folytatás) <script> $('#katt').click(function() { $("#szoveg").hide(); $('#kep').animate({opacity: 0.25, left: '+=50', height: 'toggle' }, 5000, function() { $("#szoveg").html("<h3>"+ "Az animációhoz kattints ismét a linkre" + "</h3>").fadein("slow"); }); }); </script> A katt területre kattintva elrejti a szoveg -et, és animálja a kep -et. Az animáció után kiírja lassan a szoveg -et. <font color="blue"> <div id= "szoveg" style="display: none;"></div> </font> </BODY> </HTML> 165/129 szoveg azonosítójú terület

jquery példa 165/130

Alapvető szintaxis $(szelektor).művelet() $ - jquery szintaxis része szelektor - kiválasztja a megfelelő HTML eleme(ke)t művelet - a kiválasztott eleme(ke)n végrehajtásra kerülő művelet (action) Annak elkerülése, hogy a jquery kód az oldal betöltés előtt hajtódjon végre: $(document).ready(function(){ // jquery függvény... }); 165/131

jquery - szelektorok Szintaktikájában a CSS-re hasonlít. Id alapú kiválasztás: # Osztály alapú kiválasztás: A kiválasztó (a $ függvény) visszaad egy objektumot és ezen hívhatunk függvényeket. Kiválasztás példák: $("p") - az összes p elem kiválasztása $(".gomb") - az összes "gomb" "class"-ú elem $("p.piros") - a class="piros" stílusosztályhoz tartozó p elemek kiválasztása $("p#elso") - p elem, melynek id attribútuma "elso" $("[href]") - az összes href attribútumú elem $("#menu li.active") - A "menü" "id"-jű <ul>-en belüli 165/132 összes <li> elem, amelynek "aktiv" a class paramétere

jquery - AJAX függvények (ízelítő) $(selector).load(url,data,callback) - (távoli) adat betöltése a kiválasztott elemekbe $.ajax(options) - adat betöltése egy XMLHttpRequest objektumba $.get(url,data,callback,type) - adat betöltese HTTP GET segítségével $.post(url,data,callback,type) - adat betöltese HTTP POST segítségével $.getjson(url,data,callback) - JSON kifejezéssel megadott adat betöltése HTTP GET segítségével $.getscript(url,callback) - (távoli) JavaScript állomány betöltése és végrehajtása 165/133

jquery - AJAX függvények (ízelítő).click() Kattintás.animate() Animáció.hide() Elem elrejtése.show() Elem megjelenítése.toggle() A fenti kettő keveréke, ha látszik az elem elrejti, ha nem akkor megjeleníti..fade() Elem elhalványítása.fadetoggle() Állapottól függő elhalványítás 165/134

jquery AJAX hívás példa AjaxSuggest.htm - a szövegmezőbe írva, a billentyű elengedésekor lesz elküldve (clienthint.js) a kérés, ami a szerverről lekéri azokat a tippeket (női keresztnevek), amelyek a már beírt karaktersorozattal kezdődnek (gethint.php). A szerver a tippeket az egyszerűség kedvéért egy tömbből olvassa a valós életben inkább adatbázisban vannak az adatok 165/135

jquery AJAX hívás példa (folytatás) <html> ajaxsuggest.htm <head> <meta content="text/html; charset=utf-8" http-equiv="content-type" /> <script src="clienthint.js"></script> </head> <body> <form> Keresztnév: <input type="text" id="txt1" onkeyup="showhint(this.value)" /> </form> <p>tipp: <span id="txthint"></span></p> </body> </html> 165/136

jquery AJAX hívás példa (folytatás) var xmlhttp function showhint(str){ if (str.length==0) { document.getelementbyid("txthint").innerhtml=""; return; } xmlhttp=getxmlhttpobject(); if (xmlhttp==null) { alert ("Az ön böngészője nem támogatja az XMLHTTP-t!"); return; } var url="gethint.php"; url=url+"?q="+str; //url=url+"&sid="+math.random(); xmlhttp.onreadystatechange=statechanged; xmlhttp.open("get",url,true); xmlhttp.send(null); } 165/137 clienthint.js B ITI T MAN

jquery AJAX hívás példa (folytatás) function statechanged(){ clienthint.js if ((xmlhttp.readystate==4)&&(xmlhttp.status==200)) { document.getelementbyid("txthint").innerhtml=xmlhttp.responsetext; } } function GetXmlHttpObject(){ if (window.xmlhttprequest) { // IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.activexobject) { // IE6, IE5 return new ActiveXObject("Microsoft.XMLHTTP"); } return null; } 165/138

jquery AJAX hívás példa (folytatás) <?php $a[ ]="Anna"; $a[]="brigitta"; $a[]="cecília"; $a[]="dalma"; $a[]="emma"; $a[]="éva"; $a[]="fanni"; $a[]="gabriella"; $a[]="helga"; $a[]="iringó"; $a[]="johanna"; $a[]="katalin"; $a[]="linda"; $a[]="nóra"; $a[]="orsolya"; $a[]="piroska"; 165/139 $a[]="andrea"; $a[]="réka"; $a[]="csilla"; $a[]="bernadett"; $a[]="erika"; $a[]="eszter"; $a[]="szidónia"; $a[]="tünde"; $a[]="zsuzsa"; $a[]="viola"; $a[]="lilla"; $a[]="erzsébet"; $a[]="emese"; $a[]="mária"; $a[]="viktória"; $q=$_get["q"]; gethint.php A tömb feltöltése nevekkel A q paraméter kinyerése az URL-ből B ITI T MAN

jquery AJAX hívás példa (folytatás) if (strlen($q) > 0) { $hint=""; for($i=0; $i<count($a); $i++) { if (mb_strtolower($q,'utf- 8')==mb_strtolower(substr($a[$i],0,strlen($q)),'UTF-8')) { if ($hint=="") { $hint=$a[$i]; } else { $hint=$hint.", ".$a[$i]; } } } } if ($hint == ""){ $response="nincs tipp"; } else { $response=$hint; } echo $response; 165/140?> gethint.php Kikeressük a tömbből az összes találó tippet, amennyiben q>0 Kimenet beállítása a "nincs tipp" szövegre, amennyiben nem volt találat, különben pedig a megfelelő válasz beállítása. A válasz kiírása (visszaküldése) B ITI T MAN

Regisztrálás ingyenes tárhelyen - keresés 165/142

Regisztrálás ingyenes tárhelyen 1. 165/143

Webhely létrehozása Ha szövegen kívül más is került egy oldalra (kép, video, hang), akkor a word létrehozza az oldalnév_elemei (pl. index_elemei) könyvtárat, és ide ment bizonyos fájlokat! A létrehozott könyvtár teljes tartalmát fel kell másolni a webhelyre: 165/147 Weplapok (index.html és a többi htm fájl) Képek Fájlok (.doc,.pdf,.xls ) Könyvtárak (index_elemei, és a többi _elemei könyvtár) Az ingyenes webhelyeknek általában van saját megoldásuk erre a célra, itt egyesével másolhatók a fájlok. Jobb megoldás: TotalCommander használata

165/148

FTP kapcsolat Total Commanderrel Honlapom ftp.uw.hu kakukk Tetszőleges név lehet! Az ftp szerver neve! ******** Regisztrált felhasználói neved! Regisztrált jelszavad! Végén OK, aztán: Kapcsolódás 165/149

Szerver oldal Helyi merevlemez Ez az oldal először természetesen üres! 1. Kijelölni a szükséges fájlokat. 2. Megnyomni a Másolás gombot. 165/150 3. Ellenőrizni, hogy működik-e? Tehát megnyitni böngészővel a weboldalt, és kipróbálni!

165/151

Információs technológiák Ellenőrző kérdések 165/152

Ellenőrző kérdések 1. 1. Lehet-e képhez linket készíteni? A: Nem B: Igen, de csak belsőt C: Igen 30 mp 2. Hogyan kell linket készíteni wordben? A: Beszúrás \ Weblink B: Beszúrás \ Hiperhivatkozás C: Beszúrás \ Link D: Beszúrás \ Hiperlink 165/153

Ellenőrző kérdések 2. 3. Mit jelöl a HTML rövidítés? A: Hibrid Text Manual Language B: Hyper Text with Menu Language C: Hibrid Text Multi Language D: Hypertext Markup Language 30 mp 4. Mi az elnevezése a weblapok programnyelvének? A: HTTP B: FTP C: HTML D: URL 165/154

Ellenőrző kérdések 3. 5. Igaz vagy Hamis az állítás? A <br> félkövér kód HTML-ben. A <br> páros HTML tag. HTML-ben képet a <pict> utasítással szúrunk be. A <head> és a <body> páros HTML tag-ek. A HTML kódot bármilyen szövegszerkesztővel meg lehet írni. HTML-ben linket az <a> taggel lehet beszúrni. HTML-ben a formázó utasításokat / jelek közé kell tenni. Ha HTML-ben beírom a <b> utasítást, a szöveg mindaddig félkövér lesz, még a hatást le nem zárom a <br> utasítással. A <body> utasítás előbb szerepel a HTML kódban, mint a <head> utasítás. 165/155 120 mp

Ellenőrző kérdések 4. 6. Igaz vagy Hamis az állítás? A word nem alkalmas weblapok készítésére. Egy webhely kiinduló lapjának elnevezése tetszőleges lehet. Bármilyen weblapot hozunk létre, a word a képeket mindig az index_elemei könyvtárba helyezi el. A Total Commander a weblap megtekintéséhez szükséges. A linknél beállítható a wordben, hogy új lapon jelenjen meg a hivatkozott dokumentum. A weblapot tartalmazó fájl neve, és a lap címe mindig ugyanaz. A böngésző program weblapokat jelenít meg a felhasználó saját gépén. 165/156 100 mp

Ellenőrző kérdések 5. 7. Hogyan kell elmenteni wordben a weblapot? A: webarchivum B: weblap C: website D: webhely 30 mp 8. Melyik a helyes elnevezése a weblap kiinduló oldalának? A: idnex.html B: index.hmtl C: index.html D: index.mhtl 165/157

Ellenőrző kérdések 6. 9. Kell-e külső webhelyre mutató hivatkozást készíteni a beadandó internetes feladatban? A: nem B: Igen, legalább 5-öt C: Igen, legalább 8-at D: Igen, legalább 10-et 30 mp 10. Ha kép is kerül a kiinduló weblapra, a word milyen könyvtárat hoz létre? A: weblap-elemei B: weblap_elemei C: index_elemei D: index-elemei 165/158

Ellenőrző kérdések 7. 11. Mi kell egy ingyenes webhely regisztrációjához? A: Ímél cím (e-mail cím) B: Elküldött sms C: Meglévő saját tárhely D: Egy kiinduló weboldal feltöltése 30 mp 12. Hány weboldalt kell készíteni a beadandó internetes feladatban? A: min:3, max: 6 B: min:4, max: 8 C: min:5, max:8 D: min:4, max: 10 165/159

Ellenőrző kérdések 8. 13. Milyen sorrendben jelennek meg az alábbi HTML kódelemek? Kezdje a számozást a legkorábbival. </HEAD> </HTML> <BODY> </TITLE> 30 mp 14. Hány alapértelmezett címszint létezik a HTML-ben? A: 3 B: 6 C: 7 D: 9 15. Melyik a sortörés kódja HTML-ben? A: <lb> B: <br> C: <rb> D: <div> 165/160

Ellenőrző kérdések 9. 16. Melyik paranccsal lehet beállítani egy táblázat cella magasságát HTML-ben? A: cellspacing B: cellpadding C: width D: height 17. Milyen típus(ok) állhat(nak) a kipontozott helyen? <form> <p>kérem a nevemet: <br> <input type=.......... name="tm" size=17> </p> A: text B: password C: checkbox D: submit 165/161 30 mp

Ellenőrző kérdések 10. 18. Alakítson ki két kategóriát, és sorolja az alábbi parancsokat az egyes kategóriákba! 60 mp Kategóriák: Parancsok: A: font-size: 20px; B: font size = 20 C: color: #a00000; D: color = blue E: <sub> F: z-index: 2; 165/162

Ennyi! 165/163 B ITI T MAN

Felhasznált irodalom Weblabor.hu: A fejlesztői forrás W3schools.com: The world s largest web development site Rimár Miklós: Html, css szakdolgozat KBB TE Ruff Laura-Ildikó: Web programozás elektronikus jegyzetek 165/164

VÉGE VÉGE 165/165