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

Átírás

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

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

3 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

4 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

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

6 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

7 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=" 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

8 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

9 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

10 165/10 FFF FFF CCC CCC FFC C00 FF9 900 FF6 600 FF C C00 CC9 900 FFC C33 FFC C66 FF9 966 FF6 633 CC3 300 CC0 033 CCF F00 CCF F CCC C00 FFF F00 CC9 933 CC CC0 000 FF0 000 FF3 366 FF F F00 CCF F66 99C C CCC C33 FFF F CC3 333 FF3 333 CC3 366 FF6 699 FF F F00 99F F66 66C C CCC C66 FFF F CC6 666 FF CC3 399 FF6 6CC FF F F00 66F F C C00 99F F33 CCC C99 FFF F99 CC9 966 CC6 600 CC9 999 FF9 999 FF3 399 CC FF3 3CC FF0 0CC 00C C00 33C C C C66 CCF F99 FFF FCC FFC C99 FF9 933 FFC CCC FF9 9CC CC CC C C33 66C C66 00F F00 33F F33 66F F66 99F F99 CCF FCC CC9 9CC C C99 FFC CFF FF9 9FF FF6 6FF FF3 3FF FF0 0FF CC6 6CC CC3 3CC C C C C99 99F FCC CCF FFF 339 9FF 99C CFF CCC CFF CC9 9FF 996 6CC CC CC0 0CC 00F F33 33F F C C66 33F F99 99F FFF 99C CCC 006 6CC 669 9CC 999 9FF 999 9CC 993 3FF 660 0CC CC3 3FF CC0 0FF 00F F66 66F F99 33C C F FFF 66C CCC FF 666 6CC CC CC6 6FF 990 0FF 00F F99 66F FCC 33C C99 33F FFF 33C CCC FF 333 3CC CC 996 6FF 660 0FF 00F FCC 33F FCC 00F FFF 00C CCC CC 336 6CC 000 0FF 000 0CC FF 330 0FF 00C C CC 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

11 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

12 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

13 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

14 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

15 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

16 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

17 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

18 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

19 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

20 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

21 Hiperhivatkozások a webhelyen index.html 165/21

22 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

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

24 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

25 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

26 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

27 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

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

29 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

30 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

32 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

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

34 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

35 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

36 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

37 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"> url( --> </style>

38 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

39 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

40 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

41 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

42 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; }

43 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

44 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

45 Doboz modell /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!)

46 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

47 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; }

48 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

49 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

50 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

51 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

52 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; }

53 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; }

54 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

55 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

56 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

57 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; }

58 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

59 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

60 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

61 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

62 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

63 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

65 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

66 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

67 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

68 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

69 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!)

70 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

71 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

72 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);

73 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

74 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

75 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

76 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

77 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

78 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

79 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

80 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

81 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

82 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

83 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

84 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

85 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

86 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

87 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

88 Példa 165/88

90 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

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

92 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

93 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

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

95 AJAX Az Ajax interaktív web-alkalmazások létrehozására szolgáló webfejlesztési technika 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 XMLHttpRequest objektum (IE5) /95

96 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

97 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

98 DOM 165/98

99 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

100 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

101 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

102 XSLT - példa <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl=" <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

103 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

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

105 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

106 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

107 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

108 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

109 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

110 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

111 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

112 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

113 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

114 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

115 ajaxexample.js futtatás 165/115

116 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

117 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

118 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

119 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": [ " ", " " ] resp_json 165/119

120 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

121 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

122 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

123 ajaxexample_json.js futtatás 165/123

125 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

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

127 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

128 jquery példa <!DOCTYPE HTML PUBLIC "HTML 4.0 Transitional"> <HTML> <HEAD> <TITLE> New Document </TITLE> <script type="text/javascript" src="jquery 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

129 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

130 jquery példa 165/130

131 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

132 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

133 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

134 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

135 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

136 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

137 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

138 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

139 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

140 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

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

143 Regisztrálás ingyenes tárhelyen /143

147 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

148 165/148

149 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

150 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/ Ellenőrizni, hogy működik-e? Tehát megnyitni böngészővel a weboldalt, és kipróbálni!

151 165/151

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

153 Ellenőrző kérdések 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

154 Ellenőrző kérdések 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

155 Ellenőrző kérdések 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/ mp

156 Ellenőrző kérdések 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/ mp

157 Ellenőrző kérdések 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

158 Ellenőrző kérdések 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

159 Ellenőrző kérdések Mi kell egy ingyenes webhely regisztrációjához? A: Ímél cím ( 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: /159

160 Ellenőrző kérdések 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: Melyik a sortörés kódja HTML-ben? A: <lb> B: <br> C: <rb> D: <div> 165/160

161 Ellenőrző kérdések 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/ mp

162 Ellenőrző kérdések 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

163 Ennyi! 165/163 B ITI T MAN

164 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

165 VÉGE VÉGE 165/165