Kliensoldali Programozás

Kliensoldali Programozás
Javascript példák

Üzenő doboz A beviteli mezőben beírt szöveggel megjelenít egy üzenetet. <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <FORM> <INPUT NAME="text1" TYPE=Text> <INPUT NAME="submit" TYPE=Button VALUE="Show Me" onClick="MsgBox(form.text1.value)"> </FORM> </BODY> </HTML>

Az oldal háttér színének megváltoztatása
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <form> <input type="button" name="Button1" value="RED" onclick="changecolor('red')"> <input type="button" name="Button2" value="GREEN" onclick="changecolor('green')"> <input type="button" name="Button3" value="BLUE" onclick="changecolor('blue')"> <input type="button" name="Button4" value="WHITE" onclick="changecolor('white')"> </form> </BODY> </HTML>

Az If THEN használata <HTML> <HEAD>
<TITLE> példa 3</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <A HREF="javascript:password()"> <IMG SRC="pict1.gif" NAME="pic1" ALT="about us!" BORDER="0" align="left"></A> <H3>Kattints a képre a jelszóval védett dokumentum megjelenítéséhez.</H3> </BODY> </HTML>

IF (logikai kifejezés) { igaz ág } ELSE { különben ág}

Ciklus használata <HTML> <HEAD>
<SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY bgcolor="beige"> <FORM name="form1"> <table border=0><tr><td> Type your word<td><INPUT NAME="input" TYPE=Text><br><td> <INPUT TYPE=Button VALUE="submit" onClick="encode(this.form.input.value)"><tr><td> Result:<td><INPUT NAME="result" TYPE=Text> </table> </FORM> </BODY> </HTML>

Metódusok használata Date Methods – időpont beállítása
Window Methods – új ablak megnyitása és bezárása Document Methods – Új dokumentum létrehozása menet közben Form Methods – webes űrlapok vezérlése. History Methods – A böngésző vissza gombjának használata Text Methods – szövegek megjelenésének beállítása. Math Methods - sin, cos, round, random, absolute value, stb. MessageBox Methods - Alert, Prompt, and Confirm

<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD>

Felhasználás: <BODY bgcolor="white" onLoad="this.form1.text1.focus()"> <TABLE BORDER=1 bgcolor="beige"><tr><td><B>Type a message in the box, <br>it will become a link to close the new window.</B> <FORM NAME="form1"> <INPUT NAME="text1" TYPE=Text SIZE="50" MAXLENGTH="50"><br> <INPUT TYPE=Button VALUE="Create my window" onClick="MyWindow(form.text1.value)"> </FORM></TABLE> </BODY> </HTML>

Dátum eljárások

window.open metódus opció érték leírás toolbar eszköztár status
yes/no vagy 1/0 eszköztár status státuszsor menubar menűsor scrollbars csuszka resizeable Átméretezhető-e location directories width képpont szélesség height magasság

Élő oldal generálás document.write használata

A kód <BR><H3>Writing to a document</H3><P>
With just a little creativity, you can have JavaScript create fully formatted web pages on the fly.<P> <table bgcolor="beige" border=1><form><tr><td> Please enter your first name <input type=text name="fname" size=20><br> What city/town do you live in? <input type=text name="town" size=20><br> How old are you? <input type=text name="age" size=4><br> Name another person in your house <input type=text name="roommate" size=20><br> <input type=button value="Create my Home Page" onClick="MakePage(this.form.fname.value,this.form.town.value,this.form.roommate.value,this.form.age.value)"> </form></td></tr></table><P>

A kód function MakePage(name,town,roommate,age) {
var content = '<HTML><HEAD><TITLE>'+name+'\'s Page</title>' + '</head><body background="images/space.gif" text="yellow" link="#FFBBBB" vlink="#FFBBBB">' + '<FONT COLOR="4EEA6C"><center><h1>' + name + '\'s Page</h1></center></FONT>' + '<IMG ALIGN=Left SRC=" WIDTH="72" HEIGHT="72">Hello, and welcome to my page. I live in ' + town + ' and I am ' + age + ' years old.' + '<p>' + town + ' isn\'t a bad place to live, if you can stand ' + roommate + '\'s cooking <P>' + 'Some people think they\'re so cool just because they created a home page. <br> ' + 'They have fancy backgrounds and colors, but they just go on and on with nothing to say. <br> ' + '<A HREF=" Here to search Yahoo</A><--Boy, there\'s a link I never' + ' would have found on my own. Some people\'s pages are so boring I think my computer could do' + ' a better job with a 10 line program.' document.open() document.write(content) document.close() }

események Esemény hatókőr bekövetkezés kezelő abort onAbort blur
Imagek Kép betöltésének megszakítása onAbort blur Ablak,keret és minden űrlap elem Fókusz megszüntetése onBlur click Gombok,linkek kattintás onClick change Szövegmezők, listák Elemek megváltoztatása onChange error Imagek,ablakok Dokumentumok betöltésekor onError focus Fókusz megadása onFocus load Dokumentum törzs Oldal betöltése onLoad mouseout Területek, linkek Egérmutató elhagyja a területet onMouseout mouseover linkek Egérmutató áthalad a területen onMouseover reset űrlapok Űrlap alaphelyzetbe állításakor onReset select szövegmezők Elem kiválasztásakor onSelect submit Submit gomb Űrlap feldolgozása onSubmit unload Kilépés az oldalról onUnload

SetTimeout() metódus Automatikus időzítésre lehet használni
setTimeout(" your function ", delay in milliseconds) function MsgBox() { alert("Hello There"); } <FORM> <INPUT type=button value="try it" onClick="setTimeout('MsgBox()',5000)"> </Form>

Slideshow var slidesmax=55
var slidehely=' //a végén kell a / function runSlideShow() { var slim=Math.round(Math.random()*(slidesmax-1)); if (document.all) document.images.SlideShow.style.filter="blendTrans(duration=3)" document.images.SlideShow.style.filter="blendTrans(duration=5)" document.images.SlideShow.filters.blendTrans.Apply() } document.images.SlideShow.src=slidehely+[slim]+".jpg"; document.images.SlideShow.filters.blendTrans.Play() t=setTimeout('runSlideShow()', 9000)

Ha a <head> részbe kerül akkor kell a <script type="text/javascript" > </script> páros Ha külső fájlba rakjuk akkor <script src=„útvonal/fájl.js" type="text/javascript"></script> A html body részébe a kívánt helyen a képnek így kell kinéznie: <img src="honlap/galeria/0.jpg" alt="Véletlen képek a galériából" name="SlideShow"/> És nem árt a body onLoad=”runSlideShow()” sem

slidesmax: képek száma (0 tól indítva kell számozni a képeket, és ha pl. 11 képünk van, az utolsó lesz a 10, ez a slidesmax értéke is) slideshely: képek helye, itt a mappát kell megadni. Csak azért van itt külön, hogy változtatáskor ne kelljen keresgélni. Minden kisbetű, ékezetek nélkül, így biztosan működni fog. Fontos a mappa megadása után a / jel! slideshow funkciónk generál egy véletlen számot, majd a html-ben lévő képen alkalmazza az áttűnést. az első duration a megjelent kép eltűnésének idejét, a második a következő kép megjelenítési idejét jelenti.

Ezután megadjuk, hogy pontosan hol is vannak a képek a slideshow
Ezután megadjuk, hogy pontosan hol is vannak a képek a slideshow.src sorral. A slidehely változóban megadott helyről a generált számú (slim kódnevű…) számhoz biggyeszt egy .jpg kiterjesztést, és már indul is a blendtrans… Fontos az elérési út, és a kis/nagybetű is ugye pl. a kiterjesztésnél. A következő a timeout, vagyis időzítünk. Millisecundumot kell megadni, a 9000 érték 9 másodpercet jelent. Túl alacsony értéknél levágja az effektet

Véletlen helyett fix sorrend
A fenti kódot módosítjuk, a véletlen helyett sorba olvassa be a képeket. az első sor után új sorba megadjuk a változót: var slim= -1 az 5. sort a következőkre cseréljük: slim++ if(slim>slidesmax) slim=0 ezzel a fenti változó értékét egyel növeljük (a -1 miatt a 0. képpel kezdi), ha a változó értéke nagyobb lenne, mint a maximum képek száma, akkor újra a 0. képet teszi ki.

Kliensoldali Programozás

Hasonló előadás

Az előadások a következő témára: "Kliensoldali Programozás"— Előadás másolata:

Hasonló előadás

Projectumról

Visszajelzés

Bejelentkezés

A társadalmi hálózaton keresztül belépni:

Kliensoldali Programozás

Hasonló előadás

Az előadások a következő témára: "Kliensoldali Programozás"— Előadás másolata:

Hasonló előadás

Projectumról

Visszajelzés