document.write <SCRIPT>  </SCRIPT> Skrypt na stronie www

Transkrypt

1 document.write <SCRIPT>  Skrypt na stronie www <br> To jest normalny dokument HTML. <br> <script language="javascript"> document.write("to jest JavaScript!") <br> I znowu dokument HTML. Wypisywanie znaku cudzysłowu na stronie document.write("na ekranie zobaczysz<br>c:\\>") document.write("polecam film \"Wladca Pierścieni\"") document.write("<b><a href=\"spis.htm\">spis treści</a></b>") deklaracja zmiennej var name = "Ja" document.write(name) document.write("<h>"+name+"</h>") <p>this example declares a variable.</p> Typy zmiennych var imie="teresa" // zmienna typu string var wiek=20 // zmienna typu integer document.write("nasza Pani ma na imię "+imie+".") document.write(imie+" ma prawie "+wiek+" lat")

2 funkcja tekstowa function myfunction() return ("Hello, have a nice day!") document.write(myfunction()) <p>the function returns a text.</p> funkcja obliczeniowa z parametrem function product(a,b) return a*b document.write(product(4,3)) <p>funkcja zwraca wartość z dwóch parametrów 4 i 3.</p> funkcja z wartością  2

3 funkcja z wartością modyfikacja  Alerty liczba=prompt("podaj jakąś liczbę:") jaka=(liczba%2==0)?"parzysta":"nieparzysta" document.write("podana liczba jest "+ jaka) 2 wiek=prompt("w jakim jesteś wieku?") if (wiek>8) document.write("jesteś pełnoletni, więc możesz wejść dalej.") document.write("<br><a href=\"enter.html\">wejście dla dorosłych</a>") 3 wiek=prompt("w jakim jesteś wieku?") if (wiek>8) document.write("jesteś pełnoletni, więc możesz zobaczyć ten film.") document.write("<br><a href=\"enter.html\">film dla dorosłych</a>") else alert("ty masz zakaz!!!") document.write("nie jesteś dorosły") 4 odpowiedz=prompt("w którym roku narodził się JavaScript?") if (odpowiedz=="995") document.write("brawo! Masz dobrą pamięć!") else alert("źle!!!") document.write("nie zapamiętałeś dokładnie pierwszej lekcji. ") 3

4 wprowadzenie przycisku function disp_alert() alert("jestem okno z komunikatem!!!") <form> <input type="button" onclick="disp_alert()" value="display alert box"> </form> Przycisk i okno wprowadzania danych function disp_prompt() var name=prompt("please enter your name","") if (name!=null && name!="") document.write("hello " + name + "! How are you today?") <form> <input type="button" onclick="disp_prompt()" value="display a prompt box"> </form> Alert z dwoma wierszami function disp_alert() alert("witaj ponownie! Tutaj został + '\n' + "dodany nowy wiersz!") <form> <input type="button" onclick="disp_alert()" value="display alert box"> </form> 4

5 Confirm function disp_confirm() var name=confirm("press a button") if (name==true) document.write("you pressed the OK button!") else document.write("you pressed the Cancel button!") <form> <input type="button" onclick="disp_confirm()" value="display a confirm box"> </form> Pole tekstowe <script language="javascript">  Wpisz swoje imię: <form> <input type="text" name="name" onblur="getname(this.value)" value=""> </form> 5

6 Podaj hasło <HEAD> <TITLE>LOGIN</TITLE> <SCRIPT> function login() var login, haslo; login=document.formlogin.login.value; haslo=document.formhaslo.haslo.value; if (haslo=="virus45") alert('hello '+login+', I am Red Dog'); else alert('niepoprawne hasło!!!'); </HEAD> <BODY BGCOLOR=GOLD> <FONT COLOR=BLCAK SIZE=4>Login: <form name=formlogin> <input type=text size=25 maxlength=25 name=login> </form> <FONT COLOR=BLCAK SIZE=4>Hasło: <form name=formhaslo> <input type=password size=25 maxlength=25 name=haslo> <br> <br> <input type=button name=ok value=ok onclick=login()> <input type=reset value=wyczyść> </form> </BODY> </HTML> 6

7 Hasło 2 <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function podaj_password(form) if (form.id.value=="otul") if (form.pass.value=="javascript") location="java.htm" else alert("sorry " +form.id.value+ ", wrong password.") else alert("niewłaściwe informacje!") </HEAD> <BODY> <FORM name="login"> Login <INPUT NAME="ID"><br> Hasło <INPUT NAME="pass" type="password"><br><br> <INPUT TYPE="button" VALUE="Skocz" onclick="podaj_password(this.form)"> <INPUT TYPE="RESET" VALUE="Wyczyść"> </form> </BODY> </HTML> 7

8 Nie dotykać <BODY> <SCRIPT language=javascript>  <SCRIPT> function zdarzenie() alert('auu!'); document.f.b.value = "Mowiłem, żeby nie dotykać"; <FORM name=f><input onclick=zdarzenie() type=button value="nie dotykać" name=b> </FORM> <SCRIPT language=javascript>  </BODY> </HTML> 8

9 data modyfikacji Ostatnia modyfikacja: <script language="javascript"> document.write(document.lastmodified) dzisiejsza data <script language="javascript"> today = new Date() document.write("teraz jest: ",today.gethours(),":",today.getminutes()) document.write("dzisiejsza data: ",today.getmonth()+,"/",today.getdate(),"/",today.getyear()); Otwórz nowe okno <HTML> <HEAD> <TITLE>Okno</TITLE> <SCRIPT> function otworz() okno = window.open('nazwa.html','okno','width=05, height=768, toolbar=no, location=no, scrollbars=no, resizable=no, status=no fullscreen') <SCRIPT> function zamknij() window.close() </HEAD> <BODY> <A HREF="javascript:otworz();">Otwórz nowe okno <BR> <A HREF="javascript:zamknij();">Zamknij okno </BODY> </HTML> 9

10 zdarzenia function pushbutton <script language="javascript"> function pushbutton() alert("hello!"); <form> <input type="button" name="button" value="naciśnij mnie" onclick="pushbutton()"> </form> Funkcja i przyciski function myfunction() alert("hello") <form> <input type="button" onclick="myfunction()" value="moja funkcja"> </form> <p>by pressing the button, a function will be called. The function will alert a message.</p> funkcja txt function myfunction(txt) alert(txt) <form> <input type="button" onclick="myfunction('hello')" value="call function"> </form> <p>by pressing the button, a function with an argument will be called. The function will alert this argument.</p> 0

11 Inny przykład dwa przyciski function myfunction(txt) alert(txt) <form> <input type="button" onclick="myfunction('good Morning!')" value="in the Morning"> <input type="button" onclick="myfunction('good Evening!')" value="in the Evening"> </form> Funkcja The onmouseover <script language="javascript"> function hello() alert("wejdź na stronę!"); <a href=" onmouseover="hello()">link do mojej strony</a> funkcja back i forward. <FORM NAME="buttonbar"> <INPUT TYPE="button" VALUE="Back" onclick="history.back()"> <INPUT TYPE="button" VALUE="Home" onclick="location='stronadomowa.htm'"> <INPUT TYPE="button" VALUE="Next" onclick="history.forward()"> </FORM> Możesz także napisać history.go(-) i history.go().

12 Pętle If var d = new Date() var time = d.gethours() if (time < 0) document.write("<b>good morning</b>") else document.write("<b>good day</b>") <p> If the time on your browser is less than 0, you will get a "Good morning" greeting. Otherwise you will get a "Good day" greeting. </p> else else var d = new Date() var time = d.gethours() if (time<0) document.write("<b>good morning</b>") else if (time>=0 && time<6) document.write("<b>good day</b>") else document.write("<b>hello World!</b>") 2

13 for for (i = 0; i <= 5; i++) document.write("numer " + i) document.write("<br />") <p>pętla startuje od i=0.</p> <p>tak długo będzie tworzona, dopóki licznik nie osiągnie wartości 5.</p> 2 for (i = ; i <= 6; i++) document.write("<h" + i + ">This is header " + i) document.write("</h" + i + ">") Silnie liczb od do 4 var x = ; for (var i = ; i < 5; i++) x = x * i; document.write (i + "! = " + x); przerwanie pętli var i=0 for (i=0; i<=0; i++) if (i==3)break document.write("the number is " + i) document.write("<br />") <p>pętla się zatrzyma gdy i=3.</p> 3

14 While silnie kolejnych liczb naturalnych od do 4 var i = ; var x = ; while (i < 5) x = x * i; document.write (i + "! = " + x); i++; wypisuje litery alfabetu litera="a" while(litera!="z") document.write(litera) kodlitery=litera.charcodeat() // pobierany jest kod ASCII litery kodlitery++ // zwiększamy kod o litera=string.fromcharcode(kodlitery) // tworzymy litere z kodu ASCII Do..while i = 0 do document.write("the number is " + i) document.write("<br>") i++ while (i <= 5) 4

15 Malowanie przyrostu procentowego do procent=parseint(prompt("podaj procent zawartości (0-00):","")) while (procent<0 procent>00 isnan(procent)) /* parseint zamienia wartość która podał użytkownik na liczbę całkowitą pętla wykonuje się dotąd, aż użytkownik wpisze liczbę z przedziału 0-00 jeżeli użytkownik wpisze inny znak lub ciąg znaków, wówczas operacja parseint zamienia taki ciąg na wartość NaN (Not a Number) - co jest również sprawdzane w jednym z warunków działania pętli */ slupek="<font color=\"#00ff00\">" for (i=0;i<=procent;i++) slupek+=" " slupek+="</font><font color=\"#0000ff\">" for (i=procent+;i<=00;i++) slupek+=" " slupek+="</font>" document.write("<br>"+ slupek +" = "+ procent +"%") Switch var d = new Date() // tworzony jest obiekt z datą theday=d.getday()// wiemy jaki jest dzien na podstawie daty switch (theday) case 5: document.write("<b>w końcu Friday</b>") break case 6: document.write("<b>saturday Shoping day</b>") break case 0: document.write("<b>niedziela będzie dla nas</b>") break default: document.write("<b>kiedy będzie weekend?</b>") <p>ten JavaScript will generuje jaki dzis jest dzień. Przypisano baze danych: Sunday=0, Monday=, Tuesday=2, etc.</p> 5

16 tablice var x var mycars = new Array() mycars[0] = "Saab" mycars[] = "Volvo" mycars[2] = "BMW" for (x in mycars) document.write(mycars[x] + "<br />") Data DayName = new Array(7) DayName[0] = "niedziela " DayName[] = "poniedziałek " DayName[2] = "wtorek " DayName[3] = "środa " DayName[4] = "czwartek " DayName[5] = "piątek " DayName[6] = "sobota " MonthName = new Array(2) MonthName[0] = " I " MonthName[] = " II " MonthName[2] = " III " MonthName[3] = " IV " MonthName[4] = " V " MonthName[5] = " VI " MonthName[6] = " VII " MonthName[7] = " VIII " MonthName[8] = " IX " MonthName[9] = " X " MonthName[0] = " XI " MonthName[] = " XII " function pobierz_date() var Today = new Date() var WeekDay = Today.getDay() var Month = Today.getMonth() var Day = Today.getDate() var Year = Today.getFullYear() return DayName[WeekDay] + "," + " " + Day + " " + MonthName[Month] + ", " + Year document.write(pobierz_date()) 6

17 formularze <script language="javascript"> function getname(imie) alert("hi, "+ imie+"!"); Wpisz swoje imię i kliknij myszką: <form> <input type="text" name="name" onblur="getname(this.value)" value=""> </form> sprawdzanie poprawności adresu <script language="javascript"> function test(form) if (form.text.value == "") alert("podaj ciąg znaków!") else alert("cześć "+form.text.value+"! Informacja poprawna!"); function test2(form) if (form.text2.value == "" form.text2.value.indexof('@', 0) == -) alert("niepoprawny adres poczty elektronicznej!"); else alert("ok!"); <form name="first"> Wpisz swoje nazwisko:<br> <input type="text" name="text"> <input type="button" name="button" value="test" onclick="test(this.form)"> <P> Wpisz adres swojej poczty elektronicznej:<br> <input type="text" name="text2"> <input type="button" name="button2" value="test" onclick="test2(this.form)"> 7

18 2 przyciski wyboru <BODY> <FORM name=f> <SELECT name=miesiac> <OPTION value= selected>styczeń</option> <OPTION value=2>luty</option> <OPTION value=3>marzec</option> <OPTION value=4>kwiecień</option> <OPTION value=5>maj</option> <OPTION value=6>czerwiec</option> <OPTION value=7>lipiec</option> <OPTION value=8>sierpień</option> <OPTION value=9>wrzesień</option> <OPTION value=0>październik</option> <OPTION value=>listopad</option> <OPTION value=2>grudzień</option> </SELECT> <SELECT name=rok> <OPTION value=2003 selected>2003</option> <OPTION value=2004>2004</option> <OPTION value=2005>2005</option> <OPTION value=2006>2006</option> <OPTION value=2007>2007</option> <OPTION value=2004>2008</option> <OPTION value=2005>2009</option> <OPTION value=2006>200</option> <OPTION value=2007>20</option> <OPTION value=2004>202</option> <OPTION value=2005>203</option> <OPTION value=2006>204</option> </SELECT> </FORM> </BODY> 8

19 Wybór płci function mr(dis,en) document.getelementbyid(dis).style.visibility='visible'; document.getelementbyid(en).style.visibility='hidden'; <input name="rad" type="radio" value="mężczyzna" onclick="mr('s','s2') " /> <select id="s" onchange=""> <option value="">kawaler</option> <option value="2">żonaty</option> <option value="3">wdowiec</option> </select> <input name="rad" type="radio" value="kobieta" onclick="mr('s2','s')" /> <select id="s2" onchange=""> <option value="4">panna</option> <option value="5">mężatka</option> <option value="6">wdowa</option> </select> 9

20 Kalendarz <BODY> <TABLE> <TBODY> <TR> <TD>Pon</TD> <TD>Wt</TD> <TD>Sr</TD> <TD>Czw</TD> <TD>Pt</TD> <TD>Sob</TD> <TD>Nd</TD></TR> <SCRIPT> var d = new Date(); d.setdate(); var m = d.getmonth() d.setdate( - d.getday() ); do document.write("<tr>"); for (var i=0; i<7; ++i) document.write("<td>"); document.write( d.getdate() ); document.write("</td>"); d.setdate( d.getdate() + ) document.write("</tr>"); while (d.getmonth() == m) </TBODY></TABLE> </BODY> 2 0

21 Kalendarz czarnobiały ze stylem <STYLE>.naglowek WIDTH: 30px; BACKGROUND-COLOR: gray; TEXT-ALIGN: right.dzien BACKGROUND-COLOR: silver; TEXT-ALIGN: right </STYLE> <META content="mshtml " name=generator></head> <BODY> <TABLE> <TBODY> <TR> <TD class=naglowek>nd</td> <TD class=naglowek>pon</td> <TD class=naglowek>wt</td> <TD class=naglowek>sr</td> <TD class=naglowek>czw</td> <TD class=naglowek>pt</td> <TD class=naglowek>sob</td></tr> <SCRIPT language=javascript>  <SCRIPT> var d = new Date(); d.setdate(); var m = d.getmonth() d.setdate( - d.getday() ); do document.write("<tr>"); for (var i=0; i<7; ++i) document.write("<td class=\"dzien\">"); document.write( d.getdate() ); document.write("</td>"); d.setdate( d.getdate() + ) document.write("</tr>"); 2

22 while (d.getmonth() == m) </TBODY></TABLE> <SCRIPT language=javascript>  </BODY> 2 2

23 Kalendarz kolorowy <STYLE>.naglowek WIDTH: 30px; BACKGROUND-COLOR: gray; TEXT-ALIGN: right.naglowekwolny WIDTH: 30px; COLOR: red; BACKGROUND-COLOR: gray; TEXT-ALIGN: right.dzien BACKGROUND-COLOR: silver; TEXT-ALIGN: right.dzienwolny COLOR: red; BACKGROUND-COLOR: silver; TEXT-ALIGN: right.dzieninny COLOR: gray; BACKGROUND-COLOR: silver; TEXT-ALIGN: right </STYLE> <META content="mshtml " name=generator></head> <BODY> <TABLE> <TBODY> <TR> <TD class=naglowekwolny>nd</td> <TD class=naglowek>pon</td> <TD class=naglowek>wt</td> <TD class=naglowek>sr</td> <TD class=naglowek>czw</td> <TD class=naglowek>pt</td> <TD class=naglowekwolny>sob</td></tr> <SCRIPT language=javascript>  2 3

24 <SCRIPT> var d = new Date(); d.setdate(); var m = d.getmonth() d.setdate( - d.getday() ); do document.write("<tr>"); for (var i=0; i<7; ++i) document.write("<td class=\"dzien"); if (d.getmonth()!= m) document.write("inny") else if (i==0 i==6) document.write("wolny") document.write("\">"); document.write( d.getdate() ); document.write("</td>"); d.setdate( d.getdate() + ) document.write("</tr>"); while (d.getmonth() == m) </TBODY></TABLE> <SCRIPT language=javascript>  </BODY> 2 4

25 Zegar <HEAD> <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso "> <STYLE>.details font-family : lucida sans unicode, verdana, century gothic, arial; font-size : 0; font-weight : normal; color : #ffffff; background-color : #000000; </STYLE> <SCRIPT LANGUAGE="JavaScript">  </HEAD> <BODY onload=curtime()> <SPAN CLASS=details ID=clock STYLE="position:relative;"></SPAN> </BODY> 2 5

26 Matematyka  Tabliczka mnożenia function tabliczka() document.write("<table border=\"\">"); for (i=; i<=0; i++) document.write("<tr><td>" + i + "</td>"); for (j=; j<=0; j++) if (j!= ) document.write("<td>" + i*j + "</td>"); document.write("</tr>"); document.write("</table>"); <script>tabliczka(); 2 6

27 Code Outputs \' single quote \" double quote \& ampersand \\ backslash \n new line \r carriage return \t tab \b backspace \f form feed onerror onerror=handleerr var txt="" function handleerr(msg,url,l) txt="there was an error on this page.\n\n" txt+="error: " + msg + "\n" txt+="url: " + url + "\n" txt+="line: " + l + "\n\n" txt+="click OK to continue.\n\n" alert(txt) return true function message() adddlert("welcome guest!") <input type="button" value="view message" onclick="message()" /> 2 7

28 6. Tworzenie okien Oto źródło: <script language="javascript"> function WinOpen() msg=open("","displaywindow","toolbar=no,directories=no,menubar=no"); msg.document.write("<head><title>yo!</title></head>"); msg.document.write("<center><h><b>to jest naprawdę fajne! </B></h></CENTER>"); <form> <input type="button" name="button" value="naciśnij mnie" onclick="winopen()"> </form>. Oto, co możesz zmienić na swojej stronie( zawsze bez spacji między nimi) toolbar location directories status menubar scrollbars resizable copyhistory width=piksele height=piksele 2 8