Komputery & Internet

      JavaKlik

Każda strona WWW by odnieść sukces w Internecie musi mieć prócz dobrej reklamy w sobie to coś. To coś co nazywa się wygląd. By go uzyskać trzeba miesiącami wkuwać na pamięć tagi HTML by później móc uzyskać stronę, gdzie wszystko ze sobą współgra. Nie jest to takie trudne na jakie może się wydawać. W końcu ja mam 13 lat i mam własną stronę WWW robioną w edytorze HTML (zapraszam: http://www.britneyserwis.prv.pl). Z tego wniosek jeden - HTML dla każdego! No dobrze, ale HTML zrobi z naszej strony przejrzystą i zrozumiałą, ale co z dynamiką, która nada naszej stronie charakter vortalu?! By tak się stało trzeba umieć język Java Script. Choć na dzień dzisiejszy nawet jej nie trzeba znać, gdyż wszędzie możemy ściągnąć całe skrypty, które sprawią, że wszystko na naszej stronie będzie się ruszało, drgało, przewijało itd. Oto kilka skryptów, które możecie bez problemu wykorzystać na swojej stronie www:

1. ten skrypt dotyczy pasku stanu. By działał strona
 musi mieć z znaczniku BODY funkcję: OnLoad=timerONE=window.setTimeout('ScrollText(100)',100)

<script language="JavaScript"> <!-- //skrypt pochodzi z zasobów //BritSite function ScrollText(seed) { var msg = "TU WPISZ TO CO MA BYĆ NA PASKU STANU!"; var out = " "; var c = 1; if (seed > 100) { seed--; var cmd="ScrollText(" + seed + ")"; timerTwo=window.setTimeout(cmd,100); } else if (seed <= 100 && seed > 0) { for (c=0 ; c < seed ; c++) { out+=" "; } out+=msg; seed--; var cmd="ScrollText(" + seed + ")"; window.status=out; timerTwo=window.setTimeout(cmd,100); } else if (seed <= 0) { if (-seed < msg.length) { out+=msg.substring(-seed,msg.length); seed--; var cmd="ScrollText(" + seed + ")"; window.status=out; timerTwo=window.setTimeout(cmd,100); } else { window.status=" "; timerTwo=window.setTimeout("ScrollText(100)",75); } } } //--> </script>

2. Następny skrypt: Teraz skrypt będzie dotyczył czasu. Dzięki temu, że na naszą stronę wkleimy poniższy script javy będziemy mieli zegar...

<script language="javascript"> <!-- //skrypt pochodzi z zasobów //BritSite var timerID = null; var timerRunning = false; function stopclock() { if(timerRunning) clearTimeout(timerID) timerRunning = false; } function startclock() { stopclock(); showtime(); } function showtime() { var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds(); var timeValue = "" + ((hours > 12) ? hours - 12 : hours); timeValue += ((minutes < 10) ? ":0" : ":") + minutes; timeValue += ((seconds < 10) ? ":0" : ":") + seconds; timeValue += (hours >= 12) ? " P.M." : " A.M."; document.clock.face.value = timeValue; timerID = setTimeout("showtime()",1000); timerRunning = true; } //--> </script> <form name="clock" onSubmit="0"> <input type="text" name="face" size="24"> </form> <script>startclock();</script>

3. Skrypy nr. 3: jak jest czas, to też musi być data... tak więc oto skrypt na uzyskanie aktualnej daty:

<script language="javascript"> var DDMMYY =0 var MMDDYY =1 //skrypt pochodzi z zasobów //BritSite function getdate(mode) { var now = new Date(); var dayNr = ((now.getDate()<10) ? "0" : "")+ now.getDate(); if (mode==DDMMYY) var MonthDayYear =(dayNr+"/"+(now.getMonth()+1)+"/"+now.getYear()); else var MonthDayYear =((now.getMonth()+1)+"/"+dayNr+"/"+now.getYear()); return MonthDayYear; } function gettime() { var now = new Date(); var ampm = (now.getHours() >= 12) ? " P.M." : " A.M." var hours = now.getHours(); hours = ((hours > 12) ? hours - 12 : hours); var minutes = ((now.getMinutes() < 10) ? ":0" : ":") + now.getMinutes(); var seconds = ((now.getSeconds() < 10) ? ":0" : ":") + now.getSeconds(); var TimeValue =(" " + hours + minutes + seconds + " " + ampm); return TimeValue; }//--> </script> <script language="javascript">document.write(getdate(DDMMYY));</script>

4. Skrypy nr. 4: teraz coś z innej beczki, wykrywacz przeglądarki! Oto skrypt:

<script language="JavaScript"> <!-- document.write("Używasz " + navigator.appName + " " + navigator.appVersion); // --> </script>

5. Oto skrypt, który spowoduje, że pojawi się znana gra: kółko i krzyżyk - od dziś nie będziesz potrzebować partnera - zagrasz z komputerem!

<SCRIPT language=JavaScript> <!-- step = 0; diff=3; function clear_all(form) { step = 0; for (i=0;i<9; ++i) { position="a"+i; form[position].value=""; } } function clickit(field) { if (step == -1) {alert("Wciśnij reset, aby zagrać ponownie"); return;} position=field.name.substring(1,2,1); position = 'a'+position; if (field.form[position].value !="") {alert("Ruch niedozwolny"); return;} field.form[position].value="X"; if (eval_pos(field.form)) { field.form.output.value="Wygrałeś!"; step = -1; return; } position=get_move(field.form); field.form.output.value=' ' + position.substring(1,2,1); if (position=="") { field.form.output.value="Niema zwycięscy."; step = -1; return; } field.form[position].value="O"; if (eval_pos(field.form)) { field.form.output.value="Przegrałeś;!"; step = -1; } } function eval_pos(form) { if ((form.a0.value!="" && form.a0.value==form.a3.value && form.a0.value==form.a6.value)|| (form.a0.value!="" && form.a0.value==form.a1.value && form.a0.value==form.a2.value) || (form.a0.value!="" && form.a0.value==form.a4.value && form.a0.value==form.a8.value) || (form.a1.value!="" && form.a1.value==form.a4.value && form.a1.value==form.a7.value) || (form.a2.value!="" && form.a2.value==form.a5.value && form.a2.value==form.a8.value) || (form.a2.value!="" && form.a2.value==form.a4.value && form.a2.value==form.a6.value) || (form.a3.value!="" && form.a3.value==form.a4.value && form.a3.value==form.a5.value) || (form.a6.value!="" && form.a6.value==form.a7.value && form.a6.value==form.a8.value)) return true; else return false; } function f(a) { if (a == "") return "."; else return a; } function comp_move(form,player,weight,depth) { var cost; var bestcost=-2; var position; var newplayer; if (player=="X") newplayer="O"; else newplayer="X"; if (depth==diff) return 0; if (eval_pos(form)) return 1; for (var i=0; i<9; ++i) { position='a'+i; if (form[position].value != "") continue; form[position].value=player; cost = comp_move(form,newplayer, -weight, depth+1); if (cost > bestcost) { bestcost=cost; if (cost==1) i=9; } form[position].value=""; } if (bestcost==-2) bestcost=0; return(-bestcost); } function get_move(form) { var cost; var bestcost=-2; bestmove=""; if (step++ == 0) if (form.a4.value=="") return "a4"; else if (form.a0.value=="") return "a0"; for (var i=0; i<9; ++i) { localposition='a'+i; if (form[localposition].value != "") continue; form[localposition].value="O"; cost=comp_move(form,"X", -1, 0); if (cost > bestcost) { if (cost==1) i=9; bestmove=localposition; bestcost=cost; } form[localposition].value=""; } return bestmove; } function complain(field) { field.form.output.focus(); alert("Ruch niedozwolony!"); } // --> </SCRIPT><center> <p align="center"><b>KÓŁKO i KRZYŻYK</b> <br> <br> <FORM> <DIV align=center> <CENTER> <P><INPUT name=a0 onfocus=complain(this) size=1> <INPUT name=b0 onclick=clickit(this) type=button> <INPUT name=a1 onfocus=complain(this) size=1> <INPUT name=b1 onclick=clickit(this) type=button> <INPUT name=a2 onfocus=complain(this) size=1> <INPUT name=b2 onclick=clickit(this) type=button> <BR><INPUT name=a3 onfocus=complain(this) size=1> <INPUT name=b3 onclick=clickit(this) type=button> <INPUT name=a4 onfocus=complain(this) size=1> <INPUT name=b4 onclick=clickit(this) type=button> <INPUT name=a5 onfocus=complain(this) size=1> <INPUT name=b5 onclick=clickit(this) type=button> <BR><INPUT name=a6 onfocus=complain(this) size=1> <INPUT name=b6 onclick=clickit(this) type=button> <INPUT name=a7 onfocus=complain(this) size=1> <INPUT name=b7 onclick=clickit(this) type=button> <INPUT name=a8 onfocus=complain(this) size=1> <INPUT name=b8 onclick=clickit(this) type=button> <BR><BR><BR> <FONT size=3> Komunikat: <INPUT name=output><BR><BR>Stopień trudności: <SELECT name=difficulty onchange=diff=form.difficulty[form.difficulty.selectedIndex].value; size=1> <OPTION value=1>Very Easy</OPTION> <OPTION value=2>Easy</OPTION> <OPTION selected value=3>Medium</OPTION> <OPTION value=4>Hard</OPTION></SELECT> <BR><INPUT onclick=" if (!step++) this.form.a4.value='O';" type=button value="Computer wykonuje ruch jako pierwszy"> <BR><INPUT onclick=clear_all(this.form) type=reset value=Restart> </font> </P></CENTER></DIV></FORM>

5. Teraz następna gra: musisz odgadnąć liczbę z przedziału 1-100...

<SCRIPT LANGUAGE="JavaScript"> <!-- ; var guessme=Math.round(Math.random()*(99)+1); var speech='Odgadnij liczbę z przedzialu (1-100)'; function process(mystery) { var guess=document.forms.guessquiz.guess.value; var speech='"'+guess+ '" nie ma sensu'; document.forms.guessquiz.guess.value=''; if (guess==mystery) { document.forms.guessquiz.prompt.value='Gratuluję! '+mystery+' - odgadłeś!'; alert ('Gratuluję! Szukaną liczbą jest: '+mystery+'! \n\n Naciśnij klawisz aby przejść do danstępnej gry.'); speech=''; document.location=document.location; } if (mystery<guess) { speech=guess +'- za dużo'; } if (mystery>guess) { speech= guess +'- za mało'; } if (guess=='') { speech='Zgaduj liczbę!!' } document.forms.guessquiz.prompt.value=speech; document.forms.guessquiz.guess.focus(); } // end hide --> </SCRIPT> <FORM onSubmit="" NAME="guessquiz"> <CENTER> <TABLE ALIGN="CENTER" BGCOLOR="#888888" BORDER="3" CELLPADDING="5"> <TR> <TD BGCOLOR="#004080"> <FONT COLOR="#ffffff" FACE="Arial"><B>Odgadnij liczbe z przedziału (1 - 100)</B></FONT> </TD> </TR> <TR> <TD> <CENTER> <INPUT TYPE="text" NAME="prompt" SIZE="31" MAXLENGTH="40" VALUE="Odgadnij liczbe z przedziału (1 - 100)"><BR> <INPUT TYPE="text" NAME="guess" SIZE="3" MAXLENGTH="3" VALUE=""> <INPUT TYPE="button" VALUE="Zgaduję" onClick='process(guessme)'> </CENTER> </TD> </TR> </TABLE> </CENTER> </FORM>

6. A teraz na koniec coś fajnego - sprawdzanie poprawności wypełnienia formularza.

<script language="JavaScript"> // Author: Javafile.com - http://javafile.com // SimplytheBest.net has the permission to feature the script in its DHTML scripts and JavaScripts collection // Courtesy of SimplytheBest.net <!-- function checkData (){ if (document.signup.APPLICANT_A_TITLE.value == "") { alert("Wpisz tytuł.") document.signup.APPLICANT_A_TITLE.focus() return false} if (document.signup.APPLICANT_A_LAST_NAME.value == "") { alert("Wpisz nazwisko.") document.signup.APPLICANT_A_LAST_NAME.focus() return false} if (document.signup.APPLICANT_A_FIRST_NAME.value == "") { alert("Wpisz imię.") document.signup.APPLICANT_A_FIRST_NAME.focus() return false} if (document.signup.APPLICANT_A_DATE_OF_BIRTH.value == "") { alert("Wpisz datę urodzenia.") document.signup.APPLICANT_A_DATE_OF_BIRTH.focus() return false} if (document.signup.HOME_TELEPHONE.value == "") { alert("Wpisz telefon.") document.signup.HOME_TELEPHONE.focus() return false} if (document.signup.MAILING_ADDRESS.value == "") { alert("Wpisz adres.") document.signup.MAILING_ADDRESS.focus() return false} if (document.signup.CITY.value == "") { alert("Wpisz miejscowo?ć.") document.signup.CITY.focus() return false} if (document.signup.ZIP.value == "") { alert("Wpisz kod pocztowy.") document.signup.ZIP.focus(); return false; } } // --> </script><form action="mailto:nobody@nobody.com" method="POST" enctype="text/plain" name="signup" onsubmit="return checkData()"> <div align="center"> <table border="0" cellpadding="2" BGCOLOR="#FFFFFF"> <tr> <td align="left" valign="middle" bgcolor="#FFEBC1"><strong><font size="1" face="Arial" color="#000080">Tytuł</font></strong></td> <td valign="top"><font size="2"><input type="text" size="5" name="APPLICANT_A_TITLE"></font></td> </tr> <tr> <td valign="middle" bgcolor="#FFEBC1" align="left"> <font size="1" face="Arial" color="#000080"><strong>Nazwisko</strong></font> </td> <td valign="top"><font size="2"><input type="text" size="20" name="APPLICANT_A_LAST_NAME"></font></td> </tr> <tr> <td align="left" valign="middle" bgcolor="#FFEBC1"><font size="1" face="Arial" color="#000080"><strong>Imię </strong></font></td> <td valign="top"><font size="2"><input type="text" size="20" name="APPLICANT_A_FIRST_NAME"></font></td> </tr> <tr> <td align="left" valign="middle" bgcolor="#FFEBC1"><font size="1" face="Arial" color="#000080"><strong>Data urodzenia</strong></font></td> <td valign="top"><font size="2"><input type="text" size="10" name="APPLICANT_A_DATE_OF_BIRTH"></font></td> </tr> <tr> <td align="left" valign="middle" bgcolor="#FFEBC1"><font size="1" face="Arial" color="#000080"><strong>Telefon</strong></font></td> <td valign="top"><input type="text" size="20" name="HOME_TELEPHONE"></td> </tr> <tr> <td align="left" valign="middle" bgcolor="#FFEBC1"><font size="1" face="Arial" color="#000080"><strong>Adres</strong></font></td> <td valign="top"><input type="text" size="41" name="MAILING_ADDRESS"></td> </tr> <tr> <td align="left" valign="middle" bgcolor="#FFEBC1"><font size="1" face="Arial" color="#000080"><strong>Miasto</strong></font></td> <td valign="top"><input type="text" size="20" name="CITY"></td> </tr> <tr> <td align="left" valign="middle" bgcolor="#FFEBC1"><font size="1" face="Arial" color="#000080"><strong>Kod pocztowy</strong></font></td> <td valign="top"><input type="text" size="7" name="ZIP"></td> </tr> </table> </div> <div align="center"> <table border="0" cellpadding="0" cellspacing="0" width="376"> <tr> <td width="79"><font size="1"> </font></td> <td width="59"><font size="1"> </font></td> <td width="193"><font size="1"> </font></td> </tr> <tr> <td width="79"></td> <td width="59"><input type="submit" name="B1" value="Submit"></td> <td width="193"><input type="reset" name="B2" value="Clear"></td> </tr> </table> </div> </form>

Autor:

Adam "Britfan" Darda

e-mail: britfan@tenbit.pl

http://www.britneyserwis.prv.pl

_________________________ 44 _________________________

:: Poprzednia strona :: Wstęp :: Następna strona ::