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"> <!-- Beginning of JavaScript - function MsgBox (textstring) { alert (textstring) } // - End of 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"> <!-- Beginning of JavaScript - function changecolor(code) { document.bgColor=code } // - End of 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"> <!-- Beginning of JavaScript - function password() { Ret = prompt(‘Ird be hogy jelszo',""); if(Ret==„jelszo") { location = 'ch03_1.htm'; } else { alert(„Próbáld újra!") } // - End of 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"> <!-- Beginning of JavaScript - function encode(text) { Ref="0123456789abcdefghijklmnopqrstuvwxyz.-~ABCDEFGHIJKLMNOPQRSTUVWXYZ" Result="" for (Count=0; Count<text.length; Count++) { Char=text.substring (Count, Count+1); Num=Ref.indexOf (Char); EncodeChar=Ref.substring(Num+1, Num+2) Result += EncodeChar } document.form1.result.value=Result // - End of 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"> <!-- Beginning of JavaScript - function MyWindow(message) { //Define Date to display in local syntax now = new Date(); LocalTime = now.toLocaleString(); //Define contents of page contents= '<body bgcolor="beige">'+ '<h2>Hello</h2>'+ 'Click on the message below to close this window<br>'+ '<A HREF="javascript:window.close()" >'+ message + '</A>' //Create new Window options = "toolbar=0,status=0,menubar=0,scrollbars=0," + "resizable=0,width=300,height=200"; newwindow=window.open("","mywindow", options); newwindow.document.writeln(LocalTime); newwindow.document.write(contents); newwindow.document.close(); } // - End of 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="http://images.webteacher.com/javascript/images/heart.gif" 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="http://www.yahoo.com/">Click 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='http://www.honlapom/galeria/' //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.